From e23a71a217d69f76736f9d58e44f145ea01987ba Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 19 Sep 2023 17:55:17 +0300
Subject: [PATCH] Prepare termform UI

---
 .../src/components/Common/TextArea.tsx        |   2 +-
 rsconcept/frontend/src/components/Icons.tsx   |  40 ++++++
 rsconcept/frontend/src/models/language.ts     |  97 +++++++-------
 .../src/pages/RSFormPage/DlgEditTerm.tsx      | 118 +++++++++++++-----
 rsconcept/frontend/src/utils/selectors.ts     |  51 +++++++-
 5 files changed, 226 insertions(+), 82 deletions(-)

diff --git a/rsconcept/frontend/src/components/Common/TextArea.tsx b/rsconcept/frontend/src/components/Common/TextArea.tsx
index 8c617b5b..9c0e27e1 100644
--- a/rsconcept/frontend/src/components/Common/TextArea.tsx
+++ b/rsconcept/frontend/src/components/Common/TextArea.tsx
@@ -4,7 +4,7 @@ import Label from './Label';
 
 export interface TextAreaProps 
 extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'title'> {
-  label: string
+  label?: string
   tooltip?: string
   dimensions?: string
   colorClass?: string
diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx
index 70c8f9f7..7534ca70 100644
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@@ -389,3 +389,43 @@ export function CheckboxNullIcon() {
     </svg>
   );
 }
+
+export function ChevronUpIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M6.293 13.293l1.414 1.414L12 10.414l4.293 4.293 1.414-1.414L12 7.586z' />
+    </IconSVG>
+  );
+}
+
+export function ChevronDoubleUpIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M6.293 11.293l1.414 1.414L12 8.414l4.293 4.293 1.414-1.414L12 5.586z' />
+      <path d='M6.293 16.293l1.414 1.414L12 13.414l4.293 4.293 1.414-1.414L12 10.586z' />
+    </IconSVG>
+  );
+}
+
+export function CheckIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M10 15.586l-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z' />
+    </IconSVG>
+  );
+}
+
+export function CrossIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 21 21' {...props}>
+      <g
+        fillRule='evenodd'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      >
+        <path d='M15.5 15.5l-10-10zM15.5 5.5l-10 10' />
+      </g>
+    </IconSVG>
+  );
+}
diff --git a/rsconcept/frontend/src/models/language.ts b/rsconcept/frontend/src/models/language.ts
index c577efce..f30a498c 100644
--- a/rsconcept/frontend/src/models/language.ts
+++ b/rsconcept/frontend/src/models/language.ts
@@ -1,44 +1,8 @@
 // Module: Natural language model declarations.
 
-// ====== Reference resolution =====
-export interface IRefsText {
-  text: string
-}
-
-export enum ReferenceType {
-  ENTITY = 'entity',
-  SYNTACTIC = 'syntax'
-}
-export interface IEntityReference {
-  entity: string
-  form: string
-}
-
-export interface ISyntacticReference {
-  offset: number
-  nominal: string
-}
-
-export interface ITextPosition {
-  start: number
-  finish: number
-}
-
-export interface IResolvedReference {
-  type: ReferenceType
-  data: IEntityReference | ISyntacticReference
-  pos_input: ITextPosition
-  pos_output: ITextPosition
-}
-
-export interface IReferenceData {
-  input: string
-  output: string
-  refs: IResolvedReference[]
-}
 
 // ====== Morphology ========
-export enum Morpheme {
+export enum Grammeme {
   // Части речи
   NOUN = 'NOUN',
   ADJF = 'ADJF',
@@ -121,18 +85,55 @@ export enum Morpheme {
 }
 
 export const PartOfSpeech = [
-  Morpheme.NOUN, Morpheme.ADJF, Morpheme.ADJS, Morpheme.COMP,
-  Morpheme.VERB, Morpheme.INFN, Morpheme.PRTF, Morpheme.PRTS,
-  Morpheme.GRND, Morpheme.ADVB, Morpheme.NPRO, Morpheme.PRED,
-  Morpheme.PREP, Morpheme.CONJ, Morpheme.PRCL, Morpheme.INTJ,
-  Morpheme.PNCT
-]
+  Grammeme.NOUN, Grammeme.ADJF, Grammeme.ADJS, Grammeme.COMP,
+  Grammeme.VERB, Grammeme.INFN, Grammeme.PRTF, Grammeme.PRTS,
+  Grammeme.GRND, Grammeme.ADVB, Grammeme.NPRO, Grammeme.PRED,
+  Grammeme.PREP, Grammeme.CONJ, Grammeme.PRCL, Grammeme.INTJ,
+  Grammeme.PNCT
+];
 
 export const Gender = [
-  Morpheme.masc, Morpheme.femn, Morpheme.neut
-]
+  Grammeme.masc, Grammeme.femn, Grammeme.neut
+];
 
 export const Case = [
-  Morpheme.nomn, Morpheme.gent, Morpheme.datv,
-  Morpheme.accs, Morpheme.ablt, Morpheme.loct
-]
+  Grammeme.nomn, Grammeme.gent, Grammeme.datv,
+  Grammeme.accs, Grammeme.ablt, Grammeme.loct
+];
+
+// ====== Reference resolution =====
+export interface IRefsText {
+  text: string
+}
+
+export enum ReferenceType {
+  ENTITY = 'entity',
+  SYNTACTIC = 'syntax'
+}
+export interface IEntityReference {
+  entity: string
+  form: string
+}
+
+export interface ISyntacticReference {
+  offset: number
+  nominal: string
+}
+
+export interface ITextPosition {
+  start: number
+  finish: number
+}
+
+export interface IResolvedReference {
+  type: ReferenceType
+  data: IEntityReference | ISyntacticReference
+  pos_input: ITextPosition
+  pos_output: ITextPosition
+}
+
+export interface IReferenceData {
+  input: string
+  output: string
+  refs: IResolvedReference[]
+}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgEditTerm.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgEditTerm.tsx
index 1d6b6670..05c0840d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/DlgEditTerm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/DlgEditTerm.tsx
@@ -1,12 +1,14 @@
 import { useLayoutEffect, useState } from 'react';
 
 import Divider from '../../components/Common/Divider';
