@@ -91,23 +97,25 @@
{{$t('licensing.licenseNumSymbol')}}
{{licenseNumber}}
-
+
{{ $t('licensing.disciplineStatus') }}
{{disciplineContent}}
-
-
-
+
+
+
+
+
+ {{ $t('licensing.compactEligible') }}
-
-
-
+
+
+
+
+ {{ $t('licensing.notCompactEligible') }}
- {{ $t('licensing.notCompactEligible') }}
-
+
-
{{ $t('licensing.licensingListDescription')}}
+
{{ listDescriptionText }}
-
+
{{$t('licensing.registrationEmail')}}
{{registrationEmail}}
diff --git a/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.less b/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.less
index 32ec3e747..0cb979bc0 100644
--- a/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.less
+++ b/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.less
@@ -124,6 +124,69 @@
}
}
+ .license-section {
+ margin: @spacingMobile;
+ padding-top: @spacingMobile;
+ border-top: 1px solid @lightGrey;
+
+ @media @tabletWidth {
+ margin: @spacingMobile @spacingTablet;
+ padding-top: @spacingMobile;
+ }
+
+ @media @desktopWidth {
+ margin: @spacingMobile @spacingDesktop;
+ padding-top: @spacingMobile;
+ }
+
+ .license-card-list-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ @media @tabletWidth {
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ justify-content: flex-start;
+ width: 100%;
+ }
+
+ .license-chunk {
+ .license-expired-message {
+ margin-top: 1rem;
+ color: @midRed;
+ }
+ }
+ }
+
+ .home-state-section {
+ display: flex;
+ flex-direction: column;
+
+ .home-state-list {
+ display: flex;
+ flex-direction: column;
+
+ @media @tabletWidth {
+ flex-direction: row;
+ }
+ }
+
+ .homestate-error-text {
+ max-width: 20rem;
+ padding: 0 1rem;
+ color: @midRed;
+ text-overflow: wrap;
+
+ @media @tabletWidth {
+ max-width: 40rem;
+ }
+ }
+ }
+ }
+
.privilege-section {
margin: @spacingMobile;
padding-top: @spacingMobile;
diff --git a/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.ts b/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.ts
index 13c68cb64..ec5c6298d 100644
--- a/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.ts
+++ b/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.ts
@@ -7,16 +7,20 @@
import { Component, Vue } from 'vue-facing-decorator';
import LoadingSpinner from '@components/LoadingSpinner/LoadingSpinner.vue';
+import LicenseCard from '@/components/LicenseCard/LicenseCard.vue';
import PrivilegeCard from '@/components/PrivilegeCard/PrivilegeCard.vue';
import CollapseCaretButton from '@components/CollapseCaretButton/CollapseCaretButton.vue';
import ExpirationExplanationIcon from '@components/Icons/ExpirationExplanationIcon/ExpirationExplanationIcon.vue';
+import LicenseIcon from '@components/Icons/LicenseIcon/LicenseIcon.vue';
import { Licensee } from '@models/Licensee/Licensee.model';
-import { License } from '@models/License/License.model';
+import { License, LicenseStatus } from '@models/License/License.model';
@Component({
name: 'PublicLicensingDetail',
components: {
LoadingSpinner,
+ LicenseIcon,
+ LicenseCard,
PrivilegeCard,
CollapseCaretButton,
ExpirationExplanationIcon
@@ -26,6 +30,7 @@ export default class PublicLicensingDetail extends Vue {
//
// Data
//
+ isLicensesCollapsed = false;
isPrivsCollapsed = false;
//
@@ -48,6 +53,14 @@ export default class PublicLicensingDetail extends Vue {
return this.$store.state.user;
}
+ get isAppModeJcc(): boolean {
+ return this.$store.getters.isAppModeJcc;
+ }
+
+ get isAppModeCosmetology(): boolean {
+ return this.$store.getters.isAppModeCosmetology;
+ }
+
get compact(): string {
const defaultCompactType = this.userStore.currentCompact?.type;
@@ -85,14 +98,27 @@ export default class PublicLicensingDetail extends Vue {
return this.licenseStore?.isLoading || false;
}
+ get licenseeLicenses(): Array
{
+ return (this.licensee?.licenses || []).slice().sort(this.sortLicenses);
+ }
+
+ get activeLicenses(): Array {
+ return this.licenseeLicenses.filter((license) => (license.status === LicenseStatus.ACTIVE));
+ }
+
get licenseePrivileges(): Array {
- return this.licensee?.privileges || [];
+ return (this.licensee?.privileges || []).slice().sort(this.sortPrivileges);
}
get licenseeStates(): Array {
- return this.licenseePrivileges
+ const licenseStates = this.activeLicenses
+ .map((license) => license.issueState?.abbrev || '')
+ .filter((state) => !!state);
+ const privilegeStates = this.licenseePrivileges
.map((privilege) => privilege.issueState?.abbrev || '')
.filter((state) => !!state);
+
+ return licenseStates.concat(privilegeStates);
}
get homeState(): string {
@@ -112,7 +138,59 @@ export default class PublicLicensingDetail extends Vue {
});
}
+ toggleLicensesCollapsed(): void {
+ this.isLicensesCollapsed = !this.isLicensesCollapsed;
+ }
+
togglePrivsCollapsed(): void {
this.isPrivsCollapsed = !this.isPrivsCollapsed;
}
+
+ sortLicenses(license1: License, license2: License): number {
+ let sort = this.sortByIssueState(license1, license2);
+
+ if (sort === 0) {
+ sort = this.sortByLicenseType(license1, license2);
+ }
+
+ return sort;
+ }
+
+ sortPrivileges(privilege1: License, privilege2: License): number {
+ let sort = this.sortByLicenseType(privilege1, privilege2);
+
+ if (sort === 0) {
+ sort = this.sortByIssueState(privilege1, privilege2);
+ }
+
+ return sort;
+ }
+
+ sortByLicenseType(license1: License, license2: License): number {
+ const licenseType1 = license1.licenseTypeAbbreviation();
+ const licenseType2 = license2.licenseTypeAbbreviation();
+ let sort = 0;
+
+ if (licenseType1 < licenseType2) {
+ sort = -1;
+ } else if (licenseType1 > licenseType2) {
+ sort = 1;
+ }
+
+ return sort;
+ }
+
+ sortByIssueState(license1: License, license2: License): number {
+ const state1 = license1.issueState?.name().toLowerCase() || '';
+ const state2 = license2.issueState?.name().toLowerCase() || '';
+ let sort = 0;
+
+ if (state1 < state2) {
+ sort = -1;
+ } else if (state1 > state2) {
+ sort = 1;
+ }
+
+ return sort;
+ }
}
diff --git a/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.vue b/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.vue
index ed0db34a4..e40dabeec 100644
--- a/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.vue
+++ b/webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.vue
@@ -35,6 +35,31 @@