Merge pull request #13 from simomosi/rewriting_in_ts

Rewriting in ts
simomosi · May 9, 2023 · 4aeff9c · 4aeff9c
2 parents b72b218 + d19cf9a
commit 4aeff9c
Show file tree

Hide file tree

Showing 29 changed files with 1,089 additions and 1,240 deletions.
diff --git a/.babelrc b/.babelrc
@@ -19,7 +19,8 @@
             "@babel/preset-env",
             {
                 "modules": false
-            }
+            },
+            "@babel/preset-typescript"
         ]
     ]
 }
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
 node_modules
+dist
+build
 
 # Doc site deploy
 site/

diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ Here's some examples.
 
 ### Select with variable options
 
-![Dynamic Dropdown example gif](./docs/imgs/dynamic-dropdown.gif)
+![Dynamic Select example gif](./docs/imgs/dynamic-select.gif)
 
 ### Form values easy initialisation
 

diff --git a/dist/dynamicforms.js b/dist/dynamicforms.js
diff --git a/dist/dynamicforms.min.js b/dist/dynamicforms.min.js
diff --git a/dist/dynamicforms.min.js.map b/dist/dynamicforms.min.js.map
diff --git a/docs/README.md b/docs/README.md
@@ -11,7 +11,7 @@ Here's some examples.
 
 ### Select with variable options
 
-![Dynamic Dropdown example gif](./imgs/dynamic-dropdown.gif){ loading=lazy }
+![Dynamic Select example gif](./imgs/dynamic-select.gif){ loading=lazy }
 
 ### Form values easy initialisation
 

diff --git a/docs/classdiagram.mmd b/docs/classdiagram.mmd
@@ -1,51 +1,54 @@
 classDiagram
 
     class DynamicForm {
-        JSON config
-        node htmlElement
-        Map~String, DynamicElement~ entities
+        FormConfiguration config
+        HTMLFormElement htmlElement
+        Map❬String DynamicElement❭ entities
         boolean debug
         boolean enabled
         json elementToClassMapping
 
-        notify(subjectName)
-        fetchAllParameters(rule) object
-        clearCascade(currentSubject)
-        manualUpdate(data, subjectName)
-        getField(name) DynamicElement
-        getId() string
-        setEnabled() void
-        isEnabled() boolean
+        +ready() Promise❬void❭
+        +notify(subjectName) Promise❬void❭
+        -fetchAllParameters(rule) object
+        -clearCascade(currentSubject) Promise❬void❭
+        +manualUpdate(data, subjectName) Promise❬void❭
+        -getField(name) DynamicElement
+        +getId() string
+        +setEnabled() void
+        +isEnabled() boolean
     }
 
     class dynamicForms {
-        -Map~String, DynamicForm~ formCollection
+        -Map❬String DynamicForm❭ formCollection
         +makeForm(formConfiguration) DynamicForm
         +getForm(id) DynamicForm
     }
 
+    note for dynamicForms "Library entrypoint"
+
     class DynamicElement {
-        -JSON config
-        -node htmlElement
+        -FieldConfiguration config
+        -NodeList htmlElement
         -string name
         -JSON defaultConfig
         +get() string
         +set(value) string
         +clear()
         +update(data, subjectName)
-        +beforeUpdate(data, subjectName) boolean
-        +updateStatus(data, subjectName)
-        +afterUpdate(data, subjectName)
+        #beforeUpdate(data, subjectName) boolean
+        #updateStatus(data, subjectName) Promise❬void❭
+        #afterUpdate(data, subjectName) boolean
     }
 
