Frontend/admin search update

.github/workflows/check-webroot.yml

@@ -33,6 +33,7 @@ jobs:
       VUE_APP_ROBOTS_META: noindex,nofollow
       VUE_APP_API_STATE_ROOT: https://api.test.jcc.iaapi.io
       VUE_APP_API_LICENSE_ROOT: https://api.test.jcc.iaapi.io
+      VUE_APP_API_SEARCH_ROOT: https://search.test.jcc.iaapi.io
       VUE_APP_COGNITO_REGION: us-east-1
       VUE_APP_COGNITO_AUTH_DOMAIN_STAFF: https://ia-cc-staff-test.auth.us-east-1.amazoncognito.com
       VUE_APP_COGNITO_CLIENT_ID_STAFF: ${{ secrets.DEV_WEBROOT_COGNITO_CLIENT_ID_STAFF }}
@@ -88,6 +89,7 @@ jobs:
           VUE_APP_ROBOTS_META: ${{ env.VUE_APP_ROBOTS_META }}
           VUE_APP_API_STATE_ROOT: ${{ env.VUE_APP_API_STATE_ROOT }}
           VUE_APP_API_LICENSE_ROOT: ${{ env.VUE_APP_API_LICENSE_ROOT }}
+          VUE_APP_API_SEARCH_ROOT: ${{ env.VUE_APP_API_SEARCH_ROOT }}
           VUE_APP_COGNITO_REGION: ${{ env.VUE_APP_COGNITO_REGION }}
           VUE_APP_COGNITO_AUTH_DOMAIN_STAFF: ${{ env.VUE_APP_COGNITO_AUTH_DOMAIN_STAFF }}
           VUE_APP_COGNITO_CLIENT_ID_STAFF: ${{ env.VUE_APP_COGNITO_CLIENT_ID_STAFF }}

webroot/.env.example

@@ -5,6 +5,7 @@ VUE_APP_DOMAIN=http://localhost:3018
 VUE_APP_ROBOTS_META=noindex,nofollow
 VUE_APP_API_STATE_ROOT=https://api.test.jcc.iaapi.io
 VUE_APP_API_LICENSE_ROOT=https://api.test.jcc.iaapi.io
+VUE_APP_API_SEARCH_ROOT=https://search.test.jcc.iaapi.io
 VUE_APP_API_USER_ROOT=https://api.test.jcc.iaapi.io
 VUE_APP_COGNITO_REGION=us-east-1
 VUE_APP_COGNITO_AUTH_DOMAIN_STAFF=https://staff-auth.test.jcc.iaapi.io
@@ -13,6 +14,7 @@ VUE_APP_COGNITO_AUTH_DOMAIN_LICENSEE=https://licensee-auth.test.jcc.iaapi.io
 VUE_APP_COGNITO_CLIENT_ID_LICENSEE=topd4vhftng5cfm3ccgkb6ejd
 VUE_APP_RECAPTCHA_KEY=6Le-3bgqAAAAAILDVUKkRnAF9SSzb8o9uv5lY7Ih
 VUE_APP_STATSIG_KEY=TODO
+VUE_APP_STATSIG_DISABLED=false
 VUE_APP_MOCK_API=false
 VUE_APP_MOCK_API_PAYMENT_LOGIN_ID=TODO
 VUE_APP_MOCK_API_PAYMENT_CLIENT_KEY=TODO

webroot/README.md

@@ -76,6 +76,14 @@
             - Prod: `https://api.compactconnect.org`
         - _Local_ :arrow_heading_down:
             - `https://api.test.jcc.iaapi.io`
+    - **`VUE_APP_API_SEARCH_ROOT`**
+        - _Server_ :arrow_heading_up:
+            - IA Test: `https://search.test.jcc.iaapi.io`
+            - CSG Test: `https://search.test.compactconnect.org`
+            - Beta: `https://search.beta.compactconnect.org`
+            - Prod: `https://search.compactconnect.org`
+        - _Local_ :arrow_heading_down:
+            - `https://api.test.jcc.iaapi.io`
     - **`VUE_APP_COGNITO_REGION`**
         - _Server_ :arrow_heading_up:
             - IA Test: `us-east-1`
