Skip to content

Commit

Permalink
dashboard card and dashboard response page updates per conversation w…
Browse files Browse the repository at this point in the history 
…ith Thomas on QA review (#31607)
  • Loading branch information
@hemeshvpatel
hemeshvpatel authored Aug 27, 2024
1 parent 836aa1a commit 4fcf08d
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 65 deletions.
52 changes: 32 additions & 20 deletions src/applications/ask-va/containers/DashboardCardsMock.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { VaSelect } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
import {
VaPagination,
VaSelect,
} from '@department-of-veterans-affairs/component-library/dist/react-bindings';
import { format, parse } from 'date-fns';
import moment from 'moment';
import React, { useEffect, useState } from 'react';
Expand Down Expand Up @@ -76,20 +79,23 @@ const DashboardCardsMock = () => {
return (
<div className="dashboard-cards-grid">
{sortedInquiries.map(card => (
<div className="" key={card.inquiryNumber}>
<va-card className="vacard">
<div>
<span className="usa-label">{card.status}</span>
</div>
<h3 className="vads-u-margin-y--0 vads-u-font-size--h4 vads-u-padding-top--1p5">
{`Submitted on ${formatDate(card.createdOn)}`}
<div key={card.inquiryNumber}>
<va-card class="vacard">
<h3 className="vads-u-margin-top--0 vads-u-margin-bottom--1p5">
<span className="usa-label vads-u-font-weight--normal vads-u-font-family--sans">
{card.status}
</span>
<span className="vads-u-display--block vads-u-font-size--h4 vads-u-margin-top--1p5">
{`Submitted on ${formatDate(card.createdOn)}`}
</span>
</h3>
<p className="vads-u-margin--0 vads-u-padding-bottom--1p5">
{`Last Updated: ${formatDate(card.lastUpdate)}`}
</p>
<p className="vads-u-margin--0">Category: {card.category}</p>
<hr className="vads-u-margin-y--1p5 vads-u-background-color--gray-lightest" />
<p className="vads-u-margin-y--1p5 multiline-ellipsis-3">
<p className="vacardCategory multiline-ellipsis-1">
Category: {card.category}
</p>
<p className="vacardSubmitterQuestion">
{card.submitterQuestion}
</p>
<Link to={`/user/dashboard-mock/${card.id}`}>
Expand Down Expand Up @@ -121,14 +127,14 @@ const DashboardCardsMock = () => {

return (
<div className="vads-u-width--full">
<h2 className="vads-u-margin-top--5 vads-u-margin-bottom--3">
<h2 className="vads-u-margin-top--5 vads-u-margin-bottom--0">
Your questions
</h2>
{inquiries.length > 0 ? (
<div className="vads-u-margin-bottom--2">
<>
{/* Filters and Buttons */}
<div className="vads-u-display--flex vads-u-flex-direction--row vads-u-align-items--flex-end vads-u-margin-bottom--3">
<div className="vads-u-flex--1">
<div className="vacardSelectFilters">
<div className="vads-u-flex--1 vads-u-width--full">
<VaSelect
hint={null}
label="Last updated"
Expand All @@ -140,7 +146,7 @@ const DashboardCardsMock = () => {
<option value="oldestToNewest">Oldest to newest</option>
</VaSelect>
</div>
<div className="vads-u-flex--1 vads-u-margin-left--2">
<div className="vads-u-flex--1 vads-u-margin-left--2 vads-u-width--full">
<VaSelect
hint={null}
label="Filter by category"
Expand All @@ -156,7 +162,7 @@ const DashboardCardsMock = () => {
))}
</VaSelect>
</div>
<div className="vads-u-flex--1 vads-u-margin-left--2">
<div className="vads-u-flex--1 vads-u-margin-left--2 vads-u-width--full">
<VaSelect
hint={null}
label="Filter by status"
Expand All @@ -165,10 +171,9 @@ const DashboardCardsMock = () => {
onVaSelect={event => setStatusFilter(event.target.value)}
>
<option value="All">All</option>
<option value="New">New</option>
<option value="In Progress">In Progress</option>
<option value="Replied">Replied</option>
<option value="Reopened">Reopened</option>
<option value="Resolved">Archived</option>
</VaSelect>
</div>
</div>
Expand All @@ -187,7 +192,7 @@ const DashboardCardsMock = () => {
) : (
inquiriesGridView('Personal')
)}
</div>
</>
) : (
<div className="vads-u-margin-bottom--5">
<va-alert
Expand All @@ -202,6 +207,13 @@ const DashboardCardsMock = () => {
</va-alert>
</div>
)}
<VaPagination
page={1}
pages={3}
maxPageListLength={5}
showLastPage
className="vads-u-border-top--0 vads-u-padding-y--5"
/>
</div>
);
};
Expand Down
88 changes: 50 additions & 38 deletions src/applications/ask-va/containers/ResponseInboxPageMock.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,46 +112,57 @@ const ResponseInboxPage = () => {
}

return !error ? (
<div className="row">
<div className="row vads-u-padding-x--1">
<BreadCrumbs currentLocation={location.pathname} />
<div className="usa-width-two-thirds medium-8 columns vads-u-padding--0">
<h1 className="">{RESPONSE_PAGE.QUESTION_DETAILS}</h1>

<div className="vads-u-margin-bottom--3">
<div>
<span className="usa-label">{inquiryData.attributes.status}</span>
<dl className="dashboard-dl">
<div className="vads-u-margin-bottom--1p5">
<dt className="sr-only">Status</dt>
<dd>
<span className="usa-label vads-u-font-weight--normal vads-u-font-family--sans">
{inquiryData.attributes.status}
</span>
</dd>
</div>

<div className="vads-u-margin-top--2">
<p className="vads-u-margin--0">
<span className="vads-u-font-weight--bold">Submitted:</span>{' '}
<div className="vads-u-margin-bottom--1">
<dt className="vads-u-display--inline vads-u-font-weight--bold">
Submitted:
</dt>
<dd className="vads-u-display--inline">
{' '}
{formatDate(inquiryData.attributes.createdOn)}
</p>
<p className="vads-u-margin--0">
<span className="vads-u-font-weight--bold">Last updated:</span>{' '}
</dd>
</div>
<div className="vads-u-margin-bottom--1">
<dt className="vads-u-display--inline vads-u-font-weight--bold">
Last updated:
</dt>
<dd className="vads-u-display--inline">
{' '}
{formatDate(inquiryData.attributes.lastUpdate)}
</p>
<p className="vads-u-margin--0">
<span className="vads-u-font-weight--bold">Category:</span>{' '}
</dd>
</div>
<div className="vads-u-margin-bottom--1">
<dt className="vads-u-display--inline vads-u-font-weight--bold">
Category:
</dt>
<dd className="vads-u-display--inline">
{' '}
{inquiryData.attributes.category}
</p>
<p className="vads-u-margin--0">
<span className="vads-u-font-weight--bold">
Reference number:
</span>{' '}
</dd>
</div>
<div>
<dt className="vads-u-display--inline vads-u-font-weight--bold">
Reference number:
</dt>
<dd className="vads-u-display--inline">
{' '}
{inquiryData.attributes.inquiryNumber}
</p>
</dd>
</div>
</div>
</dl>

{/* Temporarily hidden for research study
<h2 className="vad-u-margin-top--0">{RESPONSE_PAGE.ATTACHMENTS}</h2>
{inboxMessage.attributes.attachments.length === 0
? emptyMessage(RESPONSE_PAGE.NO_ATTACHMENTS)
: inboxMessage.attributes.attachments.map(attachment => (
<div key={attachment.id}>{attachmentBox(attachment.name)}</div>
))}
<hr /> */}
<div className="vads-l-row vads-u-justify-content--space-between vads-u-align-items--baseline">
<h2 className="vads-u-margin-y--2">
{RESPONSE_PAGE.YOUR_CONVERSATION}
Expand Down Expand Up @@ -181,12 +192,16 @@ const ResponseInboxPage = () => {
</div>
) : (
<div className="inbox-replies">
<va-accordion bordered>
{inquiryData.attributes.reply.data.map(message => (
<va-accordion
bordered
open-single={inquiryData.attributes.reply.data.length === 1}
>
{inquiryData.attributes.reply.data.map((message, ix) => (
<va-accordion-item
key={message.id}
header={message.modifiedOn}
subHeader={getReplySubHeader(message.messageType)}
open={inquiryData.attributes.reply.data.length - 1 === ix}
>
<p className="vads-u-margin--0">{message.attributes.reply}</p>
{message.attributes.attachmentNames.length > 0 && (
Expand All @@ -207,7 +222,7 @@ const ResponseInboxPage = () => {
)}

<h2 className="vads-u-margin-bottom--0">{RESPONSE_PAGE.SEND_REPLY}</h2>
<form onSubmit={handlers.onSubmit}>
<form className="vads-u-margin-bottom--5" onSubmit={handlers.onSubmit}>
<fieldset>
<va-textarea
class="resize-y"
Expand All @@ -218,11 +233,8 @@ const ResponseInboxPage = () => {
required
/>

<h4 className="vads-u-margin-top--4">
{RESPONSE_PAGE.ATTACHMENTS}
</h4>
<VaFileInputMultiple
label="Select files to upload"
label="Select optional files to upload"
hint="You can upload a .pdf, .jpeg, or .png file. that is less than 25 MB in size"
name="my-file-input"
onClick={() => {
Expand All @@ -242,7 +254,7 @@ const ResponseInboxPage = () => {
<VaButton
onClick={handlers.onSubmit}
primary
className="vads-u-margin-y--2"
className="vads-u-margin-top--2"
text={RESPONSE_PAGE.SUBMIT_MESSAGE}
/>
</fieldset>
Expand Down
69 changes: 62 additions & 7 deletions src/applications/ask-va/sass/ask-va-too.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ $facility-locator-shadow: rgba(0, 0, 0, 0.5);
max-width: 480px;
}

.schemaform-intro {
padding: 0;
}

#root_aboutYourself_socialOrServiceNum_ssn-label,
#root_aboutYourself_socialOrServiceNum_serviceNumber-label {
margin-top: 0.625rem;
Expand Down Expand Up @@ -68,14 +72,25 @@ $facility-locator-shadow: rgba(0, 0, 0, 0.5);
margin: 1.875rem 0;
}

.multiline-ellipsis-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.5em * 1);
line-height: 1.5;
font-size: 16px;
}

.multiline-ellipsis-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.2em * 2);
line-height: 1.2;
line-height: 1.5;
font-size: 16px;
}

Expand All @@ -85,8 +100,8 @@ $facility-locator-shadow: rgba(0, 0, 0, 0.5);
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.2em * 3);
line-height: 1.2;
height: calc(1.5em * 3);
line-height: 1.5;
font-size: 16px;
}

Expand Down Expand Up @@ -357,12 +372,20 @@ ul.react-tabs__tab-list {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 346px;
border: solid 1px var(--vads-color-base-light);
height: 375px;
padding: 24px;

@include media($medium-screen) {
height: 346px;
}
}

.vacardCategory {
margin-top: 0;
margin-bottom: 12px;
}

.inquiry-question {
.vacard .inquiry-question {
height: 93px;
overflow: "hidden";
display: -webkit-box !important;
Expand All @@ -372,8 +395,35 @@ ul.react-tabs__tab-list {
white-space: normal;
}

.vacardSubmitterQuestion {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.5em * 3.75);
line-height: 1.5;
font-size: 16px;
box-sizing: border-box;
padding-top: 12px;
padding-bottom: 12px;
border-top: 1px solid $color-gray-lighter;
margin-top: 0;
}

.vacardSelectFilters {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 24px;

@include media($medium-screen) {
flex-direction: row;
}
}

.dashboard-card {
background-color: var(--vads-color-base-lightest);
background-color: var(--vads-color-base-medium);
border: none;
}

Expand All @@ -382,3 +432,8 @@ ul.react-tabs__tab-list {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

.dashboard-dl {
margin-top: 0;
margin-bottom: 24px;
}
18 changes: 18 additions & 0 deletions src/applications/ask-va/utils/mockData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1761,4 +1761,22 @@ export const mockInquiryData = {
},
},
],
meta: {
meta: {
pagination: {
currentPage: 1,
prevPage: null,
nextPage: null,
totalPages: 1,
totalEntries: 4,
},
},
links: {
self: 'http://localhost:3000/ask_va_api/v0/inquiries?page=1&per_page=10',
first: 'http://localhost:3000/ask_va_api/v0/inquiries?page=1&per_page=10',
prev: null,
next: null,
last: 'http://localhost:3000/ask_va_api/v0/inquiries?page=1&per_page=10',
},
},
};

0 comments on commit 4fcf08d

Please sign in to comment.