From f404dd1e4d48d82f09ed08d384a90c64dd6d3021 Mon Sep 17 00:00:00 2001
From: Josh Traill <josh.traill@quartech.com>
Date: Fri, 20 Dec 2024 10:41:25 -0800
Subject: [PATCH 1/2] feat: court file search follow mockups refactor: script
 to composition api

---
 .../courtfilesearch/CourtFileSearchView.vue   | 1037 +++++++----------
 1 file changed, 446 insertions(+), 591 deletions(-)

diff --git a/web/src/components/courtfilesearch/CourtFileSearchView.vue b/web/src/components/courtfilesearch/CourtFileSearchView.vue
index af484deb..7093cf2b 100644
--- a/web/src/components/courtfilesearch/CourtFileSearchView.vue
+++ b/web/src/components/courtfilesearch/CourtFileSearchView.vue
@@ -1,243 +1,189 @@
 <template>
-  <b-card class="main-container px-0" no-body bg-variant="white">
-    <b-card
-      body-class="px-0"
-      bg-variant="light"
-      v-if="!isLookupDataMounted && !isLookupDataReady"
-    >
-      <b-overlay :show="true">
-        <b-card style="min-height: 100px" />
-        <template v-slot:overlay>
-          <div>
-            <loading-spinner />
-            <p id="loading-label">Loading ...</p>
-          </div>
-        </template>
-      </b-overlay>
-    </b-card>
-    <b-card
-      body-class="px-0"
-      bg-variant="light"
-      v-else-if="isLookupDataMounted && !isLookupDataReady"
-    >
-      <b-card style="min-height: 40px">
-        <span v-if="errorCode != '0'">
-          <span v-if="errorCode === '403'">
-            You are not authorized to access this page.
-          </span>
-          <span v-else>
-            Server is not responding.
-            <b>({{ errorText }} "{{ errorCode }}")</b></span
-          >
+  <!-- todo: Extract this out to more generic location -->
+  <v-overlay :opacity="0.333" v-model="isLoading" />
+  <b-card
+    body-class="px-0"
+    bg-variant="light"
+    v-if="isLookupDataMounted && !isLookupDataReady"
+  >
+    <b-card style="min-height: 40px">
+      <span v-if="errorCode != '0'">
+        <span v-if="errorCode === '403'">
+          You are not authorized to access this page.
         </span>
-        <span v-else> No Court File Search Found. </span>
-      </b-card>
-    </b-card>
-    <b-card body-class="px-0" v-else>
-      <h2>Court File Search</h2>
-      <b-form
-        class="search-form"
-        v-if="isLookupDataMounted && isLookupDataReady"
-        @submit.prevent="handleSubmit"
-      >
-        <b-form-group label="Location:" class="mr-3">
-          <b-form-select v-model="searchCriteria.fileHomeAgencyId">
-            <option value=""></option>
-            <option
-              v-for="option in courtRooms"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.text }}
-            </option>
-          </b-form-select>
-        </b-form-group>
-
-        <!-- Division -->
-        <b-form-group label="Division*" class="mr-3">
-          <b-button-group>
-            <b-button
-              value="isCriminal"
-              @click="handleDivisionChange"
-              :variant="
-                searchCriteria.isCriminal ? 'primary' : 'outline-primary'
-              "
-            >
-              Criminal
-            </b-button>
-            <b-button
-              value="isFamily"
-              @click="handleDivisionChange"
-              :variant="searchCriteria.isFamily ? 'primary' : 'outline-primary'"
-            >
-              Family
-            </b-button>
-            <b-button
-              value="isSmallClaims"
-              @click="handleDivisionChange"
-              :variant="
-                searchCriteria.isSmallClaims ? 'primary' : 'outline-primary'
-              "
-            >
-              Small Claims
-            </b-button>
-          </b-button-group>
-        </b-form-group>
-
-        <!-- Class -->
-        <b-form-group label="Class:" class="mr-3">
-          <b-form-select v-model="searchCriteria.class">
-            <option value=""></option>
-            <option
-              v-for="option in classOptions"
-              :key="option.code"
-              :value="option.code"
-            >
-              {{ option.shortDesc }}
-            </option>
-          </b-form-select>
-        </b-form-group>
-
-        <!-- Search -->
-        <div class="d-flex align-items-end">
-          <b-form-group label="Search*" horizontal>
-            <b-form-select class="search" v-model="searchCriteria.searchBy">
-              <option value="fileNumber">File number</option>
-              <option value="lastName">Surname</option>
-              <option value="orgName">Organization</option>
-            </b-form-select>
-          </b-form-group>
-
-          <b-form-group v-if="searchCriteria.searchBy === 'fileNumber'">
-            <b-form-input
-              class="search-input"
-              :class="{ 'is-invalid': errors.isMissingFileNo }"
-              placeholder="e.g. 99999999"
-              v-model="searchCriteria.fileNumberTxt"
-            ></b-form-input>
-          </b-form-group>
-
-          <b-form-group v-if="searchCriteria.searchBy === 'lastName'">
-            <b-form-input
-              class="search-input"
-              placeholder="MacDonald"
-              :class="{ 'is-invalid': errors.isMissingSurname }"
-              v-model="searchCriteria.lastName"
-            ></b-form-input>
-          </b-form-group>
-
-          <b-form-group v-if="searchCriteria.searchBy === 'orgName'">
-            <b-form-input
-              class="search-input"
-              :class="{ 'is-invalid': errors.isMissingOrg }"
-              placeholder="e.g. MegaCorp Inc."
-              v-model="searchCriteria.orgName"
-            ></b-form-input>
-          </b-form-group>
-          <!-- Submit -->
-          <b-button
-            variant="primary"
-            class="search-btn mb-3"
-            type="submit"
-            :disabled="isSearching"
-          >
-            <b-icon icon="search"></b-icon>
-            Search
-          </b-button>
-          <!-- Reset -->
-          <b-button
-            variant="link"
-            class="reset mb-3"
-            @click="() => handleReset(true)"
-          >
-            Reset search
-          </b-button>
-        </div>
-        <div
-          v-if="
-            (searchCriteria.isCriminal &&
-              searchCriteria.searchBy === 'fileNumber') ||
-            searchCriteria.searchBy === 'lastName'
-          "
+        <span v-else>
+          Server is not responding.
+          <b>({{ errorText }} "{{ errorCode }}")</b></span
         >
