Add NextJS Management-System prototype (#27)

* Init with prototype

* Fix yarn.lock by fresh install

* Pin adeiu version

package.json

@@ -6,6 +6,7 @@
       "src/engine/native/node/*",
       "src/config-server",
       "src/management-system",
+      "src/management-system-v2",
       "src/helper-modules/*",
       "src/engine/native/web/server"
     ],

src/engine/native/node/native-fs/package.json

@@ -6,7 +6,7 @@
   "author": "PROCEED Project",
   "license": "MIT",
   "dependencies": {
-    "@darkobits/adeiu": "^0.2.6",
+    "@darkobits/adeiu": "0.2.14",
     "@proceed/native-module": "^1.0.0"
   },
   "devDependencies": {

src/engine/native/node/native-mdns/package.json

@@ -8,6 +8,6 @@
   "dependencies": {
     "@proceed/native-module": "^1.0.0",
     "nbonjour": "^3.6.3",
-    "@darkobits/adeiu": "^0.2.6"
+    "@darkobits/adeiu": "0.2.14"
   }
 }

src/management-system-v2/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
+  ]
+}

src/management-system-v2/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

src/management-system-v2/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/management-system-v2/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/management-system-v2/app/api/processes/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server';
+import processes from './temp.json';
+
+export type Processes = typeof processes;
+
+export async function GET() {
+  return NextResponse.json(processes);
+}
+
+export const revalidate = 60;

src/management-system-v2/app/api/processes/temp.json

@@ -0,0 +1,56 @@
+[
+  {
+    "id": 1,
+    "title": "Process 1",
+    "description": "This is process 1",
+    "departments": [
+      {
+        "id": 1,
+        "title": "Department 1",
+        "description": "This is department 1"
+      }
+    ],
+    "createdAt": "2023-05-11T13:31:53.302Z",
+    "lastEditedAt": "2023-05-11T13:31:53.302Z",
+    "owner": {
+      "id": 1,
+      "name": "John Doe"
+    }
+  },
+  {
+    "id": 2,
+    "title": "Test",
+    "description": "...",
+    "departments": [
+      {
+        "id": 1,
+        "title": "Department 1",
+        "description": "This is department 1"
+      }
+    ],
+    "createdAt": "2023-05-11T13:31:53.302Z",
+    "lastEditedAt": "2023-05-11T13:31:53.302Z",
+    "owner": {
+      "id": 1,
+      "name": "Max Mustermann"
+    }
+  },
+  {
+    "id": 3,
+    "title": "Build System",
+    "description": "Details...",
+    "departments": [
+      {
+        "id": 1,
+        "title": "Department 1",
+        "description": "This is department 1"
+      }
+    ],
+    "createdAt": "2023-05-11T13:31:53.302Z",
+    "lastEditedAt": "2023-05-11T13:31:53.302Z",
+    "owner": {
+      "id": 1,
+      "name": "John Doe"
+    }
+  }
+]

src/management-system-v2/app/layout.tsx

