-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,8 @@ import { object, string } from 'yup'; | |
import TextInput from '@/components/form/TextInput.vue'; | ||
import { Button, Dialog, Message, useToast } from '@/lib/primevue'; | ||
import { useAuthStore, useBucketStore } from '@/store'; | ||
import { useAuthStore, useBucketStore, useNavStore } from '@/store'; | ||
import { onDialogHide } from '@/utils/utils'; | ||
import type { Ref } from 'vue'; | ||
import type { Bucket } from '@/types'; | ||
|
@@ -19,6 +20,7 @@ const props = defineProps<{ | |
// Store | ||
const bucketStore = useBucketStore(); | ||
const { getUserId } = storeToRefs(useAuthStore()); | ||
const { focusedElement } = storeToRefs(useNavStore()); | ||
// Form validation | ||
const validationMessages: Ref<Array<string>> = ref([]); | ||
|
@@ -33,7 +35,12 @@ const schema = object({ | |
const toast = useToast(); | ||
const dialogIsVisible: Ref<boolean> = ref(false); | ||
const showDialog = (x: boolean) => { | ||
//debugger; | ||
dialogIsVisible.value = x; | ||
if (dialogIsVisible.value) { | ||
focusedElement.value = document.activeElement; | ||
//document?.getElementById('subfolder_label')?.focus(); TODO this can be delete | ||
} | ||
}; | ||
const onSubmit = async (values: any) => { | ||
|
@@ -64,7 +71,6 @@ const onCancel = () => { | |
class="p-button-lg p-button-text" | ||
aria-label="Add subfolder" | ||
@click="showDialog(true)" | ||
@keyup.enter="showDialog(true)" | ||
> | ||
<font-awesome-icon icon="fa-solid fa-folder-plus" /> | ||
</Button> | ||
|
@@ -75,21 +81,36 @@ const onCancel = () => { | |
:modal="true" | ||
:visible="dialogIsVisible" | ||
@update:visible="showDialog(false)" | ||
aria-labelledby="subfolder_label" | ||
Check warning on line 84 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (16.x)
Check warning on line 84 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (18.x)
Check warning on line 84 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (20.x)
Check warning on line 84 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (16.x)
Check warning on line 84 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (18.x)
Check warning on line 84 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (20.x)
|
||
aria-describedby="subfolder_desc" | ||
Check warning on line 85 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (16.x)
Check warning on line 85 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (18.x)
Check warning on line 85 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (20.x)
Check warning on line 85 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (16.x)
Check warning on line 85 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (18.x)
Check warning on line 85 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (20.x)
|
||
@after-hide="onDialogHide" | ||
> | ||
<template #header> | ||
<font-awesome-icon | ||
icon="fas fa-cog" | ||
fixed-width | ||
/> | ||
<span class="p-dialog-title">Add subfolder</span> | ||
<span | ||
id="subfolder_label" | ||
class="p-dialog-title" | ||
> | ||
Add subfolder | ||
</span> | ||
</template> | ||
|
||
<h3 class="bcbox-info-dialog-subhead mb-0">{{ props.parentBucket.bucketName }}</h3> | ||
<h3 | ||
id="subfolder_desc" | ||
class="bcbox-info-dialog-subhead mb-0" | ||
> | ||
{{ props.parentBucket.bucketName }} | ||
</h3> | ||
<ul class="mt-0 pl-3"> | ||
<li>Sets a subfolder to appear within a folder</li> | ||
</ul> | ||
<Form | ||
:validation-schema="schema" | ||
role="form" | ||
id="add-subfolder" | ||
Check warning on line 112 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (16.x)
Check warning on line 112 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (18.x)
Check warning on line 112 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (20.x)
Check warning on line 112 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (16.x)
Check warning on line 112 in frontend/src/components/bucket/BucketChildConfig.vue GitHub Actions / Unit Tests (Frontend) (18.x)
|
||
aria-label="Add subfolder" | ||
@submit="onSubmit" | ||
> | ||
<Message | ||
|
@@ -108,14 +129,14 @@ const onCancel = () => { | |
but it can't be changed after it is set.<br /> | ||
Folder levels are supported using '/' between levels (for example: 2024/January/my-documents).`" | ||
class="child-input" | ||
focus-trap | ||
/> | ||
<TextInput | ||
name="bucketName" | ||
label="Folder display name *" | ||
placeholder="My Documents" | ||
help-text="Your custom display name for the subfolder - any name as you would like to see it listed in BCBox." | ||
class="child-input" | ||
autofocus | ||
/> | ||
<Button | ||
class="p-button mt-2 mr-2" | ||
|