proje-react-panel 1.1.2 → 1.1.3

package/src/components/list/cells/DownloadCell.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+import { DownloadCellConfiguration } from '../../../decorators/list/cells/DownloadCell';
+
+interface DownloadCellProps {
+  value: string;
+  configuration: CellConfiguration;
+}
+
+export function DownloadCell({ value, configuration }: DownloadCellProps): React.ReactElement {
+  if (!value) return <>-</>;
+
+  const downloadConfiguration = configuration as DownloadCellConfiguration;
+  const baseUrl = downloadConfiguration.baseUrl || '';
+  const downloadUrl = baseUrl + value;
+
+  return (
+    <a
+      href={downloadUrl}
+      download
+      className="download-link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Download
+    </a>
+  );
+}

package/src/components/list/cells/ImageCell.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+import { ImageCellConfiguration } from '../../../decorators/list/cells/ImageCell';
+interface ImageCellProps {
+  value: string;
+  configuration: CellConfiguration;
+}
+
+export function ImageCell({ value, configuration }: ImageCellProps) {
+  const imageConfiguration = configuration as ImageCellConfiguration;
+  if (!value) return <>-</>;
+
+  return (
+    <img
+      width={100}
+      height={100}
+      src={imageConfiguration.baseUrl + value}
+      style={{ objectFit: 'contain' }}
+      alt=""
+    />
+  );
+}

package/src/components/list/cells/UUIDCell.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface UUIDCellProps {
+  value: string;
+}
+
+export function UUIDCell({ value }: UUIDCellProps) {
+  if (!value || typeof value !== 'string' || value.length < 6) return <>-</>;
+
+  return <>{`${value.slice(0, 3)}...${value.slice(-3)}`}</>;
+}

package/src/decorators/list/Cell.ts

@@ -1,7 +1,8 @@
 import 'reflect-metadata';
 import { AnyClass } from '../../types/AnyClass';
+import { createDecorator, DecoratorMap } from '../../utils/decerators';
 
