Skip to content

Commit

Permalink
feat(fe:FSADT1-1682): CLIENT_VIEWER Client Location/Contact accordion…
Browse files Browse the repository at this point in the history
… title style (#1376)

* fix style for accordion's title

* adjust contact data

* test: fix description
  • Loading branch information
fterra-encora authored Jan 7, 2025
1 parent 06c076c commit 66601ed
Show file tree
Hide file tree
Showing 8 changed files with 64 additions and 65 deletions.
28 changes: 14 additions & 14 deletions frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -231,16 +231,16 @@ describe("Client Details Page", () => {
});
});

it("displays the contact name on the accordion's title", () => {
cy.get("#contact-00 [slot='title']").contains("Cheryl Bibby");
cy.get("#contact-01 [slot='title']").contains("Edward Burns");
cy.get("#contact-02 [slot='title']").contains("Christoffer Stewart");
it("displays the contacts names on the accordions' titles sorted by contact name", () => {
cy.get("#contact-0 [slot='title']").contains("Cheryl Bibby");
cy.get("#contact-1 [slot='title']").contains("Christoffer Stewart");
cy.get("#contact-2 [slot='title']").contains("Edward Burns");
});

it("displays the associated locations on the accordion's title while it's collapsed", () => {
cy.get("#contact-00-title-locations").should("be.visible");
cy.get("#contact-01-title-locations").should("be.visible");
cy.get("#contact-02-title-locations").should("be.visible");
cy.get("#contact-0-title-locations").should("be.visible");
cy.get("#contact-1-title-locations").should("be.visible");
cy.get("#contact-2-title-locations").should("be.visible");
});
});

