bucket child config

frontend/src/assets/main.scss

@@ -357,3 +357,8 @@ a:visited {
 a.p-tabview-header-action {
   text-decoration: none;
 }
+
+/* forms */
+.field span[role="alert"] {
+  color: $bcbox-error;
+}

frontend/src/assets/variables.scss

@@ -11,6 +11,7 @@ $bcbox-primary: #036;
 $bcbox-link-text: #1a5a96;
 $bcbox-link-text-hover: #00f;
 $bcbox-outline-on-primary: #fff;
+$bcbox-error: #d8292f;
 
 // highlighted sections, table rows
 $bcbox-highlight-background: #d9e1e8;

frontend/src/components/bucket/BucketChildConfig.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { Form } from 'vee-validate';
+import { ref, onMounted } from 'vue';
+import { object, string } from 'yup';
+
+import TextInput from '@/components/form/TextInput.vue';
+import { Button, Dialog, Message, useToast } from '@/lib/primevue';
+import { useBucketStore } from '@/store';
+// import { differential, joinPath } from '@/utils/utils';
+
+import type { Ref } from 'vue';
+// import type { Bucket } from '@/types';
+
+// export type BucketChildForm = {
+//   bucketName?: string;
+//   subKey?: string;
+// };
+
+// Props
+const props = defineProps<{
+  parentBucketId: string;
+}>();
+
+// Store
+const bucketStore = useBucketStore();
+// const { getUserId } = storeToRefs(useAuthStore());
+
+// Form validation schema
+const schema = object({
+  bucketName: string()
+    .max(255)
+    // .required()
+    .label('Folder name'),
+  subKey: string()
+    .matches(/^[^\\]+$/, 'Sub-path must not contain backslashes')
+    .max(255)
+    // .required()
+    .label('Folder sub-path')
+});
+
+// Actions
+const toast = useToast();
+const dialogIsVisible: Ref<boolean> = ref(false);
+const showDialog = (x: boolean) => {
+  dialogIsVisible.value = x;
+};
+
+const onSubmit = async (values: any) => {
+  try {
+    // data
+    const formData = {
+      bucketName: values.bucketName,
+      subKey: values.subKey
+    };
+    // call service
+    await bucketStore.createBucketChild(props.parentBucketId, formData.subKey, formData.bucketName);
+    // close dialog
+    showDialog(false);
+    // show toast
+    toast.success('Adding Folder to a bucket', 'Folder configuration successful');
+  } catch (error: any) {
+    toast.error('Adding Folder to a bucket', error);
+  }
+};
+const onCancel = () => {
+  showDialog(false);
+};
+</script>
+
+<template>
+  <div>
+    <Button
+      v-tooltip.bottom="'Add folder to a bucket'"
+      class="p-button-lg p-button-text"
+      aria-label="Add folder to a bucket"
+      @click="showDialog(true)"
+    >
+      <font-awesome-icon icon="fa-solid fa-folder-plus" />
+    </Button>
+
+    <Dialog
+      class="bcbox-info-dialog"
+      :style="{ width: '50vw' }"
+      :modal="true"
+      :visible="dialogIsVisible"
+      @update:visible="showDialog(false)"
+    >
+      <template #header>
+        <font-awesome-icon
+          icon="fas fa-cog"
+          fixed-width
+        />
+        <span class="p-dialog-title">Add Folder</span>
+      </template>
+
+      <h3 class="bcbox-info-dialog-subhead">sub-head</h3>
+
+      <Form
+        :validation-schema="schema"
+        @submit="onSubmit"
+      >
+        <TextInput
+          name="subKey"
+          label="Sub-path"
+          placeholder="documents"
+          help-text="The directory will be created if it does not already exist.
+          Sub-paths are supported using '/' between levels.
+          This value cannot be changed after it is set."
+        />
+        <TextInput
+          name="bucketName"
+          label="Folder display name *"
+          placeholder="My Documents"
+          help-text="Your custom display name for the bucket - any name as you would like to see it listed in BCBox."
+          autofocus
+        />
+        <Button
+          class="p-button mt-2 mr-1"
+          label="Apply"
+          type="submit"
+          icon="pi pi-check"
+        />
+        <Button
+          class="p-button-outlined mt-2"
+          label="Cancel"
+          icon="pi pi-times"
+          @click="onCancel"
+        />
+      </Form>
+    </Dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.p-inputtext) {
+  width: 100% !important;
+}
+</style>