-    class DynamicDropdown {
+    class DynamicSelect {
         -string method
         +postProcessData(data) object[]
-        +saveData(data) object[]
+        +saveData(data) void
     }
 
     DynamicForm <.. dynamicForms
     DynamicForm o-- DynamicElement
-    DynamicElement <|-- DynamicDropdown
+    DynamicElement <|-- DynamicSelect
     DynamicElement <|-- DynamicCheckbox
     DynamicElement <|-- DynamicRadio
diff --git a/docs/configurations/fields-configuration.md b/docs/configurations/fields-configuration.md
@@ -5,36 +5,57 @@ Just specify fields with custom behavior as the standard ones will be discovered
 
 Here's a complete single field configuration. You just need to specify the attributes you need, the other will have default values.
 
-```javascript
-let fieldConfiguration = {
-    name: 'fieldName',
-    io: {  // Customize field input/output
-        event: 'change',
-        get: (htmlElement) => { },
-        set: (htmlElement, value) => { },
-    },
-    fetch: { // Remote call options
-        method: 'GET',
-        makeUrl: (data) => { },
-        makeBody: (data) => { }, // JSON.stringify, formData, text...
-        fullFetchConfig: {}, // Fetch complete configuration
-    },
-    behavior: {
-        clear: (htmlElement) => { }, // Clear field from its content
-        beforeUpdate: (htmlElement, data, subjectName) => { return true; }, // Executed before the remote call. Return false to block the update
-        updateStatus: (htmlElement, data, subjectName) => { },
-        afterUpdate: (htmlElement, data, subjectName) => { } // Executed after the remote call
-    },
-    dropdown: { // Only for dropdown elements
-        postProcessData: (htmlElement, data) => { }, // Process data retrieved by remote call
-        saveData: (htmlElement, data) => { }, // Save data in html (es: <option value="value">'text'</option>)
-        clearOnParentVoid: true, // True (default) to clear field content when subject is empty; false to trigger a remote call
-    },
-    checkbox: { // Only for checkbox elements
-        booleanValue: true // True (default) to get element's value as boolean, based on the checked property; false to get the value property
-    }
-};
-```
+=== "Generic element"
+    ```javascript
+    const fieldConfiguration = {
+        name: 'fieldName',
+        io: {  // Customize field input/output
+            event: 'change',
+            get: (htmlElement) => { },
+            set: (htmlElement, value) => { },
+        },
+        fetch: { // Remote call options
+            method: 'GET',
+            makeUrl: (data) => { },
+            makeBody: (data) => { }, // JSON.stringify, formData, text...
+            fullFetchConfig: {}, // Fetch complete configuration
+        },
+        behavior: {
+            clear: (htmlElement) => { }, // Clear field from its content
+            beforeUpdate: (htmlElement, data, subjectName) => { return true; }, // Executed before the remote call. Return false to block the update
+            updateStatus: (htmlElement, data, subjectName) => { },
+            afterUpdate: (htmlElement, data, subjectName) => { } // Executed after the remote call
+        }
+    };
+    ```
+
+=== "Select element"
+    ```javascript
+    const fieldConfiguration = {
+        name: 'fieldName',
+        io: /* ... */,
+        fetch: /* ... */,
+        behavior: /* ... */,
+        select: { // Only for select elements
+            postProcessData: (htmlElement, data) => { }, // Process data retrieved by remote call
+            saveData: (htmlElement, data) => { }, // Manually save data in html (e.g. creating `<option value="value">'text'</option>` nodes)
+            clearOnParentVoid: true, // True (default) to clear field content when subject is empty; false to trigger a remote call
+        }
+    };
+    ```
+
+=== "Checkbox element"
+    ```javascript
+    const fieldConfiguration = {
+        name: 'fieldName',
+        io: /* ... */,
+        fetch: /* ... */,
+        behavior: /* ... */,
+        checkbox: { // Only for checkbox elements
+            booleanValue: true // True (default) to get element's value as boolean, based on the checked property; false to get the value property
+        }
+    };
+    ```
 
 ## `name`*
 The html element name.
@@ -48,7 +69,7 @@ Object which groups properties related to field input and output.
 
 
 ### `event`
-The html event which symbolize the Subject's status change (e.g. *change* for a dropdown, *click* for a checkbox...).
+The html event which symbolize the Subject's status change (e.g. *change* for a select, *click* for a checkbox...).
 
 It is used to put an event listener which will notify Subject's Observers.
 
@@ -82,9 +103,9 @@ Returns
 ## `fetch`*
 Object which groups properties related to remote calls.
 
-**Available only for *DynamicDropdown* instances** (select-option like fields).
+**Available only for *DynamicSelect* instances** (select-option like fields).
 
-**Required only if the dropdown element is an observer** (it will be updated for every observed subject change), unless you specify a new *updateStatus* function.
+**Required only if the select element is an observer** (it will be updated for every observed subject change), unless you specify a new *updateStatus* function.
 
 ### `method`
 It's the *http request method* (or verb).
@@ -137,7 +158,7 @@ Returns
 Object which groups properties related to field behavior.
 
 ### `clear (htmlElement)`
-Function to unset the field's current value. Sometimes it is used to clear the field from its content (for input and dropdown types).
+Function to unset the field's current value. Sometimes it is used to clear the field from its content (for input and select types).
 
 Parameters
 
@@ -151,7 +172,7 @@ Returns
 ### `beforeUpdate (htmlElement, data, subjectName)`
 Method called before triggering the field's status update. If return value is *false*, the update is aborted.
 
-Default behavior: nothing. For **DynamicDropdown** elements it clear the field content if *clearOnParentVoid* conditions are satisfied.
+Default behavior: nothing. For **DynamicSelect** elements it clear the field content if *clearOnParentVoid* conditions are satisfied.
 
 Parameters
 
@@ -166,7 +187,7 @@ Returns
 ### `updateStatus (htmlElement, data, subjectName)`
 Method to update the field status. It is useful to update the field's attributes (*display*, *disabled*...) and content.
 
-Default behavior: nothing. For **DynamicDropdown** elements it makes a remote call (using *fetch*), retrieves new date and saves it as *select* new content (*option*).
+Default behavior: nothing. For **DynamicSelect** elements it makes a remote call (using *fetch*), retrieves new date and saves it as *select* new content (*option*).
 
 Parameters
 
@@ -176,7 +197,7 @@ Parameters
 
 Returns
 
-- {`void`}
+- {`Promise<void>`}
 
 ### `afterUpdate (htmlElement, data, subjectName)`
 Method called after triggering the field's status update.
@@ -191,7 +212,7 @@ Returns
 
 - {`boolean`} (currently) unused
 
-## `dropdown`
+## `select`
 Object which groups properties related to select-option elements.
 
 ### `postProcessData (htmlElement, data)`
@@ -209,7 +230,7 @@ Returns
 ### `saveData (htmlElement, data)`
 Function to phisically save (post-processed) data retrieved by a remote call as html.
 
-Default behavior: saves data as *option* html elements using *value* and *test* properties.
+Default behavior: saves data as *option* html elements using *value* and *text* properties, creating also empty option if they are not present in retrieved data.
 
 Parameters
 
@@ -218,7 +239,7 @@ Parameters
 
 Returns
 
-- {`JSON | object[]`} post-processed data (not used)
+- {`void`}
 
 ### `clearOnParentVoid`
 Property which (when `true`) tells to clear field content when subject value is empty instead of triggering a remote call (when `false`).

diff --git a/docs/configurations/init-rules.md b/docs/configurations/init-rules.md
@@ -18,4 +18,4 @@ The field value. It can be any primitive value.
 
 This attribute has 2 purposes:
 - It's passed to all other fields during initialisation; 
-- It will be the value automatically selected as the current field value; if the field type is *Dropdown*, the value must be available to be selected.
+- It will be the value automatically selected as the current field value; if the field type is *select*, the value must be available to be selected.
diff --git a/docs/dev/contribute.md b/docs/dev/contribute.md
@@ -34,54 +34,56 @@ Here is the UML Class Diagram to help you understand the project structure.
 classDiagram
 
     class DynamicForm {
-        JSON config
-        node htmlElement
-        Map~String, DynamicElement~ entities
+        FormConfiguration config
+        HTMLFormElement htmlElement
+        Map❬String DynamicElement❭ entities
         boolean debug
         boolean enabled
         json elementToClassMapping
 
-        ready()
-        notify(subjectName)
-        fetchAllParameters(rule) object
-        clearCascade(currentSubject)
-        manualUpdate(data, subjectName)
-        getField(name) DynamicElement
-        getId() string
-        setEnabled() void
-        isEnabled() boolean
+        +ready() Promise❬void❭
+        +notify(subjectName) Promise❬void❭
+        -fetchAllParameters(rule) object
+        -clearCascade(currentSubject) Promise❬void❭
+        +manualUpdate(data, subjectName) Promise❬void❭
+        -getField(name) DynamicElement
+        +getId() string
+        +setEnabled() void
+        +isEnabled() boolean
     }
 
     class dynamicForms {
-        -Map~String, DynamicForm~ formCollection
+        -Map❬String DynamicForm❭ formCollection
         +makeForm(formConfiguration) DynamicForm
         +getForm(id) DynamicForm
     }
 
+    note for dynamicForms "Library entrypoint"
+
     class DynamicElement {
-        -JSON config
-        -node htmlElement
+        -FieldConfiguration config
+        -NodeList htmlElement
         -string name
         -JSON defaultConfig
         +get() string
         +set(value) string
         +clear()
         +update(data, subjectName)
-        +beforeUpdate(data, subjectName) boolean
-        +updateStatus(data, subjectName)
-        +afterUpdate(data, subjectName)
+        #beforeUpdate(data, subjectName) boolean
+        #updateStatus(data, subjectName) Promise❬void❭
+        #afterUpdate(data, subjectName) boolean
     }
 
-    class DynamicDropdown {
+    class DynamicSelect {
         -string method
         +postProcessData(data) object[]
-        +saveData(data) object[]
+        +saveData(data) void
     }
 
     DynamicForm <.. dynamicForms
     DynamicForm o-- DynamicElement
-    DynamicElement <|-- DynamicDropdown
+    DynamicElement <|-- DynamicSelect
     DynamicElement <|-- DynamicCheckbox
     DynamicElement <|-- DynamicRadio
 
-```
+```