diff --git a/bbbeasy-backend/app/src/Actions/Labels/Edit.php b/bbbeasy-backend/app/src/Actions/Labels/Edit.php index 85fee0b9..9bc058fc 100644 --- a/bbbeasy-backend/app/src/Actions/Labels/Edit.php +++ b/bbbeasy-backend/app/src/Actions/Labels/Edit.php @@ -55,6 +55,7 @@ public function save($f3, $params): void if ($label->valid()) { $dataChecker = new DataChecker(); $dataChecker->verify($form['name'], Validator::notEmpty()->setName('name')); + $dataChecker->verify($form['name'], Validator::length(1, 32)->setName('name')); $dataChecker->verify($form['color'], Validator::notEmpty()->setName('color')); if ($dataChecker->allValid()) { diff --git a/bbbeasy-frontend/src/App-webapp.css b/bbbeasy-frontend/src/App-webapp.css index cfd1ca74..343c11f4 100644 --- a/bbbeasy-frontend/src/App-webapp.css +++ b/bbbeasy-frontend/src/App-webapp.css @@ -1565,10 +1565,13 @@ fieldset { .edit-room-form { display: block !important; } - +div.error-message-Label{ + max-width: max-content; + margin-bottom: 10px; + margin-left: 10px; +} .room-title { max-width: 150px !important; overflow: hidden; text-overflow: ellipsis; } - diff --git a/bbbeasy-frontend/src/components/EditableTableCell.tsx b/bbbeasy-frontend/src/components/EditableTableCell.tsx index 1d884f9a..0d5b1d36 100644 --- a/bbbeasy-frontend/src/components/EditableTableCell.tsx +++ b/bbbeasy-frontend/src/components/EditableTableCell.tsx @@ -97,6 +97,14 @@ const EditableTableCell: React.FC = ({ required: true, message: t('required_' + index), }, + { + min: 1, + message: , + }, + { + max: 32, + message: , + }, { ...editRules }, ]} > diff --git a/bbbeasy-frontend/src/components/Labels.tsx b/bbbeasy-frontend/src/components/Labels.tsx index 49e9fa53..95c84866 100644 --- a/bbbeasy-frontend/src/components/Labels.tsx +++ b/bbbeasy-frontend/src/components/Labels.tsx @@ -23,7 +23,7 @@ import { t } from 'i18next'; import { PageHeader } from '@ant-design/pro-layout'; -import { Badge, Button, Form, Input, Modal, Popconfirm, Space, Typography, ColorPicker, theme } from 'antd'; +import {Badge, Button, Form, Input, Modal, Popconfirm, Space, Typography, ColorPicker, theme, Alert} from 'antd'; import { DeleteOutlined, EditOutlined, QuestionCircleOutlined, WarningOutlined } from '@ant-design/icons'; import Notifications from './Notifications'; @@ -40,6 +40,8 @@ import LabelsService from '../services/labels.service'; import { TableColumnType } from '../types/TableColumnType'; import { LabelType } from '../types/LabelType'; +import EN_US from "../locale/en-US.json"; +import {isEmpty} from "lodash"; const { Link } = Typography; @@ -61,6 +63,8 @@ const Labels = () => { const [cancelVisibility, setCancelVisibility] = React.useState(false); const [isModalVisible, setIsModalVisible] = React.useState(false); const [color, setColor] = React.useState(''); + const [isErrorValidation , setIsErrorValidation] = React.useState(false); + const [errorMsg, setErrorMsg] = React.useState(''); const { token } = theme.useToken(); const getLabels = () => { setLoading(true); @@ -150,6 +154,9 @@ const Labels = () => { onFocus={() => { setCancelVisibility(false); }} + style={{ + borderColor: dataIndex == "name" && isErrorValidation ? "red" : null, + }} /> } errorsEdit={errorsEdit} @@ -220,8 +227,8 @@ const Labels = () => { const saveEdit = async (record: LabelType, key: number) => { try { const formValues: object = await editForm.validateFields(); - if (!CompareRecords(record, editForm.getFieldsValue(true))) { + setIsErrorValidation(false); setLoading(true); setErrorsEdit({}); LabelsService.edit_label(formValues, key) @@ -263,6 +270,26 @@ const Labels = () => { } }; + + const dataValidation = (record: LabelType, key: number) => { + + const newLabel = editForm.getFieldsValue(true); + if(isEmpty(newLabel.name)){ + setIsErrorValidation(true); + setErrorMsg("name.required"); + return; + } + + if(newLabel.name.length > 32){ + setIsErrorValidation(true); + setErrorMsg("label_name.maxSize"); + return; + } + + saveEdit(record,key); + + }; + const columns: TableColumnType[] = [ { title: t('name_col'), @@ -329,7 +356,7 @@ const Labels = () => { disabled={loading} size="middle" type="primary" - onClick={() => saveEdit(record, record.key)} + onClick={() => dataValidation(record, record.key)} > @@ -405,15 +432,22 @@ const Labels = () => { /> )} - - + {isErrorValidation ? +
+ } showIcon/> +
+ : null} + + + + ); };