FIX | fixed factory page layouts

src/assets/img/factory-icon.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6801 0.0515368C10.3225 0.217032 10.2125 0.462421 10.2125 1.09493V1.5591H9.28774C8.25768 1.5591 7.97842 1.60632 7.49924 1.86165C7.34244 1.94519 7.09404 2.13936 6.94728 2.2932C6.46096 2.80282 6.27517 3.32351 6.27517 4.17681V4.70763H5.74412C5.1352 4.70763 4.76745 4.78738 4.34936 5.01019C4.00454 5.19389 3.57709 5.62942 3.40129 5.97625C3.11229 6.54633 3.12528 6.18646 3.12528 13.6202V20.4458L1.79991 20.4604C0.550344 20.4741 0.466774 20.4807 0.338761 20.5764C0.080519 20.7692 0 20.9264 0 21.2375C0 21.5486 0.0806174 21.7058 0.338859 21.8986L0.474796 22H11H21.5252L21.6611 21.8986C21.9194 21.7058 22 21.5486 22 21.2375C22 20.9264 21.9195 20.7692 21.6612 20.5764C21.5332 20.4807 21.4497 20.4741 20.2001 20.4604L18.8747 20.4458V13.6202C18.8747 6.10957 18.8913 6.5298 18.572 5.93119C18.4885 5.77445 18.2942 5.52616 18.1403 5.37945C17.6305 4.89335 17.1096 4.70763 16.2559 4.70763H15.7248V4.17681C15.7248 3.32351 15.539 2.80282 15.0527 2.2932C14.906 2.13936 14.6576 1.94519 14.5008 1.86165C14.0221 1.60657 13.742 1.5591 12.7166 1.5591H11.7962L11.7795 1.02139C11.7616 0.443333 11.7182 0.330379 11.4313 0.116279C11.2682 -0.00543197 10.8762 -0.0392297 10.6801 0.0515368ZM13.6774 3.20194C13.7677 3.23968 13.9054 3.35406 13.9834 3.45619L14.1253 3.6419L14.1499 4.71251C14.1769 5.88484 14.183 5.9091 14.5132 6.15586C14.6379 6.24904 14.7365 6.25932 15.7248 6.2819C16.9032 6.30886 16.9269 6.31477 17.1737 6.64522C17.2749 6.7807 17.2752 6.7994 17.288 13.6157L17.3008 20.4503H15.7276H14.1544L14.1398 19.1255C14.1261 17.8765 14.1195 17.793 14.0238 17.665C13.968 17.5903 13.8612 17.4836 13.7864 17.4278C13.6531 17.3283 13.6002 17.3264 11 17.3264C8.39977 17.3264 8.34691 17.3283 8.21358 17.4278C8.13882 17.4836 8.03202 17.5903 7.97621 17.665C7.88053 17.793 7.87388 17.8765 7.86015 19.1255L7.84558 20.4503H6.27241H4.69919L4.71204 13.6157C4.72478 6.7994 4.72513 6.7807 4.82632 6.64522C4.88213 6.57049 4.98893 6.46373 5.06364 6.40794C5.19707 6.30832 5.26145 6.30606 8.63758 6.2819C12.0137 6.25775 12.0781 6.25549 12.2115 6.15586C12.4698 5.96307 12.5503 5.80588 12.5503 5.49477C12.5503 5.18365 12.4698 5.02647 12.2115 4.83367C12.08 4.73543 12.0088 4.73179 9.9629 4.71841L7.85011 4.70459V4.24195C7.85011 3.61027 7.96242 3.36065 8.31767 3.20283C8.53944 3.10429 13.4417 3.1035 13.6774 3.20194ZM6.74027 7.92338C6.26537 8.13644 6.13244 8.76576 6.47902 9.16031C6.68342 9.39301 6.88826 9.4425 7.56505 9.42267C8.18557 9.40447 8.28834 9.36585 8.51149 9.06713C8.65378 8.87665 8.65378 8.40997 8.51149 8.21949C8.28327 7.91393 8.19207 7.88185 7.5145 7.86842C7.06919 7.85962 6.84736 7.87536 6.74027 7.92338ZM10.6776 7.92264C10.4783 8.01306 10.2725 8.2642 10.237 8.46025C10.2212 8.54743 10.2148 10.1059 10.2228 11.9235C10.2369 15.1733 10.2388 15.2306 10.3386 15.3642C10.5315 15.6224 10.6888 15.7029 11 15.7029C11.3112 15.7029 11.4685 15.6223 11.6614 15.3642C11.7616 15.23 11.7629 15.186 11.7629 11.7918C11.7629 8.39772 11.7616 8.35369 11.6614 8.21949C11.6056 8.14476 11.502 8.04041 11.4313 7.98763C11.2684 7.86606 10.8769 7.83231 10.6776 7.92264ZM13.8275 7.92338C13.3526 8.13644 13.2197 8.76576 13.5663 9.16031C13.7707 9.39301 13.9755 9.4425 14.6523 9.42267C15.1385 9.4084 15.2465 9.3904 15.3616 9.3044C15.6197 9.11146 15.7002 8.95432 15.7002 8.64331C15.7002 8.33229 15.6197 8.17516 15.3616 7.98221C15.2437 7.8941 15.1437 7.87915 14.6017 7.86842C14.1564 7.85962 13.9346 7.87536 13.8275 7.92338ZM6.74027 11.0719C6.26537 11.285 6.13244 11.9143 6.47902 12.3088C6.68342 12.5415 6.88826 12.591 7.56505 12.5712C8.18557 12.553 8.28834 12.5144 8.51149 12.2157C8.65378 12.0252 8.65378 11.5585 8.51149 11.368C8.28327 11.0625 8.19207 11.0304 7.5145 11.017C7.06919 11.0082 6.84736 11.0239 6.74027 11.0719ZM13.8275 11.0719C13.3526 11.285 13.2197 11.9143 13.5663 12.3088C13.7707 12.5415 13.9755 12.591 14.6523 12.5712C15.1385 12.5569 15.2465 12.5389 15.3616 12.4529C15.6197 12.26 15.7002 12.1029 15.7002 11.7918C15.7002 11.4808 15.6197 11.3237 15.3616 11.1308C15.2437 11.0426 15.1437 11.0277 14.6017 11.017C14.1564 11.0082 13.9346 11.0239 13.8275 11.0719ZM6.74027 14.2205C6.26537 14.4335 6.13244 15.0628 6.47902 15.4574C6.68342 15.6901 6.88826 15.7396 7.56505 15.7197C8.18557 15.7015 8.28834 15.6629 8.51149 15.3642C8.65378 15.1737 8.65378 14.7071 8.51149 14.5166C8.28327 14.211 8.19207 14.1789 7.5145 14.1655C7.06919 14.1567 6.84736 14.1724 6.74027 14.2205ZM13.8275 14.2205C13.3526 14.4335 13.2197 15.0628 13.5663 15.4574C13.7707 15.6901 13.9755 15.7396 14.6523 15.7197C15.1385 15.7055 15.2465 15.6875 15.3616 15.6015C15.6197 15.4085 15.7002 15.2514 15.7002 14.9404C15.7002 14.6294 15.6197 14.4722 15.3616 14.2793C15.2437 14.1912 15.1437 14.1762 14.6017 14.1655C14.1564 14.1567 13.9346 14.1724 13.8275 14.2205ZM12.5749 19.6632V20.4503H11H9.42506V19.6632V18.8761H11H12.5749V19.6632Z" fill="#3B3B3B"/>
+</svg>

