컴패니 Col 생성 및 세부 데이터 보기 (#55)

* fix: prettier 맞춤법 수정

* chore: worker 주석처리

* feat: 컴패니 뷰 데이터 API 구현

* remove: 파일 제거

* remove: 컴포넌트 제거

* feat: 셀 수정 구현

* feat: 해당 회사 클릭했을때 모달창 나타내기 구현

* feat: column 데이터 값 받아오기 구현

* feat: column 생성 모달창 구현

* remove: 필요없는 함수 제거

* feat: dayjs 패키지 매니저 설치

* chore: 파일 이동

* feat: company col생성구현

* remove: 코드 제거

* feat: customEditor 구현

* feat: customeditor 구현

* feat: 파일 이동 및 제거

* remove: companyId제거

package.json

@@ -17,6 +17,7 @@
     "ag-grid-react": "^31.3.2",
     "antd": "^5.17.3",
     "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.5",

src/apis/companies/useGetCVData.ts

@@ -1,11 +1,13 @@
-// import { axiosClient } from '../AxiosClient';
-import axios from 'axios';
+import { axiosClient } from '@finnect/apis/AxiosClient';
+// import axios from 'axios';
 
 import { ICVDataProps } from '@finnect/interface/CompanyInterface';
 
 export const useGetCVData = async (): Promise<ICVDataProps> => {
   try {
-    const response = await axios.get(`/api/workspaces/views/company`);
+    const response = await axiosClient.get(
+      `/workspaces/companies/views/origin?page=1`
+    );
 
     return response.data;
   } catch (error) {

src/apis/companies/useGetCVDetailData.ts

@@ -1,13 +1,15 @@
-// import { axiosClient } from '../AxiosClient';
-import axios from 'axios';
+import { axiosClient } from '@finnect/apis/AxiosClient';
+// import axios from 'axios';
 
 import { ICVDetailDataProps } from '@finnect/interface/CompanyInterface';
 
 export const GetCVDetailData = async (
   companyId: number
 ): Promise<ICVDetailDataProps> => {
   try {
-    const response = await axios.get(`/api/workspaces/companies/${companyId}`);
+    const response = await axiosClient.get(
+      `/workspaces/companies/${companyId}`
+    );
 
     return response.data;
   } catch (error) {

src/apis/companies/useGetCVPDetailData.ts

@@ -1,14 +1,14 @@
-// import { axiosClient } from '../AxiosClient';
-import axios from 'axios';
+import { axiosClient } from '@finnect/apis/AxiosClient';
+// import axios from 'axios';
 
 import { ICVPDetailDataProps } from '@finnect/interface/CompanyInterface';
 
 export const GetCVPDetailData = async (
   companyId: number
 ): Promise<ICVPDetailDataProps> => {
   try {
-    const response = await axios.get(
-      `/api/workspaces/companies?companyId=${companyId}`
+    const response = await axiosClient.get(
+      `/workspaces/people?companyId=${companyId}`
     );
 
     return response.data;

src/apis/companies/usePWcpCellsHook.ts

@@ -0,0 +1,23 @@
+import { axiosClient } from '../AxiosClient';
+
+export const UsePWcpCellsHook = async ({
+  columnId,
+  rowId,
+  value,
+}: {
+  columnId: number;
+  rowId: number;
+  value: string;
+}) => {
+  try {
+    const response = await axiosClient.patch(`/workspaces/cells`, {
+      columnId,
+      rowId,
+      value,
+    });
+
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/apis/companies/usePostCompanyCol.ts

@@ -1,31 +1,23 @@
 import { axiosClient } from '../AxiosClient';
 
-export const postWCompany = async ({
-  columnId,
+export const postWCCol = async ({
   workspaceId,
   columnName,
   columnType,
-  columnIndex,
   isHided,
-  dtype,
 }: {
-  columnId: number;
   workspaceId: number;
-  columnName: 'string';
-  columnType: 'string';
-  columnIndex: number;
+  columnName: string;
+  columnType: string;
   isHided: boolean;
-  dtype: 'string';
 }) => {
   try {
     const response = await axiosClient.post(`/workspaces/companies/columns`, {
-      columnId,
       workspaceId,
       columnName,
       columnType,
-      columnIndex,
       isHided,
-      dtype,
+      dType: 'COMPANY',
     });
 
     return response.data;

src/components/common/columnOption/CustomCellEditor.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+import { Input } from 'antd';
+
+import { usePWcpCellQ } from '@finnect/hooks/queries/company/usePWcpCellQ';
+import { useGetCV } from '@finnect/hooks/queries/company/useGetCV';
+
+const CustomCellEditor = (props: any) => {
+  const { refetch } = useGetCV();
+
+  const { mutate, isPending } = usePWcpCellQ(() => {
+    refetch();
+  });
+  const [value, setValue] = useState(props.value);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleSave = async () => {
+    await mutate({
+      columnId: props.colDef.columnId,
+      rowId: props.data.rowId,
+      value,
+    });
+  };
+
+  return (
+    <>
+      <Input value={value} onChange={handleChange} onBlur={handleSave} />
+      {isPending && <span>Loading...</span>}
+    </>
+  );
+};
+
+export default CustomCellEditor;

src/components/common/columnOption/CustomDateEditor.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+
+import { usePWcpCellQ } from '@finnect/hooks/queries/company/usePWcpCellQ';
+import { useGetCV } from '@finnect/hooks/queries/company/useGetCV';
+
+const CustomDateEditor = (props: any) => {
+  const { refetch } = useGetCV();
+  const { mutate, isPending } = usePWcpCellQ(() => {
+    refetch();
+  });
+  const [value, setValue] = useState(dayjs(props.value));
+  const handleChange = (date: any) => {
+    setValue(dayjs(date));
+  };
+
+  const handleSave = async () => {
+    await mutate({
+      columnId: props.colDef.columnId,
+      rowId: props.data.rowId,
+      value: value.format('YYYY-MM-DD'),
+    });
+    refetch();
+  };
+
+  return (
+    <>
+      <DatePicker
+        value={value.toDate()}
+        onChange={handleChange}
+        onBlur={handleSave}
+      />
+      {isPending && <span>Loading...</span>}
+    </>
+  );
+};
+
+export default CustomDateEditor;

src/components/common/columnOption/CustomStatusEditor.tsx

@@ -0,0 +1,46 @@
+import { Select } from 'antd';
+import { useState } from 'react';
+
+import { usePWcpCellQ } from '@finnect/hooks/queries/company/usePWcpCellQ';
+import { useGetCV } from '@finnect/hooks/queries/company/useGetCV';
+
+import StatusCategory from '@finnect/components/common/columnOption/CustomStatusEditor';
+
+const { Option } = Select;
+
+const CustomCategoryEditor = (props: any) => {
+  const { refetch } = useGetCV();
+  const { mutate, isPending } = usePWcpCellQ(() => {
+    refetch();
+  });
+  const [value, setValue] = useState(props.value);
+
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  const handleSave = async () => {
+    await mutate({
+      columnId: props.colDef.columnId,
+      rowId: props.data.rowId,
+      value,
+    });
+    refetch();
+  };
+
+  return (
+    <>
+      <Select value={value} onChange={handleChange} onBlur={handleSave}>
+        {Array.isArray(StatusCategory) &&
+          StatusCategory.map((category: string) => (
+            <Option key={category} value={category}>
+              {category}
+            </Option>
+          ))}
+      </Select>
+      {isPending && <span>Loading...</span>}
+    </>
+  );
+};
+
+export default CustomCategoryEditor;

src/components/common/columnOption/StatusCategory.ts

@@ -0,0 +1 @@
+export const StatusCategory = ['stand-by', 'IN PROGRESS', 'DONE DISCARDED'];

src/components/common/modal/company/ColumnForm.tsx

@@ -1,43 +1,77 @@
-import { Form, Input, Select, Button } from 'antd';
+import { Form, Input, Select, Button, Checkbox } from 'antd';
+
+import { usePostWCCol } from '@finnect/hooks/queries/company/usePostWCCol';
+import { useGetCV } from '@finnect/hooks/queries/company/useGetCV';
 
 const { Option } = Select;
 
-const ColumnForm = ({
-  onCreate,
-}: {
-  onCreate: (values: { name: string; type: string }) => void;
-}) => {
+const ColumnForm = () => {
   const [form] = Form.useForm();
+  const { refetch } = useGetCV();
+  const { mutate, isPending, isError, error } = usePostWCCol();
+
+  const handleFinish = (values: {
+    workspaceId: number;
+    columnName: string;
+    columnType: string;
+    isHided: boolean;
+  }) => {
+    values.workspaceId = parseInt(
+      localStorage.getItem('selectedWorkSpaceId') || '0'
+    );
 
-  const handleFinish = (values: { name: string; type: string }) => {
-    onCreate(values);
-    form.resetFields();
+    mutate(values, {
+      onSuccess: () => {
+        refetch();
+        form.resetFields();
+      },
+      onError: (error) => {
+        console.error('Error adding column:', error);
+      },
+    });
   };
 
   return (
     <Form form={form} onFinish={handleFinish}>
       <Form.Item
-        name='name'
+        name='columnName'
         label='Name'
         rules={[{ required: true, message: 'Please input the name!' }]}
       >
         <Input />
       </Form.Item>
       <Form.Item
-        name='type'
+        name='columnType'
         label='Type'
         rules={[{ required: true, message: 'Please select the type!' }]}
       >
         <Select>
-          <Option value='text'>Text</Option>
-          <Option value='number'>Number</Option>
-          <Option value='date'>Date</Option>
+          <Option value='TEXT'>Text</Option>
+          <Option value='NUMBER'>Number</Option>
+          <Option value='DATE'>Date</Option>
+          <Option value='STATUS'>Status</Option>
+          <Option value='CURRENCY'>Currency</Option>
+          <Option value='RATING'>Rating</Option>
+          <Option value='CHECKBOX'>Checkbox</Option>
+          <Option value='URL'>URL</Option>
+          <Option value='PERSON'>Person</Option>
         </Select>
       </Form.Item>
+      <Form.Item
+        name='isHided'
+        label='Hidden'
+        valuePropName='checked'
+        initialValue={false}
+      >
+        <Checkbox />
+      </Form.Item>
       <Form.Item>
-        <Button type='primary' htmlType='submit'>
+        <Button type='primary' htmlType='submit' loading={isPending}>
           Add
         </Button>
+        {isError && (
+          <span style={{ color: 'red' }}>Error: {error?.message}</span>
+        )}
       </Form.Item>
     </Form>
   );

src/components/common/sider/SiderBox.tsx

@@ -1,9 +1,8 @@
 import { Layout } from 'antd';
 import { Menu } from 'antd';
 
-import Records from './Records';
-import Views from './Views';
-import WorkSpace from './WorkSpace';
+import Records from '@finnect/components/common/sider/Records';
+import WorkSpace from '@finnect/components/common/sider/WorkSpace';
 
 const { Sider } = Layout;
 
@@ -25,7 +24,6 @@ const SiderBox = () => {
       <br />
       <Menu theme='light' mode='inline' style={{ width: '100%' }}>
         <Records />
-        <Views />
       </Menu>
     </Sider>
   );