5htp-core 0.2.6-1 → 0.2.6-2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.6-1",
+	"version": "0.2.6-2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,6 +13,7 @@
 		"framework"
 	],
 	"dependencies": {
+		"@wojtekmaj/react-daterange-picker": "^4.2.0",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -93,7 +94,7 @@
 		"@types/yargs-parser": "^21.0.0",
 		"babel-plugin-glob-import": "^0.0.6-2"
 	},
-    "peerDependencies": {
-        "5htp": "0.2.3"
-    }
+	"peerDependencies": {
+		"5htp": "0.2.3"
+	}
 }

package/src/client/components/Form.ts

@@ -86,7 +86,7 @@ export default function useForm<TFormData extends {}>(
 
         // Autosave
         if (options.autoSave !== undefined)
-            saveLocally(data, options.autoSave);
+            saveLocally(data, options.autoSave.id);
 
     }, [data]);
 
@@ -134,7 +134,7 @@ export default function useForm<TFormData extends {}>(
 
         // Reset autosaved data
         if (options.autoSave)
-            localStorage.removeItem(options.autoSave.id);
+            localStorage.removeItem('form.' + options.autoSave.id);
 
         return submitResult;
     }

package/src/client/components/index.ts

@@ -28,6 +28,7 @@ export { default as CircularProgressbar } from './data/progressbar/circular';
 export { default as Select } from './Select';
 export { default as Input } from './inputv3';
 export { default as File } from './inputv3/file';
+export { default as DateRangeInput } from './inputv3/date';
 
 // TOD: fix popover component
 //export { default as Date } from './input/Date';

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

@@ -0,0 +1,49 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { StateUpdater } from 'preact/hooks';
+import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';
+
+// Core
+
+// App
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+type TValue = [Date, Date]
+export type Props = {
+    value: TValue,
+    onChange: StateUpdater<TValue>,
+    placeholder?: string,
+    min?: string,
+    max?: string
+}
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+import './react-calendar.less';
+import './react-daterange-picker.less';
+export default ({ value, Props, min, max, onChange }) => {
+
+    const state = React.useState(false);
+
+    /*----------------------------------
+    - CONSTRUCTION CHAMP
+    ----------------------------------*/
+    
+    
+    /*----------------------------------
+    - RENDU DU CHAMP
+    ----------------------------------*/
+    return (
+        <div>
+            <DateRangePicker onChange={onChange} value={value || [null, null]} />
+        </div>
+    )
+}

package/src/client/components/inputv3/date/react-calendar.less

