From 4ee18e29fa88d20f6ebdecba6feea2dfd444a55f Mon Sep 17 00:00:00 2001 From: Nick Rayburn <52075362+nrayburn-tech@users.noreply.github.com> Date: Wed, 25 May 2022 18:08:12 -0500 Subject: [PATCH] Add option to change sort by order to storage explorer --- .../Storage/Storage.constants.ts | 5 ++++ .../StorageExplorer/ColumnContextMenu.js | 7 ++++- .../Storage/StorageExplorer/FileExplorer.js | 2 ++ .../StorageExplorer/FileExplorerHeader.js | 23 ++++++++++++++-- .../StorageExplorer/StorageExplorer.js | 7 +++++ .../storageExplorer/StorageExplorerStore.js | 27 +++++++++++++------ 6 files changed, 60 insertions(+), 11 deletions(-) diff --git a/studio/components/to-be-cleaned/Storage/Storage.constants.ts b/studio/components/to-be-cleaned/Storage/Storage.constants.ts index c5af6131fa3..513504943c3 100644 --- a/studio/components/to-be-cleaned/Storage/Storage.constants.ts +++ b/studio/components/to-be-cleaned/Storage/Storage.constants.ts @@ -10,6 +10,11 @@ export const STORAGE_SORT_BY = { LAST_ACCESSED_AT: 'last_accessed_at', } +export const STORAGE_SORT_BY_ORDER = { + ASC: 'asc', + DESC: 'desc', +} + export const STORAGE_ROW_TYPES = { BUCKET: 'BUCKET', FILE: 'FILE', diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.js index eb372839f15..93e3c5260ec 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.js @@ -1,7 +1,7 @@ import { Menu, Item, Separator, Submenu } from 'react-contexify' import 'react-contexify/dist/ReactContexify.css' -import { STORAGE_VIEWS, STORAGE_SORT_BY } from '../Storage.constants' +import { STORAGE_VIEWS, STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER } from '../Storage.constants' const ColumnContextMenu = ({ id = '', @@ -9,6 +9,7 @@ const ColumnContextMenu = ({ onSelectAllItems = () => {}, onSelectView = () => {}, onSelectSort = () => {}, + onSelectSortByOrder = () => {}, }) => { return ( @@ -37,6 +38,10 @@ const ColumnContextMenu = ({ onSelectSort(STORAGE_SORT_BY.UPDATED_AT)}>Last modified onSelectSort(STORAGE_SORT_BY.LAST_ACCESSED_AT)}>Last accessed + + onSelectSortByOrder(STORAGE_SORT_BY_ORDER.ASC)}>Asc + onSelectSortByOrder(STORAGE_SORT_BY_ORDER.DESC)}>Desc + ) } diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js index 3123b00ef11..c76f2d2a2e4 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js @@ -29,6 +29,7 @@ const FileExplorer = ({ onSelectCreateFolder = () => {}, onChangeView = () => {}, onChangeSortBy = () => {}, + onChangeSortByOrder = () => {}, onColumnLoadMore = () => {}, }) => { const fileExplorerRef = useRef(null) @@ -53,6 +54,7 @@ const FileExplorer = ({ onSelectAllItems={onSelectAllItemsInColumn} onSelectView={onChangeView} onSelectSort={onChangeSortBy} + onSelectSortByOrder={onChangeSortByOrder} /> { return ( @@ -109,6 +109,7 @@ const HeaderBreadcrumbs = ({ loading, breadcrumbs, selectBreadcrumb }) => { const FileExplorerHeader = ({ view = STORAGE_VIEWS.COLUMNS, sortBy = STORAGE_SORT_BY.NAME, + sortByOrder = STORAGE_SORT_BY_ORDER.ASC, loading = {}, breadcrumbs = [], backDisabled = false, @@ -118,6 +119,7 @@ const FileExplorerHeader = ({ onSetPathByString = () => {}, onChangeView = () => {}, onChangeSortBy = () => {}, + onChangeSortByOrder = () => {}, onToggleSearch = () => {}, onFilesUpload = () => {}, onSelectBack = () => {}, @@ -330,6 +332,23 @@ const FileExplorerHeader = ({ Sort + + Asc + Desc + , + ]} + > + +
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js index c746560dae9..0c3cb6101ea 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js @@ -40,6 +40,8 @@ const StorageExplorer = observer(({ bucket }) => { setView, sortBy, setSortBy, + sortByOrder, + setSortByOrder, currentBucketName, copyFileURLToClipboard, openBucket, @@ -268,6 +270,8 @@ const StorageExplorer = observer(({ bucket }) => { const onChangeSortBy = (sortBy) => setSortBy(sortBy) + const onChangeSortByOrder = (sortByOrder) => setSortByOrder(sortByOrder) + const onToggleSearch = (bool) => { setIsSearching(bool) if (bool === false) { @@ -287,6 +291,7 @@ const StorageExplorer = observer(({ bucket }) => { column.name)} backDisabled={columns.length <= 1} @@ -295,6 +300,7 @@ const StorageExplorer = observer(({ bucket }) => { setItemSearchString={setItemSearchString} onChangeView={onChangeView} onChangeSortBy={onChangeSortBy} + onChangeSortByOrder={onChangeSortByOrder} onToggleSearch={onToggleSearch} onFilesUpload={onFilesUpload} onSelectBack={onSelectBack} @@ -335,6 +341,7 @@ const StorageExplorer = observer(({ bucket }) => { onSelectCreateFolder={onSelectCreateFolder} onChangeView={onChangeView} onChangeSortBy={onChangeSortBy} + onChangeSortByOrder={onChangeSortByOrder} onColumnLoadMore={(index, column) => fetchMoreFolderContents(index, column, itemSearchString) } diff --git a/studio/localStores/storageExplorer/StorageExplorerStore.js b/studio/localStores/storageExplorer/StorageExplorerStore.js index 229088768fb..202ce43bfd6 100644 --- a/studio/localStores/storageExplorer/StorageExplorerStore.js +++ b/studio/localStores/storageExplorer/StorageExplorerStore.js @@ -54,6 +54,7 @@ class StorageExplorerStore { loaded = false view = STORAGE_VIEWS.COLUMNS sortBy = STORAGE_SORT_BY.NAME + sortByOrder = 'asc' buckets = [] selectedBucket = {} selectedBucketToEdit = {} @@ -64,7 +65,7 @@ class StorageExplorerStore { selectedItemsToMove = [] selectedFilePreview = {} - DEFAULT_OPTIONS = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: 'asc' } } + DEFAULT_OPTIONS = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: this.sortByOrder } } /* Supabase client */ supabaseClient = null @@ -208,6 +209,13 @@ class StorageExplorerStore { await this.refetchAllOpenedFolders() } + setSortByOrder = async (sortByOrder) => { + this.sortByOrder = sortByOrder + this.closeFilePreview() + this.updateExplorerPreferences() + await this.refetchAllOpenedFolders() + } + clearColumns = () => { this.columns = [] } @@ -940,7 +948,7 @@ class StorageExplorerStore { limit: LIMIT, offset: OFFSET, search: searchString, - sortBy: { column: this.sortBy, order: 'asc' }, + sortBy: { column: this.sortBy, order: this.sortByOrder }, } const parameters = { signal: this.abortController.signal } @@ -973,7 +981,7 @@ class StorageExplorerStore { limit: LIMIT, offset: column.items.length, search: searchString, - sortBy: { column: this.sortBy, order: 'asc' }, + sortBy: { column: this.sortBy, order: this.sortByOrder }, } const parameters = { signal: this.abortController.signal } @@ -1012,7 +1020,7 @@ class StorageExplorerStore { const options = { limit: LIMIT, offset: OFFSET, - sortBy: { column: this.sortBy, order: 'asc' }, + sortBy: { column: this.sortBy, order: this.sortByOrder }, } const { data: items, error } = await this.supabaseClient.storage @@ -1152,7 +1160,7 @@ class StorageExplorerStore { } } - /* + /* Recursively returns a list of items along every directory within the specified base folder Each item has an extra property 'prefix' which has the prefix that leads to the item Used specifically for any operation that deals with every file along the folder @@ -1174,7 +1182,7 @@ class StorageExplorerStore { formattedPathToFolder = `${prefix}/${name}` } - const options = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: 'asc' } } + const options = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: this.sortByOrder } } const { data: folderContents } = await this.supabaseClient.storage .from(this.selectedBucket.name) .list(formattedPathToFolder, options) @@ -1338,6 +1346,7 @@ class StorageExplorerStore { const preferences = { view: this.view, sortBy: this.sortBy, + sortByOrder: this.sortByOrder, } localStorage.setItem(localStorageKey, JSON.stringify(preferences)) return preferences @@ -1347,13 +1356,15 @@ class StorageExplorerStore { const localStorageKey = this.getLocalStorageKey() const preferences = localStorage.getItem(localStorageKey) if (preferences) { - const { view, sortBy } = JSON.parse(preferences) + const { view, sortBy, sortByOrder } = JSON.parse(preferences) this.view = view this.sortBy = sortBy + this.sortByOrder = sortByOrder } else { - const { view, sortBy } = this.updateExplorerPreferences() + const { view, sortBy, sortByOrder } = this.updateExplorerPreferences() this.view = view this.sortBy = sortBy + this.sortByOrder = sortByOrder } } }