proje-react-panel 1.0.17-test7 → 1.1.0

package/src/styles/details.scss

@@ -0,0 +1,62 @@
+:root {
+  --background-color: #1a1a1a;
+  --text-color: #e0e0e0;
+  --label-color: #a0a0a0;
+  --empty-value-color: #666;
+  --error-color: #ff6b6b;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+.details-page {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  .details-item {
+    background: var(--background-color);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 2px 4px var(--shadow-color);
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+
+    .item-label {
+      font-size: 0.875rem;
+      color: var(--label-color);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 0.5rem;
+    }
+
+    .item-value {
+      font-size: 1rem;
+      color: var(--text-color);
+      line-height: 1.5;
+      word-break: break-word;
+
+      &:empty {
+        &::after {
+          content: '—';
+          color: var(--empty-value-color);
+        }
+      }
+    }
+  }
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.error-container {
+  padding: 2rem;
+  text-align: center;
+  color: var(--error-color);
+}

package/src/styles/form.scss

@@ -12,13 +12,6 @@
   .form-field {
     margin-bottom: 16px;
 
-    label {
-      font-weight: bold;
-      margin-bottom: 6px;
-      display: block;
-      color: #f2f2f2;
-    }
-
     input[type='text'],
     input[type='password'],
     input[type='email'],
@@ -86,3 +79,10 @@
     }
   }
 }
+
+.label {
+  font-weight: bold;
+  margin-bottom: 6px;
+  display: block;
+  color: #f2f2f2;
+}

package/src/styles/index.scss

@@ -4,13 +4,15 @@
 @import './list';
 @import './login';
 @import './error-boundary';
-@import './image-uploader';
 @import './counter';
 @import './loading-screen';
 @import './pagination';
 @import './filter-popup';
-@import './uploader';
+@import './components/uploader.scss';
+@import './components/checkbox';
+@import './details';
 
+//TODO: import deprecated
 .layout {
   display: flex;
   max-height: 100vh;
@@ -39,4 +41,16 @@
   height: 14px;
   stroke: currentColor;
   fill: currentColor;
+  &.icon-true {
+    width: 20px;
+    height: 20px;
+    stroke: #4caf50;
+    fill: none;
+  }
+  &.icon-false {
+    width: 20px;
+    height: 20px;
+    stroke: #ff0000;
+    fill: none;
+  }
 }

package/src/types/AnyClass.ts

@@ -1,3 +1,2 @@
-//export type AnyClass = abstract new (...args: any[]) => any;
-//TODO2: ANY IS NOT A GOOD SOLUTION, WE NEED TO FIND A BETTER WAY TO DO THIS
-export type AnyClass = any;
+export type AnyClass = Record<string, any>;
+export type AnyClassConstructor<T extends AnyClass> = new (...args: any[]) => T;

package/src/types/initPanelOptions.ts

@@ -1,3 +1 @@
-export interface InitPanelOptions {
-  screenPaths: Record<string, string>;
-}
+export interface InitPanelOptions {}

package/src/components/components/Checkbox.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  id: string;
-}
-
-export function Checkbox({ id, ...props }: CheckboxProps) {
-  return <input type="checkbox" id={id} className="checkbox" {...props} />;
-}

package/src/components/components/InnerForm.tsx

