5htp-core 0.5.9-52 → 0.5.9-54

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

@@ -92,6 +92,10 @@
 
     &.menu {
         padding: @cardPaddingLong;
+
+        &.popover {
+            padding: @cardPaddingMini;
+        }
     }
 
     /*----------------------------------

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

@@ -1,6 +1,10 @@
 .table {
+
     overflow: auto;
-    max-height: 90vh;
+
+    &.scrollable {
+        max-height: 90vh;
+    }
 
     > table {
         border-collapse: collapse;
@@ -27,7 +31,6 @@ table {
 
     // By default, chrome disables text inherits
     line-height: inherit;
-    font-size: 0.9em;
 
     th {
         font-weight: 500;
@@ -37,7 +40,8 @@ table {
 
     td, th {
 
-        padding: 1em 1em;
+        padding: 0.6em 1em;
+        font-size: 1rem;
         text-align: left;
 
         &:not(:last-child) {
@@ -74,7 +78,7 @@ table {
         top: 0;
         background: var(--cBg);
         white-space: break-spaces;
-        z-index: 5;
+        z-index: 2;
     }
 
     tbody {
@@ -126,14 +130,6 @@ table {
         }
     }
 
-    // Size
-    &.s, .table.s & {
-        td, th {
-            padding: 0.7em 1em;
-            font-size: 1rem;
-        }
-    }
-
     // Tableua responsive
     //  Utilisation déconseillée (lauvaise utilisation de l'espace, ergonomie horrible
     /*@media (max-width: @responsive2) {

package/client/components/Checkbox.tsx

@@ -26,7 +26,10 @@ export default (initProps: Props) => {
     - INIT
     ----------------------------------*/
 
