From 4ea534c7c52b757ce1caaa0983faea280bf87692 Mon Sep 17 00:00:00 2001 From: Fotis Paraskevopoulos Date: Mon, 2 Sep 2024 22:06:36 +0300 Subject: [PATCH] Dev (#20) * Synchronizing code from bitbucket repository * Removing TomSelect because it is no longer updated * Metric template remove restriction * Multiple environment variables fix * - Setting dark mode by default in the login window - Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build * Application saving and traversing through the ui fixed #8 #11 * Fixing ts errors on Error handling * Adding build specific information for better debugging --------- Co-authored-by: Vasilis Kefalas --- .github/workflows/ci.yml | 3 + gui/.env.docker | 4 +- gui/Dockerfile | 8 + gui/set_env.sh | 3 - .../MultiStepsProvider/index.vue | 74 ++++---- gui/src/components/Application/index.vue | 164 +++++++++--------- .../ApplicationCreation/index.vue | 34 ++-- 7 files changed, 161 insertions(+), 129 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6dcdf19..ea7f315 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -15,4 +15,7 @@ jobs: with: context: gui image-name: gui-builder + build-args: | + BUILD_ID="${{github.sha}}" + BUILD_CONTEXT="${{github.ref_name}}" secrets: inherit diff --git a/gui/.env.docker b/gui/.env.docker index 2f64177..6e0f728 100644 --- a/gui/.env.docker +++ b/gui/.env.docker @@ -1,4 +1,2 @@ VITE_API_URL=VITE_API_URL_PLACEHOLDER -VITE_CFSB_API_URL=VITE_CFSB_API_URL_PLACEHOLDER -VITE_BUILD_ID=VITE_BUILD_ID_PLACEHOLDER -VITE_CONTEXT=VITE_CONTEXT_PLACEHOLDER \ No newline at end of file +VITE_CFSB_API_URL=VITE_CFSB_API_URL_PLACEHOLDER \ No newline at end of file diff --git a/gui/Dockerfile b/gui/Dockerfile index 09db3f5..6c84ce7 100644 --- a/gui/Dockerfile +++ b/gui/Dockerfile @@ -1,9 +1,17 @@ # Build the Vue app FROM node:20 as build-stage + +ARG BUILD_ID +ARG BUILD_CONTEXT + WORKDIR /app COPY package*.json ./ COPY .env.docker ./.env + +ENV VITE_BUILD_ID=${BUILD_ID} +ENV VITE_CONTEXT=${BUILD_CONTEXT} + RUN npm install --include-dev COPY ./ . RUN npm run build diff --git a/gui/set_env.sh b/gui/set_env.sh index 8c257a9..452895e 100644 --- a/gui/set_env.sh +++ b/gui/set_env.sh @@ -11,9 +11,6 @@ do echo "Setting VITE_CFSB_API_URL_PLACEHOLDER environment variables ${VITE_CFSB_API_URL}" sed -i 's|VITE_CFSB_API_URL_PLACEHOLDER|'${VITE_CFSB_API_URL}'|g' $file - echo "Setting VITE_BUILD_ID_PLACEHOLDER environment variables ${VITE_BUILD_ID}" - sed -i 's|VITE_BUILD_ID_PLACEHOLDER|'${VITE_BUILD_ID}'|g' $file - echo "Setting VITE_CONTEXT_PLACEHOLDER environment variables ${VITE_CONTEXT}" sed -i 's|VITE_CONTEXT_PLACEHOLDER|'${VITE_CONTEXT}'|g' $file diff --git a/gui/src/base-components/MultiStepsProvider/index.vue b/gui/src/base-components/MultiStepsProvider/index.vue index f3a8b72..a55d5c2 100644 --- a/gui/src/base-components/MultiStepsProvider/index.vue +++ b/gui/src/base-components/MultiStepsProvider/index.vue @@ -58,7 +58,7 @@ ? 'url(#successGradient)' : 'none' " - :icon="isStageConnected(stage + 1) ? 'CheckCircle2' : 'Circle'" + :icon="hasError ? 'XCircle' : isStageConnected(stage + 1) ? 'CheckCircle2' : 'Circle'" class="w-8 h-8" :class="[ { 'text-danger': hasError }, @@ -196,46 +196,54 @@ const isPrevButtonDisabled = computed(() => { const prevButtonTooltip = computed(() => (isPrevButtonDisabled.value ? currentStage.value.prevButtonTooltip : "")) const toPreviousPage = async ({ rawNavigation }: { rawNavigation?: boolean } = {}) => { - const { componentV$, ...data } = currentStageRef.value || {} - const isComponentValid = !componentV$ || (await componentV$.value.$validate()) - const isTitleValid = !props.v$ || (await props.v$.$validate()) - if (isTitleValid && isComponentValid) { - clientErrorMessages.value = [] - if (rawNavigation) { - currentStageName.value = currentStage.value.previous + const { componentV$, ...data } = currentStageRef.value || {}; + const isComponentValid = !componentV$ || (await componentV$.value.$validate()); + const isTitleValid = !props.v$ || (await props.v$.$validate()); + try { + if (!isTitleValid || !isComponentValid) { + clientErrorMessages.value = componentV$.value.$errors.map( + (error: ErrorObject) => error.$propertyPath + ": " + error.$message + ); } else { - const toPrev = () => (currentStageName.value = currentStage.value.previous) - // emits data handler if navigation requires it, here your api call may be implemented - await currentStage.value.onPrevPageClick?.(toPrev, data) + clientErrorMessages.value = []; } - } else { - // TODO: refactor messages and reinvent way of displaying - clientErrorMessages.value = componentV$.value.$errors.map( - (error: ErrorObject) => error.$propertyPath + ": " + error.$message - ) - } -} + } catch (error) { + } finally { + if (rawNavigation) { + currentStageName.value = currentStage.value.previous; + } else { + const toPrev = () => (currentStageName.value = currentStage.value.previous); + await currentStage.value.onPrevPageClick?.(toPrev, data); + } + } +}; + -// Navigates to next page only if current stage fields are valid +// Navigates to next page regardless if current stage fields are valid const toNextPage = async ({ rawNavigation }: { rawNavigation?: boolean } = {}) => { - const { componentV$, ...data } = currentStageRef.value || {} - const isComponentValid = !componentV$ || (await componentV$.value.$validate()) - const isTitleValid = !props.v$ || (await props.v$.$validate()) - if (isTitleValid && isComponentValid) { - clientErrorMessages.value = [] + const { componentV$, ...data } = currentStageRef.value || {}; + const isComponentValid = !componentV$ || (await componentV$.value.$validate()); + const isTitleValid = !props.v$ || (await props.v$.$validate()); + + try { + if (!isTitleValid || !isComponentValid) { + clientErrorMessages.value = componentV$.value.$errors.map( + (error: ErrorObject) => error.$propertyPath + ": " + error.$message + ); + } else { + clientErrorMessages.value = []; + } + } catch (error) { + console.error('Validation error:', error); + } finally { if (rawNavigation) { - currentStageName.value = currentStage.value.next + currentStageName.value = currentStage.value.next; } else { - const toNext = () => (currentStageName.value = currentStage.value.next) - // emits data handler if navigation requires it, here your api call may be implemented - await currentStage.value.onNextPageClick?.(toNext, data) + const toNext = () => (currentStageName.value = currentStage.value.next); + await currentStage.value.onNextPageClick?.(toNext, data); } - } else { - clientErrorMessages.value = componentV$.value.$errors.map( - (error: ErrorObject) => error.$propertyPath + ": " + error.$message - ) } -} +}; const onSaveClick = async () => { const { componentV$, ...data } = currentStageRef.value || {} diff --git a/gui/src/components/Application/index.vue b/gui/src/components/Application/index.vue index cf846bb..2bff91e 100644 --- a/gui/src/components/Application/index.vue +++ b/gui/src/components/Application/index.vue @@ -22,15 +22,15 @@