feat(editor): add Composite Editor modal dialog (#76)

* feat(editor): add Composite Editor modal dialog - Composite Editor reuses the grid editors from the column definitions and present them all into a single form displayed in a modal dialog window, it also carries the editor validators and everything else. ### Feature Quick recap, this PR adds the following 4 options all available via a Composite Editor Modal, it allows to do: 1. Create New Item 2. Edit Current Item (active cell/row) 3. Mass Update Changes 4. Mass Selection Changes (on Selected Rows)
ghiscoding · Sep 15, 2020 · bba0b80 · bba0b80
1 parent bead2fe
commit bba0b80
Show file tree

Hide file tree

Showing 154 changed files with 9,208 additions and 2,692 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -62,6 +62,8 @@
     "@typescript-eslint/no-this-alias": "error",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars-experimental": "error",
     "@typescript-eslint/prefer-for-of": "off",
     "@typescript-eslint/prefer-function-type": "error",
     "@typescript-eslint/prefer-namespace-keyword": "error",
@@ -139,6 +141,7 @@
     "no-unsafe-finally": "error",
     "no-unused-expressions": "off",
     "no-unused-labels": "error",
+    "no-unused-vars": "off",
     "no-var": "error",
     "object-shorthand": "error",
     "one-var": [
@@ -167,4 +170,4 @@
     "use-isnan": "error",
     "valid-typeof": "off"
   }
-}
+}
diff --git a/.gitignore b/.gitignore
@@ -20,7 +20,6 @@
 
 # IDE - VSCode
 .vscode/*
-!.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -160,8 +160,8 @@ yarn run test:watch
   - [x] should support `enableRenderHtml` (same as Select Filter)
   - [x] should support instance callbacks (`_renderItem`)
   - [x] try to copy SF lookup component look & feel ([SF Lookup](https://www.lightningdesignsystem.com/components/lookups/#site-main-content))
+- [x] Mutiple-Select is not showing caret icon to represent a dropdown in SF
+- [x] Check if Date Picker works correctly with new latest version of `Flatpickr`
 - [ ] See if we can get `DOM Purify` to work in SF, else keep the custom sanitizer
 - [ ] See if we can get all the vanilla-grid-bundle `instances` as `readonly` class members
 - [ ] See if adding `lerna-changelog` make sense
-- [ ] Mutiple-Select is not showing caret icon to represent a dropdown in SF 
-- [ ] Check if Date Picker works correctly with new latest version of `Flatpickr`
diff --git a/docs/app.4c7e5103b75b098aec5d.bundle.js b/docs/app.4c7e5103b75b098aec5d.bundle.js
diff --git a/docs/app.4c7e5103b75b098aec5d.bundle.map b/docs/app.4c7e5103b75b098aec5d.bundle.map
diff --git a/docs/app.523343e25b1b252315f4.bundle.css → docs/app.c10091e04e32aeeff903.bundle.css b/docs/app.523343e25b1b252315f4.bundle.css → docs/app.c10091e04e32aeeff903.bundle.css
diff --git a/docs/app.cc5b4c8f07181be17251.bundle.js b/docs/app.cc5b4c8f07181be17251.bundle.js
diff --git a/docs/app.cc5b4c8f07181be17251.bundle.map b/docs/app.cc5b4c8f07181be17251.bundle.map
diff --git a/docs/assets/i18n/en.json b/docs/assets/i18n/en.json
@@ -1,5 +1,8 @@
 {
   "ALL_SELECTED": "All Selected",
+  "ALL_X_RECORDS_SELECTED": "All {{x}} records selected",
+  "APPLY_MASS_UPDATE": "Apply Mass Update",
+  "APPLY_TO_SELECTION": "Update Selection",
   "CANCEL": "Cancel",
   "CLEAR_ALL_FILTERS": "Clear all Filters",
   "CLEAR_ALL_GROUPING": "Clear all Grouping",
@@ -44,6 +47,7 @@
   "TOGGLE_FILTER_ROW": "Toggle Filter Row",
   "TOGGLE_PRE_HEADER_ROW": "Toggle Pre-Header Row",
   "X_OF_Y_SELECTED": "# of % selected",
+  "X_OF_Y_MASS_SELECTED": "{{x}} of {{y}} selected",
   "BILLING": {
     "ADDRESS": {
       "STREET": "Billing Address Street",

diff --git a/docs/assets/i18n/fr.json b/docs/assets/i18n/fr.json
@@ -1,5 +1,8 @@
 {
   "ALL_SELECTED": "Tout sélectionnés",
+  "ALL_X_RECORDS_SELECTED": "Sur tous les {{x}} éléments",
+  "APPLY_MASS_UPDATE": "Mettre à jour en masse",
+  "APPLY_TO_SELECTION": "Mettre à jour la sélection",
   "CANCEL": "Annuler",
   "CLEAR_ALL_FILTERS": "Supprimer tous les filtres",
   "CLEAR_ALL_GROUPING": "Supprimer tous les groupes",
@@ -44,6 +47,7 @@
   "TOGGLE_FILTER_ROW": "Basculer la ligne des filtres",
   "TOGGLE_PRE_HEADER_ROW": "Basculer la ligne de pré-en-tête",
   "X_OF_Y_SELECTED": "# de % sélectionnés",
+  "X_OF_Y_MASS_SELECTED": "{{x}} de {{y}} sélectionnés",
   "BILLING": {
     "ADDRESS": {
       "STREET": "Adresse de facturation",

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.523343e25b1b252315f4.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.4c7e5103b75b098aec5d.bundle.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.c10091e04e32aeeff903.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.cc5b4c8f07181be17251.bundle.js"></script></body></html>
diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/en.json b/examples/webpack-demo-vanilla-bundle/assets/i18n/en.json
@@ -1,5 +1,8 @@
 {
   "ALL_SELECTED": "All Selected",
+  "ALL_X_RECORDS_SELECTED": "All {{x}} records selected",
+  "APPLY_MASS_UPDATE": "Apply Mass Update",
+  "APPLY_TO_SELECTION": "Update Selection",
   "CANCEL": "Cancel",
   "CLEAR_ALL_FILTERS": "Clear all Filters",
   "CLEAR_ALL_GROUPING": "Clear all Grouping",
@@ -44,6 +47,7 @@
   "TOGGLE_FILTER_ROW": "Toggle Filter Row",
   "TOGGLE_PRE_HEADER_ROW": "Toggle Pre-Header Row",
   "X_OF_Y_SELECTED": "# of % selected",
+  "X_OF_Y_MASS_SELECTED": "{{x}} of {{y}} selected",
   "BILLING": {
     "ADDRESS": {
       "STREET": "Billing Address Street",

diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json b/examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json
@@ -1,5 +1,8 @@
 {
   "ALL_SELECTED": "Tout sélectionnés",
+  "ALL_X_RECORDS_SELECTED": "Sur tous les {{x}} éléments",
+  "APPLY_MASS_UPDATE": "Mettre à jour en masse",
+  "APPLY_TO_SELECTION": "Mettre à jour la sélection",
   "CANCEL": "Annuler",
   "CLEAR_ALL_FILTERS": "Supprimer tous les filtres",
   "CLEAR_ALL_GROUPING": "Supprimer tous les groupes",
@@ -44,6 +47,7 @@
   "TOGGLE_FILTER_ROW": "Basculer la ligne des filtres",
   "TOGGLE_PRE_HEADER_ROW": "Basculer la ligne de pré-en-tête",
   "X_OF_Y_SELECTED": "# de % sélectionnés",
+  "X_OF_Y_MASS_SELECTED": "{{x}} de {{y}} sélectionnés",
   "BILLING": {
     "ADDRESS": {
       "STREET": "Adresse de facturation",

diff --git a/examples/webpack-demo-vanilla-bundle/src/app-routing.ts b/examples/webpack-demo-vanilla-bundle/src/app-routing.ts
@@ -15,8 +15,10 @@ export class AppRouting {
       { route: 'example09', name: 'example09', title: 'Example09', moduleId: './examples/example09' },
       { route: 'example10', name: 'example10', title: 'Example10', moduleId: './examples/example10' },
       { route: 'example11', name: 'example11', title: 'Example11', moduleId: './examples/example11' },
+      { route: 'example12', name: 'example12', title: 'Example12', moduleId: './examples/example12' },
       { route: 'example50', name: 'example50', title: 'Example50', moduleId: './examples/example50' },
       { route: 'example51', name: 'example51', title: 'Example51', moduleId: './examples/example51' },
+      { route: 'icons', name: 'icons', title: 'icons', moduleId: './examples/icons' },
       { route: '', redirect: 'example01' },
       { route: '**', redirect: 'example01' }
     ];

diff --git a/examples/webpack-demo-vanilla-bundle/src/app.html b/examples/webpack-demo-vanilla-bundle/src/app.html
@@ -34,7 +34,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
       <a class="navbar-item" href="//github.com/ghiscoding/slickgrid-universal/wiki" target="_blank">
         Documentation
       </a>
-
+      <a class="navbar-item" onclick.delegate="loadRoute('icons')">
+        Material Design Icons
+      </a>
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
           Examples
@@ -64,6 +66,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example11')">
             Example11 - Batch Editing
           </a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example12')">
+            Example12 - Item Editor Modal
+          </a>
           <!--
           <hr class="navbar-divider">
           <a class="navbar-item" onclick.delegate="loadRoute('example50')">Example50 - SE Tree Data</a>
@@ -76,4 +81,4 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
 
 <div class="demo-container container is-fluid" style="padding-top: 20px">
   <view-route></view-route>
-</div>
+</div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/app.ts b/examples/webpack-demo-vanilla-bundle/src/app.ts
@@ -41,12 +41,12 @@ export class App {
   }
 
   disposeAll() {
-    this.renderer.dispose();
+    this.renderer?.dispose();
 
     for (const vmKey of Object.keys(this.viewModelObj)) {
       const viewModel = this.viewModelObj[vmKey];
       if (viewModel && viewModel.dispose) {
-        viewModel.dispose();
+        viewModel?.dispose();
         delete window[vmKey];
         delete this.viewModelObj[vmKey];
       }

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example03.scss
@@ -3,10 +3,11 @@ $control-height: 2.4em;
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
 
-.slick-groupby-remove.mdi-close {
-  /** 1. use `filter` color */
-  // filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);
+/** use following styling of the Close icon or just use .icon-danger as defined in the example code */
+// .slick-groupby-remove.mdi-close {
+//   /** 1. use `filter` color */
+//   // filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);
 
