proje-react-panel 1.0.17 → 1.1.0

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 { ImageUploader } from './ImageUploader';
-export { ErrorComponent } from './ErrorComponent';
-export { Label } from './Label';
-export { ErrorBoundary } from './ErrorBoundary'; 

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

@@ -1,127 +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 =
-    typeof listData.list?.cells === 'function'
-      ? listData.list?.cells?.(data[0])
-      : listData.list?.cells;
-
-  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) => (
-              <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>;
-                })}
-                {listGeneralCells?.details && (
-                  <td>
-                    <Link to={listGeneralCells.details.path} className="util-cell-link">
-                      <SearchIcon className="icon icon-search" />
-                      <span className="util-cell-label">{listGeneralCells.details.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {listGeneralCells?.edit && (
-                  <td>
-                    <Link to={listGeneralCells.edit.path} className="util-cell-link">
-                      <PencilIcon className="icon icon-pencil" />
-                      <span className="util-cell-label">{listGeneralCells.edit.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {listGeneralCells?.delete && (
-                  <td>
-                    <a
-                      onClick={() => {
-                        onRemoveItem?.(item);
-                      }}
-                      className="util-cell-link"
-                    >
-                      <TrashIcon className="icon icon-trash" />
-                      <span className="util-cell-label">{listGeneralCells.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,34 +0,0 @@
-import React, { useMemo } from 'react';
-import { InnerForm } from '../components';
-import { AnyClass } from '../../types/AnyClass';
-import { getFormFields } from '../../decorators/form/getFormFields';
-
-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: T;
-  getDetailsData?: GetDetailsDataFN<T>;
-  redirect?: string;
-  onSubmit: OnSubmitFN<T>;
-  redirectBackOnSuccess?: boolean;
-}
-
-export function FormPage<T extends AnyClass>({
-  model,
-  getDetailsData,
-  onSubmit,
-  redirect,
-  redirectBackOnSuccess = true,
-  ...rest
-}: FormPageProps<T>) {
-  const formOptions = useMemo(() => getFormFields(model), [model]);
-  return (
-    <InnerForm
-      getDetailsData={getDetailsData}
-      onSubmit={onSubmit}
-      formOptions={formOptions}
-      redirectBackOnSuccess={redirectBackOnSuccess}
-    />
-  );
-}

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,13 +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 {
-	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),
-  };
-}

package/src/styles/image-uploader.scss

@@ -1,94 +0,0 @@
-.multi-image {
-
-  &.hover {
-    .container {
-      border: 2px solid rgb(160,160,160);
-      background-color: rgb(250,250,250);
-
-      .plus {
-        background-color: rgb(240,240,240);
-      }
-    }
-  }
-
-  &.after {
-    .container {
-      button.trash {display:block;
-      }
-    }
-  }
-
-  .container {
-    width: 100%;
-    display: grid;
-    grid-column-gap: 50px;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: center;
-    border: 2px dashed rgb(160,160,160);
-    background-color: white;
-    min-height: 200px;
-    padding: 10px;
-    position:relative;
-
-    button.trash {
-      display:none;
-      position: absolute;
-      z-index: 1000;
-      right: 0;
-      top: 0;
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: rgb(50,50,50);
-    }
-
-    > div {
-      text-align: center;
-    }
-
-    .image-container {
-      border: 1px solid rgb(245,245,255);
-      padding: 5px;
-      background-color: white;
-      position: relative;
-
-      .image.removed {
-        opacity: 0.3;
-      }
-
-      button {
-        position: absolute;
-        right: 0;
-        top: 0;
-        background: none;
-        border: none;
-        cursor: pointer;
-
-        &.remove {
-          color: red;
-        }
-      }
-    }
-
-    .plus {
-      background-color: rgb(245,245,245);
-      position: relative;
-      height: 180px;
-      width: 200px;
-
-      span {
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%);
-
-        > * {
-          display: block;
-          margin: 0 auto;
-          text-align: center;
-        }
-      }
-    }
-  }
-}

package/src/types/Screen.ts

@@ -1,4 +0,0 @@
-export interface Screen {
-  key: string,
-  controller: string,
-}

package/src/types/ScreenCreatorData.ts

@@ -1,14 +0,0 @@
-import { CellOptions } from '../decorators/list/Cell';
-import { CrudOptions } from '../decorators/Crud';
-import { InputOptions } from '../decorators/form/Input';
-import { ListOptions } from '../decorators/list/List';
-//TODO: remove
-export interface ScreenCreatorData {
-  resolver: any;
-  fields: string[];
-  inputs: InputOptions[];
-  crud?: CrudOptions;
-  path: string;
-  list?: ListOptions<any>;
-  cells: CellOptions[];
-}

package/src/utils/createScreens.ts

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

package/src/utils/getFields.ts

@@ -1,22 +0,0 @@
-import { getMetadataStorage } from "class-validator";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-import { ScreenCreatorData } from "../types/ScreenCreatorData";
-import { getInputFields } from "../decorators/form/Input";
-import { getClassListData } from "../decorators/list/List";
-import { getCellFields } from "../decorators/list/GetCellFields";
-import { AnyClass } from "../types/AnyClass";
-
-export function getFields<T extends AnyClass>(key: string, entityClass: T): ScreenCreatorData {
-	const metadataStorage = getMetadataStorage();
-	const targetMetadata = metadataStorage.getTargetValidationMetadatas(entityClass as any, "", false, false);
-	const listData = getClassListData(entityClass);
-	return {
-		resolver: classValidatorResolver(entityClass as any),
-		cells: getCellFields(entityClass),
-		list: listData,
-		fields: Array.from(new Set(targetMetadata.map((meta) => meta.propertyName))),
-		inputs: getInputFields<T>(entityClass),
-		crud: { controller: "" },
-		path: "/" + key,
-	};
-}