Frontend/social work discipline updates

webroot/src/components/LicenseCard/LicenseCard.ts

@@ -279,6 +279,10 @@ class LicenseCard extends mixins(MixinForm) {
         return content;
     }
 
+    get shouldShowDiscipline(): boolean {
+        return !this.isPublicSearch || this.isAppModeSocialWork;
+    }
+
     get adverseActions(): Array<AdverseAction> {
         return this.license?.adverseActions || [];
     }

webroot/src/components/LicenseCard/LicenseCard.vue

@@ -110,7 +110,7 @@
                 <div class="info-item-title">{{$t('licensing.licenseNumSymbol')}}</div>
                 <div class="info-item rr-block">{{licenseNumber}}</div>
             </div>
-            <div v-if="!isPublicSearch" class="info-item-container">
+            <div v-if="shouldShowDiscipline" class="info-item-container">
                 <div class="info-item-title">{{ $t('licensing.disciplineStatus') }}</div>
                 <div class="info-item">{{disciplineContent}}</div>
             </div>

webroot/src/components/PrivilegeCard/PrivilegeCard.ts

@@ -230,6 +230,12 @@ class PrivilegeCard extends mixins(MixinForm) {
         return content;
     }
 
+    get shouldShowDiscipline(): boolean {
+        return this.isAppGroupModePrivilegePurchase // JCC compacts public & staff
+            || this.isAppModeSocialWork             // Social Work compact public & staff
+            || this.isCurrentUserPrivilegeAdmin;    // Any compact if staff user is admin of that state
+    }
+
     get adverseActions(): Array<AdverseAction> {
         return this.privilege?.adverseActions || [];
     }

webroot/src/components/PrivilegeCard/PrivilegeCard.vue

@@ -105,7 +105,7 @@
                 <div class="info-item rr-block">{{privilegeId}}</div>
             </div>
             <div
-                v-if="isAppGroupModePrivilegePurchase || isCurrentUserPrivilegeAdmin"
+                v-if="shouldShowDiscipline"
                 class="info-item-container discipline-item"
             >
                 <div class="info-item-title">{{ $t('licensing.disciplineStatus') }}</div>

webroot/src/locales/en.json

@@ -673,6 +673,7 @@
         "disciplineTitle": "Disciplinary information",
         "disciplineStatus": "Discipline status",
         "noDiscipline": "No discipline",
+        "disciplineDisclaimer": "For further information regarding disciplinary action, please visit the website of the relevant licensing board in the state where the license or privilege is held.",
         "twoHomeStateErrorMessage": "Two states have you listed as a resident. Please update your information with those states to reflect your current residency status.",
         "jurisprudenceExplanationText": "I attest I have successfully completed a jurisprudence exam for this state, if required",
         "scopeAttestTitle": "Scope of practice attestation",

webroot/src/locales/es.json

@@ -660,6 +660,7 @@
         "scopeAttestTitle": "Alcance de la certificación de práctica",
         "scopeAttestLabel": "Haga clic aquí para leer y afirmar el alcance de la certificación de práctica.",
         "noDiscipline": "No disciplina",
+        "disciplineDisclaimer": "Para obtener más información sobre las medidas disciplinarias, visite el sitio web de la junta de licencias correspondiente en el estado donde se posee la licencia o privilegio.",
         "houseIcon": "Icono de la casa",
         "twoHomeStateErrorMessage": "Dos estados lo tienen incluido como residente. Actualice su información con esos estados para reflejar su estado de residencia actual.",
         "state": "Estado",

webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.less

@@ -31,6 +31,16 @@
                 width: 3.2rem;
                 height: 2.8rem;
             }
+
+            .alert-icon {
+                width: 3.2rem;
+                height: 2.8rem;
+                stroke: @fontColor;
+
+                &:deep(.custom-fill) {
+                    fill: @fontColor;
+                }
+            }
         }
 
         :deep(.collapse-caret-button) {
@@ -42,6 +52,12 @@
         }
     }
 