@@ -0,0 +1,29 @@
+import 'antd/dist/reset.css';
+import '@/public/antd.min.css';
+import { Inter } from 'next/font/google';
+import { FC, PropsWithChildren } from 'react';
+import Layout from '@/components/layout';
+import App from '@/components/app';
+
+const inter = Inter({ subsets: ['latin'], variable: '--inter' });
+
+export const metadata = {
+  title: 'PROCEED',
+  description: 'Next Gen Business Processes',
+};
+
+type RootLayoutProps = PropsWithChildren;
+
+const RootLayout: FC<RootLayoutProps> = ({ children }) => {
+  return (
+    <html lang="en">
+      <body className={inter.variable}>
+        <App>
+          <Layout>{children}</Layout>
+        </App>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;

src/management-system-v2/app/processes/[processId]/@background/(...)processes/page.tsx

@@ -0,0 +1,4 @@
+import Processes from '@/app/processes/page';
+
+// Display same page on intercept as hard navigation.
+export default Processes;

src/management-system-v2/app/processes/[processId]/@background/(...)projects/page.tsx

@@ -0,0 +1,4 @@
+import Projects from '@/app/projects/page';
+
+// Display same page on intercept as hard navigation.
+export default Projects;

src/management-system-v2/app/processes/[processId]/@background/default.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+const Default: FC = () => {
+  // Don't display anything if no route was intercepted.
+  return null;
+};
+
+export default Default;

src/management-system-v2/app/processes/[processId]/_page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import styles from './page.module.css';
+import { FC, useEffect, useState } from 'react';
+import { useParams, usePathname, useRouter } from 'next/navigation';
+import Modeler from '@/components/modeler';
+import cn from 'classnames';
+import Content from '@/components/content';
+import Overlay from './overlay';
+import { useQuery } from '@tanstack/react-query';
+import { fetchProcesses } from '@/lib/fetch-data';
+
+type ProcessProps = {
+  params: { processId: string };
+};
+
+const Processes: FC<ProcessProps> = () => {
+  // TODO: check if params is correct after fix release. And maybe don't need
+  // refresh in processes.tsx anymore?
+  const { processId } = useParams();
+  const pathname = usePathname();
+  const minimized = pathname !== `/processes/${processId}`;
+  const [closed, setClosed] = useState(false);
+  const router = useRouter();
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['processes'],
+    queryFn: fetchProcesses,
+  });
+  const process = data?.find((p) => p.id === Number(processId));
+
+  useEffect(() => {
+    // Reset closed state when page is not minimized anymore.
+    if (!minimized) {
+      setClosed(false);
+    }
+  }, [minimized, router]);
+
+  if (closed) {
+    return null;
+  }
+
+  return (
+    <Content
+      title={process?.title}
+      compact
+      wrapperClass={cn(styles.Wrapper, { [styles.minimized]: minimized })}
+      headerClass={cn(styles.HF, { [styles.minimizedHF]: minimized })}
+      footerClass={cn(styles.HF, { [styles.minimizedHF]: minimized })}
+    >
+      <Modeler className={styles.Modeler} />
+      {minimized ? <Overlay processId={processId} onClose={() => setClosed(true)} /> : null}
+    </Content>
+  );
+};
+
+export default Processes;

src/management-system-v2/app/processes/[processId]/layout.tsx

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+
+type ProcessesLayoutProps = PropsWithChildren<{
+  background: React.ReactNode;
+}>;
+
+const ProcessesLayout: FC<ProcessesLayoutProps> = ({ children, background }) => {
+  return (
+    <>
+      {background}
+      {children}
+    </>
+  );
+};
+
+export default ProcessesLayout;

src/management-system-v2/app/processes/[processId]/overlay.module.css

@@ -0,0 +1,23 @@
+.Overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  cursor: pointer;
+
+  .Close {
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    font-size: 28px;
+    background-color: #ececec;
+    border-radius: 100px;
+    padding: 7px;
+    transition: background-color 0.2s;
+  }
+
+  .Close:hover {
+    background-color: #dcdcdc;
+  }
+}

src/management-system-v2/app/processes/[processId]/overlay.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import styles from './overlay.module.css';
+import { FC } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import { useRouter } from 'next/navigation';
+
+type OverlayProps = {
+  processId: string;
+  onClose: () => void;
+};
+
+const Overlay: FC<OverlayProps> = ({ processId, onClose }) => {
+  const router = useRouter();
+  return (
+    <div className={styles.Overlay} onClick={() => router.push(`/processes/${processId}`)}>
+      <CloseOutlined
+        className={styles.Close}
+        onClick={(e) => {
+          onClose();
+          e.stopPropagation();
+        }}
+      />
+    </div>
+  );
+};
+
+export default Overlay;

src/management-system-v2/app/processes/[processId]/page.module.css

@@ -0,0 +1,40 @@
+.Wrapper {
+  transition: all 0.2s ease-out;
+  background: white;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /* Make sure the modeler is always above content. */
+  z-index: 99999;
+
+  &.minimized {
+    height: 400px;
+    width: 30%;
+    right: 30px;
+    box-shadow: 0 0 31px -10px #a2a2a285;
+    border: 1px solid #e0e0e0;
+    border-radius: 20px;
+    bottom: 20px;
+    left: initial;
+    top: initial;
+    min-height: 0 !important;
+  }
+
+  .Modeler {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.HF {
+  transition: all 0.2s ease-out;
+  overflow: hidden;
+}
+
+.minimizedHF {
+  height: 0;
+  padding: 0;
+}