v1.5-alpha.1

resources/js/views/FilePages/Files.vue

@@ -0,0 +1,178 @@
+<template>
+    <section id="viewport" v-if="app">
+
+        <ContentSidebar>
+
+            <!--Locations-->
+            <ContentGroup title="Base">
+                <div class="menu-list-wrapper">
+                    <a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
+                        <div class="icon">
+                            <home-icon size="17"></home-icon>
+                        </div>
+                        <div class="label">
+                            Home
+                        </div>
+                    </a>
+                    <a class="menu-list-item link" :class="{'is-active': $isThisLocation(['latest'])}"
+                       @click="getLatest">
+                        <div class="icon">
+                            <upload-cloud-icon size="17"></upload-cloud-icon>
+                        </div>
+                        <div class="label">
+                            Recent Uploads
+                        </div>
+                    </a>
+                </div>
+            </ContentGroup>
+
+            <!--Navigator-->
+            <ContentGroup title="Navigator" class="navigator">
+                <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="items" v-for="items in app.tree"
+                                   :key="items.unique_id"/>
+            </ContentGroup>
+
+            <!--Favourites-->
+            <ContentGroup :title="$t('sidebar.favourites')">
+
+                <div class="menu-list-wrapper favourites"
+                     :class="{ 'is-dragenter': area }"
+                     @dragover.prevent="dragEnter"
+                     @dragleave="dragLeave"
+                     @drop="dragFinish($event)"
+                >
+                    <transition-group tag="div" class="menu-list" name="folder-item">
+                        <a class="empty-list" v-if="app.favourites.length == 0" :key="0">
+                            {{ $t('sidebar.favourites_empty') }}
+                        </a>
+
+                        <a @click.stop="openFolder(folder)"
+                           class="menu-list-item"
+                           :class="{'is-current': currentFolder.unique_id === folder.unique_id}"
+                           v-for="folder in app.favourites"
+                           :key="folder.unique_id">
+                            <div>
+                                <folder-icon size="17" class="folder-icon"></folder-icon>
+                                <span class="label">{{ folder.name }}</span>
+                            </div>
+                            <x-icon size="17" @click.stop="removeFavourite(folder)" class="delete-icon"></x-icon>
+                        </a>
+                    </transition-group>
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+
+        <ContentFileView/>
+    </section>
+</template>
+
+<script>
+    import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
+    import ContentFileView from '@/components/Others/ContentFileView'
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+    import {
+        UploadCloudIcon,
+        FolderIcon,
+        HomeIcon,
+        XIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'FilesView',
+        components: {
+            TreeMenuNavigator,
+            ContentFileView,
+            ContentSidebar,
+            UploadCloudIcon,
+            ContentGroup,
+            FolderIcon,
+            HomeIcon,
+            XIcon,
+        },
+        computed: {
+            ...mapGetters(['app', 'homeDirectory', 'currentFolder']),
+        },
+        data() {
+            return {
+                area: false,
+                draggedItem: undefined,
+            }
+        },
+        methods: {
+            getLatest() {
+                this.$store.dispatch('getLatest')
+            },
+            goHome() {
+                this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
+            },
+            openFolder(folder) {
+                this.$store.dispatch('getFolder', [{folder: folder, back: false, init: false}])
+            },
+            dragEnter() {
+                if (this.draggedItem && this.draggedItem.type !== 'folder') return
+
+                this.area = true
+            },
+            dragLeave() {
+                this.area = false
+            },
+            dragFinish() {
+                this.area = false
+
+                // Check if draged item is folder
+                if (this.draggedItem && this.draggedItem.type !== 'folder') return
+
+                // Check if folder exist in favourites
+                if (this.app.favourites.find(folder => folder.unique_id == this.draggedItem.unique_id)) return
+
+                // Store favourites folder
+                this.$store.dispatch('addToFavourites', this.draggedItem)
+
+            },
+            removeFavourite(folder) {
+                this.$store.dispatch('removeFromFavourites', folder)
+            }
+        },
+        created() {
+            this.goHome()
+
+            // Listen for dragstart folder items
+            events.$on('dragstart', (item) => this.draggedItem = item)
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+    .navigator {
+        width: 100%;
+        overflow-x: auto;
+    }
+
+    // Transition
+    .folder-item-move {
+        transition: transform 300s ease;
+    }
+
+    .folder-item-enter-active {
+        transition: all 300ms ease;
+    }
+
+    .folder-item-leave-active {
+        transition: all 300ms;
+    }
+
+    .folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
+    {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+
+    .folder-item-leave-active {
+        position: absolute;
+    }
+
+</style>

resources/js/views/FilePages/SharedFiles.vue

@@ -0,0 +1,67 @@
+<template>
+    <section id="viewport">
+
+        <ContentSidebar>
+
+            <!--Navigator-->
+            <ContentGroup title="Base">
+                <div class="menu-list-wrapper">
+                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared()">
+                        <div class="icon">
+                            <link-icon size="17"></link-icon>
+                        </div>
+                        <div class="label">
+                            My Shared Items
+                        </div>
+                    </li>
+                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads()">
+                        <div class="icon">
+                            <users-icon size="17"></users-icon>
+                        </div>
+                        <div class="label">
+                            Participant Uploads
+                        </div>
+                    </li>
+                </div>
+            </ContentGroup>
+
+        </ContentSidebar>
+
+        <ContentFileView />
+    </section>
+</template>
+
+<script>
+    import ContentFileView from '@/components/Others/ContentFileView'
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import {
+        LinkIcon,
+        UsersIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'FilesView',
+        components: {
+            ContentFileView,
+            ContentSidebar,
+            ContentGroup,
+            LinkIcon,
+            UsersIcon,
+        },
+        methods: {
+            getShared() {
+                this.$store.dispatch('getShared', [{back: false, init: false}])
+            },
+            getParticipantUploads() {
+                this.$store.dispatch('getParticipantUploads')
+            },
+        },
+        mounted() {
+            this.getShared()
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+</style>

resources/js/views/FilePages/Trash.vue

@@ -0,0 +1,51 @@
+<template>
+    <section id="viewport">
+        <ContentSidebar>
+
+            <!--Tools-->
+            <ContentGroup title="Tools" class="navigator">
+                <div class="menu-list-wrapper">
+                    <div class="menu-list-item link" @click="emptyTrash()">
+                        <div class="icon">
+                            <trash-icon size="17"></trash-icon>
+                        </div>
+                        <div class="label">
+                            Empty Trash
+                        </div>
+                    </div>
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+        <ContentFileView/>
+    </section>
+</template>
+
+<script>
+    import ContentFileView from '@/components/Others/ContentFileView'
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import {
+        TrashIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'FilesView',
+        components: {
+            ContentFileView,
+            ContentSidebar,
+            ContentGroup,
+            TrashIcon,
+        },
+        methods: {
+            emptyTrash() {
+                this.$store.dispatch('emptyTrash')
+            },
+        },
+        created() {
+            this.$store.dispatch('getTrash')
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+</style>