@@ -1,113 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { InputOptions } from '../../decorators/form/Input';
-import { FormField } from './FormField';
-import { FormOptions } from '../../decorators/form/FormOptions';
-import { AnyClass } from '../../types/AnyClass';
-import { OnSubmitFN, GetDetailsDataFN } from '../pages/FormPage';
-import { useParams, useNavigate } from 'react-router';
-
-interface InnerFormProps<T> {
-  formOptions: FormOptions;
-  onSubmit: OnSubmitFN<T>;
-  getDetailsData?: GetDetailsDataFN<T>;
-  redirectBackOnSuccess?: boolean;
-  onSelectPreloader?: (inputOptions: InputOptions) => Promise<{ label: string; value: string }[]>;
-  type?: 'json' | 'formData';
-}
-
-export function InnerForm<T>({
-  formOptions,
-  onSubmit,
-  getDetailsData,
-  redirectBackOnSuccess,
-  onSelectPreloader,
-  type,
-}: InnerFormProps<T>) {
-  const params = useParams();
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  //TODO: any is not a good solution, we need to find a better way to do this
-  const form = useForm<any>({
-    resolver: formOptions.resolver,
-  });
-  const formRef = useRef<HTMLFormElement>(null);
-  const navigate = useNavigate();
-  const inputs = formOptions.inputs;
-  useEffect(() => {
-    if (getDetailsData) {
-      getDetailsData(params as Record<string, string>).then(data => {
-        form.reset({ ...data });
-      }); 
-    }
-  }, [params, form.reset]);
-
-  return (
-    <div className="form-wrapper">
-      <FormProvider {...form}>
-        <form
-          ref={formRef}
-          onSubmit={form.handleSubmit(
-            async dataForm => {
-              try {
-                console.log('dataForm', dataForm);
-                const data =
-                  type === 'json'
-                    ? dataForm
-                    : (() => {
-                        const formData = new FormData(formRef.current!);
-                        for (const key in dataForm) {
-                          if (!formData.get(key)) {
-                            formData.append(key, dataForm[key]);
-                          }
-                        }
-                        console.log('formData', formData);
-                        return formData;
-                      })();
-                console.log('data', data);
-                await onSubmit(data);
-                setErrorMessage(null);
-                if (redirectBackOnSuccess) {
-                  navigate(-1);
-                }
-              } catch (error: any) {
-                const message =
-                  error?.response?.data?.message ||
-                  (error instanceof Error ? error.message : 'An error occurred');
-                setErrorMessage(message);
-                console.error(error);
-              }
-            },
-            (errors, event) => {
-              //TOOD: put error if useer choose global error
-              console.log('error creating creation', errors, event);
-            }
-          )}
-        >
-          <div>
-            {errorMessage && (
-              <div className="error-message" style={{ color: 'red', marginBottom: '1rem' }}>
-                {errorMessage}
-              </div>
-            )}
-            {inputs?.map((input: InputOptions) => (
-              <FormField
-                key={input.name || ''}
-                input={input}
-                register={form.register}
-                onSelectPreloader={onSelectPreloader}
-                error={
-                  input.name
-                    ? { message: (form.formState.errors[input.name as keyof T] as any)?.message }
-                    : undefined
-                }
-              />
-            ))}
-            <button type="submit" className="submit-button">
-              Submit
-            </button>
-          </div>
-        </form>
-      </FormProvider>
-    </div>
-  );
-}

package/src/components/components/Label.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface LabelProps {
-    htmlFor: string;
-    label?: string;
-    fieldName: string;
-}
-
-export function Label({ htmlFor, label, fieldName }: LabelProps) {
-    return (
-        <label htmlFor={htmlFor}>
-            {label ?? fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}
-        </label>
-    );
-} 

package/src/components/components/index.ts

@@ -1,8 +0,0 @@
-export { InnerForm } from './InnerForm';
-export { FormField } from './FormField';
-export { LoadingScreen } from './LoadingScreen';
-export { Counter } from './Counter';
-export { Uploader } from './Uploader';
-export { ErrorComponent } from './ErrorComponent';
-export { Label } from './Label';
-export { ErrorBoundary } from './ErrorBoundary';

