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/common/invite-team-members/invite-team-members.tsx
+++ b/worklenz-frontend/src/components/common/invite-team-members/invite-team-members.tsx
@@ -0,0 +1,180 @@
+import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from 'antd';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { toggleInviteMemberDrawer, triggerTeamMembersRefresh } from '../../../features/settings/member/memberSlice';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect, useCallback } from 'react';
+import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';
+import { IJobTitle } from '@/types/job.types';
+import { teamMembersApiService } from '@/api/team-members/teamMembers.api.service';
+import { ITeamMemberCreateRequest } from '@/types/teamMembers/team-member-create-request';
+
+interface FormValues {
+  email: string[];
+  jobTitle: string;
+  access: 'member' | 'admin';
+}
+
+const InviteTeamMembers = () => {
+  const [searching, setSearching] = useState(false);
+  const [jobTitles, setJobTitles] = useState<IJobTitle[]>([]);
+  const [emails, setEmails] = useState<string[]>([]);
+  const [selectedJobTitle, setSelectedJobTitle] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const [form] = Form.useForm<FormValues>();
+
+  const { t } = useTranslation('settings/team-members');
+  const isDrawerOpen = useAppSelector(state => state.memberReducer.isInviteMemberDrawerOpen);
+  const dispatch = useAppDispatch();
+
+  const handleSearch = useCallback(
+    async (value: string) => {
+      try {
+        setSearching(true);
+        const res = await jobTitlesApiService.getJobTitles(1, 10, null, null, value || null);
+        if (res.done) {
+          setJobTitles(res.body.data || []);
+        }
+      } catch (error) {
+        message.error(t('Failed to fetch job titles'));
+      } finally {
+        setSearching(false);
+      }
+    },
+    [t]
+  );
+
+  useEffect(() => {
+    if (isDrawerOpen) {
+      handleSearch('');
+    }
+  }, [isDrawerOpen, handleSearch]);
+
+  const handleFormSubmit = async (values: FormValues) => {
+    try {
+      setLoading(true);
+      const body: ITeamMemberCreateRequest = {
+        job_title: selectedJobTitle,
+        emails: emails,
+        is_admin: values.access === 'admin',
+      };
+      const res = await teamMembersApiService.createTeamMember(body);
+      if (res.done) {
+        form.resetFields();
+        setEmails([]);
+        setSelectedJobTitle(null);
+        dispatch(triggerTeamMembersRefresh()); // Trigger refresh in TeamMembersSettings
+        dispatch(toggleInviteMemberDrawer());
+      }
+    } catch (error) {
+      message.error(t('createMemberErrorMessage'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    form.resetFields();
+    dispatch(toggleInviteMemberDrawer());
+  };
+
+  const handleEmailChange = (value: string[]) => {
+    setEmails(value);
+  };
+
+  return (
+    <Drawer
+      title={
+        <Typography.Text strong style={{ fontSize: 16 }}>
+          {t('addMemberDrawerTitle')}
+        </Typography.Text>
+      }
+      open={isDrawerOpen}
+      onClose={handleClose}
+      destroyOnClose
+      afterOpenChange={visible => visible && handleSearch('')}
+      width={400}
+      loading={loading}
+      footer={
+        <Flex justify="end">
+          <Button type="primary" onClick={form.submit}>
+            {t('addToTeamButton')}
+          </Button>
+        </Flex>
+      }
+    >
+      <Form
+        form={form}
+        onFinish={handleFormSubmit}
+        layout="vertical"
+        initialValues={{ access: 'member' }}
+      >
+        <Form.Item
+          name="emails"
+          label={t('memberEmailLabel')}
+          rules={[
+            {
+              type: 'array',
+              required: true,
+              validator: (_, value) => {
+                if (!value?.length) return Promise.reject(t('memberEmailRequiredError'));
+                return Promise.resolve();
+              },
+            },
+          ]}
+        >
+          <Flex vertical gap={4}>
+            <Select
+              mode="tags"
+              style={{ width: '100%' }}
+              placeholder={t('memberEmailPlaceholder')}
+              onChange={handleEmailChange}
+              notFoundContent={
+                <Typography.Text type="secondary">{t('noResultFound')}</Typography.Text>
+              }
+              tokenSeparators={[',', ' ', ';']}
+            />
+            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+              {t('addMemberEmailHint')}
+            </Typography.Text>
+          </Flex>
+        </Form.Item>
+
+        <Form.Item label={t('jobTitleLabel')} name="jobTitle">
+          <AutoComplete
+            options={jobTitles.map(job => ({
+              id: job.id,
+              label: job.name,
+              value: job.name,
+            }))}
+            allowClear
+            onSearch={handleSearch}
+            placeholder={t('jobTitlePlaceholder')}
+            onChange={(value, option) => {
+              form.setFieldsValue({ jobTitle: option?.label || value });
+            }}
+            onSelect={value => setSelectedJobTitle(value)}
+            dropdownRender={menu => (
+              <div>
+                {searching && <Spin size="small" />}
+                {menu}
+              </div>
+            )}
+          />
+        </Form.Item>
+
+        <Form.Item label={t('memberAccessLabel')} name="access">
+          <Select
+            options={[
+              { value: 'member', label: t('memberText') },
+              { value: 'admin', label: t('adminText') },
+            ]}
+          />
+        </Form.Item>
+      </Form>
+    </Drawer>
+  );
+};
+
+export default InviteTeamMembers;