PermissionListModal.vue

<script setup lang="ts">
import type { BucketPermissionOut } from "@/client/s3proxy";
import type { FolderTree } from "@/types/PseudoFolder";
import { reactive } from "vue";
import { onBeforeMount, watch } from "vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import PermissionModal from "@/components/object-storage/modals/PermissionModal.vue";
import { useBucketStore } from "@/stores/buckets";

const bucketRepository = useBucketStore();
// Props
// -----------------------------------------------------------------------------
const props = defineProps<{
  bucketName: string;
  subFolders: FolderTree;
  modalID: string;
}>();

// Reactive State
// -----------------------------------------------------------------------------
const state = reactive<{
  currentPermission: BucketPermissionOut;
}>({
  currentPermission: {
    bucket_name: "bucketname",
    uid: "uid",
    permission: "READ",
    grantee_display_name: "display_name",
    from_timestamp: null,
    to_timestamp: null,
    file_prefix: null,
  },
});

const randomIDSuffix = Math.random().toString(16).substring(2, 8);

// Watchers
// -----------------------------------------------------------------------------
watch(
  () => props.bucketName,
  (newBucketName) => {
    updateBucketPermissions(newBucketName);
  },
);

// Function
// -----------------------------------------------------------------------------
function updateBucketPermissions(bucketName: string) {
  bucketRepository.fetchBucketPermissions(bucketName);
}

// Lifecycle Hooks
// -----------------------------------------------------------------------------
onBeforeMount(() => {
  updateBucketPermissions(props.bucketName);
});
</script>

<template>
  <permission-modal
    :deletable="true"
    :editable="true"
    :readonly="true"
    :edit-user-permission="state.currentPermission"
    :bucket-name="state.currentPermission.bucket_name"
    :sub-folders="props.subFolders"
    :back-modal-id="props.modalID"
    :modalID="'permission-list-edit-modal' + randomIDSuffix"
  />
  <bootstrap-modal
    :modalID="props.modalID"
    :static-backdrop="true"
    modal-label="Permission List Modal"
  >
    <template v-slot:header>
      Bucket Permissions for Bucket <i>{{ props.bucketName }}</i>
    </template>
    <template v-slot:body>
      <div>
        <div
          class="list-group"
          v-if="
            bucketRepository.getBucketPermissions(props.bucketName).length > 0
          "
        >
          <button
            type="button"
            class="list-group-item list-group-item-action text-truncate"
            v-for="permission in bucketRepository.getBucketPermissions(
              props.bucketName,
            )"
            :key="permission.uid"
            @click="state.currentPermission = permission"
            data-bs-toggle="modal"
            :data-bs-target="'#permission-list-edit-modal' + randomIDSuffix"
          >
            <div class="row">
              <span class="text-info col-2 text-start">{{
                permission.permission
              }}</span>
              <span class="col-9 text-center">
                {{ permission.grantee_display_name }}</span
              >
            </div>
          </button>
        </div>
        <div v-else>
          <h3 class="text-center">No Bucket Permissions for this bucket yet</h3>
        </div>
      </div>
    </template>
    <template v-slot:footer>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
        Close
      </button>
    </template>
  </bootstrap-modal>
</template>

<style scoped></style>