Imageselector

packages/design-system/src/components/OcPageSize/OcPageSize.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-page-size">
+  <div :class="['oc-page-size', { 'space-between': isSpaceBetween }]">
     <label
       class="oc-page-size-label"
       :for="selectId"
@@ -67,6 +67,15 @@ export default defineComponent({
       type: String,
       required: false,
       default: () => uniqueId('oc-page-size-')
+    },
+
+    /**
+     * Decides whether there should be space between the label and the oc-select element
+     */
+    isSpaceBetween: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['change'],
@@ -96,6 +105,10 @@ export default defineComponent({
     min-width: var(--oc-size-width-xsmall);
   }
 }
+
+.space-between {
+  justify-content: space-between;
+}
 </style>
 
 <docs>

packages/web-app-files/src/store/getters.ts

@@ -1,5 +1,6 @@
 import { isProjectSpaceResource } from 'web-client/src/helpers'
 import { ShareTypes } from 'web-client/src/helpers/share'
+import { useFilter } from 'web-pkg/src'
 
 export default {
   selectedFiles: (state, getters) => {
@@ -22,7 +23,7 @@ export default {
     return state.clipboardAction
   },
   activeFiles: (state, getters) => {
-    let files = [].concat(getters.filesAll)
+    let files = useFilter([].concat(getters.filesAll), state.activeResourceFilter)
 
     if (!state.areHiddenFilesShown) {
       files = files.filter((file) => !file.name.startsWith('.'))

packages/web-app-files/src/store/mutations.ts

@@ -213,6 +213,18 @@ export default {
     window.localStorage.setItem('oc_fileExtensionsShown', value)
   },
 
+  SET_ACTIVE_RESOURCE_FILTER(state, value: string) {
+    state.activeResourceFilter = value
+
+    window.localStorage.setItem('oc_activeResourceFilter', value)
+  },
+
+  SET_ACTIVE_FILE_TYPE(state, value: string) {
+    state.activeFileType = value
+
+    window.localStorage.setItem('oc_activeFileType', value)
+  },
+
   SET_ANCESTOR_META_DATA(state, value) {
     state.ancestorMetaData = value
   },

packages/web-pkg/src/components/ViewOptions.vue

@@ -83,6 +83,16 @@
             @input="setTilesViewSize"
           />
         </li>
+        <li class="files-view-options-list-item">
+          <oc-page-size
+            v-model="filteredResourcesModel"
+            :options="resourceTypes"
+            label="Filetype"
+            :selected="filteredResourcesModel ?? 'No filter'"
+            is-space-between
+            @change="updateSelectedResourceTypeModel"
+          />
+        </li>
       </oc-list>
     </oc-drop>
   </div>
@@ -103,6 +113,7 @@ import {
   useRouteName
 } from 'web-pkg/src/composables'
 import { ViewMode } from 'web-pkg/src/ui/types'
+import { ResourceFilterConstants } from 'web-pkg/src/composables'
 
 export default defineComponent({
   props: {
@@ -166,6 +177,10 @@ export default defineComponent({
       defaultValue: ViewModeConstants.tilesSizeDefault.toString()
     })
 
+    const resourceTypes: string[] = ResourceFilterConstants.resourceOptions.map((filter) => {
+      return $gettext(filter)
+    })
+
     const setTilesViewSize = () => {
       const rootStyle = (document.querySelector(':root') as HTMLElement).style
       const currentSize = rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
@@ -216,11 +231,17 @@ export default defineComponent({
       setTilesViewSize,
       setItemsPerPage,
       setViewMode,
-      viewOptionsButtonLabel: $gettext('Display customization options of the files list')
+      viewOptionsButtonLabel: $gettext('Display customization options of the files list'),
+      resourceTypes
     }
   },
   computed: {
-    ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
+    ...mapState('Files', [
+      'areHiddenFilesShown',
+      'areFileExtensionsShown',
+      'activeResourceFilter',
+      'activeFileType'
+    ]),
 
     hiddenFilesShownModel: {
       get() {
@@ -239,17 +260,33 @@ export default defineComponent({
       set(value) {
         this.SET_FILE_EXTENSIONS_VISIBILITY(value)
       }
+    },
+    filteredResourcesModel: {
+      get() {
+        return this.activeResourceFilter
+      },
+
+      set(value: string) {
+        this.SET_ACTIVE_RESOURCE_FILTER(value)
+      }
     }
   },
   methods: {
     queryItemAsString,
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
+    ...mapMutations('Files', [
+      'SET_HIDDEN_FILES_VISIBILITY',
+      'SET_FILE_EXTENSIONS_VISIBILITY',
+      'SET_ACTIVE_RESOURCE_FILTER'
+    ]),
 
     updateHiddenFilesShownModel(event) {
       this.hiddenFilesShownModel = event
     },
     updateFileExtensionsShownModel(event) {
       this.fileExtensionsShownModel = event
+    },
+    updateSelectedResourceTypeModel(resourceType: string) {
+      this.filteredResourcesModel = resourceType
     }
   }
 })

packages/web-pkg/src/composables/filters/constants.ts

@@ -0,0 +1,81 @@
+export abstract class ResourceFilterConstants {
+  static readonly resourceOptions: string[] = [
+    'No filter',
+    'Images',
+    'Textfiles',
+    'Script files',
+    'Folders'
+  ]
+
+  static readonly mediaFileTypes = [
+    'jpg',
+    'jpeg',
+    'png',
+    'bmp',
+    'gif',
+    'tiff',
+    'svg',
+    'raw',
+    'webp',
+    'heif',
+    'ico',
+    'psd',
+    'mp3',
+    'wav',
+    'flac',
+    'aac',
+    'mp4',
+    'avi',
+    'mov',
+    'wmv'
+  ]
+
+  static readonly textfileTypes = [
+    'txt',
+    'docx',
+    'doc',
+    'md',
+    'xml',
+    'html',
+    'yaml',
+    'yml',
+    'csv',
+    'gsheet',
+    'xls',
+    'xlsx'
+  ]
+
+  static readonly scriptTypes = [
+    'c',
+    'cpp',
+    'cs',
+    'py',
+    'java',
+    'js',
+    'ts',
+    'php',
+    'swift',
+    'go',
+    'rb',
+    'sh',
+    'rs',
+    'kt',
+    'dart',
+    'pl',
+    'lua',
+    'r',
+    'groovy',
+    'scala',
+    'cls',
+    'pas',
+    'abap',
+    'cob',
+    'f',
+    'asm',
+    'vbs',
+    'v',
+    'sv',
+    'vhdl',
+    'json'
+  ]
+}

packages/web-pkg/src/composables/filters/index.ts

@@ -0,0 +1,2 @@
+export * from './useFilter'
+export * from './constants'

packages/web-pkg/src/composables/filters/useFilter.ts

@@ -0,0 +1,30 @@
+import { Resource } from 'web-client/src'
+import { ResourceFilterConstants } from './constants'
+
+export function useFilter(files: any[], filter: string) {
+  let filteredItems = files as Resource[]
+  const filters = ResourceFilterConstants.resourceOptions
+
+  switch (filter) {
+    case filters[1]:
+      filteredItems = filteredItems.filter((item) =>
+        ResourceFilterConstants.mediaFileTypes.includes(item.extension)
+      )
+      break
+    case filters[2]:
+      filteredItems = filteredItems.filter((item) =>
+        ResourceFilterConstants.textfileTypes.includes(item.extension)
+      )
+      break
+    case filters[3]:
+      filteredItems = filteredItems.filter((item) => item.isFolder)
+      break
+    case filters[4]:
+      filteredItems = filteredItems.filter((item) =>
+        ResourceFilterConstants.scriptTypes.includes(item.extension)
+      )
+    default:
+      break
+  }
+  return filteredItems
+}

packages/web-pkg/src/composables/index.ts

@@ -18,3 +18,4 @@ export * from './fileListHeaderPosition'
 export * from './viewMode'
 export * from './search'
 export * from './sse'
+export * from './filters'