-export const CELL_KEY = Symbol('cell');
+export const CELL_KEY: Symbol = Symbol('cell');
 
 interface Filter {
   type: 'string' | 'number' | 'date' | 'static-select';
@@ -13,7 +14,7 @@ export interface StaticSelectFilter extends Filter {
 }
 
 export type CellTypes = 'string' | 'date' | 'number' | 'boolean' | 'uuid';
-export type ExtendedCellTypes = CellTypes | 'image';
+export type ExtendedCellTypes = CellTypes | 'image' | 'download';
 
 export interface CellOptions {
   name?: string;
@@ -22,38 +23,23 @@ export interface CellOptions {
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
 }
-export interface ExtendedCellOptions extends Omit<CellOptions, 'type'> {
-  type?: ExtendedCellTypes;
-}
 
 export interface CellConfiguration extends Omit<CellOptions, 'type'> {
   name: string;
   type: ExtendedCellTypes;
 }
 
-export function Cell(options?: CellOptions): PropertyDecorator {
-  //TODO: reduce all similar code
-  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 ExtendedCell(options?: ExtendedCellOptions): PropertyDecorator {
-  return (target, propertyKey) => {
-    const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
-    Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
+export const cellMap: DecoratorMap<CellOptions, CellConfiguration> = (
+  { propertyKey },
+  options
+) => ({
+  ...options,
+  name: options.name || propertyKey.toString(),
+  type: options.type || 'string',
+});
 
-    if (options) {
-      const keyString = `${CELL_KEY.toString()}:${propertyKey.toString()}:options`;
-      Reflect.defineMetadata(keyString, options, target);
-    }
-  };
+export function Cell(options?: CellOptions): PropertyDecorator {
+  return createDecorator(CELL_KEY, options, cellMap);
 }
 
 export function getCellFields<T extends AnyClass>(entityClass: T): CellConfiguration[] {
@@ -61,12 +47,8 @@ export function getCellFields<T extends AnyClass>(entityClass: T): CellConfigura
   const inputFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
 
   return inputFields.map(field => {
-    const fields: CellOptions =
+    const fields: CellConfiguration =
       Reflect.getMetadata(`${CELL_KEY.toString()}:${field}:options`, prototype) || {};
-    return {
-      ...fields,
-      name: fields.name || field,
-      type: fields.type as ExtendedCellTypes,
-    };
+    return fields;
   });
 }

package/src/decorators/list/ExtendedCell.ts

@@ -0,0 +1,32 @@
+import {
+  CELL_KEY,
+  CellConfiguration,
+  CellOptions,
+  CellTypes,
+  Cell,
+  ExtendedCellTypes,
+  cellMap,
+} from './Cell';
+import { createDecorator, DecoratorMap } from '../../utils/decerators';
+
+export interface ExtendedCellOptions extends Omit<CellOptions, 'type'> {
+  type?: ExtendedCellTypes;
+}
+
+interface ExtendedCellConfiguration extends Omit<CellConfiguration, 'name'> {
+  name?: string;
+}
+
+export function ExtendedCell<T extends ExtendedCellOptions, K extends ExtendedCellConfiguration>(
+  options?: T,
+  map?: DecoratorMap<T, K>
+): PropertyDecorator {
+  return createDecorator<T, K>(CELL_KEY, options, ({ target, propertyKey }, optionsInner) => {
+    const config = cellMap({ target, propertyKey }, optionsInner as CellOptions);
+    const newConfig: K | undefined = map ? map({ target, propertyKey }, optionsInner) : undefined;
+    return {
+      ...config,
+      ...newConfig,
+    } as K;
+  });
+}

package/src/decorators/list/cells/DownloadCell.ts

@@ -0,0 +1,18 @@
+import { CellConfiguration, CellOptions } from '../Cell';
+import { ExtendedCell } from '../ExtendedCell';
+
+export interface DownloadCellOptions extends Omit<CellOptions, 'type'> {
+  baseUrl: string;
+}
+
+export interface DownloadCellConfiguration extends CellConfiguration {
+  type: 'download';
+  baseUrl: string;
+}
+
+export function DownloadCell(options?: DownloadCellOptions): PropertyDecorator {
+  return ExtendedCell(options, (_, options) => ({
+    ...options,
+    type: 'download',
+  }));
+}

package/src/decorators/list/cells/ImageCell.ts

@@ -1,17 +1,18 @@
-import 'reflect-metadata';
-import { Cell, CellConfiguration, CellOptions, ExtendedCell } from '../Cell';
+import { CellConfiguration, CellOptions } from '../Cell';
+import { ExtendedCell, ExtendedCellOptions } from '../ExtendedCell';
 
-export interface ImageCellOptions extends CellOptions {
+export interface ImageCellOptions extends Omit<CellOptions, 'type'> {
   baseUrl: string;
 }
 
 export interface ImageCellConfiguration extends CellConfiguration {
   type: 'image';
+  baseUrl: string;
 }
 
 export function ImageCell(options?: ImageCellOptions): PropertyDecorator {
-  return ExtendedCell({
+  return ExtendedCell(options, (_, options) => ({
     ...options,
     type: 'image',
-  });
+  }));
 }

package/src/index.ts

@@ -19,6 +19,7 @@ export { FormPage } from './components/form/FormPage';
 export { Form, type OnSubmitFN } from './decorators/form/Form';
 export { Input } from './decorators/form/Input';
 export { SelectInput } from './decorators/form/inputs/SelectInput';
+export { DownloadCell } from './decorators/list/cells/DownloadCell';
 //for nested form fields
 export { getInputFields } from './decorators/form/Input';
 

package/src/styles/list.scss

@@ -1,7 +1,7 @@
 @import 'utils/scrollbar';
 $header-height: 60px;
 $footer-height: 60px;
-$datagrid-height: calc(100vh - ($header-height + $footer-height));
+$datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
 .list {
   width: 100%;
   background-color: #2b2b2b;

package/src/utils/decerators.ts

@@ -0,0 +1,24 @@
+export type DecoratorMap<T, K> = (
+  { target, propertyKey }: { target: Object; propertyKey: string | symbol },
+  options: T
+) => K;
+export function createDecorator<T extends { name?: string }, K>(
+  key: Symbol,
+  options?: T,
+  map?: DecoratorMap<T, K>
+): PropertyDecorator {
+  return (target, propertyKey) => {
+    const propKeyStr = propertyKey.toString();
+    const existingCells: string[] = Reflect.getMetadata(key, target) || [];
+
+    if (options) {
+      const keyString = `${key.toString()}:${propKeyStr}:options`;
+      const config = map ? map({ target, propertyKey }, options) : options;
+
+      Reflect.defineMetadata(key, [...existingCells, propKeyStr], target);
+      Reflect.defineMetadata(keyString, config, target);
+    } else {
+      Reflect.defineMetadata(key, [...existingCells, propKeyStr], target);
+    }
+  };
+}