init

worklenz-frontend/src/components/admin-center/teams/teams-table/teams-table.tsx

@@ -0,0 +1,146 @@
+import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
+import Avatars from '@/components/avatars/avatars';
+import SettingTeamDrawer from '@/components/admin-center/teams/settings-drawer/settings-drawer';
+import { toggleSettingDrawer, deleteTeam, fetchTeams } from '@/features/teams/teamSlice';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { IOrganizationTeam } from '@/types/admin-center/admin-center.types';
+import logger from '@/utils/errorLogger';
+import { SettingOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Badge, Button, Card, Popconfirm, Table, TableProps, Tooltip, Typography } from 'antd';
+import { TFunction } from 'i18next';
+import { useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+
+interface TeamsTableProps {
+  teams: IOrganizationTeam[];
+  currentTeam: IOrganizationTeam | null;
+  t: TFunction;
+  loading: boolean;
+  reloadTeams: () => void;
+}
+
+const TeamsTable: React.FC<TeamsTableProps> = ({
+  teams,
+  currentTeam = null,
+  t,
+  loading,
+  reloadTeams,
+}) => {
+  const dispatch = useAppDispatch();
+  const isTablet = useMediaQuery({ query: '(min-width: 1000px)' });
+  const [deleting, setDeleting] = useState(false);
+  const [isSettingDrawerOpen, setIsSettingDrawerOpen] = useState(false);
+  const [selectedTeam, setSelectedTeam] = useState<string>('');
+
+  const handleTeamDelete = async (teamId: string) => {
+    if (!teamId) return;
+    try {
+      setDeleting(true);
+      const res = await adminCenterApiService.deleteTeam(teamId);
+      if (res.done) {
+        reloadTeams();
+        dispatch(fetchTeams());
+      }
+    } catch (error) {
+      logger.error('Error deleting team', error);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const columns: TableProps['columns'] = [
+    {
+      title: t('team'),
+      key: 'teamName',
+      render: (record: IOrganizationTeam) => (
+        <Typography.Text style={{ fontSize: `${isTablet ? '14px' : '10px'}` }}>
+          <Badge
+            status={currentTeam?.id === record.id ? 'success' : 'default'}
+            style={{ marginRight: '8px' }}
+          />
+          {record.name}
+        </Typography.Text>
+      ),
+    },
+    {
+      title: <span style={{ display: 'flex', justifyContent: 'center' }}>{t('membersCount')}</span>,
+      key: 'membersCount',
+      render: (record: IOrganizationTeam) => (
+        <Typography.Text
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            fontSize: `${isTablet ? '14px' : '10px'}`,
+          }}
+        >
+          {record.members_count}
+        </Typography.Text>
+      ),
+    },
+    {
+      title: t('members'),
+      key: 'members',
+      render: (record: IOrganizationTeam) => (
+        <span>
+          <Avatars members={record.names} />
+        </span>
+      ),
+    },
+    {
+      title: '',
+      key: 'button',
+      render: (record: IOrganizationTeam) => (
+        <div className="row-buttons">
+          <Tooltip title={t('settings')}>
+            <Button
+              style={{ marginRight: '8px' }}
+              size="small"
+              onClick={() => {
+                setSelectedTeam(record.id || '');
+                setIsSettingDrawerOpen(true);
+              }}
+            >
+              <SettingOutlined />
+            </Button>
+          </Tooltip>
+
+          <Tooltip title={t('delete')}>
+            <Popconfirm title={t('popTitle')} onConfirm={() => handleTeamDelete(record.id || '')}>
+              <Button size="small">
+                <DeleteOutlined />
+              </Button>
+            </Popconfirm>
+          </Tooltip>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <Card>
+        <Table
+          rowClassName="team-table-row"
+          className="team-table"
+          size="small"
+          columns={columns}
+          dataSource={teams}
+          rowKey={record => record.id}
+          loading={loading}
+          pagination={{
+            showSizeChanger: true,
+            defaultPageSize: 20,
+            pageSizeOptions: ['5', '10', '15', '20', '50', '100'],
+          }}
+        />
+      </Card>
+      <SettingTeamDrawer
+        teamId={selectedTeam}
+        isSettingDrawerOpen={isSettingDrawerOpen}
+        setIsSettingDrawerOpen={setIsSettingDrawerOpen}
+      />
+    </>
+  );
+};
+
+export default TeamsTable;