Merge pull request #477 from techcomrade/feature/language

feature/language: update frontend_web translation

frontend_web/public/locales/en.json

@@ -1,15 +1,82 @@
 {
-    "page.side-bar.home": "Home",
-    "page.side-bar.management": "Management",
-    "page.side-bar.user-info": "User Information",
-    "page.side-bar.device-info": "Device Information",
-    "page.side-bar.record-info": "Record Information",
-    "page.side-bar.assignment-doctor": "Assignment Patient To Doctor",
-    "page.side-bar.account-info": "Account Information",
-    "page.side-bar.register-info": "Register Information",
-    "page.side-bar.account-management": "Account Management",
-    "page.side-bar.setting": "Settings",
-    "page.breadcrumb.pages": "Pages"
-
-
+    "page": {
+        "side-bar": {
+            "home": "Home",
+            "management": "Management",
+            "user-info": "User Information",
+            "device-info": "Device Information",
+            "record-info": "Record Information",
+            "assignment-doctor": "Assignment Patient To Doctor",
+            "account-info": "Account Information",
+            "register-info": "Register Information",
+            "account-management": "Account Management",
+            "setting": "Settings"
+        },
+        "breadcrumb": {
+            "pages": "Pages"
+        }
+    },
+    "column": {
+            "user-name": "User name",
+            "sex": "Sex",
+            "birth": "Birth",
+            "phone-number": "Phone Number",
+            "role": "Role",
+            "status": "Status",
+            "password": "Password",
+            "device-name": "Device Name",
+            "device-type": "Device Type",
+            "device-info": "Device Information",
+            "date-started": "Date Started",
+            "date-finished": "Date Finished",
+            "record-type": "Record Type",
+            "record-name": "Record Name",
+            "patient-name": "Patient Name",
+            "doctor-name": "Doctor Name"
+    },
+    "button": {
+        "delete": "Delete",
+        "edit": "Edit",
+        "add": "Add",
+        "graph": "Graph",
+        "cancel": "Cancel",
+        "save": "Save",
+        "add-device": "Add Device"
+    },
+    "modal": {
+        "record-graph": "Record Graph"
+    },
+    "homepage": {
+        "number-of-users-are-using": "Number of Users are Using",
+        "paragraph": "Total number of users including patients and doctors and the time they started using the system",
+        "number-of-new-recordings": "Number of new records"
+    },
+    "title": {
+        "user-info": "User Information",
+        "device-info": "Device Information",
+        "record-info": "Medical Record",
+        "assignment-doctor": "Doctor and Patient Assignment Management",
+        "register-info": "User Registration Information"
+    },
+    "status":{
+        "is-active":"Active",
+        "is-empty":"Empty",
+        "is-off": "Off"
+    },
+    "sex":{
+        "Male": "Male",
+        "Female": "Female"
+    },
+    "label":{
+        "device-info": "Device Information",
+        "sampling-frequency": "Sampling Frequency (Hz)",
+        "sensor": "Sensor",
+        "capacity": "Capacity",
+        "frequency": "Frequency",
+        "delay": "Delay",
+        "note": "Note",
+        "storage": "Data Storage",
+        "connection": "Connection Method",
+        "record-count": "Record Count"
+    }
 }

frontend_web/public/locales/vi.json

