fix: fixing validators and component format

bcgov · Aug 28, 2023 · aa8eb61 · aa8eb61
1 parent d564a01
commit aa8eb61
Show file tree

Hide file tree

Showing 21 changed files with 738 additions and 464 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, useSlots, reactive, provide } from 'vue'
+import { ref } from 'vue'
+// Composables
 import { useEventBus } from '@vueuse/core'
+// Imported Types
 import type { ModalNotification } from '@/dto/CommonTypesDto'
+// @ts-ignore
 import Delete16 from '@carbon/icons-vue/es/trash-can/16'
 
 const modalBus = useEventBus<ModalNotification>('modal-notification')
@@ -47,6 +50,7 @@ const deleteContentModal = () => {
 }
 
 modalBus.on(openModal)
+toastBus.on(openToast)
 </script>
 
 <template>

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -190,7 +190,7 @@ body {
 }
 
 .bx--progress-step-current {
-  border-color: #0073e6;
+  border-color: var(--cds-interactive-01);
 }
 
 .bx--progress-step-queued {
@@ -202,19 +202,19 @@ body {
 }
 
 .bx--progress-step-complete {
-  border-color: #0073e6;
+  border-color: var(--cds-interactive-01);
 }
 
 .bx--progress-step-icon-current {
-  color: #0073e6;
+  color: var(--cds-interactive-01);
 }
 
 .bx--progress-step-icon-error {
   color: #e72000;
 }
 
 .bx--progress-step-icon-complete {
-  color: #0073e6;
+  color: var(--cds-interactive-01)
 }
 
 .bx--progress-step-icon-queued {

diff --git a/frontend/src/components/DataFetcher.vue b/frontend/src/components/DataFetcher.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { useFetchTo } from '@/composables/useFetch'
 import { ref, watch, computed } from 'vue'
+// Composables
+import { useFetchTo } from '@/composables/useFetch'
+
 
 const props = defineProps<{
   url: string

diff --git a/frontend/src/components/MainHeaderComponent.vue b/frontend/src/components/MainHeaderComponent.vue
@@ -1,57 +1,9 @@
-<template>
-
-    <a href="https://gov.bc.ca">
-      <img
-        src="/img/logo1.svg"
-        alt="Go to the Government of British Columbia website"
-        v-if="isSmallScreen"
-      />
-      <img
-        src="/img/bc_for_logo.png"
-        alt="Go to the Government of British Columbia website"
-        v-else
-      />
-    </a>
-    <div class="heading">
-      <span class="heading-compact-01" v-if="$session?.user?.provider !== 'idir'">Ministry of Forests</span>
-      <span class="heading-compact-01" v-else>Client Management System</span>
-      <span class="heading-compact-01" v-if="env !== 'Prod'">Env. {{ env }} - Rel. {{appVersion}}</span>
-    </div>
-
-    <div class="heading-space"></div>
-
-    <!-- Remember to add profile button here -->
-    <bx-btn
-      v-if="$session?.isLoggedIn() && (isSmallScreen || isMediumScreen)"
-      data-id="logout-btn"
-      kind="tertiary"
-      iconLayout=""
-      class="bx--btn bx--btn-header bx--btn-reset"
-      @click.prevent="$session?.logOut"
-      size="field"
-    >
-      <Logout16 slot="icon" />
-    </bx-btn>
-
-    <bx-btn
-      v-if="$session?.isLoggedIn() && (!isSmallScreen && !isMediumScreen)"
-      data-id="logout-btn"
-      kind="tertiary"
-      iconLayout=""
-      class="bx--btn bx--btn-header bx--btn-reset"
-      @click.prevent="$session?.logOut"
-      size="field"
-    >
-      <span>Logout</span>
-      <Logout16 slot="icon" />
-    </bx-btn>
-
-</template>
-
 <script setup lang="ts">
-import Logout16 from '@carbon/icons-vue/es/logout/16';
-import { nodeEnv, appVersion } from '@/CoreConstants';
 import { ref, computed, onMounted } from 'vue';
+// Types
+import { nodeEnv, appVersion } from '@/CoreConstants';
+// @ts-ignore
+import Logout16 from '@carbon/icons-vue/es/logout/16';
 
 const envPrefix = "openshift-";
 const env = ref(nodeEnv);
@@ -67,3 +19,53 @@ const isMediumScreen = computed(() => screenWidth.value <= 671);
 
 onMounted(() => window.addEventListener('resize', updateScreenWidth));
 </script>
+
+<template>
+
+  <a href="https://gov.bc.ca">
+    <img
+      src="/img/logo1.svg"
+      alt="Go to the Government of British Columbia website"
+      v-if="isSmallScreen"
+    />
+    <img
+      src="/img/bc_for_logo.png"
+      alt="Go to the Government of British Columbia website"
+      v-else
+    />
+  </a>
+  <div class="heading">
+    <span class="heading-compact-01" v-if="$session?.user?.provider !== 'idir'">Ministry of Forests</span>
+    <span class="heading-compact-01" v-else>Client Management System</span>
+    <span class="heading-compact-01" v-if="env !== 'Prod'">Env. {{ env }} - Rel. {{appVersion}}</span>
+  </div>
+
+  <div class="heading-space"></div>
+
+  <!-- Remember to add profile button here -->
+  <bx-btn
+    v-if="$session?.isLoggedIn() && (isSmallScreen || isMediumScreen)"
+    data-id="logout-btn"
+    kind="tertiary"
+    iconLayout=""
+    class="bx--btn bx--btn-header bx--btn-reset"
+    @click.prevent="$session?.logOut"
+    size="field"
+  >
+    <Logout16 slot="icon" />
+  </bx-btn>
+
+  <bx-btn
+    v-if="$session?.isLoggedIn() && (!isSmallScreen && !isMediumScreen)"
+    data-id="logout-btn"
+    kind="tertiary"
+    iconLayout=""
+    class="bx--btn bx--btn-header bx--btn-reset"
+    @click.prevent="$session?.logOut"
+    size="field"
+  >
+    <span>Logout</span>
+    <Logout16 slot="icon" />
+  </bx-btn>
+
+</template>
diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue
@@ -1,51 +1,6 @@
-<template>
-  <bx-form-item class="grouping-02">
-    <bx-input
-      :id="id"
-      :name="id"
-      type="text"
-      :data-scroll="id"
-      :data-id="'input-' + id"
-      :placeholder="'Start typing to search for your ' + label"
-      :value="inputValue"
-      :label-text="label"
-      :helper-text="tip"
-      @focus="autoCompleteVisible = true"
-      :invalid="error ? true : false"
-      :validityMessage="error"
-      @blur="(event:any) => blur(event.target.value)"
-      @input="(event:any) => inputValue = event.target.value"
-    />
-    <div
-      class="autocomplete-items"
-      :id="id + 'list'"
-      v-show="
-        autoCompleteVisible && inputValue.length > 2 && contents.length > 0
-      "
-    >
-      <div class="autocomplete-items-ct" v-if="loading">
-        <bx-inline-loading status="active">Loading data...</bx-inline-loading>
-      </div>
-      <div class="autocomplete-items-ct" v-else>
-        <div
-          v-for="item in contents"
-          :key="item.code"
-          :data-id="item.code"
-          :data-value="item.name"
-          class="autocomplete-items-cell"
-          @click="selectAutocompleteItem"
-        >
-          <strong :data-id="item.code" :data-value="item.name">{{
-            item.name
-          }}</strong>
-        </div>
-      </div>
-    </div>
-  </bx-form-item>
-</template>
-
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { useEventBus } from '@vueuse/core'
 import { isEmpty, type BusinessSearchResult } from '@/dto/CommonTypesDto'
 
 //Define the input properties for this component
@@ -73,6 +28,8 @@ const autoCompleteVisible = ref(false)
 //We initialize the error message handling for validation
 const error = ref<string | undefined>(props.errorMessage || '')
 
+const revalidateBus = useEventBus<void>('revalidate-bus')
+
 //We watch for error changes to emit events
 watch(error, () => emit('error', error.value))
 watch(
@@ -144,7 +101,58 @@ const selectAutocompleteItem = (event: any) => {
   emit('update:selected-value', selectedValue)
   autoCompleteVisible.value = false
 }
+
+revalidateBus.on(() => validateInput(inputValue.value))
 </script>
+
+<template>
+  <bx-form-item class="grouping-02">
+    <bx-input
+      :id="id"
+      :name="id"
+      type="text"
+      :data-focus="id"
+      :data-scroll="id"
+      :data-id="'input-' + id"
+      :placeholder="'Start typing to search for your ' + label"
+      :value="inputValue"
+      :label-text="label"
+      :helper-text="tip"
+      @focus="autoCompleteVisible = true"
+      :invalid="error ? true : false"
+      :validityMessage="error"
+      @blur="(event:any) => blur(event.target.value)"
+      @input="(event:any) => inputValue = event.target.value"
+    />
+    <div
+      class="autocomplete-items"
+      :id="id + 'list'"
+      v-show="
+        autoCompleteVisible && inputValue.length > 2 && contents.length > 0
+      "
+    >
+      <div class="autocomplete-items-ct" v-if="loading">
+        <bx-inline-loading status="active">Loading data...</bx-inline-loading>
+      </div>
+      <div class="autocomplete-items-ct" v-else>
+        <div
+          v-for="item in contents"
+          :key="item.code"
+          :data-id="item.code"
+          :data-value="item.name"
+          class="autocomplete-items-cell"
+          @click="selectAutocompleteItem"
+        >
+          <strong :data-id="item.code" :data-value="item.name">{{
+            item.name
+          }}</strong>
+        </div>
+      </div>
+    </div>
+  </bx-form-item>
+</template>
+
+
 <style scoped>
 .autocomplete {
   /*the container must be positioned relative:*/

diff --git a/frontend/src/components/forms/DropdownInputComponent.vue b/frontend/src/components/forms/DropdownInputComponent.vue
@@ -1,28 +1,6 @@
-<template>
-  <div class="grouping-03">
-  <bx-dropdown
-    :id="id"
-    :data-scroll="id"
-    :value="selectedValue"
-    :label-text="label"
-    :helper-text="tip"
-    :invalid="error ? true : false"
-    :validityMessage="error"
-    @bx-dropdown-beingselected="(target:any) => selectedValue = target.detail.item.__value"
-  >
-    <bx-dropdown-item
-      v-for="option in modelValue"
-      :key="option.code"
-      :value="option.code"
-      :data-item="option.code"
-      >{{ option.name }}</bx-dropdown-item
-    >
-  </bx-dropdown>
-</div>
-</template>
-
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { useEventBus } from '@vueuse/core'
 import { type CodeNameType, isEmpty } from '@/dto/CommonTypesDto'
 
 //Define the input properties for this component
@@ -47,6 +25,8 @@ const emit = defineEmits<{
 //We initialize the error message handling for validation
 const error = ref<string | undefined>(props.errorMessage || '')
 
+const revalidateBus = useEventBus<void>('revalidate-bus')
+
 //We watch for error changes to emit events
 watch(error, () => emit('error', error.value))
 watch(
@@ -101,4 +81,32 @@ watch(
     setTimeout(() => (selectedValue.value = props.initialValue), 400)
   }
 )
+
+revalidateBus.on(() => validateInput(selectedValue.value))
 </script>
+
+
+<template>
+  <div class="grouping-03">
+  <bx-dropdown
+    :id="id"
+    :data-focus="id"
+    :data-scroll="id"
+    :value="selectedValue"
+    :label-text="label"
+    :helper-text="tip"
+    :invalid="error ? true : false"
+    :validityMessage="error"
+    @bx-dropdown-beingselected="(target:any) => selectedValue = target.detail.item.__value"
+  >
+    <bx-dropdown-item
+      v-for="option in modelValue"
+      :key="option.code"
+      :value="option.code"
+      :data-item="option.code"
+      >{{ option.name }}</bx-dropdown-item
+    >
+  </bx-dropdown>
+</div>
+</template>
+