WorkflowCard.vue

<script setup lang="ts">
import type { WorkflowOut, WorkflowVersionReduced } from "@/client/workflow";
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import dayjs from "dayjs";
import { onMounted, ref, computed } from "vue";
import { Tooltip } from "bootstrap";
import { latestVersion as calculateLatestVersion } from "@/utils/Workflow";

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

const randomIDSuffix: string = Math.random().toString(16).substr(2, 8);
const truncateDescription = ref<boolean>(true);
const latestVersion = computed<WorkflowVersionReduced | undefined>(() =>
  calculateLatestVersion(props.workflow.versions)
);

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">
      <div
        class="card-title fs-3 d-flex justify-content-between align-items-center"
      >
        <div v-if="props.loading" class="placeholder-glow">
          <span class="placeholder col-6"></span>
        </div>
        <router-link
          v-else
          class="text-truncate"
          :to="{
            name: 'workflow-version',
            params: {
              workflowId: workflow.workflow_id,
              versionId: latestVersion?.git_commit_hash,
            },
          }"
          >{{ props.workflow.name }}
        </router-link>

        <img
          v-if="latestVersion?.icon_url != null"
          :src="latestVersion.icon_url"
          class="img-fluid float-end icon"
        />
      </div>
      <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"
        >
          <font-awesome-icon class="fs-5" icon="fa-solid fa-tag" />
          {{ 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);
}

.icon {
  max-height: 30px;
  max-width: 30px;
}
</style>