Fix name size from edit Label (in backend and frontend).

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()) {

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;
 }
-

bbbeasy-frontend/src/components/EditableTableCell.tsx

@@ -97,6 +97,14 @@ const EditableTableCell: React.FC<Props> = ({
                             required: true,
                             message: t('required_' + index),
                         },
+                        {
+                            min: 1,
+                            message: <Trans i18nKey="label_name.size" />,
+                        },
+                        {
+                            max: 32,
+                            message: <Trans i18nKey="label_name.maxSize" />,
+                        },
                         { ...editRules },
                     ]}
                 >

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<boolean>(false);
     const [isModalVisible, setIsModalVisible] = React.useState<boolean>(false);
     const [color, setColor] = React.useState<string>('');
+    const [isErrorValidation , setIsErrorValidation] = React.useState<boolean>(false);
+    const [errorMsg, setErrorMsg] = React.useState<string>('');
     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)}
                         >
                             <Trans i18nKey="save" />
                         </Button>
@@ -405,15 +432,22 @@ const Labels = () => {
                 />
             )}
 
-            <EditableTable
-                EditableCell={EditableCell}
-                editForm={editForm}
-                mergedColumns={mergedColumns}
-                dataSource={data}
-                loading={loading}
-                notFoundContent="no_labels"
-            />
-        </>
+                    {isErrorValidation  ?
+                            <div className="error-message-Label">
+                                <Alert type="error"  message={<Trans i18nKey={errorMsg} />} showIcon/>
+                            </div>
+                            : null}
+                    <EditableTable
+                        EditableCell={EditableCell}
+                        editForm={editForm}
+                        mergedColumns={mergedColumns}
+                        dataSource={data}
+                        loading={loading}
+                        notFoundContent="no_labels"
+                    />
+
+            </>
+
     );
 };