5htp-core 0.0.8-2 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "5-HTP, scientifically called 5-Hydroxytryptophan, is the precursor of happiness neurotransmitter.",
-	"version": "0.0.8-2",
+	"version": "0.0.9",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

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

@@ -85,13 +85,6 @@ iframe {
     border: none;
 }
 
-header.card {
-    > i {
-        font-size: 3em;
-        line-height: 1em;
-    }
-}
-
 .dropArea {
     padding: @spacing;
     border-radius: @radius;

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

@@ -217,6 +217,7 @@
     Déclarer une grid: grid x-3
     Placer un element: x1-3
 */
+@gridUnit: 6.66rem;
 .zones(@nb, @i: 1) when (@i <= @nb) {
 	/*----------------------------------
 	- ZONES DE LA GRILLE
@@ -287,23 +288,23 @@
     // Automatique
     .taille-auto(@min, @max) when (@min <= @max) {
 		&.xa@{min}-@{max} {
-			grid-template-columns: repeat(auto-fit, minmax(@min * 100px, @max * 100px))
+			grid-template-columns: repeat(auto-fit, minmax(@min * @gridUnit, @max * @gridUnit))
 		}
 		&.ya@{min}-@{max} {
-			grid-template-rows: repeat(auto-fit, minmax(@min * 100px, @max * 100px))
+			grid-template-rows: repeat(auto-fit, minmax(@min * @gridUnit, @max * @gridUnit))
 		}
 		.taille-auto(@min + 1, @max);
     }
     &.xa@{i} {
-        grid-template-columns: repeat(auto-fit, minmax(@i * 100px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(@i * @gridUnit, 1fr));
         &5 {
-            grid-template-columns: repeat(auto-fit, minmax(@i * 100px + 4.15rem, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(@i * @gridUnit + 4.15rem, 1fr));
         }
     }
     &.ya@{i} {
-        grid-template-rows: repeat(auto-fit, minmax(@i * 100px, 1fr));
+        grid-template-rows: repeat(auto-fit, minmax(@i * @gridUnit, 1fr));
         &5 {
-            grid-template-rows: repeat(auto-fit, minmax(@i * 100px + 4.15rem, 1fr));
+            grid-template-rows: repeat(auto-fit, minmax(@i * @gridUnit + 4.15rem, 1fr));
         }
     }
 	.taille-auto(1, @i);
@@ -347,10 +348,10 @@
         break-inside: avoid;
     }
 
-    &.xa1 { column-width: 100px;  }
-    &.xa2 { column-width: 200px;  }
+    &.xa1 { column-width: @gridUnit;  }
+    &.xa2 { column-width: @gridUnit * 2;  }
     &,
-    &.xa3 { column-width: 300px;  }
-    &.xa4 { column-width: 400px;  }
+    &.xa3 { column-width: @gridUnit * 3;  }
+    &.xa4 { column-width: @gridUnit * 4;  }
 
 }

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

@@ -5,6 +5,7 @@ a {
     color: inherit;
     cursor: pointer;
     text-decoration: underline;
+    text-decoration: none;
 
     &:not([disabled]):hover, 
     &.active {
@@ -12,12 +13,16 @@ a {
     }
 
     &.super {
-        position: absolute;
-        top: 0; left: 0; right: 0; bottom: 0;
-        z-index: 5;
-
-        ~ a, ~ * a, ~ button, ~ * button {
-            z-index: 6;
+        text-decoration: none;
+        &::after {
+            content: ' ';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            z-index: 5;
+    
+            ~ a, ~ * a, ~ button, ~ * button {
+                z-index: 6;
+            }
         }
     }
 }

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

@@ -0,0 +1,58 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import Button from '@client/components/button';
+import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/components/dropdown';
+
+/*----------------------------------
+- CONST
+----------------------------------*/
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+type Choices = string[]
+
+type SearchResultsFunction = (keywords: string) => Choices
+
+export type Props = DropdownProps & {
+    title: string,
+    choices: Choices,
+    value?: string,
+    onChange: (value: string) => void,
+    search?: true | SearchResultsFunction
+}
+
+/*----------------------------------
+- COMONENT
+----------------------------------*/
+
+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}
+                        </Button>
+                    </li>
+                ))}
+            </ul>
+        )} iconR="chevron-down" refModal={refModal}>
+
+            {value || title}
+
+        </Dropdown>
+    )
+}

