feat: add user activation control

- Add is_active field to user model - Create SealCheckbox component with clickable container - Add activation control to user modal - Display user status in users table - Add localization strings for activation features
2025-10-09 10:11:05 +08:00
parent 8e77e19631
commit 521bf211a2
8 changed files with 158 additions and 20 deletions
@@ -0,0 +1,74 @@
+import { Checkbox, Form, type CheckboxProps } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import LabelInfo from './components/label-info';
+import { SealFormItemProps } from './types';
+import Wrapper from './wrapper';
+
+const Inner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-inline: 14px;
+  cursor: pointer;
+  .ant-checkbox-wrapper {
+    margin-top: 0 !important;
+  }
+`;
+
+interface SealCheckboxProps extends CheckboxProps, SealFormItemProps {}
+
+const SealCheckbox: React.FC<SealCheckboxProps> = (props) => {
+  const {
+    label,
+    checked,
+    required,
+    description,
+    isInFormItems = true,
+    defaultChecked,
+    checkStatus,
+    ...rest
+  } = props;
+
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  const handleChange = (e: any) => {
+    props.onChange?.(e);
+  };
+
+  const handleContainerClick = () => {
+    // Create a synthetic event to toggle the checkbox
+    const syntheticEvent = {
+      target: {
+        checked: !checked
+      }
+    };
+    handleChange(syntheticEvent);
+  };
+
+  return (
+    <Wrapper
+      required={required}
+      status={checkStatus || status}
+      className="no-focus"
+    >
+      <Inner onClick={handleContainerClick}>
+        <LabelInfo label={label} description={description}></LabelInfo>
+        <Checkbox
+          {...rest}
+          defaultChecked={defaultChecked}
+          style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
+          checked={checked}
+          onChange={handleChange}
+        />
+      </Inner>
+    </Wrapper>
+  );
+};
+
+export default SealCheckbox;
@@ -5,6 +5,11 @@ export default {
  'users.form.create': 'New User',
  'users.table.username': 'User Name',
  'users.table.role': 'Role',
+  'users.table.status': 'Status',
+  'users.status.active': 'Active',
+  'users.status.inactive': 'Inactive',
+  'users.form.active': 'Active account',
+  'users.form.active.description': 'Enable or disable this user account',
  'users.form.fullname': 'Full Name',
  'users.form.source': 'Source',
  'users.table.user': 'users',
@@ -5,6 +5,12 @@ export default {
  'users.form.create': 'ユーザーを追加',
  'users.table.username': 'ユーザー名',
  'users.table.role': '役割',
+  'users.table.status': 'ステータス',
+  'users.status.active': 'アクティブ',
+  'users.status.inactive': '非アクティブ',
+  'users.form.active': 'アクティブアカウント',
+  'users.form.active.description':
+    'このユーザーアカウントを有効または無効にする',
  'users.form.fullname': 'フルネーム',
  'users.form.source': 'ソース',
  'users.table.user': 'ユーザー',
@@ -5,6 +5,12 @@ export default {
  'users.form.create': 'Новый пользователь',
  'users.table.username': 'Имя пользователя',
  'users.table.role': 'Роль',
+  'users.table.status': 'Статус',
+  'users.status.active': 'Активен',
+  'users.status.inactive': 'Неактивен',
+  'users.form.active': 'Активная учетная запись',
+  'users.form.active.description':
+    'Включить или отключить эту учетную запись пользователя',
  'users.form.fullname': 'Полное имя',
  'users.form.source': 'Источник',
  'users.table.user': 'пользователи',
@@ -5,6 +5,11 @@ export default {
  'users.form.create': '新建用户',
  'users.table.username': '用户名',
  'users.table.role': '角色',
+  'users.table.status': '状态',
+  'users.status.active': '激活',
+  'users.status.inactive': '禁用',
+  'users.form.active': '激活账户',
+  'users.form.active.description': '启用或禁用此用户账户',
  'users.form.fullname': '全名',
  'users.form.source': '来源',
  'users.table.user': '用户',
@@ -1,5 +1,6 @@
 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 { PageAction, PasswordReg } from '@/config';
@@ -34,11 +35,13 @@ const AddModal: React.FC<AddModalProps> = ({
    if (action === PageAction.EDIT && open) {
      form.setFieldsValue({
        ...data,
-        is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER
+        is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER,
+        is_active: data?.is_active !== undefined ? data.is_active : true
      });
    } else if (action === PageAction.CREATE && open) {
      form.setFieldsValue({
-        is_admin: UserRoles.USER
+        is_admin: UserRoles.USER,
+        is_active: true
      });
    }
  };
@@ -93,24 +96,44 @@ const AddModal: React.FC<AddModalProps> = ({
            label={intl.formatMessage({ id: 'users.form.fullname' })}
          ></SealInput.Input>
        </Form.Item>
-        <Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
-          <SealSelect label={intl.formatMessage({ id: 'users.table.role' })}>
-            {UserRolesOptions.map((item) => {
-              return (
-                <Select.Option value={item.value} key={item.value}>
-                  {item.value === UserRoles.ADMIN ? (
-                    <UserSwitchOutlined className="size-16" />
-                  ) : (
-                    <UserOutlined className="size-16" />
-                  )}
-                  <span className="m-l-5">
-                    {intl.formatMessage({ id: item.label })}
-                  </span>
-                </Select.Option>
-              );
-            })}
-          </SealSelect>
-        </Form.Item>
+        <div style={{ display: 'flex', gap: '16px' }}>
+          <div style={{ flex: 1 }}>
+            <Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
+              <SealSelect
+                label={intl.formatMessage({ id: 'users.table.role' })}
+              >
+                {UserRolesOptions.map((item) => {
+                  return (
+                    <Select.Option value={item.value} key={item.value}>
+                      {item.value === UserRoles.ADMIN ? (
+                        <UserSwitchOutlined className="size-16" />
+                      ) : (
+                        <UserOutlined className="size-16" />
+                      )}
+                      <span className="m-l-5">
+                        {intl.formatMessage({ id: item.label })}
+                      </span>
+                    </Select.Option>
+                  );
+                })}
+              </SealSelect>
+            </Form.Item>
+          </div>
+          <div style={{ flex: 1 }}>
+            <Form.Item<FormData>
+              name="is_active"
+              rules={[{ required: false }]}
+              valuePropName="checked"
+            >
+              <SealCheckbox
+                label={intl.formatMessage({ id: 'users.form.active' })}
+                description={intl.formatMessage({
+                  id: 'users.form.active.description'
+                })}
+              />
+            </Form.Item>
+          </div>
+        </div>

        <Form.Item<FormData>
          name="password"
@@ -8,6 +8,7 @@ export interface ListItem {
  username: string;
  created_at: string;
  updated_at: string;
+  is_active?: boolean;
 }

 export interface FormData {
@@ -16,4 +17,5 @@ export interface FormData {
  is_admin: boolean | string;
  full_name: string;
  password: string;
+  is_active?: boolean;
 }
@@ -295,6 +295,23 @@ const Users: React.FC = () => {
                );
              }}
            />
+            <Column
+              title={intl.formatMessage({ id: 'users.table.status' })}
+              dataIndex="is_active"
+              key="status"
+              ellipsis={{
+                showTitle: false
+              }}
+              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>
+                );
+              }}
+            />
            <Column
              title={intl.formatMessage({ id: 'common.table.createTime' })}
              dataIndex="created_at"