Yadoms · oben01 · May 27, 2024 · Sep 10, 2023 · Sep 24, 2023 · Dec 3, 2023
diff --git a/apps/yadoms-cs/src/app/app-shell/main-app-shell.tsx b/apps/yadoms-cs/src/app/app-shell/main-app-shell.tsx
@@ -92,10 +92,13 @@
       display: 'none',
     },
   },
+  logoBorder: {
+    borderBottom: '0.0625rem solid #2C2E33',
+  },
 }));
 
 interface NavbarLinkProps {
  icon: React.FC<any>;
  label: string;
  active?: boolean;

@@ -153,8 +156,8 @@

  const [active, setActive] = useState(activeIndex);

  const { classes, cx } = useStyles();
  const [opened, { toggle, close }] = useDisclosure(false);

  const links = linksData.map((link, index) => (
    <NavbarLink
@@ -170,10 +173,12 @@
       <Navbar
         height={'100vh'}
         width={{ base: 80 }}
-        p="md"
+        px="md"
+        pb="md"
+        pt="sm"
         position={{ top: 0 }}
       >
-        <Center>
+        <Center className={classes.logoBorder}>
           <Logo colorScheme={colorScheme} />
         </Center>
         <Navbar.Section grow mt={50}>

diff --git a/libs/domain/plugins/src/lib/service/plugin-form.service.spec.ts b/libs/domain/plugins/src/lib/service/plugin-form.service.spec.ts
@@ -1,5 +1,9 @@
 import { PluginConfigurationSchemaType } from '../model/plugin-configuration-schema.model';
-import { getInitialValues, InitialValues } from './plugin-form.service';
+import {
+  getInitialValues,
+  getInitialValuesFromSectionFields,
+  InitialValues,
+} from './plugin-form.service';
 
 describe('Plugin form store', () => {
   describe(`setup the correct form`, () => {
@@ -274,3 +278,82 @@ describe('Plugin form store', () => {
     });
   });
 });
+describe(`getInitialValuesFromSectionFields`, () => {
+  // TODO: combo section with one content
+  test(`for comboSection`, () => {
+    getInitialValuesFromSectionFields(
+      [
+        {
+          key: 'APIKey',
+          path: 'configuration.APIKey',
+          field: {
+            type: 'string',
+            required: true,
+            regex: '[a-zA-Z0-9]{64}',
+            name: "Clé d'API",
+            description:
+              'Cette clé est nécessaire pour le fonctionnement de votre plugin. Elle peut être obtenue sur simple inscription (gratuite) au [Lametric](https://developer.lametric.com/user/devices).',
+            regexErrorMessage: "Ce n'est pas une API KEY valide",
+          },
+        },
+        {
+          key: 'PairingMode',
+          path: 'configuration.PairingMode',
+          field: {
+            type: 'comboSection',
+            content: {
+              Automatic: {
+                name: 'Appairage automatique',
+                type: 'section',
+                content: {
+                  Port: {
+                    type: 'enum',
+                    values: {
+                      Http: 8080,
+                      Https: 4343,
+                    },
+                    defaultValue: 'Https',
+                    name: 'Port',
+                    description:
+                      'Le port de communication de Lametric (exemple Http: 8080, Https: 4343)',
+                  },
+                },
+                description:
+                  'Appairage automatique en utilisant le protocole UPNP',
+              },
+              Manual: {
+                name: 'Appairage manuel',
+                type: 'section',
+                content: {
+                  IPAddress: {
+                    type: 'string',
+                    regex: '^(?:[0-9]{1,3}\\.){3}[0-9]{1,3}$',
+                    required: true,
+                    name: 'Adresse IP',
+                    description: "L'adresse IP du module",
+                    regexErrorMessage: "Ce n'est pas une adresse IP valide",
+                  },
+                  Port: {
+                    type: 'enum',
+                    values: {
+                      Http: 8080,
+                      Https: 4343,
+                    },
+                    defaultValue: 'Https',
+                    name: 'Port',
+                    description:
+                      'Le port de communication de Lametric (exemple Http: 8080, Https: 4343)',
+                  },
+                },
+                description: 'Appairage manuel',
+              },
+            },
+            name: "Mode d'appairage",
+          },
+        },
+      ],
+      '',
+      ''
+    );
+  });
+});
diff --git a/libs/domain/plugins/src/lib/service/plugin-form.service.ts b/libs/domain/plugins/src/lib/service/plugin-form.service.ts
@@ -1,22 +1,29 @@
 import {
+  EnumField,
   PluginConfigurationSchema,
+  PluginConfigurationSchemaField,
   PluginConfigurationSchemaType,
+  PluginMultiSelectSectionConfigurationSchema,
+  PluginSectionConfigurationSchema,
 } from '../model/plugin-configuration-schema.model';
 
 export interface InitialValues {
   type: string;
   displayName: string;
   configurationSchema: PluginConfigurationSchema;
 }
+
 export const getInitialValues = (initialValues: InitialValues) => {
   return {
     type: initialValues.type,
     displayName: initialValues.displayName,
     configuration: getFromInitialValues(initialValues.configurationSchema),
   };
 };
-const getFromInitialValues = (
-  configurationSchema: PluginConfigurationSchema
+export const getFromInitialValues = (
+  configurationSchema:
+    | PluginConfigurationSchema
+    | PluginMultiSelectSectionConfigurationSchema
 ): Record<string, unknown> => {
   const newInitialValues: Record<string, unknown> = {};
 
@@ -38,7 +45,7 @@ const getFromInitialValues = (
         newInitialValues[key] = field.defaultValue ?? 0.0;
         break;
       case PluginConfigurationSchemaType.Enum:
-        newInitialValues[key] = field.defaultValue;
+        newInitialValues[key] = getEnumDefaultValue(field);
         break;
       case PluginConfigurationSchemaType.Section:
         newInitialValues[key] = {
@@ -59,10 +66,118 @@ const getFromInitialValues = (
           };
         }
         break;
+      case PluginConfigurationSchemaType.CheckboxSection:
+        sectionKeys = Object.keys(field.content || {});
+        if (sectionKeys.length > 0) {
+          newInitialValues[key] = {
+            content: getFromInitialValues(field.content || {}),
+            checkbox: field.defaultValue,
+          };
+        } else {
+          newInitialValues[key] = {
+            content: getFromInitialValues(field.content || {}),
+          };
+        }
+        break;
+      case PluginConfigurationSchemaType.MultiSelectSection:
+        newInitialValues[key] = {
+          content: getFromInitialValues(field.content || {}),
+        };
+        break;
       default:
         break;
     }
   }
+  return newInitialValues;
+};
 
+export const getFromInitialValuesTest = (
+  configurationSchema:
+    | PluginConfigurationSchema
+    | PluginSectionConfigurationSchema
+    | PluginMultiSelectSectionConfigurationSchema,
+  parentKey = 'configuration'
+): Array<{
+  key: string;
+  path: string;
+  field: PluginConfigurationSchemaField;
+}> => {
+  const newInitialValues: Array<{
+    key: string;
+    path: string;
+    field: PluginConfigurationSchemaField;
+  }> = [];
+  for (const [key, field] of Object.entries(configurationSchema)) {
+    const path = parentKey ? `${parentKey}.${key}` : key;
+
+    switch (field?.type) {
+      case PluginConfigurationSchemaType.Enum:
+      case PluginConfigurationSchemaType.String:
+      case PluginConfigurationSchemaType.CustomTime:
+      case PluginConfigurationSchemaType.Boolean:
+      case PluginConfigurationSchemaType.Decimal:
+      case PluginConfigurationSchemaType.Integer:
+        newInitialValues.push({ key: key, path: path, field: field });
+        break;
+      case PluginConfigurationSchemaType.Section:
+      case PluginConfigurationSchemaType.ComboSection:
+      case PluginConfigurationSchemaType.RadioSection:
+      case PluginConfigurationSchemaType.CheckboxSection:
+      case PluginConfigurationSchemaType.MultiSelectSection:
+        newInitialValues.push({ key: key, path: path, field: field });
+        break;
+      default:
+    }
+  }
+  return newInitialValues;
+};
+
+export const getInitialValuesFromSectionFields = (
+  configurationSchema:
+    | PluginSectionConfigurationSchema
+    | PluginMultiSelectSectionConfigurationSchema,
+  parentKey = '',
+  selectedKey: string
+): Array<{
+  key: string;
+  path: string;
+  field: PluginConfigurationSchemaField;
+}> => {
+  const newInitialValues: Array<{
+    key: string;
+    path: string;
+    field: PluginConfigurationSchemaField;
+  }> = [];
+  for (const [key, field] of Object.entries(configurationSchema)) {
+    switch (field?.type) {
+      case PluginConfigurationSchemaType.CheckboxSection:
+        newInitialValues.push({
+          key: key,
+          path: `${parentKey}.content.${key}`,
+          field: field,
+        });
+        break;
+      case PluginConfigurationSchemaType.ComboSection:
+        newInitialValues.push({
+          key: key,
+          path: `${parentKey}.${selectedKey}.content.${key}`,
+          field: field,
+        });
+        break;
+      default:
+        newInitialValues.push({
+          key: key,
+          path: `${parentKey}.${selectedKey}.content.${key}`,
+          field: field,
+        });
+    }
+  }
   return newInitialValues;
 };
+
+function getEnumDefaultValue(field: EnumField): string {
+  if (!field.defaultValue) {
+    return Object.keys(field.values)[0];
+  }
+  return field.defaultValue.toString();
+}
diff --git a/...s/plugins/src/lib/ui/custom-plugin-components/custom-bool-checkbox/CustomBoolCheckbox.tsx b/...s/plugins/src/lib/ui/custom-plugin-components/custom-bool-checkbox/CustomBoolCheckbox.tsx
@@ -8,6 +8,7 @@ export interface CustomBoolCheckboxProps {
   pluginKey: string;
   field: BooleanField;
   form: FormReturnType;
+  path: string;
 }
 
 export function CustomBoolCheckbox(props: CustomBoolCheckboxProps) {

diff --git a/...s/src/lib/ui/custom-plugin-components/custom-checkbox-section/custom-checkbox.section.tsx b/...s/src/lib/ui/custom-plugin-components/custom-checkbox-section/custom-checkbox.section.tsx
@@ -1,6 +1,9 @@
-import { CheckboxSectionField } from '@yadoms/domain/plugins';
+import {
+  CheckboxSectionField,
+  getInitialValuesFromSectionFields,
+} from '@yadoms/domain/plugins';
 import { Box, Checkbox } from '@mantine/core';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import renderPluginField from '../../render-plugin-field/render-plugin-field';
 import LinkifyText from '../../linkify-text/linkify-text';
 import { FormReturnType } from '../../FormReturnType';
@@ -9,12 +12,19 @@ export interface CustomCheckboxSectionProps {
   pluginKey: string;
   field: CheckboxSectionField;
   form: FormReturnType;
+  path: string;
 }
 
 export function CustomCheckboxSection(props: CustomCheckboxSectionProps) {
-  const [checked, setChecked] = useState<boolean | undefined>(
-    !!props.field.defaultValue
-  );
+  const CHECKBOX_PATH = `${props.path}.checkbox`;
+  const CHECKBOX_VALUE = props.form.getInputProps(CHECKBOX_PATH).value;
+
+  const [checked, setChecked] = useState<boolean>(!!props.field.defaultValue);
+
+  useEffect(() => {
+    setChecked(CHECKBOX_VALUE);
+  }, [CHECKBOX_VALUE]);
+
   return (
     <Box
       sx={(theme) => ({
@@ -34,15 +44,20 @@ export function CustomCheckboxSection(props: CustomCheckboxSectionProps) {
         label={props.field.name}
         description={<LinkifyText text={props.field.description} />}
         checked={checked}
-        onChange={(event) => setChecked(event.currentTarget.checked)}
+        {...props.form.getInputProps(CHECKBOX_PATH, { type: 'checkbox' })}
       />
 
       {checked && (
         <div>
-          {Object.entries(props.field.content).map(([key, value]) =>
+          {getInitialValuesFromSectionFields(
+            props.field.content,
+            props.path,
+            ''
+          ).map(({ key, path, field }) =>
             renderPluginField({
-              field: value,
+              field: field,
               form: props.form,
+              path: path,
               pluginKey: key,
             })
           )}

diff --git a/...plugins/src/lib/ui/custom-plugin-components/custom-combo-section/custom-combo-section.tsx b/...plugins/src/lib/ui/custom-plugin-components/custom-combo-section/custom-combo-section.tsx
@@ -2,14 +2,18 @@
 import React, { forwardRef, useState } from 'react';
 import { ItemProps } from '../../plugin-configuration-modal/plugin-configuration-modal';
 import renderPluginField from '../../render-plugin-field/render-plugin-field';
-import { ComboSectionField } from '@yadoms/domain/plugins';
+import {
+  ComboSectionField,
+  getInitialValuesFromSectionFields,
+} from '@yadoms/domain/plugins';
 import LinkifyText from '../../linkify-text/linkify-text';
 import { FormReturnType } from '../../FormReturnType';
 
 export interface CustomComboSectionProps {
   pluginKey: string;
   field: ComboSectionField;
   form: FormReturnType;
+  path: string;
 }
 
 const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
@@ -34,7 +38,8 @@
   });
   // TODO : to be removed when seb added empty content to Linky plugin
   const selectedComboSectionContent =
-    props.field.content[selectedComboSection]?.content;
+    props.field.content[selectedComboSection].content;
+
   return (
     <Box
       sx={(theme) => ({
@@ -68,10 +73,15 @@
       />
       {selectedComboSectionContent && (
         <div>
-          {Object.entries(selectedComboSectionContent).map(([key, value]) =>
+          {getInitialValuesFromSectionFields(
+            selectedComboSectionContent,
+            props.path,
+            selectedComboSection
+          ).map(({ key, path, field }) =>
             renderPluginField({
-              field: value,
+              field: field,
               form: props.form,
+              path: path,
               pluginKey: key,
             })
           )}
@@ -94,7 +104,7 @@
 function getComboSectionData(field: ComboSectionField) {
  const data: ItemProps[] = [];
  if (field.content) {
    Object.entries(field.content).map(([key, value]) => {
      data.push({
        value: key,
        description: value.description,