-          <span>Optional...</span>
-          <div class="d-flex p-3 bg-light">
-            <div class="d-flex" v-if="searchCriteria.searchBy === 'fileNumber'">
-              <b-form-group
-                class="mr-3"
-                label="Prefix"
-                label-for="filePrefixTxt"
-              >
-                <b-form-input
-                  id="filePrefixTxt"
-                  placeholder="AH"
-                  v-model="searchCriteria.filePrefixTxt"
-                ></b-form-input>
-              </b-form-group>
-
-              <b-form-group
-                class="mr-3"
-                label="Seq Num"
-                label-for="fileSuffixNo"
-              >
-                <b-form-input
-                  id="fileSuffixNo"
-                  placeholder="1"
-                  v-model="searchCriteria.fileSuffixNo"
-                ></b-form-input>
-              </b-form-group>
-
-              <b-form-group label="Type Ref" label-for="mDocRefTypeCode">
-                <b-form-input
-                  id="mDocRefTypeCode"
-                  placeholder="B"
-                  v-model="searchCriteria.mDocRefTypeCode"
-                ></b-form-input>
-              </b-form-group>
-            </div>
-
-            <b-form-group
-              label="Given Name"
-              label-for="givenName"
-              v-if="searchCriteria.searchBy === 'lastName'"
-            >
-              <b-form-input
-                id="givenName"
-                placeholder="e.g. John"
-                v-model="searchCriteria.givenName"
-              ></b-form-input>
-            </b-form-group>
-          </div>
-        </div>
-      </b-form>
-      <court-file-search-result
-        class="mb-5"
-        v-if="isSearching || hasSearched"
-        :isLookupDataMounted="isLookupDataMounted"
-        :isLookupDataReady="isLookupDataReady"
-        :courtRooms="courtRooms"
-        :classes="classes"
-        :isCriminal="searchCriteria.isCriminal"
-        :searchResults="searchResults"
-        :isSearching="isSearching"
-        @files-viewed="viewFiles"
-        :selectedFiles="selectedFiles"
-        @add-selected="addSelectedFile"
-        @remove-selected="removeSelectedFile"
-        @clear-selected="clearSelectedFiles"
-        :isSearchResultsOver="isSearchResultsOver"
-      >
-      </court-file-search-result>
+      </span>
+      <span v-else> No Court File Search Found. </span>
     </b-card>
   </b-card>