Expand All @@ -259,14 +259,14 @@ describe("Client Details Page", () => {

it("hides the associated locations on the accordion's title when it's expanded", () => {
// Clicks to expand the accordion
cy.get("#contact-00 [slot='title']").click();
cy.get("#contact-00-title-locations").should("not.be.visible");
cy.get("#contact-0 [slot='title']").click();
cy.get("#contact-0-title-locations").should("not.be.visible");
});

it("keeps accordions' states while tabs are switched", () => {
// Expand first and third contacts, leave second one collapsed
cy.get("#contact-00 [slot='title']").click();
cy.get("#contact-02 [slot='title']").click();
cy.get("#contact-0 [slot='title']").click();
cy.get("#contact-2 [slot='title']").click();
// Switch to another tab (Locations)
cy.get("#tab-locations").click();
// Make sure the current tab panel was effectively switched
Expand All @@ -275,11 +275,11 @@ describe("Client Details Page", () => {
// Switch back to tab Contacts
cy.get("#tab-contacts").click();
// First contact is still open
cy.get("#contact-00 cds-accordion-item").should("have.attr", "open");
cy.get("#contact-0 cds-accordion-item").should("have.attr", "open");
// Second contact is still closed
cy.get("#contact-01 cds-accordion-item").should("not.have.attr", "open");
cy.get("#contact-1 cds-accordion-item").should("not.have.attr", "open");
// Third contact is still open
cy.get("#contact-02 cds-accordion-item").should("have.attr", "open");
cy.get("#contact-2 cds-accordion-item").should("have.attr", "open");
});
});
describe("no contacts", () => {
Expand Down
11 changes: 10 additions & 1 deletion frontend/src/assets/styles/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -956,7 +956,8 @@ cds-actionable-notification * {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 2.5rem;
gap: 1rem;
border-radius: 0 0 0.5rem 0.5rem;
background: #fff;
padding: 1rem;
}
Expand Down Expand Up @@ -1033,6 +1034,10 @@ cds-actionable-notification * {
gap: 2rem;
}

cds-accordion-item:not([open]) {
gap: 0; // removes unwanted extra space when accordion item is closed.
}

.grouping-13 {
align-self: stretch;
display: flex;
Expand Down Expand Up @@ -1468,6 +1473,10 @@ cds-side-nav {
width: 100%;
}

cds-accordion-item::part(expando) {
min-block-size: 3rem;
}

cds-accordion-item[open]:not([disabled])::part(content),
:host(cds-accordion-item[open]:not([disabled]))
.cds-ce--accordion__content--md {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/dto/CommonTypesDto.ts
Original file line number Diff line number Diff line change
Expand Up @@ -282,8 +282,8 @@ export interface ClientLocation {

export interface ClientContact {
clientNumber: string;
clientLocnCode: string[];
contactCode: string;
clientLocnCode: string;
locationCode: string[];
contactName: string;
contactTypeCode: string;
contactTypeDesc: string;
Expand Down
21 changes: 11 additions & 10 deletions frontend/src/pages/ClientDetailsPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const sortedLocations = computed(() =>
);
const sortedContacts = computed(() =>
data.value.contacts?.toSorted((a, b) => compareString(a.contactCode, b.contactCode)),
data.value.contacts?.toSorted((a, b) => compareString(a.contactName, b.contactName)),
);
const formatLocations = (
Expand All @@ -116,8 +116,8 @@ const formatLocations = (
const associatedLocationsRecord = computed(() => {
const result: Record<string, string> = {};
sortedContacts.value?.forEach((contact) => {
result[contact.contactCode] = formatLocations(contact.locationCode);
sortedContacts.value?.forEach((contact, index) => {
result[index] = formatLocations(contact.locationCode);
});
return result;
});
Expand Down Expand Up @@ -281,26 +281,27 @@ const toolsSvg = useSvg(tools);
{{ pluralize("contact", data.contacts?.length) }}
</h3>
<cds-accordion
v-for="contact in sortedContacts"
:key="contact.contactCode"
:id="`contact-${contact.contactCode}`"
v-for="(contact, index) in sortedContacts"
:key="contact.contactName"
:id="`contact-${index}`"
>
<cds-accordion-item size="lg" class="grouping-13">
<div slot="title" class="flex-column-0_25rem">
<span class="label-with-icon">
<User20 />
{{ contact.contactCode }} - {{ contact.contactName }}
{{ contact.contactName }}
</span>
<span
:id="`contact-${contact.contactCode}-title-locations`"
:id="`contact-${index}-title-locations`"
class="hide-open body-compact-01 padding-left-1_625rem"
>
{{ associatedLocationsRecord[contact.contactCode] }}
{{ associatedLocationsRecord[index] }}
</span>
</div>
<contact-view
:data="contact"
:associatedLocationsString="associatedLocationsRecord[contact.contactCode]"
:index="index"
:associatedLocationsString="associatedLocationsRecord[index]"
/>
</cds-accordion-item>
</cds-accordion>
Expand Down
27 changes: 10 additions & 17 deletions frontend/src/pages/client-details/ContactView.vue
Original file line number Diff line number Diff line change
@@ -1,45 +1,38 @@
<script setup lang="ts">
import type { ClientContact } from "@/dto/CommonTypesDto";
const props = defineProps<{
defineProps<{
data: ClientContact;
index: number;
associatedLocationsString: string;
}>();
const indexString = props.data.clientLocnCode;
</script>

<template>
<div
:id="`contact-${indexString}-general-section`"
class="flex-column-1_5rem margin-left-1_75rem"
>
<read-only-component label="Contact type" :id="`contact-${indexString}-contactType`">
<div :id="`contact-${index}-general-section`" class="flex-column-1_5rem margin-left-1_75rem">
<read-only-component label="Contact type" :id="`contact-${index}-contactType`">
<span class="body-compact-01">{{ data.contactTypeDesc }}</span>
</read-only-component>
<read-only-component
label="Associated locations"
:id="`contact-${indexString}-associatedLocations`"
>
<read-only-component label="Associated locations" :id="`contact-${index}-associatedLocations`">
<span class="body-compact-01">{{ associatedLocationsString }}</span>
</read-only-component>
<read-only-component
label="Email address"
:id="`contact-${indexString}-emailAddress`"
:id="`contact-${index}-emailAddress`"
v-if="data.emailAddress"
>
<a :href="`mailto:${data.emailAddress}`">
<span class="body-compact-01 colorless">{{ data.emailAddress }}</span>
</a>
</read-only-component>
<div
:id="`contact-${indexString}-phone-section`"
:id="`contact-${index}-phone-section`"
class="grouping-10 no-padding"
v-if="data.businessPhone || data.secondaryPhone || data.faxNumber"
>
<read-only-component
label="Primary phone number"
:id="`contact-${indexString}-primaryPhoneNumber`"
:id="`contact-${index}-primaryPhoneNumber`"
v-if="data.businessPhone"
>
<a :href="`tel:${data.businessPhone}`">
Expand All @@ -48,14 +41,14 @@ const indexString = props.data.clientLocnCode;
</read-only-component>
<read-only-component
label="Secondary phone number"
:id="`contact-${indexString}-secondaryPhoneNumber`"
:id="`contact-${index}-secondaryPhoneNumber`"
v-if="data.secondaryPhone"
>
<a :href="`tel:${data.secondaryPhone}`">
<span class="body-compact-01 colorless">{{ data.secondaryPhone }}</span>
</a>
</read-only-component>
<read-only-component label="Fax" :id="`contact-${indexString}-fax`" v-if="data.faxNumber">
<read-only-component label="Fax" :id="`contact-${index}-fax`" v-if="data.faxNumber">
<a :href="`tel:${data.faxNumber}`">
<span class="body-compact-01 colorless">{{ data.faxNumber }}</span>
</a>
Expand Down
3 changes: 0 additions & 3 deletions frontend/stub/__files/response-clients-details-G.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"contacts": [
{
"locationCode": ["00"],
"contactCode": "00",
"contactName": "Cheryl Bibby",
"contactTypeCode": "BL",
"contactTypeDesc": "Billing",
Expand All @@ -25,7 +24,6 @@
},
{
"locationCode": ["01", "02"],
"contactCode": "01",
"contactName": "Edward Burns",
"contactTypeCode": "DI",
"contactTypeDesc": "Director",
Expand All @@ -36,7 +34,6 @@
},
{
"locationCode": ["02"],
"contactCode": "02",
"contactName": "Christoffer Stewart",
"contactTypeCode": "BL",
"contactTypeDesc": "Billing",
Expand Down
1 change: 0 additions & 1 deletion frontend/stub/__files/response-clients-details-S.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
"wcbFirmNumber": "{{randomValue length=7 type='NUMERIC'}}",
"contacts": [{
"locationCode": ["00"],
"contactCode": "00",
"contactName": "Cheryl Bibby",
"contactTypeCode": "BL",
"contactTypeDesc": "Billing",
Expand Down
34 changes: 17 additions & 17 deletions frontend/tests/components/pages/client-details/ContactView.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import ContactView from "@/pages/client-details/ContactView.vue";
describe("<contact-view />", () => {
const getDefaultProps = () => ({
data: {
clientLocnCode: ["00"],
contactCode: "00",
locationCode: ["01"],
contactName: "Cheryl Bibby",
contactTypeCode: "BL",
contactTypeDesc: "Billing",
Expand All @@ -14,7 +13,8 @@ describe("<contact-view />", () => {
faxNumber: "(250) 286-3768",
emailAddress: "[email protected]",
} as ClientContact,
associatedLocationsString: "00 - Mailing address",
index: 0,
associatedLocationsString: "01 - Town office",
});

let currentProps: ReturnType<typeof getDefaultProps> = null;
Expand Down Expand Up @@ -49,18 +49,18 @@ describe("<contact-view />", () => {

const emailPrefix = "mailto:";

cy.get("#contact-00-general-section").within(() => {
testField("#contact-00-contactType", currentProps.data.contactTypeDesc);
testField("#contact-00-associatedLocations", currentProps.associatedLocationsString);
testField("#contact-00-emailAddress", currentProps.data.emailAddress, emailPrefix);
cy.get("#contact-0-general-section").within(() => {
testField("#contact-0-contactType", currentProps.data.contactTypeDesc);
testField("#contact-0-associatedLocations", currentProps.associatedLocationsString);
testField("#contact-0-emailAddress", currentProps.data.emailAddress, emailPrefix);
});

const phonePrefix = "tel:";

cy.get("#contact-00-phone-section").within(() => {
testField("#contact-00-primaryPhoneNumber", currentProps.data.businessPhone, phonePrefix);
testField("#contact-00-secondaryPhoneNumber", currentProps.data.secondaryPhone, phonePrefix);
testField("#contact-00-fax", currentProps.data.faxNumber, phonePrefix);
cy.get("#contact-0-phone-section").within(() => {
testField("#contact-0-primaryPhoneNumber", currentProps.data.businessPhone, phonePrefix);
testField("#contact-0-secondaryPhoneNumber", currentProps.data.secondaryPhone, phonePrefix);
testField("#contact-0-fax", currentProps.data.faxNumber, phonePrefix);
});
});

Expand All @@ -75,7 +75,7 @@ describe("<contact-view />", () => {
...getDefaultProps(),
data,
});
cy.get("#contact-00-phone-section").should("not.exist");
cy.get("#contact-0-phone-section").should("not.exist");
});

it("hides general fields when they are empty", () => {
Expand All @@ -88,14 +88,14 @@ describe("<contact-view />", () => {
data,
});

testFieldHidden("#contact-00-emailAddress");
testFieldHidden("#contact-0-emailAddress");
});

describe("while there is at least one phone to be displayed", () => {
const scenarios = [
["businessPhone", "#contact-00-primaryPhoneNumber"],
["secondaryPhone", "#contact-00-secondaryPhoneNumber"],
["faxNumber", "#contact-00-fax"],
["businessPhone", "#contact-0-primaryPhoneNumber"],
["secondaryPhone", "#contact-0-secondaryPhoneNumber"],
["faxNumber", "#contact-0-fax"],
];

scenarios.forEach((scenario) => {
Expand All @@ -116,7 +116,7 @@ describe("<contact-view />", () => {
});
});
it(`displays the one phone with value: ${propName}`, () => {
cy.get("#contact-00-phone-section").within(() => {
cy.get("#contact-0-phone-section").within(() => {
testField(selector, currentProps.data[propName]);
});
});
Expand Down

0 comments on commit 66601ed

Please sign in to comment.