@@ -132,6 +140,14 @@
             - Prod: TODO
         - _Local_ :arrow_heading_down:
             - TODO
+    - **`VUE_APP_STATSIG_DISABLED`**
+        - _Server_ :arrow_heading_up:
+            - IA Test: `false`
+            - CSG Test: `false`
+            - Beta: `false`
+            - Prod: `false`
+        - _Local_ :arrow_heading_down:
+            - `true` or `false` as needed
     - **`VUE_APP_MOCK_API`** :arrow_heading_down:
         - Only used for local development
         - `true` if mock API should be used

webroot/src/components/Forms/InputSubmit/InputSubmit.ts

@@ -20,6 +20,8 @@ class InputSubmit extends mixins(MixinInput) {
     @Prop({ default: '' }) private label?: string;
     @Prop({ default: true }) private isEnabled?: boolean;
     @Prop({ default: false }) private isWarning?: boolean;
+    @Prop({ default: false }) private isTransparent?: boolean;
+    @Prop({ default: false }) private isTextLike?: boolean;
 }
 
 export default toNative(InputSubmit);

webroot/src/components/Forms/InputSubmit/InputSubmit.vue

@@ -36,6 +36,8 @@
             class="input-submit"
             :class="{
                 'warning': isWarning,
+                'transparent': isTransparent,
+                'text-like': isTextLike,
             }"
             :aria-describedby="(formInput.successMessage) ? `${formInput.id}-success` : `${formInput.id}-error`"
             :aria-errormessage="`${formInput.id}-error`"

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

@@ -2,7 +2,7 @@
 //  LicenseeList.less
 //  CompactConnect
 //
