PermissionModal.vue

<script setup lang="ts">
import { onMounted, reactive, watch, ref, computed } from "vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
import SearchUserModal from "@/components/modals/SearchUserModal.vue";
import { Modal } from "bootstrap";
import dayjs from "dayjs";
import type {
  BucketPermissionOut,
  BucketPermissionIn,
  BucketPermissionParameters,
} from "@/client/s3proxy";
import type { User } from "@/client/auth";
import type { FolderTree } from "@/types/PseudoFolder";
import type { ComputedRef, Ref } from "vue";
import { Permission, BucketPermissionService } from "@/client/s3proxy";
import { Toast } from "bootstrap";
import BootstrapIcon from "@/components/BootstrapIcon.vue";

// Props
// -----------------------------------------------------------------------------
const props = defineProps<{
  modalID: string;
  bucketName: string;
  subFolders: FolderTree;
  editUserPermission: BucketPermissionOut | undefined;
  readonly: boolean;
  editable: boolean;
  deletable: boolean;
  backModalId: string | undefined;
}>();

// Variables
// -----------------------------------------------------------------------------
const randomIDSuffix = Math.random().toString(16).substr(2, 8);
let permissionModal: Modal | null = null;
let successToast: Toast | null = null;

// Reactive State
// -----------------------------------------------------------------------------
const formState = reactive({
  loading: false,
  grantee_name: "",
  error: false,
  readonly: props.readonly,
} as {
  loading: boolean;
  grantee_name: string;
  error: boolean;
  readonly: boolean;
});

const permission = reactive({
  from_timestamp: undefined,
  to_timestamp: undefined,
  file_prefix: undefined,
  permission: undefined,
  uid: "",
  bucket_name: props.bucketName,
} as BucketPermissionIn);

const permissionDeleted: Ref<boolean> = ref(false);

// Computes Properties
// -----------------------------------------------------------------------------
const editPermission: ComputedRef<boolean> = computed(
  () => props.editUserPermission != undefined
);

const possibleSubFolders: ComputedRef<string[]> = computed(() =>
  findSubFolders(props.subFolders, [])
);

const permissionUserReadonly: ComputedRef<boolean> = computed(() => {
  return formState.readonly || editPermission.value;
});

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

watch(
  () => props.editUserPermission,
  () => updatePermission()
);

// Events
// -----------------------------------------------------------------------------
const emit = defineEmits<{
  (e: "permission-deleted", permission: BucketPermissionIn): void;
  (e: "permission-created", permission: BucketPermissionOut): void;
  (e: "permission-edited", permission: BucketPermissionOut): void;
}>();

// Functions
// -----------------------------------------------------------------------------
/**
 * Reset the form. Triggered when the modal is closed.
 */
function modalClosed() {
  formState.readonly = props.readonly;
  formState.error = false;
  if (editPermission.value) {
    updatePermission();
  }
}

/**
 * Callback when the toast is hidden again.
 */
function toastHidden() {
  permissionDeleted.value = false;
}

/**
 * Check if an input should be visible based on its state
 * @param input Input which visibility should be determined.
 */
function inputVisible(input: string | undefined): boolean {
  return !formState.readonly || input != undefined;
}

/**
 * Update the form content
 */
function updatePermission() {
  if (props.editUserPermission != undefined) {
    permission.bucket_name = props.editUserPermission.bucket_name;
    permission.file_prefix = props.editUserPermission.file_prefix;
    permission.uid = props.editUserPermission.uid;
    formState.grantee_name = props.editUserPermission.grantee_display_name;
    permission.from_timestamp =
      props.editUserPermission.from_timestamp != null
        ? dayjs(props.editUserPermission.from_timestamp).format("YYYY-MM-DD")
        : undefined;
    permission.to_timestamp =
      props.editUserPermission.to_timestamp != null
        ? dayjs(props.editUserPermission.to_timestamp).format("YYYY-MM-DD")
        : undefined;
    permission.permission = props.editUserPermission.permission;
  } else {
    permission.file_prefix = undefined;
    permission.uid = "";
    permission.from_timestamp = undefined;
    permission.to_timestamp = undefined;
    permission.permission = undefined;
    formState.grantee_name = "";
  }
}

/**
 * Find recursively all sub folders based on the folder structure
 * @param currentFolder Current Folder
 * @param parentFolders All parent folders
 */
function findSubFolders(
  currentFolder: FolderTree,
  parentFolders: string[]
): string[] {
  const arr: string[] = [];
  for (const subFolder of Object.keys(currentFolder.subFolders)) {
    const subFolderString =
      (parentFolders.length > 0 ? parentFolders.join("/") + "/" : "") +
      subFolder +
      "/";
    arr.push(
      subFolderString,
      ...findSubFolders(
        currentFolder.subFolders[subFolder],
        subFolderString.slice(0, subFolderString.length - 1).split("/")
      )
    );
  }
  return arr;
}

/**
 * Submit the form
 */
