init

2025-04-17 18:28:54 +05:30
parent f583291d8a
commit 8825b0410a
2837 changed files with 241385 additions and 127578 deletions
--- a/worklenz-frontend/src/components/save-project-as-template/save-project-as-template.tsx
+++ b/worklenz-frontend/src/components/save-project-as-template/save-project-as-template.tsx
@@ -0,0 +1,197 @@
+import { toggleSaveAsTemplateDrawer } from '@/features/projects/projectsSlice';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { Button, Checkbox, Drawer, Flex, Form, Input } from 'antd/es';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { ICustomProjectTemplateCreateRequest } from '@/types/project/projectTemplate.types';
+import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
+
+const SaveProjectAsTemplate = () => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation('project-view/save-as-template');
+
+  const [form] = Form.useForm();
+
+  const { isSaveAsTemplateDrawerOpen } = useAppSelector(state => state.projectsReducer);
+  const { projectId } = useAppSelector(state => state.projectReducer);
+
+  const [creating, setCreating] = useState(false);
+
+  const [templateName, setTemplateName] = useState('');
+  const [projectAttributes, setProjectAttributes] = useState({
+    statuses: {
+      label: t('includesOptions.statuses'),
+      value: 'statuses',
+      disabled: true,
+      checked: true,
+    },
+    phases: { label: t('includesOptions.phases'), value: 'phases', disabled: false, checked: true },
+    labels: { label: t('includesOptions.labels'), value: 'labels', disabled: false, checked: true },
+  });
+
+  const [taskAttributes, setTaskAttributes] = useState({
+    name: { label: t('taskIncludesOptions.name'), value: 'name', disabled: true, checked: true },
+    priority: {
+      label: t('taskIncludesOptions.priority'),
+      value: 'priority',
+      disabled: true,
+      checked: true,
+    },
+    status: {
+      label: t('taskIncludesOptions.status'),
+      value: 'status',
+      disabled: true,
+      checked: true,
+    },
+    phase: {
+      label: t('taskIncludesOptions.phase'),
+      value: 'phase',
+      disabled: false,
+      checked: true,
+    },
+    label: {
+      label: t('taskIncludesOptions.label'),
+      value: 'label',
+      disabled: false,
+      checked: true,
+    },
+    timeEstimate: {
+      label: t('taskIncludesOptions.timeEstimate'),
+      value: 'timeEstimate',
+      disabled: false,
+      checked: true,
+    },
+    description: {
+      label: t('taskIncludesOptions.description'),
+      value: 'description',
+      disabled: false,
+      checked: true,
+    },
+    subTasks: {
+      label: t('taskIncludesOptions.subTasks'),
+      value: 'subTasks',
+      disabled: false,
+      checked: true,
+    },
+  });
+
+  const handleProjectAttributeChange = (key: keyof typeof projectAttributes) => {
+    setProjectAttributes(prev => ({
+      ...prev,
+      [key]: { ...prev[key], checked: !prev[key].checked },
+    }));
+  };
+
+  const handleTaskAttributeChange = (key: keyof typeof taskAttributes) => {
+    setTaskAttributes(prev => ({
+      ...prev,
+      [key]: { ...prev[key], checked: !prev[key].checked },
+    }));
+  };
+
+  const handleFinish = async (values: any) => {
+    if (!values.name || !projectId) return;
+
+    try {
+      setCreating(true);
+      const body: ICustomProjectTemplateCreateRequest = {
+        project_id: projectId,
+        templateName: values.name,
+        projectIncludes: {
+          statuses: projectAttributes.statuses.checked,
+          phases: projectAttributes.phases.checked,
+          labels: projectAttributes.labels.checked,
+        },
+        taskIncludes: {
+          status: taskAttributes.status.checked,
+          phase: taskAttributes.phase.checked,
+          labels: taskAttributes.label.checked,
+          estimation: taskAttributes.timeEstimate.checked,
+          description: taskAttributes.description.checked,
+          subtasks: taskAttributes.subTasks.checked,
+        },
+      };
+
+      const res = await projectTemplatesApiService.createCustomTemplate(body);
+      if (res.done) {
+        dispatch(toggleSaveAsTemplateDrawer());
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setTemplateName('');
+    form.resetFields();
+    dispatch(toggleSaveAsTemplateDrawer());
+  };
+
+  return (
+    <Drawer
+      title={t('title')}
+      onClose={handleCancel}
+      open={isSaveAsTemplateDrawerOpen}
+      footer={
+        <Flex justify="end" gap={8}>
+          <Button type="default" onClick={handleCancel}>
+            {t('cancel')}
+          </Button>
+          <Button
+            type="primary"
+            htmlType="submit"
+            onClick={form.submit}
+            disabled={templateName.trim() === ''}
+          >
+            {t('save')}
+          </Button>
+        </Flex>
+      }
+    >
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        <Form.Item name="name" label={t('templateName')} required>
+          <Input
+            placeholder={t('templateNamePlaceholder')}
+            onChange={e => setTemplateName(e.target.value)}
+            value={templateName}
+          />
+        </Form.Item>
+        <Form.Item name="includes" label={t('includes')}>
+          <Flex vertical gap={8}>
+            {Object.entries(projectAttributes).map(([key, attr]) => (
+              <Checkbox
+                key={key}
+                value={attr.value}
+                disabled={attr.disabled}
+                checked={attr.checked}
+                onChange={() => handleProjectAttributeChange(key as keyof typeof projectAttributes)}
+              >
+                {attr.label}
+              </Checkbox>
+            ))}
+          </Flex>
+        </Form.Item>
+        <Form.Item name="taskIncludes" label={t('taskIncludes')}>
+          <Flex vertical gap={8}>
+            {Object.entries(taskAttributes).map(([key, attr]) => (
+              <Checkbox
+                key={key}
+                value={attr.value}
+                disabled={attr.disabled}
+                checked={attr.checked}
+                onChange={() => handleTaskAttributeChange(key as keyof typeof taskAttributes)}
+              >
+                {attr.label}
+              </Checkbox>
+            ))}
+          </Flex>
+        </Form.Item>
+      </Form>
+    </Drawer>
+  );
+};
+
+export default SaveProjectAsTemplate;