WorkflowCard.vue

<script setup lang="ts">
import type { WorkflowOut, WorkflowVersionReduced } from "@/client/workflow";
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import dayjs from "dayjs";
import { onMounted, ref, computed } from "vue";
import type { Ref, ComputedRef } from "vue";
import { Tooltip } from "bootstrap";
import { useWorkflowStore } from "@/stores/workflows";

const props = defineProps<{
  workflow: WorkflowOut;
  loading: boolean;
}>();
const workflowRepository = useWorkflowStore();

const randomIDSuffix: string = Math.random().toString(16).substr(2, 8);
const truncateDescription: Ref<boolean> = ref(true);
const latestVersion: ComputedRef<WorkflowVersionReduced | undefined> = computed(
  () =>
    props.loading
      ? undefined
      : workflowRepository.latestVersion(props.workflow.workflow_id)
);

onMounted(() => {
  if (!props.loading) {
    new Tooltip("#creationDate-" + randomIDSuffix);
  }
});
</script>

<template>
  <div class="card-hover border border-secondary card text-bg-dark m-2">
    <div class="card-body">
      <h3 class="card-title">
        <div v-if="props.loading" class="placeholder-glow">
          <span class="placeholder col-6"></span>
        </div>
        <a v-else href="#">{{ props.workflow.name }}</a>
      </h3>
      <p class="card-text" :class="{ 'text-truncate': truncateDescription }">
        <span v-if="props.loading" class="placeholder-glow"
          ><span class="placeholder col-12"></span
        ></span>
        <span
          v-else
          @click="truncateDescription = false"
          :class="{
            'cursor-pointer': truncateDescription,
          }"
          >{{ props.workflow.short_description }}</span
        >
      </p>
      <div class="d-flex justify-content-between mb-0">
        <div v-if="props.loading" class="placeholder-glow w-50">
          <span class="placeholder placeholder-lg w-50 bg-success"></span>
        </div>
        <a
          v-else
          :href="
            workflow.repository_url + '/tree/' + latestVersion?.git_commit_hash
          "
          target="_blank"
          class="btn btn-outline-success"
          role="button"
        >
          <bootstrap-icon class="fs-5" icon="tag-fill" />
          {{ latestVersion?.version }}
        </a>
        <div v-if="props.loading" class="placeholder-glow w-25">
          <span class="placeholder w-100 bg-secondary"></span>
        </div>
        <span
          v-else
          :id="'creationDate-' + randomIDSuffix"
          data-bs-toggle="tooltip"
          class="align-self-end text-secondary"
          :data-bs-title="
            dayjs(workflow.versions[0].created_at).format('DD.MM.YYYY HH:mm:ss')
          "
        >
          {{ dayjs(latestVersion?.created_at).fromNow() }}
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card-hover {
  transition: transform 0.3s ease-out;
  width: 48%;
}

.card-hover:hover {
  transform: translate(0, -5px);
}
</style>