Minor UI fixes

2025-06-26 13:00:39 +03:00 · 2024-03-26 22:55:53 +03:00 · 2024-03-26 22:55:53 +03:00 · 8a134557b6
commit 8a134557b6
parent 6a41ecd88c
9 changed files with 44 additions and 42 deletions
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
@ -23,7 +23,7 @@ interface TemplateTabProps {

 function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
  const { templates, retrieveTemplate } = useLibrary();
-  const [selectedSchema, setSelectedSchema] = useState<IRSForm | undefined>(undefined);
+  const [category, setCategory] = useState<IRSForm | undefined>(undefined);

  const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);

@ -47,16 +47,16 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
  );

  const categorySelector = useMemo((): { value: number; label: string }[] => {
-    if (!selectedSchema) {
+    if (!category) {
      return [];
    }
-    return selectedSchema.items
+    return category.items
      .filter(cst => cst.cst_type === CATEGORY_CST_TYPE)
      .map(cst => ({
        value: cst.id,
        label: cst.term_raw
      }));
-  }, [selectedSchema]);
+  }, [category]);

  useEffect(() => {
    if (templates.length > 0 && !state.templateID) {
@ -66,23 +66,22 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {

  useEffect(() => {
    if (!state.templateID) {
-      setSelectedSchema(undefined);
+      setCategory(undefined);
    } else {
-      retrieveTemplate(state.templateID, setSelectedSchema);
+      retrieveTemplate(state.templateID, setCategory);
    }
  }, [state.templateID, retrieveTemplate]);

-  // Filter constituents
  useEffect(() => {
-    if (!selectedSchema) {
+    if (!category) {
      return;
    }
-    let data = selectedSchema.items;
+    let data = category.items;
    if (state.filterCategory) {
-      data = applyFilterCategory(state.filterCategory, selectedSchema);
+      data = applyFilterCategory(state.filterCategory, category);
    }
    setFilteredData(data);
-  }, [state.filterCategory, selectedSchema]);
+  }, [state.filterCategory, category]);

  return (
    <>
@ -92,16 +91,14 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
          className='flex-grow border-none'
          options={categorySelector}
          value={
-            state.filterCategory && selectedSchema
+            state.filterCategory && category
              ? {
                  value: state.filterCategory.id,
                  label: state.filterCategory.term_raw
                }
              : null
          }
-          onChange={data =>
-            partialUpdate({ filterCategory: selectedSchema?.items.find(cst => cst.id === data?.value) })
-          }
+          onChange={data => partialUpdate({ filterCategory: category?.items.find(cst => cst.id === data?.value) })}
          isClearable
        />
        <SelectSingle
--- a/rsconcept/frontend/src/models/miscellaneousAPI.ts
+++ b/rsconcept/frontend/src/models/miscellaneousAPI.ts
@ -8,7 +8,6 @@ import { IConstituenta, IRSForm } from './rsform';
 * Create style name from  {@link FontStyle}.
 */
 export function getFontClassName(style: FontStyle): string {
-  console.log(style);
  return `font-${style}`;
 }

--- a/rsconcept/frontend/src/models/rsformAPI.ts
+++ b/rsconcept/frontend/src/models/rsformAPI.ts
@ -233,7 +233,7 @@ export function isMockCst(cst: IConstituenta) {
 */
 export function applyFilterCategory(start: IConstituenta, schema: IRSFormData): IConstituenta[] {
  const nextCategory = schema.items.find(cst => cst.order > start.order && cst.cst_type === CATEGORY_CST_TYPE);
-  return schema.items.filter(cst => cst.order > start.order && (!nextCategory || cst.order <= nextCategory.order));
+  return schema.items.filter(cst => cst.order >= start.order && (!nextCategory || cst.order < nextCategory.order));
 }

 /**
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
@ -56,11 +56,12 @@ function EditorRSExpression({
  onToggleList,
  ...restProps
 }: EditorRSExpressionProps) {
-  const { schema } = useRSForm();
+  const model = useRSForm();
  const { mathFont, setMathFont } = useConceptTheme();

  const [isModified, setIsModified] = useState(false);
-  const { parseData, checkExpression, resetParse, loading } = useCheckExpression({ schema });
+  const parser = useCheckExpression({ schema: model.schema });
+  const { resetParse } = parser;
  const rsInput = useRef<ReactCodeMirrorRef>(null);

  const [syntaxTree, setSyntaxTree] = useState<SyntaxTree>([]);
@ -84,7 +85,7 @@ function EditorRSExpression({
    }
    const prefix = getDefinitionPrefix(activeCst);
    const expression = prefix + value;
-    checkExpression(expression, activeCst, parse => {
+    parser.checkExpression(expression, activeCst, parse => {
      if (parse.errors.length > 0) {
        onShowError(parse.errors[0]);
      } else {
@ -163,15 +164,17 @@ function EditorRSExpression({
        <Overlay position='top-[-0.5rem] right-0 flex'>
          <MiniButton
            title='Изменить шрифт'
-            icon={<BiFontFamily size='1.25rem' className={mathFont === 'math' ? 'icon-primary' : ''} />}
            onClick={toggleFont}
+            icon={<BiFontFamily size='1.25rem' className={mathFont === 'math' ? 'icon-primary' : ''} />}
          />
+          {!disabled || model.processing ? (
            <MiniButton
              noHover
              title='Отображение специальной клавиатуры'
              onClick={() => setShowControls(prev => !prev)}
              icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'icon-primary' : ''} />}
            />
+          ) : null}
          <MiniButton
            noHover
            title='Отображение списка конституент'
@ -188,10 +191,10 @@ function EditorRSExpression({

        <Overlay position='top-[-0.5rem] pl-[8rem] sm:pl-[4rem] right-1/2 translate-x-1/2 flex'>
          <StatusBar
-            processing={loading}
+            processing={parser.loading}
            isModified={isModified}
            constituenta={activeCst}
-            parseData={parseData}
+            parseData={parser.parseData}
            onAnalyze={() => handleCheckExpression()}
          />
          <HelpButton topic={HelpTopic.CONSTITUENTA} offset={4} />
@ -207,11 +210,15 @@ function EditorRSExpression({
          {...restProps}
        />

-        <RSEditorControls isOpen={showControls} disabled={disabled} onEdit={handleEdit} />
+        <RSEditorControls
+          isOpen={showControls && (!disabled || model.processing)}
+          disabled={disabled}
+          onEdit={handleEdit}
+        />

        <ParsingResult
-          isOpen={!!parseData && parseData.errors.length > 0}
-          data={parseData}
+          isOpen={!!parser.parseData && parser.parseData.errors.length > 0}
+          data={parser.parseData}
          disabled={disabled}
          onShowError={onShowError}
        />
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import { motion } from 'framer-motion';

 import { IExpressionParse, IRSErrorDescription } from '@/models/rslang';
@ -19,7 +18,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro

  return (
    <motion.div
-      className={clsx('border', 'text-sm', 'overflow-y-auto')}
+      className='dense border text-sm overflow-y-auto'
      initial={false}
      animate={isOpen ? 'open' : 'closed'}
      variants={animateParseResults}
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
@ -118,7 +118,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
        />
        <div className='flex flex-col'>
          <Overlay position='top-[-0.25rem] right-[-0.25rem] flex'>
-            {controller.isMutable || controller.isProcessing ? (
+            {controller.isMutable || (controller.isMutable && controller.isProcessing) ? (
              <>
                <MiniButton
                  noHover
@ -173,7 +173,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
          setValue={value => setCanonical(value)}
        />
      </div>
-      {controller.isContentEditable || controller.isProcessing ? (
+      {controller.isContentEditable || (controller.isMutable && controller.isProcessing) ? (
        <SubmitButton
          text='Сохранить изменения'
          className='self-center'
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
@ -27,7 +27,7 @@ function RSFormToolbar({ modified, anonymous, subscribed, claimable, onSubmit, o
  const canSave = useMemo(() => modified && controller.isMutable, [modified, controller.isMutable]);
  return (
    <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
-      {controller.isContentEditable || controller.isProcessing ? (
+      {controller.isContentEditable || (controller.isMutable && controller.isProcessing) ? (
        <MiniButton
          titleHtml={prepareTooltip('Сохранить изменения', 'Ctrl + S')}
          disabled={!canSave}
@ -67,7 +67,7 @@ function RSFormToolbar({ modified, anonymous, subscribed, claimable, onSubmit, o
          onClick={controller.claim}
        />
      ) : null}
-      {controller.isContentEditable || controller.isProcessing ? (
+      {controller.isContentEditable || (controller.isMutable && controller.isProcessing) ? (
        <MiniButton
          title='Удалить схему'
          disabled={!controller.isMutable}
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
@ -97,7 +97,7 @@ function EditorRSList({ selected, setSelected, onOpenEdit }: EditorRSListProps)

  return (
    <div tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
-      {controller.isContentEditable || controller.isProcessing ? (
+      {controller.isContentEditable || (controller.isMutable && controller.isProcessing) ? (
        <SelectedCounter
          totalCount={controller.schema?.stats?.count_all ?? 0}
          selectedCount={selected.length}
@ -105,7 +105,7 @@ function EditorRSList({ selected, setSelected, onOpenEdit }: EditorRSListProps)
        />
      ) : null}

-      {controller.isContentEditable || controller.isProcessing ? (
+      {controller.isContentEditable || (controller.isMutable && controller.isProcessing) ? (
        <RSListToolbar selectedCount={selected.length} />
      ) : null}
      <div
@ -118,7 +118,7 @@ function EditorRSList({ selected, setSelected, onOpenEdit }: EditorRSListProps)
      <RSTable
        items={controller.schema?.items}
        maxHeight={tableHeight}
-        enableSelection={controller.isContentEditable || controller.isProcessing}
+        enableSelection={controller.isContentEditable || (controller.isMutable && controller.isProcessing)}
        selected={rowSelection}
        setSelected={handleRowSelection}
        onEdit={onOpenEdit}
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@ -106,7 +106,7 @@ li {
  text-wrap: pretty;
 }

-div > p {
+div:not(.dense) > p {
  @apply [&:not(:last-child)]:mb-2;
 }