init

worklenz-frontend/src/pages/settings/task-templates/task-templates-settings.css

@@ -0,0 +1,24 @@
+.no-border-row td {
+  border: none !important;
+}
+
+.alternate-row-color td {
+  background-color: #f8f7f9;
+}
+
+.no-border-row .button-visibilty {
+  visibility: hidden;
+  transition:
+    visibility 0s,
+    opacity ease-in-out;
+  opacity: 0;
+}
+
+.no-border-row:hover .button-visibilty {
+  visibility: visible;
+  opacity: 1;
+}
+
+.dark-alternate-row-color {
+  background-color: #4e4e4e10;
+}

worklenz-frontend/src/pages/settings/task-templates/task-templates-settings.tsx

@@ -0,0 +1,135 @@
+import { Button, Card, Popconfirm, Table, TableProps, Tooltip, Typography } from 'antd';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import './task-templates-settings.css';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useDocumentTitle } from '@/hooks/useDoumentTItle';
+import { ITaskTemplatesGetResponse } from '@/types/settings/task-templates.types';
+import logger from '@/utils/errorLogger';
+import { taskTemplatesApiService } from '@/api/task-templates/task-templates.api.service';
+import { calculateTimeGap } from '@/utils/calculate-time-gap';
+
+const TaskTemplatesSettings = () => {
+  const { t } = useTranslation('settings/task-templates');
+  const dispatch = useAppDispatch();
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const [taskTemplates, setTaskTemplates] = useState<ITaskTemplatesGetResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [templateId, setTemplateId] = useState<string | null>(null);
+  const [showDrawer, setShowDrawer] = useState(false);
+  useDocumentTitle('Task Templates');
+
+  const fetchTaskTemplates = async () => {
+    try {
+      setIsLoading(true);
+      const res = await taskTemplatesApiService.getTemplates();
+      setTaskTemplates(res.body);
+    } catch (error) {
+      logger.error('Failed to fetch task templates:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTaskTemplates();
+  }, []);
+
+  const handleDeleteTemplate = async (id: string) => {
+    try {
+      setIsLoading(true);
+      await taskTemplatesApiService.deleteTemplate(id);
+      await fetchTaskTemplates();
+    } catch (error) {
+      logger.error('Failed to delete task template:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const columns: TableProps<ITaskTemplatesGetResponse>['columns'] = [
+    {
+      key: 'name',
+      title: t('nameColumn'),
+      dataIndex: 'name',
+    },
+    {
+      key: 'created',
+      title: t('createdColumn'),
+      dataIndex: 'created_at',
+      render: (date: string) => calculateTimeGap(date),
+    },
+    {
+      key: 'actions',
+      width: 120,
+      render: record => (
+        <div
+          style={{ display: 'flex', gap: '10px', justifyContent: 'right' }}
+          className="button-visibilty"
+        >
+          <Tooltip title={t('editToolTip')}>
+            <Button size="small" onClick={() => setTemplateId(record.id)}>
+              <EditOutlined />
+            </Button>
+          </Tooltip>
+          <Tooltip title={t('deleteToolTip')}>
+            <Popconfirm
+              title={
+                <Typography.Text style={{ fontWeight: 400 }}>{t('confirmText')}</Typography.Text>
+              }
+              okText={t('okText')}
+              cancelText={t('cancelText')}
+              onConfirm={() => handleDeleteTemplate(record.id)}
+            >
+              <Button size="small">
+                <DeleteOutlined />
+              </Button>
+            </Popconfirm>
+          </Tooltip>
+        </div>
+      ),
+    },
+  ];
+
+  useEffect(() => {
+    if (templateId) {
+      setShowDrawer(true);
+    }
+  }, [templateId]);
+
+  const handleCloseDrawer = () => {
+    setTemplateId(null);
+    setShowDrawer(false);
+    fetchTaskTemplates();
+  };
+
+  return (
+    <Card style={{ width: '100%' }}>
+      <Table
+        loading={isLoading}
+        size="small"
+        pagination={{ 
+          size: 'small',
+          showSizeChanger: true,
+          showTotal: (total) => t('totalItems', { total })
+        }}
+        columns={columns}
+        dataSource={taskTemplates}
+        rowKey="id"
+        rowClassName={(_, index) =>
+          `no-border-row ${index % 2 === 0 ? '' : themeMode === 'dark' ? 'dark-alternate-row-color' : 'alternate-row-color'}`
+        }
+      />
+      <TaskTemplateDrawer
+        showDrawer={showDrawer}
+        selectedTemplateId={templateId}
+        onClose={handleCloseDrawer}
+      />
+    </Card>
+  );
+};
+
+export default TaskTemplatesSettings;