From 2c99c0f5a7108f844be604a2ce91d6c30fa4433e Mon Sep 17 00:00:00 2001 From: winniel24 Date: Fri, 15 Dec 2023 18:14:38 +0100 Subject: [PATCH 01/15] created mobile menu --- .../components/content.tsx | 52 ++++++++- .../components/layout.tsx | 89 +++++++-------- .../components/menu-mobile.module.scss | 0 .../components/menu-mobile.tsx | 84 +++++++++++++++ .../components/sider-menu.tsx | 102 ++++++++++++++++++ 5 files changed, 280 insertions(+), 47 deletions(-) create mode 100644 src/management-system-v2/components/menu-mobile.module.scss create mode 100644 src/management-system-v2/components/menu-mobile.tsx create mode 100644 src/management-system-v2/components/sider-menu.tsx diff --git a/src/management-system-v2/components/content.tsx b/src/management-system-v2/components/content.tsx index f83459ed2..3f9bc4a26 100644 --- a/src/management-system-v2/components/content.tsx +++ b/src/management-system-v2/components/content.tsx @@ -1,12 +1,16 @@ 'use client'; import styles from './content.module.scss'; -import { FC, PropsWithChildren, ReactNode } from 'react'; -import { Layout as AntLayout, Grid, Button, Image } from 'antd'; +import { FC, PropsWithChildren, ReactNode, useState } from 'react'; +import { Layout as AntLayout, Grid, Button, Image, Drawer, Tooltip, Avatar } from 'antd'; import { MenuOutlined } from '@ant-design/icons'; import cn from 'classnames'; import HeaderActions from './header-actions'; import Link from 'next/link'; +import MobileMenu from './menu-mobile' +import { UserOutlined } from '@ant-design/icons'; +import router, { useRouter } from 'next/navigation'; +import { signIn, useSession } from 'next-auth/react'; type ContentProps = PropsWithChildren<{ /** Top left title in the header (or custom node). */ @@ -32,11 +36,29 @@ const Content: FC = ({ noHeader = false, wrapperClass, headerClass, - siderOpened, }) => { const breakpoint = Grid.useBreakpoint(); + const [openMobileMenu, setOpenMobileMenu] = useState(false); + + const showDrawer = () => { + setOpenMobileMenu(true); + }; + + const onClose = () => { + setOpenMobileMenu(false); + }; + + const router = useRouter(); + const session = useSession(); + const loggedIn = session.status === 'authenticated'; + + if (!process.env.NEXT_PUBLIC_USE_AUTH) { + return null; + } + return ( + <> {noHeader ? null : ( @@ -64,6 +86,7 @@ const Content: FC = ({ type="text" style={{ marginTop: '20px', marginLeft: '15px' }} icon={} + onClick={showDrawer} /> ) : ( @@ -76,6 +99,29 @@ const Content: FC = ({ {children} + + + + router.push('/profile')}> + {session.data?.user.image + ? null + : session.data?.user.firstName.slice(0, 1) + session.data?.user.lastName.slice(0, 1)} + + + : <> + + + + + ), + responsive: ['xs'], }, ]; @@ -464,11 +485,12 @@ const ProcessList: FC = ({ dataSource={data} loading={isLoading} className={classNames('no-select')} + size={breakpoint.xs ? "large" : "middle"} /> - {previewerOpen && ( + {/* {previewerOpen && ( - )} + )} */} ); }; diff --git a/src/management-system-v2/components/processes.tsx b/src/management-system-v2/components/processes.tsx index ad5561918..b94cef61e 100644 --- a/src/management-system-v2/components/processes.tsx +++ b/src/management-system-v2/components/processes.tsx @@ -2,7 +2,7 @@ import styles from './processes.module.scss'; import React, { useCallback, useEffect, useState, useTransition } from 'react'; -import { Space, Button, Tooltip, Grid, App } from 'antd'; +import { Space, Button, Tooltip, Grid, App, Drawer } from 'antd'; import { ApiData, usePostAsset } from '@/lib/fetch-data'; import { ExportOutlined, @@ -34,6 +34,7 @@ import { toCaslResource } from '@/lib/ability/caslAbility'; import { AuthCan } from './auth-can'; import ConfirmationButton from './confirmation-button'; import ProcessImportButton from './process-import'; +import MobileMetaData from './mobile-process-info-card'; type Processes = ApiData<'/process', 'get'>; export type ProcessListProcess = ReplaceKeysWithHighlighted< @@ -109,6 +110,11 @@ const Processes = ({ processes }: ProcessesProps) => { const [openCopyModal, setOpenCopyModal] = useState(false); const [openEditModal, setOpenEditModal] = useState(false); const [openDeleteModal, setOpenDeleteModal] = useState(false); + const [showMobileMetaData, setShowMobileMetaData] = useState(false) + + const closeMobileMetaData = () => { + setShowMobileMetaData(false) + } const actionBar = ( <> @@ -202,6 +208,7 @@ const Processes = ({ processes }: ProcessesProps) => { return ( <> + {showMobileMetaData ?
show mobile meta data = true
:
show mobile meta data = false
}
{/* 73% for list / icon view, 27% for meta data panel (if active) */}
{ setOpenEditModal(true); setSelectedRowKeys([id]); }} + setShowMobileMetaData={setShowMobileMetaData} /> )}
{/* Meta Data Panel */} {breakpoint.sm ? : null} -
+ + {/* Mobile View Meta Data Panel*/} + {breakpoint.xs ? + + {filteredData?.find((item) => item.definitionId === selectedRowKeys[0])?.definitionName.value!} + + { + closeMobileMetaData(); + }} + /> + + } + open={showMobileMetaData} + closeIcon={false} + > + : null } ({ definitionId: definitionId as string, diff --git a/src/management-system-v2/components/tabcard-model-metadata.tsx b/src/management-system-v2/components/tabcard-model-metadata.tsx index d1935e608..9444403f9 100644 --- a/src/management-system-v2/components/tabcard-model-metadata.tsx +++ b/src/management-system-v2/components/tabcard-model-metadata.tsx @@ -1,7 +1,7 @@ -import { Button, Card, Descriptions, DescriptionsProps } from 'antd'; +import { Button, Card, Descriptions, DescriptionsProps, Grid } from 'antd'; import React, { Dispatch, FC, Key, ReactNode, SetStateAction, useRef, useState } from 'react'; -import { MoreOutlined } from '@ant-design/icons'; +import { MoreOutlined, InfoCircleOutlined } from '@ant-design/icons'; import Viewer from './bpmn-viewer'; import { useRouter } from 'next/navigation'; import classNames from 'classnames'; @@ -115,6 +115,7 @@ const TabCard: FC = ({ item, selection, setSelection, tabcard, com const onTabChange = (key: string) => { setActiveTabKey(key as Tab); }; + const breakpoint = Grid.useBreakpoint(); return ( = ({ item, selection, setSelection, tabcard, com {/* {item?.definitionName} */} {item?.definitionName.highlighted} - + {breakpoint.xs ? : null} } style={{ From 77dae8322757627592be1846485b1d2c350171be Mon Sep 17 00:00:00 2001 From: winniel24 Date: Mon, 18 Dec 2023 13:56:03 +0100 Subject: [PATCH 03/15] adjusted buttons in process-list, changed layout for mobile view, adjusted mobile menu, adjusted information button --- src/management-system-v2/components/bar.tsx | 6 +- .../components/content.tsx | 1 + .../components/menu-mobile.tsx | 15 +- .../components/mobile-process-info-card.tsx | 79 ---------- .../components/process-icon-list.tsx | 4 +- .../components/process-info-card-content.tsx | 82 +++++++++++ .../components/process-info-card.tsx | 101 ++++--------- .../components/process-list.tsx | 2 +- .../components/processes.module.scss | 4 + .../components/processes.tsx | 136 +++++++++++++++--- .../components/tabcard-model-metadata.tsx | 9 +- 11 files changed, 252 insertions(+), 187 deletions(-) delete mode 100644 src/management-system-v2/components/mobile-process-info-card.tsx create mode 100644 src/management-system-v2/components/process-info-card-content.tsx diff --git a/src/management-system-v2/components/bar.tsx b/src/management-system-v2/components/bar.tsx index 201d55e4d..5acb44dc3 100644 --- a/src/management-system-v2/components/bar.tsx +++ b/src/management-system-v2/components/bar.tsx @@ -1,4 +1,4 @@ -import { Row, Col, Input, InputProps } from 'antd'; +import { Row, Col, Input, InputProps, Grid } from 'antd'; import styles from './bar.module.scss'; import { ReactNode } from 'react'; @@ -14,6 +14,8 @@ type BarProps = { * screens, the nodes are full width. All nodes are optional. */ const Bar = ({ leftNode, searchProps, rightNode }: BarProps) => { + const breakpoint = Grid.useBreakpoint() + return ( {leftNode && ( @@ -25,7 +27,7 @@ const Bar = ({ leftNode, searchProps, rightNode }: BarProps) => { {searchProps && } {rightNode && ( - + {rightNode} )} diff --git a/src/management-system-v2/components/content.tsx b/src/management-system-v2/components/content.tsx index 6dd2c9d1d..989b9267c 100644 --- a/src/management-system-v2/components/content.tsx +++ b/src/management-system-v2/components/content.tsx @@ -11,6 +11,7 @@ import MobileMenu from './menu-mobile' import { UserOutlined } from '@ant-design/icons'; import router, { useRouter } from 'next/navigation'; import { signIn, useSession } from 'next-auth/react'; +import SiderMenu from './sider-menu'; type ContentProps = PropsWithChildren<{ /** Top left title in the header (or custom node). */ diff --git a/src/management-system-v2/components/menu-mobile.tsx b/src/management-system-v2/components/menu-mobile.tsx index 3bfa7b764..c79a563ef 100644 --- a/src/management-system-v2/components/menu-mobile.tsx +++ b/src/management-system-v2/components/menu-mobile.tsx @@ -1,5 +1,13 @@ import React, { useState, FC, PropsWithChildren } from 'react'; import { Button, Divider, Drawer, Menu } from 'antd'; +import { + FileOutlined, + ProfileOutlined, + UnlockOutlined, + UserOutlined, + SettingOutlined, + ApiOutlined, +} from '@ant-design/icons'; import { useRouter } from 'next/navigation'; import { usePathname } from 'next/navigation'; import { useAbilityStore } from '@/lib/abilityStore';import Link from 'next/link'; @@ -22,6 +30,7 @@ const MobileMenu: FC = () => { } hidden={!ability.can('view', 'Process')} > Process List @@ -29,7 +38,7 @@ const MobileMenu: FC = () => { ) : null} {ability.can('view', 'Template') ? ( - + }> Templates ) : null} @@ -45,6 +54,7 @@ const MobileMenu: FC = () => { {/* */} } hidden={!ability.can('manage', 'User')} > Users @@ -52,6 +62,7 @@ const MobileMenu: FC = () => { } hidden={ !(ability.can('manage', 'RoleMapping') || ability.can('manage', 'Role')) } @@ -59,7 +70,7 @@ const MobileMenu: FC = () => { Roles {/* */} - {/* */} + ) : null} diff --git a/src/management-system-v2/components/mobile-process-info-card.tsx b/src/management-system-v2/components/mobile-process-info-card.tsx deleted file mode 100644 index 5bc1e11cd..000000000 --- a/src/management-system-v2/components/mobile-process-info-card.tsx +++ /dev/null @@ -1,79 +0,0 @@ -'use client'; - -import { generateDateString } from '@/lib/utils'; -import { Divider, Drawer } from 'antd'; -import React, { FC, Key, useEffect, useRef, useState } from 'react'; -import Viewer from './bpmn-viewer'; -import { ApiData } from '@/lib/fetch-data'; -import { useUserPreferences } from '@/lib/user-preferences'; -import { ProcessListProcess } from './processes'; - -type MobileMetaDataType = { - data?: ProcessListProcess[]; - selection: Key[]; -}; - -const MobileMetaData: FC = ({ data, selection }) => { - const hydrated = useUserPreferences.use._hydrated(); - - if (!hydrated) return null; - - return ( - <> - {/* Viewer */} -
- item.definitionId === selection[0])?.definitionId - } - reduceLogo={true} - resizeOnWidthChange={true} - /> - - -

Meta Data

-
- Last Edited -
-

- {generateDateString( - data?.find((item) => item.definitionId === selection[0])?.lastEdited, - true, - )} -

-
- Created On -
-

- {generateDateString( - data?.find((item) => item.definitionId === selection[0])?.createdOn, - false, - )} -

-
- File Size -
-

X KB

-
- Owner -
-

Obi Wan Kenobi

-
- Description -
-

{data?.find((item) => item.definitionId === selection[0])?.description.value}

- - -

Access Rights

-

Test

-
- - ); -}; - -export default MobileMetaData; diff --git a/src/management-system-v2/components/process-icon-list.tsx b/src/management-system-v2/components/process-icon-list.tsx index 9736319b2..ecb600d2e 100644 --- a/src/management-system-v2/components/process-icon-list.tsx +++ b/src/management-system-v2/components/process-icon-list.tsx @@ -11,9 +11,10 @@ type IconViewProps = { data?: ProcessListProcess[]; selection: Key[]; setSelection: Dispatch>; + setShowMobileMetaData: Dispatch>; }; -const IconView: FC = ({ data, selection, setSelection }) => { +const IconView: FC = ({ data, selection, setSelection, setShowMobileMetaData }) => { return ( <> @@ -28,6 +29,7 @@ const IconView: FC = ({ data, selection, setSelection }) => { > {data?.map((item) => ( = ({ data, selection }) => { + const hydrated = useUserPreferences.use._hydrated(); + + if (!hydrated) return null; + + return ( + // Viewer +
+ {Boolean(selection.length) ? ( + <> + item.definitionId === selection[0])?.definitionId + } + reduceLogo={true} + resizeOnWidthChange={true} + /> + + +

Meta Data

+
+ Last Edited +
+

+ {generateDateString( + data?.find((item) => item.definitionId === selection[0])?.lastEdited, + true, + )} +

+
+ Created On +
+

+ {generateDateString( + data?.find((item) => item.definitionId === selection[0])?.createdOn, + false, + )} +

+
+ File Size +
+

X KB

+
+ Owner +
+

Obi Wan Kenobi

+
+ Description +
+

{data?.find((item) => item.definitionId === selection[0])?.description.value}

+ + +

Access Rights

+

Test

+ + ) : ( +
Please select a process.
+ )} +
+ ) + } + +export default MetaDataContent; diff --git a/src/management-system-v2/components/process-info-card.tsx b/src/management-system-v2/components/process-info-card.tsx index 5e53d745a..30c555cee 100644 --- a/src/management-system-v2/components/process-info-card.tsx +++ b/src/management-system-v2/components/process-info-card.tsx @@ -2,13 +2,14 @@ import { generateDateString } from '@/lib/utils'; import { Divider } from 'antd'; -import React, { FC, Key, useEffect, useRef, useState } from 'react'; +import React, { FC, Key, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react'; import Viewer from './bpmn-viewer'; import { ApiData } from '@/lib/fetch-data'; import CollapsibleCard from './collapsible-card'; import { useUserPreferences } from '@/lib/user-preferences'; import { ProcessListProcess } from './processes'; import ResizableElement, { ResizableElementRefType } from './ResizableElement'; +import MetaDataContent from './process-info-card-content'; type MetaDataType = { data?: ProcessListProcess[]; @@ -23,6 +24,24 @@ const MetaData: FC = ({ data, selection }) => { const showInfo = useUserPreferences((store) => store.preferences['process-meta-data'].open); const hydrated = useUserPreferences.use._hydrated(); + const collapseCard = () => { + const resizeCard = resizableElementRef.current; + const sidepanelWidth = + useUserPreferences.getState().preferences['process-meta-data'].width; + + if (resizeCard) { + if (showInfo) resizeCard(30); + else resizeCard(sidepanelWidth); + } + addPreferences({ + 'process-meta-data': { + open: !showInfo, + width: sidepanelWidth, + }, + }); + } + + /* Necessary for Firefox BPMN.js Viewer fix */ /* const [showViewer, setShowViewer] = useState(showInfo); */ @@ -56,9 +75,9 @@ const MetaData: FC = ({ data, selection }) => { const resizableElementRef = useRef(null); - if (!hydrated) return null; + if (!hydrated) return null; - return ( + return ( = ({ data, selection }) => { : 'How to PROCEED?' } show={showInfo} - onCollapse={() => { - const resizeCard = resizableElementRef.current; - const sidepanelWidth = - useUserPreferences.getState().preferences['process-meta-data'].width; - - if (resizeCard) { - if (showInfo) resizeCard(30); - else resizeCard(sidepanelWidth); - } - addPreferences({ - 'process-meta-data': { - open: !showInfo, - width: sidepanelWidth, - }, - }); - }} + onCollapse={collapseCard} > - {/* Viewer */} -
- {Boolean(selection.length) ? ( - <> - item.definitionId === selection[0])?.definitionId - } - reduceLogo={true} - resizeOnWidthChange={true} - /> - - -

Meta Data

-
- Last Edited -
-

- {generateDateString( - data?.find((item) => item.definitionId === selection[0])?.lastEdited, - true, - )} -

-
- Created On -
-

- {generateDateString( - data?.find((item) => item.definitionId === selection[0])?.createdOn, - false, - )} -

-
- File Size -
-

X KB

-
- Owner -
-

Obi Wan Kenobi

-
- Description -
-

{data?.find((item) => item.definitionId === selection[0])?.description.value}

- - -

Access Rights

-

Test

- - ) : ( -
Please select a process.
- )} -
+ ); diff --git a/src/management-system-v2/components/process-list.tsx b/src/management-system-v2/components/process-list.tsx index ea1554e25..9fa4e245f 100644 --- a/src/management-system-v2/components/process-list.tsx +++ b/src/management-system-v2/components/process-list.tsx @@ -388,7 +388,7 @@ const ProcessList: FC = ({ key: '', title: '', render: () => ( - + ), responsive: ['xs'], }, diff --git a/src/management-system-v2/components/processes.module.scss b/src/management-system-v2/components/processes.module.scss index b509cdef6..5320a2604 100644 --- a/src/management-system-v2/components/processes.module.scss +++ b/src/management-system-v2/components/processes.module.scss @@ -45,3 +45,7 @@ justify-self: end; justify-content: end; } + +.MobileView { + width: 100dvw +} \ No newline at end of file diff --git a/src/management-system-v2/components/processes.tsx b/src/management-system-v2/components/processes.tsx index b94cef61e..54a738560 100644 --- a/src/management-system-v2/components/processes.tsx +++ b/src/management-system-v2/components/processes.tsx @@ -2,7 +2,7 @@ import styles from './processes.module.scss'; import React, { useCallback, useEffect, useState, useTransition } from 'react'; -import { Space, Button, Tooltip, Grid, App, Drawer } from 'antd'; +import { Space, Button, Tooltip, Grid, App, Drawer, FloatButton } from 'antd'; import { ApiData, usePostAsset } from '@/lib/fetch-data'; import { ExportOutlined, @@ -10,6 +10,8 @@ import { UnorderedListOutlined, AppstoreOutlined, CloseOutlined, + InfoCircleOutlined, + PlusOutlined } from '@ant-design/icons'; import IconView from './process-icon-list'; import ProcessList from './process-list'; @@ -34,7 +36,7 @@ import { toCaslResource } from '@/lib/ability/caslAbility'; import { AuthCan } from './auth-can'; import ConfirmationButton from './confirmation-button'; import ProcessImportButton from './process-import'; -import MobileMetaData from './mobile-process-info-card'; +import MetaDataContent from './process-info-card-content'; type Processes = ApiData<'/process', 'get'>; export type ProcessListProcess = ReplaceKeysWithHighlighted< @@ -80,6 +82,8 @@ const Processes = ({ processes }: ProcessesProps) => { const addPreferences = useUserPreferences.use.addPreferences(); const iconView = useUserPreferences.use['icon-view-in-process-list'](); + const showInfo = useUserPreferences((store) => store.preferences['process-meta-data'].open); + const getWidth = () => useUserPreferences.getState().preferences['process-meta-data'].width; const ability = useAbilityStore((state) => state.ability); @@ -112,6 +116,15 @@ const Processes = ({ processes }: ProcessesProps) => { const [openDeleteModal, setOpenDeleteModal] = useState(false); const [showMobileMetaData, setShowMobileMetaData] = useState(false) + const changeShowMetaData = () => { + addPreferences({ + 'process-meta-data': { + open: !showInfo, + width: getWidth() + } + }) + } + const closeMobileMetaData = () => { setShowMobileMetaData(false) } @@ -208,18 +221,13 @@ const Processes = ({ processes }: ProcessesProps) => { return ( <> - {showMobileMetaData ?
show mobile meta data = true
:
show mobile meta data = false
} -
+
{/* 73% for list / icon view, 27% for meta data panel (if active) */} -
+
+ {/* New Process and Import on the right side */} + New Process + : <>{selectedRowKeys.length ? ( + + + {selectedRowKeys.length} selected: + {actionBar} + + ) : + undefined } + } />} + /> + {/* } + > + + + } /> + } /> + */} + + } - New Process + {breakpoint.sm ? : null} + + } + /> + + {/* New Process and Import on the left */} + {/* {selectedRowKeys.length ? ( + + + {selectedRowKeys.length} selected: + {actionBar} + + ) : undefined} + + New Process + + } + searchProps={{ + onChange: (e) => setSearchTerm(e.target.value), + onPressEnter: (e) => setSearchTerm(e.currentTarget.value), + placeholder: 'Search Processes ...', + }} + rightNode={ + + + + + + {breakpoint.sm ? : null} } - /> + /> */} {iconView ? ( ) : ( { /> )}
- {/* Meta Data Panel */} - {breakpoint.sm ? : null} -
- {/* Mobile View Meta Data Panel*/} - {breakpoint.xs ? @@ -316,8 +404,10 @@ const Processes = ({ processes }: ProcessesProps) => { } open={showMobileMetaData} closeIcon={false} - > - : null } + > + : + } +
({ definitionId: definitionId as string, diff --git a/src/management-system-v2/components/tabcard-model-metadata.tsx b/src/management-system-v2/components/tabcard-model-metadata.tsx index 9444403f9..6d51b090f 100644 --- a/src/management-system-v2/components/tabcard-model-metadata.tsx +++ b/src/management-system-v2/components/tabcard-model-metadata.tsx @@ -17,6 +17,7 @@ type TabCardProps = { setSelection: Dispatch>; tabcard?: boolean; completeList: ProcessListProcess[]; + setShowMobileMetaData: Dispatch>; }; const tabList = [ @@ -102,7 +103,7 @@ const generateContentList = (data: ProcessListProcess, showViewer: boolean = tru } as { [key in Tab]: ReactNode }; }; -const TabCard: FC = ({ item, selection, setSelection, tabcard, completeList }) => { +const TabCard: FC = ({ item, selection, setSelection, tabcard, completeList, setShowMobileMetaData }) => { const router = useRouter(); const [activeTabKey, setActiveTabKey] = useState('viewer'); @@ -112,6 +113,10 @@ const TabCard: FC = ({ item, selection, setSelection, tabcard, com const lastProcessId = useLastClickedStore((state) => state.processId); const setLastProcessId = useLastClickedStore((state) => state.setProcessId); + const showMobileMetaData = () => { + setShowMobileMetaData(true) + } + const onTabChange = (key: string) => { setActiveTabKey(key as Tab); }; @@ -127,7 +132,7 @@ const TabCard: FC = ({ item, selection, setSelection, tabcard, com {item?.definitionName.highlighted} {breakpoint.xs ? : null}
} From cebce3bd9c0f75c654b0a494d767c7e0400a0d15 Mon Sep 17 00:00:00 2001 From: winniel24 Date: Mon, 18 Dec 2023 19:08:28 +0100 Subject: [PATCH 04/15] adjusted meta data drawer in mobile view, added create and import button to float button in mobile view --- .../components/processes.tsx | 88 +++++-------------- .../components/tabcard-model-metadata.tsx | 4 +- 2 files changed, 23 insertions(+), 69 deletions(-) diff --git a/src/management-system-v2/components/processes.tsx b/src/management-system-v2/components/processes.tsx index 54a738560..9c9231fb4 100644 --- a/src/management-system-v2/components/processes.tsx +++ b/src/management-system-v2/components/processes.tsx @@ -11,7 +11,8 @@ import { AppstoreOutlined, CloseOutlined, InfoCircleOutlined, - PlusOutlined + PlusOutlined, + ImportOutlined } from '@ant-design/icons'; import IconView from './process-icon-list'; import ProcessList from './process-list'; @@ -258,22 +259,25 @@ const Processes = ({ processes }: ProcessesProps) => { ) : undefined } - } />} - /> - {/* */} + } > - + + } />} /> + + }> } /> - } /> - */} + } @@ -301,56 +305,6 @@ const Processes = ({ processes }: ProcessesProps) => { } /> - {/* New Process and Import on the left */} - {/* {selectedRowKeys.length ? ( - - - {selectedRowKeys.length} selected: - {actionBar} - - ) : undefined} - - New Process - - } - searchProps={{ - onChange: (e) => setSearchTerm(e.target.value), - onPressEnter: (e) => setSearchTerm(e.currentTarget.value), - placeholder: 'Search Processes ...', - }} - rightNode={ - - - - - - {breakpoint.sm ? : null} - - } - /> */} - {iconView ? ( { {/*Meta Data Panel*/} {breakpoint.xs ? + //
{filteredData?.find((item) => item.definitionId === selectedRowKeys[0])?.definitionName.value!} - { - closeMobileMetaData(); - }} - /> -
+ // { + // closeMobileMetaData(); + // }} + // /> + // } open={showMobileMetaData} - closeIcon={false} + // closeIcon={false} > : } diff --git a/src/management-system-v2/components/tabcard-model-metadata.tsx b/src/management-system-v2/components/tabcard-model-metadata.tsx index 6d51b090f..06bb030ad 100644 --- a/src/management-system-v2/components/tabcard-model-metadata.tsx +++ b/src/management-system-v2/components/tabcard-model-metadata.tsx @@ -131,9 +131,9 @@ const TabCard: FC = ({ item, selection, setSelection, tabcard, com {/* {item?.definitionName} */} {item?.definitionName.highlighted} - {breakpoint.xs ? : null} + : null} } style={{ From 34e7577c9b472259def1df5b8d163a03097607cc Mon Sep 17 00:00:00 2001 From: winniel24 Date: Tue, 19 Dec 2023 17:46:28 +0100 Subject: [PATCH 05/15] fixed size of viewport and therefore footer in process-list --- src/management-system-v2/components/layout.module.scss | 1 + src/management-system-v2/components/processes.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/management-system-v2/components/layout.module.scss b/src/management-system-v2/components/layout.module.scss index 98f639128..dd5ba1f37 100644 --- a/src/management-system-v2/components/layout.module.scss +++ b/src/management-system-v2/components/layout.module.scss @@ -45,6 +45,7 @@ position: relative; /* Need this for the absolute editor page to work in non-parallel route. */ height: 100%; + width: 100%; } .Footer { diff --git a/src/management-system-v2/components/processes.tsx b/src/management-system-v2/components/processes.tsx index 9c9231fb4..ad9a80881 100644 --- a/src/management-system-v2/components/processes.tsx +++ b/src/management-system-v2/components/processes.tsx @@ -268,7 +268,7 @@ const Processes = ({ processes }: ProcessesProps) => { } > From 1cd2113c961308ec668f7b16424eeebdb3f4c729 Mon Sep 17 00:00:00 2001 From: winniel24 Date: Tue, 19 Dec 2023 22:30:42 +0100 Subject: [PATCH 06/15] included ButtonProps in ProcessImportButton, adjusted Plus-FloatButton in MobileView --- .../components/content.tsx | 2 +- .../components/layout.tsx | 2 +- .../components/menu-mobile.tsx | 4 +- .../{sider-menu.tsx => menu-sider.tsx} | 4 +- .../components/process-import.tsx | 14 +++++-- .../components/processes.module.scss | 6 ++- .../components/processes.tsx | 40 +++++++++++-------- 7 files changed, 46 insertions(+), 26 deletions(-) rename src/management-system-v2/components/{sider-menu.tsx => menu-sider.tsx} (97%) diff --git a/src/management-system-v2/components/content.tsx b/src/management-system-v2/components/content.tsx index 989b9267c..14e300283 100644 --- a/src/management-system-v2/components/content.tsx +++ b/src/management-system-v2/components/content.tsx @@ -11,7 +11,7 @@ import MobileMenu from './menu-mobile' import { UserOutlined } from '@ant-design/icons'; import router, { useRouter } from 'next/navigation'; import { signIn, useSession } from 'next-auth/react'; -import SiderMenu from './sider-menu'; +import SiderMenu from './menu-sider'; type ContentProps = PropsWithChildren<{ /** Top left title in the header (or custom node). */ diff --git a/src/management-system-v2/components/layout.tsx b/src/management-system-v2/components/layout.tsx index 776a4a5bd..f73797e44 100644 --- a/src/management-system-v2/components/layout.tsx +++ b/src/management-system-v2/components/layout.tsx @@ -10,7 +10,7 @@ import { usePathname, useRouter } from 'next/navigation'; import cn from 'classnames'; import { useAbilityStore } from '@/lib/abilityStore'; import Link from 'next/link'; -import SiderMenu from './sider-menu'; +import SiderMenu from './menu-sider'; import { useSession } from 'next-auth/react'; /** diff --git a/src/management-system-v2/components/menu-mobile.tsx b/src/management-system-v2/components/menu-mobile.tsx index c79a563ef..fb97accdf 100644 --- a/src/management-system-v2/components/menu-mobile.tsx +++ b/src/management-system-v2/components/menu-mobile.tsx @@ -80,9 +80,9 @@ const MobileMenu: FC = () => { General Settings ) : null} - + {/* Plugins - + */} signOut()}> Logout diff --git a/src/management-system-v2/components/sider-menu.tsx b/src/management-system-v2/components/menu-sider.tsx similarity index 97% rename from src/management-system-v2/components/sider-menu.tsx rename to src/management-system-v2/components/menu-sider.tsx index ac7b8dd2f..b96d2d80c 100644 --- a/src/management-system-v2/components/sider-menu.tsx +++ b/src/management-system-v2/components/menu-sider.tsx @@ -91,9 +91,9 @@ const SiderMenu: FC = () => { General Settings ) : null} - }> + {/* }> Plugins - + */} ); diff --git a/src/management-system-v2/components/process-import.tsx b/src/management-system-v2/components/process-import.tsx index 06e738ef2..71a4b7f4c 100644 --- a/src/management-system-v2/components/process-import.tsx +++ b/src/management-system-v2/components/process-import.tsx @@ -2,7 +2,8 @@ import React, { useState } from 'react'; -import { Upload } from 'antd'; +import { Button, Upload } from 'antd'; +import type { ButtonProps } from 'antd'; import { getDefinitionsId, @@ -20,11 +21,14 @@ export type ProcessData = { bpmn: string; }; +type ProcessImportButtonProps = ButtonProps + // TODO: maybe show import errors and warnings like in the old MS (e.g. id collisions if an existing process is reimported or two imports use the same id) -const ProcessImportButton: React.FC = () => { +const ProcessImportButton: React.FC = ({...props}) => { const [importProcessData, setImportProcessData] = useState([]); const router = useRouter(); + console.log(importProcessData) return ( <> @@ -51,7 +55,11 @@ const ProcessImportButton: React.FC = () => { return false; }} > - Import Process + {/* Import Process */} + 0} diff --git a/src/management-system-v2/components/processes.module.scss b/src/management-system-v2/components/processes.module.scss index 5320a2604..7afb4832f 100644 --- a/src/management-system-v2/components/processes.module.scss +++ b/src/management-system-v2/components/processes.module.scss @@ -48,4 +48,8 @@ .MobileView { width: 100dvw -} \ No newline at end of file +} + +// .TabletView { +// width: 100dvw +// } \ No newline at end of file diff --git a/src/management-system-v2/components/processes.tsx b/src/management-system-v2/components/processes.tsx index ad9a80881..1d9bc7f3d 100644 --- a/src/management-system-v2/components/processes.tsx +++ b/src/management-system-v2/components/processes.tsx @@ -222,7 +222,8 @@ const Processes = ({ processes }: ProcessesProps) => { return ( <> -
+ {/* TODO: fix footer width / main width for breakpoint.sm - breakpoint.lg */} +
{/* 73% for list / icon view, 27% for meta data panel (if active) */}
{/* New Process and Import on the right side */} @@ -245,9 +246,8 @@ const Processes = ({ processes }: ProcessesProps) => { }} rightNode={ - {breakpoint.sm ? <> + {breakpoint.sm ? <> + Import Process New Process : <>{selectedRowKeys.length ? ( @@ -259,24 +259,32 @@ const Processes = ({ processes }: ProcessesProps) => { ) : undefined } - {/* } />} - /> */} + {/* */} } > - - } />} /> + + } + />} + /> + + + } + />} + /> - }> - - } /> } From 495dccef64a546e63650665f72314fc4a7fdba46 Mon Sep 17 00:00:00 2001 From: winniel24 Date: Fri, 29 Dec 2023 18:37:25 +0100 Subject: [PATCH 07/15] process-list and icon view width and footer's width adjusted, made responsive --- src/management-system-v2/components/bar.tsx | 4 ++-- .../components/menu-mobile.tsx | 5 ----- src/management-system-v2/components/menu-sider.tsx | 8 +------- .../components/process-icon-list.module.scss | 7 +++++++ .../components/process-icon-list.tsx | 6 +++++- .../components/process-list.module.scss | 11 +++++++++++ .../components/process-list.tsx | 14 +++++++------- 7 files changed, 33 insertions(+), 22 deletions(-) create mode 100644 src/management-system-v2/components/process-icon-list.module.scss diff --git a/src/management-system-v2/components/bar.tsx b/src/management-system-v2/components/bar.tsx index 5acb44dc3..5ce3d6d83 100644 --- a/src/management-system-v2/components/bar.tsx +++ b/src/management-system-v2/components/bar.tsx @@ -23,11 +23,11 @@ const Bar = ({ leftNode, searchProps, rightNode }: BarProps) => { {leftNode} )} - + {searchProps && } {rightNode && ( - + {rightNode} )} diff --git a/src/management-system-v2/components/menu-mobile.tsx b/src/management-system-v2/components/menu-mobile.tsx index fb97accdf..4154ed5bd 100644 --- a/src/management-system-v2/components/menu-mobile.tsx +++ b/src/management-system-v2/components/menu-mobile.tsx @@ -25,7 +25,6 @@ const MobileMenu: FC = () => { {ability.can('view', 'Process') || ability.can('view', 'Template') ? ( <> - {/* */} {ability.can('view', 'Process') ? ( = () => { Templates ) : null} - {/* */} - {/* */} ) : null} @@ -51,7 +48,6 @@ const MobileMenu: FC = () => { ability.can('manage', 'RoleMapping') || ability.can('manage', 'Role') ? ( <> - {/* */} } @@ -69,7 +65,6 @@ const MobileMenu: FC = () => { > Roles - {/* */} ) : null} diff --git a/src/management-system-v2/components/menu-sider.tsx b/src/management-system-v2/components/menu-sider.tsx index b96d2d80c..0099bc1ae 100644 --- a/src/management-system-v2/components/menu-sider.tsx +++ b/src/management-system-v2/components/menu-sider.tsx @@ -38,13 +38,7 @@ const SiderMenu: FC = () => { icon={} hidden={!ability.can('view', 'Process')} > - { - router.push(`/processes`); - }} - > - Process List - + Process List ) : null} diff --git a/src/management-system-v2/components/process-icon-list.module.scss b/src/management-system-v2/components/process-icon-list.module.scss new file mode 100644 index 000000000..40d72bdc3 --- /dev/null +++ b/src/management-system-v2/components/process-icon-list.module.scss @@ -0,0 +1,7 @@ +.MobileIconView { + width: 95dvw; +} + +.IconView { + width: 100%; +} \ No newline at end of file diff --git a/src/management-system-v2/components/process-icon-list.tsx b/src/management-system-v2/components/process-icon-list.tsx index ecb600d2e..9ef5c833d 100644 --- a/src/management-system-v2/components/process-icon-list.tsx +++ b/src/management-system-v2/components/process-icon-list.tsx @@ -1,11 +1,14 @@ 'use client'; import React, { Dispatch, FC, Key, SetStateAction } from 'react'; +import styles from './process-icon-list.module.scss' +import cn from 'classnames'; import TabCard from './tabcard-model-metadata'; import ScrollBar from './scrollbar'; import { ProcessListProcess } from './processes'; +import { Grid } from 'antd'; type IconViewProps = { data?: ProcessListProcess[]; @@ -15,12 +18,13 @@ type IconViewProps = { }; const IconView: FC = ({ data, selection, setSelection, setShowMobileMetaData }) => { + const breakpoint = Grid.useBreakpoint() return ( <>
= ({ data, @@ -128,7 +129,6 @@ const ProcessList: FC = ({ {/*TODO: errors regarding query */} - = ({ onClick: (event) => { // TODO: This is a hack to clear the parallel route when selecting // another process. (needs upstream fix) - // // TODO: + // // TODO: // setSelectedProcess(record); // router.refresh(); // router.push(`/processes/${record.definitionId}`); }, }), render: (_, record) => ( - {record.definitionName.highlighted} - +
), responsive: ['xs', 'sm'], }, @@ -484,7 +484,7 @@ const ProcessList: FC = ({ columns={columnsFiltered} dataSource={data} loading={isLoading} - className={classNames('no-select')} + className={cn(breakpoint.xs ? styles.MobileTable : "")} size={breakpoint.xs ? "large" : "middle"} /> From 1d8094d8b169729867b4e514ae026340867dc6f0 Mon Sep 17 00:00:00 2001 From: winniel24 Date: Sat, 30 Dec 2023 18:37:51 +0100 Subject: [PATCH 08/15] adjusted process-list width and footer width for tablet view --- .../components/bar.module.scss | 2 +- src/management-system-v2/components/bar.tsx | 6 ++++-- .../components/process-list.module.scss | 6 +++++- .../components/process-list.tsx | 6 +++--- .../components/processes.tsx | 17 ++++++++++------- .../components/tabcard-model-metadata.tsx | 6 +++--- 6 files changed, 26 insertions(+), 17 deletions(-) diff --git a/src/management-system-v2/components/bar.module.scss b/src/management-system-v2/components/bar.module.scss index 3e313c64c..aee9fdf17 100644 --- a/src/management-system-v2/components/bar.module.scss +++ b/src/management-system-v2/components/bar.module.scss @@ -10,4 +10,4 @@ align-items: center; justify-content: center; } -} +} \ No newline at end of file diff --git a/src/management-system-v2/components/bar.tsx b/src/management-system-v2/components/bar.tsx index 5ce3d6d83..37edaf961 100644 --- a/src/management-system-v2/components/bar.tsx +++ b/src/management-system-v2/components/bar.tsx @@ -23,11 +23,13 @@ const Bar = ({ leftNode, searchProps, rightNode }: BarProps) => { {leftNode} )} - + {searchProps && } {rightNode && ( - + {rightNode} )} diff --git a/src/management-system-v2/components/process-list.module.scss b/src/management-system-v2/components/process-list.module.scss index 88b53c407..7ef72d5e1 100644 --- a/src/management-system-v2/components/process-list.module.scss +++ b/src/management-system-v2/components/process-list.module.scss @@ -1,11 +1,15 @@ .MobileTable { - width: 90dvw; + width: 95dvw; } .MobileTitleTruncation { max-width: 50dvw; } +.TabletTitleTruncation { + max-width: 25dvw; +} + .TitleTruncation { max-width: 20dvw; } \ No newline at end of file diff --git a/src/management-system-v2/components/process-list.tsx b/src/management-system-v2/components/process-list.tsx index 0a89c3ad3..0398dcdf0 100644 --- a/src/management-system-v2/components/process-list.tsx +++ b/src/management-system-v2/components/process-list.tsx @@ -235,7 +235,7 @@ const ProcessList: FC = ({ }), render: (_, record) => (
= ({ {actionBarGenerator(record)} ), - responsive: ['sm'] + responsive: ['xl'] }, { @@ -390,7 +390,7 @@ const ProcessList: FC = ({ render: () => ( ), - responsive: ['xs'], + responsive: breakpoint.xl ? ['xs'] : ['xs', 'sm'], }, ]; diff --git a/src/management-system-v2/components/processes.tsx b/src/management-system-v2/components/processes.tsx index 1d9bc7f3d..3b9a78f09 100644 --- a/src/management-system-v2/components/processes.tsx +++ b/src/management-system-v2/components/processes.tsx @@ -228,7 +228,7 @@ const Processes = ({ processes }: ProcessesProps) => {
{/* New Process and Import on the right side */} {selectedRowKeys.length} selected: {actionBar} - + ) : undefined } {/* */} - } - > - - } - />} - /> - - - } - />} - /> - - - - } + } + > + + } + /> + } + /> + + + } + /> + } + /> + + + + )} - {breakpoint.xl ? : null} + + ) : null} } /> @@ -349,27 +362,33 @@ const Processes = ({ processes }: ProcessesProps) => { )}
{/*Meta Data Panel*/} - {breakpoint.xl ? - : - - - {filteredData?.find((item) => item.definitionId === selectedRowKeys[0])?.definitionName.value!} - - // { - // closeMobileMetaData(); - // }} - // /> - //
- } - open={showMobileMetaData} - // closeIcon={false} - > - } + {breakpoint.xl ? ( + + ) : ( + + + { + filteredData?.find((item) => item.definitionId === selectedRowKeys[0]) + ?.definitionName.value! + } + + // { + // closeMobileMetaData(); + // }} + // /> + //
+ } + open={showMobileMetaData} + // closeIcon={false} + > + + + )}
({ From 2ed5dfbe9660f8f722afb899408b584917402091 Mon Sep 17 00:00:00 2001 From: Kai Rohwer Date: Thu, 11 Jan 2024 13:07:28 +0100 Subject: [PATCH 12/15] fix prettier --- package.json | 2 +- .../components/process-list.tsx | 38 +++++++++++++------ src/management-system-v2/package.json | 2 +- yarn.lock | 8 ++-- 4 files changed, 32 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index d5379bfed..5321b6f40 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "mini-css-extract-plugin": "^0.6.0", "nodemon": "^2.0.12", "optimize-css-assets-webpack-plugin": "^5.0.1", - "prettier": "3.0.3", + "prettier": "3.1.1", "style-loader": "^0.23.1", "supertest": "^4.0.2", "ts-jest": "29.1.1", diff --git a/src/management-system-v2/components/process-list.tsx b/src/management-system-v2/components/process-list.tsx index 0398dcdf0..e5feb6ffc 100644 --- a/src/management-system-v2/components/process-list.tsx +++ b/src/management-system-v2/components/process-list.tsx @@ -1,6 +1,16 @@ 'use client'; -import { Button, Checkbox, Dropdown, Grid, MenuProps, Row, Table, TableColumnsType, Tooltip } from 'antd'; +import { + Button, + Checkbox, + Dropdown, + Grid, + MenuProps, + Row, + Table, + TableColumnsType, + Tooltip, +} from 'antd'; import React, { useCallback, useState, @@ -86,8 +96,8 @@ const ProcessList: FC = ({ const favourites = [0]; const showMobileMetaData = () => { - setShowMobileMetaData(true) - } + setShowMobileMetaData(true); + }; const actionBarGenerator = useCallback( (record: ProcessListProcess) => { @@ -235,7 +245,13 @@ const ProcessList: FC = ({ }), render: (_, record) => (
= ({ {actionBarGenerator(record)} ), - responsive: ['xl'] + responsive: ['xl'], }, { @@ -388,7 +404,9 @@ const ProcessList: FC = ({ key: '', title: '', render: () => ( - + ), responsive: breakpoint.xl ? ['xs'] : ['xs', 'sm'], }, @@ -484,13 +502,9 @@ const ProcessList: FC = ({ columns={columnsFiltered} dataSource={data} loading={isLoading} - className={cn(breakpoint.xs ? styles.MobileTable : "")} - size={breakpoint.xs ? "large" : "middle"} + className={cn(breakpoint.xs ? styles.MobileTable : '')} + size={breakpoint.xs ? 'large' : 'middle'} /> - - {/* {previewerOpen && ( - - )} */} ); }; diff --git a/src/management-system-v2/package.json b/src/management-system-v2/package.json index 508261ddd..19ccc3c33 100644 --- a/src/management-system-v2/package.json +++ b/src/management-system-v2/package.json @@ -63,7 +63,7 @@ "eslint-config-next": "13.5.3", "eslint-config-prettier": "9.0.0", "openapi-typescript": "6.7.0", - "prettier": "3.0.3", + "prettier": "3.1.1", "sass": "1.68.0", "ts-node": "10.9.1", "typescript": "5.2.2" diff --git a/yarn.lock b/yarn.lock index 7dc22106f..07c3ebddb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16586,10 +16586,10 @@ preserve@^0.2.0: resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" integrity sha512-s/46sYeylUfHNjI+sA/78FAHlmIuKqI9wNnzEOGehAlUUYeObv5C2mOinXBjyUyWmJ2SfcS2/ydApH4hTF4WXQ== -prettier@3.0.3: - version "3.0.3" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643" - integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg== +prettier@3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848" + integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw== "prettier@^1.18.2 || ^2.0.0": version "2.8.8" From 088441cb30ea03948e9b3f78cdb3aba1940d2376 Mon Sep 17 00:00:00 2001 From: Kai Rohwer Date: Thu, 11 Jan 2024 13:25:48 +0100 Subject: [PATCH 13/15] use new prop --- .../components/process-info-card-content.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/management-system-v2/components/process-info-card-content.tsx b/src/management-system-v2/components/process-info-card-content.tsx index 65e58b487..77d6c1405 100644 --- a/src/management-system-v2/components/process-info-card-content.tsx +++ b/src/management-system-v2/components/process-info-card-content.tsx @@ -27,13 +27,7 @@ const MetaDataContent: FC = ({ data, selection }) => { > {Boolean(selection.length) ? ( <> - item.definitionId === selection[0])?.definitionId - } - reduceLogo={true} - resizeOnWidthChange={true} - /> +

Meta Data

From 9c4c8f16dfda171dd797094bbc995c1013d007ab Mon Sep 17 00:00:00 2001 From: Kai Rohwer Date: Thu, 11 Jan 2024 13:38:17 +0100 Subject: [PATCH 14/15] Fix content --- src/management-system-v2/components/content.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/management-system-v2/components/content.tsx b/src/management-system-v2/components/content.tsx index 830448963..a631cbd24 100644 --- a/src/management-system-v2/components/content.tsx +++ b/src/management-system-v2/components/content.tsx @@ -70,7 +70,8 @@ const Content: FC = ({
) : null} -
{title}
+ {headerLeft ||
{title}
} + {headerCenter || null} {breakpoint.xs ? ( // Hamburger menu for mobile view
@@ -92,8 +93,6 @@ const Content: FC = ({ {children} - {headerLeft ||
{title}
} - {headerCenter || null} = ({ session.data?.user.lastName.slice(0, 1)} + ) : ( <>