New Directory Setup (#2065)

* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>

web/components/modules/gantt-chart/blocks.tsx

@@ -0,0 +1,58 @@
+import { useRouter } from "next/router";
+
+// ui
+import { Tooltip } from "components/ui";
+// icons
+import { ModuleStatusIcon } from "components/icons";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className="relative flex items-center w-full h-full rounded"
+      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to{" "}
+              {renderShortDate(data?.target_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
+          {data?.name}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className="relative w-full flex items-center gap-2 h-full"
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
+    >
+      <ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
+    </div>
+  );
+};

web/components/modules/gantt-chart/index.ts

@@ -0,0 +1,3 @@
+export * from "./blocks";
+export * from "./module-issues-layout";
+export * from "./modules-list-layout";

web/components/modules/gantt-chart/module-issues-layout.tsx

@@ -0,0 +1,49 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+import useUser from "hooks/use-user";
+import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
+import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+// components
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+// types
+import { IIssue } from "types";
+
+type Props = {};
+
+export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { orderBy } = useIssuesView();
+
+  const { user } = useUser();
+
+  const { ganttIssues, mutateGanttIssues } = useGanttChartModuleIssues(
+    workspaceSlug as string,
+    projectId as string,
+    moduleId as string
+  );
+
+  return (
+    <div className="w-full h-full">
+      <GanttChartRoot
+        border={false}
+        title="Issues"
+        loaderTitle="Issues"
+        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
+        blockUpdateHandler={(block, payload) =>
+          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+        }
+        SidebarBlockRender={IssueGanttSidebarBlock}
+        BlockRender={IssueGanttBlock}
+        enableReorder={orderBy === "sort_order"}
+        bottomSpacing
+      />
+    </div>
+  );
+};

web/components/modules/gantt-chart/modules-list-layout.tsx

@@ -0,0 +1,93 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+import { KeyedMutator } from "swr";
+
+// services
+import modulesService from "services/modules.service";
+// hooks
+import useUser from "hooks/use-user";
+// components
+import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
+// types
+import { IModule } from "types";
+
+type Props = {
+  modules: IModule[];
+  mutateModules: KeyedMutator<IModule[]>;
+};
+
+export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUser();
+
+  const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !user) return;
+
+    mutateModules((prevData: any) => {
+      if (!prevData) return prevData;
+
+      const newList = prevData.map((p: any) => ({
+        ...p,
+        ...(p.id === module.id
+          ? {
+              start_date: payload.start_date ? payload.start_date : p.start_date,
+              target_date: payload.target_date ? payload.target_date : p.target_date,
+              sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
+            }
+          : {}),
+      }));
+
+      if (payload.sort_order) {
+        const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
+        newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
+      }
+
+      return newList;
+    }, false);
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order)
+      newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    modulesService.patchModule(
+      workspaceSlug.toString(),
+      module.project,
+      module.id,
+      newPayload,
+      user
+    );
+  };
+
+  const blockFormat = (blocks: IModule[]) =>
+    blocks && blocks.length > 0
+      ? blocks
+          .filter((b) => b.start_date && b.target_date)
+          .map((block) => ({
+            data: block,
+            id: block.id,
+            sort_order: block.sort_order,
+            start_date: new Date(block.start_date ?? ""),
+            target_date: new Date(block.target_date ?? ""),
+          }))
+      : [];
+
+  return (
+    <div className="w-full h-full overflow-y-auto">
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blocks={modules ? blockFormat(modules) : null}
+        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
+        SidebarBlockRender={ModuleGanttSidebarBlock}
+        BlockRender={ModuleGanttBlock}
+      />
+    </div>
+  );
+};