src/assets/img/folder-icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9999 15.2222V6.33333C18.9999 5.86184 18.8126 5.40965 18.4792 5.07625C18.1458 4.74286 17.6937 4.55556 17.2222 4.55556H11.2097C10.8795 4.55554 10.5558 4.46356 10.2749 4.28992C9.99407 4.11628 9.76711 3.86783 9.6195 3.57244L8.82484 1.98311C8.67716 1.68759 8.45006 1.43906 8.16901 1.2654C7.88797 1.09175 7.56409 0.999846 7.23372 1H2.99995C2.52845 1 2.07627 1.1873 1.74287 1.5207C1.40947 1.8541 1.22217 2.30628 1.22217 2.77778V15.2222C1.22217 15.6937 1.40947 16.1459 1.74287 16.4793C2.07627 16.8127 2.52845 17 2.99995 17H17.2222C17.6937 17 18.1458 16.8127 18.4792 16.4793C18.8126 16.1459 18.9999 15.6937 18.9999 15.2222Z" stroke="#3B3B3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/containers/Factory/components/TreeFactory/index.tsx

@@ -2,8 +2,10 @@ import { Input, Popconfirm, Tree } from "antd";
 import React, { FC, useState, useCallback, useEffect } from "react";
 import { genTree, getPermissionCheck } from "@/lib/helper";
 import _ from "lodash";