package/src/components/components/list/Datagrid.tsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import { CellOptions } from '../../../decorators/list/Cell';
-import { Link } from 'react-router';
-import { useAppStore } from '../../../store/store';
-import { ImageCellOptions } from '../../../decorators/list/ImageCell';
-import { ListData } from '../../../decorators/list/ListData';
-import { EmptyList } from './EmptyList';
-import SearchIcon from '../../../assets/icons/svg/search.svg';
-import PencilIcon from '../../../assets/icons/svg/pencil.svg';
-import TrashIcon from '../../../assets/icons/svg/trash.svg';
-
-interface DatagridProps<T> {
-  data: T[];
-  listData: ListData<T>;
-  onRemoveItem?: (item: T) => Promise<void>;
-}
-
-export function Datagrid<T>({ data, listData, onRemoveItem }: DatagridProps<T>) {
-  const cells = listData.cells;
-  const listGeneralCells = data?.[0]
-    ? typeof listData.list?.cells === 'function'
-      ? listData.list?.cells?.(data[0])
-      : listData.list?.cells
-    : null;
-
-  return (
-    <div className="datagrid">
-      {!data || data.length === 0 ? (
-        <EmptyList />
-      ) : (
-        <table className="datagrid-table">
-          <thead>
-            <tr>
-              {cells.map(cellOptions => (
-                <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
-              ))}
-              {listGeneralCells?.details && <th>Details</th>}
-              {listGeneralCells?.edit && <th>Edit</th>}
-              {listGeneralCells?.delete && <th>Delete</th>}
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((item, index) => {
-              const listCells = item
-                ? typeof listData.list?.cells === 'function'
-                  ? listData.list?.cells?.(item)
-                  : listData.list?.cells
-                : null;
-              return (
-                <tr key={index}>
-                  {cells.map(cellOptions => {
-                    // @ts-ignore
-                    const value = item[cellOptions.name];
-                    let render = value ?? '-'; // Default value if the field is undefined or null
-
-                    switch (cellOptions.type) {
-                      case 'date':
-                        if (value) {
-                          const date = new Date(value);
-                          render = `${date.getDate().toString().padStart(2, '0')}/${(
-                            date.getMonth() + 1
-                          )
-                            .toString()
-                            .padStart(
-                              2,
-                              '0'
-                            )}/${date.getFullYear()} ${date.getHours().toString().padStart(2, '0')}:${date
-                            .getMinutes()
-                            .toString()
-                            .padStart(2, '0')}`;
-                        }
-                        break;
-
-                      case 'image': {
-                        const imageCellOptions = cellOptions as ImageCellOptions;
-                        render = (
-                          <img
-                            width={100}
-                            height={100}
-                            src={imageCellOptions.baseUrl + value}
-                            style={{ objectFit: 'contain' }}
-                          />
-                        );
-                        break;
-                      }
-                      case 'string':
-                      default:
-                        render = value ? value.toString() : (cellOptions?.placeHolder ?? '-'); // Handles string type or default fallback
-                        break;
-                    }
-                    /*
-								if (cellOptions.linkTo) {
-									render = <Link to={cellOptions.linkTo(item)}>{formattedValue}</Link>;
-								}
-*/
-                    return <td key={cellOptions.name}>{render}</td>;
-                  })}
-                  {listCells?.details && (
-                    <td>
-                      <Link to={listCells.details.path} className="util-cell-link">
-                        <SearchIcon className="icon icon-search" />
-                        <span className="util-cell-label">{listCells.details.label}</span>
-                      </Link>
-                    </td>
-                  )}
-                  {listCells?.edit && (
-                    <td>
-                      <Link to={listCells.edit.path} className="util-cell-link">
-                        <PencilIcon className="icon icon-pencil" />
-                        <span className="util-cell-label">{listCells.edit.label}</span>
-                      </Link>
-                    </td>
-                  )}
-                  {listCells?.delete && (
-                    <td>
-                      <a
-                        onClick={() => {
-                          onRemoveItem?.(item);
-                        }}
-                        className="util-cell-link util-cell-link-remove"
-                      >
-                        <TrashIcon className="icon icon-trash" />
-                        <span className="util-cell-label">{listCells.delete.label}</span>
-                      </a>
-                    </td>
-                  )}
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
-}

package/src/components/pages/ControllerDetails.tsx

@@ -1,37 +0,0 @@
-import { useParams } from 'react-router';
-import React, { useEffect, useState } from 'react';
-import { Screen } from '../../types/Screen';
-import { ErrorComponent } from '../components/ErrorComponent';
-
-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({ ...fetchSettings, token }, screen.controller, id)
-        .then(res => {
-          setData(res);
-        })
-        .catch((e: any) => {
-          setError(e);
-          console.error(e);
-        });
-*/
-    }
-  }, [id, screen]);
-
-  if (error) {
-    return <ErrorComponent error={error} />;
-  }
-
-  return (
-    <p
-      dangerouslySetInnerHTML={{
-        __html: JSON.stringify(data, null, '   ' + '<br/>'),
-      }}
-    />
-  );
-}

package/src/components/pages/FormPage.tsx

@@ -1,41 +0,0 @@
-import React, { useMemo } from 'react';
-import { InnerForm } from '../components';
-import { AnyClass } from '../../types/AnyClass';
-import { getFormFields } from '../../decorators/form/getFormFields';
-import { InputOptions } from '../../decorators/form/Input';
-
-export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
-export type OnSubmitFN<T> = (data: T) => Promise<T>;
-
-export interface FormPageProps<T extends AnyClass> {
-  model: any; //TODO: use T not typeof T
-  getDetailsData?: GetDetailsDataFN<T>;
-  redirect?: string;
-  onSubmit: OnSubmitFN<T>;
-  onSelectPreloader?: (inputOptions: InputOptions) => Promise<{ label: string; value: string }[]>;
-  redirectBackOnSuccess?: boolean;
-  type?: 'json' | 'formData';
-}
-
-export function FormPage<T extends AnyClass>({
-  model,
-  getDetailsData,
-  onSubmit,
-  redirect,
-  onSelectPreloader,
-  redirectBackOnSuccess = true,
-  type = 'json',
-  ...rest
-}: FormPageProps<T>) {
-  const formOptions = useMemo(() => getFormFields(model), [model]);
-  return (
-    <InnerForm
-      getDetailsData={getDetailsData}
-      onSubmit={onSubmit}
-      formOptions={formOptions}
-      redirectBackOnSuccess={redirectBackOnSuccess}
-      onSelectPreloader={onSelectPreloader}
-      type={type}
-    />
-  );
-}

package/src/decorators/Crud.ts

@@ -1,20 +0,0 @@
-import 'reflect-metadata';
-
-const CRUD_KEY = 'Crud'; // Changed from Symbol to string
-
-export interface CrudOptions {
-  controller: string;
-}
-
-export function Crud(options?: CrudOptions): ClassDecorator {
-  return (target: Function) => {
-    if (options) {
-      Reflect.defineMetadata(CRUD_KEY, options, target);
-    }
-  };
-}
-
-
-export function getClassCrudData(entityClass: any): CrudOptions | undefined {
-  return Reflect.getMetadata(CRUD_KEY, entityClass);
-}

package/src/decorators/form/FormOptions.ts

@@ -1,8 +0,0 @@
-import { FormConfiguration } from "./Form";
-import { InputOptions } from "./Input";
-
-export interface FormOptions {
-	resolver: any; //TODO: type
-	form?: FormConfiguration;
-	inputs?: InputOptions[];
-}

package/src/decorators/form/getFormFields.ts

@@ -1,14 +0,0 @@
-import { AnyClass } from "../../types/AnyClass";
-import { FormOptions } from "./FormOptions";
-import { getInputFields } from "./Input";
-import { getFormConfiguration } from "./Form";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-
-export function getFormFields<T extends AnyClass>(entityClass: T): FormOptions {
-	console.log(entityClass);
-	return {
-		resolver: classValidatorResolver(entityClass as any),
-		form: getFormConfiguration(entityClass),
-		inputs: getInputFields<T>(entityClass),
-	};
-}

package/src/decorators/list/GetCellFields.ts

@@ -1,13 +0,0 @@
-import { CELL_KEY, CellOptions } from "./Cell";
-
-export function getCellFields(entityClass: any): CellOptions[] {
-	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/decorators/list/ImageCell.ts

@@ -1,13 +0,0 @@
-import "reflect-metadata";
-import { Cell, CellOptions } from "./Cell";
-
-export interface ImageCellOptions extends CellOptions {
-	baseUrl: string;
-}
-
-export function ImageCell(options?: ImageCellOptions): PropertyDecorator {
-	return Cell({
-		...options,
-		type: "image",
-	});
-}

package/src/decorators/list/ListData.ts

@@ -1,7 +0,0 @@
-import { ListOptions } from './List';
-import { CellOptions } from './Cell';
-
-export interface ListData<T> {
-  list?: ListOptions<T>;
-  cells: CellOptions[];
-}

package/src/decorators/list/getListFields.ts

@@ -1,10 +0,0 @@
-import { getClassListData } from './List';
-import { getCellFields } from './GetCellFields';
-import { ListData } from './ListData';
-
-export function getListFields<T>(entityClass: T): ListData<T> {
-  return {
-    list: getClassListData(entityClass),
-    cells: getCellFields(entityClass),
-  };
-}