Frontend/cosmo search updates

webroot/.eslintrc.js

@@ -97,6 +97,7 @@ module.exports = {
         }],
         'vue/multi-word-component-names': OFF,
         'vue/no-multiple-template-root': OFF,
+        'vue/no-v-for-template-key': OFF,
         'prefer-regex-literals': OFF,
         'no-promise-executor-return': OFF,
     },

webroot/src/components/CompactSelector/CompactSelector.ts

@@ -5,7 +5,7 @@
 //  Created by InspiringApps on 10/2/2024.
 //
 
-import { AppModes, compacts as compactsConfig } from '@/app.config';
+import { compacts as compactsConfig } from '@/app.config';
 import {
     Component,
     mixins,
@@ -146,11 +146,6 @@ class CompactSelector extends mixins(MixinForm) {
         } else {
             // Refresh the compact type on the store
             await this.$store.dispatch('user/setCurrentCompact', CompactSerializer.fromServer({ type: selectedCompactType }));
-            if (selectedCompactType === CompactType.COSMETOLOGY) {
-                this.$store.dispatch('setAppMode', AppModes.COSMETOLOGY);
-            } else {
-                this.$store.dispatch('setAppMode', AppModes.JCC);
-            }
         }
     }
 

webroot/src/components/Forms/InputDate/InputDate.ts