+  <!------------------------------------------------------->
+  <v-banner style="background-color: #62d3a4; color: #183a4a">
+    <v-row class="my-3">
+      <v-col>
+        <h3>Court file search</h3>
+      </v-col>
+    </v-row>
+  </v-banner>
+  <v-container>
+    <v-form
+      class="search-form"
+      v-if="isLookupDataMounted && isLookupDataReady"
+      @submit.prevent="handleSubmit"
+    >
+      <v-row>
+        <v-col cols="2">
+          <v-select
+            v-model="searchCriteria.searchBy"
+            :items="[
+              { text: 'File number', value: 'fileNumber' },
+              { text: 'Last name', value: 'lastName' },
+              { text: 'Organization', value: 'orgName' },
+            ]"
+            label="Search by"
+            item-title="text"
+            item-value="value"
+            :clearable="false"
+          />
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            v-if="searchCriteria.searchBy === 'fileNumber'"
+            label="File number"
+            placeholder="i.e 256344-1"
+            v-model="searchCriteria.fileNumberTxt"
+            :error-messages="
+              errors.isMissingFileNo ? ['File number is required'] : []
+            "
+          />
+          <v-text-field
+            v-else-if="searchCriteria.searchBy === 'lastName'"
+            label="Surname"
+            placeholder="Smith"
+            v-model="searchCriteria.lastName"
+            :error-messages="
+              errors.isMissingSurname ? ['Surname is required'] : []
+            "
+          />
+          <v-text-field
+            v-else-if="searchCriteria.searchBy === 'orgName'"
+            label="Organization"
+            placeholder="i.e. Steele Trading"
+            v-model="searchCriteria.orgName"
+            :error-messages="
+              errors.isMissingOrg ? ['Organization is required'] : []
+            "
+          />
+        </v-col>
+        <v-col cols="2">
+          <v-select
+            v-model="searchCriteria.fileHomeAgencyId"
+            :items="courtRooms"
+            item-title="text"
+            label="Location"
+          />
+        </v-col>
+        <v-col cols="2">
+          <v-select
+            v-model="selectedDivision"
+            label="Division"
+            :items="divisions"
+            :clearable="false"
+            item-title="text"
+            required
+            @update:modelValue="handleDivisionChange"
+          />
+        </v-col>
+        <v-col>
+          <action-buttons @reset="handleReset(true)" />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="2">
+          <v-select
+            label="Class"
+            :items="classOptions"
+            item-title="shortDesc"
+            item-value="code"
+            v-model="searchCriteria.class"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          v-if="showClassDropdown && searchCriteria.searchBy === 'lastName'"
+        >
+          <v-text-field
+            id="givenName"
+            label="Given Name"
+            placeholder="e.g. John"
+            v-model="searchCriteria.givenName"
+          />
+        </v-col>
+        <template
+          v-else-if="
+            showClassDropdown && searchCriteria.searchBy === 'fileNumber'
+          "
+        >
+          <v-col cols="1">
+            <v-text-field
+              label="Prefix"
+              placeholder="AH"
+              density="comfortable"
+              :rounded="false"
+              v-model="searchCriteria.filePrefixTxt"
+            />
+          </v-col>
+          <v-col cols="1">
+            <v-text-field
+              label="Seq #"
+              placeholder="1"
+              density="comfortable"
+              :rounded="false"
+              v-model="searchCriteria.fileSuffixNo"
+            />
+          </v-col>
+          <v-col cols="1">
+            <v-text-field
+              label="Type Ref"
+              placeholder="8"
+              density="comfortable"
+              :rounded="false"
+              v-model="searchCriteria.mDocRefTypeCode"
+            />
+          </v-col>
+        </template>
+      </v-row>
+    </v-form>
+    <court-file-search-result
+      class="mb-5 mt-10"
+      :isLookupDataMounted="isLookupDataMounted"
+      :isLookupDataReady="isLookupDataReady"
+      :courtRooms="courtRooms"
+      :classes="classes"
+      :isCriminal="searchCriteria.isCriminal"
+      :searchResults="searchResults"
+      :isSearching="isSearching"
+      @files-viewed="viewFiles"
+      :selectedFiles="selectedFiles"
+      @add-selected="addSelectedFile"
+      @remove-selected="removeSelectedFile"
+      @clear-selected="clearSelectedFiles"
+      :isSearchResultsOver="isSearchResultsOver"
+    >
+    </court-file-search-result>
+  </v-container>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
   import CourtFileSearchResult from '@/components/courtfilesearch/CourtFileSearchResult.vue';
   import { FilesService } from '@/services/FilesService';
   import { LocationService } from '@/services/LocationService';
   import { LookupService } from '@/services/LookupService';
   import { useCommonStore, useCourtFileSearchStore } from '@/stores';
   import { KeyValueInfo, LookupCode } from '@/types/common';
+  import ActionButtons from '@/components/shared/Form/ActionButtons.vue';
   import {
     CourtClassEnum,
     CourtFileSearchCriteria,
@@ -245,380 +191,289 @@
     SearchModeEnum,
   } from '@/types/courtFileSearch';
   import { roomsInfoType } from '@/types/courtlist';
-  import { defineComponent, inject, onMounted, reactive, ref } from 'vue';
+  import { computed, inject, onMounted, reactive, ref } from 'vue';
   import { useRouter } from 'vue-router';
 
   const CRIMINAL_CODE = 'R';
   const SMALL_CLAIMS_CODE = 'I';
   const SEARCH_RESULT_LIMIT = 100;
 
