diff --git a/src/components/NavbarTop.vue b/src/components/NavbarTop.vue index 7c602ff5bffd8b45aa301499758b5fd31a627ced..e878966ba393096c4aec9ef1a8270f6ff56a56f7 100644 --- a/src/components/NavbarTop.vue +++ b/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> diff --git a/src/components/workflows/modals/UpdateWorkflowModal.vue b/src/components/workflows/modals/UpdateWorkflowModal.vue index e53838a8ebf02210b2ca8dc24cd876e76bdfbe11..897a48c87909c3dc8f2ae70617549db37ebf070c 100644 --- a/src/components/workflows/modals/UpdateWorkflowModal.vue +++ b/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> diff --git a/src/views/workflows/MyWorkflowsView.vue b/src/views/workflows/MyWorkflowsView.vue index 9ef62d3435ed4e19b84bc48c69fe7b4c0ed785ac..94b8b0b15aa33cf2a4790a342b14d344a1535a16 100644 --- a/src/views/workflows/MyWorkflowsView.vue +++ b/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"