5htp-core 0.4.7-2 → 0.4.8

package/package.json

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

package/src/client/assets/css/text/titres.less

@@ -3,7 +3,7 @@ h2,
 h3 {
 
     font-weight: 600;
-    text-align: inherit;
+    text-align: left; // Align all titles to the left by default
     color: var(--cTxtImportant);
 
     /*.img & {

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

@@ -57,7 +57,10 @@
         justify-content: flex-start;
     }
 
-    &.sep-1 > * + * { border-left: solid 1px var(--cLine); }
+    &.sep-1 {
+        gap: 0;
+        > * + * { border-left: solid 1px var(--cLine); }
+    }
 
     &.menu {
 
@@ -146,7 +149,10 @@
     &.al-right { align-items: flex-end; }
     &, &.al-fill { align-items: stretch; }
 
-    &.sep-1 > * + * { border-top: solid 1px var(--cLine); }
+    &.sep-1 {
+        gap: 0;
+        > * + * { border-top: solid 1px var(--cLine); }
+    }
 
     > .col-1 { align-self: stretch; }
 

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

@@ -27,7 +27,11 @@ type TParams = { [cle: string]: unknown }
 
 type ComposantToast = React.FunctionComponent<{ close?: any }> & { data?: object };
 
-type TOptsToast = (CardInfos & { content?: ComponentChild })
+type TOptsToast = (CardInfos & { 
+    content?: ComponentChild,
+    data?: {},
+    className?: string,
+})
 
 type TOnCloseCallback<TReturnType extends any> = (returnedValue: TReturnType) => void
 
@@ -43,16 +47,25 @@ export type TDialogControls = {
     then: (cb: TOnCloseCallback<any>) => any
 }
 
+type TDialogContentArg = ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast;
+
+type TDialogShowArgs = [
+    // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
+    Content: TDialogContentArg,
+    paramsInit?: TParams
+] | [
+    title: string,
+    // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
+    Content: TDialogContentArg,
+    paramsInit?: TParams
+]
+
 type DialogActions = {
 
     setToasts: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
     setModals: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
 
-    show: (
-        // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
-        Content: ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast,
-        paramsInit?: TParams
-    ) => TDialogControls,
+    show: (...args: TDialogShowArgs ) => TDialogControls,
 
     confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No') => TDialogControls,
 
@@ -73,26 +86,33 @@ type DialogActions = {
 let idA: number = 0;
 export const createDialog = (app: Application, isToast: boolean): DialogActions => {
 
-    const show = <TReturnType extends any = true>(
-        // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
-        Content: ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast,
-        paramsInit?: TParams
-    ): TDialogControls => {
+    const show = <TReturnType extends any = true>( ...args: TDialogShowArgs ): TDialogControls => {
 
         let onClose: TOnCloseCallback<TReturnType>;
         const id = idA++;
 
+        // Parse args
+        let title: string | undefined; 
+        let Content: TDialogContentArg;
+        let paramsInit: TParams = {};
+        if (typeof args[0] === 'string') {
+            [title, Content, paramsInit] = args;
+        } else {
+            [Content, paramsInit] = args;
+        }
+
+        // Set instance management function
         const setDialog = isToast
             ? instance.setToasts
             : instance.setModals;
 
+        // Close function
         const close = (retour: TReturnType) => {
 
             setDialog(q => q.filter(m => m.id !== id))
 
             if (onClose !== undefined)
                 onClose(retour);
-
         };
 
         const promise = new Promise(async (resolve: TOnCloseCallback<TReturnType>) => {
@@ -101,33 +121,49 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
             let render: ComponentChild;
             let propsRendu: CardInfos = {
                 ...paramsInit,
-                close: close,
-                data: {}
-            };
+                close: close
+            }; 
+            
+            // modal.show( import('./modalSupprimer') )
+            //  -> Fetch component
+            if (Content.constructor === Promise)
+                Content = (await Content).default;
+
+            // modal.show('Supprimer', import('./modalSupprimer'))
+            //  -> Shortcut for modal.show({ title: 'Suoorimer', content: <Component> })
+            if (title !== undefined) {
+                Content = {
+                    title: title,
+                    content: Content
+                }
+            }
 
-            // toast.show({ title: 'supprimer', content: <>...</> })
+            // modal.show({ title: 'supprimer', content: <>...</> })
             if (Content.constructor === Object) {
 
-                const { content, ...propsToast } = Content as TOptsToast;
+                const { content: CardContent, data = {}, ...propsToast } = Content as TOptsToast;
+                
+                let cardContent: ComponentChild;
+                if (typeof CardContent === 'function') {
+                    cardContent = <CardContent {...propsRendu} {...data} />
+                    propsToast.boutons = null; // Component content = advanced content = should include buttons
+                } else {
+                    cardContent = CardContent;
+                }
+                
                 render = (
-                    <Card {...propsRendu} children={content} {...propsToast} isToast={isToast} />
+                    <Card {...propsRendu} {...propsToast} isToast={isToast}>
+                        {cardContent}
+                    </Card>
                 )
 
-            // toast.show( import('./modalSupprimer') )
-            // toast.show( ToastSupprimer )
+            // modal.show( ToastSupprimer )
+            //  -> Content is a component rendering a Card
             } else {
 
-                let DialogCard;
-                if (Content.constructor === Promise) {
-                    DialogCard = (await Content).default;
-                } else {
-                    DialogCard = Content as typeof Card;
-                }
-
                 render = (
-                    <DialogCard {...propsRendu} isToast={isToast} />
+                    <Content {...propsRendu} isToast={isToast} />
                 )
-
             }
 
             // Chargeur de données

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

@@ -27,6 +27,7 @@ export type Props = {
     cover?: string,
     icon?: ComponentChild,
     title?: string | ComponentChild,
+    className?: string,
 
     children?: ComponentChild,
     isToast?: boolean,
@@ -49,6 +50,7 @@ export default ({
     cover,
     icon, 
     title, 
+    className = '',
 
     children, 
     isToast,
@@ -149,7 +151,7 @@ export default ({
             
         </div>
     ) : (
-        <div class={"card pd-2 col al-top"} style={width === undefined 
+        <div class={"card pd-2 col al-top " + className} style={width === undefined 
             ? {}
             : { minWidth: width + "px", maxWidth: width + "px" }
         }>

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

@@ -78,9 +78,8 @@
         > .card {
 
             position: relative;
-            max-height: 80vh;
             min-width: 300px;
-            max-height: 100vh;
+            max-height: 90vh;
             box-shadow: none;
             overflow-y: auto;
 

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

@@ -39,6 +39,7 @@ export type Props = (
     enableSearch?: boolean,
     required?: boolean,
     noneSelection?: false | string,
+    addNew?: (search?: string) => Promise<Choice>
 }
 
 type SelectorProps = Props & {

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

@@ -69,6 +69,7 @@ export default (props: Props) => {
         onChange: onChangeCallback,
         multiple,
         dropdown,
+        addNew,
         ...otherProps
     } = props;
 
@@ -148,6 +149,17 @@ export default (props: Props) => {
         }
     }
 
+    const clickAddNew = () => addNew(search.keywords).then( newItem => {
+
+        if (!newItem)
+            return;
+
+        onChange( current => multiple
+            ? [...(current || []), newItem]
+            : newItem
+        )
+    })
+
     /*----------------------------------
     - RENDER
     ----------------------------------*/
@@ -156,10 +168,13 @@ export default (props: Props) => {
 
     const Search = enableSearch && (
         <Input  
+            icon="search"
             placeholder="Type your search here"
             value={search.keywords} 
             onChange={keywords => setSearch(s => ({ ...s, loading: true, keywords }))} 
             inputRef={refInputSearch}
+            wrapper={false}
+            className="bg white"
         />
     )
 
@@ -167,13 +182,15 @@ export default (props: Props) => {
         <InputWrapper {...props}>
             {dropdown ? (
                 <Popover {...(dropdown === true ? {
-                    width: '200px'
+                    width: '200px',
                 } : dropdown)} content={(
-                    <div class="card bg white col al-top">
+                    <div class="bg white col al-top">
 
-                        {Search} 
+                        <div class="bb-1" style={{ position: 'sticky', top: 0, zIndex: 5 }}>
+                            {Search}
+                        </div>
 
-                        {selectedItems.length !== 0 && (
+                        {(multiple && selectedItems.length !== 0) && (
                             <ul class="row al-left wrap sp-05">
                                 {selectedItems.map( choice => (
                                     <ChoiceElement format='badge' choice={choice} 
@@ -191,7 +208,7 @@ export default (props: Props) => {
                                 <i src="spin" />
                             </div>
                         ) : (
-                        <ul class="menu col">
+                            <ul class="menu col">
                                 {choices.map( choice => (
                                     <ChoiceElement format='list' choice={choice} 
                                         currentList={currentList}
@@ -202,6 +219,14 @@ export default (props: Props) => {
                                 ))} 
                             </ul>
                         )} 
+
+                        {addNew && (
+                            <div class="col" style={{ position: 'sticky', bottom: '0px', zIndex: 5 }}>
+                                <Button type="primary" icon="plus" onClick={clickAddNew}>
+                                    Add new
+                                </Button> 
+                            </div>   
+                        )}
                     </div>
                 )} state={popoverState}>
                     <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>

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

@@ -116,16 +116,16 @@ export default (props: Props & InputBaseProps<{}>) => {
                                     contentEditable={
                                         <ContentEditable
                                             className="editor-input"
-                                            aria-placeholder={title}
+                                            aria-placeholder={"Type text here ..."}
                                             placeholder={
-                                                <div className="editor-placeholder">{title}</div>
+                                                <div className="editor-placeholder">Type text here ...</div>
                                             }
                                         />
                                     }
                                     ErrorBoundary={LexicalErrorBoundary}
                                 />
                                 <HistoryPlugin />
-                                <AutoFocusPlugin />
+                                {/* <AutoFocusPlugin /> */}
                                 <OnChangePlugin onChange={onChange} />
                                 <ValueControlPlugin props={props} value={value} />
                             </div>

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

@@ -51,7 +51,7 @@ export default (props: Props & InputBaseProps<string> & TInputElementProps) => {
 
     let {
         // Decoration
-        icon, prefix, suffix, iconR, required, size, className = '',
+        icon, prefix, suffix, iconR, placeholder, size, className = '',
         // State
         inputRef, errors,
         // Behavior
@@ -181,7 +181,7 @@ export default (props: Props & InputBaseProps<string> & TInputElementProps) => {
 
                     <Tag {...fieldProps}
 
-                        placeholder={props.title}
+                        placeholder={placeholder || props.title}
 
                         // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
                         ref={refInput}

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

@@ -225,8 +225,6 @@ export default abstract class AuthService<
 
         this.config.debug && console.warn(LogPrefix, `Check auth, role = ${role}. Current user =`, user?.name);
 
-        console.log({ entity, role, motivation });
-
         if (user === undefined) {
 
             throw new Error(`request.user has not been decoded.`);

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

@@ -256,7 +256,7 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
     }
 
     public equalities = (data: TObjetDonnees, keys = Object.keys(data)) => 
-        keys.map(k => '' + k + ' = ' + mysql.escape( data[k] ))
+        keys.map(k => '' + k + ' = ' + this.esc( data[k] ))
 
     /*----------------------------------
     - OPERATIONS: LOW LEVELf