feat: ✨ Aggiunto supporto a select

Migliorata gestione dei tipi di dato (gestiti ora in file separati)

resources/js/Components/Pages/RecordsPage.jsx

@@ -3,15 +3,16 @@ import '@material/mwc-dialog';
 import '@material/mwc-fab';
 import '@material/mwc-snackbar';
 
-import type {
-  TextFieldInputMode,
-  TextFieldType
-} from '@material/mwc-textfield/mwc-textfield-base';
 import type {Cash} from 'cash-dom/dist/cash';
 import collect, {Collection} from 'collect.js';
 import {Children} from 'mithril';
 
 import {Model} from '../../Models';
+import type {
+  SelectT,
+  TextAreaT,
+  TextFieldT
+} from '../../types';
 import {
   isFormValid,
   showSnackbar
@@ -35,49 +36,11 @@ export type ColumnT = {
   type?: 'checkbox' | 'numeric'
 }
 
-export type FieldT = {
-  id?: string,
-  value?: string,
-  type?: TextFieldType,
-  label?: string,
-  placeholder?: string,
-  prefix?: string,
-  suffix?: string,
-  icon?: string,
-  iconTrailing?: string,
-  disabled?: boolean,
-  charCounter?: boolean,
-  outlined?: boolean,
-  helper?: string,
-  helperPersistent?: boolean | string,
-  required?: boolean,
-  minLength?: number,
-  maxLength?: number,
-  validationMessage?: string,
-  pattern?: string,
-  min?: number | string,
-  max?: number | string,
-  size?: number | null,
-  step?: number | null,
-  autoValidate?: boolean,
-  validity?: ValidityState,
-  willValidate?: boolean,
-  validityTransform?: (value: string, nativeValidity: ValidityState) => Partial<ValidityState> |
-    null,
-  validateOnInitialRender?: boolean,
-  name?: string,
-  inputMode?: TextFieldInputMode,
-  readOnly?: boolean,
-  autocapitalize: 'on' | 'off' | 'sentences' | 'none' | 'words' | 'characters',
-  endAligned?: boolean,
-  ...
-};
-
-export type SectionT = FieldT[] | {
+export type SectionT = {
   id?: string,
   heading?: string,
   columns?: number,
-  fields: FieldT[] | { [string]: FieldT }
+  fields: TextFieldT[] | TextAreaT | SelectT[] | { [string]: TextFieldT | TextAreaT | SelectT }
 };
 
 export type ColumnsT = { [string]: [string] | ColumnT } | ColumnT[];
@@ -135,7 +98,8 @@ export class RecordsPage extends Page {
     return collect(this.columns)
       .map(
         (column: ColumnT | string, id: string) => (
-          <TableColumn id={id} key={id} {...((typeof column === 'object') ? column : {})} sortable filterable>
+          <TableColumn id={id} key={id} {...((typeof column === 'object') ? column : {})} sortable
+                       filterable>
             {typeof column === 'string' ? column : column.title}
           </TableColumn>
         )
@@ -177,8 +141,8 @@ export class RecordsPage extends Page {
     const dialog = $('mwc-dialog#add-record-dialog');
 
     // eslint-disable-next-line sonarjs/no-duplicate-string
-    dialog.find('text-field, text-area')
-      .each((index, field: TextField | TextArea) => {
+    dialog.find('text-field, text-area, select')
+      .each((index, field: TextFieldT | TextAreaT | SelectT) => {
         field.value = instance[field.id];
       });
 
@@ -229,11 +193,16 @@ export class RecordsPage extends Page {
                       const fields = collect(section.fields);
 
                       return fields.map((field, fieldIndex) => (
-                          <mwc-layout-grid-cell key={fieldIndex} span={12 / (section.columns ?? 3)}>
-                            <text-field {...field} id={field.id ?? fieldIndex}
-                                        name={field.name ?? field.id ?? fieldIndex}
-                                        data-default-value={field.value ?? ''}/>
-                          </mwc-layout-grid-cell>))
+                        <mwc-layout-grid-cell key={fieldIndex}
+                                              span={12 / (section.columns ?? 3)}>
+                          {m(field.elementType, {
+                            ...field,
+                            id: field.id ?? fieldIndex,
+                            name: field.name ?? field.id ?? fieldIndex,
+                            'data-default-value': field.value ?? field.selected
+                          })}
+                        </mwc-layout-grid-cell>
+                      ))
                         .toArray();
                     })()}
                   </mwc-layout-grid>
@@ -293,7 +262,7 @@ export class RecordsPage extends Page {
     const form: Cash = dialog.find('form');
 
     fab.on('click', () => {
-      form.find('text-field, text-area')
+      form.find('text-field, text-area, material-select')
         .each((index, field) => {
           field.value = $(field)
             .data('default-value');
@@ -323,7 +292,7 @@ export class RecordsPage extends Page {
         // eslint-disable-next-line new-cap
         const instance: Model = new this.model();
 
-        form.find('text-field, text-area')
+        form.find('text-field, text-area, material-select')
           .each((index, field: TextField | TextArea) => {
             instance[field.id] = field.value;
           });

resources/js/index.js

@@ -1,5 +1,6 @@
 export * from './Components';
 export * from './Models';
+export * from './types';
 export * from './utils';
 export * from './Views';
 export * from './WebComponents';

resources/js/types.js

@@ -0,0 +1,73 @@
+import {ListItemBase} from '@material/mwc-list/mwc-list-item-base';
+import type {
+  TextAreaCharCounter,
+  TextFieldInputMode,
+  TextFieldType
+} from '@material/mwc-textfield';
+
+export type FieldT = {
+  id?: string,
+  name?: string,
+  value?: string,
+  label?: string,
+  outlined?: boolean,
+  helper?: string,
+  icon?: string,
+  placeholder?: string,
+  disabled?: boolean,
+  required?: boolean,
+  validity?: ValidityState,
+  validityTransform?: (value: string, nativeValidity: ValidityState) => Partial<ValidityState> |
+    null,
+  validateOnInitialRender?: boolean,
+  validationMessage?: string
+}
+
+export type TextFieldT = FieldT | {
+  type?: TextFieldType,
+  prefix?: string,
+  suffix?: string,
+  iconTrailing?: string,
+  charCounter?: boolean,
+  helperPersistent?: boolean | string,
+  minLength?: number,
+  maxLength?: number,
+  pattern?: string,
+  min?: number | string,
+  max?: number | string,
+  size?: number | null,
+  step?: number | null,
+  autoValidate?: boolean,
+  willValidate?: boolean,
+  name?: string,
+  inputMode?: TextFieldInputMode,
+  readOnly?: boolean,
+  autocapitalize: 'on' | 'off' | 'sentences' | 'none' | 'words' | 'characters',
+  endAligned?: boolean,
+  elementType: 'text-field',
+  ...
+};
+
+export type TextAreaT = FieldT | {
+  rows?: number,
+  cols?: number,
+  type?: TextFieldType,
+  iconTrailing?: string,
+  charCounter?: boolean | TextAreaCharCounter,
+  willValidate?: boolean,
+  helperPersistent?: boolean | string,
+  maxLength?: number,
+  elementType: 'text-area',
+  ...
+};
+
+export type SelectT = FieldT | {
+  multiple?: boolean,
+  naturalMenuWidth?: boolean,
+  fixedMenuPosition?: boolean,willValidate?: boolean,
+  elementType: 'material-select',
+  selected?: ListItemBase | null,
+  items?: ListItemBase[],
+  index?: number,
+  ...
+};