JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite/veutify-poc: create folder

Browse Source 
This change adds the ability to create folders in the file browser.

Issue: https://github.com/storj/storj/issues/6105

Change-Id: I0dae0f9874b571cfd0ae79b2b994b58149d70aa3
This commit is contained in:
Wilfred Asomani 2023-09-07 11:30:39 +00:00 committed by Storj Robot
parent 54379fc0ee
commit 2bf4113821
1 changed files with 53 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/satellite/vuetify-poc/src/components/dialogs/BrowserNewFolderDialog.vue
View File

@ -9,7 +9,7 @@
min-width="400px" min-width="400px"
transition="fade-transition" transition="fade-transition"
> >
<v-card rounded="xlg"> <v-card ref="innerContent" rounded="xlg">
<v-sheet> <v-sheet>
<v-card-item class="pl-7 py-4"> <v-card-item class="pl-7 py-4">
<template #prepend> <template #prepend>
@ -32,7 +32,7 @@
<v-divider /> <v-divider />
<v-form class="pa-8 pb-3"> <v-form v-model="formValid" class="pa-8 pb-3">
<v-row> <v-row>
<v-col <v-col
cols="12" cols="12"
@ -42,6 +42,7 @@
variant="outlined" variant="outlined"
:rules="folderRules" :rules="folderRules"
label="Enter Folder Name" label="Enter Folder Name"
:hide-details="false"
required required
autofocus autofocus
/> />
@ -57,7 +58,7 @@
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn> <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col> </v-col>
<v-col> <v-col>
<v-btn color="primary" variant="flat" block>Create Folder</v-btn> <v-btn color="primary" variant="flat" :disabled="!formValid" block @click="createFolder">Create Folder</v-btn>
</v-col> </v-col>
</v-row> </v-row>
</v-card-actions> </v-card-actions>
@ -66,7 +67,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { Component, computed, ref, watch } from 'vue';
import { import {
VDialog, VDialog,
VCard, VCard,
@ -82,8 +83,53 @@ import {
VCardActions, VCardActions,
} from 'vuetify/components'; } from 'vuetify/components';
const dialog = ref<boolean>(false); import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
const folder = ref<string>(''); import { useAppStore } from '@/store/modules/appStore';
import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useLoading } from '@/composables/useLoading';
const folderRules = [(value: string) => (!!value || 'Folder name is required.')]; const obStore = useObjectBrowserStore();
const appStore = useAppStore();
const notify = useNotify();
const { isLoading, withLoading } = useLoading();
const dialog = ref<boolean>(false);
const formValid = ref<boolean>(false);
const folder = ref<string>('');
const innerContent = ref<Component | null>(null);
const folderRules = [
(value: string) => (!!value || 'Folder name is required.'),
(value: string) => (value.trim().length > 0 || 'Name must not be only space.'),
(value: string) => (value.indexOf('/') === -1 || 'Name must not contain "/".'),
(value: string) => ([...value.trim()].filter(c => c === '.').length !== value.trim().length || 'Name must not be only periods.'),
(value: string) => (files.value.filter(f => f.Key === value.trim()).length === 0 || 'This folder already exists.'),
];
/**
* Retrieve all the files sorted from the store.
*/
const files = computed((): BrowserObject[] => {
return obStore.sortedFiles;
});
function createFolder(): void {
withLoading(async () => {
try {
await obStore.createFolder(folder.value.trim());
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.CREATE_FOLDER_MODAL);
}
dialog.value = false;
});
}
watch(innerContent, comp => {
if (!comp) {
folder.value = '';
return;
}
});
</script> </script>