+    .title-description {
+        max-width: 56rem;
+        margin-left: 4rem;
+        color: darken(@lightTextGrey, 5%);
+    }
+
     .licensee-header {
         display: flex;
         flex-direction: column;
@@ -213,6 +229,79 @@
         }
     }
 
+    .discipline-section {
+        margin: @spacingMobile;
+        padding-top: @spacingMobile;
+        padding-bottom: 4rem;
+        border-top: 1px solid @lightGrey;
+
+        @media @tabletWidth {
+            margin: @spacingMobile @spacingTablet;
+            padding-top: @spacingMobile;
+        }
+
+        @media @desktopWidth {
+            margin: @spacingMobile @spacingDesktop;
+            padding-top: @spacingMobile;
+        }
+
+        .discipline-list-container {
+            display: flex;
+            width: 100%;
+        }
+
+        .discipline-list {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+
+            .discipline-row {
+                display: flex;
+                flex-direction: column;
+                padding: 1.6rem 0;
+
+                &:not(:first-child) {
+                    border-top: 1px solid @lightGrey;
+                }
+
+                @media @tabletWidth {
+                    flex-direction: row;
+                }
+
+                &.header {
+                    font-weight: @fontWeightBold;
+                }
+            }
+
+            .discipline-cell {
+                display: flex;
+
+                @media @tabletWidth {
+                    align-items: center;
+                }
+
+                &.state {
+                    flex-basis: 18%;
+                }
+
+                &.start-date {
+                    flex-basis: 18%;
+                }
+
+                &.end-date {
+                    flex-basis: 18%;
+                }
+
+                .cell-title {
+                    flex-shrink: 0;
+                    width: 14.4rem;
+                    padding-right: 0.4rem;
+                    font-weight: @fontWeightBold;
+                }
+            }
+        }
+    }
+
     .no-touch-item {
         margin: 1rem;
     }

webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.ts

@@ -12,14 +12,17 @@ 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 AlertCircleIcon from '@components/Icons/AlertCircle/AlertCircle.vue';
 import { Licensee } from '@models/Licensee/Licensee.model';
 import { License, LicenseStatus } from '@models/License/License.model';
