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/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/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/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;
     }

webroot/src/components/Licensee/LicenseeRow/LicenseeRow.vue

@@ -63,6 +63,7 @@
             }"></span>
         </div>
         <div
+            v-if="isAppModeJcc"
             class="cell practicing-locations"
             :class="{ 'is-sort-enabled': isSortOptionEnabled('practicingLocations') }"
             @click="isSortOptionEnabled('practicingLocations') && handleSortSelect('practicingLocations')"
@@ -78,6 +79,24 @@
                 'desc': isSortOptionDescending('practicingLocations'),
             }"></span>
         </div>
+        <div
+            v-if="isAppModeCosmetology"
+            class="cell license-number"
+            :class="{ 'is-sort-enabled': isSortOptionEnabled('licenseNumber') }"
+            @click="isSortOptionEnabled('licenseNumber') && handleSortSelect('licenseNumber')"
+            @keyup.enter="isSortOptionEnabled('licenseNumber') && handleSortSelect('licenseNumber')"
+            :tabindex="(isHeaderRow && isSortOptionEnabled('licenseNumber')) ? 0 : -1"
+            :role="(isHeaderRow) ? 'columnheader' : 'cell'"
+        >
+            <span v-if="$matches.phone.only" class="cell-title">{{ $t('licensing.stateLicenseNumber') }}:</span>
+            <template v-if="item.licenseNumber">{{ item.licenseNumber }}</template>
+            <template v-else-if="item.bestLicense">{{ item.bestLicense().licenseNumber }}</template>
+            <span v-if="isSortOptionEnabled('licenseNumber')" class="sort-icon" :class="{
+                'is-selected': isSortOptionSelected('licenseNumber'),
+                'asc': isSortOptionAscending('licenseNumber'),
+                'desc': isSortOptionDescending('licenseNumber'),
+            }"></span>
+        </div>
     </div>
 </template>