Adjust copy and delete (#174)

* removed dont ask aagain checkbox from delete modal, removed single delete modal, adjusted copy modal, added copy function to process list right hand icons * added scrollbar to copy modal * taken out rerenderLists * used Felipe's confirmation button but getting a few errors now * wip responsive design, icon in header and no sider nor metadata for screens starting breakpoint sm * added pop-confirmation for process-list delete, todo: fix query error for both delete and copy * integrated copy and delete module * Added antd px2remTransformer feature, deleted unnecessary code * fixed type error * prettier fix for all files except for next --------- Co-authored-by: Kai Rohwer <[email protected]>
PROCEED-Labs · Dec 15, 2023 · f476e0c · f476e0c
1 parent 3d2a50e
commit f476e0c
Show file tree

Hide file tree

Showing 17 changed files with 331 additions and 515 deletions.
diff --git a/src/management-system-v2/app/(dashboard)/processes/page.tsx b/src/management-system-v2/app/(dashboard)/processes/page.tsx
@@ -4,6 +4,11 @@ import { Result, Space } from 'antd';
 import NotLoggedInFallback from './not-logged-in-fallback';
 import { getProcesses } from '@/lib/data/legacy/process';
 import Auth, { getCurrentUser } from '@/components/auth';
+// This is a workaround to enable the Server Actions in that file to return any
+// client components. This is not possible with the current nextjs compiler
+// otherwise. It might be possible in the future with turbopack without this
+// import.
+import '@/lib/data/processes';
 
 const ProcessesPage = async () => {
   const { ability } = await getCurrentUser();

diff --git a/src/management-system-v2/components/ProcessSider.tsx b/src/management-system-v2/components/ProcessSider.tsx
@@ -5,6 +5,7 @@ import { Menu } from 'antd';
 const { SubMenu, Item, ItemGroup } = Menu;
 import {
   EditOutlined,
+  FileOutlined,
   ProfileOutlined,
   FileAddOutlined,
   StarOutlined,
@@ -24,62 +25,79 @@ const ProcessSider: FC<PropsWithChildren> = () => {
     <>
       <ItemGroup key="processes" title="Processes">
         {ability.can('view', 'Process') ? (
-          <SubMenu
-            key="processes"
-            title={
-              <span
-                onClick={() => {
-                  router.push(`/processes`);
-                }}
-              >
-                Process List
-              </span>
-            }
-            className={activeSegment === 'processes' ? 'SelectedSegment' : ''}
-            icon={
-              <EditOutlined
-                onClick={() => {
-                  router.push(`/processes`);
-                }}
-              />
-            }
+          <Item
+            key="oricesses"
+            title="Processes"
+            icon={<FileOutlined />}
+            hidden={!ability.can('view', 'Process')}
           >
-            <Item
-              key="newProcess"
-              icon={<FileAddOutlined />}
-              hidden={!ability.can('create', 'Process')}
+            <span
+              onClick={() => {
+                router.push(`/processes`);
+              }}
             >
-              <ProcessCreationButton
-                wrapperElement={<span>New Process</span>}
-              ></ProcessCreationButton>
-            </Item>
-            <Item
-              key="processImport"
-              icon={<UploadOutlined />}
-              hidden={!ability.can('create', 'Process')}
-            >
-              <ProcessImportButton />
-            </Item>
-            <Item key="processFavorites" icon={<StarOutlined />}>
-              Favorites
-            </Item>
-          </SubMenu>
-        ) : null}
+              Process List
+            </span>
+          </Item>
+        ) : // <SubMenu
+        //   key="processes"
+        //   title={
+        //     <span
+        //       onClick={() => {
+        //         router.push(`/processes`);
+        //       }}
+        //     >
+        //       Process List
+        //     </span>
+        //   }
+        //   className={activeSegment === 'processes' ? 'SelectedSegment' : ''}
+        //   icon={
+        //     <EditOutlined
+        //       onClick={() => {
+        //         router.push(`/processes`);
+        //       }}
+        //     />
+        //   }
+        // >
+        //   <Item
+        //     key="newProcess"
+        //     icon={<FileAddOutlined />}
+        //     hidden={!ability.can('create', 'Process')}
+        //   >
+        //     <ProcessCreationButton
+        //       wrapperElement={<span>New Process</span>}
+        //     ></ProcessCreationButton>
+        //   </Item>
+        //   <Item
+        //     key="processImport"
+        //     icon={<UploadOutlined />}
+        //     hidden={!ability.can('create', 'Process')}
+        //   >
+        //     <ProcessImportButton />
+        //   </Item>
+        //   <Item key="processFavorites" icon={<StarOutlined />}>
+        //     Favorites
+        //   </Item>
+        // </SubMenu>
+        null}
 
         {ability.can('view', 'Template') ? (
-          <SubMenu key="templates" title="Templates" icon={<ProfileOutlined />}>
-            <Item
-              key="newTemplate"
-              icon={<FileAddOutlined />}
-              hidden={!ability.can('create', 'Template')}
-            >
-              New Template
-            </Item>
-            <Item key="templateFavorites" icon={<StarOutlined />}>
-              Favorites
-            </Item>
-          </SubMenu>
-        ) : null}
+          <Item key="template" icon={<ProfileOutlined />}>
+            Templates
+          </Item>
+        ) : // <SubMenu key="templates" title="Templates" icon={<ProfileOutlined />}>
+        //   <Item
+        //     key="newTemplate"
+        //     icon={<FileAddOutlined />}
+        //     hidden={!ability.can('create', 'Template')}
+        //   >
+        //     New Template
+        //   </Item>
+        //   <Item key="templateFavorites" icon={<StarOutlined />}>
+        //     Favorites
+        //   </Item>
+        // </SubMenu>
+        null}
       </ItemGroup>
     </>
   );