function formSubmit() {
  formState.error = false;
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const form = document.getElementById(
    "permissionCreateEditForm" + randomIDSuffix
  )! as HTMLFormElement;
  if (form.checkValidity()) {
    const tempPermission: BucketPermissionIn = permission;
    if (permission.from_timestamp != null) {
      tempPermission.from_timestamp =
        permission.from_timestamp.length > 0
          ? dayjs(permission.from_timestamp).toISOString()
          : undefined;
    }
    if (permission.to_timestamp != null) {
      tempPermission.to_timestamp =
        permission.to_timestamp.length > 0
          ? dayjs(permission.to_timestamp).toISOString()
          : undefined;
    }
    formState.loading = true;
    const serverAnswerPromise = editPermission.value
      ? BucketPermissionService.bucketPermissionUpdatePermission(
          permission.uid,
          permission.bucket_name,
          {
            to_timestamp: tempPermission.to_timestamp,
            from_timestamp: tempPermission.from_timestamp,
            permission: tempPermission.permission,
            file_prefix: tempPermission.file_prefix,
          } as BucketPermissionParameters
        )
      : BucketPermissionService.bucketPermissionCreatePermission(
          tempPermission
        );
    serverAnswerPromise
      .then((permission: BucketPermissionOut) => {
        if (editPermission.value) {
          emit("permission-edited", permission);
        } else {
          emit("permission-created", permission);
        }
        permissionModal?.hide();
        successToast?.show();
        updatePermission();
      })
      .catch(() => {
        formState.error = true;
      })
      .finally(() => {
        formState.loading = false;
      });
  }
}

/**
 * Delete a permission for a bucket user combination
 * @param bucketName Bucket to delete
 * @param uid ID of grantee of the permission
 */
function confirmedDeletePermission(bucketName: string, uid: string) {
  if (!formState.loading) {
    formState.loading = true;
    BucketPermissionService.bucketPermissionDeletePermissionForBucket(
      bucketName,
      uid
    )
      .then(() => {
        permissionDeleted.value = true;
        permissionModal?.hide();
        successToast?.show();
        emit("permission-deleted", permission);
      })
      .catch(() => {
        formState.error = true;
      })
      .finally(() => {
        formState.loading = false;
      });
  }
}

function updateUser(user: User) {
  permission.uid = user.uid;
  formState.grantee_name = user.display_name;
}
// Lifecycle Hooks
// -----------------------------------------------------------------------------
onMounted(() => {
  permissionModal = new Modal("#" + props.modalID);
  successToast = new Toast("#" + "toast-" + randomIDSuffix);
  updatePermission();
});
</script>

