5htp-core 0.2.3 → 0.2.4

package/package.json

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

package/src/client/app/index.ts

@@ -102,11 +102,7 @@ export default abstract class Application {
             })
     }
 
-    public handleError( error: CoreError | Error, httpCode?: number ) {
-    
-        /*console.error(`[api] Network error:`, e);
-        context.toast.error("Please check your internet connection and try again.", undefined, null, { autohide: false });*/
-    }
+    public abstract handleError( error: CoreError | Error, httpCode?: number );
 
     public reportBug = (infos: TBugReportInfos) => fetch('/help/bug/gui', {
         method: 'POST',

package/src/client/assets/css/components.less

@@ -48,10 +48,10 @@ i.solid {
 }
 
 .input.text {
-    border: solid 0.25em #f5f5f5;
+    border: solid 0.25em #eee;
 
     &:hover {
-        border-color: #eee;
+        border-color: #ddd;
     }
     
     &.focus {

package/src/client/assets/css/utils/layouts.less

@@ -151,7 +151,7 @@
     &-3 { flex: 3; }
 
     &.menu {
-        gap: @spacing / 2;
+        gap: 1px;
     }
 }
 

package/src/client/components/Dialog/card.tsx

@@ -149,7 +149,7 @@ export default ({
             
         </div>
     ) : (
-        <div class={"card pd-2 col"} style={width === undefined 
+        <div class={"card pd-2 col al-top"} style={width === undefined 
             ? {}
             : { minWidth: width + "px", maxWidth: width + "px" }
         }>

package/src/client/components/Dialog/index.less

@@ -82,8 +82,7 @@
         gap: @spacing;
         z-index: @modal-zindex;
 
-        background: fade(#fff, 20%);
-        backdrop-filter: blur(30px) saturate(2);
+        background: fade(#000, 20%);
         border-radius: @radius;
 
         // Desktop = vertically center the modal
@@ -109,6 +108,7 @@
             max-height: 100vh;
             box-shadow: none;
             padding: @spacing * 2;
+            overflow-y: auto;
 
             // Pas d'anim quand pas card, 
             // Car peut contenir bcp d'elemnts => performance

package/src/client/components/Form.ts

@@ -25,6 +25,13 @@ export type Form<TFormData extends {} = {}> = {
     set: (data: Partial<TFormData>) => void,
     submit: (additionnalData?: Partial<TFormData>) => Promise<any>,
     fields: FieldsAttrs<TFormData>,
+} & FormState
+
+type FormState = {
+    isLoading: boolean,
+    errorsCount: number,
+    errors: {[fieldName: string]: string[]},
+    changed: boolean
 }
 
 /*----------------------------------
@@ -38,15 +45,16 @@ export default function useForm<TFormData extends {}>( schema: Schema<TFormData>
     const fields = React.useRef<FieldsAttrs<TFormData>>(null);
 
     const [data, setData] = React.useState<TFormData>( options.data || {} );
-    const [state, setState] = React.useState({
+    const [state, setState] = React.useState<FormState>({
         isLoading: false,
         errorsCount: 0,
         errors: {},
-        validated: false
+        changed: false
     });
 
+    // Validate data when it changes
     React.useEffect(() => {
-        state.validated && validate(data);
+        state.changed && validate(data);
     }, [data]);
 
     /*----------------------------------
@@ -58,13 +66,10 @@ export default function useForm<TFormData extends {}>( schema: Schema<TFormData>
 
         // Update errors
         if (validated.nbErreurs !== state.errorsCount) {
-            fields.current = null; // Update the fields definition
-            setState( old => ({ 
-                ...old,
+            rebuildFieldsAttrs({ 
                 errorsCount: validated.nbErreurs, 
                 errors: validated.erreurs,
-                validated: true
-            }));
+            });
         }
         
         return validated;
@@ -84,14 +89,39 @@ export default function useForm<TFormData extends {}>( schema: Schema<TFormData>
             return options.submit(validated.values);
     }
 
-    if (fields.current === null){
+    const rebuildFieldsAttrs = (newState: Partial<FormState> = {}) => {
+        // Force rebuilding the fields definition on the next state change
+        fields.current = null; 
+        // Force state change
+        setState( old => ({ 
+            ...old,
+            ...newState,
+            changed: true
+        }));
+    }
+
+    // Rebuild the fields attrs when the schema changes
+    if (fields.current === null || Object.keys(schema).join(',') !== Object.keys(fields.current).join(',')){
         fields.current = {}
         for (const fieldName in schema.fields) {
             fields.current[fieldName] = {
 
                 // Value control
                 value: data[fieldName],
-                onChange: (val) => setData( old => ({ ...old, [fieldName]: val })),
+                onChange: (val) => {
+                    setState( old => ({ 
+                        ...old,
+                        changed: true
+                    }));
+                    setData( old => {
+                        return { 
+                            ...old, 
+                            [fieldName]: typeof val === 'function'
+                                ? val(old[fieldName])
+                                : val
+                        }
+                    })
+                },
 
                 // Submit on press enter
                 onKeyDown: e => {
@@ -102,7 +132,8 @@ export default function useForm<TFormData extends {}>( schema: Schema<TFormData>
 
                 // Error
                 errors: state.errors[ fieldName ],
-                required: schema.fields[ fieldName ].options?.opt !== true
+                required: schema.fields[ fieldName ].options?.opt !== true,
+                validator: schema.fields[ fieldName ]
             }
         }
     }

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

@@ -4,9 +4,12 @@
 
 // Npm
 import React from 'react';
+import type { ComponentChild } from 'preact';
+import type { StateUpdater } from 'preact/hooks';
 
 // Core
 import Button from '@client/components/button';
+import String from '@client/components/inputv3/string';
 import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/components/dropdown';
 
 /*----------------------------------
@@ -17,42 +20,174 @@ import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/compo
 - TYPES
 ----------------------------------*/
 
-type Choices = string[]
+export type Choice = { label: ComponentChild, value: string }
 
-type SearchResultsFunction = (keywords: string) => Choices
+export type Choices = Choice[]
 
-export type Props = DropdownProps & {
+type ChoicesFunc = (search: string) => Promise<Choices>
+
+type SelectorProps = (
+    {
+        multiple: true,
+        value?: Choice[],
+        onChange: StateUpdater<Choice[]>,
+        validator?: ArrayValidator
+    }
+    |
+    {
+        multiple?: false,
+        value?: Choice,
+        onChange: StateUpdater<Choice>,
+        validator?: StringValidator
+    }
+) & {
+    choices: Choices | ChoicesFunc,
+    enableSearch?: boolean,
+    inline?: boolean,
+    errors?: string[],
+    required?: boolean,
+    noneSelection?: false | string
+}
+
+export type Props = DropdownProps & SelectorProps & {
     title: string,
-    choices: Choices,
-    value?: string,
-    onChange: (value: string) => void,
-    search?: true | SearchResultsFunction
 }
 
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
+export default ({ 
+    title, choices: initChoices, errors, validator, required, noneSelection, enableSearch, value: current, 
+    onChange, inline, multiple,
+    ...props 
+}: Props) => {
 
-export default ({ title, choices, value, onChange, ...dropDownProps }: Props) => {
     const refModal = React.useRef<TDialogControls>(null);
-    return (
-        <Dropdown {...dropDownProps} content={(
-            <ul class="card col menu">
-                {choices.map( jt => (
-                    <li>
-                        <Button active={jt === value} onClick={() => {
-                            onChange(jt);
-                            refModal.current?.close();
-                        }}>
-                            {jt}
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    const choicesViaFunc = typeof initChoices === 'function';
+    if (choicesViaFunc && enableSearch === undefined)
+        enableSearch = true;
+
+    const [search, setSearch] = React.useState<{
+        keywords: string,
+        loading: boolean
+    }>({
+        keywords: '',
+        loading: choicesViaFunc
+    });
+
+    const [choices, setChoices] = React.useState<Choices>([]);
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+    React.useEffect(() => {
+        if (choicesViaFunc) {
+            initChoices(search.keywords).then((searchResults) => {
+                setSearch(s => ({ ...s, loading: false }))
+                setChoices(searchResults);
+            })
+        }
+    }, [initChoices, search.keywords]);
+
+    const currentList: Choice[] = current === undefined
+        ? []
+        : (Array.isArray(current) ? current : [current]);
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+
+    const selector = (
+         <div class={(inline ? '' : 'card ') + "col"}>
+
+            {enableSearch && (
+                <String icon="search" 
+                    title="Search"
+                    value={search.keywords} 
+                    onChange={keywords => setSearch(s => ({ ...s, loading: true, keywords }))} 
+                    iconR={'spin'}
+                />
+            )}
+
+            {currentList.length !== 0 && (
+                <ul class="col menu">
+                    {currentList.map(choice => (
+                        <Button size="s" onClick={() => {
+                            onChange( current => multiple 
+                                ? current.filter(c => c.value !== choice.value)
+                                : undefined
+                            );
+                        }} suffix={<i src="check" class="fg primary" />}>
+                            {choice.label}
                         </Button>
-                    </li>
-                ))}
-            </ul>
-        )} iconR="chevron-down" refModal={refModal}>
+                    ))}
+                </ul>
+            )}
+
+            {choices === null ? (
+                <div class="row h-3 al-center">
+                    <i src="spin" />
+                </div>
+            ) : (
+                <ul class="col menu">
+                    {choices.map( choice => {
+
+                        const isCurrent = currentList.some(c => c.value === choice.value);
 
-            {value || title}
+                        return !isCurrent && (
+                            <li>
+                                <Button size="s" onClick={() => {
+                                    onChange( current => {
+                                        return multiple 
+                                            ? [...(current || []), choice] 
+                                            : choice
+                                    });
+                                }}>
+                                    {/*search.keywords ? (
+                                        <span>
+                                        
+                                            <strong>{search.keywords}</strong>{choice.label.slice( search.keywords.length )}
+    
+                                        </span>
+                                    ) : */choice.label}
+                                </Button>
+                            </li>
+                        )
+                    })}
 
-        </Dropdown>
+                    {((!required || !validator?.options.min) && noneSelection) && (
+                        <li>
+                             <Button size="s" onClick={() => onChange(multiple ? [] : undefined)}
+                                 suffix={(current === undefined || (multiple && current.length === 0)) && <i src="check" class="fg primary" />}>
+                                {noneSelection}
+                            </Button>
+                        </li>
+                    )}
+                </ul>
+            )}
+        </div>
     )
+
+    return <>
+        {inline ? selector : (
+            <Dropdown {...props} content={selector} iconR="chevron-down" refModal={refModal}>
+
+                {currentList.length === 0
+                    ? title
+                    : currentList.map(choice => choice.label).join(', ')}
+
+            </Dropdown>
+        )}
+
+        {errors?.length && (
+            <div class="fg error txt-left">
+                {errors.join('. ')}
+            </div>
+        )}
+    </>
 }

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

@@ -9,15 +9,14 @@ import { ComponentChild, RefObject } from 'preact';
 // Core
 import Button, { Props as ButtonProps } from '../button';
 import { TDialogControls } from '../Dialog/Manager';
-export type { TDialogControls } from '../Dialog/Manager';
-
-// Libs
-import useContexte from '@/client/context';
+import Popover from '../containers/Popover';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
+export type { TDialogControls } from '../Dialog/Manager';
+
 export type Props = ButtonProps & {
     content: ComponentChild,
     refModal?: RefObject<TDialogControls>
@@ -28,23 +27,19 @@ export type Props = ButtonProps & {
 ----------------------------------*/
 export default (props: Props) => {
 
-    const { modal } = useContexte();
-
     let {
         content,
         refModal,
         ...buttonProps
     } = props;
 
-    const refButton = React.useRef<HTMLElement>(null);
+    const popoverState = React.useState(false);
 
-    const open = () => {
-        const modalInstance = modal.show(() => content);
-        if (refModal)
-            refModal.current = modalInstance;
-    }
+    const refButton = React.useRef<HTMLElement>(null);
 
     return (
-        <Button {...buttonProps} onClick={(open)} refElem={refButton} />
+        <Popover content={content} state={popoverState}>
+            <Button {...buttonProps} refElem={refButton} />
+        </Popover>
     )
 }

package/src/client/components/inputv3/base.tsx

@@ -4,7 +4,7 @@
 
 // Npm
 import React from 'react';
-import { ComponentChild } from 'preact';
+import type { StateUpdater } from 'preact/hooks';
 
 // Core libs
 import { useState } from '@client/hooks';
@@ -20,7 +20,7 @@ export type InputBaseProps<TValue> = {
     errors?: string[],
 
     value: TValue,
-    onChange?: (newValue: TValue) => void,
+    onChange?: StateUpdater<TValue>,
 }
 
 export type TInputState<TValue> = {
@@ -28,6 +28,7 @@ export type TInputState<TValue> = {
     fieldProps: {[key: string]: any},
     valueSource: 'internal'|'external',
     focus: boolean,
+    changed: boolean,
 }
 
 /*----------------------------------
@@ -47,12 +48,18 @@ export function useInput<TValue>(
         value: externalValue !== undefined ? externalValue : defaultValue,
         valueSource: 'external',
         fieldProps: {},
-        focus: false
+        focus: false,
+        changed: false
     });
 
-    const setValue = (value: TValue) => setState({ value, valueSource: 'internal' });
+    const setValue = (value: TValue) => setState({ value, valueSource: 'internal', changed: true });
 
     const commitValue = () => {
+
+        // Avoid to change parent component state at first render
+        if (state.changed === false)
+            return;
+
         console.log(`[input] Commit value:`, state.value);
         if (onChange !== undefined)
             onChange(state.value);
@@ -63,7 +70,7 @@ export function useInput<TValue>(
 
         if (externalValue !== undefined && externalValue !== state.value) {
             console.log("External value change", externalValue);
-            setState({ value: externalValue, valueSource: 'external' })
+            setState({ value: externalValue, valueSource: 'external', changed: true })
         }
         
     }, [externalValue]);

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

@@ -91,7 +91,7 @@ export default ({
     } else if (type === 'longtext') {
 
         prefix = prefix || <i src="text" />;
-        Tag = TextareaAutosize;
+        Tag = 'textarea'//TextareaAutosize;
 
     }
 

package/src/client/services/router/request/api.ts

@@ -127,7 +127,7 @@ export default class ApiClient implements ApiClientService {
 
         return await this.fetch<TData>(method, path, data, options).catch((e) => {
             this.app.handleError(e);
-            throw e;
+            throw e; // Throw to break the loop
         })
     }
 
@@ -158,6 +158,8 @@ export default class ApiClient implements ApiClientService {
 
             });
 
+        // Errors will be catched in the caller
+
         return { ...alreadyLoadedData, ...fetchedData }
     }
 

package/src/common/validation/schema.ts

@@ -93,7 +93,7 @@ export default class Schema<TFields extends TSchemaFields> {
                 opts.debug && console.warn(LogPrefix, '[' + champ + ']', 'Exclusion (pas présent dans le schéma)');
                 continue;
             }
-    
+
             const cheminA = [...chemin, champ]
             const cheminAstr = cheminA.join('.')
     
@@ -178,7 +178,7 @@ export default class Schema<TFields extends TSchemaFields> {
         if (nbErreurs !== 0 && opts.throwError === true) {
             throw new InputErrorSchema(erreurs);
         }
-    
+        
         opts.debug && console.log(LogPrefix, '', dataToValidate, '=>', output);
     
         return { 

package/src/common/validation/validators.ts

@@ -63,8 +63,10 @@ export default class SchemaValidator {
             return val;
         }, opts)
 
-    public array = (subtype?: Validator<any>, { choice, ...opts }: TValidator<any[]> & {
-        choice?: any[]
+    public array = (subtype?: Validator<any>, { choice, min, max, ...opts }: TValidator<any[]> & {
+        choice?: any[],
+        min?: number, 
+        max?: number
     } = {}) => {
 
         if (subtype !== undefined)
@@ -72,12 +74,17 @@ export default class SchemaValidator {
 
         return new Validator<any[]>('array', (items, input, output, corriger) => {
 
-            //console.log('VALIDER ARRAY', items, input);
-
+            // Type
             if (!Array.isArray(items))
-                throw new InputError("This value must be an array.");
+                throw new InputError("This value must be a list.");
+
+            // Items number
+            if ((min !== undefined && items.length < min))
+                throw new InputError(`Please select at least ${min} items.`);
+            if ((max !== undefined && items.length > max))
+                throw new InputError(`Please select maximum ${max} items.`);
 
-            // Verif items
+            // Verif each item
             if (subtype !== undefined) {
                 if (false/*subtype instanceof Schema*/) {
 
@@ -85,9 +92,9 @@ export default class SchemaValidator {
 
                 } else {
 
-                    for (let i = 0; i < items.length; i++)
-                        items[i] = subtype.validate( items[i], items, items, corriger );
-
+                    items = items.map( item =>
+                        subtype.validate( item, items, items, corriger )
+                    )
                 }
             }
 
@@ -101,7 +108,7 @@ export default class SchemaValidator {
     }
 
     public choice = (values: any[], opts: TValidator<any> & {} = {}) => 
-        new Validator<any>('object', (val, input, output) => {
+        new Validator<any>('choice', (val, input, output) => {
 
             if (!values.includes(val))
                 throw new InputError("Invalid value. Must be: " + values.join(', '));
@@ -116,6 +123,10 @@ export default class SchemaValidator {
     public string = ({ min, max, ...opts }: TValidator<string> & { min?: number, max?: number } = {}) => 
         new Validator<string>('string', (val, input, output, corriger?: boolean) => {
 
+            // Choice value from Select component
+            if (typeof val === 'object' && val.value)
+                val = val.value;
+
             if (val === '')
                 return undefined;
             else if (typeof val === 'number')

package/src/server/services/console/bugReporter.ts

@@ -170,7 +170,7 @@ export default class BugReporter {
             channelType, 
             channelId,
             // User
-            user: request?.user?.name,
+            user: request?.user?.email,
             ip: request?.ip,
             // Error
             error,
@@ -180,25 +180,8 @@ export default class BugReporter {
 
         await this.sendToTransporters(bugReport);
 
-        // TODO: Move on App side
-        /*if (app.isLoaded('sql'))
-            // Memorize
-            $.sql.insert('BugServer', {
-                // Context
-                hash: hash,
-                date: now,
-                channelType, 
-                channelId,
-                // User
-                user: request?.user?.name,
-                ip: request?.ip,
-                // Error
-                stacktrace: error.stack || error.message,
-                logs: logsHtml
-            });*/
-
         // Update error message
-        error.message = "A bug report has been sent to my personal mailbox. Sorry for the inconvenience.";
+        error.message = "We encountered an internal error, and our team has just been notified. Sorry for the inconvenience.";
     }
 
     public async application( report: AppBugInfos ) {

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

@@ -279,7 +279,7 @@ export default class SQL extends Service<Config, Hooks, Application> {
     public update<TData extends TObjetDonnees>(
         tableName: string, 
         data: TData[], 
-        where: (keyof TData)[], 
+        where?: (keyof TData)[], 
         opts?: TUpdateQueryOptions<TData>
     );
 
@@ -287,30 +287,42 @@ export default class SQL extends Service<Config, Hooks, Application> {
     public update<TData extends TObjetDonnees>(
         tableName: string, 
         data: TData, 
-        where: (keyof TData)[] | TObjetDonnees, 
+        where?: (keyof TData)[] | TObjetDonnees, 
         opts?: TUpdateQueryOptions<TData>
     );
 
     public update<TData extends TObjetDonnees>(...args: [
         tableName: string, 
         data: TData[], 
-        where: (keyof TData)[], 
+        where?: (keyof TData)[], 
         opts?: TUpdateQueryOptions<TData>
     ] | [
         tableName: string, 
         data: TData, 
-        where: (keyof TData)[] | TObjetDonnees, 
+        where?: (keyof TData)[] | TObjetDonnees, 
         opts?: TUpdateQueryOptions<TData>
-    ]) {
+    ]): Promise<ResultSetHeader> {
 
         let [tableName, data, where, opts] = args;
 
         // Multiple updates in one
         if (Array.isArray( data ))
             return this.database.query(
-                data.map(record => this.update(tableName, record, where, opts)).join(';\n')
+                data.map( record => 
+                    this.update(tableName, record, where, { ...opts, returnQuery: true })
+                ).join(';\n')
             )
 
+        // Automatic where based on pks
+        if (where === undefined) {
+
+            const tableMetas = this.database.getTable(tableName);
+            if (tableMetas.pk.length === 0)
+                throw new Error(`Tried to build the where condition based on the pks list, but no pk is attached to this table ${tableMetas.chemin}`);
+
+            where = tableMetas.pk;
+        }
+
         // No condition specified = use the pks
         if (Array.isArray(where)) {
             const whereColNames = where;