@@ -0,0 +1,143 @@
+.react-calendar {
+    width: 350px;
+    max-width: 100%;
+    background: white;
+    border: 1px solid #a0a096;
+    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.125em;
+  }
+  
+  .react-calendar--doubleView {
+    width: 700px;
+  }
+  
+  .react-calendar--doubleView .react-calendar__viewContainer {
+    display: flex;
+    margin: -0.5em;
+  }
+  
+  .react-calendar--doubleView .react-calendar__viewContainer > * {
+    width: 50%;
+    margin: 0.5em;
+  }
+  
+  .react-calendar,
+  .react-calendar *,
+  .react-calendar *:before,
+  .react-calendar *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  
+  .react-calendar button {
+    margin: 0;
+    border: 0;
+    outline: none;
+  }
+  
+  .react-calendar button:enabled:hover {
+    cursor: pointer;
+  }
+  
+  .react-calendar__navigation {
+    display: flex;
+    height: 44px;
+    margin-bottom: 1em;
+  }
+  
+  .react-calendar__navigation button {
+    min-width: 44px;
+    background: none;
+  }
+  
+  .react-calendar__navigation button:disabled {
+    background-color: #f0f0f0;
+  }
+  
+  .react-calendar__navigation button:enabled:hover,
+  .react-calendar__navigation button:enabled:focus {
+    background-color: #e6e6e6;
+  }
+  
+  .react-calendar__month-view__weekdays {
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.75em;
+  }
+  
+  .react-calendar__month-view__weekdays__weekday {
+    padding: 0.5em;
+  }
+  
+  .react-calendar__month-view__weekNumbers .react-calendar__tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75em;
+    font-weight: bold;
+  }
+  
+  .react-calendar__month-view__days__day--weekend {
+    color: #d10000;
+  }
+  
+  .react-calendar__month-view__days__day--neighboringMonth {
+    color: #757575;
+  }
+  
+  .react-calendar__year-view .react-calendar__tile,
+  .react-calendar__decade-view .react-calendar__tile,
+  .react-calendar__century-view .react-calendar__tile {
+    padding: 2em 0.5em;
+  }
+  
+  .react-calendar__tile {
+    max-width: 100%;
+    padding: 10px 6.6667px;
+    background: none;
+    text-align: center;
+    line-height: 16px;
+  }
+  
+  .react-calendar__tile:disabled {
+    background-color: #f0f0f0;
+  }
+  
+  .react-calendar__tile:enabled:hover,
+  .react-calendar__tile:enabled:focus {
+    background-color: #e6e6e6;
+  }
+  
+  .react-calendar__tile--now {
+    background: #ffff76;
+  }
+  
+  .react-calendar__tile--now:enabled:hover,
+  .react-calendar__tile--now:enabled:focus {
+    background: #ffffa9;
+  }
+  
+  .react-calendar__tile--hasActive {
+    background: #76baff;
+  }
+  
+  .react-calendar__tile--hasActive:enabled:hover,
+  .react-calendar__tile--hasActive:enabled:focus {
+    background: #a9d4ff;
+  }
+  
+  .react-calendar__tile--active {
+    background: #006edc;
+    color: white;
+  }
+  
+  .react-calendar__tile--active:enabled:hover,
+  .react-calendar__tile--active:enabled:focus {
+    background: #1087ff;
+  }
+  
+  .react-calendar--selectRange .react-calendar__tile--hover {
+    background-color: #e6e6e6;
+  }

package/src/client/components/inputv3/date/react-daterange-picker.less

@@ -0,0 +1,112 @@
+.react-daterange-picker {
+    display: inline-flex;
+    position: relative;
+  }
+  
+  .react-daterange-picker,
+  .react-daterange-picker *,
+  .react-daterange-picker *:before,
+  .react-daterange-picker *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  
+  .react-daterange-picker--disabled {
+    background-color: #f0f0f0;
+    color: #6d6d6d;
+  }
+  
+  .react-daterange-picker__wrapper {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    align-items: center;
+    border: thin solid gray;
+  }
+  
+  .react-daterange-picker__inputGroup {
+    min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
+    height: 100%;
+    flex-grow: 1;
+    padding: 0 2px;
+    box-sizing: content-box;
+  }
+  
+  .react-daterange-picker__inputGroup__divider {
+    padding: 1px 0;
+    white-space: pre;
+  }
+  
+  .react-daterange-picker__inputGroup__divider,
+  .react-daterange-picker__inputGroup__leadingZero {
+    display: inline-block;
+  }
+  
+  .react-daterange-picker__inputGroup__input {
+    min-width: 0.54em;
+    height: 100%;
+    position: relative;
+    padding: 0 1px;
+    border: 0;
+    background: none;
+    font: inherit;
+    box-sizing: content-box;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+  
+  .react-daterange-picker__inputGroup__input::-webkit-outer-spin-button,
+  .react-daterange-picker__inputGroup__input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+  
+  .react-daterange-picker__inputGroup__input:invalid {
+    background: rgba(255, 0, 0, 0.1);
+  }
+  
+  .react-daterange-picker__inputGroup__input--hasLeadingZero {
+    margin-left: -0.54em;
+    padding-left: calc(1px + 0.54em);
+  }
+  
+  .react-daterange-picker__button {
+    border: 0;
+    background: transparent;
+    padding: 4px 6px;
+  }
+  
+  .react-daterange-picker__button:enabled {
+    cursor: pointer;
+  }
+  
+  .react-daterange-picker__button:enabled:hover .react-daterange-picker__button__icon,
+  .react-daterange-picker__button:enabled:focus .react-daterange-picker__button__icon {
+    stroke: #0078d7;
+  }
+  
+  .react-daterange-picker__button:disabled .react-daterange-picker__button__icon {
+    stroke: #6d6d6d;
+  }
+  
+  .react-daterange-picker__button svg {
+    display: inherit;
+  }
+  
+  .react-daterange-picker__calendar {
+    width: 350px;
+    max-width: 100vw;
+    z-index: 1;
+  }
+  
+  .react-daterange-picker__calendar--closed {
+    display: none;
+  }
+  
+  .react-daterange-picker__calendar .react-calendar {
+    border-width: thin;
+  }

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

@@ -89,16 +89,11 @@ export default class ApiClient implements ApiClientService {
                 fetcher.data = { ...(fetcher.data || {}), ...params };
 
             console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
-            const indicator = this.toast.loading("Loading ...");
 
             this.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
 
                 this.set({ [id]: data });
 
-            }).finally(() => {
-
-                indicator.close(true);
-
             })
         }
     }

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

