Implementing SelectLocation pt1

rsconcept/frontend/src/components/select/SelectLocation.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import useDropdown from '@/hooks/useDropdown';
+import { FolderTree } from '@/models/FolderTree';
+
+import { IconFolderTree } from '../Icons';
+import MiniButton from '../ui/MiniButton';
+
+interface SelectLocationProps {
+  value: string;
+  onChange: (newValue: string) => void;
+
+  folderTree: FolderTree;
+}
+
+function SelectLocation({ value, onChange, folderTree }: SelectLocationProps) {
+  const menu = useDropdown();
+
+  const handleChange = useCallback(
+    (newValue: string) => {
+      console.log(folderTree.roots.size);
+      console.log(value);
+      menu.hide();
+      onChange(newValue);
+    },
+    [menu, onChange, value, folderTree]
+  );
+
+  return (
+    <div ref={menu.ref} className='h-full text-right'>
+      <MiniButton
+        title='Проводник...'
+        icon={<IconFolderTree size='1.25rem' className='icon-green' />}
+        onClick={() => handleChange('/U/test')}
+      />
+    </div>
+  );
+}
+
+export default SelectLocation;

rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import { urls } from '@/app/urls';
@@ -10,6 +10,7 @@ import { IconDownload } from '@/components/Icons';
 import InfoError from '@/components/info/InfoError';
 import SelectAccessPolicy from '@/components/select/SelectAccessPolicy';
 import SelectItemType from '@/components/select/SelectItemType';
+import SelectLocation from '@/components/select/SelectLocation';
 import SelectLocationHead from '@/components/select/SelectLocationHead';
 import Button from '@/components/ui/Button';
 import Label from '@/components/ui/Label';
@@ -30,7 +31,7 @@ import { information } from '@/utils/labels';
 function FormCreateItem() {
   const router = useConceptNavigation();
   const { user } = useAuth();
-  const { createItem, processingError, setProcessingError, processing } = useLibrary();
+  const { createItem, processingError, setProcessingError, processing, folders } = useLibrary();
 
   const [itemType, setItemType] = useState(LibraryItemType.RSFORM);
   const [title, setTitle] = useState('');
@@ -98,6 +99,11 @@ function FormCreateItem() {
     }
   }
 
+  const handleSelectLocation = useCallback((newValue: string) => {
+    setHead(newValue.substring(0, 2) as LocationHead);
+    setBody(newValue.length > 3 ? newValue.substring(3) : '');
+  }, []);
+
   return (
     <form className={clsx('cc-column', 'min-w-[30rem] max-w-[30rem] mx-auto', 'px-6 py-3')} onSubmit={handleSubmit}>
       <h1>
@@ -154,7 +160,6 @@ function FormCreateItem() {
           <div className='ml-auto cc-icons'>
             <SelectAccessPolicy value={policy} onChange={setPolicy} />
             <MiniButton
-              className='disabled:cursor-auto'
               title={visible ? 'Библиотека: отображать' : 'Библиотека: скрывать'}
               icon={<VisibilityIcon value={visible} />}
               onClick={() => setVisible(prev => !prev)}
@@ -180,6 +185,11 @@ function FormCreateItem() {
             excluded={!user?.is_staff ? [LocationHead.LIBRARY] : []}
           />
         </div>
+        {user?.is_staff ? (
+          <div className='self-start mt-[-0.25rem] ml-[-1.5rem]'>
+            <SelectLocation folderTree={folders} value={location} onChange={handleSelectLocation} />
+          </div>
+        ) : null}
         <TextArea
           id='dlg_cst_body'
           label='Путь'