-//  Created by InspiringApps on 7/1/2024.
+//  Created by InspiringApps on 12/1/2025.
 //
 
 .licensee-list-container {
@@ -36,10 +36,19 @@
             @media @desktopWidth {
                 order: 1;
                 width: auto;
+                max-width: 75%;
                 margin-top: 0;
                 margin-right: 2.4rem;
             }
 
+            @media @largeDesktopWidth {
+                max-width: 85%;
+            }
+
+            @media @extraLargeDesktopWidth {
+                max-width: 95%;
+            }
+
             .title {
                 padding: 0 0.4rem;
             }
@@ -50,6 +59,7 @@
 
             .search-terms-reset {
                 width: 2rem;
+                min-width: 2rem;
                 margin-left: auto;
                 padding: 0.4rem 0.2rem;
                 cursor: pointer;

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

@@ -2,25 +2,12 @@
 //  LicenseeList.spec.ts
 //  CompactConnect
 //
-//  Created by InspiringApps on 7/1/2024.
+//  Created by InspiringApps on 12/1/2025.
 //
 
-import chaiMatchPattern from 'chai-match-pattern';
-import chai from 'chai';
-import { mountShallow, mountFull } from '@tests/helpers/setup';
+import { expect } from 'chai';
+import { mountShallow } from '@tests/helpers/setup';
 import LicenseeList from '@components/Licensee/LicenseeList/LicenseeList.vue';
-import { Compact, CompactType } from '@models/Compact/Compact.model';
-import sinon from 'sinon';
-
-chai.use(chaiMatchPattern);
-
-const { expect } = chai;
-const lastKey = 'lastKey';
-const prevLastKey = 'prevLastKey';
-const populateComponentStorePagingKeys = (component) => {
-    component.$store.dispatch('license/setStoreLicenseeLastKey', lastKey);
-    component.$store.dispatch('license/setStoreLicenseePrevLastKey', prevLastKey);
-};
 
 describe('LicenseeList component', async () => {
     it('should mount the component', async () => {
@@ -29,113 +16,4 @@ describe('LicenseeList component', async () => {
         expect(wrapper.exists()).to.equal(true);
         expect(wrapper.findComponent(LicenseeList).exists()).to.equal(true);
     });
-    it('should successfully re-fetch data with previous paging key if going back a page', async () => {
-        const wrapper = await mountShallow(LicenseeList);
-        const component = wrapper.vm;
-        const fetchListData = sinon.spy();
-
-        component.fetchListData = fetchListData;
-        component.isInitialFetchCompleted = true;
-        populateComponentStorePagingKeys(component);
-
-        await component.paginationChange({ firstIndex: 0, prevNext: -1 });
-
-        expect(component.prevKey).to.equal(prevLastKey);
-        expect(component.nextKey).to.equal('');
-        expect(fetchListData.calledOnce).to.equal(true);
-    });
-    it('should successfully re-fetch data with next paging key if going forward a page', async () => {
-        const wrapper = await mountShallow(LicenseeList);
-        const component = wrapper.vm;
-        const fetchListData = sinon.spy();
-
-        component.fetchListData = fetchListData;
-        component.isInitialFetchCompleted = true;
-        populateComponentStorePagingKeys(component);
-
-        await component.paginationChange({ firstIndex: 0, prevNext: 1 });
-
-        expect(component.prevKey).to.equal('');
-        expect(component.nextKey).to.equal(lastKey);
-        expect(fetchListData.calledOnce).to.equal(true);
-    });
-    it('should successfully re-fetch data when returning to first page', async () => {
-        const wrapper = await mountShallow(LicenseeList);
-        const component = wrapper.vm;
-        const fetchListData = sinon.spy();
-
-        component.fetchListData = fetchListData;
-        component.isInitialFetchCompleted = true;
-        populateComponentStorePagingKeys(component);
-
-        await component.paginationChange({ firstIndex: 0, prevNext: undefined });
-
-        expect(component.prevKey).to.equal('');
-        expect(component.nextKey).to.equal('');
-        expect(fetchListData.calledOnce).to.equal(true);
-    });
-    it('should successfully not re-fetch data if page change before initial fetch completes', async () => {
-        const wrapper = await mountShallow(LicenseeList);
-        const component = wrapper.vm;
-        const fetchListData = sinon.spy();
-
-        component.fetchListData = fetchListData;
-        component.isInitialFetchCompleted = false;
-        populateComponentStorePagingKeys(component);
-
-        await component.paginationChange({ firstIndex: 0, prevNext: 1 });
-
-        expect(component.prevKey).to.equal('');
-        expect(component.nextKey).to.equal(lastKey);
-        expect(fetchListData.notCalled).to.equal(true);
-    });
-    it('should successfully not re-fetch data if page change from search results', async () => {
-        const wrapper = await mountShallow(LicenseeList);
-        const component = wrapper.vm;
-        const fetchListData = sinon.spy();
-
-        component.fetchListData = fetchListData;
-        component.isInitialFetchCompleted = true;
-        populateComponentStorePagingKeys(component);
-
-        await component.paginationChange({ firstIndex: 0, prevNext: 0 });
-
-        expect(component.prevKey).to.equal('');
-        expect(component.nextKey).to.equal('');
-        expect(fetchListData.notCalled).to.equal(true);
-    });
-    it('should successfully fetch data with expected search params (no params)', async () => {
-        const wrapper = await mountFull(LicenseeList);
-        const component = wrapper.vm;
-        const requestConfig = await component.fetchListData();
-
-        expect(requestConfig).to.matchPattern({
-            jurisdiction: undefined,
-            licenseeFirstName: undefined,
-            licenseeLastName: undefined,
-            '...': '',
-        });
-    });
-    it('should successfully fetch data with expected search params (all params)', async () => {
-        const wrapper = await mountShallow(LicenseeList);
-        const component = wrapper.vm;
-        const testParams = {
-            firstName: 'firstName',
-            lastName: 'lastName',
-            state: 'state',
-        };
-
-        await component.$store.dispatch('user/setCurrentCompact', new Compact({ type: CompactType.ASLP }));
-        await component.$store.dispatch('license/setStoreSearch', testParams);
-
-        const requestConfig = await component.fetchListData();
-
-        expect(requestConfig).to.matchPattern({
-            compact: CompactType.ASLP,
-            jurisdiction: testParams.state,
-            licenseeFirstName: testParams.firstName,
-            licenseeLastName: testParams.lastName,
-            '...': '',
-        });
-    });
 });