Resolve "Update Workflow Modal"

Closes #45 (closed)

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>