ResourceVersionInfoModal.vue

<script setup lang="ts">
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import type { ResourceVersionOut, ResourceOut } from "@/client/resource";
import CopyToClipboardIcon from "@/components/CopyToClipboardIcon.vue";
import dayjs from "dayjs";
import { computed } from "vue";
import { useNameStore } from "@/stores/names";

const props = defineProps<{
  modalId: string;
  resourceVersionIndex: number;
  resource?: ResourceOut;
}>();

const nameRepository = useNameStore();

const resourceVersion = computed<ResourceVersionOut | undefined>(
  () => props.resource?.versions[props.resourceVersionIndex],
);
</script>

<template>
  <bootstrap-modal
    :modal-id="props.modalId"
    modal-label="Resource Version Info Modal"
    size-modifier-modal="lg"
  >
    <template #header
      >Resource
      <b v-if="resourceVersion"
        >{{ resource?.name }}@{{ resourceVersion?.release }}</b
      >
    </template>
    <template #body>
      <h5>Resource</h5>
      <div class="mb-3 row">
        <div class="col-8">
          <label
            for="resource-version-info-modal-resource-id"
            class="form-label"
            >ID</label
          >
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="resource-version-info-modal-resource-id"
              readonly
              :value="props.resource?.resource_id"
            />
            <span class="input-group-text"
              ><copy-to-clipboard-icon
                :text="props.resource?.resource_id ?? ''"
            /></span>
          </div>
        </div>
        <div class="col-4">
          <label
            for="resource-version-info-modal-resource-name"
            class="form-label"
            >Name</label
          >
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="resource-version-info-modal-resource-name"
              readonly
              :value="props.resource?.name"
            />
          </div>
        </div>
      </div>
      <div class="mb-3 row">
        <div class="col-8">
          <label
            for="resource-version-info-modal-maintainer-id"
            class="form-label"
            >Maintainer ID</label
          >
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="resource-version-info-modal-maintainer-id"
              readonly
              :value="props.resource?.maintainer_id"
            />
            <span class="input-group-text"
              ><copy-to-clipboard-icon
                :text="props.resource?.maintainer_id ?? ''"
            /></span>
          </div>
        </div>
        <div class="col-4">
          <label
            for="resource-version-info-modal-maintainer-name"
            class="form-label"
            >Maintainer Name</label
          >
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="resource-version-info-modal-maintainer-name"
              readonly
              :value="nameRepository.getName(props.resource?.maintainer_id)"
            />
          </div>
        </div>
      </div>
      <div class="mb-3">
        <label
          for="resource-version-info-modal-resource-description"
          class="form-label"
          >Description</label
        >
        <div class="input-group">
          <textarea
            class="form-control"
            id="resource-version-info-modal-resource-description"
            readonly
            rows="2"
            :value="props.resource?.description"
          />
        </div>
      </div>
      <div class="mb-5">
        <label
          for="resource-version-info-modal-resource-source"
          class="form-label"
          >Source</label
        >
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            id="resource-version-info-modal-resource-source"
            readonly
            :value="props.resource?.source"
          />
        </div>
      </div>
      <h5>Resource Version</h5>
      <div class="mb-3 row">
        <div class="col-8">
          <label
            for="resource-version-info-modal-resource-version-id"
            class="form-label"
            >Resource Version ID</label
          >
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="resource-version-info-modal-resource-version-id"
              readonly
              :value="resourceVersion?.resource_version_id"
            />
            <span class="input-group-text"
              ><copy-to-clipboard-icon
                :text="resourceVersion?.resource_version_id ?? ''"
            /></span>
          </div>
        </div>
        <div class="col-4">
          <label
            for="resource-version-info-modal-resource-version-release"
            class="form-label"
            >Resource Version Release</label
          >
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="resource-version-info-modal-resource-version-release"
              readonly
              :value="resourceVersion?.release"
            />
          </div>
        </div>
      </div>
      <div class="mb-3 row">
        <div class="col-4">
          <label
            for="resource-version-info-modal-resource-version-status"
            class="form-label"
            >Status</label
          >
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="resource-version-info-modal-resource-version-status"
              readonly
              :value="resourceVersion?.status"
            />
          </div>
        </div>
        <div class="col-4">
          <label
            for="resource-version-info-modal-resource-version-timestamp"
            class="form-label"
            >Created At</label
          >
          <div class="input-group">
            <input
              type="datetime-local"
              class="form-control"
              id="resource-version-info-modal-resource-version-timestamp"
              readonly
              :value="
                dayjs
                  .unix(resourceVersion?.created_at ?? 0)
                  .format('YYYY-MM-DDTHH:mm')
              "
            />
          </div>
        </div>
      </div>
      <div class="mb-3">
        <label
          for="resource-version-info-modal-resource-version-s3-path"
          class="form-label"
          >S3 Path</label
        >
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            id="resource-version-info-modal-resource-version-s3-path"
            readonly
            :value="resourceVersion?.s3_path"
          />
          <span class="input-group-text"
            ><copy-to-clipboard-icon :text="resourceVersion?.s3_path ?? ''"
          /></span>
        </div>
      </div>
      <div class="mb-3" v-if="resourceVersion?.cluster_path">
        <label
          for="resource-version-info-modal-resource-version-cluster-path"
          class="form-label"
          >Cluster Path</label
        >
        <div class="input-group">
          <input
            type="text"
            class="form-control"
            id="resource-version-info-modal-resource-version-cluster-path"
            readonly
            :value="resourceVersion?.cluster_path"
          />
          <span class="input-group-text"
            ><copy-to-clipboard-icon
              :text="resourceVersion?.cluster_path ?? ''"
          /></span>
        </div>
      </div>
    </template>
  </bootstrap-modal>
</template>

<style scoped></style>