package/src/client/components/data/progressbar/circular/index.tsx

@@ -33,7 +33,7 @@ export default ({
     ratioCercle = 1,
     className, 
     style = {},
-    epaisseur = 5,
+    epaisseur = 10,
     rotation,
     etapes,
     taille,

package/src/client/components/data/progressbar/index.less

@@ -99,8 +99,8 @@ div.progressbar_old {
 .progressbar-svg {
 
     position: relative;
-    min-width: 100px;
-    min-height: 100px;
+    width: @sizeComponent;
+    height: @sizeComponent;
 
      > svg {
 
@@ -142,6 +142,8 @@ div.progressbar_old {
         left: 0;
         right: 0;
         bottom: 0;
+        // Text should fit inside the progressbar
+        font-size: 0.8em;
 
         > i,
         > img {

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

@@ -4,10 +4,12 @@
 
 // Npm
 import React from 'react';
-import { ComponentChild } from 'preact';
+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';
@@ -17,23 +19,8 @@ import useContexte from '@client/context';
 ----------------------------------*/
 
 export type Props = ButtonProps & {
-    content: ComponentChild
-}
-
-export type TAction<TDonnee> = {
-    icone?: TIcons,
-    label: ComponentChild,
-    multi?: boolean,
-
-    onClick?: (donnees: TDonnee, index: number) => void,
-    lien?: (donnees: TDonnee, index: number) => string,
-    bouton?: (donnees: TDonnee, index: number) => ButtonProps
-}
-
-export type TActionsPopover = {
-    show: () => void,
-    hide: () => void,
-    toggle: () => void
+    content: ComponentChild,
+    refModal?: RefObject<TDialogControls>
 }
 
 /*----------------------------------
@@ -45,15 +32,19 @@ export default (props: Props) => {
 
     let {
         content,
-        immutable,
+        refModal,
         ...buttonProps
     } = props;
 
     const refButton = React.useRef<HTMLElement>(null);
 
-    const open = () => modal.show(() => content);
+    const open = () => {
+        const modalInstance = modal.show(() => content);
+        if (refModal)
+            refModal.current = modalInstance;
+    }
 
     return (
-        <Button {...buttonProps} onClick={open} refElem={refButton} />
+        <Button {...buttonProps} onClick={(open)} refElem={refButton} />
     )
 }

package/src/client/components/input/BaseV2/index.tsx

@@ -57,8 +57,10 @@ export function useInput<TValue>(
     // External value change
     React.useEffect(() => {
 
-        console.log("External value change", externalValue);
-        setState({ value: externalValue, valueSource: 'external' })
+        if (externalValue !== undefined && externalValue !== state.value) {
+            console.log("External value change", externalValue);
+            setState({ value: externalValue, valueSource: 'external' })
+        }
         
     }, [externalValue]);
 

package/src/client/context/index.ts

@@ -112,42 +112,6 @@ export class ClientContext {
         this.request = request;
         this.user = this.request.user || { ...GuestUser };
 
-        this.api.reload = (ids?: string | string[], params?: TObjetDonnees) => {
-            
-            if (this.page === undefined)
-                throw new Error("context.page is missing");
-
-            if (ids === undefined)
-                ids = Object.keys(this.page.fetchers);
-            else if (typeof ids === 'string')   
-                ids = [ids];
-
-            console.log("[api] Reload data", ids, params, this.page.fetchers);
-
-            for (const id of ids) {
-
-                const fetcher = this.page.fetchers[id];
-                if (fetcher === undefined)
-                    return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
-
-                if (params !== undefined)
-                    fetcher.data = { ...(fetcher.data || {}), ...params };
-
-                console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
-                const indicator = this.toast.loading("Loading ...");
-
-                this.request.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
-
-                    this.api.set({ [id]: data });
-
-                }).finally(() => {
-
-                    indicator.close(true);
-
-                })
-            }
-        }
-
     }
 
     // Is overwrote by the native app
@@ -194,10 +158,51 @@ export class ClientContext {
 
     // fetch doit appartenir à response, et non clientcontxt
     // car la méthode varie selon client (http) ou serveur (router.resolve)
-    public api = this.request.api as this["request"]["api"] & {
-        reload: (id?: string, params?: TObjetDonnees) => void,
-        set: (data: TObjetDonnees) => void
-    };
+    public api = {
+        ...this.request.api,
+        set: (newData: TObjetDonnees) => {
+
+            console.log("[api] Update page data", newData);
+            if (this.page)
+                this.page.setAllData(curData => ({ ...curData, ...newData }));
+            
+        },
+        reload: (ids?: string | string[], params?: TObjetDonnees) => {
+            
+            if (this.page === undefined)
+                throw new Error("context.page is missing");
+
+            if (ids === undefined)
+                ids = Object.keys(this.page.fetchers);
+            else if (typeof ids === 'string')   
+                ids = [ids];
+
+            console.log("[api] Reload data", ids, params, this.page.fetchers);
+
+            for (const id of ids) {
+
+                const fetcher = this.page.fetchers[id];
+                if (fetcher === undefined)
+                    return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
+
+                if (params !== undefined)
+                    fetcher.data = { ...(fetcher.data || {}), ...params };
+
+                console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
+                const indicator = this.toast.loading("Loading ...");
+
+                this.request.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
+
+                    this.api.set({ [id]: data });
+
+                }).finally(() => {
+
+                    indicator.close(true);
+
+                })
+            }
+        }
+    }
 
     public handleError(e: Error) {
         switch (e.http) {

package/src/client/router/component.tsx

@@ -50,6 +50,7 @@ const Page = ({ page, isCurrent }: { page: PageResponse, isCurrent?: boolean })
             id={page.id === undefined ? undefined : 'page_' + page.id}
         >
 
+            {/* Make request parameters and api data accessible from the page component */}
             {page.component ? (
 
                 <page.component {...gui.request.data} {...data} />

package/src/common/data/number/percentage.ts

@@ -11,11 +11,13 @@ export type TVariation = {
     color: string,
 }
 
-export const variationStr = (value: number, reference: number, lowerIsBetter: boolean = false): TVariation => {
+export const variationStr = (value: number, reference: number, options: {
+    lowerIsBetter?: boolean
+} = {}): TVariation => {
     const pc = variation(value, reference);
     const pcStr = pc.toFixed(2);
     return {
         txt: ((pc > 0) ? '+' + pcStr : pcStr) + '%',
-        color: (lowerIsBetter ? pc > 0 : pc < 0) ? 'ea3943' : '16c784'
+        color: (options.lowerIsBetter ? pc > 0 : pc < 0) ? 'ea3943' : '16c784'
     }
 }

package/src/common/router/index.ts

@@ -35,7 +35,7 @@ const getLayout = (routePath: string | undefined): Layout | undefined => {
             if (routePath === layoutPath || routePath.startsWith( layoutPath + '/' ))
                 layout = { path: layoutPath, Component: layouts[layoutPath] };
     }
-    layout && console.log(`Using Layout: ${layout.path}`);
+    //layout && console.log(`${routePath}: Using Layout: ${layout.path}`);
     return layout;
 }
 

package/src/server/data/Cache.ts

@@ -14,6 +14,12 @@ import app from '@server/app';
 
 // Libs
 
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+
+const debug = false;
+
 /*----------------------------------
 - TYPES
 ----------------------------------*/
@@ -50,7 +56,7 @@ class Cache {
 
     private cleanMem() {
 
-        console.log("[cache] Clean memory");
+        debug && console.log("[cache] Clean memory");
 
         const now = Date.now();
         for (const key in this.data) {
@@ -88,11 +94,11 @@ class Cache {
 
         let retour: CacheEntry | undefined = this.data[cle];
 
-        console.log(`[cache] Get "${cle}".`);
+        debug && console.log(`[cache] Get "${cle}".`);
 
         // Expired
         if (retour?.expiration && retour.expiration < Date.now()){
-            console.log(`[cache] Key ${cle} expired.`);
+            debug && console.log(`[cache] Key ${cle} expired.`);
             retour = undefined;
         }
 
@@ -133,7 +139,7 @@ class Cache {
      */
     public set( cle: string, val: TPrimitiveValue, expiration: TExpirationDelay = null ): void {
         
-        console.log("[cache] Updating cache " + cle);
+        debug && console.log("[cache] Updating cache " + cle);
         this.data[ cle ] = {
             value: val,
             expiration: this.delayToTimestamp(expiration)