-  /** 2. or use the SASS @mixin that will produce the `filter` color */
-  @include recolor(#ff0000, 0.9); // convert red color into `filter` with opacity of 0.9
-}
+//   /** 2. or use the SASS @mixin that will produce the `filter` color */
+//   @include recolor(#ff0000, 0.9); // convert red color into `filter` with opacity of 0.9
+// }
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -299,7 +299,7 @@ export class Example3 {
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by the column',
         // groupIconCssClass: 'fa fa-outdent',
-        deleteIconCssClass: 'fa fa-times mdi mdi-close',
+        deleteIconCssClass: 'mdi mdi-close color-danger',
         onGroupChanged: (e, args) => this.onGroupChanged(args),
         onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension,
       },

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example04.scss
@@ -1,2 +1 @@
-$icon-color-mdi-close: #363636;
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example05.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example05.scss
@@ -1,6 +1 @@
-// You can change the SVG color using their associated SASS $icon-color-mdi-XYZ
-$icon-width-mdi-plus: 14px;
-$icon-width-mdi-arrow-collapse: 14px;
-$icon-width-mdi-arrow-expand: 14px;
-
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example06.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example06.scss
@@ -1,16 +1,3 @@
-// You can change the SVG color using their associated SASS $icon-color-mdi-XYZ
-$icon-width-mdi-plus: 14px;
-$icon-width-mdi-arrow-collapse: 14px;
-$icon-width-mdi-arrow-expand: 14px;
-$icon-width-mdi-close-thick: 12px;
-
-/* You can change the SASS color via the associated variable, BUT it's better to use the recolor @mixin shown down below */
-// $icon-color-mdi-file-pdf-outline: #f14668;
-// $icon-color-mdi-file-music-outline: #3298dc;
-// $icon-color-mdi-file-excel-outline: #1E9F75;
-// $icon-color-mdi-folder: orange;
-// $icon-color-mdi-folder-open: #ffa500;
-
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 
 .icon.mdi-file-pdf-outline {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -38,7 +38,7 @@ export class Example7 {
       {
         id: 'duration', name: 'Duration', field: 'duration', sortable: true,
         editor: { model: Editors.text, alwaysSaveOnEnterKey: true, },
-        formatter: (row: number, cell: number, value: any) => value > 1 ? `${value} days` : `${value} day`,
+        formatter: (_row: number, _cell: number, value: any) => value > 1 ? `${value} days` : `${value} day`,
       },
       { id: 'percentComplete', name: '% Complete', field: 'percentComplete', sortable: true, editor: { model: Editors.slider, minValue: 0, maxValue: 100, }, },
       {
@@ -142,7 +142,7 @@ export class Example7 {
     return true;
   }
 
-  onMoveRows(e, args) {
+  onMoveRows(_e, args) {
     const extractedRows = [];
     const rows = args.rows;
     const insertBefore = args.insertBefore;

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example10.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example10.scss
@@ -1,2 +1 @@
-$icon-color-mdi-close: #363636;
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss
@@ -3,3 +3,7 @@ $autocomplete-max-height: 250px;
 
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
+
+.unsaved-editable-field {
+  background-color: #fbfdd1 !important;
+}