Small UI improvements

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
+    <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)}
     />

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

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

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
 }
 

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}}`
 }
 
 /**