From 2d96b8501f3a32f71c65ba4a01a0e118b2bf82e8 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Fri, 21 Jul 2023 21:49:28 +0530 Subject: [PATCH 001/314] Updated header design for list component --- src/assets/images/add.svg | 3 +++ src/assets/images/icons/Flow/Import.svg | 27 ++++++------------- src/assets/images/info.svg | 12 +++++++++ .../UI/Form/AutoComplete/AutoComplete.tsx | 22 ++++++++++----- .../UI/Form/Button/Button.module.css | 4 ++- .../UI/ImportButton/ImportButton.tsx | 7 +++-- src/components/UI/Pager/Pager.module.css | 20 +++++++++----- .../UI/SearchBar/SearchBar.module.css | 22 +++++++-------- src/components/UI/SearchBar/SearchBar.tsx | 2 +- .../Flow/FlowList/FlowList.module.css | 13 ++++----- src/containers/Flow/FlowList/FlowList.tsx | 5 ++-- src/containers/List/List.module.css | 22 ++++++++++++--- src/containers/List/List.tsx | 25 ++++++++++------- 13 files changed, 116 insertions(+), 68 deletions(-) create mode 100644 src/assets/images/add.svg create mode 100644 src/assets/images/info.svg diff --git a/src/assets/images/add.svg b/src/assets/images/add.svg new file mode 100644 index 000000000..8ad4eb63b --- /dev/null +++ b/src/assets/images/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/Flow/Import.svg b/src/assets/images/icons/Flow/Import.svg index d9ecd2837..aafaa9ee1 100644 --- a/src/assets/images/icons/Flow/Import.svg +++ b/src/assets/images/icons/Flow/Import.svg @@ -1,19 +1,8 @@ - - - Btn/Primary - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + diff --git a/src/assets/images/info.svg b/src/assets/images/info.svg new file mode 100644 index 000000000..395a9f863 --- /dev/null +++ b/src/assets/images/info.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/UI/Form/AutoComplete/AutoComplete.tsx b/src/components/UI/Form/AutoComplete/AutoComplete.tsx index ccfb38f53..a57e0493e 100644 --- a/src/components/UI/Form/AutoComplete/AutoComplete.tsx +++ b/src/components/UI/Form/AutoComplete/AutoComplete.tsx @@ -100,16 +100,24 @@ export const AutoComplete = ({ paddingTop: 0, }, '& fieldset': { - borderRadius: '12px', border: 'none', }, + '& .css-hmtdmj-MuiAutocomplete-root': { + padding: '0 !important', + }, + '& .MuiOutlinedInput-root': { + padding: '0 !important', + }, + '& .MuiAutocomplete-input': { + padding: '0 !important', + }, height: '100%', - borderRadius: '10px !important', - borderColor: '#93a29b', - borderWidth: '2px', + borderRadius: '24px !important', + borderColor: '#cccccc', + borderWidth: '1px', borderStyle: 'solid', - padding: 0, - marginLeft: '8px', + background: '#ffffff', + paddingLeft: '18px', }; useEffect(() => { @@ -196,7 +204,7 @@ export const AutoComplete = ({ {questionText ?
{questionText}
: null} { inputRef.current?.click(); }} - variant="contained" + variant="outlined" color="primary" > + {title} - ); diff --git a/src/components/UI/Pager/Pager.module.css b/src/components/UI/Pager/Pager.module.css index 0a32e5977..340604e55 100644 --- a/src/components/UI/Pager/Pager.module.css +++ b/src/components/UI/Pager/Pager.module.css @@ -1,10 +1,15 @@ +.Table { + background-color: #ffffff; +} .TableRow { position: relative; display: flex !important; background-color: white; - border-radius: 12px !important; - margin-bottom: 12px !important; - border: 1px solid #eaedec !important; + /* border-radius: 12px !important; */ + /* margin-bottom: 12px !important; */ + /* border-bottom: 1px solid #eaedec !important; */ + box-shadow: 0px 4px 4px 0px #0000000a; + border-bottom: 1px solid #efefef; padding: 4px 13px; padding-right: 5px; } @@ -17,18 +22,21 @@ .TableHeadRow { display: flex !important; - margin-bottom: 4px !important; padding: 0px 16px; padding-right: 5px; line-height: 1 !important; - text-transform: uppercase; + background: #dfece2 !important; + height: 50px !important; + align-items: center; } .TableCell { font-size: 14px !important; display: flex !important; padding: 0px 10px !important; + margin: 0; border: unset !important; + color: #0c1f14 !important; } .TableContainer { @@ -42,7 +50,7 @@ display: flex !important; justify-content: flex-end !important; width: 100%; - background: #f9f7f3; + background: #fff; bottom: 0px; right: 4px; } diff --git a/src/components/UI/SearchBar/SearchBar.module.css b/src/components/UI/SearchBar/SearchBar.module.css index 756c14933..8258bc8f2 100644 --- a/src/components/UI/SearchBar/SearchBar.module.css +++ b/src/components/UI/SearchBar/SearchBar.module.css @@ -1,33 +1,31 @@ .SearchField { height: 100%; width: 100%; - padding: 0 0 0 10px; - border-radius: 10px; - align-items: center !important; + border-radius: 24px; } .IconAndText { width: 100%; display: flex; + align-items: center; } .SearchBar { - border-radius: 10px; - border-color: #93a29b; - border-width: 2px; - border-style: solid; + padding: 0 18px; + border-radius: 24px; display: flex; - width: 93%; - padding: 0px; + width: 176px; margin: auto; margin-top: 14px; margin-bottom: 12px; - height: 48px; + height: 36px; + box-shadow: 0px 2px 4px 0px #00000014; + background: #ffffff; } .SearchIcon { - margin-left: 8px; - width: 24px; + width: 20px; + height: 20px; vertical-align: middle; } diff --git a/src/components/UI/SearchBar/SearchBar.tsx b/src/components/UI/SearchBar/SearchBar.tsx index 10cbe27cc..cb2b1be3e 100644 --- a/src/components/UI/SearchBar/SearchBar.tsx +++ b/src/components/UI/SearchBar/SearchBar.tsx @@ -82,7 +82,6 @@ export const SearchBar = ({
- Search + Search
{resetButton}
diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css index 1ca9eaf58..19445ecc8 100644 --- a/src/containers/Flow/FlowList/FlowList.module.css +++ b/src/containers/Flow/FlowList/FlowList.module.css @@ -1,10 +1,11 @@ .SearchBar { - border-radius: 10px !important; - border-color: #93a29b; - border-width: 2px; - border-style: solid; - padding: 0px; - height: 48px; + border-radius: 24px; + border: 1px solid #cccccc; + display: flex; + width: 110px; + margin: auto; + height: 36px; + background: #ffffff; } .Shortcode { diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index 2c2bf7ea1..7df5b2a54 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -4,6 +4,7 @@ import moment from 'moment'; import { useTranslation } from 'react-i18next'; import { useLazyQuery, useMutation, useQuery } from '@apollo/client'; +import { ReactComponent as AddIcon } from 'assets/images/add.svg'; import { ReactComponent as FlowIcon } from 'assets/images/icons/Flow/Dark.svg'; import { ReactComponent as DuplicateIcon } from 'assets/images/icons/Flow/Duplicate.svg'; import { ReactComponent as ExportIcon } from 'assets/images/icons/Flow/Export.svg'; @@ -260,7 +261,7 @@ export const FlowList = () => { if (importing) { return ; } - + const addIcon = ; return ( { {...columnAttributes} searchParameter={['name_or_keyword_or_tags']} additionalAction={additionalAction} - button={{ show: true, label: t('Create Flow'), symbol: '+' }} + button={{ show: true, label: t('Create Flow'), symbol: addIcon }} secondaryButton={importButton} filters={filters} filterList={activeFilter} diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css index 225c69085..13e320848 100644 --- a/src/containers/List/List.module.css +++ b/src/containers/List/List.module.css @@ -12,8 +12,19 @@ .Title { margin-left: 14px !important; vertical-align: middle; - font-weight: 500 !important; - color: #073f24; + height: 40px; + color: #191c1a; + display: flex; + align-items: first baseline; + font-weight: 700 !important; + font-size: 38px; +} + +.TextHeader { + margin: 6px 0 0 14px !important; + font-weight: 400 !important; + color: #191c1a; + font-size: 12px; } .additonalButton { @@ -24,6 +35,11 @@ .IconButton { background-color: '#e0e0e0'; } +.InfoIcon { + margin-left: 10px !important; + height: 18px; + width: 18px; +} .DropdownButton { margin-left: 24px !important; @@ -49,7 +65,7 @@ background-color: #f9f7f3; top: 0; display: flex; - padding: 14px 24px 14px 10px; + padding: 26px 24px 26px 10px; z-index: 1000; justify-content: space-between; align-items: center; diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index e224fe29f..ff4ed58e1 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -15,6 +15,7 @@ import { ReactComponent as DeleteIcon } from 'assets/images/icons/Delete/Red.svg import { ReactComponent as EditIcon } from 'assets/images/icons/Edit.svg'; import { ReactComponent as CrossIcon } from 'assets/images/icons/Cross.svg'; import { ReactComponent as BackIcon } from 'assets/images/icons/Back.svg'; +import { ReactComponent as InfoIcon } from 'assets/images/info.svg'; import { GET_CURRENT_USER } from 'graphql/queries/User'; import { getUserRole, getUserRolePermissions } from 'context/role'; import { setNotification, setErrorMessage } from 'common/notification'; @@ -30,6 +31,7 @@ export interface ColumnNames { } export interface ListProps { + helperText?: string; columnNames?: Array; countQuery: DocumentNode; listItem: string; @@ -48,7 +50,7 @@ export interface ListProps { label?: string; link?: string; action?: Function; - symbol?: string; + symbol?: any; }; searchParameter?: Array; filters?: Object | null; @@ -95,7 +97,6 @@ export const List = ({ columnNames = [], countQuery, listItem, - listIcon, filterItemsQuery, deleteItemQuery, listItemName, @@ -644,20 +645,26 @@ export const List = ({ ); + const infoIcon = ; + const headerText = ( +
{`Please go through all the ${title} added below`}
+ ); + return ( <>
- - - {listIcon} - - {title} - +
+
+ {title} + {infoIcon} +
+ {headerText} +
{dialogBox}
- {buttonDisplay} {secondaryButton} + {buttonDisplay}
From eef026ec41b9cda29623b3ab40a2679904815253 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Fri, 21 Jul 2023 21:55:07 +0530 Subject: [PATCH 002/314] resolved deepscan issue --- src/containers/List/List.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index ff4ed58e1..e16193c69 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -2,8 +2,7 @@ import { useState, useEffect, useCallback } from 'react'; import { Link, Navigate, useSearchParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { useQuery, useMutation, DocumentNode, useLazyQuery } from '@apollo/client'; -import { IconButton, TableFooter, TablePagination, TableRow, Typography } from '@mui/material'; - +import { IconButton, TableFooter, TablePagination, TableRow } from '@mui/material'; import { ListCard } from 'containers/List/ListCard/ListCard'; import { Button } from 'components/UI/Form/Button/Button'; import { Loading } from 'components/UI/Layout/Loading/Loading'; From d1a41fc77b6241fb0e48b2f3f6ffd50bd3f4a198 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Mon, 24 Jul 2023 01:19:41 +0530 Subject: [PATCH 003/314] Updated css --- src/components/UI/Pager/Pager.module.css | 6 ++- src/components/UI/Pager/Pager.tsx | 49 ++++++++++++++----- .../Flow/FlowList/FlowList.module.css | 29 +++++++++-- src/containers/Flow/FlowList/FlowList.tsx | 13 ++++- src/graphql/queries/Flow.ts | 4 ++ 5 files changed, 81 insertions(+), 20 deletions(-) diff --git a/src/components/UI/Pager/Pager.module.css b/src/components/UI/Pager/Pager.module.css index 340604e55..7a5887bcb 100644 --- a/src/components/UI/Pager/Pager.module.css +++ b/src/components/UI/Pager/Pager.module.css @@ -42,17 +42,19 @@ .TableContainer { margin: 14px 24px; margin-bottom: 50px; - overflow: auto; + border-radius: 10px !important; + box-shadow: 0px 4px 8px 0px #00000014; } .TableFooter { - position: fixed; + border-radius: 0 0 10px 10px; display: flex !important; justify-content: flex-end !important; width: 100%; background: #fff; bottom: 0px; right: 4px; + box-shadow: 0px -4px 4px 0px #0000000a; } .FooterRow { diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index 598ba2697..3e77bf2c8 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -8,6 +8,7 @@ import { TablePagination, TableRow, TableSortLabel, + TableContainer, } from '@mui/material'; import { v4 as uuidv4 } from 'uuid'; @@ -89,7 +90,8 @@ const createRows = ( return ( {entry[item]} @@ -104,7 +106,11 @@ const createRows = ( return ( - {createRow(entry)} + + {createRow(entry)} + {collapseOpen && dataObj && entry.id === collapseRow ? collapsedRowData(dataObj, columnStyles, entry.recordId) : null} @@ -120,11 +126,18 @@ const tableHeadColumns = ( handleTableChange: Function ) => { const headerRow = ( - + {columnNames.map((field: any, i: number) => ( {i !== columnNames.length - 1 && field.name ? ( - - {tableHead} - {rows} - - {tablePagination} - -
+ + + {tableHead} + {rows} +
+ + + {tablePagination} + ); }; diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css index 19445ecc8..c2083efe3 100644 --- a/src/containers/Flow/FlowList/FlowList.module.css +++ b/src/containers/Flow/FlowList/FlowList.module.css @@ -13,19 +13,25 @@ } .Name { - width: 35%; + width: 25%; min-width: 200px; } .Pinned { - width: 4%; + width: 3%; + align-items: center; +} + +.Label { + width: 15%; align-items: center; } .Actions { - justify-content: flex-end; - margin-left: auto; + width: 20%; + padding-right: 40px; min-width: 200px; + text-align: end; } .LabelText { @@ -123,7 +129,7 @@ } .DateColumn { - width: 18%; + width: 16.5%; min-width: 120px; } @@ -136,6 +142,19 @@ color: #cd8888; } +.LabelButton { + height: 32px; + width: 84px; + background: #f0f7f1; + color: #555555; + font-weight: 500; + font-size: 15px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 16px; +} + .Roles { position: absolute; right: 20px; diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index 7df5b2a54..990ae43fe 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -51,6 +51,11 @@ const getLastPublished = (date: string, fallback: string = '') => ) : (
{fallback}
); +const getLabel = (tag: any) => ( +
+ {tag ? (tag.label.length > 7 ? tag.label.slice(0, 7) + '..' : tag.label) : 'none'} +
+); const displayPinned = (isPinned: boolean) => { if (isPinned) { @@ -63,6 +68,7 @@ const columnStyles = [ styles.Pinned, styles.Name, styles.DateColumn, + styles.Label, styles.DateColumn, styles.Actions, ]; @@ -158,19 +164,22 @@ export const FlowList = () => { keywords, lastChangedAt, lastPublishedAt, - isPinned, + tag, roles, + isPinned, }: any) => ({ pin: displayPinned(isPinned), name: getName(name, keywords, roles), lastPublishedAt: getLastPublished(lastPublishedAt, t('Not published yet')), + label: getLabel(tag), lastChangedAt: getDate(lastChangedAt, t('Nothing in draft')), }); const columnNames = [ - { name: 'is_pinned', label: '', sort: true, order: 'desc' }, + { label: '' }, { name: 'name', label: t('Title') }, { label: t('Last published') }, + { label: t('Label') }, { label: t('Last saved in Draft') }, { label: t('Actions') }, ]; diff --git a/src/graphql/queries/Flow.ts b/src/graphql/queries/Flow.ts index f84455a72..1a69d9058 100644 --- a/src/graphql/queries/Flow.ts +++ b/src/graphql/queries/Flow.ts @@ -59,6 +59,10 @@ export const FILTER_FLOW = gql` id label } + tag { + label + id + } } } `; From f12c14dba3c21ccc00736791e67ae466b9bb9025 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Mon, 24 Jul 2023 14:23:55 +0530 Subject: [PATCH 004/314] Resolved ui issue in list page --- src/components/UI/Pager/Pager.tsx | 4 ++-- src/containers/List/List.module.css | 2 +- src/containers/Template/List/Template.module.css | 7 ++++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index 3e77bf2c8..fba1a0687 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -207,8 +207,8 @@ export const Pager = ({
Date: Tue, 25 Jul 2023 09:34:46 +0530 Subject: [PATCH 005/314] Done Flowlist UI --- src/assets/images/icons/MoreOptions.svg | 3 ++ src/components/UI/Pager/Pager.tsx | 11 ++--- .../Flow/FlowList/FlowList.module.css | 6 +-- src/containers/List/List.module.css | 16 ++++++++ src/containers/List/List.tsx | 40 ++++++++++++++++--- 5 files changed, 61 insertions(+), 15 deletions(-) create mode 100644 src/assets/images/icons/MoreOptions.svg diff --git a/src/assets/images/icons/MoreOptions.svg b/src/assets/images/icons/MoreOptions.svg new file mode 100644 index 000000000..2353b5030 --- /dev/null +++ b/src/assets/images/icons/MoreOptions.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index fba1a0687..f4600f72d 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -91,7 +91,7 @@ const createRows = ( {entry[item]} @@ -106,11 +106,8 @@ const createRows = ( return ( - - {createRow(entry)} - + {/* ${styles.TableRow} */} + {createRow(entry)} {collapseOpen && dataObj && entry.id === collapseRow ? collapsedRowData(dataObj, columnStyles, entry.recordId) : null} @@ -133,7 +130,7 @@ const tableHeadColumns = ( {columnNames.map((field: any, i: number) => ( { const { t } = useTranslation(); - + const [showMoreOptions, setShowMoreOptions] = useState(''); // DialogBox states const [deleteItemID, setDeleteItemID] = useState(null); const [deleteItemName, setDeleteItemName] = useState(''); @@ -405,6 +406,28 @@ export const List = ({ if (isReserved) { return null; } + let moreButton = null; + + moreButton = ( + { + if (showMoreOptions == id) { + setShowMoreOptions(''); + } else { + setShowMoreOptions(id); + } + }} + > + +
+ +
+ + + ); + let editButton = null; if (editSupport) { editButton = allowedAction.edit && ( @@ -481,10 +504,17 @@ export const List = ({ {/* do not display edit & delete for staff role in collection */} {userRolePermissions.manageCollections || item !== 'collections' ? ( - <> - {editButton} - {deleteButton(id, labelValue)} - + showMoreOptions == id ? ( + <> + {moreButton} +
+ {editButton} + {deleteButton(id, labelValue)} +
+ + ) : ( + <>{moreButton} + ) ) : null}
); From 008842846e298d43565f1b924e1a676cbf5143cd Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Tue, 25 Jul 2023 17:07:06 +0530 Subject: [PATCH 006/314] Resolved commented changes --- src/assets/images/icons/Configure/Setting.svg | 11 ++++ src/assets/images/icons/Delete/TrashGrey.svg | 6 ++ src/assets/images/icons/Edit.svg | 12 +++- src/assets/images/icons/Flow/Copy.svg | 4 ++ .../UI/ImportButton/ImportButton.module.css | 5 ++ .../UI/ImportButton/ImportButton.tsx | 6 +- src/components/UI/Pager/Pager.module.css | 13 +---- src/components/UI/Pager/Pager.tsx | 16 ++---- .../UI/SearchBar/SearchBar.module.css | 1 - src/containers/Flow/FlowList/FlowList.tsx | 12 ++-- src/containers/List/List.module.css | 57 +++++++++++++++---- src/containers/List/List.tsx | 33 +++++++---- 12 files changed, 118 insertions(+), 58 deletions(-) create mode 100644 src/assets/images/icons/Configure/Setting.svg create mode 100644 src/assets/images/icons/Delete/TrashGrey.svg create mode 100644 src/assets/images/icons/Flow/Copy.svg create mode 100644 src/components/UI/ImportButton/ImportButton.module.css diff --git a/src/assets/images/icons/Configure/Setting.svg b/src/assets/images/icons/Configure/Setting.svg new file mode 100644 index 000000000..5bcb23bf1 --- /dev/null +++ b/src/assets/images/icons/Configure/Setting.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/icons/Delete/TrashGrey.svg b/src/assets/images/icons/Delete/TrashGrey.svg new file mode 100644 index 000000000..3f9aa6d72 --- /dev/null +++ b/src/assets/images/icons/Delete/TrashGrey.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/icons/Edit.svg b/src/assets/images/icons/Edit.svg index 60cfecc24..ee889bbb5 100644 --- a/src/assets/images/icons/Edit.svg +++ b/src/assets/images/icons/Edit.svg @@ -1 +1,11 @@ - Icon/Edit \ No newline at end of file + + + + + + + + + + + diff --git a/src/assets/images/icons/Flow/Copy.svg b/src/assets/images/icons/Flow/Copy.svg new file mode 100644 index 000000000..53b14f18e --- /dev/null +++ b/src/assets/images/icons/Flow/Copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/UI/ImportButton/ImportButton.module.css b/src/components/UI/ImportButton/ImportButton.module.css new file mode 100644 index 000000000..9ad298640 --- /dev/null +++ b/src/components/UI/ImportButton/ImportButton.module.css @@ -0,0 +1,5 @@ +.ImportIcon { + height: 24px; + width: 24px; + margin-right: 10px; +} diff --git a/src/components/UI/ImportButton/ImportButton.tsx b/src/components/UI/ImportButton/ImportButton.tsx index f46dd4bbd..aa5a8e6cc 100644 --- a/src/components/UI/ImportButton/ImportButton.tsx +++ b/src/components/UI/ImportButton/ImportButton.tsx @@ -1,6 +1,7 @@ import { useRef } from 'react'; import { ReactComponent as ImportIcon } from 'assets/images/icons/Flow/Import.svg'; import { Button } from 'components/UI/Form/Button/Button'; +import styles from './ImportButton.module.css'; export interface ImportButtonProps { title: string; @@ -36,10 +37,7 @@ export const ImportButton = ({ title, onImport, afterImport }: ImportButtonProps variant="outlined" color="primary" > - + {title} diff --git a/src/components/UI/Pager/Pager.module.css b/src/components/UI/Pager/Pager.module.css index 7a5887bcb..866326a5b 100644 --- a/src/components/UI/Pager/Pager.module.css +++ b/src/components/UI/Pager/Pager.module.css @@ -5,9 +5,6 @@ position: relative; display: flex !important; background-color: white; - /* border-radius: 12px !important; */ - /* margin-bottom: 12px !important; */ - /* border-bottom: 1px solid #eaedec !important; */ box-shadow: 0px 4px 4px 0px #0000000a; border-bottom: 1px solid #efefef; padding: 4px 13px; @@ -21,13 +18,8 @@ } .TableHeadRow { - display: flex !important; - padding: 0px 16px; - padding-right: 5px; - line-height: 1 !important; - background: #dfece2 !important; - height: 50px !important; - align-items: center; + z-index: 100; + border-radius: '10px'; } .TableCell { @@ -41,7 +33,6 @@ .TableContainer { margin: 14px 24px; - margin-bottom: 50px; border-radius: 10px !important; box-shadow: 0px 4px 8px 0px #00000014; } diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index f4600f72d..f4087cf8f 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -90,7 +90,6 @@ const createRows = ( return ( {entry[item]} @@ -106,7 +105,6 @@ const createRows = ( return ( - {/* ${styles.TableRow} */} {createRow(entry)} {collapseOpen && dataObj && entry.id === collapseRow ? collapsedRowData(dataObj, columnStyles, entry.recordId) @@ -123,18 +121,12 @@ const tableHeadColumns = ( handleTableChange: Function ) => { const headerRow = ( - + {columnNames.map((field: any, i: number) => ( {i !== columnNames.length - 1 && field.name ? ( ) : (
{fallback}
); -const getLabel = (tag: any) => ( -
- {tag ? (tag.label.length > 7 ? tag.label.slice(0, 7) + '..' : tag.label) : 'none'} -
-); +const getLabel = (tag: any) =>
{tag ? tag.label : 'none'}
; const displayPinned = (isPinned: boolean) => { if (isPinned) { @@ -176,7 +172,7 @@ export const FlowList = () => { }); const columnNames = [ - { label: '' }, + { name: 'is_pinned', label: '', sort: true, order: 'desc' }, { name: 'name', label: t('Title') }, { label: t('Last published') }, { label: t('Label') }, diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css index 10e920eac..1c294999a 100644 --- a/src/containers/List/List.module.css +++ b/src/containers/List/List.module.css @@ -1,8 +1,6 @@ .Buttons { - width: 315px; border-color: #e0e0e0; vertical-align: middle; - margin-left: auto; } .Table { @@ -65,7 +63,7 @@ background-color: #f9f7f3; top: 0; display: flex; - padding: 26px 24px 26px 10px; + padding: 22px 24px 22px 10px; z-index: 1000; justify-content: space-between; align-items: center; @@ -162,21 +160,60 @@ .FilterFields { display: flex; align-items: center; - padding: 0 24px; + padding: 0 26px 0 3px; + justify-content: space-between; +} + +.FlexCenter { + display: flex; + align-items: center; justify-content: space-between; } .PopUp { position: absolute; - height: 50px; - width: 140px; - margin-left: 35px; + height: fit-content; + width: 90px; + margin-left: 90px; + margin-top: 4px; background-color: white; border-radius: 4px; - /* border: 1px solid; */ box-shadow: 0px 2px 4px 0px #00000014; + flex-direction: column; + z-index: 10; + border: 1px solid #dddddd91; + border-radius: 6px; +} + +.DividerPopUp { + color: #fdfdfd; + width: 90px; +} + +.IconWithText { + display: flex !important; + align-items: center; + padding: 5px; +} + +.NoTextDecoration { + text-decoration: none !important; +} + +.IconSize { + height: 15px !important; + width: 15px !important; +} + +.TextButton { display: flex; align-items: center; - justify-content: center; - z-index: 10; + color: #777777; + font-size: 15px !important; + width: 55px; + padding: 0 5px; +} + +.Body { + min-height: 300px; } diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index 2b96527bc..74783df9d 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react'; import { Link, Navigate, useSearchParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { useQuery, useMutation, DocumentNode, useLazyQuery } from '@apollo/client'; -import { IconButton, TableFooter, TablePagination, TableRow } from '@mui/material'; +import { Divider, IconButton, TableFooter, TablePagination, TableRow } from '@mui/material'; import { ListCard } from 'containers/List/ListCard/ListCard'; import { Button } from 'components/UI/Form/Button/Button'; import { Loading } from 'components/UI/Layout/Loading/Loading'; @@ -10,7 +10,7 @@ import { Pager } from 'components/UI/Pager/Pager'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import { SearchBar } from 'components/UI/SearchBar/SearchBar'; import { Tooltip } from 'components/UI/Tooltip/Tooltip'; -import { ReactComponent as DeleteIcon } from 'assets/images/icons/Delete/Red.svg'; +import { ReactComponent as DeleteIcon } from 'assets/images/icons/Delete/TrashGrey.svg'; import { ReactComponent as EditIcon } from 'assets/images/icons/Edit.svg'; import { ReactComponent as CrossIcon } from 'assets/images/icons/Cross.svg'; import { ReactComponent as BackIcon } from 'assets/images/icons/Back.svg'; @@ -431,27 +431,37 @@ export const List = ({ let editButton = null; if (editSupport) { editButton = allowedAction.edit && ( - - + +
- +
+ +
Edit
+
- +
); } const deleteButton = (Id: any, text: string) => allowedAction.delete ? ( - showDialogHandler(Id, text)} > - {deleteModifier.icon === 'cross' ? : } + {deleteModifier.icon === 'cross' ? ( + + ) : ( +
+ +
Delete
+
+ )} - + ) : null; if (id) { return ( @@ -507,8 +517,9 @@ export const List = ({ showMoreOptions == id ? ( <> {moreButton} -
+
{editButton} + {deleteButton(id, labelValue)}
@@ -699,7 +710,7 @@ export const List = ({
-
+
{filterList} {filterDropdowm}
From 2df41b6117cc98b65ab3bf0b47cc05e0cfe4c533 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Wed, 26 Jul 2023 15:28:41 +0530 Subject: [PATCH 007/314] Minor Change --- src/assets/images/icons/Pin/Pin.svg | 3 + src/components/UI/Pager/Pager.module.css | 12 +- src/components/UI/Pager/Pager.tsx | 40 ++-- .../UI/SearchBar/SearchBar.module.css | 2 +- .../Flow/FlowList/FlowList.module.css | 30 +-- src/containers/Flow/FlowList/FlowList.tsx | 18 +- src/containers/List/List.module.css | 4 + src/containers/List/List.tsx | 179 +++++++++++------- src/i18n/en/en.json | 3 +- 9 files changed, 184 insertions(+), 107 deletions(-) create mode 100644 src/assets/images/icons/Pin/Pin.svg diff --git a/src/assets/images/icons/Pin/Pin.svg b/src/assets/images/icons/Pin/Pin.svg new file mode 100644 index 000000000..0f1e3bf43 --- /dev/null +++ b/src/assets/images/icons/Pin/Pin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/UI/Pager/Pager.module.css b/src/components/UI/Pager/Pager.module.css index 866326a5b..33b8c61ee 100644 --- a/src/components/UI/Pager/Pager.module.css +++ b/src/components/UI/Pager/Pager.module.css @@ -32,16 +32,17 @@ } .TableContainer { - margin: 14px 24px; + padding: 14px 24px; border-radius: 10px !important; box-shadow: 0px 4px 8px 0px #00000014; + height: 75vh !important; } .TableFooter { border-radius: 0 0 10px 10px; display: flex !important; justify-content: flex-end !important; - width: 100%; + height: 12%; background: #fff; bottom: 0px; right: 4px; @@ -86,3 +87,10 @@ .InactiveRow { color: #ccd4d0 !important; } + +.Body { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index f4087cf8f..bdd7e0ae4 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -14,6 +14,7 @@ import { v4 as uuidv4 } from 'uuid'; import { ColumnNames } from 'containers/List/List'; import styles from './Pager.module.css'; +import Loading from '../Layout/Loading/Loading'; const removeDisplayColumns = ['recordId', 'translations', 'id', 'isActive']; interface PagerProps { @@ -29,7 +30,9 @@ interface PagerProps { sortDirection: 'asc' | 'desc'; }; collapseOpen: boolean; + loadingList?: boolean; collapseRow: string | undefined; + noItemsText?: any; } // create a collapsible row @@ -90,6 +93,7 @@ const createRows = ( return ( {entry[item]} @@ -187,30 +191,38 @@ export const Pager = ({ totalRows, collapseOpen, collapseRow, + loadingList = false, + noItemsText, }: PagerProps) => { const rows = createRows(data, columnStyles, collapseRow, collapseOpen); const tableHead = tableHeadColumns(columnNames, columnStyles, tableVals, handleTableChange); const tablePagination = pagination(columnNames, totalRows, handleTableChange, tableVals); + const styleForContainer = { + minHeight: '87%', + maxHeight: '87%', + background: '#fff', + overflowY: 'scroll', + scrollbarWidth: 'none', + borderRadius: '10px 10px 0 0', + '&::-webkit-scrollbar': { + width: 0, + }, + }; + return (
- + {tableHead} - {rows} + {!loadingList && data?.length > 0 && rows}
+ {loadingList && ( +
+ +
+ )} + {!loadingList && data?.length == 0 &&
{noItemsText}
} {tablePagination} diff --git a/src/components/UI/SearchBar/SearchBar.module.css b/src/components/UI/SearchBar/SearchBar.module.css index 92b23ab77..227dd7b3f 100644 --- a/src/components/UI/SearchBar/SearchBar.module.css +++ b/src/components/UI/SearchBar/SearchBar.module.css @@ -14,7 +14,7 @@ padding: 0 18px; border-radius: 24px; display: flex; - width: 176px; + width: 90%; margin: auto; margin-top: 14px; margin-bottom: 12px; diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css index 0684a7785..2de846e5e 100644 --- a/src/containers/Flow/FlowList/FlowList.module.css +++ b/src/containers/Flow/FlowList/FlowList.module.css @@ -15,16 +15,16 @@ .Name { width: 25%; min-width: 200px; + padding-left: 12px; } .Pinned { - width: 3%; - /* align-items: center; */ + padding-left: 20px; + width: 4%; } .Label { - width: 15%; - /* align-items: center; */ + width: 14%; } .Actions { @@ -61,12 +61,12 @@ .LastPublished { padding-top: 12px; - text-align: left; - font-size: 16px; - color: #93a29b; - line-height: 1.25; + font-size: 15px; + line-height: 20px; + color: #555555; white-space: pre-line; margin: 0; + font-weight: 400; } .Links { @@ -115,17 +115,18 @@ } .NameText { - text-align: left; padding: 12px 0px; - line-height: 1.25; + line-height: 20px; margin: 0; - font-size: 20px !important; + font-size: 17px !important; word-break: break-all; + color: #191c1a !important; + font-weight: 500; } .Keyword { font-size: 12px; - color: #93a29b !important; + color: #555555 !important; } .DateColumn { @@ -186,3 +187,8 @@ .RadioLabel { margin-right: 24px; } + +.IconSize { + height: 15px !important; + width: 15px !important; +} diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index 38c0267be..47e73ac45 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -10,7 +10,7 @@ import { ReactComponent as DuplicateIcon } from 'assets/images/icons/Flow/Copy.s import { ReactComponent as ExportIcon } from 'assets/images/icons/Flow/Export.svg'; import { FormControl, MenuItem, Select } from '@mui/material'; import { ReactComponent as ConfigureIcon } from 'assets/images/icons/Configure/Setting.svg'; -import { ReactComponent as PinIcon } from 'assets/images/icons/Pin/Active.svg'; +import { ReactComponent as PinIcon } from 'assets/images/icons/Pin/Pin.svg'; import { FILTER_FLOW, GET_FLOW_COUNT, EXPORT_FLOW, RELEASE_FLOW } from 'graphql/queries/Flow'; import { DELETE_FLOW, IMPORT_FLOW } from 'graphql/mutations/Flow'; import { List } from 'containers/List/List'; @@ -28,14 +28,14 @@ const getName = (text: string, keywordsList: any, roles: any) => { const accessRoles = roles && roles.map((role: any) => role.label); const hasDynamicRole = organizationHasDynamicRole(); return ( -

+

{text}
{keywords.join(', ')} {hasDynamicRole && ( {accessRoles && accessRoles.join(', ')} )} -

+
); }; @@ -140,18 +140,22 @@ export const FlowList = () => { icon: configureIcon, parameter: 'uuid', link: '/flow/configure', + isMoreOption: false, }, { label: t('Make a copy'), icon: , parameter: 'id', dialog: setDialog, + isMoreOption: false, }, { label: t('Export flow'), - icon: , + icon: , parameter: 'id', dialog: exportFlow, + isMoreOption: true, + name: 'Export', }, ]; @@ -263,10 +267,8 @@ export const FlowList = () => { ...(selectedtag?.id && { tagIds: [parseInt(selectedtag?.id)] }), }; - if (importing) { - return ; - } const addIcon = ; + const flowLink = 'https://glific.org/'; return ( { listItemName="flow" pageLink="flow" listIcon={flowIcon} + listLink={flowLink} dialogMessage={dialogMessage} {...queries} {...columnAttributes} @@ -285,6 +288,7 @@ export const FlowList = () => { filterList={activeFilter} filtersTag={selectedtag && selectedtag.id} filterDropdowm={tagFilter} + loadingList={importing} /> ); }; diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css index 1c294999a..16e519c2c 100644 --- a/src/containers/List/List.module.css +++ b/src/containers/List/List.module.css @@ -37,6 +37,7 @@ margin-left: 10px !important; height: 18px; width: 18px; + cursor: pointer; } .DropdownButton { @@ -68,6 +69,7 @@ justify-content: space-between; align-items: center; border-radius: 10px; + height: 15%; } .Icon { @@ -162,6 +164,7 @@ align-items: center; padding: 0 26px 0 3px; justify-content: space-between; + height: 10% !important; } .FlexCenter { @@ -216,4 +219,5 @@ .Body { min-height: 300px; + height: 75% !important; } diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index 74783df9d..a6e9ab394 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -31,6 +31,7 @@ export interface ColumnNames { } export interface ListProps { + loadingList?: boolean; helperText?: string; columnNames?: Array; countQuery: DocumentNode; @@ -42,6 +43,7 @@ export interface ListProps { pageLink: string; columns: Function; listIcon: React.ReactNode; + listLink?: any; columnStyles: Array; secondaryButton?: any; title: string; @@ -94,6 +96,7 @@ interface TableVals { } export const List = ({ + loadingList = false, columnNames = [], countQuery, listItem, @@ -101,6 +104,7 @@ export const List = ({ deleteItemQuery, listItemName, dialogMessage = '', + listLink = '', secondaryButton, pageLink, columns, @@ -377,7 +381,6 @@ export const List = ({ return ; } - if (loading || l || loadingCollections) return ; if (error || e) { if (error) { setErrorMessage(error); @@ -420,7 +423,7 @@ export const List = ({ } }} > - +
@@ -433,12 +436,10 @@ export const List = ({ editButton = allowedAction.edit && (
- -
- -
Edit
-
- +
+ +
Edit
+
); @@ -451,63 +452,61 @@ export const List = ({ data-testid="DeleteIcon" onClick={() => showDialogHandler(Id, text)} > - - {deleteModifier.icon === 'cross' ? ( - - ) : ( -
- -
Delete
-
- )} - + {deleteModifier.icon === 'cross' ? ( + + ) : ( +
+ +
Delete
+
+ )}
) : null; + if (id) { return (
{additionalAction(item).map((action: any, index: number) => { - if (allowedAction.restricted) { - return null; - } - // check if we are dealing with nested element - let additionalActionParameter: any; - const params: any = action.parameter.split('.'); - if (params.length > 1) { - additionalActionParameter = item[params[0]][params[1]]; - } else { - additionalActionParameter = item[params[0]]; - } - const key = index; - - if (action.link) { - return ( - - - + if (!action?.isMoreOption) { + // check if we are dealing with nested element + let additionalActionParameter: any; + const params: any = action.parameter.split('.'); + if (params.length > 1) { + additionalActionParameter = item[params[0]][params[1]]; + } else { + additionalActionParameter = item[params[0]]; + } + const key = index; + + if (action.link) { + return ( + + + + {action.icon} + + + + ); + } + if (action.dialog) { + return ( + action.dialog(additionalActionParameter, item)} + key={key} + > + {action.icon} - - ); - } - if (action.dialog) { - return ( - action.dialog(additionalActionParameter, item)} - key={key} - > - - {action.icon} - - - ); - } - if (action.button) { - return action.button(item, action, key, fetchQuery); + ); + } + if (action.button) { + return action.button(item, action, key, fetchQuery); + } } return null; })} @@ -521,6 +520,36 @@ export const List = ({ {editButton} {deleteButton(id, labelValue)} + {additionalAction(item).map((action: any, index: number) => { + if (action?.isMoreOption) { + let additionalActionParameter: any; + const params: any = action.parameter.split('.'); + if (params.length > 1) { + additionalActionParameter = item[params[0]][params[1]]; + } else { + additionalActionParameter = item[params[0]]; + } + const key = index; + + return ( + <> + +
action.dialog(additionalActionParameter, item)} + key={key} + > +
+ {action.icon} +
{action.name}
+
+
+ + ); + } + return null; + })}
) : ( @@ -584,6 +613,20 @@ export const List = ({ if (countData) { itemCount = countData[`count${listItem[0].toUpperCase()}${listItem.slice(1)}`]; } + + var noItemsText = ( +
+ {searchVal ? ( +
{t('Sorry, no results found! Please try a different search.')}
+ ) : ( +
+ There are no {noItemText || listItemName}s right now.{' '} + {button.show && t('Please create one.')} +
+ )} +
+ ); + let displayList; if (displayListType === 'list') { displayList = ( @@ -596,6 +639,8 @@ export const List = ({ tableVals={tableVals} collapseOpen={collapseOpen} collapseRow={collapseRow} + loadingList={loadingList || loading || l || loadingCollections ? true : false} + noItemsText={noItemsText} /> ); } else if (displayListType === 'card') { @@ -672,20 +717,14 @@ export const List = ({ buttonDisplay =
{buttonContent}
; } - const noItemsText = ( -
- {searchVal ? ( -
{t('Sorry, no results found! Please try a different search.')}
- ) : ( -
- There are no {noItemText || listItemName}s right now.{' '} - {button.show && t('Please create one.')} -
- )} -
+ const infoIcon = ( + { + window.location.replace(listLink ? listLink : 'https://glific.org/'); + }} + /> ); - - const infoIcon = ; const headerText = (
{`Please go through all the ${title} added below`}
); @@ -734,7 +773,7 @@ export const List = ({
{backLink} {/* Rendering list of items */} - {itemList.length > 0 ? displayList : noItemsText} + {displayList}
); diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json index eced6a28c..374a77188 100644 --- a/src/i18n/en/en.json +++ b/src/i18n/en/en.json @@ -417,5 +417,6 @@ "Select Label": "Select Label", "View profile": "View profile", "Copy UUID": "Copy UUID", - "Org Id": "Org Id" + "Org Id": "Org Id", + "More": "More" } From b19e71bbd46fba55ed68bcabca5712564f5c2bbd Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Wed, 26 Jul 2023 15:35:24 +0530 Subject: [PATCH 008/314] Resolved deepscan issues --- src/components/UI/Pager/Pager.tsx | 4 ++-- src/containers/Flow/FlowList/FlowList.tsx | 1 - src/containers/List/List.tsx | 6 ++---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index bdd7e0ae4..fddc5b0be 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -215,14 +215,14 @@ export const Pager = ({ {tableHead} - {!loadingList && data?.length > 0 && rows} + {!loadingList && data.length > 0 && rows}
{loadingList && (
)} - {!loadingList && data?.length == 0 &&
{noItemsText}
} + {!loadingList && data.length == 0 &&
{noItemsText}
} {tablePagination} diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index 5b7a6a926..eb3526027 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -15,7 +15,6 @@ import { FILTER_FLOW, GET_FLOW_COUNT, EXPORT_FLOW, RELEASE_FLOW } from 'graphql/ import { DELETE_FLOW, IMPORT_FLOW } from 'graphql/mutations/Flow'; import { List } from 'containers/List/List'; import { ImportButton } from 'components/UI/ImportButton/ImportButton'; -import Loading from 'components/UI/Layout/Loading/Loading'; import { DATE_TIME_FORMAT } from 'common/constants'; import { exportFlowMethod, organizationHasDynamicRole } from 'common/utils'; import { setNotification } from 'common/notification'; diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index a6e9ab394..d9c01906b 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -5,7 +5,6 @@ import { useQuery, useMutation, DocumentNode, useLazyQuery } from '@apollo/clien import { Divider, IconButton, TableFooter, TablePagination, TableRow } from '@mui/material'; import { ListCard } from 'containers/List/ListCard/ListCard'; import { Button } from 'components/UI/Form/Button/Button'; -import { Loading } from 'components/UI/Layout/Loading/Loading'; import { Pager } from 'components/UI/Pager/Pager'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import { SearchBar } from 'components/UI/SearchBar/SearchBar'; @@ -532,20 +531,19 @@ export const List = ({ const key = index; return ( - <> +
action.dialog(additionalActionParameter, item)} - key={key} >
{action.icon}
{action.name}
- +
); } return null; From 2e533387ad1458ff131d53746cab09c10eaa274e Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Thu, 27 Jul 2023 16:58:47 +0530 Subject: [PATCH 009/314] Minor change --- .../Form/AutoComplete/AutoComplete.module.css | 2 +- src/components/UI/Pager/Pager.tsx | 8 +++++- .../Flow/FlowList/FlowList.module.css | 4 ++- src/containers/Flow/FlowList/FlowList.tsx | 2 +- src/containers/List/List.module.css | 11 ++++++-- src/containers/List/List.tsx | 27 ++++++++++++------- 6 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/components/UI/Form/AutoComplete/AutoComplete.module.css b/src/components/UI/Form/AutoComplete/AutoComplete.module.css index 0a673de09..e0e00b16f 100644 --- a/src/components/UI/Form/AutoComplete/AutoComplete.module.css +++ b/src/components/UI/Form/AutoComplete/AutoComplete.module.css @@ -1,7 +1,7 @@ .Input { display: flex; padding: 8px 0px; - min-width: 180px; + min-width: 150px; } .Input label { diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index fddc5b0be..5a457fc4a 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -129,7 +129,13 @@ const tableHeadColumns = ( {columnNames.map((field: any, i: number) => ( {i !== columnNames.length - 1 && field.name ? ( diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css index 2de846e5e..45b8e1869 100644 --- a/src/containers/Flow/FlowList/FlowList.module.css +++ b/src/containers/Flow/FlowList/FlowList.module.css @@ -145,7 +145,9 @@ .LabelButton { height: 32px; - width: 84px; + width: fit-content; + min-width: 80px; + padding: 6px 12px; background: #f0f7f1; color: #555555; font-weight: 500; diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index eb3526027..47093d325 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -242,7 +242,7 @@ export const FlowList = () => { const tagFilter = ( { const { t } = useTranslation(); const [showMoreOptions, setShowMoreOptions] = useState(''); + + const onBlur = () => { + const concernedElement: any = document.querySelector('.DropDownClass'); + + document.addEventListener('mousedown', (event: any) => { + if (!concernedElement?.contains(event.target) && showMoreOptions != '') { + setShowMoreOptions(''); + } + }); + }; + // DialogBox states const [deleteItemID, setDeleteItemID] = useState(null); const [deleteItemName, setDeleteItemName] = useState(''); @@ -464,7 +475,7 @@ export const List = ({ if (id) { return ( -
+
{additionalAction(item).map((action: any, index: number) => { if (!action?.isMoreOption) { // check if we are dealing with nested element @@ -512,10 +523,10 @@ export const List = ({ {/* do not display edit & delete for staff role in collection */} {userRolePermissions.manageCollections || item !== 'collections' ? ( - showMoreOptions == id ? ( - <> - {moreButton} -
+
+ {moreButton} + {showMoreOptions == id && ( +
{editButton} {deleteButton(id, labelValue)} @@ -549,10 +560,8 @@ export const List = ({ return null; })}
- - ) : ( - <>{moreButton} - ) + )} +
) : null}
); From 7fed1f503efed201cbada4268aaebe4568ceeabb Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Thu, 27 Jul 2023 17:20:30 +0530 Subject: [PATCH 010/314] Minor Change --- src/containers/Flow/FlowList/FlowList.module.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css index 45b8e1869..e7c150a10 100644 --- a/src/containers/Flow/FlowList/FlowList.module.css +++ b/src/containers/Flow/FlowList/FlowList.module.css @@ -13,14 +13,14 @@ } .Name { - width: 25%; + width: 27%; min-width: 200px; padding-left: 12px; } .Pinned { padding-left: 20px; - width: 4%; + width: 5%; } .Label { @@ -28,7 +28,7 @@ } .Actions { - width: 20%; + width: 15%; padding-right: 40px; min-width: 200px; text-align: end; @@ -115,7 +115,7 @@ } .NameText { - padding: 12px 0px; + padding: 14px 0px; line-height: 20px; margin: 0; font-size: 17px !important; @@ -130,7 +130,7 @@ } .DateColumn { - width: 18.5%; + width: 19.5%; min-width: 120px; } From 269cbc53e95930aa86b81d2c1a9281e30975f198 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Fri, 28 Jul 2023 19:40:03 +0530 Subject: [PATCH 011/314] Updated UI of Speed send page --- .../images/icons/LanguageTranslation.svg | 3 +++ src/components/UI/Pager/Pager.module.css | 10 ++----- src/components/UI/Pager/Pager.tsx | 12 ++++----- src/containers/List/List.module.css | 7 +++++ src/containers/List/List.tsx | 5 ++++ .../Template/List/Template.module.css | 27 ++++++++++++------- src/containers/Template/List/Template.tsx | 5 ++-- 7 files changed, 43 insertions(+), 26 deletions(-) create mode 100644 src/assets/images/icons/LanguageTranslation.svg diff --git a/src/assets/images/icons/LanguageTranslation.svg b/src/assets/images/icons/LanguageTranslation.svg new file mode 100644 index 000000000..dea08db0f --- /dev/null +++ b/src/assets/images/icons/LanguageTranslation.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/UI/Pager/Pager.module.css b/src/components/UI/Pager/Pager.module.css index 33b8c61ee..639724c6d 100644 --- a/src/components/UI/Pager/Pager.module.css +++ b/src/components/UI/Pager/Pager.module.css @@ -11,12 +11,6 @@ padding-right: 5px; } -.CollapseTableRow { - composes: TableRow; - margin-top: -20px !important; - border-radius: 0 0 12px 12px !important; -} - .TableHeadRow { z-index: 100; border-radius: '10px'; @@ -63,7 +57,7 @@ margin-right: 23px; text-align: left; padding: 12px 0px; - font-size: 16px; + font-size: 14px; color: #93a29b; line-height: 1.25; white-space: pre-line; @@ -73,7 +67,7 @@ .LabelText { display: flex; font-weight: 500; - font-size: 20px; + font-size: 18px; color: #073f24; margin-top: 12px; margin-bottom: 12px; diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index 5a457fc4a..07447690a 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -54,19 +54,19 @@ const collapsedRowData = (dataObj: any, columnStyles: any, recordId: any) => { const rowIdentifier = `collapsedRowData-${recordId}-${index}`; return ( - - + +
{dataObj[key].label}
 - +

{dataObj[key].body}

 - - + + ); }); @@ -131,7 +131,7 @@ const tableHeadColumns = ( key={uuidv4()} sx={{ backgroundColor: '#dfece2', - color: '#0c1f14', + color: 'rgba(12, 31, 20, 0.57)', zIndex: 100, paddingLeft: 0, paddingRight: 0, diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css index cc6e9bc74..9ba655d81 100644 --- a/src/containers/List/List.module.css +++ b/src/containers/List/List.module.css @@ -228,3 +228,10 @@ min-height: 300px; height: 75% !important; } + +.TextList { + color: #555555; + font-weight: 400; + font-size: 14px; + margin-left: 20px; +} diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index b027dc2ef..f0d80cf78 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -759,6 +759,11 @@ export const List = ({
{filterList} {filterDropdowm} + {!filterList && !filterDropdowm && ( +
+ {`${itemList.length + ' ' + title} are currently listed below`} +
+ )}
( const getTranslations = (language: any, data: string) => { const dataObj = JSON.parse(data); + console.log('dataObj', dataObj); if (Object.prototype.hasOwnProperty.call(dataObj, language.id)) { delete dataObj[language.id]; } @@ -176,7 +177,7 @@ export const Template = ({ columnNames.push({ label: t('Actions') }); - let columnStyles: any = [styles.Label, styles.Body]; + let columnStyles: any = [styles.Name, styles.Body]; columnStyles = isHSM ? [...columnStyles, styles.Status, ...(filters.REJECTED ? [styles.Reason] : []), styles.Actions] From 954ca64bd930ff53e15d2864068539b0fd3369a2 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Sat, 29 Jul 2023 00:25:07 +0530 Subject: [PATCH 012/314] Update Trigger page UI --- .../Flow/FlowList/FlowList.module.css | 1 - .../Template/List/Template.module.css | 9 +--- .../TriggerList/TriggerList.module.css | 43 +++++++++++-------- .../Trigger/TriggerList/TriggerList.tsx | 2 +- 4 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css index e7c150a10..4ebf5e2e9 100644 --- a/src/containers/Flow/FlowList/FlowList.module.css +++ b/src/containers/Flow/FlowList/FlowList.module.css @@ -60,7 +60,6 @@ } .LastPublished { - padding-top: 12px; font-size: 15px; line-height: 20px; color: #555555; diff --git a/src/containers/Template/List/Template.module.css b/src/containers/Template/List/Template.module.css index 94a6fb15b..0bb839730 100644 --- a/src/containers/Template/List/Template.module.css +++ b/src/containers/Template/List/Template.module.css @@ -11,7 +11,7 @@ .Body { width: 36%; min-width: 200px; - padding: 0 4%; + padding: 6px 2%; word-break: break-word; } @@ -30,12 +30,8 @@ } .LabelText { - display: flex; font-weight: 500; - font-size: 20px; - margin-top: 12px; - margin-bottom: 6px; - line-height: 1; + font-size: 17px; word-break: break-all; } @@ -62,7 +58,6 @@ .LastModified { width: 20%; min-width: 185px; - padding-top: 12px; color: #93a29b; } diff --git a/src/containers/Trigger/TriggerList/TriggerList.module.css b/src/containers/Trigger/TriggerList/TriggerList.module.css index 8dba72142..6b952e0d4 100644 --- a/src/containers/Trigger/TriggerList/TriggerList.module.css +++ b/src/containers/Trigger/TriggerList/TriggerList.module.css @@ -1,11 +1,12 @@ .EndDate { - min-width: 110px; - width: 15%; + min-width: 100px; + width: 22%; } .Name { - min-width: 290px; - width: 40%; + width: 33%; + min-width: 250px; + padding: 6px 0 6px 20px; } .Collections { @@ -19,32 +20,36 @@ } .LabelText { - display: flex; - font-weight: 500; - font-size: 20px; word-break: break-all; - margin-top: 12px; - margin-bottom: 12px; - line-height: 1; + padding: 14px 0px; + margin: 0; + font-size: 17px !important; + word-break: break-all; + color: #191c1a !important; + font-weight: 500; } .EndDateVal { - padding-top: 12px; - color: #93a29b; - font-size: 17px; + font-size: 15px; + color: #555555; + white-space: pre-line; + margin: 0; + font-weight: 400; } .Collection { - padding-top: 12px; - color: #93a29b; - font-size: 17px; + font-size: 15px; + color: #555555; + white-space: pre-line; + margin: 0; + font-weight: 400; } .Actions { - min-width: 150px; width: 25%; - justify-content: flex-end; - margin-left: auto; + padding-right: 40px; + min-width: 170px; + text-align: end; } .TriggerIcon { diff --git a/src/containers/Trigger/TriggerList/TriggerList.tsx b/src/containers/Trigger/TriggerList/TriggerList.tsx index 2476d205f..22e7f6f2c 100644 --- a/src/containers/Trigger/TriggerList/TriggerList.tsx +++ b/src/containers/Trigger/TriggerList/TriggerList.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { ReactComponent as TriggerIcon } from 'assets/images/icons/Trigger/Union.svg'; import { ReactComponent as ClockIcon } from 'assets/images/icons/Trigger/Clock.svg'; import { ReactComponent as ClockInactiveIcon } from 'assets/images/icons/Trigger/Inactive.svg'; -import { ReactComponent as DuplicateIcon } from 'assets/images/icons/Flow/Duplicate.svg'; +import { ReactComponent as DuplicateIcon } from 'assets/images/icons/Flow/Copy.svg'; import { TRIGGER_LIST_QUERY, TRIGGER_QUERY_COUNT } from 'graphql/queries/Trigger'; import { DELETE_TRIGGER } from 'graphql/mutations/Trigger'; import { FULL_DATE_FORMAT, dayList } from 'common/constants'; From c0ef40b74d2023246c9551b1b140fedb9d6a2c19 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Sat, 29 Jul 2023 10:28:28 +0530 Subject: [PATCH 013/314] Update Search Page UI --- .../Search/SearchList/SearchList.module.css | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/containers/Search/SearchList/SearchList.module.css b/src/containers/Search/SearchList/SearchList.module.css index e29e4935d..d697a2c96 100644 --- a/src/containers/Search/SearchList/SearchList.module.css +++ b/src/containers/Search/SearchList/SearchList.module.css @@ -1,35 +1,37 @@ .Shortcode { - width: 180px; + padding-left: 4%; + width: 35%; + min-width: 180px; } .Name { - width: 291px; + width: 40%; + min-width: 291px; } .Actions { - width: 150px; - justify-content: flex-end; - margin-left: auto; + width: 25%; + min-width: 150px; + text-align: end; + padding-right: 4%; } .LabelText { - display: flex; + word-break: break-all; + padding: 14px 0px; + margin: 0; + font-size: 17px !important; + word-break: break-all; + color: #191c1a !important; font-weight: 500; - font-size: 20px; - color: #073f24; - margin-top: 12px; - margin-bottom: 12px; - line-height: 1; } .TableText { - margin-right: 23px; - text-align: left; - padding: 12px 0px; - font-size: 16px; - color: #93a29b; - line-height: 1.25; + font-size: 15px; + color: #555555; + white-space: pre-line; margin: 0; + font-weight: 400; } .Icon { From f0b6fa6e922de91aeabbb0a957890256b3bb723f Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Sat, 29 Jul 2023 10:56:15 +0530 Subject: [PATCH 014/314] Updated Table --- src/components/UI/Pager/Pager.module.css | 7 +++---- src/components/UI/Pager/Pager.tsx | 9 ++++++--- src/containers/List/List.module.css | 8 ++++---- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/UI/Pager/Pager.module.css b/src/components/UI/Pager/Pager.module.css index 639724c6d..282830a41 100644 --- a/src/components/UI/Pager/Pager.module.css +++ b/src/components/UI/Pager/Pager.module.css @@ -27,16 +27,15 @@ .TableContainer { padding: 14px 24px; - border-radius: 10px !important; - box-shadow: 0px 4px 8px 0px #00000014; - height: 75vh !important; + overflow: hidden; + height: calc(100vh - 200px) !important; } .TableFooter { border-radius: 0 0 10px 10px; display: flex !important; justify-content: flex-end !important; - height: 12%; + height: 50px; background: #fff; bottom: 0px; right: 4px; diff --git a/src/components/UI/Pager/Pager.tsx b/src/components/UI/Pager/Pager.tsx index 07447690a..2a37bfe89 100644 --- a/src/components/UI/Pager/Pager.tsx +++ b/src/components/UI/Pager/Pager.tsx @@ -131,7 +131,7 @@ const tableHeadColumns = ( key={uuidv4()} sx={{ backgroundColor: '#dfece2', - color: 'rgba(12, 31, 20, 0.57)', + color: 'rgba(12, 31, 20, 0.57) !important', zIndex: 100, paddingLeft: 0, paddingRight: 0, @@ -153,6 +153,9 @@ const tableHeadColumns = ( ); } }} + sx={{ + color: 'rgba(12, 31, 20, 0.57) !important', + }} > {field.label} @@ -205,8 +208,8 @@ export const Pager = ({ const tablePagination = pagination(columnNames, totalRows, handleTableChange, tableVals); const styleForContainer = { - minHeight: '87%', - maxHeight: '87%', + minHeight: 'calc(100% - 50px)', + maxHeight: 'calc(100% - 50px)', background: '#fff', overflowY: 'scroll', scrollbarWidth: 'none', diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css index 9ba655d81..0df851f45 100644 --- a/src/containers/List/List.module.css +++ b/src/containers/List/List.module.css @@ -69,7 +69,7 @@ justify-content: space-between; align-items: center; border-radius: 10px; - height: 15%; + height: 110px !important; } .Icon { @@ -166,7 +166,7 @@ align-items: center; padding: 0 26px 0 3px; justify-content: space-between; - height: 10% !important; + height: 80px !important; } .FlexCenter { @@ -225,8 +225,8 @@ } .Body { - min-height: 300px; - height: 75% !important; + min-height: calc(100vh - 200px); + height: calc(100vh - 200px) !important; } .TextList { From de62c7971338c578746047b3be8731479b129b58 Mon Sep 17 00:00:00 2001 From: nishant25062002 Date: Sat, 29 Jul 2023 16:12:11 +0530 Subject: [PATCH 015/314] Updated templates page ui --- src/assets/images/icons/Template/Approved.svg | 14 +-- src/containers/List/List.module.css | 6 +- src/containers/List/List.tsx | 3 + .../Template/List/HSMList/HSMList.module.css | 12 +-- .../Template/List/HSMList/HSMList.tsx | 46 ++++----- .../Template/List/Template.module.css | 38 +++++--- src/containers/Template/List/Template.tsx | 93 ++++++++++--------- 7 files changed, 114 insertions(+), 98 deletions(-) diff --git a/src/assets/images/icons/Template/Approved.svg b/src/assets/images/icons/Template/Approved.svg index 2f0112c81..0c1a2e3a8 100644 --- a/src/assets/images/icons/Template/Approved.svg +++ b/src/assets/images/icons/Template/Approved.svg @@ -1,10 +1,4 @@ - - - Icon/Approved - - - - - - - \ No newline at end of file + + + + diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css index 0df851f45..e82ff18df 100644 --- a/src/containers/List/List.module.css +++ b/src/containers/List/List.module.css @@ -1,6 +1,7 @@ .Buttons { + display: flex; + align-items: center; border-color: #e0e0e0; - vertical-align: middle; } .Table { @@ -51,7 +52,6 @@ height: 80%; text-transform: capitalize; border-radius: 20px; - margin-left: 24px; } .AddButton a { @@ -164,7 +164,7 @@ .FilterFields { display: flex; align-items: center; - padding: 0 26px 0 3px; + padding: 0 26px 0 18px; justify-content: space-between; height: 80px !important; } diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx index f0d80cf78..960d9bb8e 100644 --- a/src/containers/List/List.tsx +++ b/src/containers/List/List.tsx @@ -85,6 +85,7 @@ export interface ListProps { defaultSortBy?: string | null; noItemText?: string | null; customStyles?: any; + syncHSMButton?: any; } interface TableVals { @@ -130,6 +131,7 @@ export const List = ({ collapseRow = undefined, noItemText = null, customStyles, + syncHSMButton, }: ListProps) => { const { t } = useTranslation(); const [showMoreOptions, setShowMoreOptions] = useState(''); @@ -766,6 +768,7 @@ export const List = ({ )}
+ {syncHSMButton} { diff --git a/src/containers/Template/List/HSMList/HSMList.module.css b/src/containers/Template/List/HSMList/HSMList.module.css index 678716ba9..53ed4a94b 100644 --- a/src/containers/Template/List/HSMList/HSMList.module.css +++ b/src/containers/Template/List/HSMList/HSMList.module.css @@ -4,12 +4,12 @@ } .HsmUpdates { - position: fixed !important; - bottom: 6px; - left: 260px; - z-index: 1000; font-weight: 500; - display: flex; - align-items: center; cursor: pointer; + height: 36px; + border: 1px solid #cccccc; + background: #ffffff; + box-shadow: none; + font-size: 14px; + color: #2ea36a; } diff --git a/src/containers/Template/List/HSMList/HSMList.tsx b/src/containers/Template/List/HSMList/HSMList.tsx index d0e6b9333..dc32cc4a2 100644 --- a/src/containers/Template/List/HSMList/HSMList.tsx +++ b/src/containers/Template/List/HSMList/HSMList.tsx @@ -37,30 +37,30 @@ export const HSMList = () => { if (syncTemplateLoad) { return ; } - + const syncHSMButton = ( + + ); return ( - <> -