<template>
  <DeleteModal
    :modalID="'delete-permission-modal' + randomIDSuffix"
    object-name-delete="permission"
    :back-modal-id="modalID"
    @confirm-delete="
      confirmedDeletePermission(permission.bucket_name, permission.uid)
    "
  />
  <SearchUserModal
    :modalID="'search-user-modal' + randomIDSuffix"
    :back-modal-id="modalID"
    @user-found="updateUser"
  />
  <div class="toast-container position-fixed top-toast end-0 p-3">
    <div
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      class="toast text-bg-success align-items-center border-0"
      data-bs-autohide="true"
      :id="'toast-' + randomIDSuffix"
      v-on="{ 'hidden.bs.toast': toastHidden }"
    >
      <div class="d-flex">
        <div class="toast-body">
          Successfully
          <span v-if="permissionDeleted">deleted</span>
          <span v-else-if="editPermission">edited</span>
          <span v-else>created</span>
          Permission
        </div>
        <button
          type="button"
          class="btn-close btn-close-white me-2 m-auto"
          data-bs-dismiss="toast"
          aria-label="Close"
        ></button>
      </div>
    </div>
  </div>
  <bootstrap-modal
    :modalID="modalID"
    :static-backdrop="true"
    modal-label="Permission Modal"
    v-on="{ 'hidden.bs.modal': modalClosed }"
  >
    <template v-slot:header v-if="formState.readonly"
      >View Permission
    </template>
    <template v-slot:header v-else-if="props.editUserPermission !== undefined"
      >Edit Permission
    </template>
    <template v-slot:header v-else> Create new Permission </template>
    <template v-slot:extra-button>
      <bootstrap-icon
        v-if="props.deletable"
        icon="trash-fill"
        :height="15"
        :width="15"
        fill="currentColor"
        class="me-2"
        :class="{ 'delete-icon': !formState.loading }"
        data-bs-toggle="modal"
        :data-bs-target="'#delete-permission-modal' + randomIDSuffix"
      />
      <bootstrap-icon
        v-if="formState.readonly && props.editable"
        icon="pencil-fill"
        :height="15"
        :width="15"
        fill="currentColor"
        class="pseudo-link"
        @click="formState.readonly = false"
      />
    </template>
    <template v-slot:body>
      <form
        @submit.prevent="formSubmit"
        :id="'permissionCreateEditForm' + randomIDSuffix"
      >
        <div class="mb-3 row">
          <label for="bucketNameInput" class="col-2 col-form-label"
            >Bucket<span v-if="!formState.readonly">*</span></label
          >
          <div class="col-10">
            <input
              type="text"
              readonly
              class="form-control-plaintext"
              id="bucketNameInput"
              required
              :value="permission.bucket_name"
            />
          </div>
        </div>
        <div class="mb-3 row align-items-center d-flex">
          <label for="permissionGranteeInput" class="col-2 col-form-label">
            User<span v-if="!formState.readonly">*</span>
          </label>
          <div
            :class="{
              'col-10': permissionUserReadonly,
              'col-9': !permissionUserReadonly,
            }"
          >
            <input
              type="text"
              class="form-control"
              id="permissionGranteeInput"
              required
              placeholder="Search for a user"
              v-model.trim="formState.grantee_name"
              readonly
            />
          </div>
          <div v-if="!permissionUserReadonly" class="col-1">
            <button
              type="button"
              class="btn btn-secondary btn-sm float-end"
              data-bs-toggle="modal"
              :data-bs-target="'#search-user-modal' + randomIDSuffix"
            >
              <bootstrap-icon
                icon="search"
                :height="13"
                :width="13"
                fill="white"
              />
            </button>
          </div>
        </div>
        <div class="mb-3 row">
          <label for="permissionTypeInput" class="col-2 col-form-label">
            Type<span v-if="!formState.readonly">*</span>
          </label>
          <div class="col-10">
            <select
              class="form-select text-lowercase"
              id="permissionTypeInput"
              required
              :disabled="formState.readonly"
              v-model="permission.permission"
            >
              <option disabled selected>Select one...</option>
              <option v-for="perm in Permission" :key="perm" :value="perm">
                {{ perm.toLowerCase() }}
              </option>
            </select>
          </div>
        </div>
        <div class="mb-3 row">
          <label
            for="permissionDateFromInput"
            class="col-2 col-form-label"
            v-if="inputVisible(permission.from_timestamp)"
          >
            From
          </label>
          <div class="col-4" v-if="inputVisible(permission.from_timestamp)">
            <input
              type="date"
              class="form-control"
              id="permissionDateFromInput"
              :readonly="formState.readonly"
              :min="dayjs().format('YYYY-MM-DD')"
              v-model="permission.from_timestamp"
            />
          </div>
          <label
            for="permissionDateToInput"
            class="col-2 col-form-label"
            v-if="inputVisible(permission.to_timestamp)"
          >
            To
          </label>
          <div class="col-4" v-if="inputVisible(permission.to_timestamp)">
            <input
              type="date"
              class="form-control"
              id="permissionToFromInput"
              :readonly="formState.readonly"
              v-model="permission.to_timestamp"
              :min="
                permission.from_timestamp != null
                  ? dayjs(permission.from_timestamp)
                      .add(1, 'day')
                      .format('YYYY-MM-DD')
                  : dayjs().add(1, 'day').format('YYYY-MM-DD')
              "
            />
          </div>
        </div>
        <div
          class="mb-3 row align-items-center d-flex"
          v-if="
            inputVisible(permission.file_prefix) &&
            possibleSubFolders.length > 0
          "
        >
          <label for="permissionSubFolderInput" class="col-2 col-form-label">
            Subfolder
          </label>
          <div
            :class="{
              'col-10': formState.readonly,
              'col-9': !formState.readonly,
            }"
          >
            <select
              class="form-select"
              id="permissionSubFolderInput"
              :disabled="formState.readonly"
              v-model="permission.file_prefix"
            >
              <option disabled selected>Select one folder...</option>
              <option
                v-for="folder in possibleSubFolders"
                :key="folder"
                :value="folder"
              >
                {{ folder }}
              </option>
            </select>
          </div>
          <div class="col-1" v-if="!formState.readonly">
            <button
              type="button"
              class="btn btn-outline-danger btn-sm float-end"
              @click="permission.file_prefix = undefined"
              :hidden="permission.file_prefix == undefined"
            >
              <bootstrap-icon
                icon="x-lg"
                :height="14"
                :width="14"
                fill="currentColor"
              />
            </button>
          </div>
        </div>
      </form>
      <span class="text-danger" v-if="formState.error"
        >There was some kind of error<br />Try again later</span
      >
    </template>
    <template v-slot:footer>
      <button
        v-if="backModalId !== undefined"
        type="button"
        class="btn btn-secondary"
        :data-bs-target="'#' + props.backModalId"
        data-bs-toggle="modal"
      >
        Back
      </button>
      <button
        v-else
        type="button"
        class="btn btn-secondary"
        data-bs-dismiss="modal"
      >
        Close
      </button>
      <button
        type="submit"
        :form="'permissionCreateEditForm' + randomIDSuffix"
        class="btn btn-primary"
        :disabled="formState.loading"
        v-if="!formState.readonly"
      >
        <span
          v-if="formState.loading"
          class="spinner-border spinner-border-sm"
          role="status"
          aria-hidden="true"
        ></span>
        Save
      </button>
    </template>
  </bootstrap-modal>
</template>

<style scoped>
.pseudo-link {
  cursor: pointer;
  color: var(--bs-secondary);
}
.pseudo-link:hover {
  color: var(--bs-primary);
}

.delete-icon {
  color: var(--bs-secondary);
  cursor: pointer;
}
.delete-icon:hover {
  color: var(--bs-danger);
}
</style>