Actions.vue

<template>
  <div>
    <span>
      <coscine-form-group
        labelFor="Archive"
        :label="$t('ArchiveLabel')"
        :isLoading="isLoading"
      >
        <div class="switchCheckbox">
          <b-form-checkbox
            v-model="resource.isArchived"
            :disabled="!isUserAllowed"
            @click.native.prevent="showArchiveModal"
            name="archive-checkbox"
            switch
          ></b-form-checkbox>
        </div>
      </coscine-form-group>
      <coscine-form-group
        labelFor="DeleteResource"
        :label="$t('DeleteResourceLabel')"
        :isLoading="isLoading"
      >
        <DeleteModal
          :displayName="resource.DisplayName"
          :isWaitingForResponse="isWaitingForResponse"
          :isLoading="isLoading"
          :isResourceOwner="isUserAllowed"
          :disabled="isBusy"
          @deleteResource="deleteResource"
          style="display: inline"
        ></DeleteModal>
      </coscine-form-group>
    </span>

    <coscine-modal
      v-model="isModalVisible"
      :title="archiveModalTitleText"
      :hideFooter="true"
    >
      <p v-html="archiveModalHeaderText"></p>
      <div slot="footer">
        <br />
        <b-button variant="secondary" @click="cancelArchiveModal">
          {{ $t("cancel") }}
        </b-button>
        <b-button
          variant="primary"
          @click="updateArchiveStatus"
          class="rightBtn"
        >
          {{ archiveModalConfirmButtonText }}
        </b-button>
      </div>
    </coscine-modal>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

import { ResourceApi } from "@coscine/api-connection";
import DeleteModal from "@/components/DeleteModal.vue";

import { CoscineFormGroup, CoscineModal } from "@coscine/component-library";
import "@coscine/component-library/dist/index.css";

import { ToastPlugin } from "bootstrap-vue";
Vue.use(ToastPlugin);

export default Vue.extend({
  name: "Actions",
  components: {
    CoscineFormGroup,
    CoscineModal,
    DeleteModal,
  },
  props: {
    resource: Object,
    resourceId: String,
    isWaitingForResponse: {
      default: false,
      type: Boolean,
    },
    isOwner: {
      default: false,
      type: Boolean,
    },
    isLoading: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      isModalVisible: false,
      isResourceCreator: false,
    };
  },
  computed: {
    isUserAllowed(): boolean {
      return this.isOwner || this.isResourceCreator;
    },
    isBusy(): boolean {
      return this.isWaitingForResponse || this.isLoading;
    },
    archiveModalTitleText(): string {
      return (
        !this.resource.isArchived
          ? this.$t("ArchivedModalTitle")
          : this.$t("unArchivedModalTitle")
      ) as string;
    },
    archiveModalHeaderText(): string {
      return (
        !this.resource.isArchived
          ? this.$t("ArchivedModalHeader")
          : this.$t("unArchivedModalHeader")
      ) as string;
    },
    archiveModalConfirmButtonText(): string {
      return (
        !this.resource.isArchived ? this.$t("Archive") : this.$t("unArchive")
      ) as string;
    },
  },
  created() {
    ResourceApi.isUserResourceCreator(this.resourceId, (response: any) => {
      this.isResourceCreator = response.data.isResourceCreator;
    });
  },
  methods: {
    showArchiveModal(e: any) {
      this.isModalVisible = true;
    },
    makeToast(text = "Message", givenTitle = "Title", toastVariant = "") {
      this.$bvToast.toast(text, {
        title: givenTitle,
        autoHideDelay: 5000,
        variant: toastVariant,
        toaster: "b-toaster-bottom-right",
        noCloseButton: true,
      });
    },
    cancelArchiveModal() {
      this.isModalVisible = false;
    },
    updateArchiveStatus() {
      ResourceApi.setResourceReadonly(
        this.resourceId,
        !this.resource.isArchived,
        () => {
          if (this.resource.isArchived) {
            this.makeToast(
              this.$t("ArchivedToastBody").toString(),
              this.$t("ArchivedToastHeader").toString()
            );
          } else {
            this.makeToast(
              this.$t("unArchivedToastBody").toString(),
              this.$t("unArchivedToastHeader").toString()
            );
          }
        }
      );
      this.resource.isArchived = !this.resource.isArchived;
      this.isModalVisible = false;
    },
    deleteResource() {
      this.$emit("deleteResource");
    },
  },
});
</script>

<style scoped>
.rightBtn {
  float: right;
}
.switchCheckbox {
  margin-top: 5px;
}
</style>