refactor: spreadsheet layout (#2478)

* refactor: spreadsheet column components

* refactor: spreadsheet layout components

* fix: unique key for each cell

web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx

@@ -0,0 +1,41 @@
+// components
+import { ViewEstimateSelect } from "components/issues";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <ViewEstimateSelect issue={issue} onChange={(data) => onChange({ estimate_point: data })} disabled={disabled} />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetEstimateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};