@@ -1,13 +1,82 @@
 {
-    "page.side-bar.home": "Trang Chủ",
-    "page.side-bar.management": "Quản lý",
-    "page.side-bar.user-info": "Thông Tin Người Dùng",
-    "page.side-bar.device-info": "Thông Tin Thiết Bị",
-    "page.side-bar.record-info": "Thông Tin Bản Ghi",
-    "page.side-bar.assignment-doctor": "Phân Công Bác Sĩ",
-    "page.side-bar.account-info": "Thông Tin Tài Khoản",
-    "page.side-bar.register-info": "Xét Duyệt Tài Khoản",
-    "page.side-bar.account-management": "Tài Khoản",
-    "page.side-bar.setting": "Cài Đặt",
-    "page.breadcrumb.pages": "Trang"
-}
+    "page": {
+        "side-bar": {
+            "home": "Trang Chủ",
+            "management": "Quản lý",
+            "user-info": "Thông Tin Người Dùng",
+            "device-info": "Thông Tin Thiết Bị",
+            "record-info": "Thông Tin Bản Ghi",
+            "assignment-doctor": "Phân Công Bác Sĩ",
+            "account-info": "Thông Tin Tài Khoản",
+            "register-info": "Xét Duyệt Tài Khoản",
+            "account-management": "Tài Khoản",
+            "setting": "Cài Đặt"
+        },
+        "breadcrumb": {
+            "pages": "Trang"
+        }
+    },
+    "column": {
+        "user-name": "Tên người dùng",
+        "sex": "Giới tính",
+        "birth": "Ngày Sinh",
+        "phone-number": "Số Điện Thoại",
+        "role": "Vai Trò",
+        "password": "Mật khẩu",
+        "status": "Trạng Thái",
+        "device-name": "Tên Thiết Bị",
+        "device-type": "Loại Thiết Bị",
+        "device-info": "Thông Tin Thiết Bị",
+        "date-started": "Ngày Bắt Đầu",
+        "date-finished": "Ngày Kết Thúc",
+        "record-type": "Loại Bản Ghi",
+        "record-name": "Tên Bản Ghi",
+        "patient-name": "Tên Bệnh Nhân",
+        "doctor-name": "Tên Bác Sĩ"
+    },
+    "button": {
+        "delete": "Xóa",
+        "edit": "Chỉnh sửa",
+        "add": "Tạo",
+        "graph": "Đồ thị",
+        "cancel": "Hủy bỏ",
+        "save": "Lưu",
+        "add-device": "Thêm thiết bị"
+    },
+    "modal": {
+        "record-graph": "Đồ thị records"
+    },
+    "homepage": {
+        "number-of-users-are-using": "Số lượng người dùng đang hoạt động",
+        "paragraph": "Tổng hợp số lượng người dùng bao gồm bệnh nhân và bác sĩ và thời gian bắt đầu sủ dụng hệ thống",
+        "number-of-new-recordings": "Số lượng bản ghi mới"
+    },
+    "title":{
+        "user-info": "Thông tin người dùng",
+        "device-info":"Thông Tin Thiết Bị",
+        "record-info": "Dữ liệu y tế",
+        "assignment-doctor": "Bảng quản lý phân công bác sĩ, bệnh nhân",
+        "register-info": "Thông tin người dùng đăng ký"
+    },
+    "status":{
+        "is-active":"Đang hoạt động",
+        "is-empty":"Đang trống",
+        "is-off": "Đã nghỉ"
+    },
+    "sex":{
+        "Male": "Nam",
+        "Female": "Nữ"
+    },
+    "label":{
+        "device-info": "Thông tin thiết bị",
+        "sampling-frequency": "Tần số lấy mẫu (Hz)",
+        "sensor": "Cảm biến",
+        "capacity": "Dung lượng",
+        "frequency":"Tần số",
+        "delay": "Độ trễ",
+        "note": "Ghi chú",
+        "storage": "Lưu trữ dữ liệu",
+        "connection": "Phương thức kết nối",
+        "record-count": "Số lượng bản ghi"
+    }
+}

frontend_web/src/components/Modal/ModalChart.js

@@ -8,18 +8,20 @@ import {
   resetChartRecordDataStatus,
 } from "../../redux/reducer/recordSlice";
 import Loading from "../Loading/Loading";
