proje-react-panel 1.0.8 → 1.0.10

package/src/styles/sidebar.scss

@@ -1,10 +1,9 @@
 .sidebar {
   position: relative;
-  background-color: #f5f5f5;
+  background-color: #343a40;
   height: 100vh;
   transition: width 0.3s ease;
-  border-right: 1px solid #e0e0e0;
-
+  border-right: 1px solid #454d55;
   &.open {
     width: 250px;
   }
@@ -12,13 +11,6 @@
   &.closed {
     width: 60px;
 
-    .nav-links {
-      a {
-        span {
-          display: none;
-        }
-      }
-    }
   }
 
   .toggle-button {
@@ -28,8 +20,8 @@
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background-color: #ffffff;
-    border: 1px solid #e0e0e0;
+    background-color: #495057;
+    border: 1px solid #6c757d;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -37,30 +29,33 @@
     z-index: 10;
 
     &:hover {
-      background-color: #f0f0f0;
+      background-color: #6c757d;
     }
   }
 
   .nav-links {
     display: flex;
     flex-direction: column;
-    padding: 2rem 1rem;
+    padding: 2rem 0;
     height: 100%;
+    overflow: hidden;
 
     a {
-      padding: 0.75rem 1rem;
+      padding: 0.75rem 0;
+      white-space: nowrap;
       margin-bottom: 0.5rem;
-      color: #333;
+      color: #e9ecef;
       text-decoration: none;
       border-radius: 4px;
       font-weight: 500;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+      &.active {
+        background-color: rgba(233, 236, 239, 0.2);
       }
 
-      &.active {
-        background-color: rgba(0, 0, 0, 0.1);
+      .nav-links-icon {
+        display: inline-block;
+        width: 60px;
+        text-align: center;
       }
     }
 
@@ -68,7 +63,7 @@
       margin-top: auto;
 
       a {
-        color: #666;
+        color: #adb5bd;
         font-weight: 400;
       }
     }

package/src/types/ScreenCreatorData.ts

@@ -1,9 +1,12 @@
-import { CellOptions } from "../declerations/Cell";
-import { CrudOptions } from "../declerations/Crud";
+import { CellOptions } from "../decorators/Cell";
+import { CrudOptions } from "../decorators/Crud";
+import { InputOptions } from "../decorators/Input";
 
-export type ScreenCreatorData<T> = {
-	resolver: any,
-	fields: string[],
-	cells: CellOptions<T>[],
-	crud: CrudOptions
+export interface ScreenCreatorData {
+	resolver: any;
+	fields: string[];
+	cells: CellOptions[];
+	inputs: InputOptions[];
+	crud?: CrudOptions;
+	path: string;
 }

package/src/types/initPanelOptions.ts

@@ -0,0 +1,8 @@
+type AnyClass = abstract new (...args: any[]) => any;
+
+export interface InitPanelOptions {
+	crud: Record<string, AnyClass>;
+	fetch: {
+		baseURL: string;
+	};
+}

package/src/utils/createScreens.ts

@@ -1,5 +1,5 @@
-import { StoreData } from "./storeData";
+import { useAppStore } from "../store/store";
 
 export function createScreens(screens: Record<string, any>) {
-	StoreData.screens = screens;
+	useAppStore.setState({ screens });
 }

package/src/utils/getFields.ts

@@ -1,21 +1,20 @@
 import { getMetadataStorage } from "class-validator";
-import { getClassCrudData } from "../declerations/Crud";
+import { getClassCrudData } from "../decorators/Crud";
 import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-import { getCellFields } from "../declerations/Cell";
+import { getCellFields } from "../decorators/Cell";
 import { ScreenCreatorData } from "../types/ScreenCreatorData";
+import { getInputFields } from "../decorators/Input";
 
-export function getFields<T>(entityClass: T): ScreenCreatorData<T> {
+export function getFields<T>(key: string, entityClass: T): ScreenCreatorData {
 	const metadataStorage = getMetadataStorage();
-	const targetMetadata = metadataStorage.getTargetValidationMetadatas(
-		entityClass as any,
-		"",
-		false, false,
-	);
+	const targetMetadata = metadataStorage.getTargetValidationMetadatas(entityClass as any, "", false, false);
 	const crud = getClassCrudData(entityClass);
 	return {
 		resolver: classValidatorResolver(entityClass as any),
 		fields: Array.from(new Set(targetMetadata.map((meta) => meta.propertyName))),
+		inputs: getInputFields(entityClass),
 		cells: getCellFields(entityClass),
-		crud: crud!,
+		crud: crud,
+		path: "/" + (crud?.controller ?? key),
 	};
 }

package/dist/utils/getScreenForRoutes.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function getScreenForRoutes(): React.JSX.Element;

package/dist/utils/storeData.d.ts

@@ -1,4 +0,0 @@
-import { ScreenCreatorData } from "../types/ScreenCreatorData";
-export declare const StoreData: {
-    screens: Record<string, ScreenCreatorData<any>>;
-};

package/src/declerations/Cell.ts

@@ -1,37 +0,0 @@
-import 'reflect-metadata';
-
-const CELL_KEY = Symbol('cell');
-
-export interface CellOptions<T> {
-  name?: string;
-  title?: string;
-  type?: 'string' | 'number' | 'date';
-  placeHolder?: string;
-  linkTo?: (item: T) => string;
-}
-
-export function Cell<T>(options?: CellOptions<T>): PropertyDecorator {
-  return (target, propertyKey) => {
-    const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
-    Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
-
-    if (options) {
-      const keyString = `${CELL_KEY.toString()}:${propertyKey.toString()}:options`;
-      Reflect.defineMetadata(keyString, options, target);
-    }
-  };
-}
-
-
-export function getCellFields<T>(entityClass: any): CellOptions<T> [] {
-  const prototype = entityClass.prototype;
-  const cellFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
-  return cellFields.map((field) => {
-    const fields = (Reflect.getMetadata(`${CELL_KEY.toString()}:${field}:options`, prototype) || {});
-    return {
-      ...fields,
-      name: fields?.name ?? field,
-    };
-
-  });
-}

package/src/screens/ControllerCreate.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Screen } from '../types/Screen';
-import { Layout } from '../components/layout/Layout';
-import { Form } from './Form';
-
-export function ControllerCreate({ screen }: { screen: Screen }) {
-
-  return (
-    <Layout>
-      <Form screen={screen} />
-    </Layout>
-  );
-}

package/src/screens/ControllerDetails.tsx

@@ -1,34 +0,0 @@
-import { Layout } from '../components/layout/Layout';
-import { useParams } from 'react-router';
-import React, { useEffect, useState } from 'react';
-import { CrudApi } from '../api/crudApi';
-import { Screen } from '../types/Screen';
-
-export function ControllerDetails({ screen }: { screen: Screen }) {
-  const { id } = useParams();
-  const [data, setData] = useState<any>(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    if (screen.controller && id) {
-      CrudApi.details(screen.controller, id)
-        .then((res) => {
-          setData(res.data);
-        })
-        .catch((e: any) => {
-          setError(e);
-          console.error(e);
-        });
-    }
-  }, [id, screen]);
-
-  return (
-    <Layout>
-      <p
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify(data, null, '   ' + '<br/>'),
-        }}
-      />
-    </Layout>
-  );
-}

