5htp-core 0.5.0-8 → 0.5.0-9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.5.0-8",
+	"version": "0.5.0-9",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/components/Table/index.tsx

@@ -20,14 +20,20 @@ import Checkbox from '../inputv3/Checkbox';
 export type TDonneeInconnue = { id: any } &  {[cle: string]: any};
 
 export type Props<TRow> = {
-    
-    data: TRow[],
-    columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
+
+    // Appearence
     stickyHeader?: boolean,
+    className?: string,
 
+    // Data
+    data: TRow[],
     setData?: (rows: TRow[]) => void,
+    columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
     empty?: ComponentChild | false,
-    className?: string,
+
+    // Interactions
+    sort?: TSortOptions,
+    onSort?: (columnId: string | null, order: TSortOptions["order"]) => void,
 
     selection?: [TRow[], React.SetStateAction<TRow[]>],
     maxSelection?: number,
@@ -38,13 +44,19 @@ export type TColumn = JSX.HTMLAttributes<HTMLElement> & {
     cell: ComponentChild,
     raw?: number | string | boolean,
     stick?: boolean,
+    sort?: TSortOptions
+}
+
+type TSortOptions = {
+    id: string,
+    order: 'desc' | 'asc'
 }
 
 /*----------------------------------
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
-    stickyHeader,
+    stickyHeader, onSort, sort: sorted,
     data: rows, setData, empty,
     selection: selectionState, maxSelection,
     columns, ...props
@@ -99,6 +111,7 @@ export default function Liste<TRow extends TDonneeInconnue>({
 
             {columns(row, rows, iDonnee).map(({ 
                 label, cell, class: className, raw, 
+                sort,
                 stick, width, ...cellProps 
             }) => {
 
@@ -123,9 +136,30 @@ export default function Liste<TRow extends TDonneeInconnue>({
                     }
                 }
 
+                const isCurrentlySorted = sort && sorted && sorted.id === sort.id;
+                const isSortable = sort && onSort;
+                if (isSortable) {
+                    classe += ' clickable';
+                    cellProps.onClick = () => {
+                        if (isCurrentlySorted)
+                            onSort(null, sort.order);
+                        else
+                            onSort(sort.id, sort.order);
+                    }
+                }
+
                 if (iDonnee === 0) renduColonnes.push(
                     <th class={classe} {...cellProps}>
-                        {label}
+                        <div class="row sp-btw">
+                            
+                            {isSortable ? (
+                                <a>{label}</a>
+                            ) : label}
+
+                            {isCurrentlySorted && (
+                                <i src={sort.order === "asc" ? "caret-up" : "caret-down"} />
+                            )}
+                        </div>
                     </th>
                 );
 

package/src/client/components/inputv3/Rte/Editor.tsx

@@ -84,10 +84,6 @@ export const EMPTY_STATE = '{"root":{"children":[{"children":[],"direction":null
 - TYPES
 ----------------------------------*/
 
-export type Props = {
-    preview?: boolean,
-}
-
 const ValueControlPlugin = ({ props, value }) => {
 
     const [editor] = useLexicalComposerContext();
@@ -111,6 +107,69 @@ export default ({ value, setValue, props }: {
     setValue: (value: string) => void,
     props: TRteProps
 }) => {
+    
+    let {
+        // Decoration
+        title,
+        // Actions
+        preview = true
+    } = props;
+
+    /*----------------------------------
+    - PREVIEW
+    ----------------------------------*/
+
+    const [isPreview, setIsPreview] = React.useState(preview);
+    const [html, setHTML] = React.useState(null);
+
+    React.useEffect(() => {
+        if (isPreview) {
+            renderPreview(value).then(setHTML);
+        }
+    }, [value, isPreview]);
+
+    // When isPreview changes, close the active editor
+    React.useEffect(() => {
+        if (!isPreview) {
+
+            // Close active editor
+            if (RichEditorUtils.active && RichEditorUtils.active?.title !== title)
+                RichEditorUtils.active.close();
+
+            // Set active Editor
+            RichEditorUtils.active = {
+                title,
+                close: () => preview ? setIsPreview(true) : null
+            }
+
+        }
+    }, [isPreview]);
+
+    const renderPreview = async (value: {} | undefined) => {
+
+        if (!value)
+            return '';
+
+        if (typeof document === 'undefined')
+            throw new Error("HTML preview disabled in server side.");
+
+        const html = await RichEditorUtils.jsonToHtml(value);
+
+        return html;
+    }
+
+    if (isPreview)
+        return (
+            html === null ? (
+                <div class="col al-center h-2">
+                    <i src="spin" />
+                </div>
+            ) : (
+                <div class="preview reading h-1-4 scrollable col clickable" 
+                    onClick={() => setIsPreview(false)}
+                    dangerouslySetInnerHTML={{ __html: html }} />
+            )
+        )
 
     /*----------------------------------
     - INIT

package/src/client/components/inputv3/Rte/index.tsx

@@ -21,6 +21,7 @@ import './style.less';
 
 export type Props = {
     preview?: boolean,
+    title: string,
 } 
 
 /*----------------------------------
@@ -28,22 +29,14 @@ export type Props = {
 ----------------------------------*/
 export default (props: Props & InputBaseProps<string>) => {
 
-    let {
-        // Decoration
-        required, size, title, className = '',
-        // State
-        errors,
-        // Actions
-        preview = true
-    } = props;
+    let { className = '' } = props;
 
     /*----------------------------------
     - INIT
     ----------------------------------*/
 
     const [Editor, setEditor] = React.useState<{ default: typeof TEditor }>(null);
-    const [isPreview, setIsPreview] = React.useState(preview);
-    const [html, setHTML] = React.useState(null);
+
     const [{ value }, setValue] = useInput(props, undefined, true);
 
     className += ' input rte';
@@ -53,46 +46,13 @@ export default (props: Props & InputBaseProps<string>) => {
     ----------------------------------*/
 
     React.useEffect(() => {
-        if (isPreview) {
-            renderPreview(value).then(setHTML);
-        }
-    }, [value, isPreview]);
-
-    // When isPreview changes, close the active editor
-    React.useEffect(() => {
-        if (!isPreview) {
-
-            // Close active editor
-            if (RichEditorUtils.active && RichEditorUtils.active?.title !== title)
-                RichEditorUtils.active.close();
-
-            // Set active Editor
-            RichEditorUtils.active = {
-                title,
-                close: () => preview ? setIsPreview(true) : null
-            }
+        if (!Editor) {
 
             // Load editor component if not alreayd done
             // We lazy load since it's heavy and needs to be loade donly on client side
-            if (!Editor) {
-                import('./Editor').then(setEditor);
-            }
-
+            import('./Editor').then(setEditor);
         }
-    }, [isPreview]);
-
-    const renderPreview = async (value: {} | undefined) => {
-
-        if (!value)
-            return '';
-
-        if (typeof document === 'undefined')
-            throw new Error("HTML preview disabled in server side.");
-
-        const html = await RichEditorUtils.jsonToHtml(value);
-
-        return html;
-    }
+    }, []);
 
     /*----------------------------------
     - RENDER
@@ -101,40 +61,15 @@ export default (props: Props & InputBaseProps<string>) => {
         <InputWrapper {...props}>
             <div class={className}>
 
-                {isPreview ? (
+                {Editor === null ? (
 
-                    html === null ? (
-                        <div class="col al-center h-2">
-                            <i src="spin" />
-                        </div>
-                    ) : (
-                        <div class="preview reading h-1-4 scrollable col clickable" 
-                            onClick={() => setIsPreview(false)}
-                            dangerouslySetInnerHTML={{ __html: html }} />
-                    )
+                    <div class="col al-center h-2">
+                        <i src="spin" />
+                    </div>
 
-                ) : Editor !== null && (
+                ) : (
                     <Editor.default value={value} setValue={setValue} props={props} />
                 )}
-
-                {/* <Tag {...fieldProps}
-
-                    placeholder={props.title}
-
-                    // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
-                    ref={refInput}
-                    value={value}
-                    onFocus={() => setState({ focus: true })}
-                    onBlur={() => setState({ focus: false })}
-                    onChange={(e) => updateValue(e.target.value)}
-                    onKeyDown={(e: KeyboardEvent) => {
-
-                        if (onPressEnter && e.key === 'Enter' && value !== undefined) {
-                            commitValue();
-                            onPressEnter(value)
-                        }
-                    }}
-                /> */}
             </div>
         </InputWrapper>
     )

package/src/client/services/router/components/router.tsx

@@ -147,12 +147,12 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
             if (newLayout && curLayout && newLayout.path !== curLayout.path) {
 
                 // TEMPORARY FIX: reload everything when we change layout
-                //  Because layout can have a different theme
+                //  Because layout can have a different CSS theme
                 //  But when we call setLayout, the style of the previous layout are still oaded and applied
                 //  Find a way to unload the  previous layout / page resources before to load the new one
                 console.log(LogPrefix, `Changing layout. Before:`, curLayout, 'New layout:', newLayout);
                 window.location.replace( request ? request.url : window.location.href );
-                return { ...page }
+                return page; // Don't spread since it's an instance
 
                 context.app.setLayout(newLayout);
             }
@@ -191,6 +191,7 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
         // Reset scroll
         window.scrollTo(0, 0);
         // Should be called AFTER rendering the page (so after the state change)
+        console.log("CHANGE PAGE", currentPage);
         currentPage?.updateClient();
         // Scroll to the selected content via url hash
         restoreScroll(currentPage);

package/src/common/errors/index.tsx

@@ -17,9 +17,13 @@ type TJsonError = {
     message: string,
     // Form fields
     errors?: TListeErreursSaisie
-} & TDetailsErreur
+} & TErrorDetails
 
-type TDetailsErreur = {
+type TErrorDetails = {
+    // Allow to identify the error catched (ex: displaying custop content, running custom actions, ...)
+    id?: string,
+    data?: {},
+    // For debugging
     stack?: string,
     origin?: string,
 }
@@ -66,13 +70,13 @@ export abstract class CoreError extends Error {
     public abstract http: number;
     public title: string = "Uh Oh ...";
     public message: string;
-    public details: TDetailsErreur = {};
+    public details: TErrorDetails = {};
 
     // Note: On ne le redéfini pas ici, car déjà présent dans Error
     //      La redéfinition reset la valeur du stacktrace
     //public stack?: string;
 
-    public constructor(message?: string, details?: TDetailsErreur) {
+    public constructor(message?: string, details?: TErrorDetails) {
 
         super(message);
 
@@ -120,7 +124,7 @@ export class InputErrorSchema extends CoreError {
         return chaines.join('; ');
     }
 
-    public constructor( public errors: TListeErreursSaisie, details?: TDetailsErreur) {
+    public constructor( public errors: TListeErreursSaisie, details?: TErrorDetails) {
 
         super( InputErrorSchema.listeToString(errors), details );
 
@@ -199,7 +203,7 @@ export class NetworkError extends Error {
 export const viaHttpCode = (
     code: number, 
     message: string, 
-    details?: TDetailsErreur
+    details?: TErrorDetails
 ): CoreError => {
     return fromJson({
         code,

package/src/common/router/index.ts

@@ -78,6 +78,7 @@ export type TRouteOptions = {
     // Resolving
     domain?: string,
     accept?: string,
+    raw?: boolean, // true to return raw data
     auth?: TUserRole | boolean,
 
     // Rendering

package/src/server/services/router/index.ts

@@ -459,12 +459,15 @@ declare type Routes = {
 
     public async resolve(request: ServerRequest<this>): Promise<ServerResponse<this>> {
 
-        console.info(LogPrefix, request.ip, request.method, request.domain, request.path);
+        const logId = LogPrefix + ' ' + (request.isVirtual ? ' ---- ' : '') + request.ip + ' ' + request.method + ' ' + request.domain + ' ' + request.path;
+        console.info(logId);
+        const timeStart = Date.now();
 
         if (this.status === 'starting') {
             console.log(LogPrefix, `Waiting for servert to be resdy before resolving request`);
             await this.started;
         }
+
         try {
 
             const response = new ServerResponse<this>(request);
@@ -488,11 +491,14 @@ declare type Routes = {
                 // Run on resolution hooks. Ex: authentication check
                 await this.runHook('resolved', route);
 
+                const timeEndResolving = Date.now();
+
                 // Create response
                 await response.runController(route);
-                if (response.wasProvided)
-                    // On continue l'itération des routes, sauf si des données ont été fournie dans la réponse (.json(), .html(), ...)
+                if (response.wasProvided) {
+                    this.printTakenTime(logId, timeStart, timeEndResolving);
                     return response;
+                }
             }
 
             throw new NotFound();
@@ -508,10 +514,20 @@ declare type Routes = {
                     error.details.origin = errOrigin;
             }
 
+            this.printTakenTime(logId, timeStart);
             throw error;
         }
     }
 
+    private printTakenTime = (logId: string, timeStart: number, timeEndResolving?: number) => {
+
+        if (this.app.env.name === 'server') return;
+
+        console.log(logId + ' ' + Math.round(Date.now() - timeStart) + 'ms' + 
+            (timeEndResolving === undefined ? '' : ' | Routing: ' + Math.round(timeEndResolving - timeStart))
+        );
+    }
+
     private async resolveApiBatch( fetchers: TFetcherList, request: ServerRequest<this> ) {
 
         // TODO: use api.fetchSync instead