+import { useTranslation } from "react-i18next";
 
 const ModalChart = ({ isOpen, setIsOpen, selectedDevice }) => {
   const [data, setData] = useState();
   const [isLoading, setIsloading] = useState(true);
   const dispatch = useDispatch();
   const dataState = useSelector((state) => state.record);
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (selectedDevice.length > 0) {
       dispatch(getDataRecordById(selectedDevice?.[0]));
     }
-  }, [selectedDevice]);
+  }, [selectedDevice, dispatch]);
 
   useEffect(() => {
     if (dataState.loadChartRecordDataStatus === loadStatus.Success) {
@@ -34,19 +36,18 @@ const ModalChart = ({ isOpen, setIsOpen, selectedDevice }) => {
   };
 
   return (
-    <>
-      <Modal
-        title="Đồ thị records"
-        open={isOpen}
-        cancelText="Quay lại"
-        onCancel={handleCancel}
-        width={1000}
-        centered
-        footer={null}
-      >
-        {isLoading ? <Loading /> : <LineChart rawData={data} />}
-      </Modal>
-    </>
+    <Modal
+      title={t("modal-chart.record-graph")}
+      open={isOpen}
+      cancelText={t("modal-chart.cancel")}
+      onCancel={handleCancel}
+      width={1000}
+      centered
+      footer={null}
+    >
+      {isLoading ? <Loading /> : <LineChart rawData={data} />}
+    </Modal>
   );
 };
+
 export default ModalChart;

frontend_web/src/components/Table/dataTable.js

@@ -11,6 +11,7 @@ import { addKeyElement } from "../../utils/arrayUtils";
 import { Modal } from "antd";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from 'react-i18next';
 
 const { confirm } = Modal;
 
@@ -20,6 +21,7 @@ const DataTable = (props) => {
   const [deleteButton, setDeleteButton] = useState(false);
   const [chartButton, setChartButton] = useState(false);
   const [selectedState, setSelectedRowKeys] = useState([]);
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   // Get data
   useEffect(() => {
@@ -66,12 +68,12 @@ const DataTable = (props) => {
       <div className="list-btn-actions">
         {props.addButton && (
           <Button icon={<PlusOutlined />} onClick={() => props?.addFunction()}>
-            Tạo
+            {t("button.add")}
           </Button>
         )}
         {props.addDeviceButton ? (
           <Button icon={<MobileOutlined />} onClick={() => navigate("/device")}>
-            Thêm thiết bị
+            {t("button.add-device")}
           </Button>
         ) : (
           ""
@@ -83,7 +85,7 @@ const DataTable = (props) => {
             className="edit-btn"
             onClick={() => props?.editFunction(selectedState[0])}
           > 
-            Chỉnh sửa
+            {t("button.edit")}
           </Button>
         )}
         {props.deleteButton && (
@@ -93,7 +95,7 @@ const DataTable = (props) => {
             className="delete-btn"
             onClick={() => deleteFunction(selectedState[0])}
           >
-            Xóa
+            {t("button.delete")}
           </Button>
         )}
         {props?.customButton}
@@ -102,7 +104,7 @@ const DataTable = (props) => {
             disabled ={!chartButton}
             onClick={() => props?.openChart()}
           >
-            Đồ thị
+            {t("button.graph")}
           </Button>
         )}
       </div>

frontend_web/src/components/chart/EChart.js

@@ -2,9 +2,10 @@ import ReactApexChart from "react-apexcharts";
 import { Row, Col, Typography } from "antd";
 import eChart from "./configs/eChart";
 import './chart.scss'
+import { useTranslation } from "react-i18next";
 function EChart() {
   const { Title, Paragraph } = Typography;
-
+  const { t, i18n } = useTranslation();
   const items = [
     {
       Title: "12",
@@ -33,12 +34,12 @@ function EChart() {
         />
       </div>
       <div className="chart-vistior">
-        <Title level={5}>Số lượng người dùng đang hoạt động</Title>
+        <Title level={5}>{t("homepage.number-of-users-are-using")}</Title>
         {/* <Paragraph className="lastweek">
           than last week <span className="bnb2">+30%</span>
         </Paragraph> */}
         <Paragraph className="lastweek">
-          Tổng hợp số lượng người dùng bao gồm bệnh nhân và bác sĩ và thời gian bắt đầu sủ dụng hệ thống
+            {t("homepage.paragraph")}
         </Paragraph>
         <Row gutter>
           {items.map((v, index) => (

frontend_web/src/components/chart/LineChart.js

@@ -3,15 +3,17 @@ import { Typography } from "antd";
 import { MinusOutlined } from "@ant-design/icons";
 import lineChart from "./configs/lineChart";
 import "./chart.scss";
+import { useTranslation } from "react-i18next";
 
 function LineChart() {
   const { Title, Paragraph } = Typography;
+  const { t, i18n } = useTranslation();
 
   return (
     <>
       <div className="linechart">
         <div>
-          <Title level={5}>Số lượng bản ghi mới</Title>
+          <Title level={5}>{t("homepage.number-of-new-recordings")}</Title>
           {/* <Paragraph className="lastweek">
             than last week <span className="bnb2">+20%</span>
           </Paragraph> */}

frontend_web/src/layouts/Header/header.js

@@ -36,7 +36,7 @@ const LanguageComponent = () => {
   };
   const items = [
     {
-      label: <a onClick={()=>changeLanguage('en')}>Tiếng Anh</a>,
+      label: <a onClick={()=>changeLanguage('en')}>English</a>,
       key: "1",
     },
     {

frontend_web/src/models/table/device.table.js

@@ -1,10 +1,11 @@
 import { createDevice, deleteDevice, getDevice, updateDevice, resetLoadDataStatus, resetCreateDataStatus, resetUpdateDataStatus, resetDeleteDataStatus, } from "../../redux/reducer/deviceSlice";
-
+import { useTranslation } from "react-i18next";
 class DeviceData {
     getColumnShow() {
+        // const { t } = useTranslation();
       const columns = [
         {
-            title: 'Tên thiết bị',
+            title: "Tên thiết bị",
             dataIndex: 'device_name',
             key: 'device_name',
             type: 'text',