chore: stash

Author: zhengjitf

builder.json

@@ -0,0 +1 @@
+{"version": null}

src/components/BuildStatusOverview.preview.png

@@ -135,7 +135,7 @@ type TransferData = {
     w: number;
     h: number;
   };
-  templateId: string;
+  component: string;
   [key: string]: any
 }
 
@@ -183,7 +183,7 @@ export const DragAndDropProvider: FC<PropsWithChildren> = ({ children }) => {
 interface DraggableProps<T = {}> {
   dropData?: {
     layout: { w: number; h: number; minW?: number; maxW?: number; minH?: number; maxH?: number };
-    templateId: string;
+    component: string;
   } & T;
 }
 
@@ -424,7 +424,7 @@ const LayoutItemComponent: FC<LayoutItemComponentProps> = ({
 };
 
 export interface Layout {
-  templateId: string;
+  component: string;
   id: string;
   x: number;
   y: number;
@@ -553,8 +553,8 @@ export const GridLayout: FC<GridLayoutProps> = ({
           onLayoutsChange([
             ...layouts,
             {
-              id: `${data.templateId}-${Math.random()}`, // TODO: need redesign the computation?
-              templateId: data.templateId,
+              id: `${data.component}-${Math.random()}`, // TODO: need redesign the computation?
+              component: data.component,
               ...data.layout,
               ...dropPositionRef.current,
             },

src/components/GridLayout.tsx

@@ -33,8 +33,8 @@ const TicketOverview = (props: SystemProps) => {
 
   return (
     <RefreshWrapper
-      {...props}
       maxWidth="448px"
+      {...props}
       title="Ticket Status"
       onRefresh={fetchData}
       refreshIntervalSeconds={ticketStatusConfig.refreshIntervalSeconds}

src/components/OwnerRotationOverview.preview.png

@@ -0,0 +1,23 @@
+import path from 'path';
+import fs from 'fs';
+import { NextApiHandler } from 'next';
+
+const postBuilder: NextApiHandler = (req, res) => {
+  fs.writeFileSync(filePath, JSON.stringify(req.body), 'utf8');
+  return res.status(200).json({ success: true })
+}
+
+const filePath = path.join(process.cwd(), 'builder.json');
+
+const getBuilder: NextApiHandler = (_, res) => {
+  const data = JSON.parse(fs.readFileSync(filePath, 'utf8'))
+  return res.status(200).json(data.version ? data : null)
+}
+
+const handler: NextApiHandler = (req, res) => {
+  if (req.method === 'POST') return postBuilder(req, res)
+
+  return getBuilder(req, res)
+}
+
+export default handler

src/components/TicketStatusOverview.preview.png

@@ -1,21 +1,81 @@
-import { ComponentType, FC, useState } from 'react';
-import Image, { StaticImageData } from 'next/image';
+import { FC, useState, ComponentProps } from 'react';
+import Image from 'next/image';
+import styled from '@emotion/styled';
 import { GridLayout, DragAndDropProvider, Draggable, Layout } from '@/components/GridLayout';
 import ProjectTimeline from '@/components/ProjectTimeline';
 import ProjectTimelinePreview from '@/components/ProjectTimeline.preview.png';
+import TicketStatusOverview from '@/components/TicketStatusOverview';
+import TicketStatusOverviewPreview from '@/components/TicketStatusOverview.preview.png';
+import BuildStatusOverview from '@/components/BuildStatusOverview';
+import BuildStatusOverviewPreview from '@/components/BuildStatusOverview.preview.png';
+import OwnerRotationOverview from '@/components/OwnerRotationOverview';
+import OwnerRotationOverviewPreview from '@/components/OwnerRotationOverview.preview.png';
 
-const COMPONENTS: Record<
-  string,
+const COMPONENTS = [
   {
-    Component: ComponentType;
-    preview: StaticImageData;
-  }
-> = {
-  ProjectTimeline: {
-    Component: ProjectTimeline,
+    name: 'ProjectTimeline',
+    Component: (props: ComponentProps<typeof ProjectTimeline>) => (
+      <ProjectTimeline h="100%" {...props} />
+    ),
     preview: ProjectTimelinePreview,
+    layout: {
+      w: 8,
+      minW: 2,
+      h: 7,
+      minH: 2,
+      maxH: 9,
+    },
   },
-};
+  {
+    name: 'TicketStatusOverview',
+    Component: (props: ComponentProps<typeof ProjectTimeline>) => (
+      <TicketStatusOverview h="100%" maxWidth="auto" {...props} />
+    ),
+    preview: TicketStatusOverviewPreview,
+    layout: {
+      w: 4,
+      minW: 2,
+      h: 6,
+      minH: 2,
+      maxH: 9,
+    },
+  },
+  {
+    name: 'BuildStatusOverview',
+    Component: (props: ComponentProps<typeof ProjectTimeline>) => (
+      <BuildStatusOverview h="100%" maxWidth="auto" {...props} />
+    ),
+    preview: BuildStatusOverviewPreview,
+    layout: {
+      w: 9,
+      minW: 2,
+      h: 6,
+      minH: 2,
+      maxH: 9,
+    },
+  },
+  {
+    name: 'OwnerRotationOverview',
+    Component: (props: ComponentProps<typeof ProjectTimeline>) => (
+      <OwnerRotationOverview h="100%" maxWidth="auto" {...props} />
+    ),
+    preview: OwnerRotationOverviewPreview,
+    layout: {
+      w: 2,
+      minW: 2,
+      h: 6,
+      minH: 4,
+    },
+  },
+];
+
+const ComponentItem = styled('div')`
+  /* TODO: adjust styles */
+  margin-bottom: 10px;
+  border-radius: 14px;
+  padding: 8px;
+  background: #f3f3f3;
+`;
 
 const PageContainer: FC = () => {
   const [layouts, setLayouts] = useState<Layout[]>(() => []);
@@ -30,44 +90,31 @@ const PageContainer: FC = () => {
             id="components"
             style={{ flex: 'none', width: 250, borderRight: '1px solid #eee', padding: 10 }}
           >
-            <Draggable
-              dropData={{
-                templateId: 'ProjectTimeline',
-                layout: {
-                  w: 8,
-                  minW: 2,
-                  maxW: 10,
-                  h: 7,
-                  minH: 2,
-                  maxH: 9,
-                },
-              }}
-            >
-              {/* TODO: adjust styles */}
-              <div
-                style={{
-                  background: '#f3f3f3',
-                  borderRadius: 14,
-                  padding: 8,
-                }}
-              >
-                <Image
-                  src={ProjectTimelinePreview}
-                  alt="ProjectTimeline preview"
-                  draggable={false}
-                />
-              </div>
-            </Draggable>
+            {COMPONENTS.map(({ name, preview, layout }) => {
+              return (
+                <Draggable
+                  key={name}
+                  dropData={{
+                    component: name,
+                    layout,
+                  }}
+                >
+                  <ComponentItem>
+                    <Image src={preview} alt="ProjectTimeline preview" draggable={false} />
+                  </ComponentItem>
+                </Draggable>
+              );
+            })}
           </aside>
-          <main style={{ flex: 1 }}>
+          <main style={{ flex: 1, padding: 10 }}>
             <GridLayout
               cols={12}
               rows={12}
               layouts={layouts}
               onLayoutsChange={(newLayouts) => setLayouts(newLayouts)}
-              itemRender={(layout) => {
-                const { Component } = COMPONENTS[layout.templateId];
-                return <Component />;
+              itemRender={({ component }) => {
+                const { Component } = COMPONENTS.find(({ name }) => name === component)!;
+                return <Component w="100%" h="100%" />;
               }}
               droppable
               draggable