From 9ab1a9a0864954d97fa0c059e4a4e8811635296d Mon Sep 17 00:00:00 2001
From: Le Kim Long <long.le@redweb.dk>
Date: Wed, 11 Jan 2023 17:42:06 +0700
Subject: [PATCH] fixes #44 - List screen - Table should be striped

---
 src/components/Table/index.jsx                   |  8 ++++----
 .../CategoriesPage/Component/ListCategories.jsx  | 10 +++++-----
 .../Component/ListFeaturedProducts.jsx           | 15 +++++++++------
 .../Component/ListDebtorGroup.jsx                | 12 ++++++------
 .../Component/ListFieldsGroup.jsx                |  8 ++++----
 .../FieldsPage/Component/ListFields.jsx          |  8 ++++----
 .../Component/ListProductPrice.jsx               | 12 ++++++------
 .../ProductsPage/Component/ListProducts.jsx      | 16 ++++++++--------
 8 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx
index 6440aa46..562833b6 100644
--- a/src/components/Table/index.jsx
+++ b/src/components/Table/index.jsx
@@ -98,12 +98,12 @@ const Table = ({
         hooks.visibleColumns.push((columns) => [
           {
             id: 'selection',
-            className: 'border-bottom-1 text-uppercase ps-2',
+            className: 'border-bottom-1 text-uppercase py-2 align-middle',
             width: 10,
             Header: ({ getToggleAllPageRowsSelectedProps }) => (
-              <>
+              <div className="ms-2">
                 <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
-              </>
+              </div>
             ),
             Cell: ({ row }) => (
               <div className="wrapper_checkbox ms-2">
@@ -292,7 +292,7 @@ const Table = ({
                               key={index}
                               rowSpan={cell.rowSpan}
                               {...cell.getCellProps({ style: { width: cell.column.width } })}
-                              className="py-2 fs-14"
+                              className="py-2 fs-14 align-middle border-bottom-0"
                             >
                               {cell.render('Cell')}
                             </td>
diff --git a/src/containers/CategoriesPage/Component/ListCategories.jsx b/src/containers/CategoriesPage/Component/ListCategories.jsx
index f1b531c6..3d272ec1 100644
--- a/src/containers/CategoriesPage/Component/ListCategories.jsx
+++ b/src/containers/CategoriesPage/Component/ListCategories.jsx
@@ -20,7 +20,7 @@ const ListCategories = observer((props) => {
       Header: 'Category name',
       accessor: 'category',
       width: 150,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <>
@@ -62,7 +62,7 @@ const ListCategories = observer((props) => {
     {
       Header: 'Parent Cate',
       accessor: 'parentName',
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <>{value == 'ROOT' ? 'Top level' : value}</>;
       },
@@ -96,7 +96,7 @@ const ListCategories = observer((props) => {
       },
       width: 50,
       accessor: 'published',
-      className: 'py-2 border-bottom-1 text-center',
+      className: 'py-2 border-bottom-1 text-center align-middle',
       Cell: ({ value }) => (
         <div className="text-center pe-5">
           {value.state == 1 ? (
@@ -142,7 +142,7 @@ const ListCategories = observer((props) => {
     {
       Header: 'Last modified',
       accessor: 'lastModified',
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <div className="pe-2">
@@ -286,7 +286,7 @@ const ListCategories = observer((props) => {
 
       {viewModel?.successResponse?.state ? (
         <Table
-          classNameTable={`bg-white rounded`}
+          classNameTable={`bg-white rounded table-striped table`}
           columns={columnsTable}
           data={viewModel?.successResponse?.listCategories}
           selection={false}
diff --git a/src/containers/DashboardsPage/Component/ListFeaturedProducts.jsx b/src/containers/DashboardsPage/Component/ListFeaturedProducts.jsx
index 2632b10b..ba72a5d8 100644
--- a/src/containers/DashboardsPage/Component/ListFeaturedProducts.jsx
+++ b/src/containers/DashboardsPage/Component/ListFeaturedProducts.jsx
@@ -19,12 +19,14 @@ const ListFeaturedProducts = observer((props) => {
         <div className={`bg-white rounded-3 shadow-sm`}>
           <div className="px-2 pt-3 fw-bold text-uppercase">featured products</div>
           <Table
+            classNameTable={`table-striped table`}
             columns={[
               {
                 Header: 'Id',
                 accessor: 'id',
                 width: 60,
-                className: 'ps-2 py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+                className:
+                  'ps-2 py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
                 Cell: ({ value }) => {
                   return <div className="ps-2 opacity-80">{value}</div>;
                 },
@@ -33,7 +35,7 @@ const ListFeaturedProducts = observer((props) => {
                 Header: 'Product name',
                 accessor: 'productInfo',
                 width: 200,
-                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
                 Cell: ({ value }) => {
                   return (
                     <div className="d-flex align-items-center">
@@ -67,7 +69,7 @@ const ListFeaturedProducts = observer((props) => {
               {
                 Header: 'Categories',
                 accessor: 'categories',
-                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
                 Cell: ({ value }) => {
                   return <>{value}</>;
                 },
@@ -76,7 +78,7 @@ const ListFeaturedProducts = observer((props) => {
                 Header: 'Type',
                 accessor: 'type',
                 width: 100,
-                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
                 Cell: ({ value }) => {
                   if (value) {
                     return (
@@ -108,7 +110,7 @@ const ListFeaturedProducts = observer((props) => {
                 Header: 'Author',
                 accessor: 'author',
                 width: 100,
-                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
                 Cell: ({ value }) => {
                   return <>{value}</>;
                 },
@@ -117,7 +119,8 @@ const ListFeaturedProducts = observer((props) => {
                 Header: 'Last modified',
                 accessor: 'lastModified',
                 width: 100,
-                className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi pe-2',
+                className:
+                  'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi pe-2 align-middle',
                 Cell: ({ value }) => {
                   return (
                     <div className="pe-2">
diff --git a/src/containers/DebtorGroupPage/Component/ListDebtorGroup.jsx b/src/containers/DebtorGroupPage/Component/ListDebtorGroup.jsx
index c8336ec2..8b5a7edf 100644
--- a/src/containers/DebtorGroupPage/Component/ListDebtorGroup.jsx
+++ b/src/containers/DebtorGroupPage/Component/ListDebtorGroup.jsx
@@ -24,7 +24,7 @@ const ListDebtorGroup = observer((props) => {
       Header: 'Id',
       accessor: 'id',
       width: 60,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <div className="opacity-80">{value}</div>;
       },
@@ -33,7 +33,7 @@ const ListDebtorGroup = observer((props) => {
       Header: 'Debtor group name',
       accessor: 'title',
       width: 250,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value, row }) => {
         return (
           <>
@@ -56,7 +56,7 @@ const ListDebtorGroup = observer((props) => {
       Header: 'Debtor group code',
       accessor: 'code',
       width: 250,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <>{value}</>;
       },
@@ -65,7 +65,7 @@ const ListDebtorGroup = observer((props) => {
       Header: 'Owner Company',
       accessor: 'organisationName',
       width: 250,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <>{value}</>;
       },
@@ -74,7 +74,7 @@ const ListDebtorGroup = observer((props) => {
       Header: 'Last modified',
       accessor: 'lastModified',
       width: 250,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <div className="pe-2">
@@ -192,7 +192,7 @@ const ListDebtorGroup = observer((props) => {
 
       {viewModel?.successResponse?.state ? (
         <Table
-          classNameTable={`bg-white rounded`}
+          classNameTable={`bg-white rounded table-striped table`}
           columns={columnsTable}
           data={viewModel?.transform(viewModel?.items)}
           selection={false}
diff --git a/src/containers/FieldsGroupPage/Component/ListFieldsGroup.jsx b/src/containers/FieldsGroupPage/Component/ListFieldsGroup.jsx
index 805f1e4d..4403fd3e 100644
--- a/src/containers/FieldsGroupPage/Component/ListFieldsGroup.jsx
+++ b/src/containers/FieldsGroupPage/Component/ListFieldsGroup.jsx
@@ -24,7 +24,7 @@ const ListFieldsGroup = observer((props) => {
       Header: 'Field group name',
       accessor: 'fieldGroups',
       width: 200,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <div className="d-flex align-items-center">
@@ -49,7 +49,7 @@ const ListFieldsGroup = observer((props) => {
       Header: 'Author',
       accessor: 'createdUserName',
       width: 100,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <>{value}</>;
       },
@@ -58,7 +58,7 @@ const ListFieldsGroup = observer((props) => {
       Header: 'Last modified',
       accessor: 'lastModified',
       width: 100,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <div className="pe-2">
@@ -171,7 +171,7 @@ const ListFieldsGroup = observer((props) => {
 
       {viewModel?.successResponse?.state ? (
         <Table
-          classNameTable={`bg-white rounded`}
+          classNameTable={`bg-white rounded table-striped table`}
           columns={columnsTable}
           data={viewModel?.transform(viewModel?.items)}
           selection={false}
diff --git a/src/containers/FieldsPage/Component/ListFields.jsx b/src/containers/FieldsPage/Component/ListFields.jsx
index 157e04eb..6ee1677c 100644
--- a/src/containers/FieldsPage/Component/ListFields.jsx
+++ b/src/containers/FieldsPage/Component/ListFields.jsx
@@ -24,7 +24,7 @@ const ListFields = observer((props) => {
       Header: 'Field name',
       accessor: 'field',
       width: 200,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <div className="d-flex align-items-center">
@@ -49,7 +49,7 @@ const ListFields = observer((props) => {
       Header: 'Field group',
       accessor: 'groupName',
       width: 100,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <>{value}</>;
       },
@@ -58,7 +58,7 @@ const ListFields = observer((props) => {
       Header: 'types',
       accessor: 'type',
       width: 100,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <div className="text-capitalize">{value}</div>;
       },
@@ -199,7 +199,7 @@ const ListFields = observer((props) => {
 
       {viewModel?.successResponse?.state ? (
         <Table
-          classNameTable={`bg-white rounded`}
+          classNameTable={`bg-white rounded table-striped table`}
           columns={columnsTable}
           data={viewModel?.transform(viewModel?.items)}
           selection={false}
diff --git a/src/containers/ProductPricesPage/Component/ListProductPrice.jsx b/src/containers/ProductPricesPage/Component/ListProductPrice.jsx
index 9469d0a3..2cc7d68e 100644
--- a/src/containers/ProductPricesPage/Component/ListProductPrice.jsx
+++ b/src/containers/ProductPricesPage/Component/ListProductPrice.jsx
@@ -66,7 +66,7 @@ const ListProductPrice = observer((props) => {
       Header: 'Id',
       accessor: 'id',
       width: 60,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <div className="opacity-80">{value}</div>;
       },
@@ -75,7 +75,7 @@ const ListProductPrice = observer((props) => {
       Header: 'Product name',
       accessor: 'title',
       width: 150,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value, row }) => {
         return (
           <>
@@ -98,7 +98,7 @@ const ListProductPrice = observer((props) => {
       Header: 'Debtor Group',
       accessor: 'debtorGroup',
       width: 200,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return <>{value.map((o) => o.title).join(', ')}</>;
       },
@@ -107,7 +107,7 @@ const ListProductPrice = observer((props) => {
       Header: 'Price',
       accessor: 'price',
       width: 200,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <>{parseInt(value).toLocaleString('it-IT', { style: 'currency', currency: 'VND' })}</>
@@ -118,7 +118,7 @@ const ListProductPrice = observer((props) => {
       Header: 'Last modified',
       accessor: 'lastModified',
       width: 150,
-      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+      className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
       Cell: ({ value }) => {
         return (
           <div className="pe-2">
@@ -215,7 +215,7 @@ const ListProductPrice = observer((props) => {
 
       {viewModel?.successResponse?.state ? (
         <Table
-          classNameTable={`bg-white rounded`}
+          classNameTable={`bg-white rounded table-striped table`}
           columns={columnsTable}
           data={viewModel?.successResponse?.listProductPrice}
           selection={false}
diff --git a/src/containers/ProductsPage/Component/ListProducts.jsx b/src/containers/ProductsPage/Component/ListProducts.jsx
index f711dfbf..d8c57b1f 100644
--- a/src/containers/ProductsPage/Component/ListProducts.jsx
+++ b/src/containers/ProductsPage/Component/ListProducts.jsx
@@ -180,13 +180,13 @@ const ListProducts = observer((props) => {
       )}
       {viewModel?.successResponse?.state ? (
         <Table
-          classNameTable={`bg-white rounded`}
+          classNameTable={`bg-white rounded table-striped table`}
           columns={[
             {
               Header: 'Id',
               accessor: 'id',
               width: 60,
-              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
               Cell: ({ value }) => {
                 return <div className="opacity-80">{value}</div>;
               },
@@ -195,7 +195,7 @@ const ListProducts = observer((props) => {
               Header: 'Product name',
               accessor: 'productInfo',
               width: 300,
-              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
               Cell: ({ value, row }) => {
                 return (
                   <div className="d-flex align-items-center">
@@ -243,7 +243,7 @@ const ListProducts = observer((props) => {
             {
               Header: 'Categories',
               accessor: 'categories',
-              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
               Cell: ({ value }) => {
                 return <>{value}</>;
               },
@@ -252,7 +252,7 @@ const ListProducts = observer((props) => {
               Header: 'Type',
               accessor: 'type',
               width: 100,
-              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
               Cell: ({ value }) => {
                 if (value) {
                   return (
@@ -284,7 +284,7 @@ const ListProducts = observer((props) => {
               Header: 'Author',
               accessor: 'author',
               width: 100,
-              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
               Cell: ({ value }) => {
                 return <>{value}</>;
               },
@@ -310,7 +310,7 @@ const ListProducts = observer((props) => {
               },
               width: 50,
               accessor: 'featured',
-              className: 'py-2 border-bottom-1 text-center',
+              className: 'py-2 border-bottom-1 text-center align-middle',
               Cell: ({ row }) => (
                 <div className="text-center pe-5">
                   <svg
@@ -335,7 +335,7 @@ const ListProducts = observer((props) => {
               Header: 'Last modified',
               accessor: 'lastModified',
               width: 150,
-              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi',
+              className: 'py-2 opacity-50 border-bottom-1 text-uppercase fw-semi align-middle',
               Cell: ({ value }) => {
                 return (
                   <div className="pe-2">