Add permCodes and checkbox options

bcgov · Apr 29, 2024 · 8f806e3 · 8f806e3
1 parent 483d12b
commit 8f806e3
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 10 deletions.
diff --git a/frontend/src/components/common/InviteButton.vue b/frontend/src/components/common/InviteButton.vue
@@ -4,7 +4,17 @@ import { computed, ref, onMounted } from 'vue';
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import ShareLinkContent from '@/components/object/share/ShareLinkContent.vue';
-import { Button, Dialog, TabView, TabPanel, RadioButton, InputText, useToast, InputSwitch } from '@/lib/primevue';
+import {
+  Button,
+  Dialog,
+  TabView,
+  TabPanel,
+  RadioButton,
+  Checkbox,
+  InputText,
+  useToast,
+  InputSwitch
+} from '@/lib/primevue';
 import { Permissions } from '@/utils/constants';
 import { inviteService } from '@/services';
 import { useAuthStore, useConfigStore, useObjectStore, usePermissionStore, useBucketStore } from '@/store';
@@ -24,6 +34,7 @@ export type InviteFormData = {
   bucketId?: string;
   expiresAt?: number;
   objectId?: string;
+  permCodes?: Array<string>;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -47,10 +58,10 @@ const obj: Ref<COMSObject | undefined> = ref(undefined);
 const bucket: Ref<Bucket | undefined> = ref(undefined);
 const isRestricted: Ref<boolean> = ref(props.restricted);
 const showInviteLink: Ref<boolean> = ref(false);
-const hasManagePermission: Ref<boolean> =  computed(() => {
-  return (props.objectId) ?
-    permissionStore.isObjectActionAllowed(props.objectId, getUserId.value, Permissions.MANAGE) :
-    permissionStore.isBucketActionAllowed(props.bucketId, getUserId.value, Permissions.MANAGE);
+const hasManagePermission: Ref<boolean> = computed(() => {
+  return props.objectId
+    ? permissionStore.isObjectActionAllowed(props.objectId, getUserId.value, Permissions.MANAGE)
+    : permissionStore.isBucketActionAllowed(props.bucketId, getUserId.value, Permissions.MANAGE);
 });
 
 // Share link
@@ -62,11 +73,27 @@ const timeFrames: Record<string, number> = {
   '1 Day (Default)': 86400,
   '1 Week': 604800
 };
-const formData: Ref<InviteFormData> = ref({ expiresAt: 86400 });
+
+const bucketPermCodes: Record<string, string> = {
+  READ: 'READ',
+  CREATE: 'UPLOAD',
+  UPDATE: 'UPDATE'
+};
+
+const objectPermCodes: Record<string, string> = {
+  READ: 'READ',
+  UPDATE: 'UPDATE'
+};
+
+const formData: Ref<InviteFormData> = ref({ expiresAt: 86400, permCodes: ['READ'] });
 
 // Dialog
 const displayInviteDialog = ref(false);
 
+// Permissions selection
+const selectedOptions = computed(() => {
+  return props.labelText === 'Bucket' ? bucketPermCodes : objectPermCodes;
+});
 // Share link
 const bcBoxLink = computed(() => {
   const path = props.objectId ? `detail/objects?objectId=${props.objectId}` : `list/objects?bucketId=${props.bucketId}`;
@@ -76,6 +103,11 @@ const comsUrl = computed(() => {
   return `${getConfig.value.coms?.apiPath}/object/${props.objectId}`;
 });
 
+const isOptionUnselectable = (optionName: string) => {
+  // Make default permission disabled
+  return optionName === 'READ';
+};
+
 //Action
 async function sendInvite() {
   try {
@@ -87,7 +119,8 @@ async function sendInvite() {
       props.bucketId,
       formData.value.email,
       expiresAt,
-      props.objectId
+      props.objectId,
+      formData.value.permCodes
     );
     inviteLink.value = `${window.location.origin}/invite/${permissionToken.data}`;
     toast.success('', 'Invite link is created.');
@@ -159,7 +192,7 @@ onMounted(() => {
         :disabled="!hasManagePermission"
       >
         <h3 class="mt-1 mb-2">{{ props.labelText }} Invite</h3>
-        <p>Make invite available for:</p>
+        <p>Make invite available for</p>
         <div class="flex flex-wrap gap-3">
           <div
             v-for="(value, name) in timeFrames"
@@ -180,6 +213,28 @@ onMounted(() => {
             </label>
           </div>
         </div>
+        <p class="mt-4 mb-2">Access options</p>
+        <div class="flex flex-wrap gap-3">
+          <div
+            v-for="(name, value) in selectedOptions"
+            :key="value"
+            class="flex align-items-center"
+          >
+            <Checkbox
+              v-model="formData.permCodes"
+              :input-id="value.toString()"
+              :name="name"
+              :value="value"
+              :disabled="isOptionUnselectable(name)"
+            />
+            <label
+              :for="value.toString()"
+              class="ml-2"
+            >
+              {{ name }}
+            </label>
+          </div>
+        </div>
         <p class="mt-4 mb-2">Restrict to user's email</p>
         <div class="p-inputgroup mb-4">
           <InputSwitch

diff --git a/frontend/src/services/inviteService.ts b/frontend/src/services/inviteService.ts
@@ -11,13 +11,15 @@ export default {
    * @param {string} email to be used for access
    * @param {string} expiration timestamp for token
    * @returns {string} uuid token of the invite
+   * @returns {array} permCodes token of the invite
    */
-  createInvite(bucketId?: string, email?: string, expiresAt?: number, objectId?: string) {
+  createInvite(bucketId?: string, email?: string, expiresAt?: number, objectId?: string, permCodes?: Array<string>) {
     return comsAxios().post(`${PATH}`, {
       bucketId: bucketId || undefined,
       email: email || undefined,
       expiresAt: expiresAt || undefined,
-      objectId: objectId || undefined
+      objectId: objectId || undefined,
+      permCodes: permCodes || undefined
     });
   },