PermissionListModal.vue

<script setup lang="ts">
import type { BucketPermissionIn, BucketPermissionOut } from "@/client/s3proxy";
import type { FolderTree } from "@/types/PseudoFolder";
import { reactive } from "vue";
import { BucketPermissionService } from "@/client/s3proxy";
import { onBeforeMount, watch } from "vue";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import PermissionModal from "@/components/Modals/PermissionModal.vue";

// Props
// -----------------------------------------------------------------------------
const props = defineProps<{
  bucketName: string;
  subFolders: FolderTree;
  modalID: string;
  addPermission: undefined | BucketPermissionOut;
}>();

// Reactive State
// -----------------------------------------------------------------------------
const state = reactive({
  permissions: [],
  loading: true,
  currentPermission: {
    bucket_name: "bucketname",
    uid: "uid",
    permission: "READ",
    grantee_display_name: "display_name",
  },
} as {
  permissions: BucketPermissionOut[];
  loading: boolean;
  currentPermission: BucketPermissionOut;
});

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

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

watch(
  () => props.addPermission,
  (newBucketPermission) => {
    if (newBucketPermission !== undefined) {
      state.permissions.push(newBucketPermission);
    }
  }
);

// Function
// -----------------------------------------------------------------------------
function updateBucketPermissions(bucketName: string) {
  state.loading = true;
  BucketPermissionService.bucketPermissionListPermissionsPerBucket(bucketName)
    .then((permissions) => {
      state.permissions = permissions;
    })
    .catch((err) => {
      console.error(err);
    })
    .finally(() => {
      state.loading = false;
    });
}

function permissionDeleted(bucketPermission: BucketPermissionIn) {
  state.permissions = state.permissions.filter(
    (perm) => perm.uid != bucketPermission.uid
  );
}

function permissionCreated(bucketPermission: BucketPermissionOut) {
  state.permissions.push(bucketPermission);
}

function permissionEdited(bucketPermission: BucketPermissionOut) {
  const index = state.permissions.findIndex(
    (perm) => perm.uid == bucketPermission.uid
  );
  state.permissions[index] = bucketPermission;
}

// 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"
    @permission-deleted="permissionDeleted"
    @permission-created="permissionCreated"
    @permission-edited="permissionEdited"
  />
  <bootstrap-modal
    :modalID="props.modalID"
    :static-backdrop="true"
    modal-label="Permission List Modal"
  >
    <template v-slot:header> Bucket Permissions </template>
    <template v-slot:body>
      <ul v-if="state.loading" class="list-group">
        <li
          class="list-group-item list-group-item-action placeholder-wave"
          v-for="n in 5"
          :key="n"
        >
          <span class="placeholder col-2 bg-info"></span>
          <span class="placeholder col-8 offset-1"></span>
        </li>
      </ul>
      <div v-else>
        <div class="list-group" v-if="state.permissions.length > 0">
          <button
            type="button"
            class="list-group-item list-group-item-action text-truncate"
            v-for="permission in state.permissions"
            :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">{{ permission.permission }}</span>
              <span class="col-9"> {{ 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>