Feat: Quit from jointed team #3759 (#3797)

### What problem does this PR solve?

Feat: Quit from jointed team #3759

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/locales/en.ts

@@ -602,6 +602,8 @@ The above is the content you need to summarize.`,
       teamMembers: 'Team Members',
       joinedTeams: 'Joined Teams',
       sureDelete: 'Are you sure to remove this member?',
+      quit: 'Quit',
+      sureQuit: 'Are you sure you want to quit the team you joined?',
     },
     message: {
       registered: 'Registered!',

web/src/locales/zh-traditional.ts

@@ -569,6 +569,8 @@ export default {
       teamMembers: '團隊成員',
       joinedTeams: '加入的團隊',
       sureDelete: '您確定刪除該成員嗎？',
+      quit: '退出',
+      sureQuit: '確定退出加入的團隊嗎？',
     },
     message: {
       registered: '註冊成功',

web/src/locales/zh.ts

@@ -589,6 +589,8 @@ export default {
       teamMembers: '团队成员',
       joinedTeams: '加入的团队',
       sureDelete: '您确定要删除该成员吗？',
+      quit: '退出',
+      sureQuit: '确定退出加入的团队吗？',
     },
     message: {
       registered: '注册成功',

web/src/pages/user-setting/setting-team/hooks.ts

@@ -69,3 +69,20 @@ export const useHandleAgreeTenant = () => {
 
   return { handleAgree };
 };
+
+export const useHandleQuitUser = () => {
+  const { deleteTenantUser, loading } = useDeleteTenantUser();
+  const showDeleteConfirm = useShowDeleteConfirm();
+  const { t } = useTranslation();
+
+  const handleQuitTenantUser = (userId: string, tenantId: string) => () => {
+    showDeleteConfirm({
+      title: t('setting.sureQuit'),
+      onOk: async () => {
+        deleteTenantUser({ userId, tenantId });
+      },
+    });
+  };
+
+  return { handleQuitTenantUser, loading };
+};

web/src/pages/user-setting/setting-team/tenant-table.tsx

@@ -1,16 +1,18 @@
-import { useListTenant } from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo, useListTenant } from '@/hooks/user-setting-hooks';
 import { ITenant } from '@/interfaces/database/user-setting';
 import { formatDate } from '@/utils/date';
 import type { TableProps } from 'antd';
 import { Button, Space, Table } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { TenantRole } from '../constants';
-import { useHandleAgreeTenant } from './hooks';
+import { useHandleAgreeTenant, useHandleQuitUser } from './hooks';
 
 const TenantTable = () => {
   const { t } = useTranslation();
   const { data, loading } = useListTenant();
   const { handleAgree } = useHandleAgreeTenant();
+  const { data: user } = useFetchUserInfo();
+  const { handleQuitTenantUser } = useHandleQuitUser();
 
   const columns: TableProps<ITenant>['columns'] = [
     {
@@ -46,6 +48,15 @@ const TenantTable = () => {
               </Button>
             </Space>
           );
+        } else if (role === TenantRole.Normal && user.id !== tenant_id) {
+          return (
+            <Button
+              type="link"
+              onClick={handleQuitTenantUser(user.id, tenant_id)}
+            >
+              {t('setting.quit')}
+            </Button>
+          );
         }
       },
     },