Show icon in update workflow modal

#45

src/components/NavbarTop.vue

@@ -136,6 +136,9 @@ watch(
                   >My Workflows</router-link
                 >
               </li>
+              <li v-if="store.workflowReviewer || store.admin">
+                <a class="dropdown-item" href="#">Reviews</a>
+              </li>
             </ul>
           </li>
         </ul>

src/components/workflows/modals/UpdateWorkflowModal.vue

@@ -15,7 +15,7 @@ import {
   requiredRepositoryFiles,
   determineGitIcon,
 } from "@/utils/GitRepository";
-import { valid, lte } from "semver";
+import { valid, lte, inc } from "semver";
 import { latestVersion as calculateLatestVersion } from "@/utils/Workflow";
 
 // Bootstrap Elements
@@ -26,11 +26,12 @@ let successToast: Toast | null = null;
 // Form Elements
 // =============================================================================
 const workflowUpdateForm = ref<HTMLFormElement | undefined>(undefined);
-const workflowIconInput = ref<HTMLInputElement | undefined>(undefined);
+const workflowIconInputElement = ref<HTMLInputElement | undefined>(undefined);
 const workflowVersionElement = ref<HTMLInputElement | undefined>(undefined);
 const workflowGitCommitHashElement = ref<HTMLInputElement | undefined>(
   undefined
 );
+const workflowIconElement = ref<HTMLImageElement | undefined>(undefined);
 
 // Constants
 // =============================================================================
@@ -82,6 +83,12 @@ const gitIcon = computed<string>(() =>
   determineGitIcon(props.workflow.repository_url)
 );
 
+const showIcon = computed<boolean>(
+  () =>
+    latestVersion.value.icon_url != undefined ||
+    workflowUpdate.icon != undefined
+);
+
 // Emitted Events
 // =============================================================================
 const emit = defineEmits<{
@@ -91,7 +98,16 @@ const emit = defineEmits<{
 // Functions
 // =============================================================================
 function iconChanged() {
-  workflowUpdate.icon = workflowIconInput.value?.files?.[0].slice();
+  workflowUpdate.icon = workflowIconInputElement.value?.files?.[0].slice();
+  if (workflowUpdate.icon != undefined) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    workflowIconElement.value!.src = URL.createObjectURL(
+      workflowUpdate.icon.slice()
+    );
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    workflowIconElement.value!.src = latestVersion.value.icon_url ?? "";
+  }
 }
 
 function modalClosed() {
@@ -140,11 +156,13 @@ function checkRepository() {
 
 function resetForm() {
   modalClosed();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  workflowIconElement.value!.src = latestVersion.value.icon_url ?? "";
   workflowUpdate.version = "";
   workflowUpdate.icon = undefined;
   workflowUpdate.git_commit_hash = "";
-  if (workflowIconInput.value != undefined) {
-    workflowIconInput.value.value = "";
+  if (workflowIconInputElement.value != undefined) {
+    workflowIconInputElement.value.value = "";
   }
 }
 
@@ -215,8 +233,8 @@ onMounted(() => {
   >
     <template v-slot:header>
       Update Workflow
-      <span class="fw-bold">{{ props.workflow.name }}</span></template
-    >
+      <span class="fw-bold">{{ props.workflow.name }}</span>
+    </template>
     <template v-slot:body>
       <form
         id="workflowUpdateForm"
@@ -232,6 +250,12 @@ onMounted(() => {
             target="_blank"
             >{{ props.workflow.repository_url }}</a
           >
+          <img
+            :src="latestVersion.icon_url"
+            ref="workflowIconElement"
+            class="float-end"
+            :hidden="!showIcon"
+          />
         </div>
         <div class="mb-3">
           <label for="workflowGitCommitInput" class="form-label"
@@ -274,7 +298,7 @@ onMounted(() => {
                 type="text"
                 class="form-control"
                 id="workflowRepositoryInput"
-                placeholder="v1.0.0"
+                :placeholder="inc(latestVersion.version, 'patch') ?? undefined"
                 maxlength="10"
                 required
                 ref="workflowVersionElement"
@@ -293,7 +317,7 @@ onMounted(() => {
             >
             <input
               type="file"
-              ref="workflowIconInput"
+              ref="workflowIconInputElement"
               accept="image/*"
               class="form-control"
               id="workflowIconInput"
@@ -344,4 +368,9 @@ onMounted(() => {
   </bootstrap-modal>
 </template>
 
-<style scoped></style>
+<style scoped>
+img {
+  max-height: 32px;
+  max-width: 32px;
+}
+</style>

src/views/workflows/MyWorkflowsView.vue

@@ -21,7 +21,7 @@ const workflowsState = reactive<{
     name: "",
     versions: [
       {
-        version: "",
+        version: "1.0.0",
         created_at: "01.01.2023",
         git_commit_hash: "",
         status: Status.CREATED,
@@ -83,18 +83,26 @@ onMounted(() => {
       Create
     </button>
   </div>
-  <card-transition-group
-    v-if="!workflowsState.loading"
-    class="d-flex flex-wrap align-items-center justify-content-between mt-5"
-  >
-    <workflow-with-versions-card
-      v-for="workflow in workflowsState.workflows"
-      :key="workflow.workflow_id"
-      :workflow="workflow"
-      :loading="false"
-      @workflow-update-click="workflowUpdateClick"
-    />
-  </card-transition-group>
+  <div v-if="!workflowsState.loading">
+    <card-transition-group
+      v-if="workflowsState.workflows.length > 0"
+      class="d-flex flex-wrap align-items-center justify-content-between mt-5"
+    >
+      <workflow-with-versions-card
+        v-for="workflow in workflowsState.workflows"
+        :key="workflow.workflow_id"
+        :workflow="workflow"
+        :loading="false"
+        @workflow-update-click="workflowUpdateClick"
+      />
+    </card-transition-group>
+    <div v-else class="text-center mt-5 fs-2">
+      There are currently no workflows that you created.<br />
+      <a href="#" data-bs-toggle="modal" data-bs-target="#createWorkflowModal"
+        >Create a new one</a
+      >
+    </div>
+  </div>
   <div
     v-else
     class="d-flex flex-wrap align-items-center justify-content-between mt-5"