From ffa89d6035f20e12f8273dcfa1980b17f7dea87a Mon Sep 17 00:00:00 2001 From: abhishek Date: Tue, 30 Jan 2024 14:13:08 +0530 Subject: [PATCH 1/4] [#1093] style debugging --- frontend/src/pages/submissions/UploadDetail.jsx | 11 ++++++++++- frontend/src/pages/submissions/style.scss | 7 ++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/submissions/UploadDetail.jsx b/frontend/src/pages/submissions/UploadDetail.jsx index b4a279bff..2566b8774 100644 --- a/frontend/src/pages/submissions/UploadDetail.jsx +++ b/frontend/src/pages/submissions/UploadDetail.jsx @@ -92,6 +92,7 @@ const UploadDetail = ({ record, setReload }) => { const { user } = store.useState((state) => state); const { language } = store.useState((s) => s); const { active: activeLang } = language; + const [expandedKeys, setexpandedKeys] = useState([]); const text = useMemo(() => { return uiText[activeLang]; }, [activeLang]); @@ -342,6 +343,11 @@ const UploadDetail = ({ record, setReload }) => { ); }; + const onRow = ({ key }) => + expandedRowKeys.includes(key) && { className: "sticky" }; + + console.log(expandedRowKeys, "expandedRowKeys"); + const isEditable = (record.approvers || []).filter((a) => a.status_text === "Rejected") .length > 0 && user?.role?.id === 4; @@ -357,11 +363,12 @@ const UploadDetail = ({ record, setReload }) => { loading={loading} dataSource={selectedTab === "raw-data" ? rawValues : values} columns={columns} + onRow={onRow} rowClassName={(record) => (record.newValue || record.newValue === 0) && !isEqual(record.value, record.newValue) ? "row-edited" - : "row-normal" + : "row-normal sticky" } style={{ borderBottom: "solid 1px #ddd" }} rowKey="id" @@ -486,6 +493,8 @@ const UploadDetail = ({ record, setReload }) => { } : false } + sticky={true} + scroll={{ x: 950, y: "calc(100vh - 220px)" }} />

{text.notesFeedback}

{!!comments.length && ( diff --git a/frontend/src/pages/submissions/style.scss b/frontend/src/pages/submissions/style.scss index 534a6f79a..62c53f7bd 100644 --- a/frontend/src/pages/submissions/style.scss +++ b/frontend/src/pages/submissions/style.scss @@ -33,7 +33,12 @@ color: $color-default; vertical-align: top; } - + .sticky { + position: sticky; + top: 0; + left: 0; + z-index: 1; + } .ant-table-cell:nth-child(2) { .ant-row { justify-content: flex-start; From 27a1533b7f0e39378cadac85dceacee30365fe74 Mon Sep 17 00:00:00 2001 From: abhishek Date: Tue, 30 Jan 2024 19:55:28 +0530 Subject: [PATCH 2/4] [#1093] header row made sticky --- frontend/src/pages/approvals/ApprovalDetail.jsx | 4 +++- frontend/src/pages/approvals/style.scss | 6 ++++++ frontend/src/pages/submissions/UploadDetail.jsx | 9 --------- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/frontend/src/pages/approvals/ApprovalDetail.jsx b/frontend/src/pages/approvals/ApprovalDetail.jsx index e8effac0a..40e36049f 100644 --- a/frontend/src/pages/approvals/ApprovalDetail.jsx +++ b/frontend/src/pages/approvals/ApprovalDetail.jsx @@ -400,7 +400,9 @@ const ApprovalDetail = ({ columns={columns} scroll={{ y: 500 }} pagination={false} - rowClassName={(record) => (record.edited ? "row-edited" : "row-normal")} + rowClassName={(record) => + record.edited ? "row-edited" : "row-normal sticky" + } style={{ borderBottom: "solid 1px #ddd" }} rowKey="id" expandable={ diff --git a/frontend/src/pages/approvals/style.scss b/frontend/src/pages/approvals/style.scss index 142967109..4f99520a6 100644 --- a/frontend/src/pages/approvals/style.scss +++ b/frontend/src/pages/approvals/style.scss @@ -17,6 +17,12 @@ .ant-table-tbody { .ant-table-row { + .sticky { + position: sticky; + top: 0; + left: 0; + z-index: 1; + } .ant-table-cell:first-child { color: $color-default; vertical-align: top; diff --git a/frontend/src/pages/submissions/UploadDetail.jsx b/frontend/src/pages/submissions/UploadDetail.jsx index 2566b8774..af552f71e 100644 --- a/frontend/src/pages/submissions/UploadDetail.jsx +++ b/frontend/src/pages/submissions/UploadDetail.jsx @@ -92,7 +92,6 @@ const UploadDetail = ({ record, setReload }) => { const { user } = store.useState((state) => state); const { language } = store.useState((s) => s); const { active: activeLang } = language; - const [expandedKeys, setexpandedKeys] = useState([]); const text = useMemo(() => { return uiText[activeLang]; }, [activeLang]); @@ -343,11 +342,6 @@ const UploadDetail = ({ record, setReload }) => { ); }; - const onRow = ({ key }) => - expandedRowKeys.includes(key) && { className: "sticky" }; - - console.log(expandedRowKeys, "expandedRowKeys"); - const isEditable = (record.approvers || []).filter((a) => a.status_text === "Rejected") .length > 0 && user?.role?.id === 4; @@ -363,7 +357,6 @@ const UploadDetail = ({ record, setReload }) => { loading={loading} dataSource={selectedTab === "raw-data" ? rawValues : values} columns={columns} - onRow={onRow} rowClassName={(record) => (record.newValue || record.newValue === 0) && !isEqual(record.value, record.newValue) @@ -493,8 +486,6 @@ const UploadDetail = ({ record, setReload }) => { } : false } - sticky={true} - scroll={{ x: 950, y: "calc(100vh - 220px)" }} />

{text.notesFeedback}

{!!comments.length && ( From ee66fdae734aab80635e3b7cac2757f3fdabeffc Mon Sep 17 00:00:00 2001 From: abhishek Date: Wed, 31 Jan 2024 09:58:07 +0530 Subject: [PATCH 3/4] [#1093] fixed the coloum width issue --- frontend/src/App.scss | 2 +- frontend/src/pages/submissions/UploadDetail.jsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/App.scss b/frontend/src/App.scss index 0a72ea0e4..918a87097 100644 --- a/frontend/src/App.scss +++ b/frontend/src/App.scss @@ -120,7 +120,7 @@ th { padding: 12px 18px; border-bottom: solid #dededf 1px; - width: 50%; + //width: 50%; } th { diff --git a/frontend/src/pages/submissions/UploadDetail.jsx b/frontend/src/pages/submissions/UploadDetail.jsx index af552f71e..825a97d3b 100644 --- a/frontend/src/pages/submissions/UploadDetail.jsx +++ b/frontend/src/pages/submissions/UploadDetail.jsx @@ -19,7 +19,6 @@ const columnsRawData = [ title: "", dataIndex: "key", key: "key", - width: 40, render: (_, __, a) => { return a + 1; }, @@ -44,7 +43,6 @@ const columnsRawData = [ title: "Upload By", dataIndex: "created_by", key: "created_by", - width: 200, }, Table.EXPAND_COLUMN, ]; From 8bf84deb2f1f472909f8208c98161f929951d689 Mon Sep 17 00:00:00 2001 From: abhishek Date: Wed, 31 Jan 2024 11:19:23 +0530 Subject: [PATCH 4/4] [#1099] approvel pages row made sticky --- .../src/pages/approvals/ApprovalDetail.jsx | 8 ++-- frontend/src/pages/approvals/style.scss | 42 +++++++++++-------- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/frontend/src/pages/approvals/ApprovalDetail.jsx b/frontend/src/pages/approvals/ApprovalDetail.jsx index 40e36049f..34504a989 100644 --- a/frontend/src/pages/approvals/ApprovalDetail.jsx +++ b/frontend/src/pages/approvals/ApprovalDetail.jsx @@ -398,7 +398,7 @@ const ApprovalDetail = ({ loading={loading} dataSource={selectedTab === "raw-data" ? rawValues : values} columns={columns} - scroll={{ y: 500 }} + // scroll={{ y: 500 }} pagination={false} rowClassName={(record) => record.edited ? "row-edited" : "row-normal sticky" @@ -428,7 +428,7 @@ const ApprovalDetail = ({ Loading.. ) : ( - <> +
{record.data?.map((r, rI) => (

{r.name}

@@ -439,7 +439,7 @@ const ApprovalDetail = ({ (record.newValue || record.newValue === 0) && !isEqual(record.newValue, record.value) ? "row-edited" - : "row-normal" + : "row-normal sticky" } rowKey="id" columns={[ @@ -496,7 +496,7 @@ const ApprovalDetail = ({ > Save Edits - +
)}
); diff --git a/frontend/src/pages/approvals/style.scss b/frontend/src/pages/approvals/style.scss index 4f99520a6..db3d79108 100644 --- a/frontend/src/pages/approvals/style.scss +++ b/frontend/src/pages/approvals/style.scss @@ -17,17 +17,16 @@ .ant-table-tbody { .ant-table-row { + .ant-table-cell:first-child { + color: $color-default; + vertical-align: top; + } .sticky { position: sticky; top: 0; left: 0; z-index: 1; } - .ant-table-cell:first-child { - color: $color-default; - vertical-align: top; - } - .ant-table-cell:nth-child(2) { .ant-row { justify-content: flex-start; @@ -180,23 +179,30 @@ background: #fefebe; } } - .pending-data-wrapper { - border: solid #e9e9e9 1px; - margin-bottom: 20px; - padding: 1rem; - .ant-table { - thead { - tr { - th { - background-color: #f2f2f3; - font-weight: 500; + + .pending-data-outer { + height: 500px; + overflow-y: scroll; + + .pending-data-wrapper { + border: solid #e9e9e9 1px; + margin-bottom: 20px; + padding: 1rem; + .ant-table { + thead { + tr { + th { + background-color: #f2f2f3; + font-weight: 500; + } } } } } - } - .pending-data-wrapper:last-child { - margin-bottom: 0; + + .pending-data-wrapper:last-child { + margin-bottom: 0; + } } } }