MyResourcesView.vue

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { useResourceStore } from "@/stores/resources";
import CardTransitionGroup from "@/components/transitions/CardTransitionGroup.vue";
import ResourceCard from "@/components/resources/ResourceCard.vue";
import CreateResourceModal from "@/components/resources/modals/CreateResourceModal.vue";
import UploadResourceInfoModal from "@/components/resources/modals/UploadResourceInfoModal.vue";
import { useS3KeyStore } from "@/stores/s3keys";
import type { ResourceVersionOut, ResourceOut } from "@/client/resource";
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import UpdateResourceModal from "@/components/resources/modals/UpdateResourceModal.vue";
import ReasonModal from "@/components/modals/ReasonModal.vue";
import BootstrapToast from "@/components/BootstrapToast.vue";
import { Modal, Toast } from "bootstrap";

const resourceRepository = useResourceStore();
const s3KeyRepository = useS3KeyStore();
let requestReasonModal: Modal | null = null;
let syncRequestSuccessToast: Toast | null = null;

const resourceState = reactive<{
  loading: boolean;
  resourceVersionInfo?: ResourceVersionOut;
  updateResource: ResourceOut;
  syncResourceVersion?: ResourceVersionOut;
}>({
  loading: true,
  resourceVersionInfo: undefined,
  syncResourceVersion: undefined,
  updateResource: {
    name: "",
    description: "",
    source: "",
    resource_id: "",
    versions: [],
    maintainer_id: "",
  },
});

function setResourceVersionInfo(resourceVersionInfo?: ResourceVersionOut) {
  resourceState.resourceVersionInfo = resourceVersionInfo;
}

function setResourceUpdate(resource: ResourceOut) {
  resourceState.updateResource = resource;
}

function setResourceSync(version: ResourceVersionOut) {
  resourceState.syncResourceVersion = version;
}

function requestResourceSync(
  reason: string,
  resourceVersion?: ResourceVersionOut,
) {
  if (resourceVersion != undefined) {
    resourceRepository
      .requestSynchronization(resourceVersion, {
        reason: reason,
      })
      .then(() => {
        requestReasonModal?.hide();
        syncRequestSuccessToast?.show();
      });
  }
}

onMounted(() => {
  let fetchedResources = false;
  requestReasonModal = new Modal("#request-synchronization-modal");
  syncRequestSuccessToast = new Toast("#request-sync-toast");
  s3KeyRepository.fetchS3Keys(() => {
    if (!fetchedResources) {
      fetchedResources = true;
      resourceRepository.fetchOwnResources(() => {
        resourceState.loading = false;
      });
    }
  });
});
</script>

<template>
  <bootstrap-toast toast-id="request-sync-toast" color-class="success">
    Requested resource synchronization
  </bootstrap-toast>
  <reason-modal
    modal-id="request-synchronization-modal"
    modal-label=""
    :loading="false"
    purpose="request"
    @save="
      (reason) => requestResourceSync(reason, resourceState.syncResourceVersion)
    "
  >
    <template #header> Request resource synchronization</template>
  </reason-modal>
  <create-resource-modal modal-id="createResourceModal" />
  <upload-resource-info-modal
    modal-id="uploadResourceInfoModal"
    :resource-version="resourceState.resourceVersionInfo"
  />
  <update-resource-modal
    :resource="resourceState.updateResource"
    modal-id="updateResourceModal"
  />
  <div
    class="row border-bottom mb-4 justify-content-between align-items-center pb-2"
  >
    <h2 class="w-fit">My Resources</h2>
    <div class="w-fit">
      <button
        type="button"
        class="btn btn-info btn-lg w-fit me-3"
        data-bs-toggle="modal"
        data-bs-target="#uploadResourceInfoModal"
        @click="setResourceVersionInfo(undefined)"
      >
        Tutorial
      </button>
      <button
        class="btn btn-lg btn-primary w-fit"
        data-bs-toggle="modal"
        data-bs-target="#createResourceModal"
      >
        Create Resource
      </button>
    </div>
  </div>
  <div v-if="!resourceState.loading">
    <div
      v-if="resourceRepository.ownResources.length === 0"
      class="text-center fs-2 mt-5"
    >
      <font-awesome-icon
        icon="fa-solid fa-x"
        class="my-5 fs-0"
        style="color: var(--bs-secondary)"
      />
      <p>You don't have any resources registered in the system.</p>
    </div>
    <CardTransitionGroup
      v-else
      class="d-flex flex-wrap align-items-center justify-content-between"
    >
      <resource-card
        v-for="resource in resourceRepository.ownResources"
        :key="resource.resource_id"
        :resource="resource"
        :loading="false"
        style="width: 48%"
        extended
        @click-info="setResourceVersionInfo"
        @click-update="setResourceUpdate"
        @click-request-sync="setResourceSync"
      />
    </CardTransitionGroup>
  </div>
  <div
    v-else
    class="d-flex flex-wrap align-items-center justify-content-between"
  >
    <resource-card
      v-for="resource in 4"
      :key="resource"
      :resource="{
        name: '',
        description: '',
        source: '',
        resource_id: '',
        versions: [],
        maintainer_id: '',
      }"
      style="min-width: 48%"
      loading
      extended
    />
  </div>
</template>

<style scoped></style>