package/src/screens/ControllerEdit.tsx

@@ -1,31 +0,0 @@
-import { Layout } from '../components/layout/Layout';
-import { Form } from './Form';
-import React, { useEffect, useState } from 'react';
-import { Screen } from '../types/Screen';
-import { useParams } from 'react-router';
-import { CrudApi } from '../api/crudApi';
-
-export function ControllerEdit({ screen }: { screen: Screen }) {
-  const { id } = useParams();
-  const [data, setData] = useState<any>(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    if (screen.controller && id) {
-      CrudApi.details(screen.controller, id)
-        .then((res) => {
-          setData(res.data);
-        })
-        .catch((e: any) => {
-          setError(e);
-          console.error(e);
-        });
-    }
-  }, [id, screen]);
-
-  return (
-    <Layout>
-      <Form data={data} screen={screen} />
-    </Layout>
-  );
-}

package/src/screens/ControllerList.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Layout } from '../components/layout/Layout';
-import { Screen } from '../types/Screen';
-import { useEffect, useState } from 'react';
-import { CrudApi } from '../api/crudApi';
-import { Link } from 'react-router';
-import { List } from '../components/list/List';
-
-import { StoreData } from "../utils/storeData";
-
-export function ControllerList({ screen }: { screen: Screen }) {
-  const [page, setPage] = useState(0);
-  const [data, setData] = useState<any>(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    if (screen.controller) {
-      CrudApi.getList(screen.controller, page)
-        .then((res) => {
-          setData(res.data);
-        })
-        .catch((e: any) => {
-          setError(e);
-          console.error(e);
-        });
-    }
-  }, [page, screen.controller]);
-
-  return (
-    <Layout>
-      <Link to={'/maps/create'}>Create</Link>
-      {error ? <p>Error {error}</p> : null}
-      <List
-        screen={screen}
-        cells={StoreData.screens[screen.key].cells}
-        data={data}
-      />
-    </Layout>
-  );
-}

