From 64d0dcd59b6f6ca0075555207ec999eec509bafe Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:24:10 +0300
Subject: [PATCH] Small UI improvements

---
 rsconcept/frontend/src/pages/CreateRSFormPage.tsx   | 13 +++++++------
 .../pages/RSFormPage/EditorRSForm/FormRSForm.tsx    |  7 +++++--
 rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx  |  8 ++++----
 rsconcept/frontend/src/utils/backendAPI.ts          |  4 ++--
 rsconcept/frontend/src/utils/constants.ts           | 12 ++++++++++--
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
index b5f1c1fa..c104cb65 100644
--- a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
+++ b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
@@ -18,7 +18,7 @@ import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { LibraryItemType } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
-import { EXTEOR_TRS_FILE } from '@/utils/constants';
+import { EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
 
 function CreateRSFormPage() {
   const router = useConceptNavigation();
@@ -97,17 +97,18 @@ function CreateRSFormPage() {
     </Overlay>
     {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
 
-    <TextInput
+    <TextInput required={!file}
       label='Полное название'
       placeholder={file && 'Загрузить из файла'}
-      required={!file}
       value={title}
       onChange={event => setTitle(event.target.value)}
     />
-    <TextInput dense
-      label='Сокращение' 
+    <TextInput required={!file}
+      label='Сокращение'
       placeholder={file && 'Загрузить из файла'}
-      required={!file}
+      dimensions='w-[14rem]'
+      pattern={patterns.alias}
+      tooltip={`не более ${limits.alias_len} символов`}
       value={alias}
       onChange={event => setAlias(event.target.value)}
     />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
index 77b31977..d38b5320 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
@@ -11,6 +11,7 @@ import { SaveIcon } from '@/components/Icons';
 import { useRSForm } from '@/context/RSFormContext';
 import { LibraryItemType } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
+import { limits, patterns } from '@/utils/constants';
 
 interface FormRSFormProps {
   id?: string
@@ -87,9 +88,11 @@ function FormRSForm({
       disabled={!isMutable}
       onChange={event => setTitle(event.target.value)}
     />
-    <TextInput required dense
+    <TextInput required
       label='Сокращение' 
-      dimensions='w-full'
+      dimensions='w-[14rem]'
+      pattern={patterns.alias}
+      tooltip={`не более ${limits.alias_len} символов`}
       disabled={!isMutable}
       value={alias}
       onChange={event => setAlias(event.target.value)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 6017d031..3dc1e508 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -101,13 +101,13 @@ function RSTabs() {
 
   useLayoutEffect(() => {
     if (schema) {
-      const oldTitle = document.title
-      document.title = schema.title
+      const oldTitle = document.title;
+      document.title = schema.title;
       return () => {
-        document.title = oldTitle
+        document.title = oldTitle;
       }
     }
-  }, [schema]);
+  }, [schema, schema?.title]);
 
   useLayoutEffect(() => {
     setActiveTab(tabQuery);
diff --git a/rsconcept/frontend/src/utils/backendAPI.ts b/rsconcept/frontend/src/utils/backendAPI.ts
index 84023197..216282a2 100644
--- a/rsconcept/frontend/src/utils/backendAPI.ts
+++ b/rsconcept/frontend/src/utils/backendAPI.ts
@@ -22,12 +22,12 @@ import {
   IRSFormCreateData, IRSFormData, IRSFormUploadData} from '@/models/rsform';
 import { IExpressionParse, IRSExpression } from '@/models/rslang';
 
-import { buidConstants } from './constants';
+import { buildConstants } from './constants';
 
 const defaultOptions = {
   xsrfCookieName: 'csrftoken',
   xsrfHeaderName: 'x-csrftoken',
-  baseURL: `${buidConstants.backend}`,
+  baseURL: `${buildConstants.backend}`,
   withCredentials: true
 }
 
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index 05c11f02..082f73ca 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -5,7 +5,7 @@
 /**
  * Variable constants depending on build type.
  */
-export const buidConstants = {
+export const buildConstants = {
   backend: import.meta.env.VITE_PORTAL_BACKEND as string
 };
 
@@ -33,11 +33,19 @@ export const resources = {
   logo: '/logo_full.svg'
 };
 
+/**
+ * Numeric limitations.
+ */
+export const limits = {
+  alias_len: 12,
+}
+
 /**
  * Regex patterns for data validation.
  */
 export const patterns = {
-  login: '^[a-zA-Z][a-zA-Z0-9_\\-]{1,}[a-zA-Z0-9]$'
+  login: '^[a-zA-Z][a-zA-Z0-9_\\-]{1,}[a-zA-Z0-9]$',
+  alias: `.{1,${limits.alias_len}}`
 }
 
 /**