-import { ConfirmModal, IFactory, IUser } from "@/shared";
+import { ConfirmModal, IFactory, IUser, usePaginationList } from "@/shared";
 import "./style.scss";
+import { ActionBottomBar } from "@/components/TableGrid/components";
+import { permissionsGroupApi } from "@/api/permissions-group/requests";
 
 const ROW_HEIGHT = 55
 
@@ -27,7 +29,7 @@ export const TreeFactory: FC<IProps> = ({
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
   const [autoExpandParent, setAutoExpandParent] = useState<boolean>(false);
   const [isOpenConfirmModal, setConfirmModal] = useState<boolean>(false)
-  const [factoryIdToDelete, setFactoryIdToDelete] = useState<number>()
+  const [factoryIdToDelete, setFactoryIdToDelete] = useState<number>();
 
   const preparedTree = genTree(_.cloneDeep(factories));
 
@@ -107,9 +109,9 @@ export const TreeFactory: FC<IProps> = ({
           >
             <div className={isChildren ? "tree-title-icon_children" : "tree-title-icon"}>
               {item.children.length ? (
-                <i className="far fa-folder	" />
+                <i className="far factory-folder" />
               ) : (
-                <i className="far fa-building" />
+                <i className="far factory-icon" />
               )}
             </div>
 
@@ -187,6 +189,7 @@ export const TreeFactory: FC<IProps> = ({
       >
         {renderTree(preparedTree)}
       </Tree>
+
     </div>
   );
 };

src/containers/Factory/components/TreeFactory/style.scss

@@ -1,23 +1,30 @@
-$border: 1px solid #EAEAEA;
+$border: 1px solid #eaeaea;
 
 .header {
   margin-bottom: 50px;
 }
 
-
-.tree-factory{
+.tree-factory {
   width: 100%;
   padding: 20px;
 
-  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree li .ant-tree-node-content-wrapper:hover{
+  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
+  .ant-tree li .ant-tree-node-content-wrapper:hover {
     background: none;
   }
-   
-  .tree-factory .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected, .tree-factory .ant-tree li .ant-tree-node-content-wrapper, .tree-factory .tree-title {
+
+  .tree-factory
+    .ant-tree
+    li
+    .ant-tree-node-content-wrapper.ant-tree-node-selected,
+  .tree-factory .ant-tree li .ant-tree-node-content-wrapper,
+  .tree-factory .tree-title {
     width: 100%;
   }
 
-  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree li .ant-tree-node-content-wrapper, .tree-title{
+  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected,
+  .ant-tree li .ant-tree-node-content-wrapper,
+  .tree-title {
     background: none;
     align-items: center;
     height: 100%;
@@ -38,7 +45,7 @@ $border: 1px solid #EAEAEA;
     display: none;
   }
 
-  .ant-tree li span.ant-tree-switcher{ 
+  .ant-tree li span.ant-tree-switcher {
     display: none;
   }
 
@@ -56,44 +63,54 @@ $border: 1px solid #EAEAEA;
     height: 55px;
     background: none;
   }
-  
+
   .tree-node {
     display: flex;
     align-items: center;
     flex-direction: column;
     width: 100%;
     height: 55px;
-    border-bottom:$border;
+    // border-bottom: $border;
     border-top: $border;
+
+    &:last-child {
+      // border-bottom: $border;
+    }
   }
-  
-  .tree-title{
+
+  .tree-title {
     display: flex;
     width: 100%;
     justify-content: space-between;
     align-items: center;
     flex-wrap: nowrap;
-    
-    div{
+
+    div {
       height: 100%;
       display: flex;
       align-items: center;
     }
 
-    .tree-title-icon_children{
+    .tree-title-icon_children {
       width: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-left: 15px;
-       margin-right: -7px;
-      
+      margin-right: -7px;
+
       i {
         font-size: 16px;
       }
+
+      .factory-icon {
+        content: url(../../../../assets/img/factory-icon.svg);
+        height: 15px;
+        width: 15px;
+      }
     }
 
-    .tree-title-icon{
+    .tree-title-icon {
       width: 50px;
       display: flex;
       align-items: center;
@@ -107,48 +124,66 @@ $border: 1px solid #EAEAEA;
       font-weight: 500;
     }
 
-    .title-txt{
+    .title-txt {
       top: 15px;
       position: relative;
-      align-self:flex-start;
+      align-self: flex-start;
       padding-left: 30px;
       font-size: 16px;
       font-weight: 500;
     }
-    
-    .search-title{
+
+    .search-title {
       font-size: 16px;
       font-weight: 500;
       color: #fff;
       background-color: #0cbf00;
     }
-    
-    .fa-folder{
+
+    .fa-folder {
       top: 15px;
       position: relative;
-      align-self:flex-start;
+      align-self: flex-start;
       margin-right: 5px;
       color: rgba(59, 59, 59, 1);
       font-size: 22px;
     }
 
-    .fa-building{
+    .fa-building {
       top: 15px;
       position: relative;
-      align-self:flex-start;
+      align-self: flex-start;
       margin-right: 5px;
       font-size: 22px;
     }
 
-    .fa-chevron-down{
+    .factory-folder {
+      content: url(../../../../assets/img/folder-icon.svg);
+      height: 22px;
+      width: 22px;
+    }
+
+    .factory-icon {
+      content: url(../../../../assets/img/factory-icon.svg);
+      height: 22px;
+      width: 22px;
+    }
+
+    .factory-icon-small {
+      content: url(../../../../assets/img/factory-icon.svg);
+      height: 15px;
+      width: 15px;
+    }
+
+    .fa-chevron-down {
       top: 20px;
       position: relative;
-      align-self:flex-start;
+      align-self: flex-start;
       margin-left: 7px;
       font-size: 12px;
     }
 
-    .lnr-trash{
+    .lnr-trash {
       width: 50px;
       min-height: 55px;
       display: flex;
@@ -159,18 +194,18 @@ $border: 1px solid #EAEAEA;
       font-size: 18px;
     }
 
-    .text{
+    .text {
       display: flex;
       align-items: center;
       overflow: hidden;
       text-overflow: ellipsis;
       -webkit-touch-callout: none; /* iOS Safari */
       -webkit-user-select: none; /* Safari */
-       -khtml-user-select: none; /* Konqueror HTML */
-         -moz-user-select: none; /* Old versions of Firefox */
-          -ms-user-select: none; /* Internet Explorer/Edge */
-              user-select: none; /* Non-prefixed version, currently
+      -khtml-user-select: none; /* Konqueror HTML */
+      -moz-user-select: none; /* Old versions of Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+      user-select: none; /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
     }
   }
-}
+}

src/containers/Factory/index.tsx

@@ -7,10 +7,10 @@ import {
   usePaginationList,
 } from "@/shared";
 import { getProfile } from "@/store/account";
-import { Card, Col, Row } from "antd";
+// import { Col, Row } from "antd";
 import React, { FC, useState } from "react";
 import { useSelector } from "react-redux";
-import { Container, Button } from "reactstrap";
+import { Col, Row, Container, Card, CardBody, Button } from "reactstrap";
 import { ModalForm } from "./components/ModalForm";
 import { TreeFactory } from "./components/TreeFactory";
 import { useFactory } from "./hooks";
@@ -45,61 +45,71 @@ export const Factory: FC = () => {
   return (
     <Container className="factory">
       <Row>
-        <Col md={12} />
-        <Card>
-          <Modal show={isOpenModal} toggle={setOpenModal} title="Підприємство">
-            <ModalForm
-              users={usersPaginationList.items}
-              isOpen={isOpenModal}
-              selectedFactory={selectedFactory}
-              factories={factories}
-              onLoadMoreUsers={usersPaginationList.loadMore}
-              closeModal={() => setOpenModal(false)}
-              createFactory={createFactory}
-              updateFactory={updateFactory}
-            />
-          </Modal>
+        <Col md={12}>
+          <Card>
+            <CardBody>
+              <Modal
+                show={isOpenModal}
+                toggle={setOpenModal}
+                title="Підприємство"
+              >
+                <ModalForm
+                  users={usersPaginationList.items}
+                  isOpen={isOpenModal}
+                  selectedFactory={selectedFactory}
+                  factories={factories}
+                  onLoadMoreUsers={usersPaginationList.loadMore}
+                  closeModal={() => setOpenModal(false)}
+                  createFactory={createFactory}
+                  updateFactory={updateFactory}
+                />
+              </Modal>
 
-          <Row className="header">
-            <div className="col-md-12 justify-content-end flex">
-              <SearchInput
-                value={searchStr}
-                placeholder="Знайдіть задачу, групу"
-                style={{ width: 250, marginRight: 20 }}
-                onChange={setSearchStr}
-              />
-
-              {getPermissionCheck("factory", "create", profile) && (
-                <Button
-                  color="primary"
-                  size="sm"
-                  style={{ paddingTop: 15, paddingBottom: 15 }}
-                  onClick={() => {
-                    setOpenModal(true);
-                    setFactory(null);
-                  }}
+              <Row>
+                <div
+                  className="col-md-12 justify-content-end flex"
+                  style={{ marginBottom: 10 }}
                 >
-                  Створити
-                </Button>
-              )}
-            </div>
-          </Row>
+                  <SearchInput
+                    value={searchStr}
+                    placeholder="Знайдіть задачу, групу"
+                    style={{ width: 250, marginRight: 20 }}
+                    onChange={setSearchStr}
+                  />
+
+                  {getPermissionCheck("factory", "create", profile) && (
+                    <Button
+                      color="primary"
+                      size="sm"
+                      style={{ paddingTop: 15, paddingBottom: 15 }}
+                      onClick={() => {
+                        setOpenModal(true);
+                        setFactory(null);
+                      }}
+                    >
+                      Створити
+                    </Button>
+                  )}
+                </div>
+              </Row>
 
-          <Row>
-            {isLoading ? (
-              <Loader />
-            ) : (
-              <TreeFactory
-                searchVal={searchStr}
-                factories={factories}
-                profile={profile}
-                openModal={() => setOpenModal(true)}
-                setSelectedFactory={setFactory}
-                deleteFactory={deleteFactory}
-              />
-            )}
-          </Row>
-        </Card>
+              <Row>
+                {isLoading ? (
+                  <Loader />
+                ) : (
+                  <TreeFactory
+                    searchVal={searchStr}
+                    factories={factories}
+                    profile={profile}
+                    openModal={() => setOpenModal(true)}
+                    setSelectedFactory={setFactory}
+                    deleteFactory={deleteFactory}
+                  />
+                )}
+              </Row>
+            </CardBody>
+          </Card>
+        </Col>
       </Row>
     </Container>
   );

src/containers/Factory/style.scss

@@ -1,9 +1,9 @@
-.factory{
-  .ant-tree li{
-    .ant-tree-node-content-wrapper{
+.factory {
+  .ant-tree li {
+    .ant-tree-node-content-wrapper {
       overflow: hidden;
       text-overflow: ellipsis;
       width: 100%;
     }
   }
-}
+}