@@ -109,10 +109,12 @@ class InputDate extends mixins(MixinInput) {
         const { formInput } = this;
 
         formInput.validate = () => {
+            const { localValue, dateRaw } = this;
             const { validation } = formInput;
 
+            // Date format validation
             if (validation && (validation as any).validate) {
-                const result = (validation as any).validate(this.localValue);
+                const result = (validation as any).validate(localValue);
 
                 if (result.error) {
                     formInput.isValid = false;
@@ -128,6 +130,15 @@ class InputDate extends mixins(MixinInput) {
                 formInput.errorMessage = '';
                 formInput.isValid = true;
             }
+
+            // Date existance validation
+            if (formInput.isValid && (localValue && !dateRaw)) {
+                formInput.isValid = false;
+
+                if (formInput.isTouched) {
+                    formInput.errorMessage = this.$t('inputErrors.invalidDate');
+                }
+            }
         };
     }
 

webroot/src/components/Forms/_mixins/form.mixin.ts

@@ -109,9 +109,13 @@ class MixinForm extends Vue {
                 'boolean.base': this.$t('inputErrors.required'),
                 'any.invalid': this.$t('inputErrors.required'),
             },
+            date: {
+                'date.invalid': this.$t('inputErrors.invalidDate'),
+            },
             dateWithFormat: (format: string) => ({
                 'any.required': this.$t('inputErrors.required'),
                 'string.empty': this.$t('inputErrors.required'),
+                'date.invalid': this.$t('inputErrors.invalidDate'),
                 'string.base': this.$t('inputErrors.invalidDateWithFormat', { format }),
                 'string.pattern.base': this.$t('inputErrors.invalidDateWithFormat', { format }),
             }),

webroot/src/components/Licensee/LicenseeList/LicenseeList.less

@@ -26,6 +26,7 @@
             align-content: center;
             align-items: center;
             justify-content: center;
+            order: 1;
             width: 100%;
             margin-top: 1.2rem;
             padding: 0.4rem 1rem;
@@ -34,7 +35,7 @@
             background-color: @darkBlue;
 
             @media @desktopWidth {
-                order: 1;
+                order: 0;
                 width: auto;
                 max-width: 75%;
                 margin-top: 0;

webroot/src/components/Licensee/LicenseeList/LicenseeList.ts

@@ -85,6 +85,14 @@ class LicenseeList extends Vue {
         return this.$store.state.license;
     }
 
+    get isAppModeJcc(): boolean {
+        return this.$store.getters.isAppModeJcc;
+    }
+
+    get isAppModeCosmetology(): boolean {
+        return this.$store.getters.isAppModeCosmetology;
+    }
+
     get licenseStoreRecordCount(): number {
         return this.licenseStore.model?.length || 0;
     }
@@ -103,6 +111,12 @@ class LicenseeList extends Vue {
         return `${firstName} ${lastName}`.trim();
     }
 
+    get searchDisplayDob(): string {
+        const { dob = '' } = this.searchParams;
+
+        return (dob) ? `${this.$t('common.dateOfBirthShort')}: ${moment(dob, serverDateFormat).format(displayDateFormat)}`.trim() : '';
+    }
+
     get searchDisplayHomeState(): string {
         const { homeState } = this.searchParams;
 
@@ -189,17 +203,25 @@ class LicenseeList extends Vue {
         return (npi) ? `${this.$t('licensing.npi')}: ${npi}`.trim() : '';
     }
 
+    get searchDisplayLicenseNumber(): string {
+        const { licenseNumber = '' } = this.searchParams;
+
+        return (licenseNumber) ? `${this.$t('licensing.licenseNumSymbol')}: ${licenseNumber}`.trim() : '';
+    }
+
     get searchDisplayAll(): string {
         const joined = [
             this.searchDisplayCompact,
             this.searchDisplayFullName,
+            this.searchDisplayDob,
             this.searchDisplayHomeState,
             this.searchDisplayPrivilegeState,
             this.searchDisplayPrivilegePurchaseDates,
             this.searchDisplayMilitaryStatus,
             this.searchDisplayInvestigationStatus,
             this.searchDisplayEncumberDates,
-            this.searchDisplayNpi
+            this.searchDisplayNpi,
+            this.searchDisplayLicenseNumber
         ].join(', ').trim();
 
         return joined.replace(/(^[,\s]+)|([,\s]+$)/g, '').replace(/(,\s)\1+/g, ', '); // Replace repeated commas with single comma
@@ -218,7 +240,14 @@ class LicenseeList extends Vue {
             firstName: this.$t('common.firstName'),
             lastName: this.$t('common.lastName'),
             homeJurisdictionDisplay: () => this.$t('licensing.homeState'),
-            privilegeStatesDisplay: () => this.$t('licensing.privileges'),
+            ...(this.isAppModeCosmetology
+                ? {
+                    licenseNumber: this.$t('licensing.stateLicenseNumber'),
+                }
+                : {
+                    privilegeStatesDisplay: () => this.$t('licensing.privileges'),
+                }
+            ),
         };
 
         return record;
@@ -343,6 +372,9 @@ class LicenseeList extends Vue {
         if (searchParams?.lastName) {
             requestConfig.licenseeLastName = searchParams.lastName;
         }
+        if (searchParams?.dob) {
+            requestConfig.dob = searchParams.dob;
+        }
         if (searchParams?.homeState) {
             requestConfig.homeState = searchParams.homeState.toLowerCase();
         }
@@ -370,6 +402,9 @@ class LicenseeList extends Vue {
         if (searchParams?.npi) {
             requestConfig.npi = searchParams.npi;
         }
+        if (searchParams?.licenseNumber) {
+            requestConfig.licenseNumber = searchParams.licenseNumber;
+        }
 
         // Paging params
         if (!isDirectExport) {

webroot/src/components/Licensee/LicenseeList/LicenseeList.vue

@@ -21,22 +21,23 @@
                 <div class="list-actions-container">
                     <h1 class="list-title no-margin">{{ $t('licensing.licensingListTitle') }}</h1>
                     <div class="search-toggle-container">
-                        <button
-                            class="search-toggle"
-                            @click="toggleSearch()"
-                            tabindex="0"
-                        >
-                            {{ $t('licensing.searchLabel') }}
-                        </button>
                         <div v-if="searchDisplayAll" class="search-tag">
                             <span class="title">{{ $t('common.viewing') }}:</span>
                             <span class="search-terms">{{ searchDisplayAll }}</span>
                             <CloseX
                                 class="search-terms-reset"
                                 @click="resetSearch()"
+                                @keyup.enter="resetSearch()"
                                 tabindex="0"
                             />
                         </div>
+                        <button
+                            class="search-toggle"
+                            @click="toggleSearch()"
+                            tabindex="0"
+                        >
+                            {{ $t('licensing.searchLabel') }}
+                        </button>
                     </div>
                 </div>
                 <div class="list-description">{{ $t('licensing.licensingListDescription')}}</div>

webroot/src/components/Licensee/LicenseeListLegacy/LicenseeListLegacy.less

@@ -26,6 +26,7 @@
             align-content: center;
             align-items: center;
             justify-content: center;
+            order: 1;
             width: 100%;
             margin-top: 1.2rem;
             padding: 0.4rem 1rem;
@@ -34,7 +35,7 @@
             background-color: @darkBlue;
 
             @media @desktopWidth {
-                order: 1;
+                order: 0;
                 width: auto;
                 margin-top: 0;
                 margin-right: 2.4rem;

webroot/src/components/Licensee/LicenseeListLegacy/LicenseeListLegacy.ts

@@ -85,6 +85,14 @@ class LicenseeList extends Vue {
         return this.$store.state.license;
     }
 
+    get isAppModeJcc(): boolean {
+        return this.$store.getters.isAppModeJcc;
+    }
+
+    get isAppModeCosmetology(): boolean {
+        return this.$store.getters.isAppModeCosmetology;
+    }
+
     get licenseStoreRecordCount(): number {
         return this.licenseStore.model?.length || 0;
     }
@@ -97,58 +105,33 @@ class LicenseeList extends Vue {
         return (this.isPublicSearch) ? this.userStore.currentCompact?.abbrev() || '' : '';
     }
 
-    get searchDisplayFirstName(): string {
-        const delimiter = (this.searchDisplayCompact) ? ', ' : '';
-        let displayFirstName = '';
+    get searchDisplayFullName(): string {
+        const { firstName = '', lastName = '' } = this.searchParams;
 
-        if (this.searchParams.firstName) {
-            displayFirstName = `${delimiter}${this.searchParams.firstName}` || '';
-        }
-
-        return displayFirstName;
-    }
-
-    get searchDisplayLastName(): string {
-        const delimiter = (this.searchDisplayCompact && !this.searchDisplayFirstName) ? ', ' : '';
-        const subDelimiter = (this.searchDisplayFirstName) ? ' ' : '';
-        let displayLastName = '';
-
-        if (this.searchParams.lastName) {
-            displayLastName = `${delimiter}${subDelimiter}${this.searchParams.lastName}` || '';
-        }
-
-        return displayLastName;
+        return `${firstName} ${lastName}`.trim();
     }
 
     get searchDisplayState(): string {
         const { state } = this.searchParams;
-        const { searchDisplayCompact, searchDisplayFirstName, searchDisplayLastName } = this;
-        const delimiter = (searchDisplayCompact || searchDisplayFirstName || searchDisplayLastName) ? ', ' : '';
-        let displayState = '';
 
-        if (state) {
-            const stateModel = new State({ abbrev: state });
+        return (state) ? `${new State({ abbrev: state }).name()}` : '';
+    }
 
-            displayState = `${delimiter}${stateModel.name()}`;
-        }
+    get searchDisplayLicenseNumber(): string {
+        const { licenseNumber = '' } = this.searchParams;
 
-        return displayState;
+        return (licenseNumber) ? `${this.$t('licensing.licenseNumSymbol')}: ${licenseNumber}`.trim() : '';
     }
 
     get searchDisplayAll(): string {
-        const {
-            searchDisplayCompact,
-            searchDisplayFirstName,
-            searchDisplayLastName,
-            searchDisplayState
-        } = this;
-
         return [
-            searchDisplayCompact,
-            searchDisplayFirstName,
-            searchDisplayLastName,
-            searchDisplayState
-        ].join('').trim();
+            this.searchDisplayCompact,
+            this.searchDisplayFullName,
+            this.searchDisplayState,
+            this.searchDisplayLicenseNumber
+        ]
+            .filter((displayPart) => !!displayPart?.trim())
+            .join(', ').trim();
     }
 
     get sortOptions(): Array<any> {
@@ -168,9 +151,15 @@ class LicenseeList extends Vue {
         const record = {
             firstName: this.$t('common.firstName'),
             lastName: this.$t('common.lastName'),
-            ssnMaskedPartial: () => this.$t('licensing.ssn'),
             homeJurisdictionDisplay: () => this.$t('licensing.homeState'),
-            privilegeStatesDisplay: () => this.$t('licensing.privileges'),
+            ...(this.isAppModeCosmetology
+                ? {
+                    licenseNumber: this.$t('licensing.stateLicenseNumber'),
+                }
+                : {
+                    privilegeStatesDisplay: () => this.$t('licensing.privileges'),
+                }
+            ),
         };
 
         return record;
@@ -307,6 +296,9 @@ class LicenseeList extends Vue {
         if (searchParams?.state) {
             requestConfig.jurisdiction = searchParams.state.toLowerCase();
         }
+        if (this.isAppModeCosmetology && searchParams?.licenseNumber) {
+            requestConfig.licenseNumber = searchParams.licenseNumber;
+        }
 
         // Make fetch request
         await this.$store.dispatch('license/getLicenseesRequest', {

webroot/src/components/Licensee/LicenseeListLegacy/LicenseeListLegacy.vue

@@ -20,22 +20,23 @@
                 <div class="list-actions-container">
                     <h1 class="list-title no-margin">{{ $t('licensing.licensingListTitle') }}</h1>
                     <div class="search-toggle-container">
-                        <button
-                            class="search-toggle"
-                            @click="toggleSearch()"
-                            tabindex="0"
-                        >
-                            {{ $t('licensing.searchLabel') }}
-                        </button>
                         <div v-if="searchDisplayAll" class="search-tag">
                             <span class="title">{{ $t('common.viewing') }}:</span>
                             <span class="search-terms">{{ searchDisplayAll }}</span>
                             <CloseX
                                 class="search-terms-reset"
                                 @click="resetSearch()"
+                                @keyup.enter="resetSearch()"
                                 tabindex="0"
                             />
                         </div>
+                        <button
+                            class="search-toggle"
+                            @click="toggleSearch()"
+                            tabindex="0"
+                        >
+                            {{ $t('licensing.searchLabel') }}
+                        </button>
                     </div>
                 </div>
                 <div class="list-description">{{ $t('licensing.licensingListDescription')}}</div>

webroot/src/components/Licensee/LicenseeRow/LicenseeRow.ts

@@ -42,6 +42,14 @@ class LicenseeRow extends Vue {
         return this.$store.state.sorting;
     }
 
+    get isAppModeJcc(): boolean {
+        return this.$store.getters.isAppModeJcc;
+    }
+
+    get isAppModeCosmetology(): boolean {
+        return this.$store.getters.isAppModeCosmetology;
+    }
+
     get sortingStoreOption(): any {
         return this.sortingStore.sortingMap[this.listId]?.option;
     }