Resolve "Create show Workflow Version Page"

Closes #37 (closed)

src/views/workflows/WorkflowVersionView.vue

+<script setup lang="ts">
+import { onMounted, reactive, watch } from "vue";
+import { WorkflowVersionService } from "@/client/workflow";
+import type { WorkflowVersionFull } from "@/client/workflow";
+import axios from "axios";
+import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
+
+const props = defineProps<{
+  versionId: string;
+  workflowId: string;
+  activeTab: string;
+}>();
+
+const versionState = reactive({
+  loading: true,
+  fileLoading: true,
+  version: undefined,
+  errorLoading: false,
+  descriptionMarkdown: "",
+  changelogMarkdown: "",
+  parameterSchema: {},
+} as {
+  loading: boolean;
+  fileLoading: boolean;
+  version: undefined | WorkflowVersionFull;
+  descriptionMarkdown: string;
+  changelogMarkdown: string;
+  parameterSchema: Record<string, never>;
+});
+
+watch(
+  () => props.versionId,
+  (newVersionId, oldVersionId) => {
+    if (newVersionId !== oldVersionId) {
+      // If bucket is changed, update the objects
+      updateVersion(newVersionId, props.workflowId);
+    }
+  }
+);
+
+function updateVersion(versionId: string, workflowId: string) {
+  versionState.loading = true;
+  versionState.fileLoading = true;
+  WorkflowVersionService.workflowVersionGetWorkflowVersion(
+    versionId,
+    workflowId
+  )
+    .then((version) => {
+      versionState.version = version;
+      downloadVersionFiles(version);
+    })
+    .catch(() => {
+      versionState.version = undefined;
+    })
+    .finally(() => {
+      versionState.loading = false;
+    });
+}
+
+onMounted(() => {
+  updateVersion(props.versionId, props.workflowId);
+});
+
+function downloadVersionFiles(version: WorkflowVersionFull) {
+  versionState.fileLoading = true;
+  const descriptionPromise = axios.get(version.readme_url).then((response) => {
+    versionState.descriptionMarkdown = response.data;
+  });
+  const changelogPromise = axios.get(version.changelog_url).then((response) => {
+    versionState.changelogMarkdown = response.data;
+  });
+  const parameterPromise = axios
+    .get(version.parameter_schema_url)
+    .then((response) => {
+      versionState.parameterSchema = response.data;
+    });
+  Promise.all([descriptionPromise, changelogPromise, parameterPromise]).finally(
+    () => {
+      versionState.fileLoading = false;
+    }
+  );
+}
+</script>
+
+<template>
+  <ul class="nav justify-content-evenly nav-tabs bg-dark fs-5 mb-3">
+    <li class="nav-item">
+      <router-link
+        class="nav-link"
+        aria-current="page"
+        :to="{ query: { tab: 'description' } }"
+        :class="{ active: props.activeTab === 'description' }"
+        >Description
+      </router-link>
+    </li>
+    <li class="nav-item">
+      <router-link
+        class="nav-link"
+        :to="{ query: { tab: 'parameters' } }"
+        :class="{ active: props.activeTab === 'parameters' }"
+        >Parameters
+      </router-link>
+    </li>
+    <li class="nav-item">
+      <router-link
+        class="nav-link"
+        :to="{ query: { tab: 'changes' } }"
+        :class="{ active: props.activeTab === 'changes' }"
+        >Releases
+      </router-link>
+    </li>
+  </ul>
+  <div v-if="versionState.fileLoading">
+    <p class="placeholder-glow mt-2 mb-4">
+      <span class="placeholder col-7 fs-1"></span>
+    </p>
+    <p
+      v-for="n in 8"
+      :key="n"
+      class="placeholder-glow row ms-1"
+      :class="'my-' + Math.floor(Math.random() * 6)"
+    >
+      <span
+        class="placeholder"
+        :class="'col-' + Math.floor(Math.random() * 9 + 2)"
+      ></span>
+    </p>
+  </div>
+  <div v-else>
+    <p v-if="props.activeTab === 'description'">
+      <markdown-renderer :markdown="versionState.descriptionMarkdown" />
+    </p>
+    <pre v-else-if="props.activeTab === 'parameters'"
+      >{{ JSON.stringify(versionState.parameterSchema, null, 2) }}
+    </pre>
+    <p v-else-if="props.activeTab === 'changes'">
+      <markdown-renderer :markdown="versionState.changelogMarkdown" />
+    </p>
+  </div>
+</template>
+
+<style scoped></style>