F: Implement dev helper features

README.md

@@ -39,6 +39,7 @@ This readme file is used mostly to document project dependencies and conventions
   - react-error-boundary
   - react-pdf
   - react-tooltip
+  - react-zoom-pan-pinch
   - reactflow
   - js-file-download
   - use-debounce

rsconcept/frontend/package-lock.json

@@ -29,6 +29,7 @@
         "react-tabs": "^6.0.2",
         "react-toastify": "^10.0.5",
         "react-tooltip": "^5.27.1",
+        "react-zoom-pan-pinch": "^3.6.1",
         "reactflow": "^11.11.4",
         "reagraph": "^4.19.2",
         "use-debounce": "^10.0.1"
@@ -10542,6 +10543,20 @@
         "react-dom": ">=16.13"
       }
     },
+    "node_modules/react-zoom-pan-pinch": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz",
+      "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/reactflow": {
       "version": "11.11.4",
       "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",

rsconcept/frontend/package.json

@@ -33,6 +33,7 @@
     "react-tabs": "^6.0.2",
     "react-toastify": "^10.0.5",
     "react-tooltip": "^5.27.1",
+    "react-zoom-pan-pinch": "^3.6.1",
     "reactflow": "^11.11.4",
     "reagraph": "^4.19.2",
     "use-debounce": "^10.0.1"

rsconcept/frontend/src/app/Navigation/UserDropdown.tsx

@@ -3,11 +3,13 @@ import {
   IconAdminOff,
   IconDarkTheme,
   IconDatabase,
+  IconDBStructure,
   IconHelp,
   IconHelpOff,
   IconImage,
   IconLightTheme,
   IconLogout,
+  IconRESTapi,
   IconUser
 } from '@/components/Icons';
 import { CProps } from '@/components/props';
@@ -49,6 +51,16 @@ function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
     router.push(urls.icons, event.ctrlKey || event.metaKey);
   }
 
+  function gotoRestApi() {
+    hideDropdown();
+    router.push(urls.rest_api, true);
+  }
+
+  function gotoDatabaseSchema(event: CProps.EventMouse) {
+    hideDropdown();
+    router.push(urls.database_schema, event.ctrlKey || event.metaKey);
+  }
+
   function handleToggleDarkMode() {
     hideDropdown();
     toggleDarkMode();
@@ -82,6 +94,14 @@ function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
           onClick={toggleAdminMode}
         />
       ) : null}
+      {user?.is_staff ? (
+        <DropdownButton
+          text='REST API' // prettier: split-line
+          icon={<IconRESTapi size='1rem' />}
+          className='border-t'
+          onClick={gotoRestApi}
+        />
+      ) : null}
       {user?.is_staff ? (
         <DropdownButton
           text='База данных' // prettier: split-line
@@ -96,6 +116,14 @@ function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
           onClick={gotoIcons}
         />
       ) : null}
+      {user?.is_staff ? (
+        <DropdownButton
+          text='Структура БД' // prettier: split-line
+          icon={<IconDBStructure size='1rem' />}
+          onClick={gotoDatabaseSchema}
+          className='border-b'
+        />
+      ) : null}
       <DropdownButton
         text='Выйти...'
         className='font-semibold'

rsconcept/frontend/src/app/Router.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 
 import CreateItemPage from '@/pages/CreateItemPage';
+import DatabaseSchemaPage from '@/pages/DatabaseSchemaPage';
 import HomePage from '@/pages/HomePage';
 import IconsPage from '@/pages/IconsPage';
 import LibraryPage from '@/pages/LibraryPage';
@@ -63,13 +64,17 @@ export const Router = createBrowserRouter([
         path: `${routes.oss}/:id`,
         element: <OssPage />
       },
+      {
+        path: routes.manuals,
+        element: <ManualsPage />
+      },
       {
         path: `${routes.icons}`,
         element: <IconsPage />
       },
       {
-        path: routes.manuals,
+        path: `${routes.database_schema}`,
-        element: <ManualsPage />
+        element: <DatabaseSchemaPage />
       }
     ]
   }

rsconcept/frontend/src/app/urls.ts

@@ -19,7 +19,8 @@ export const routes = {
   help: 'manuals',
   rsforms: 'rsforms',
   oss: 'oss',
-  icons: 'icons'
+  icons: 'icons',
+  database_schema: 'database-schema'
 };
 
 interface SchemaProps {
@@ -39,11 +40,13 @@ interface OssProps {
  */
 export const urls = {
   admin: `${buildConstants.backend}/admin`,
+  rest_api: `${buildConstants.backend}/`,
   home: '/',
   login: `/${routes.login}`,
   login_hint: (userName: string) => `/login?username=${userName}`,
   profile: `/${routes.profile}`,
-  icons: `/icons`,
+  icons: `/${routes.icons}`,
+  database_schema: `/${routes.database_schema}`,
   signup: `/${routes.signup}`,
   library: `/${routes.library}`,
   library_filter: (strategy: string) => `/library?filter=${strategy}`,

rsconcept/frontend/src/components/Icons.tsx

@@ -65,6 +65,8 @@ export { GiHoneycomb      as IconOSS }            from 'react-icons/gi';
 export { RiHexagonLine    as IconRSForm }         from 'react-icons/ri';
 export { LuArchive        as IconArchive }        from 'react-icons/lu';
 export { LuDatabase       as IconDatabase }       from 'react-icons/lu';
+export { LuView           as IconDBStructure }    from 'react-icons/lu';  
+export { LuPlaneTakeoff   as IconRESTapi }        from 'react-icons/lu';
 export { LuImage          as IconImage }          from 'react-icons/lu';
 export { TbColumns        as IconList }           from 'react-icons/tb';
 export { ImStack          as IconVersions }       from 'react-icons/im';

rsconcept/frontend/src/pages/DatabaseSchemaPage.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useLayoutEffect, useMemo } from 'react';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+
+import AnimateFade from '@/components/wrap/AnimateFade';
+import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { resources } from '@/utils/constants';
+
+function DatabaseSchemaPage() {
+  const { calculateHeight, setNoFooter } = useConceptOptions();
+
+  const panelHeight = useMemo(() => calculateHeight('0px'), [calculateHeight]);
+
+  useLayoutEffect(() => {
+    setNoFooter(true);
+    return () => setNoFooter(false);
+  }, [setNoFooter]);
+
+  return (
+    <AnimateFade className='flex justify-center overflow-hidden' style={{ maxHeight: panelHeight }}>
+      <TransformWrapper>
+        <TransformComponent>
+          <img alt='Схема базы данных' src={resources.db_schema} className='w-fit h-fit' />
+        </TransformComponent>
+      </TransformWrapper>
+    </AnimateFade>
+  );
+}
+
+export default DatabaseSchemaPage;

rsconcept/frontend/src/utils/constants.ts

@@ -54,7 +54,8 @@ export const patterns = {
 export const resources = {
   graph_font: '/DejaVu.ttf',
   privacy_policy: '/privacy.pdf',
-  logo: '/logo_full.svg'
+  logo: '/logo_full.svg',
+  db_schema: '/db_schema.svg'
 };
 
 /**