-    const [{ title }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
+    const [{ title, onChange }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
+
+    console.log("initProps", initProps);
+    
 
     /*----------------------------------
     - RENDER
@@ -37,6 +40,7 @@ export default (initProps: Props) => {
             error={errors?.join(', ')}
             required={required}
             {...props}
+            onChange={e => onChange?.(e.target.checked)}
         />
     )
 }

package/client/components/DropDown.tsx

@@ -5,8 +5,8 @@
 // Npm
 import React from 'react';
 import { JSX, ComponentChild } from 'preact';
-import { Menu, MenuProps } from '@mantine/core';
-import Button, { Props as ButtonProps } from './Button';
+import { Button, Menu, MenuProps } from '@mantine/core';
+import { Props as ButtonProps } from './Button';
 
 // Core libs
 import { useMantineInput, InputBaseProps } from './utils';
@@ -24,12 +24,18 @@ export type Props = ButtonProps & {
 ----------------------------------*/
 export default ({ 
     label, children, 
-    menuProps = {}, ...btnProps 
+    menuProps = {}, size, icon, ...btnProps 
 }: Props) => {
     return (
-        <Menu {...menuProps}>
+        <Menu {...menuProps} size={size}>
             <Menu.Target>
-                <Button {...btnProps}>{label}</Button>
+                <Button {...btnProps} 
+                    rightSection={<i src="angle-down" />}
+                    variant="subtle"
+                >
+                    {icon && <i src={icon} />}
+                    {label}
+                </Button>
             </Menu.Target>
             <Menu.Dropdown>
                 {children}

package/client/components/Rte/ToolbarPlugin/ElementFormat.tsx

@@ -85,8 +85,10 @@ export default function ElementFormatDropdown({
     const formatOption = FormatOptions.find((option) => option.value === currentValue) || FormatOptions[0];
 
     return (
-        <DropDown disabled={disabled} icon={isRTL ? formatOption.iconRTL : formatOption.icon} size="s" 
-            label={formatOption.label}
+        <DropDown disabled={disabled} 
+            icon={isRTL ? formatOption.iconRTL : formatOption.icon} 
+            size="s" 
+            hint={formatOption.label}
             popover={{ tag: 'li' }}
         >
             {FormatOptions.map((option) => (

package/client/components/Rte/ToolbarPlugin/index.tsx

@@ -510,7 +510,7 @@ export default function ToolbarPlugin({
             )}
             
             {blockType === 'code' ? (
-                <DropDown label={getLanguageFriendlyName(codeLanguage)}
+                <DropDown size="s" label={getLanguageFriendlyName(codeLanguage)}
                     disabled={!isEditable}
                     icon="code"
                 >
@@ -591,7 +591,7 @@ export default function ToolbarPlugin({
 
                     <DropDown popover={{ tag: 'li' }} icon="font" size="s"
                         disabled={!isEditable}
-                        label="Formatting options for additional text styles"
+                        hint="Formatting options for additional text styles"
                     >
 
                         <Button icon="strikethrough" size="s"
@@ -640,8 +640,8 @@ export default function ToolbarPlugin({
                             <DropDown popover={{ tag: 'li' }}
                                 disabled={!isEditable}
                                 size="s"
-                                label="Insert"
-                                title="Insert specialized editor node"
+                                icon="plus-circle"
+                                hint="Insert specialized editor node"
                             >
 
                                 <Button icon="horizontal-rule" size="s" onClick={() => {

package/client/components/Select.tsx

@@ -5,7 +5,6 @@
 // Npm
 import React from 'react';
 import { 
-    Select as MantineSelect, 
     SelectProps, 
     MultiSelect as MantineMultiSelect, 
     ComboboxItem,
@@ -30,18 +29,17 @@ export type Choice = ComboboxItem;
 
 const ensureChoice = (
     choice: ComboboxItem | string, 
-    choices: ComboboxItem[]
+    choices: ComboboxItem[],
+    current: ComboboxItem[]
 ): ComboboxItem => {
 
     // Allready a choice
-    if (typeof choice === 'object' && choice.label) {
+    if (typeof choice === 'object')
         return choice;
-    }
 
     // Find the choice
-    const found = choices.find( c => c.value === choice);
-    if (found)
-        return found;
+    const found = [...choices, ...current].find( c => c.value === choice );
+    if (found) return found;
 
     // Create a new choice
     return {
@@ -66,24 +64,16 @@ export default (initProps: Props) => {
         ...props
     }] = useMantineInput<Props, string|number>(initProps);
 
-    const initRef = React.useRef<boolean>();
+    const currentArray = Array.isArray(current) ? current : current ? [current] : [];
 
     const choicesViaFunc = typeof initChoices === 'function';
     if (choicesViaFunc)
         enableSearch = true;
     else 
-        initChoices = initChoices?.map( c => ensureChoice(c, []) ) || [];
-
-    if (enableSearch)
-        props.searchable = true;
+        initChoices = initChoices?.map( c => ensureChoice(c, [], currentArray) ) || [];
 
     let [choices, setChoices] = React.useState<ComboboxItem[]>( choicesViaFunc 
-        ? (Array.isArray(current) 
-            ? current.map( c => ensureChoice(c, []) )
-            : current 
-                ? [ensureChoice(current, [])]
-                : []
-        ) || []
+        ? currentArray.map( c => ensureChoice(c, [], currentArray) )
         : initChoices
     );
 
@@ -100,8 +90,6 @@ export default (initProps: Props) => {
     - ACTIONS
     ----------------------------------*/
 
-    const valueToChoice = (value: string) => choices.find(c => c.value === value);
-
     React.useEffect(() => {
 
         if (choicesViaFunc && opened) {
@@ -117,8 +105,6 @@ export default (initProps: Props) => {
             })
         }
 
-        initRef.current = true;
-
     }, [
         opened,
         search.keywords,
@@ -127,26 +113,37 @@ export default (initProps: Props) => {
         typeof initChoices === 'function' ? true : initChoices
     ]);
 
-    let Component: typeof MantineSelect | typeof MantineMultiSelect;
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+
     if (multiple) {
-        Component = MantineMultiSelect;
-        props.value = current ? current.map( c => ensureChoice(c, choices).value ) : [];
+
+        props.value = current 
+            ? current.map( c => ensureChoice(c, choices, currentArray).value ) 
+            : [];
+
         props.onChange = (value: string[]) => {
-            onChange( value.map(valueToChoice) )
+            onChange( value.map(value => ensureChoice(value, choices, currentArray)) )
         };
+
     } else {
-        Component = MantineSelect;
-        props.value = current ? ensureChoice(current, choices).value : '';
-        props.onChange = (value: string) => onChange( valueToChoice(value) );
-    }   
 
-    if (props.placeholder === 'Languages') {
-        console.log("CHOICES", current, props.value);
-    }
+        props.value = current 
+            ? [ensureChoice(current, choices, currentArray).value] 
+            : [];
+
+        props.onChange = (value: string[]) => {
+
+            setOpened(false);
+
+            onChange( value.length > 0 
+                ? ensureChoice(value[value.length - 1], choices, currentArray) 
+                : undefined 
+            )
+        };
+    }   
 
-    /*----------------------------------
-    - RENDER
-    ----------------------------------*/
     if (minimal) {
         return (
             <Menu width={300} opened={opened} onChange={setOpened} 
@@ -207,19 +204,32 @@ export default (initProps: Props) => {
 
     } else {
         return (
-            <Component 
+            <MantineMultiSelect 
                 {...props} 
     
-                data={choices}
+                data={[
+                    {
+                        group: 'Search results',
+                        // Exclude the choices that are already selected
+                        items: choices.filter(c => !props.value.includes(c.value))
+                    },
+                    {
+                        group: 'Selected',
+                        items: currentArray
+                    }
+                ]}
                 nothingFound={search.loading ? 'Loading...' : props || 'No options found'}
                 comboboxProps={{
                     withArrow: false
                 }}
     
+                searchable={enableSearch}
                 clearable={!required}
                 required={required}
                 allowDeselect={!required}
+                checkIconPosition="right"
     
+                dropdownOpened={opened}
                 onDropdownOpen={() => setOpened(true)}
                 onDropdownClose={() => setOpened(false)}
                 onSearchChange={(keywords) => setSearch(s => ({ ...s, keywords }))}

package/client/components/Table/index.tsx

@@ -136,33 +136,37 @@ 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) {
+
+                    const headerProps = { className: '', ...cellProps };
+                    const isCurrentlySorted = sort && sorted && sorted.id === sort.id;
+                    const isSortable = sort && onSort;
+                    if (isSortable) {
+                        headerProps.className += ' clickable';
+                        headerProps.onClick = () => {
+                            if (isCurrentlySorted)
+                                onSort(null, sort.order);
+                            else
+                                onSort(sort.id, sort.order);
+                        }
                     }
+                    
+                    renduColonnes.push(
+                        <th {...headerProps}>
+                            <div class="row sp-btw">
+                                
+                                {isSortable ? (
+                                    <a>{label}</a>
+                                ) : label}
+    
+                                {isCurrentlySorted && (
+                                    <i src={sort.order === "asc" ? "caret-up" : "caret-down"} />
+                                )}
+                            </div>
+                        </th>
+                    );
                 }
 
-                if (iDonnee === 0) renduColonnes.push(
-                    <th class={classe} {...cellProps}>
-                        <div class="row sp-btw">
-                            
-                            {isSortable ? (
-                                <a>{label}</a>
-                            ) : label}
-
-                            {isCurrentlySorted && (
-                                <i src={sort.order === "asc" ? "caret-up" : "caret-down"} />
-                            )}
-                        </div>
-                    </th>
-                );
-
                 let render: ComponentChild;
                 if (Array.isArray(cell)) {
 

package/client/components/containers/Popover/index.tsx

@@ -113,7 +113,7 @@ export default (props: Props) => {
         renderedContent = React.cloneElement( 
             content, 
             {
-                className: 'card popover pd-1' 
+                className: 'card popover' 
                     + (position ? ' pos_' + position.cote : '')
                     + ' ' + (content.props.className || ''),
 

package/client/components/containers/Popover/popover.less

@@ -29,7 +29,7 @@
 
     list-style: none;
     text-align: left;
-    line-height: 2rem;
+    //line-height: 2rem;  Why ?
 
     overflow: auto;
 

package/client/components/index.ts

@@ -103,6 +103,7 @@ export {
     Progress,
     Radio,
     Rating,
+    RangeSlider,
     RingProgress,
     SegmentedControl,
     //Select,

package/client/components/utils.tsx

@@ -57,7 +57,7 @@ const sizeAdapter = {
 }
 
 export function useMantineInput<TProps extends __BaseInputProps & InputBaseProps<any>, TValue>({
-    title, wrapper, hint, errors, icon, iconR, minimal, onChange, value, ...props
+    title, wrapper, hint, errors, icon, iconR, prefix, suffix, minimal, onChange, value, ...props
 }: InputBaseProps<TValue> & TProps): [
     InputBaseProps<any>,
     TProps
@@ -74,11 +74,11 @@ export function useMantineInput<TProps extends __BaseInputProps & InputBaseProps
         props.description = hint;
     } 
     // Prefix
-    if (props.leftSection === undefined && icon !== undefined)
-        props.leftSection = <i src={icon} />;
+    if (props.leftSection === undefined)
+        props.leftSection = icon !== undefined ? <i src={icon} /> : prefix;
     // Suffix
-    if (props.rightSection === undefined && iconR !== undefined)
-        props.rightSection = <i src={iconR} />;
+    if (props.rightSection === undefined)
+        props.rightSection = iconR !== undefined ? <i src={iconR} /> : suffix;
     
     // Errors
     if (errors?.length)

package/package.json

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

package/server/services/auth/index.ts

@@ -220,13 +220,13 @@ export default abstract class AuthService<
         // Insufficient permissions
         } else if (!user.roles.includes(role)) {
 
-            console.warn(LogPrefix, "Refusé: " + role + " pour " + user.name + " (" + (user.roles ? user.roles.join(', ') : 'role inconnu') + ")");
+            console.warn(LogPrefix, "Refusé: " + role + " pour " + user.name + " (" + (user.roles || 'role inconnu') + ")");
 
             throw new Forbidden("You do not have sufficient permissions to access this resource.");
 
         } else {
 
-            console.warn(LogPrefix, "Autorisé " + role + " pour " + user.name + " (" + user.roles.join(', ') + ")");
+            console.warn(LogPrefix, "Autorisé " + role + " pour " + user.name + " (" + user.roles + ")");
 
         }
 

package/types/icons.d.ts

@@ -1 +1 @@
-export type TIcones = "times"|"solid/spinner-third"|"long-arrow-right"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"rocket"|"chart-bar"|"planet-ringed"|"brands/linkedin"|"user-circle"|"crosshairs"|"plus-circle"|"comments-alt"|"arrow-right"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"key"|"user"|"at"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"times-circle"|"calendar-alt"|"paper-plane"|"search"|"lightbulb"|"magnet"|"angle-up"|"angle-down"|"solid/crown"|"brands/discord"|"pen"|"plus"|"file"|"envelope"|"binoculars"|"info-circle"|"check-circle"|"exclamation-circle"|"check"|"arrow-left"|"trash"|"meh-rolling-eyes"|"bars"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"cog"|"power-off"|"question-circle"|"play"|"minus-circle"|"external-link"|"plane-departure"|"wind"|"map-marker-alt"|"clock"|"arrow-to-bottom"|"ellipsis-h"|"usd-circle"|"users"|"home-alt"|"trophy"|"building"|"unlink"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"
+export type TIcones = "times"|"solid/spinner-third"|"long-arrow-right"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"chart-bar"|"rocket"|"user-circle"|"planet-ringed"|"brands/linkedin"|"crosshairs"|"arrow-right"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"at"|"key"|"plus-circle"|"comments-alt"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"user"|"calendar-alt"|"paper-plane"|"search"|"lightbulb"|"magnet"|"times-circle"|"angle-up"|"angle-down"|"envelope"|"plus"|"solid/crown"|"brands/discord"|"pen"|"file"|"binoculars"|"check"|"info-circle"|"check-circle"|"exclamation-circle"|"arrow-left"|"meh-rolling-eyes"|"trash"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"cog"|"power-off"|"bars"|"usd-circle"|"users"|"home-alt"|"trophy"|"plane-departure"|"wind"|"question-circle"|"play"|"minus-circle"|"external-link"|"map-marker-alt"|"clock"|"arrow-to-bottom"|"ellipsis-h"|"building"|"unlink"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"