frontend/src/components/bucket/BucketTable.vue

@@ -2,7 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
 
-import { BucketPermission, BucketTableBucketName } from '@/components/bucket';
+import { BucketChildConfig, BucketPermission, BucketTableBucketName } from '@/components/bucket';
 import { Spinner } from '@/components/layout';
 import { SyncButton } from '@/components/common';
 import { Button, Column, Dialog, TreeTable, useConfirm } from '@/lib/primevue';
@@ -297,6 +297,10 @@ watch(getBuckets, () => {
     >
       <template #body="{ node }">
         <span v-if="!node.data.dummy">
+          <BucketChildConfig
+            v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.MANAGE)"
+            :parent-bucket-id="node.data.bucketId"
+          />
           <Button
             v-if="permissionStore.isBucketActionAllowed(node.data.bucketId, getUserId, Permissions.UPDATE)"
             v-tooltip.bottom="'Configure bucket'"

frontend/src/components/bucket/index.ts

@@ -1,3 +1,4 @@
+export { default as BucketChildConfig } from './BucketChildCOnfig.vue';
 export { default as BucketConfigForm } from './BucketConfigForm.vue';
 export { default as BucketList } from './BucketList.vue';
 export { default as BucketPermission } from './BucketPermission.vue';

frontend/src/services/bucketService.ts

@@ -25,6 +25,26 @@ export default {
     return comsAxios().put(`${BUCKET_PATH}`, data);
   },
 
+  /**
+   * @function createBucketChild
+   * Creates a bucket
+   * @param {string} parentBucketId ID of parent COMS 'bucket'
+   * @param {string} subKey 'sub-folder' name (last part of the key)
+   * @param {string} bucketName Display name for the mapped sub-folder
+   * @returns {Promise} An axios response or error details
+   */
+  async createBucketChild(parentBucketId: string, subKey: string, bucketName: string) {
+    await comsAxios()
+      .patch(`${BUCKET_PATH}/cff69387-b598-4042-814b-a91714147daa`, { a: 'a', key: '' })
+      // .put(`${BUCKET_PATH}/${parentBucketId}`, { subKey, bucketName })
+      .then((result) => {
+        return result;
+      })
+      .catch((error) => {
+        return Promise.reject(error.response);
+      });
+  },
+
   /**
    * @function deleteBucket
    * Deletes a bucket

frontend/src/store/bucketStore.ts

@@ -41,6 +41,33 @@ export const useBucketStore = defineStore('bucket', () => {
     }
   }
 
+  async function createBucketChild(parentBucketId: string, subKey: string, bucketName: string) {
+    // try {
+    appStore.beginIndeterminateLoading();
+
+    // 422 key length too long
+    // 409 if child bucket exias
+    // 409 if credentials aret valid
+    bucketService
+      .createBucketChild(parentBucketId, subKey, bucketName)
+      .then((result) => {
+        console.log('ok');
+        return result;
+      })
+      .catch((response) => {
+        console.log('error:', response);
+        if (response.status === 409 && response.title === 'Conflict') {
+          return response.detail;
+        }
+        if (response.status === 422) {
+          return response.data.detail;
+        }
+      })
+      .finally(() => {
+        appStore.endIndeterminateLoading();
+      });
+  }
+
   async function deleteBucket(bucketId: string) {
     try {
       appStore.beginIndeterminateLoading();
@@ -120,6 +147,7 @@ export const useBucketStore = defineStore('bucket', () => {
 
     // Actions
     createBucket,
+    createBucketChild,
     deleteBucket,
     fetchBuckets,
     findBucketById,