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"
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card ref="innerContent" rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
@ -32,7 +32,7 @@
<v-divider />
<v-form class="pa-8 pb-3">
<v-form v-model="formValid" class="pa-8 pb-3">
<v-row>
<v-col
cols="12"
@ -42,6 +42,7 @@
variant="outlined"
:rules="folderRules"
label="Enter Folder Name"
:hide-details="false"
required
autofocus
/>
@ -57,7 +58,7 @@
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</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-row>
</v-card-actions>
@ -66,7 +67,7 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Component, computed, ref, watch } from 'vue';
import {
VDialog,
VCard,
@ -82,8 +83,53 @@ import {
VCardActions,
} from 'vuetify/components';
const dialog = ref<boolean>(false);
const folder = ref<string>('');
import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
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>