diff --git a/src/management-system-v2/components/confirmation-button.tsx b/src/management-system-v2/components/confirmation-button.tsx
@@ -12,6 +12,8 @@ type ConfirmationModalProps = {
   >;
   buttonProps?: ComponentProps<typeof Button>;
   tooltip?: string;
+  externalOpen?: boolean;
+  onExternalClose?: () => void;
 };
 
 const ConfirmationButton: FC<PropsWithChildren<ConfirmationModalProps>> = ({
@@ -23,12 +25,15 @@ const ConfirmationButton: FC<PropsWithChildren<ConfirmationModalProps>> = ({
   modalProps,
   buttonProps,
   tooltip,
+  externalOpen,
+  onExternalClose,
 }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const [loading, setLoading] = useState(false);
 
   const clearModal = () => {
     setModalOpen(false);
+    onExternalClose?.();
     setLoading(false);
   };
 
@@ -48,10 +53,12 @@ const ConfirmationButton: FC<PropsWithChildren<ConfirmationModalProps>> = ({
         closeIcon={null}
         {...modalProps}
         title={title}
-        open={modalOpen}
+        open={externalOpen || modalOpen}
         onOk={onConfirmWrapper}
         confirmLoading={loading}
-        onCancel={() => (canCloseWhileLoading || !loading) && setModalOpen(false)}
+        onCancel={() =>
+          ((canCloseWhileLoading || !loading) && setModalOpen(false)) || onExternalClose?.()
+        }
         cancelButtonProps={{ disabled: !canCloseWhileLoading && loading }}
       >
         <p>{description}</p>

diff --git a/src/management-system-v2/components/content.module.scss b/src/management-system-v2/components/content.module.scss
@@ -29,4 +29,28 @@
       padding: 0;
     }
   }
+
+  .Icon {
+    margin: 15px -10px;
+  }
+
+  .LogoContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 64px;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+    transition: all 0.2s;
+
+    &.collapsed {
+      justify-content: flex-start;
+      padding-left: 20px;
+    }
+  }
+
+  .Hamburger {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
 }
diff --git a/src/management-system-v2/components/content.tsx b/src/management-system-v2/components/content.tsx
@@ -2,10 +2,11 @@
 
 import styles from './content.module.scss';
 import { FC, PropsWithChildren, ReactNode } from 'react';
-import { Layout as AntLayout, Grid, Button } from 'antd';
+import { Layout as AntLayout, Grid, Button, Image } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import cn from 'classnames';
 import HeaderActions from './header-actions';
+import Link from 'next/link';
 
 type ContentProps = PropsWithChildren<{
   /** Top left title in the header (or custom node). */
@@ -18,30 +19,53 @@ type ContentProps = PropsWithChildren<{
   wrapperClass?: string;
   /** Class name for the header. */
   headerClass?: string;
+
+  siderOpened?: boolean;
 }>;
 
+//TODO: open and close hamburger menu
+
 const Content: FC<ContentProps> = ({
   children,
   title,
   compact = false,
   noHeader = false,
   wrapperClass,
   headerClass,
+  siderOpened,
 }) => {
   const breakpoint = Grid.useBreakpoint();
 
   return (
     <AntLayout className={cn(styles.Main, wrapperClass)}>
       {noHeader ? null : (
         <AntLayout.Header className={cn(styles.Header, headerClass)}>
+          {/* Add icon into header for xs screens*/}
+          {breakpoint.xs ? (
+            <div className={styles.LogoContainer}>
+              <Link href="/processes">
+                <Image
+                  src={'/proceed-icon.png'}
+                  alt="PROCEED Logo"
+                  className={styles.Icon}
+                  width={breakpoint.xs ? 85 : 160}
+                  height={breakpoint.xs ? 35 : 63}
+                />
+              </Link>
+            </div>
+          ) : null}
+
           <div className={styles.Title}>{title}</div>
           {breakpoint.xs ? (
             // Hamburger menu for mobile view
-            <Button
-              type="text"
-              style={{ marginTop: '20px', marginLeft: '15px' }}
-              icon={<MenuOutlined style={{ fontSize: '170%' }} />}
-            />
+            <div>
+              <Button
+                className={styles.Hamburger}
+                type="text"
+                style={{ marginTop: '20px', marginLeft: '15px' }}
+                icon={<MenuOutlined style={{ fontSize: '170%' }} />}
+              />
+            </div>
           ) : (
             // Logout and User Profile in header for screens larger than 412px
             <HeaderActions />

diff --git a/src/management-system-v2/components/layout.module.scss b/src/management-system-v2/components/layout.module.scss
@@ -34,6 +34,10 @@
   }
 }
 
+// .SiderNone {
+//   display: none;
+// }
+
 .Main {
   //margin-left: 200px;
   transition: margin-left 0.2s;

diff --git a/src/management-system-v2/components/layout.tsx b/src/management-system-v2/components/layout.tsx
@@ -39,10 +39,11 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
             backgroundColor: '#fff',
             borderRight: '1px solid #eee',
           }}
-          className={styles.Sider}
+          className={cn(styles.Sider)}
           collapsible
           collapsed={collapsed}
           onCollapse={(collapsed) => setCollapsed(collapsed)}
+          collapsedWidth={breakpoint.xs ? '0' : '80'}
           breakpoint="md"
           trigger={null}
         >

diff --git a/src/management-system-v2/components/process-creation.module.scss b/src/management-system-v2/components/process-creation.module.scss
@@ -1,6 +1,6 @@
 .Checkbox {
   font-size: 12px;
-  // width: 55%;
+  width: 65%;
 }
 
 .ClippedProcessTitle {