@@ -10,18 +10,129 @@ import { FileToUpload } from '@client/components/inputv3/file';
 - TYPES
 ----------------------------------*/
 
+function mergeObjects(object1, object2) {
+    return [object1, object2].reduce(function (carry, objectToMerge) {
+        Object.keys(objectToMerge).forEach(function (objectKey) {
+            carry[objectKey] = objectToMerge[objectKey];
+        });
+        return carry;
+    }, {});
+}
+
+function isArray(val) {
+
+    return ({}).toString.call(val) === '[object Array]';
+}
+
+function isJsonObject(val) {
+
+    return !isArray(val) && typeof val === 'object' && !!val && !(val instanceof Blob) && !(val instanceof Date);
+}
+
+function isAppendFunctionPresent(formData) {
+
+    return typeof formData.append === 'function';
+}
+
+function isGlobalFormDataPresent() {
+
+    return typeof FormData === 'function';
+}
+
+function getDefaultFormData() {
+
+    if (isGlobalFormDataPresent()) {
+        return new FormData();
+    }
+}
+
+function convertRecursively(jsonObject, options, formData, parentKey) {
+
+    var index = 0;
+
+    for (var key in jsonObject) {
+
+        if (jsonObject.hasOwnProperty(key)) {
+
+            var propName = parentKey || key;
+            var value = options.mapping(jsonObject[key]);
+
+            if (parentKey && isJsonObject(jsonObject)) {
+                propName = parentKey + '[' + key + ']';
+            }
+
+            if (parentKey && isArray(jsonObject)) {
+
+                if (isArray(value) || options.showLeafArrayIndexes ) {
+                    propName = parentKey + '[' + index + ']';
+                } else {
+                    propName = parentKey + '[]';
+                }
+            }
+
+            // Exract the file object from value
+            if (typeof value === 'object' && value instanceof FileToUpload)
+                value = value.data;
+
+            if (isArray(value) || isJsonObject(value)) {
+
+                convertRecursively(value, options, formData, propName);
+
+            } else if (value instanceof FileList) {
+
+                for (var j = 0; j < value.length; j++) {
+                    formData.append(propName + '[' + j + ']', value.item(j));
+                }
+            } else if (value instanceof Blob) {
+
+                formData.append(propName, value, value.name);
+
+            } else if (value instanceof Date) {
+
+                formData.append(propName, value.toISOString());
+
+            } else if (((value === null && options.includeNullValues) || value !== null) && value !== undefined) {
+
+                formData.append(propName, value);
+            }
+        }
+        index++;
+    }
+    return formData;
+}
+
 /*----------------------------------
 - UTILS
 ----------------------------------*/
