xin-school/web/pages/member/address/index.tsx

import { Tag, Typography } from 'antd';
import React from 'react';
import XinTable from '@/components/XinTable';
import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings';
import type IUserAddress from '@/domain/iUserAddress';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

const { Title, Text } = Typography;
dayjs.extend(relativeTime);

const Table: React.FC = () => {
  const { t } = useTranslation();

  const columns: XinTableColumn<IUserAddress>[] = [
    {
      title: t('member.address.id'),
      dataIndex: 'id',
      hideInForm: true,
      sorter: true,
      align: 'center',
      width: 80,
    },
    {
      title: t('member.address.user_id'),
      dataIndex: 'user_id',
      valueType: 'digit',
      align: 'center',
      required: true,
      rules: [{ required: true, message: t('member.address.user_id.required') }],
      render: (_, record) => {
        if (record.user) {
          return `${record.user.nickname || record.user.username} (${record.user.mobile || '-'})`;
        }
        return `ID: ${record.user_id}`;
      },
    },
    {
      title: t('member.address.name'),
      dataIndex: 'name',
      valueType: 'text',
      align: 'center',
      required: true,
      rules: [{ required: true, message: t('member.address.name.required') }],
    },
    {
      title: t('member.address.mobile'),
      dataIndex: 'mobile',
      valueType: 'text',
      align: 'center',
      required: true,
      rules: [{ required: true, message: t('member.address.mobile.required') }],
    },
    {
      title: t('member.address.province'),
      dataIndex: 'province',
      valueType: 'text',
      align: 'center',
      required: true,
      rules: [{ required: true, message: t('member.address.province.required') }],
      hideInSearch: true,
    },
    {
      title: t('member.address.city'),
      dataIndex: 'city',
      valueType: 'text',
      align: 'center',
      required: true,
      rules: [{ required: true, message: t('member.address.city.required') }],
      hideInSearch: true,
    },
    {
      title: t('member.address.district'),
      dataIndex: 'district',
      valueType: 'text',
      align: 'center',
      required: true,
      rules: [{ required: true, message: t('member.address.district.required') }],
      hideInSearch: true,
    },
    {
      title: t('member.address.detail'),
      dataIndex: 'detail',
      valueType: 'text',
      align: 'center',
      required: true,
      rules: [{ required: true, message: t('member.address.detail.required') }],
      hideInSearch: true,
    },
    {
      title: t('member.address.full_address'),
      dataIndex: 'full_address',
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
      render: (_, record) =>
        [record.province, record.city, record.district, record.detail]
          .filter(Boolean)
          .join(''),
    },
    {
      title: t('member.address.is_default'),
      dataIndex: 'is_default',
      valueType: 'switch',
      align: 'center',
      render: (value: number) =>
        value === 1 ? (
          <Tag color="blue">{t('member.address.is_default.1')}</Tag>
        ) : (
          <Tag>{t('member.address.is_default.0')}</Tag>
        ),
    },
    {
      title: t('member.address.created_at'),
      hideInForm: true,
      hideInSearch: true,
      dataIndex: 'created_at',
      align: 'center',
      render: (value: string) => (value ? dayjs(value).fromNow() : '-'),
    },
    {
      title: t('member.address.updated_at'),
      hideInForm: true,
      hideInSearch: true,
      dataIndex: 'updated_at',
      align: 'center',
      render: (value: string) => (value ? dayjs(value).fromNow() : '-'),
    },
  ];

  const tableProps: XinTableProps<IUserAddress> = {
    api: '/member/address',
    columns,
    rowKey: 'id',
    accessName: 'member.address',
    scroll: { x: 1400 },
    formProps: {
      grid: true,
      colProps: { span: 12 },
      rowProps: { gutter: [30, 0] },
      layout: 'vertical',
    },
    modalProps: {
      width: 800,
    },
    cardProps: {
      variant: 'borderless',
    },
    pagination: {
      size: 'small',
      style: { marginBottom: 0 },
    },
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>{t('member.address.page.title')}</Title>
        <Text type="secondary">{t('member.address.page.description')}</Text>
      </div>
      <XinTable<IUserAddress> {...tableProps} />
    </>
  );
};

export default Table;