style: user activation

src/pages/users/components/add-modal.tsx

@@ -1,8 +1,8 @@
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
-import SealCheckbox from '@/components/seal-form/seal-checkbox';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import SealSwitch from '@/components/seal-form/seal-switch';
 import { PageAction, PasswordReg } from '@/config';
 import { PageActionType } from '@/config/types';
 import { UserOutlined, UserSwitchOutlined } from '@ant-design/icons';
@@ -36,7 +36,7 @@ const AddModal: React.FC<AddModalProps> = ({
       form.setFieldsValue({
         ...data,
         is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER,
-        is_active: data?.is_active !== undefined ? data.is_active : true
+        is_active: !!data?.is_active
       });
     } else if (action === PageAction.CREATE && open) {
       form.setFieldsValue({
@@ -125,7 +125,7 @@ const AddModal: React.FC<AddModalProps> = ({
               rules={[{ required: false }]}
               valuePropName="checked"
             >
-              <SealCheckbox
+              <SealSwitch
                 label={intl.formatMessage({ id: 'users.form.active' })}
                 description={intl.formatMessage({
                   id: 'users.form.active.description'

src/pages/users/config/types.ts

@@ -1,16 +1,3 @@
-export interface ListItem {
-  name: string;
-  is_admin: boolean;
-  full_name: string;
-  id: number;
-  source: string;
-  avatar_url: string;
-  username: string;
-  created_at: string;
-  updated_at: string;
-  is_active?: boolean;
-}
-
 export interface FormData {
   username: string;
   id?: number;
@@ -19,3 +6,11 @@ export interface FormData {
   password: string;
   is_active?: boolean;
 }
+
+export interface ListItem extends FormData {
+  id: number;
+  source: string;
+  avatar_url: string;
+  created_at: string;
+  updated_at: string;
+}

src/pages/users/index.tsx

@@ -20,18 +20,28 @@ import {
   ConfigProvider,
   Empty,
   Input,
+  message,
   Space,
+  Switch,
   Table,
-  message
+  Tag
 } from 'antd';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import styled from 'styled-components';
 import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
 const { Column } = Table;
 
+const StyledSwitch = styled(Switch)`
+  .ant-switch-handle::before {
+    inset-inline-end: 0 !important;
+    inset-inline-start: 0 !important;
+  }
+`;
+
 const ActionList = [
   {
     key: 'edit',
@@ -105,6 +115,7 @@ const Users: React.FC = () => {
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {
       setOpenAddModal(false);
+      message.error(intl.formatMessage({ id: 'common.message.fail' }));
     }
   };
 
@@ -128,6 +139,22 @@ const Users: React.FC = () => {
     }
   };
 
+  const handleActiveChange = async (checked: boolean, row: ListItem) => {
+    try {
+      await updateUser({
+        data: {
+          ...row,
+          is_active: checked,
+          id: row?.id
+        }
+      });
+      handleSearch();
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {
+      message.error(intl.formatMessage({ id: 'common.message.fail' }));
+    }
+  };
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     if (
@@ -304,11 +331,18 @@ const Users: React.FC = () => {
               }}
               render={(text, record: ListItem) => {
                 return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {record.is_active
-                      ? intl.formatMessage({ id: 'users.status.active' })
-                      : intl.formatMessage({ id: 'users.status.inactive' })}
-                  </AutoTooltip>
+                  <>
+                    <Tag
+                      style={{ marginRight: 0 }}
+                      color={record.is_active ? 'success' : 'default'}
+                    >
+                      {intl.formatMessage({
+                        id: record.is_active
+                          ? 'users.status.active'
+                          : 'users.status.inactive'
+                      })}
+                    </Tag>
+                  </>
                 );
               }}
             />