-  export default defineComponent({
-    components: {
-      CourtFileSearchResult,
-    },
-    setup() {
-      const courtFileSearchStore = useCourtFileSearchStore();
-      const commonStore = useCommonStore();
-      const router = useRouter();
-
-      let searchCriteria: CourtFileSearchCriteria = reactive({
-        isCriminal: true,
-        isFamily: false,
-        isSmallClaims: false,
-        searchBy: 'fileNumber',
-        fileHomeAgencyId: commonStore.userInfo!.agencyCode,
-      });
-      const classOptions = ref<LookupCode[]>([]);
-      const selectedFiles = ref<FileDetail[]>([]);
-      const searchResults = ref<FileDetail[]>([]);
-      const classes = ref<LookupCode[]>([]);
-      const courtRooms = ref<roomsInfoType[]>([]);
-      const isLookupDataReady = ref(false);
-      const isLookupDataMounted = ref(false);
-      const isSearching = ref(false);
-      const hasSearched = ref(false);
-      const isSearchResultsOver = ref(false);
-      const defaultLocation = commonStore.userInfo!.agencyCode;
-
-      const errorCode = ref('');
-      const errorText = ref('');
-      const errors = reactive({
-        isMissingFileNo: false,
-        isMissingSurname: false,
-        isMissingOrg: false,
-      });
-
-      const locationService = inject<LocationService>('locationService');
-      const lookupService = inject<LookupService>('lookupService');
-      const filesService = inject<FilesService>('filesService');
-
-      if (!locationService || !lookupService || !filesService) {
-        throw new Error('Services is undefined.');
-      }
+  const courtFileSearchStore = useCourtFileSearchStore();
+  const commonStore = useCommonStore();
+  const router = useRouter();
 
-      onMounted(async () => {
-        await loadData();
-      });
-
-      const loadData = async (): Promise<void> => {
-        try {
-          const [courtRoomsResp, courtClassesResp] = await Promise.all([
-            locationService.getCourtRooms(),
-            lookupService.getCourtClasses(),
-          ]);
-
-          courtRooms.value = courtRoomsResp;
-          classes.value = courtClassesResp;
-          loadDataFromState();
-          loadClasses();
-          isLookupDataReady.value = true;
-        } catch (err: unknown) {
-          console.error(err);
-          // errorCode = err.status;
-          // errorText = err.statusText;
-          // if (errorCode != 401) {
-          //   $bvToast.toast(
-          //     `Error - ${errorCode} - ${errorText}`,
-          //     {
-          //       title: 'An error has occured.',
-          //       variant: 'danger',
-          //       autoHideDelay: 10000,
-          //     }
-          //   );
-          // }
-          // console.log(errorCode);
-        } finally {
-          isLookupDataMounted.value = true;
-        }
-      };
-
-      const handleDivisionChange = (event: Event) => {
-        searchCriteria.isCriminal = false;
-        searchCriteria.isFamily = false;
-        searchCriteria.isSmallClaims = false;
-
-        const target = event.target as HTMLInputElement;
-        searchCriteria[target.value] = true;
-
-        handleReset();
-      };
-
-      const handleSubmit = async () => {
-        courtFileSearchStore.clearSelectedFiles();
-
-        sanitizeTextInputs();
-        resetErrors();
-
-        errors.isMissingFileNo =
-          searchCriteria.searchBy === 'fileNumber' &&
-          !searchCriteria.fileNumberTxt;
-        errors.isMissingSurname =
-          searchCriteria.searchBy === 'lastName' && !searchCriteria.lastName;
-        errors.isMissingOrg =
-          searchCriteria.searchBy === 'orgName' && !searchCriteria.orgName;
-
-        // Don't proceed if any of the validation flag is set to true
-        const hasNoErrors = Object.values(errors).every(
-          (value) => value === false
-        );
-        if (!hasNoErrors) {
-          return;
-        }
-
-        try {
-          isSearching.value = true;
-          searchResults.value.length = 0;
-          isSearchResultsOver.value = false;
-
-          const { recCount, fileDetail } = searchCriteria.isCriminal
-            ? await filesService.searchCriminalFiles(buildQueryParams())
-            : await filesService.searchCivilFiles(buildQueryParams());
-
-          // Make sure that to only show up to 100 results
-          isSearchResultsOver.value = recCount > SEARCH_RESULT_LIMIT;
-          searchResults.value = [...fileDetail.slice(0, SEARCH_RESULT_LIMIT)];
-        } catch (err: unknown) {
-          console.error(err);
-          // errorCode = err.status;
-          // errorText = err.statusText;
-          // if (errorCode != 401) {
-          //   $bvToast.toast(
-          //     `Error - ${errorCode} - ${errorText}`,
-          //     {
-          //       title: 'An error has occured.',
-          //       variant: 'danger',
-          //       autoHideDelay: 10000,
-          //     }
-          //   );
-          // }
-          // console.log(errorCode);
-        } finally {
-          hasSearched.value = true;
-          isSearching.value = false;
-        }
-      };
-
-      const handleReset = (resetDivision = false) => {
-        courtFileSearchStore.clearSelectedFiles();
-        searchCriteria.isCriminal = resetDivision
-          ? true
-          : searchCriteria.isCriminal;
-        searchCriteria.isFamily = resetDivision
-          ? false
-          : searchCriteria.isFamily;
-        searchCriteria.isSmallClaims = resetDivision
-          ? false
-          : searchCriteria.isSmallClaims;
-        searchCriteria.fileHomeAgencyId = defaultLocation;
-        searchCriteria.searchBy = 'fileNumber';
-        searchCriteria.fileNumberTxt = undefined;
-        searchCriteria.lastName = undefined;
-        searchCriteria.givenName = undefined;
-        searchCriteria.orgName = undefined;
-        searchCriteria.class = undefined;
-
-        if (searchCriteria.isCriminal) {
-          searchCriteria.filePrefixTxt = undefined;
-          searchCriteria.fileSuffixNo = undefined;
-          searchCriteria.mDocRefTypeCode = undefined;
-        }
-
-        loadClasses();
-        resetErrors();
-
-        searchResults.value.length = 0;
-        hasSearched.value = false;
-      };
-
-      const sanitizeTextInputs = () => {
-        searchCriteria.fileNumberTxt = searchCriteria.fileNumberTxt?.trim();
-        searchCriteria.filePrefixTxt = searchCriteria.filePrefixTxt?.trim();
-        searchCriteria.fileSuffixNo = searchCriteria.fileSuffixNo?.trim();
-        searchCriteria.mDocRefTypeCode = searchCriteria.mDocRefTypeCode?.trim();
-
-        searchCriteria.lastName = searchCriteria.lastName?.trim();
-        searchCriteria.givenName = searchCriteria.givenName?.trim();
-
-        searchCriteria.orgName = searchCriteria.orgName?.trim();
-      };
-
-      const resetErrors = () => {
-        errors.isMissingFileNo = false;
-        errors.isMissingSurname = false;
-        errors.isMissingOrg = false;
-      };
-
-      const loadClasses = () => {
-        if (searchCriteria.isCriminal) {
-          classOptions.value = classes.value.filter(
-            (c) => c.longDesc === CRIMINAL_CODE
-          );
-        } else if (searchCriteria.isFamily) {
-          classOptions.value = [];
-        } else if (searchCriteria.isSmallClaims) {
-          classOptions.value = classes.value.filter(
-            (c) =>
-              c.longDesc === SMALL_CLAIMS_CODE &&
-              c.code !== CourtClassEnum[CourtClassEnum.C]
-          );
-        }
-      };
-
-      const buildQueryParams = () => {
-        const queryParams = buildSearchByQueryParams();
-
-        // Class
-        if (searchCriteria.isFamily) {
-          queryParams['courtClass'] = CourtClassEnum.F;
-        } else if (searchCriteria.class) {
-          queryParams['courtClass'] = CourtClassEnum[searchCriteria.class];
-        } else if (searchCriteria.isSmallClaims) {
-          queryParams['courtClass'] = CourtClassEnum.C;
-        }
-
-        if (searchCriteria.fileHomeAgencyId) {
-          queryParams['fileHomeAgencyId'] = searchCriteria.fileHomeAgencyId;
-        }
-
-        return queryParams;
-      };
-
-      const buildSearchByQueryParams = () => {
-        const queryParams = {};
-
-        if (searchCriteria.searchBy === 'fileNumber') {
-          queryParams['searchMode'] = SearchModeEnum.FileNo;
-          queryParams['fileNumberTxt'] = searchCriteria.fileNumberTxt;
-
-          if (searchCriteria.filePrefixTxt) {
-            queryParams['filePrefixTxt'] = searchCriteria.filePrefixTxt;
-          }
-          if (searchCriteria.fileSuffixNo) {
-            queryParams['fileSuffixNo'] = searchCriteria.fileSuffixNo;
-          }
-          if (searchCriteria.mDocRefTypeCode) {
-            queryParams['mDocRefTypeCode'] = searchCriteria.mDocRefTypeCode;
-          }
-        } else if (searchCriteria.searchBy === 'lastName') {
-          queryParams['searchMode'] = SearchModeEnum.PartName;
-          queryParams['lastName'] = searchCriteria.lastName;
-
-          if (searchCriteria.givenName) {
-            queryParams['givenName'] = searchCriteria.givenName;
-          }
-        } else {
-          queryParams['searchMode'] = SearchModeEnum.PartName;
-          queryParams['orgName'] = searchCriteria.orgName;
-        }
-
-        return queryParams;
-      };
-
-      const loadDataFromState = () => {
-        const search = courtFileSearchStore.currentSearchCriteria;
-        const results = courtFileSearchStore.currentSearchResults;
-        const selectedFilesFromStore = courtFileSearchStore.selectedFiles;
-
-        if (search && results) {
-          //Object.assign(searchCriteria, search);
-          searchResults.value = [...results];
-
-          const idSelector = searchCriteria.isCriminal
-            ? 'mdocJustinNo'
-            : 'physicalFileId';
-          const files = searchResults.value.filter((c) =>
-            selectedFilesFromStore.some((f) => f.key === c[idSelector])
-          );
-          selectedFiles.value = [...files];
-
-          hasSearched.value = true;
-        }
-      };
-
-      const viewFiles = (selectedFiles: KeyValueInfo[]) => {
-        courtFileSearchStore.addFilesForViewing({
-          searchCriteria: searchCriteria,
-          searchResults: searchResults.value,
-          files: selectedFiles,
-        });
-        const caseDetailUrl = `/${searchCriteria.isCriminal ? 'criminal-file' : 'civil-file'}/${selectedFiles[0].key}`;
-        router.push(caseDetailUrl);
-      };
-
-      const addSelectedFile = (file: FileDetail) => {
-        selectedFiles.value.push(file);
-      };
-
-      const removeSelectedFile = (idSelector: string, fileId: string) => {
-        selectedFiles.value = selectedFiles.value.filter(
-          (c) => c[idSelector] !== fileId
-        );
-      };
-
-      const clearSelectedFiles = () => {
-        selectedFiles.value = [];
-        courtFileSearchStore.clearSelectedFiles();
-      };
-
-      return {
-        errorText,
-        errorCode,
-        courtRooms,
-        classes,
-        searchResults,
-        selectedFiles,
-        isLookupDataMounted,
-        isLookupDataReady,
-        hasSearched,
-        isSearching,
-        isSearchResultsOver,
-        classOptions,
-        searchCriteria,
-        errors,
-        viewFiles,
-        addSelectedFile,
-        clearSelectedFiles,
-        removeSelectedFile,
-        handleDivisionChange,
-        handleSubmit,
-        handleReset,
-      };
-    },
+  let searchCriteria: CourtFileSearchCriteria = reactive({
+    isCriminal: true,
+    isFamily: false,
+    isSmallClaims: false,
+    searchBy: 'fileNumber',
+    fileHomeAgencyId: commonStore.userInfo!.agencyCode,
+  });
+  const classOptions = ref<LookupCode[]>([]);
+  const selectedFiles = ref<FileDetail[]>([]);
+  const searchResults = ref<FileDetail[]>([]);
+  const classes = ref<LookupCode[]>([]);
+  const courtRooms = ref<roomsInfoType[]>([]);
+  const isLookupDataReady = ref(false);
+  const isLookupDataMounted = ref(false);
+  const isSearching = ref(false);
+  const isSearchResultsOver = ref(false);
+  const isLoading = ref(true);
+  const defaultLocation = commonStore.userInfo!.agencyCode;
+  const divisions = [
+    { value: 'isCriminal', text: 'Criminal' },
+    { value: 'isFamily', text: 'Family' },
+    { value: 'isSmallClaims', text: 'Small Claims' },
+  ];
+  const errorCode = ref('');
+  const errorText = ref('');
+  const filtersEnabled = ref(false);
+  const errors = reactive({
+    isMissingFileNo: false,
+    isMissingSurname: false,
+    isMissingOrg: false,
   });
-</script>
-
-<style scoped lang="scss">
-  .card {
-    border: white;
-  }
-
-  .btn-group.active {
-    color: #1b4f86;
-  }
 
-  .transparent {
-    background-color: transparent;
-  }
+  const locationService = inject<LocationService>('locationService');
+  const lookupService = inject<LookupService>('lookupService');
+  const filesService = inject<FilesService>('filesService');
 
-  .reset,
-  .reset:hover,
-  .reset:focus {
-    text-decoration: none !important;
-    color: #1b4f86 !important;
-    box-shadow: none;
+  if (!locationService || !lookupService || !filesService) {
+    throw new Error('Services is undefined.');
   }
 
-  .search {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-  }
+  onMounted(async () => {
+    await loadData();
+    isLoading.value = false;
+  });
 
-  .search-input {
-    border-radius: 0;
-  }
+  const toggleFilters = () => {
+    filtersEnabled.value = !filtersEnabled.value;
+  };
+
+  const loadData = async (): Promise<void> => {
+    try {
+      const [courtRoomsResp, courtClassesResp] = await Promise.all([
+        locationService.getCourtRooms(),
+        lookupService.getCourtClasses(),
+      ]);
+
+      courtRooms.value = courtRoomsResp;
+      classes.value = courtClassesResp;
+      loadDataFromState();
+      loadClasses();
+      isLookupDataReady.value = true;
+    } catch (err: unknown) {
+      console.error(err);
+    } finally {
+      isLookupDataMounted.value = true;
+    }
+  };
+
+  const handleDivisionChange = () => {
+    Object.assign(searchCriteria, {
+      isCriminal: false,
+      isFamily: false,
+      isSmallClaims: false,
+      [selectedDivision.value]: true,
+    });
+
+    handleReset();
+  };
+
+  const handleSubmit = async () => {
+    courtFileSearchStore.clearSelectedFiles();
+
+    sanitizeTextInputs();
+    resetErrors();
+
+    errors.isMissingFileNo =
+      searchCriteria.searchBy === 'fileNumber' && !searchCriteria.fileNumberTxt;
+    errors.isMissingSurname =
+      searchCriteria.searchBy === 'lastName' && !searchCriteria.lastName;
+    errors.isMissingOrg =
+      searchCriteria.searchBy === 'orgName' && !searchCriteria.orgName;
+
+    // Don't proceed if any of the validation flag is set to true
+    const hasNoErrors = Object.values(errors).every((value) => value === false);
+    if (!hasNoErrors) {
+      return;
+    }
+
+    try {
+      isSearching.value = true;
+      searchResults.value.length = 0;
+      isSearchResultsOver.value = false;
+
+      const { recCount, fileDetail } = searchCriteria.isCriminal
+        ? await filesService.searchCriminalFiles(buildQueryParams())
+        : await filesService.searchCivilFiles(buildQueryParams());
+
+      // Make sure that to only show up to 100 results
+      isSearchResultsOver.value = recCount > SEARCH_RESULT_LIMIT;
+      searchResults.value = [...fileDetail.slice(0, SEARCH_RESULT_LIMIT)];
+    } catch (err: unknown) {
+      console.error(err);
+    } finally {
+      isSearching.value = false;
+    }
+  };
+
+  const handleReset = (resetDivision = false) => {
+    courtFileSearchStore.clearSelectedFiles();
+    searchCriteria.isCriminal = resetDivision
+      ? true
+      : searchCriteria.isCriminal;
+    searchCriteria.isFamily = resetDivision ? false : searchCriteria.isFamily;
+    searchCriteria.isSmallClaims = resetDivision
+      ? false
+      : searchCriteria.isSmallClaims;
+    searchCriteria.fileHomeAgencyId = defaultLocation;
+    searchCriteria.searchBy = 'fileNumber';
+    searchCriteria.fileNumberTxt = undefined;
+    searchCriteria.lastName = undefined;
+    searchCriteria.givenName = undefined;
+    searchCriteria.orgName = undefined;
+    searchCriteria.class = undefined;
+
+    if (searchCriteria.isCriminal) {
+      searchCriteria.filePrefixTxt = undefined;
+      searchCriteria.fileSuffixNo = undefined;
+      searchCriteria.mDocRefTypeCode = undefined;
+    }
+
+    loadClasses();
+    resetErrors();
+
+    searchResults.value.length = 0;
+  };
+
+  const sanitizeTextInputs = () => {
+    searchCriteria.fileNumberTxt = searchCriteria.fileNumberTxt?.trim();
+    searchCriteria.filePrefixTxt = searchCriteria.filePrefixTxt?.trim();
+    searchCriteria.fileSuffixNo = searchCriteria.fileSuffixNo?.trim();
+    searchCriteria.mDocRefTypeCode = searchCriteria.mDocRefTypeCode?.trim();
+
+    searchCriteria.lastName = searchCriteria.lastName?.trim();
+    searchCriteria.givenName = searchCriteria.givenName?.trim();
+
+    searchCriteria.orgName = searchCriteria.orgName?.trim();
+  };
+
+  const resetErrors = () => {
+    errors.isMissingFileNo = false;
+    errors.isMissingSurname = false;
+    errors.isMissingOrg = false;
+  };
+
+  const loadClasses = () => {
+    searchCriteria.class = '';
+    if (selectedDivision.value === 'isCriminal') {
+      classOptions.value = classes.value.filter(
+        (c) => c.longDesc === CRIMINAL_CODE
+      );
+    } else if (selectedDivision.value === 'isSmallClaims') {
+      classOptions.value = classes.value.filter(
+        (c) =>
+          c.longDesc === SMALL_CLAIMS_CODE &&
+          c.code !== CourtClassEnum[CourtClassEnum.C]
+      );
+    } else {
+      classOptions.value = [];
+    }
+  };
+
+  const buildQueryParams = () => {
+    const queryParams = buildSearchByQueryParams();
+    if (searchCriteria.isFamily) {
+      queryParams['courtClass'] = CourtClassEnum.F;
+    } else if (searchCriteria.class) {
+      queryParams['courtClass'] = CourtClassEnum[searchCriteria.class];
+    } else if (searchCriteria.isSmallClaims) {
+      queryParams['courtClass'] = CourtClassEnum.C;
+    }
+
+    if (searchCriteria.fileHomeAgencyId) {
+      queryParams['fileHomeAgencyId'] = searchCriteria.fileHomeAgencyId;
+    }
+    return queryParams;
+  };
+
+  const buildSearchByQueryParams = () => {
+    const queryParams = {};
+
+    if (searchCriteria.searchBy === 'fileNumber') {
+      queryParams['searchMode'] = SearchModeEnum.FileNo;
+      queryParams['fileNumberTxt'] = searchCriteria.fileNumberTxt;
+
+      if (searchCriteria.filePrefixTxt) {
+        queryParams['filePrefixTxt'] = searchCriteria.filePrefixTxt;
+      }
+      if (searchCriteria.fileSuffixNo) {
+        queryParams['fileSuffixNo'] = searchCriteria.fileSuffixNo;
+      }
+      if (searchCriteria.mDocRefTypeCode) {
+        queryParams['mDocRefTypeCode'] = searchCriteria.mDocRefTypeCode;
+      }
+    } else if (searchCriteria.searchBy === 'lastName') {
+      queryParams['searchMode'] = SearchModeEnum.PartName;
+      queryParams['lastName'] = searchCriteria.lastName;
 
-  .search-btn {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-</style>
+      if (searchCriteria.givenName) {
+        queryParams['givenName'] = searchCriteria.givenName;
+      }
+    } else {
+      queryParams['searchMode'] = SearchModeEnum.PartName;
+      queryParams['orgName'] = searchCriteria.orgName;
+    }
+
+    return queryParams;
+  };
+
+  const loadDataFromState = () => {
+    const search = courtFileSearchStore.currentSearchCriteria;
+    const results = courtFileSearchStore.currentSearchResults;
+    const selectedFilesFromStore = courtFileSearchStore.selectedFiles;
+
+    if (search && results) {
+      searchResults.value = [...results];
+
+      const idSelector = searchCriteria.isCriminal
+        ? 'mdocJustinNo'
+        : 'physicalFileId';
+      const files = searchResults.value.filter((c) =>
+        selectedFilesFromStore.some((f) => f.key === c[idSelector])
+      );
+      selectedFiles.value = [...files];
+    }
+  };
+
+  const viewFiles = (selectedFiles: KeyValueInfo[]) => {
+    courtFileSearchStore.addFilesForViewing({
+      searchCriteria: searchCriteria,
+      searchResults: searchResults.value,
+      files: selectedFiles,
+    });
+    const caseDetailUrl = `/${searchCriteria.isCriminal ? 'criminal-file' : 'civil-file'}/${selectedFiles[0].key}`;
+    router.push(caseDetailUrl);
+  };
+
+  const addSelectedFile = (file: FileDetail) => {
+    selectedFiles.value.push(file);
+  };
+
+  const removeSelectedFile = (idSelector: string, fileId: string) => {
+    selectedFiles.value = selectedFiles.value.filter(
+      (c) => c[idSelector] !== fileId
+    );
+  };
+
+  const clearSelectedFiles = () => {
+    selectedFiles.value = [];
+    courtFileSearchStore.clearSelectedFiles();
+  };
+  const selectedDivision = ref('isCriminal');
+  const showClassDropdown = computed(() => {
+    return selectedDivision.value === 'isCriminal';
+  });
+</script>

From f7b22bfb7ec2b81af04c414b5c50df09b2319fe6 Mon Sep 17 00:00:00 2001
From: Josh Traill <josh.traill@quartech.com>
Date: Fri, 20 Dec 2024 10:53:51 -0800
Subject: [PATCH 2/2] refactor: whitespace

---
 web/src/components/courtfilesearch/CourtFileSearchView.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/courtfilesearch/CourtFileSearchView.vue b/web/src/components/courtfilesearch/CourtFileSearchView.vue
index 7093cf2b..bf22e5e3 100644
--- a/web/src/components/courtfilesearch/CourtFileSearchView.vue
+++ b/web/src/components/courtfilesearch/CourtFileSearchView.vue
@@ -178,12 +178,12 @@
 
 <script setup lang="ts">
   import CourtFileSearchResult from '@/components/courtfilesearch/CourtFileSearchResult.vue';
+  import ActionButtons from '@/components/shared/Form/ActionButtons.vue';
   import { FilesService } from '@/services/FilesService';
   import { LocationService } from '@/services/LocationService';
   import { LookupService } from '@/services/LookupService';
   import { useCommonStore, useCourtFileSearchStore } from '@/stores';
   import { KeyValueInfo, LookupCode } from '@/types/common';
-  import ActionButtons from '@/components/shared/Form/ActionButtons.vue';
   import {
     CourtClassEnum,
     CourtFileSearchCriteria,
@@ -472,7 +472,9 @@
     selectedFiles.value = [];
     courtFileSearchStore.clearSelectedFiles();
   };
+
   const selectedDivision = ref('isCriminal');
+
   const showClassDropdown = computed(() => {
     return selectedDivision.value === 'isCriminal';
   });