+import MiniButton from '../../components/Common/MiniButton';
 import Modal from '../../components/Common/Modal';
 import SelectMulti from '../../components/Common/SelectMulti';
 import TextArea from '../../components/Common/TextArea';
-import TextInput from '../../components/Common/TextInput';
+import { CheckIcon, ChevronDoubleUpIcon, ChevronUpIcon, CrossIcon } from '../../components/Icons';
+import { Grammeme } from '../../models/language';
 import { IConstituenta } from '../../models/rsform';
-import { SelectorGraphLayout } from '../../utils/selectors';
+import { SelectorGrammems } from '../../utils/selectors';
 
 interface DlgEditTermProps {
   hideWindow: () => void
@@ -17,6 +19,11 @@ interface DlgEditTermProps {
 function DlgEditTerm({ hideWindow, target, onSave }: DlgEditTermProps) { 
   const [term, setTerm] = useState('');
 
+  const [inputText, setInputText] = useState('');
+  const [inputTags, setInputTags] = useState<{ value: Grammeme, label: string }[]>([]);
+
+  
+  
   // function getData() {
   //   return {
 
@@ -25,45 +32,94 @@ function DlgEditTerm({ hideWindow, target, onSave }: DlgEditTermProps) {
 
   const handleSubmit = () => onSave(); // getData()
 
+  function handleAddForm() {
+    
+  }
+
+  function handleResetForm() {
+    
+  }
+
+  function handleGenerateSelected() {
+    
+  }
+
+  function handleGenerateBasics() {
+    
+  }
+
   useLayoutEffect(
   () => {
     setTerm(target.term_resolved);
   }, [target]);
 
   return (
-    <Modal
-      title='Редактирование словоформ'
-      hideWindow={hideWindow}
-      submitText='Сохранить данные'
-      canSubmit
-      onSubmit={handleSubmit}
-    >
-    <div className='min-w-[40rem]'>
-      <TextArea id='nominal' label='Начальная форма'
-        placeholder='Начальная форма'
-        rows={2}
-        
-        value={term}
-        disabled={true}
-        spellCheck
-      />
-      <Divider margins='my-4' />
-      <div className='flex items-center justify-start gap-2 w-full'>
-        <SelectMulti
-          className='z-modal-top min-w-[10rem]'
-          options={SelectorGraphLayout}
-          placeholder='Способ расположения'
-          
-          // value={null}
-          // onChange={data => handleChangeLayout(data?.value ?? SelectorGraphLayout[0].value)}
-        />
-        <TextInput 
+  <Modal
+    title='Редактирование словоформ'
+    hideWindow={hideWindow}
+    submitText='Сохранить данные'
+    canSubmit
+    onSubmit={handleSubmit}
+  >
+  <div className='min-w-[40rem]'>
+    <TextArea id='nominal' label='Начальная форма'
+      placeholder='Начальная форма'
+      rows={1}
+      
+      value={term}
+      disabled={true}
+      spellCheck
+    />
+
+    <Divider margins='my-4'/>
+
+    <div className='flex items-start gap-2 justify-stretch min-h-[6.3rem]'>
+      <div className='flex flex-col gap-1'>
+        <TextArea
+          placeholder='Введите текст'
+          rows={2}
+          dimensions='min-w-[20rem]'
           
+          value={inputText}
+          onChange={event => setInputText(event.target.value)}
         />
+        <div className='flex items-center justify-start'>
+          <MiniButton
+            tooltip='Добавить словоформу'
+            icon={<CheckIcon size={6} color='text-success'/>}
+            onClick={handleAddForm}
+          />
+          <MiniButton
+            tooltip='Сбросить словоформу'
+            icon={<CrossIcon size={6} color='text-warning'/>}
+            onClick={handleResetForm}
+          />
+          <MiniButton
+            tooltip='Генерировать словоформу'
+            icon={<ChevronUpIcon size={6} color='text-primary'/>}
+            onClick={handleGenerateSelected}
+          />
+          <MiniButton
+            tooltip='Генерировать базовые словоформы'
+            icon={<ChevronDoubleUpIcon size={6} color='text-primary'/>}
+            onClick={handleGenerateBasics}
+          />
+        </div>
       </div>
+      <SelectMulti
+        className='z-modal-top min-w-[20rem] max-w-[20rem] h-full flex-grow'
+        options={SelectorGrammems}
+        placeholder='Выберите граммемы'
+        
+        value={inputTags}
+        onChange={data => setInputTags(data.map(value => value))}
+      />
     </div>
-    </Modal>
-  );
+    <div>
+      Таблица
+    </div>
+  </div>
+  </Modal>);
 }
 
 export default DlgEditTerm;
diff --git a/rsconcept/frontend/src/utils/selectors.ts b/rsconcept/frontend/src/utils/selectors.ts
index 050be41c..87f9232d 100644
--- a/rsconcept/frontend/src/utils/selectors.ts
+++ b/rsconcept/frontend/src/utils/selectors.ts
@@ -1,12 +1,13 @@
 // Module: Selector maps
 import { LayoutTypes } from 'reagraph';
 
+import { Grammeme } from '../models/language';
 import { CstType } from '../models/rsform';
 import { ColoringScheme } from '../pages/RSFormPage/EditorTermGraph';
 import { getCstTypeLabel } from './staticUI';
 
 
-export const SelectorGraphLayout: { value: LayoutTypes; label: string; }[] = [
+export const SelectorGraphLayout: { value: LayoutTypes, label: string }[] = [
   { value: 'treeTd2d', label: 'Граф: ДеревоВ 2D' },
   { value: 'treeTd3d', label: 'Граф: ДеревоВ 3D' },
   { value: 'forceatlas2', label: 'Граф: Атлас 2D' },
@@ -22,7 +23,7 @@ export const SelectorGraphLayout: { value: LayoutTypes; label: string; }[] = [
   //  { value: 'hierarchicalLr', label: 'hierarchicalLr'}
 ];
 
-export const SelectorGraphColoring: { value: ColoringScheme; label: string; }[] = [
+export const SelectorGraphColoring: { value: ColoringScheme, label: string }[] = [
   { value: 'none', label: 'Цвет: моно' },
   { value: 'status', label: 'Цвет: статус' },
   { value: 'type', label: 'Цвет: класс' },
@@ -36,3 +37,49 @@ export const SelectorCstType = (
     })
   );
 
+export const SelectorGrammems: { value: Grammeme, label: string }[] = [
+  { value: Grammeme.sing, label: 'Число: един' },
+  { value: Grammeme.plur, label: 'Число: множ' },
+
+  { value: Grammeme.nomn, label: 'Падеж: имен' },
+  { value: Grammeme.gent, label: 'Падеж: род' },
+  { value: Grammeme.datv, label: 'Падеж: дат' },
+  { value: Grammeme.accs, label: 'Падеж: вин' },
+  { value: Grammeme.ablt, label: 'Падеж: твор' },
+  { value: Grammeme.loct, label: 'Падеж: пред' },
+
+  { value: Grammeme.NOUN, label: 'ЧР: сущ' },
+  { value: Grammeme.VERB, label: 'ЧР: глагол' },
+  { value: Grammeme.INFN, label: 'ЧР: глагол инф' },
+  { value: Grammeme.ADJF, label: 'ЧР: прил' },
+  { value: Grammeme.ADJS, label: 'ЧР: кр прил' },
+  { value: Grammeme.PRTF, label: 'ЧР: прич' },
+  { value: Grammeme.PRTS, label: 'ЧР: кр прич' },  
+
+  { value: Grammeme.perf, label: 'Совершенный: да' },
+  { value: Grammeme.impf, label: 'Совершенный: нет' },
+
+  { value: Grammeme.tran, label: 'Переходный: да' },
+  { value: Grammeme.intr, label: 'Переходный: нет' },
+
+  { value: Grammeme.pres, label: 'Время: наст' },
+  { value: Grammeme.past, label: 'Время: прош' },
+  { value: Grammeme.futr, label: 'Время: буд' },
+
+  { value: Grammeme.per1, label: 'Лицо: 1' },
+  { value: Grammeme.per2, label: 'Лицо: 2' },
+  { value: Grammeme.per3, label: 'Лицо: 3' },
+
+  { value: Grammeme.impr, label: 'Повелительный: да' },
+  { value: Grammeme.indc, label: 'Повелительный: нет' },
+
+  { value: Grammeme.incl, label: 'Включающий: да' },
+  { value: Grammeme.excl, label: 'Включающий: нет' },
+
+  { value: Grammeme.pssv, label: 'Страдательный: да' },
+  { value: Grammeme.actv, label: 'Страдательный: нет' },
+];
+
+// { value: Grammeme.masc, label: 'Род: муж' },
+// { value: Grammeme.femn, label: 'Род: жен' },
+// { value: Grammeme.neut, label: 'Род: ср' },
\ No newline at end of file