+import { AdverseAction } from '@models/AdverseAction/AdverseAction.model';
 
 @Component({
     name: 'PublicLicensingDetail',
     components: {
         LoadingSpinner,
         LicenseIcon,
+        AlertCircleIcon,
         LicenseCard,
         PrivilegeCard,
         CollapseCaretButton,
@@ -32,6 +35,7 @@ export default class PublicLicensingDetail extends Vue {
     //
     isLicensesCollapsed = false;
     isPrivsCollapsed = false;
+    isDisciplineCollapsed = false;
 
     //
     // Lifecycle
@@ -53,6 +57,10 @@ export default class PublicLicensingDetail extends Vue {
         return this.$store.state.user;
     }
 
+    get isAppModeSocialWork(): boolean {
+        return this.$store.getters.isAppModeSocialWork;
+    }
+
     get isAppGroupModeMultiState(): boolean {
         return this.$store.getters.isAppGroupModeMultiState;
     }
@@ -121,6 +129,16 @@ export default class PublicLicensingDetail extends Vue {
         return this.licensee?.homeJurisdiction?.name() || '';
     }
 
+    get licenseeDiscipline(): Array<AdverseAction> {
+        return (this.licensee?.adverseActions || []).slice().sort(this.sortDiscipline);
+    }
+
+    get disciplineDisclaimer(): string {
+        const { licenseeDiscipline, isAppModeSocialWork } = this;
+
+        return (licenseeDiscipline.length && isAppModeSocialWork) ? this.$t('licensing.disciplineDisclaimer') : '';
+    }
+
     //
     // Methods
     //
@@ -142,6 +160,10 @@ export default class PublicLicensingDetail extends Vue {
         this.isPrivsCollapsed = !this.isPrivsCollapsed;
     }
 
+    toggleDisciplineCollapsed(): void {
+        this.isDisciplineCollapsed = !this.isDisciplineCollapsed;
+    }
+
     sortLicenses(license1: License, license2: License): number {
         let sort = this.sortByIssueState(license1, license2);
 
@@ -189,4 +211,42 @@ export default class PublicLicensingDetail extends Vue {
 
         return sort;
     }
+
+    sortDiscipline(action1: AdverseAction, action2: AdverseAction): number {
+        let sort = this.sortByDisciplineStart(action1, action2);
+
+        if (sort === 0) {
+            sort = this.sortByDisciplineState(action1, action2);
+        }
+
+        return sort;
+    }
+
+    sortByDisciplineStart(action1: AdverseAction, action2: AdverseAction): number {
+        const startDate1 = action1.startDate || '';
+        const startDate2 = action2.startDate || '';
+        let sort = 0;
+
+        if (startDate1 < startDate2) {
+            sort = -1;
+        } else if (startDate1 > startDate2) {
+            sort = 1;
+        }
+
+        return sort;
+    }
+
+    sortByDisciplineState(action1: AdverseAction, action2: AdverseAction): number {
+        const state1 = action1.state?.name().toLowerCase() || '';
+        const state2 = action2.state?.name().toLowerCase() || '';
+        let sort = 0;
+
+        if (state1 < state2) {
+            sort = -1;
+        } else if (state1 > state2) {
+            sort = 1;
+        }
+
+        return sort;
+    }
 }

webroot/src/pages/PublicLicensingDetail/PublicLicensingDetail.vue

@@ -86,6 +86,61 @@
                     />
                 </div>
             </div>
+            <div v-if="isAppModeSocialWork" class="discipline-section">
+                <div class="title-row">
+                    <div class="title-info">
+                        <div class="discipline-logo-container">
+                            <AlertCircleIcon class="alert-icon" />
+                        </div>
+                        <div id="discipline-title" class="title-text">{{ $t('licensing.disciplineTitle') }}</div>
+                    </div>
+                    <CollapseCaretButton @toggleCollapse="toggleDisciplineCollapsed" />
+                </div>
+                <div v-if="disciplineDisclaimer" class="title-description">{{ disciplineDisclaimer }}</div>
+                <div v-if="!isDisciplineCollapsed" class="discipline-list-container">
+                    <div v-if="!licenseeDiscipline.length" class="no-discipline">
+                        {{ $t('licensing.noDiscipline') }}
+                    </div>
+                    <div v-else class="discipline-list" role="table" aria-labelledby="discipline-title">
+                        <div v-if="$matches.tablet.min" class="discipline-row header" role="row">
+                            <div class="discipline-cell state" role="columnheader">
+                                {{ $t('common.state') }}
+                            </div>
+                            <div class="discipline-cell start-date" role="columnheader">
+                                {{ $t('common.startDate') }}
+                            </div>
+                            <div class="discipline-cell end-date" role="columnheader">
+                                {{ $t('common.endDate') }}
+                            </div>
+                        </div>
+                        <div
+                            v-for="(discipline, index) in licenseeDiscipline"
+                            :key="index"
+                            class="discipline-row"
+                            role="row"
+                        >
+                            <div class="discipline-cell state" role="cell">
+                                <span v-if="$matches.phone.only" class="cell-title">
+                                    {{ $t('common.state') }}:
+                                </span>
+                                {{ discipline.state.name() }}
+                            </div>
+                            <div class="discipline-cell start-date" role="cell">
+                                <span v-if="$matches.phone.only" class="cell-title">
+                                    {{ $t('common.startDate') }}:
+                                </span>
+                                {{ discipline.startDateDisplay() }}
+                            </div>
+                            <div class="discipline-cell end-date" role="cell">
+                                <span v-if="$matches.phone.only" class="cell-title">
+                                    {{ $t('common.endDate') }}:
+                                </span>
+                                {{ discipline.endDateDisplay() }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>