chore: issue properties for list and kanban layouts and implemented e…

…stimates in project store (#2363) * chore: issue properties for state, priorit, labels and members * feat: implemented assignee, labels properties * fix: implemented estimates in project store and issue properties * chore: staer_date and due_date and validation properties in kanban
makeplane · Oct 4, 2023 · b5b8095 · b5b8095
1 parent 7be038a
commit b5b8095
Show file tree

Hide file tree

Showing 18 changed files with 2,077 additions and 396 deletions.
diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
@@ -19,32 +19,39 @@ export const AllViews: React.FC = observer(() => {
 
   const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();
 
-  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES` : null, async () => {
-    if (workspaceSlug && projectId) {
-      await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
-
-      await projectStore.fetchProjectStates(workspaceSlug, projectId);
-      await projectStore.fetchProjectLabels(workspaceSlug, projectId);
-      await projectStore.fetchProjectMembers(workspaceSlug, projectId);
-
-      await issueStore.fetchIssues(workspaceSlug, projectId);
-    }
-  });
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+
+        await projectStore.fetchProjectStates(workspaceSlug, projectId);
+        await projectStore.fetchProjectLabels(workspaceSlug, projectId);
+        await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+        await projectStore.fetchProjectEstimates(workspaceSlug, projectId);
+
+        await issueStore.fetchIssues(workspaceSlug, projectId);
+      }
+    },
+    { revalidateOnFocus: false }
+  );
 
   const activeLayout = issueFilterStore.userDisplayFilters.layout;
 
   return (
     <div className="relative w-full h-full flex flex-col overflow-auto">
-      <AppliedFiltersRoot />
-      {activeLayout === "kanban" ? (
-        <KanBanLayout />
-      ) : activeLayout === "calendar" ? (
-        <CalendarLayout />
-      ) : activeLayout === "gantt_chart" ? (
-        <GanttLayout />
-      ) : activeLayout === "spreadsheet" ? (
-        <SpreadsheetLayout />
-      ) : null}
+      <AppliedFiltersList />
+      <div className="w-full h-full">
+        {activeLayout === "kanban" ? (
+          <KanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <CalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <GanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <SpreadsheetLayout />
+        ) : null}
+      </div>
     </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -8,9 +8,18 @@ interface IssueBlockProps {
   columnId: string;
   issues: any;
   isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
-export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: IssueBlockProps) => (
+export const IssueBlock = ({
+  sub_group_id,
+  columnId,
+  issues,
+  isDragDisabled,
+  handleIssues,
+  display_properties,
+}: IssueBlockProps) => (
   <>
     {issues && issues.length > 0 ? (
       <>
@@ -30,14 +39,22 @@ export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: I
                 ref={provided.innerRef}
               >
                 <div
-                  className={`min-h-[106px] text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
+                  className={`text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
                     snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
                   }`}
                 >
-                  <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
+                  {display_properties && display_properties?.key && (
+                    <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
+                  )}
                   <div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
-                  <div className="min-h-[22px]">
-                    <KanBanProperties />
+                  <div>
+                    <KanBanProperties
+                      sub_group_id={sub_group_id}
+                      columnId={columnId}
+                      issue={issue}
+                      handleIssues={handleIssues}
+                      display_properties={display_properties}
+                    />
                   </div>
                 </div>
               </div>

diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -19,12 +19,23 @@ export interface IGroupByKanBan {
   sub_group_id: string;
   list: any;
   listKey: string;
-  handleIssues?: () => void;
   isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
-  ({ issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled }) => {
+  ({
+    issues,
+    sub_group_by,
+    group_by,
+    sub_group_id = "null",
+    list,
+    listKey,
+    isDragDisabled,
+    handleIssues,
+    display_properties,
+  }) => {
     const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
     const verticalAlignPosition = (_list: any) =>
@@ -42,7 +53,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                     column_id={getValueFromObject(_list, listKey) as string}
                     sub_group_by={sub_group_by}
                     group_by={group_by}
-                    issues_count={issues?.[getValueFromObject(_list, listKey) as string].length || 0}
+                    issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
                   />
                 </div>
               )}
@@ -64,6 +75,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                             columnId={getValueFromObject(_list, listKey) as string}
                             issues={issues[getValueFromObject(_list, listKey) as string]}
                             isDragDisabled={isDragDisabled}
+                            handleIssues={handleIssues}
+                            display_properties={display_properties}
                           />
                         ) : (
                           isDragDisabled && (
@@ -90,86 +103,101 @@ export interface IKanBan {
   sub_group_by: string | null;
   group_by: string | null;
   sub_group_id?: string;
-  handleIssues?: () => void;
   handleDragDrop?: (result: any) => void | undefined;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
-export const KanBan: React.FC<IKanBan> = observer(({ issues, sub_group_by, group_by, sub_group_id = "null" }) => {
-  const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
+export const KanBan: React.FC<IKanBan> = observer(
+  ({ issues, sub_group_by, group_by, sub_group_id = "null", handleIssues, display_properties }) => {
+    const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
-  return (
-    <div className="relative w-full h-full">
-      {group_by && group_by === "state" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectStates}
-          listKey={`id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+    return (
+      <div className="relative w-full h-full">
+        {group_by && group_by === "state" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectStates}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "state_detail.group" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={ISSUE_STATE_GROUPS}
-          listKey={`key`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "state_detail.group" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_STATE_GROUPS}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "priority" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={ISSUE_PRIORITIES}
-          listKey={`key`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "priority" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_PRIORITIES}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "labels" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectLabels}
-          listKey={`id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "labels" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectLabels}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "assignees" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "assignees" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "created_by" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
-    </div>
-  );
-});
+        {group_by && group_by === "created_by" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
+      </div>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/priority.tsx b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -8,6 +8,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // constants
 import { issuePriorityByKey } from "constants/issue";
 
+
 export interface IPriorityHeader {
   column_id: string;
   sub_group_by: string | null;