Merge pull request #24 from Dialogue-Bot/DIAL-20-refesh-token-bot-client-serrver

feat: add missing lang some component

Author: hi02102002

client/src/components/pages/channels/data-toolbar.tsx

@@ -38,7 +38,7 @@ export const DataToolbar = () => {
                   <Trans
                      i18nKey="channel:add_channel_description"
                      components={{
-                        a: <Link to="/channels" />,
+                        a: <Link to="/channels" className="link" />,
                      }}
                   />
                </SheetDescription>

client/src/components/pages/channels/row-action.tsx

@@ -18,9 +18,10 @@ import { useDeleteChannel, useUpdateChannel } from '@/hooks/channel';
 import { useBodyOverflow } from '@/hooks/use-body-overflow';
 import { TChannelWithChannelType } from '@/types/channel';
 import { Row } from '@tanstack/react-table';
-import { Link, MoreHorizontal } from 'lucide-react';
+import { MoreHorizontal } from 'lucide-react';
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 type Props = {
    row: Row<TChannelWithChannelType>;
@@ -72,7 +73,7 @@ const RowActions = ({ row }: Props) => {
                      <Trans
                         i18nKey="channel:update_channel_description"
                         components={{
-                           a: <Link to="/channels" />,
+                           a: <Link to="/channels" className="link" />,
                         }}
                      />
                   </SheetDescription>

client/src/components/ui/confirm.tsx

@@ -10,6 +10,7 @@ import {
    AlertDialogTitle,
    AlertDialogTrigger,
 } from './alert-dialog';
+import { useTranslation } from 'react-i18next';
 
 export type ConfirmProps = {
    onConfirm?: (close: () => void) => void;
@@ -26,20 +27,23 @@ export function Confirm({
    children,
    onCancel,
    onConfirm,
-   textCancel = 'Huỷ bỏ',
-   textConfirm = 'Xác nhận',
+   textCancel,
+   textConfirm,
    description,
-   title = 'Bạn có chắc chắn?',
+   title,
    isLoading,
 }: ConfirmProps) {
    const [isOpen, setIsOpen] = useState(false);
+   const { t } = useTranslation('common');
 
    return (
       <AlertDialog onOpenChange={setIsOpen} open={isOpen}>
          <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
          <AlertDialogContent>
             <AlertDialogHeader>
-               <AlertDialogTitle>{title}</AlertDialogTitle>
+               <AlertDialogTitle>
+                  {title ? title : t('dialog_confirm_title')}
+               </AlertDialogTitle>
                {description ? (
                   <AlertDialogDescription>{description}</AlertDialogDescription>
                ) : null}
@@ -52,7 +56,7 @@ export function Confirm({
                      onCancel?.();
                   }}
                >
-                  {textCancel}
+                  {textCancel ? textCancel : t('cancel')}
                </AlertDialogCancel>
                <AlertDialogAction
                   isLoading={isLoading}
@@ -62,7 +66,7 @@ export function Confirm({
                      });
                   }}
                >
-                  {textConfirm}
+                  {textConfirm ? textConfirm : t('confirm')}
                </AlertDialogAction>
             </AlertDialogFooter>
          </AlertDialogContent>

client/src/components/ui/data-table/data-table-pagination.tsx

@@ -14,6 +14,7 @@ import {
 } from '../select';
 import { Button } from '../button';
 import { Confirm } from '../confirm';
+import { useTranslation } from 'react-i18next';
 
 interface DataTablePaginationProps<TData> {
    table: Table<TData>;
@@ -26,29 +27,35 @@ export function DataTablePagination<TData>({
    onDelete,
    isLoadingDelete,
 }: DataTablePaginationProps<TData>) {
+   const { t } = useTranslation('dataTable');
    return (
       <div className="flex items-center justify-between px-2">
          <div className="flex items-center gap-2">
             <div className="flex-1 text-sm text-muted-foreground whitespace-nowrap">
-               {table.getFilteredSelectedRowModel().rows.length} trên{' '}
-               {table.getFilteredRowModel().rows.length} dòng được chọn.
+               {t('row_selected', {
+                  selected: table.getFilteredSelectedRowModel().rows.length,
+                  total: table.getFilteredRowModel().rows.length,
+               })}
             </div>
             {onDelete && table.getFilteredSelectedRowModel().rows.length ? (
                <Confirm
-                  description="Hành động này không thể hoàn tác. Bạn có chắc chắn muốn xoá?"
+                  description={t('remove_confirm_desc')}
                   isLoading={isLoadingDelete}
                   onConfirm={onDelete}
-                  title="Xoá những dòng đã chọn?"
+                  title={t('remove_confirm_title')}
                >
                   <span className=" text-sm text-red-500 cursor-pointer">
-                     Xoá {table.getFilteredSelectedRowModel().rows.length} dòng
+                     {t('remove_row', {
+                        selected:
+                           table.getFilteredSelectedRowModel().rows.length,
+                     })}
                   </span>
                </Confirm>
             ) : null}
          </div>
          <div className="flex items-center space-x-6 lg:space-x-8">
             <div className="flex items-center space-x-2">
-               <p className="text-sm font-medium">Dòng trên trang</p>
+               <p className="text-sm font-medium">{t('row_per_page')}:</p>
                <Select
                   onValueChange={(value) => {
                      table.setPageSize(Number(value));
@@ -70,8 +77,10 @@ export function DataTablePagination<TData>({
                </Select>
             </div>
             <div className="flex w-[100px] items-center justify-center text-sm font-medium whitespace-nowrap">
-               Trang {table.getState().pagination.pageIndex + 1} trên{' '}
-               {table.getPageCount()}
+               {t('page_of', {
+                  current: table.getState().pagination.pageIndex + 1,
+                  total: table.getPageCount(),
+               })}
             </div>
             <div className="flex items-center space-x-2">
                <Button

client/src/components/ui/data-table/data-table.tsx

@@ -28,6 +28,7 @@ import {
    TableRow,
 } from '../table';
 import { DataTablePagination } from './data-table-pagination';
+import { useTranslation } from 'react-i18next';
 
 interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[];
@@ -56,6 +57,7 @@ export function DataTable<TData, TValue>({
       []
    );
    const [sorting, setSorting] = React.useState<SortingState>([]);
+   const { t } = useTranslation(['dataTable']);
 
    const { state, ..._opts } = opts || {};
 
@@ -135,7 +137,7 @@ export function DataTable<TData, TValue>({
                            className="h-24 text-center"
                            colSpan={columns.length}
                         >
-                           Không có kết quả.
+                           {t('no_data')}
                         </TableCell>
                      </TableRow>
                   )}

client/src/constants/index.ts

@@ -54,7 +54,7 @@ export const ROUTES = {
       },
       SETTING: {
          INDEX: '/settings',
-         MAIL: '/settings/email',
+         MAIL: '/settings/mail',
          PROFILES: '/settings/profiles',
       },
    },

client/src/i18n/resources.ts

@@ -21,6 +21,8 @@ import tableColEn from '@/locales/en/table-cols.json';
 import tableColVi from '@/locales/vi/table-cols.json';
 import channelEn from '@/locales/en/channel.json';
 import channelVi from '@/locales/vi/channel.json';
+import tableEn from '@/locales/en/table.json';
+import tableVi from '@/locales/vi/table.json';
 
 const resources = {
    [ELang.EN]: {
@@ -35,6 +37,7 @@ const resources = {
       mail: mailEN,
       tableCols: tableColEn,
       channel: channelEn,
+      dataTable: tableEn,
    },
    [ELang.VI]: {
       common: commonVI,
@@ -48,6 +51,7 @@ const resources = {
       mail: mailVI,
       tableCols: tableColVi,
       channel: channelVi,
+      dataTable: tableVi,
    },
 } as const;
 

client/src/locales/en/common.json

@@ -18,9 +18,16 @@
    "channels": "Channels",
    "search": "Search",
    "row_actions": {
-      "update": "Cập nhật",
-      "delete": "Xóa"
+      "update": "Update",
+      "delete": "Delete"
    },
    "remove": "Remove",
-   "cancel": "Cancel"
+   "cancel": "Cancel",
+   "submit": "Submit",
+   "yes": "Yes",
+   "no": "No",
+   "ok": "OK",
+   "dialog_confirm_title": "Confirm",
+   "dialog_confirm_desc": "Are you sure?",
+   "confirm": "Confirm"
 }

client/src/locales/en/table.json

@@ -0,0 +1,12 @@
+{
+   "asc": "Asc",
+   "desc": "Desc",
+   "hide_column": "Hide column",
+   "row_selected": "{{selected}} of {{total}} row(s) selected",
+   "row_per_page": "Rows per page",
+   "page_of": "Page {{current}} of {{total}}",
+   "remove_row": "Remove {{selected}} row(s)",
+   "no_data": "No data available!",
+   "remove_confirm_title": "Remove selected rows?",
+   "remove_confirm_desc": "This action cannot be undone. Are you sure?"
+}

client/src/locales/vi/common.json

@@ -21,5 +21,12 @@
       "delete": "Xóa"
    },
    "remove": "Xóa",
-   "cancel": "Hủy"
+   "cancel": "Hủy",
+   "submit": "Xác nhận",
+   "yes": "Có",
+   "no": "Không",
+   "ok": "OK",
+   "dialog_confirm_title": "Xác nhận",
+   "dialog_confirm_desc": "Bạn có chắc chắn không?",
+   "confirm": "Xác nhận"
 }