-export const toMultipart = (postData: TPostData) => {
-
-    const formData = new FormData();
-    for (const key in postData) {
-        let data = postData[key];
-        if (typeof data === 'object' && (data instanceof FileToUpload))
-            data = data.data;
-        formData.append(key, data);
+/* Based on https://github.com/hyperatom/json-form-data
+    Changes:
+    - Add support for FileToUpload
+*/
+export const toMultipart = (jsonObject: TPostData, options) => {
+
+    if (options && options.initialFormData) {
+        
+        if (!isAppendFunctionPresent(options.initialFormData)) {
+            throw 'initialFormData must have an append function.';
+        }
+    } else if (!isGlobalFormDataPresent()) {
+
+        throw 'This environment does not have global form data. options.initialFormData must be specified.';
     }
 
-    return formData;
+    var defaultOptions = {
+        initialFormData: getDefaultFormData(),
+        showLeafArrayIndexes: true,
+        includeNullValues: false,
+        mapping: function(value) {
+            if (typeof value === 'boolean') {
+                return +value ? '1': '0';
+            }
+            return value;
+        }
+    };
+
+    var mergedOptions = mergeObjects(defaultOptions, options || {});
+
+    return convertRecursively(jsonObject, mergedOptions, mergedOptions.initialFormData);
 }

package/src/server/app/index.ts

@@ -196,6 +196,8 @@ export default abstract class Application extends Service<Config, Hooks, /* TODO
                     console.error("Catched error while starting service " + serviceClassName + '. Exiting process if mode production.', e);
                     if (this.env.profile === 'prod')
                         process.exit();
+                    else
+                        throw e;
                 })
             }
 

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

@@ -548,6 +548,8 @@ declare type Routes = {
             // Report error
             await this.app.runHook('error', e, request);
 
+            console.log("ERROR 500 VIA ROUTER", e);
+
             // Don't exose technical errors to users
             if (this.app.env.profile === 'prod')
                 e.message = "We encountered an internal error, and our team has just been notified. Sorry for the inconvenience.";

package/src/client/components/input/Date/index.less

@@ -1,167 +0,0 @@
-.champ.periode {
-
-    display: flex;
-
-    > .input-date {
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        > input[type=number] {
-            -moz-appearance: textfield;
-            padding: 0;
-            text-align: center;
-
-            width: 30px;
-            &.annee { width: 45px; }
-
-            &::-webkit-outer-spin-button,
-            &::-webkit-inner-spin-button {
-              -webkit-appearance: none;
-              margin: 0;
-            }
-        }
-
-    }
-}
-
-// https://github.com/wojtekmaj/react-calendar/blob/master/src/Calendar.less
-.react-calendar {
-  
-    &--doubleView {
-      width: 700px;
-  
-      .react-calendar__viewContainer {
-        display: flex;
-        margin: -.5em;
-  
-        > * {
-          width: 50%;
-          margin: .5em;
-        }
-      }
-    }
-  
-    &, & *, & *:before, & *:after {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-  
-    button {
-      margin: 0;
-      border: 0;
-      outline: none;
-      border-radius: @radiusBase;
-  
-      &:enabled {
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-  
-    &__navigation {
-      height: 40px;
-  
-      button {
-        min-width: 44px;
-        background: none;
-  
-        &:enabled {
-          &:hover, &:focus {
-            background-color: var(--cBgControl)
-          }
-        }
-  
-        &[disabled] {
-          color: var(--cTxtDiscret)
-        }
-      }
-    }
-  
-    &__month-view {
-      &__weekdays {
-        text-align: center;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: .75em;
-  
-        &__weekday {
-          padding: .5em;
-        }
-      }
-  
-      &__weekNumbers {
-        font-weight: bold;
-  
-        .react-calendar__tile {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: .75em;
-          padding: calc(.75em / .75) calc(.5em / .75);
-        }
-      }
-  
-      &__days {
-        &__day {
-          &--weekend {
-            //color: rgb(209, 0, 0);
-          }
-  
-          &--neighboringMonth {
-          color: var(--cTxtDesc)
-          }
-        }
-      }
-    }
-  
-    &__year-view,
-    &__decade-view,
-    &__century-view {
-      .react-calendar__tile {
-        padding: 2em .5em;
-      }
-    }
-  
-    &__tile {
-      max-width: 100%;
-      text-align: center;
-      padding: .75em .5em;
-      background: none;
-  
-      &:disabled {
-          color: var(--cTxtDiscret)
-      }
-  
-      &:enabled {
-        &:hover, &:focus {
-            background-color: var(--cBgControl)
-        }
-      }
-  
-      &--now {
-        font-weight: 700;
-      }
-  
-      &--hasActive {
-        background: var(--cPrincipale);
-        color: #fff;
-      }
-  
-      &--active {
-        background: var(--cPrincipale);
-        color: #fff;
-      }
-    }
-  
-    &--selectRange {
-      .react-calendar__tile {
-        &--hover {
-            background-color: var(--cBgControl)
-        }
-      }
-    }
-  }

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

@@ -1,90 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-import React from 'react';
-import Champ from '../Base';
-import dayjs from 'dayjs';
-import Popover from '@client/components/Conteneurs/Popover';
-import Calendar from 'react-calendar';
-
-/*----------------------------------
-- TYPES
-----------------------------------*/
-type TValeur = string | Date;
-type TValeurDefaut = Date;
-type TValeurOut = Date;
-const valeurDefaut = undefined;
-
-export type Props = {
-    valeur: TValeur,
-    placeholder?: string,
-    min?: string,
-    max?: string
-}
-
-/*----------------------------------
-- COMPOSANT
-----------------------------------*/
-import './index.less';
-export default Champ<Props, TValeurDefaut, TValeurOut>('date', { valeurDefaut }, ({
-    // Spread TOUTES les props dont on a besoin pour éviter les problèmes de référence avec props
-    prefixe, className, min, max
-}, { state, valeur, setState }, rendre) => {
-
-    const maintenant = new Date;
-
-    /* TODO: onchange saisie input = pas de validation
-                 onchange click calendrier = validation immédiate
-        */
-
-    const [affCalendrier, setAffCalendrier] = React.useState<boolean>(false);
-
-    const saisieValide = valeur !== undefined && (
-        typeof valeur !== 'string' || !isNaN( Date.parse( valeur ) )
-    );
-
-    /*----------------------------------
-    - CONSTRUCTION CHAMP
-    ----------------------------------*/
-    if (prefixe === undefined)
-        prefixe = <i src="calendar-alt" />;
-    
-    /*----------------------------------
-    - RENDU DU CHAMP
-    ----------------------------------*/
-    return rendre(<>
-
-        <Popover
-            afficher={affCalendrier}
-            fermer={() => setAffCalendrier(false)}
-            interactions
-            //{...props}
-            className={"bloc input-date" + (className ? ' ' + className : '')} 
-            width={300}
-            content={(
-                <div>
-                    <Calendar
-                        minDate={min ? new Date(min) : maintenant}
-                        maxDate={max ? new Date(max) : undefined}
-                        value={saisieValide ? new Date(valeur) : maintenant}
-                        showDoubleView={false}
-                        onChange={(val: Date) => {
-                            setAffCalendrier(false)
-                            setState({ valeur: val });
-                        }}
-                    />
-                </div>
-            )}
-        >
-            <input
-                className="champ"
-                value={saisieValide ? dayjs(valeur).format('DD/MM/YYYY') : valeur}
-                onChange={(e) => setState({ valeur: e.target.value })}
-                onFocus={() => setAffCalendrier(true)}
-                placeholder='DD/MM/YYYY'
-                readOnly
-            />
-        </Popover>
-
-    </>, { prefixe }); // Les propétés modifiées sont passées ici
-})