Skip to content

Commit

Permalink
add filters and design adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@meetulr
meetulr committed Feb 15, 2024
1 parent 52693c9 commit 99db3de
Show file tree
Hide file tree
Showing 6 changed files with 181 additions and 190 deletions.
3 changes: 3 additions & 0 deletions public/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,9 @@
"dueDate": "Due Date",
"completionDate": "Completion Date",
"isCompleted": "Completed",
"active": "Active",
"completed": "Completed",
"clearFilters": "Clear Filters",
"status": "Status",
"latest": "Latest",
"earliest": "Earliest",
Expand Down
10 changes: 10 additions & 0 deletions src/GraphQl/Queries/Queries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,21 @@ export const ACTION_ITEM_CATEGORY_LIST = gql`
export const ACTION_ITEM_LIST = gql`
query ActionItemsByOrganization(
$organizationId: ID!
$actionItemCategoryId: ID
$eventId: ID
$isActive: Boolean
$isCompleted: Boolean
$orderBy: ActionItemsOrderByInput
) {
actionItemsByOrganization(
organizationId: $organizationId
orderBy: $orderBy
where: {
actionItemCategory_id: $actionItemCategoryId
event_id: $eventId
is_active: $isActive
is_completed: $isCompleted
}
) {
_id
assignee {
Expand Down
145 changes: 73 additions & 72 deletions src/components/ActionItemsContainer/ActionItemsContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function actionItemsContainer({
membersData,
actionItemsRefetch,
}: {
actionItemsData: InterfaceActionItemList | undefined;
actionItemsData: InterfaceActionItemInfo[] | undefined;
membersData: any;
actionItemsRefetch: any;
}): JSX.Element {
Expand Down Expand Up @@ -172,81 +172,82 @@ function actionItemsContainer({
</div>

<div className="mx-4 bg-light-subtle border border-light-subtle border-top-0 rounded-bottom-4 shadow-sm">
{actionItemsData?.actionItemsByOrganization.map(
(actionItem, index) => (
<div key={index}>
<Row className={`${index === 0 ? 'pt-3' : ''} mb-3 mx-2`}>
<Col
sm={4}
xs={7}
md={3}
lg={3}
className="align-self-center fw-semibold text-body-secondary"
{actionItemsData?.map((actionItem, index) => (
<div key={index}>
<Row className={`${index === 0 ? 'pt-3' : ''} mb-3 mx-2`}>
<Col
sm={4}
xs={7}
md={3}
lg={3}
className="align-self-center fw-semibold text-body-secondary"
>
{`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`}
</Col>
<Col
sm={5}
md={6}
lg={4}
className="d-none d-sm-block align-self-center fw-semibold text-body-secondary"
>
{actionItem.actionItemCategory.name}
</Col>
<Col
className="d-none d-lg-block align-self-center fw-semibold text-body-secondary"
md={4}
lg={3}
>
<div
className={`lh-base w-50 badge rounded-pill ${
actionItem.isCompleted
? 'text-bg-success text-white'
: 'text-bg-warning'
}`}
>
{`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`}
</Col>
<Col
sm={5}
md={6}
lg={4}
className="d-none d-sm-block align-self-center fw-semibold text-body-secondary"
{actionItem.isCompleted ? 'Completed' : 'Active'}
</div>
</Col>
<Col xs={5} sm={3} lg={2} className="p-0">
<Button
className="btn btn-sm me-2"
variant="outline-secondary"
onClick={() => showPreviewModal(actionItem)}
>
{actionItem.actionItemCategory.name}
</Col>
<Col
className="d-none d-lg-block align-self-center fw-semibold text-body-secondary"
md={4}
lg={3}
Details
</Button>
<Button
size="sm"
data-testid="editActionItemModalBtn"
onClick={() => handleEditClick(actionItem)}
className="me-2 d-none d-xl-inline"
variant="success"
>
<div
className={`lh-base w-50 badge rounded-pill ${
actionItem.isCompleted
? 'text-bg-success text-white'
: 'text-bg-warning'
}`}
>
{actionItem.isCompleted ? 'Completed' : 'Active'}
</div>
</Col>
<Col xs={5} sm={3} lg={2} className="p-0">
<Button
className="btn btn-sm me-2"
variant="outline-secondary"
onClick={() => showPreviewModal(actionItem)}
>
Details
</Button>
<Button
size="sm"
data-testid="editActionItemModalBtn"
onClick={() => handleEditClick(actionItem)}
className="me-2 d-none d-xl-inline"
variant="success"
>
{' '}
<i className="fas fa-edit"></i>
</Button>
<Button
size="sm"
data-testid="deleteActionItemModalBtn"
variant="danger"
onClick={() => {
setActionItemId(actionItem._id);
toggleDeleteModal();
}}
>
{' '}
<i className="fa fa-trash"></i>
</Button>
</Col>
</Row>
{' '}
<i className="fas fa-edit"></i>
</Button>
<Button
size="sm"
data-testid="deleteActionItemModalBtn"
variant="danger"
onClick={() => {
setActionItemId(actionItem._id);
toggleDeleteModal();
}}
>
{' '}
<i className="fa fa-trash"></i>
</Button>
</Col>
</Row>

{index !== actionItemsData.length - 1 && <hr className="mx-3" />}
</div>
))}

{index !==
actionItemsData.actionItemsByOrganization.length - 1 && (
<hr className="mx-3" />
)}
</div>
)
{actionItemsData?.length === 0 && (
<div className="lh-lg text-center fw-semibold text-body-tertiary">
No Action Items
</div>
)}
</div>
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const ActionItemUpdateModal: React.FC<InterfaceActionItemCreateModalProps> = ({
</Modal.Header>
<Modal.Body>
<Form onSubmitCapture={updateActionItemHandler}>
<Form.Group className="mb-3">
<Form.Group className="mb-2">
<Form.Label>Assignee</Form.Label>
<Form.Select
defaultValue=""
Expand Down Expand Up @@ -96,6 +96,7 @@ const ActionItemUpdateModal: React.FC<InterfaceActionItemCreateModalProps> = ({
preCompletionNotes: e.target.value,
});
}}
className="mb-2"
/>

<label htmlFor="actionItemPostCompletionNotes">
Expand All @@ -113,9 +114,10 @@ const ActionItemUpdateModal: React.FC<InterfaceActionItemCreateModalProps> = ({
postCompletionNotes: e.target.value,
});
}}
className="mb-2"
/>

<div className={styles.datediv}>
<div className={`${styles.datediv} mt-3 mb-2`}>
<div>
<DatePicker
label={t('dueDate')}
Expand Down
74 changes: 7 additions & 67 deletions src/screens/OrganizationActionItems/OrganizationActionItems.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,29 @@

.btnsContainer {
display: flex;
justify-content: space-between;
}

.btnsContainer .btnsBlock {
display: flex;
gap: 10px;
}

.btnsContainer .btnsBlock button {
margin-left: 1rem;
display: flex;
justify-content: center;
align-items: center;
}

.btnsContainer .input {
flex: 1;
position: relative;
}

.btnsContainer input {
outline: 1px solid var(--bs-gray-400);
}

.btnsContainer .input button {
width: 52px;
}

.container {
min-height: 100vh;
}

.datediv {
display: flex;
flex-direction: row;
margin-top: 30px;
margin-bottom: 20px;
}

.datebox {
width: 90%;
border-radius: 7px;
Expand All @@ -55,7 +42,7 @@
}

.dropdown {
display: inline;
display: block;
}

.dropdownToggle {
Expand Down Expand Up @@ -157,48 +144,10 @@ hr {
color: #707070;
}

@media (max-width: 1020px) {
.btnsContainer {
flex-direction: column;
margin: 1.5rem 0;
}

.btnsContainer .btnsBlock {
margin: 1.5rem 0 0 0;
justify-content: space-between;
}

.btnsContainer .btnsBlock button {
margin: 0;
}

.btnsContainer .btnsBlock div button {
margin-right: 1.5rem;
}
}

@media (max-width: 767px) {
.btnsContainer .btnsBlock {
flex-direction: column;
margin: 1.5rem 0 0 0;
justify-content: space-between;
}

.dropdownToggle {
margin-bottom: 1rem;
}

.dropdownContainer {
margin-bottom: 0;
justify-content: space-between;
}
}

/* For mobile devices */

@media (max-width: 520px) {
.btnsContainer {
margin-bottom: 0;
flex-direction: column-reverse;
}

.btnsContainer .btnsBlock {
Expand All @@ -207,21 +156,12 @@ hr {
margin-right: 0;
}

.btnsContainer .btnsBlock div {
flex: 1;
}

.btnsContainer .btnsBlock div[title='Sort organizations'] {
margin-right: 0.5rem;
}

.btnsContainer .btnsBlock button {
margin-bottom: 1rem;
margin-right: 0;
width: 100%;
}

.dropdownToggle {
margin-bottom: 0;
.dropdown {
width: 100%;
}
}
Loading

0 comments on commit 99db3de

Please sign in to comment.