feat(files): recent sidebar functionality

Satellite-im · Apr 28, 2022 · 9c35a2d · 9c35a2d
1 parent c87c1d5
commit 9c35a2d
Show file tree

Hide file tree

Showing 15 changed files with 229 additions and 104 deletions.
diff --git a/components/ui/SimpleList/SimpleList.html b/components/ui/SimpleList/SimpleList.html
@@ -1,10 +1,10 @@
-<div class="simple-menu">
-  <ul class="menu-list">
-    <li
-      v-for="item in menuContent"
-      :class="`${item.active ? 'is-active' : ''}`"
-    >
-      <UiDynamicIcon size="1x" :icon="item.icon" /> {{item.text}}
-    </li>
-  </ul>
-</div>
+<ul class="menu-list">
+  <li
+    v-for="item in items"
+    :class="[{'is-active' : isActiveRoute(item.route)}, {'no-icon' : !item.icon}]"
+    @click="setActive(item.route)"
+  >
+    <component v-if="item.icon" :is="icons[item.icon]" size="1x" />
+    {{item.text}}
+  </li>
+</ul>
diff --git a/components/ui/SimpleList/SimpleList.less b/components/ui/SimpleList/SimpleList.less
@@ -1,33 +1,19 @@
-.simple-menu {
-  .menu-icon {
-    width: 15px;
-    margin-right: @light-spacing;
-  }
-
-  .active {
-    &:extend(.background-primary);
-    &:extend(.font-secondary);
-    border-radius: @corner-rounding-smaller;
+li {
+  cursor: pointer;
+  padding: @xlight-spacing @light-spacing;
+  margin: 0.2rem -@light-spacing;
+  display: inline-flex;
+  align-items: center;
+  border-radius: @corner-rounding-smaller;
+  &:extend(.full-width);
+  -webkit-user-select: none;
+  user-select: none;
 
-    &:hover {
-      &:extend(.background-primary);
-    }
+  &:hover {
+    background: @foreground;
   }
 
-  li {
-    cursor: pointer;
-    padding: (@light-spacing / 2) @light-spacing;
-    margin: 0.2rem -@light-spacing;
-    display: inline-flex;
-    align-items: center;
-    border-radius: @corner-rounding-smaller;
-    &:extend(.full-width);
-
-    .dynamic-icon {
-      margin-right: @light-spacing;
-    }
-    &:hover {
-      background: @foreground;
-    }
+  svg {
+    margin-right: @light-spacing;
   }
 }
diff --git a/components/ui/SimpleList/SimpleList.vue b/components/ui/SimpleList/SimpleList.vue
@@ -2,31 +2,62 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-
-import { MenuIcon } from 'satellite-lucide-icons'
-
-import { SimpleList } from '~/types/ui/sidebar'
+import {
+  ClockIcon,
+  TrashIcon,
+  HeartIcon,
+  FolderIcon,
+  LinkIcon,
+} from 'satellite-lucide-icons'
+import { FileIconsEnum, FileAsideRouteEnum } from '~/libraries/Enums/enums'
+import { SimpleItem } from '~/types/ui/sidebar'
 
 export default Vue.extend({
   components: {
-    MenuIcon,
+    ClockIcon,
+    TrashIcon,
+    HeartIcon,
+    FolderIcon,
+    LinkIcon,
   },
   props: {
-    /**
-     * Set the active route
-     */
-    active: {
-      type: String,
-      default: '',
-    },
-    /**
-     * List of sidebar content
-     */
-    menuContent: {
-      type: Array as PropType<SimpleList>,
+    items: {
+      type: Array as PropType<SimpleItem[]>,
       required: true,
     },
   },
+  computed: {
+    icons() {
+      return {
+        [FileIconsEnum.CLOCK]: ClockIcon,
+        [FileIconsEnum.TRASH]: TrashIcon,
+        [FileIconsEnum.HEART]: HeartIcon,
+        [FileIconsEnum.FOLDER]: FolderIcon,
+        [FileIconsEnum.LINK]: LinkIcon,
+      }
+    },
+  },
+  methods: {
+    setActive(route: FileAsideRouteEnum) {
+      if (!route) {
+        this.$router.push({ query: {} })
+        return
+      }
+      this.$router.push({ query: { route } })
+    },
+    isActiveRoute(route: FileAsideRouteEnum) {
+      if (!this.$route.query.route && route === FileAsideRouteEnum.DEFAULT) {
+        return true
+      }
+      if (
+        !Object.values(FileAsideRouteEnum).includes(this.$route.query.route) &&
+        route === FileAsideRouteEnum.DEFAULT
+      ) {
+        return true
+      }
+      return route === this.$route.query.route
+    },
+  },
 })
 </script>
 

diff --git a/components/views/files/aside/Aside.html b/components/views/files/aside/Aside.html
@@ -17,14 +17,10 @@
 
   <div>
     <TypographyText :size="6" :text="$t('pages.files.aside.quick_access')" />
-    <UiSimpleList
-      :menuContent="[{ text: 'Recent', icon: 'clock', active: true }, { text: 'Deleted', icon: 'trash' }, { text: 'Favorited', icon: 'heart' }]"
-    />
+    <UiSimpleList :items="quickAccessOptions" />
   </div>
   <div>
     <TypographyText :size="6" :text="$t('pages.files.aside.shared_items')" />
-    <UiSimpleList
-      :menuContent="[{ text: 'Shared Folders', icon: 'folder' }, { text: 'Links', icon: 'link' }]"
-    />
+    <UiSimpleList :items="sharedItemsOptions" />
   </div>
 </div>
diff --git a/components/views/files/aside/Aside.vue b/components/views/files/aside/Aside.vue
@@ -1,8 +1,16 @@
 <template src="./Aside.html"></template>
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
+import { SimpleItem } from '~/types/ui/sidebar'
+import { FileAsideRouteEnum } from '~/libraries/Enums/enums'
 
 export default Vue.extend({
+  props: {
+    active: {
+      type: String as PropType<FileAsideRouteEnum>,
+      required: true,
+    },
+  },
   data() {
     return {
       progress: this.$FileSystem.percentStorageUsed as number,
@@ -18,6 +26,44 @@ export default Vue.extend({
     sizeColor(): string {
       return this.progress > 90 ? 'red' : 'green'
     },
+    quickAccessOptions(): SimpleItem[] {
+      return [
+        {
+          text: this.$t('pages.files.aside.default'),
+          route: FileAsideRouteEnum.DEFAULT,
+          icon: 'folder',
+        },
+        {
+          text: this.$t('pages.files.aside.recent'),
+          route: FileAsideRouteEnum.RECENT,
+          icon: 'clock',
+        },
+        {
+          text: this.$t('pages.files.aside.deleted'),
+          route: FileAsideRouteEnum.DELETED,
+          icon: 'trash',
+        },
+        {
+          text: this.$t('pages.files.aside.favorited'),
+          route: FileAsideRouteEnum.FAVORITED,
+          icon: 'heart',
+        },
+      ]
+    },
+    sharedItemsOptions(): SimpleItem[] {
+      return [
+        {
+          text: this.$t('pages.files.aside.shared_folders'),
+          route: FileAsideRouteEnum.SHARED,
+          icon: 'folder',
+        },
+        {
+          text: this.$t('pages.files.aside.links'),
+          route: FileAsideRouteEnum.LINKS,
+          icon: 'link',
+        },
+      ]
+    },
   },
   watch: {
     totalSize() {

diff --git a/libraries/Enums/enums.ts b/libraries/Enums/enums.ts
@@ -10,7 +10,11 @@ import { WebRTCEnum } from '~/libraries/Enums/types/webrtc'
 import { SocialAccountTypesEnum } from '~/libraries/Enums/types/social'
 import { AddFriendEnum } from '~/libraries/Enums/types/addFriend'
 import { PlatformTypeEnum } from '~/libraries/Enums/types/platformType'
-import { FileSortEnum } from '~/libraries/Enums/types/fileSort'
+import {
+  FileSortEnum,
+  FileIconsEnum,
+  FileAsideRouteEnum,
+} from '~/libraries/Enums/types/files'
 
 export {
   KeybindingEnum,
@@ -26,4 +30,6 @@ export {
   SocialAccountTypesEnum,
   PlatformTypeEnum,
   FileSortEnum,
+  FileIconsEnum,
+  FileAsideRouteEnum,
 }
diff --git a/libraries/Enums/types/fileSort.ts b/libraries/Enums/types/fileSort.ts
diff --git a/libraries/Enums/types/files.ts b/libraries/Enums/types/files.ts
@@ -0,0 +1,23 @@
+export enum FileSortEnum {
+  NAME = 'name',
+  MODIFIED = 'modified',
+  TYPE = 'type',
+  SIZE = 'size',
+}
+
+export enum FileIconsEnum {
+  CLOCK = 'clock',
+  TRASH = 'trash',
+  HEART = 'heart',
+  FOLDER = 'folder',
+  LINK = 'link',
+}
+
+export enum FileAsideRouteEnum {
+  DEFAULT = '',
+  RECENT = 'recent',
+  DELETED = 'deleted',
+  FAVORITED = 'favorited',
+  SHARED = 'shared',
+  LINKS = 'links',
+}
diff --git a/libraries/Files/FilSystem.ts b/libraries/Files/FilSystem.ts
@@ -98,37 +98,47 @@ export class FilSystem {
   }
 
   /**
-   * @getter flat
-   * @returns {ExportItem[]} flattened list of files in order to check if file exists
-   */
-  get flat(): ExportItem[] {
-    const flatDeepByKey = (
-      data: Array<ExportItem | ExportFile>,
-      key: keyof ExportDirectory | keyof ExportFile,
-    ) => {
-      return data.reduce((prev, el) => {
-        prev.push(el)
-        if (el[key]) {
-          prev.push(...flatDeepByKey(el[key], key))
-        }
-        return prev
-      }, [])
-    }
-    return flatDeepByKey(this.export.content, 'children')
+   * @getter flatFiles
+   * @returns {Fil[]} flattened list of files
+   */
+  get flat(): Fil[] {
+    return this._flatDeepByKey(this._self.content, 'content').filter(
+      (item: Item) => item instanceof Fil,
+    )
+  }
+
+  /**
+   * @getter flatFiles
+   * @returns {Fil[]} flattened list of most recent 15 files
+   */
+  get recentFiles(): Fil[] {
+    return this.flat
+      .sort((a: Fil, b: Fil) => b.modified - a.modified)
+      .slice(0, 14)
+  }
+
+  /**
+   * @method _flatDeepByKey
+   * @description recursively converts item to the proper format for export
+   * @param {}
+   * @returns {Item[]} flattened list of files and directories
+   */
+  private _flatDeepByKey(data: Item[], key: keyof Directory) {
+    return data.reduce((prev, el) => {
+      prev.push(el)
+      if (el[key]) {
+        prev.push(...this._flatDeepByKey(el[key], key))
+      }
+      return prev
+    }, [])
   }
 
   /**
    * @getter totalSize
    * @returns {number} total size of all tracked files
    */
   get totalSize(): number {
-    return this.flat.reduce(
-      (total, curr) =>
-        (Object.values(FILE_TYPE) as string[]).includes(curr.type)
-          ? total + (curr as ExportFile).size
-          : total,
-      0,
-    )
+    return this.flat.reduce((total, curr) => total + curr.size, 0)
   }
 
   /**

diff --git a/libraries/Files/test/FilSystem.test.ts b/libraries/Files/test/FilSystem.test.ts
@@ -82,7 +82,7 @@ describe('Test FilSystem', () => {
     expect(filesystem.percentStorageUsed).toBe(0.4337487))
   it(`Correctly exports filesystem`, () =>
     expect(filesystem.export).toMatchObject({
-      version: 3,
+      version: 1,
       type: FILESYSTEM_TYPE.DEFAULT,
     }))
   it(`Correctly copies entire filesystem`, () =>

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -162,7 +162,13 @@ export default {
         free_tier: 'Free Tier',
         upgrade: 'Upgrade',
         quick_access: 'Quick Access',
+        default: 'Default',
+        recent: 'Recent',
+        deleted: 'Deleted',
+        favorited: 'Favorited',
         shared_items: 'Shared Items',
+        shared_folders: 'Shared Folders',
+        links: 'Links',
         coming_soon: 'Coming soon',
       },
       upload: {

diff --git a/pages/files/browse/Browse.html b/pages/files/browse/Browse.html
@@ -1,5 +1,9 @@
 <div id="files" class="hidden-scroll" v-scroll-lock="true">
-  <FilesAside v-if="$device.isMobile" class="mobile-file-aside" />
+  <FilesAside
+    v-if="$device.isMobile"
+    class="mobile-file-aside"
+    :active="activeRoute"
+  />
   <div class="files-top">
     <FilesFilepath />
   </div>
@@ -36,6 +40,10 @@
         @handle="handle"
       />
     </div>
-    <FilesAside v-if="!$device.isMobile" class="files-right" />
+    <FilesAside
+      v-if="!$device.isMobile"
+      class="files-right"
+      :active="activeRoute"
+    />
   </div>
 </div>