package/src/screens/Form.tsx

@@ -1,67 +0,0 @@
-import React, { useEffect } from 'react';
-import { Screen } from '../types/Screen';
-import { FieldErrors, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
-import { CrudApi } from '../api/crudApi';
-import { StoreData } from "../utils/storeData";
-
-export function Form({ data, screen }: { data?: any; screen: Screen }) {
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<any>({
-    resolver: StoreData.screens[screen.controller].resolver,
-    defaultValues: data,
-  });
-  const navigate = useNavigate();
-  const fields = StoreData.screens[screen.controller].fields;
-  useEffect(() => {
-    reset(data);
-  }, [data, reset]);
-  return (
-    <div className="form-wrapper">
-      <form
-        onSubmit={handleSubmit((dataForm) => {
-          if (data) {
-            CrudApi.edit(screen.controller, dataForm).then(() => {
-              navigate('/' + screen.controller, {
-                replace: true,
-              });
-            });
-          } else {
-            CrudApi.create(screen.controller, dataForm).then(() => {
-              navigate('/' + screen.controller, {
-                replace: true,
-              });
-            });
-          }
-        })}
-      >
-        {fields.map((field) => (
-          <div className="form-field" key={field}>
-            <label htmlFor={field}>
-              {field.charAt(0).toUpperCase() + field.slice(1)}
-            </label>
-            <input
-              type="text"
-              {...register(field)}
-              placeholder={`Enter ${field}`}
-              id={field}
-            />
-            {errors[field] && (
-              <span className="error-message">
-                {/*@ts-ignore*/}
-                {(errors[field] as FieldErrors)?.message}
-              </span>
-            )}
-          </div>
-        ))}
-        <button type="submit" className="submit-button">
-          Submit
-        </button>
-      </form>
-    </div>
-  );
-}

package/src/utils/getScreenForRoutes.tsx

@@ -1,44 +0,0 @@
-import { Route } from 'react-router';
-import { ControllerCreate } from '../screens/ControllerCreate';
-import { ControllerDetails } from '../screens/ControllerDetails';
-import { ControllerEdit } from '../screens/ControllerEdit';
-import { ControllerList } from '../screens/ControllerList';
-import { Screen } from '../types/Screen';
-import React from 'react';
-import { StoreData } from "./storeData";
-
-export function getScreenForRoutes() {
-  const screens = Object.entries(StoreData.screens);
-  return (
-    <>
-      {screens.map(([key, screenData]) => {
-        let routePath = `/${screenData.crud.controller}`;
-        const screen: Screen = {
-          key,
-          controller: screenData.crud.controller,
-        };
-        return (
-          <React.Fragment key={'index'}>
-            <Route
-              path={routePath + '/create'}
-              element={<ControllerCreate screen={screen} />}
-            />
-            <Route
-              path={routePath + '/details/:id'}
-              element={<ControllerDetails screen={screen} />}
-            />
-            <Route
-              path={routePath + '/edit/:id'}
-              element={<ControllerEdit screen={screen} />}
-            />
-            <Route
-              path={routePath}
-              element={<ControllerList screen={screen} />}
-            />
-          </React.Fragment>
-        );
-      })}
-      <Route path="*" element={<div>404 - Not Found</div>} />
-    </>
-  );
-}

package/src/utils/storeData.ts

@@ -1,7 +0,0 @@
-import { ScreenCreatorData } from "../types/ScreenCreatorData";
-
-export const StoreData: {
-	screens: Record<string, ScreenCreatorData<any>>
-} = {
-	screens: {},
-};