From fabf83641eb85bebe320ac906ce199ab67c7dbef Mon Sep 17 00:00:00 2001
From: Maicol Battistini <maicolbattistini@live.it>
Date: Mon, 4 Oct 2021 22:56:26 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E2=9C=A8=20Aggiunta=20creazi?=
 =?UTF-8?q?one=20di=20un=20nuovo=20record?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 resources/js/Components/Pages/RecordsPage.jsx | 23 ++++++++++---
 resources/js/Models/Model.js                  |  1 -
 resources/js/utils.js                         | 33 +++++++++++++++++++
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 8d1995671..778e76512 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
         "@material/mwc-menu": "^0.25.1",
         "@material/mwc-ripple": "^0.25.1",
         "@material/mwc-select": "^0.25.1",
+        "@material/mwc-snackbar": "^0.25.1",
         "@material/mwc-textarea": "^0.25.1",
         "@material/mwc-textfield": "^0.25.1",
         "@material/mwc-top-app-bar": "^0.25.1",
diff --git a/resources/js/Components/Pages/RecordsPage.jsx b/resources/js/Components/Pages/RecordsPage.jsx
index d597e5478..f2a2487f8 100644
--- a/resources/js/Components/Pages/RecordsPage.jsx
+++ b/resources/js/Components/Pages/RecordsPage.jsx
@@ -1,11 +1,13 @@
 import '@material/mwc-dialog';
 import '@material/mwc-fab';
+import '@material/mwc-snackbar';
 
 import type {TextFieldInputMode, TextFieldType} from '@material/mwc-textfield/mwc-textfield-base';
 import collect from 'collect.js';
 import {Children} from 'mithril';
 
 import {Model} from '../../Models';
+import {showSnackbar} from '../../utils';
 import DataTable from '../DataTable/DataTable.jsx';
 import TableBody from '../DataTable/TableBody.jsx';
 import TableCell from '../DataTable/TableCell.jsx';
@@ -78,7 +80,8 @@ export default class RecordsPage extends Page {
 
   sections: { [string]: SectionT } | [SectionT];
 
-  recordDialog: Children = <mwc-dialog heading={this.__('Aggiungi nuovo record')}>
+  recordDialog: Children = <mwc-dialog id="add-record-dialog"
+                                       heading={this.__('Aggiungi nuovo record')}>
     <form method="PUT">
       {(() => {
         const sections = collect(this.sections);
@@ -179,12 +182,24 @@ export default class RecordsPage extends Page {
     super.oncreate(vnode);
 
     $('mwc-fab#add-record')
-      .on('click', function () {
-        const dialog = $(this)
+      .on('click', (clickEvent) => {
+        const dialog = $(clickEvent.delegateTarget)
           .next('mwc-dialog#add-record-dialog');
 
         dialog.find('form')
-          .attr('method', 'PUT');
+          .attr('method', 'PUT')
+          .off()
+          .on('submit', async (event) => {
+            event.preventDefault();
+            const fd = new FormData(event.delegateTarget);
+            // noinspection JSUnresolvedFunction
+            const instance = await this.model.create(fd);
+            if (instance.id) {
+              this.rows.push(instance.all());
+              m.redraw();
+              await showSnackbar(this.__('Record creato'), 2.5);
+            }
+          });
         dialog.find('mwc-textfield')
           .val('');
 
diff --git a/resources/js/Models/Model.js b/resources/js/Models/Model.js
index af321278e..fd76fb2cc 100644
--- a/resources/js/Models/Model.js
+++ b/resources/js/Models/Model.js
@@ -2,7 +2,6 @@ import BaseModel from 'javel';
 import {snakeCase} from 'lodash';
 import redaxios from 'redaxios';
 
-// noinspection JSUnusedGlobalSymbols
 export default class Model extends BaseModel {
   urlPath: string;
 
diff --git a/resources/js/utils.js b/resources/js/utils.js
index d5c1ca8ba..d0522c07a 100644
--- a/resources/js/utils.js
+++ b/resources/js/utils.js
@@ -15,3 +15,36 @@ export function containsHTML(string_: string): boolean {
   // eslint-disable-next-line unicorn/better-regex
   return /<[a-z][\s\S]*>/i.test(string_);
 }
+
+/**
+ * Show a snackbar
+ */
+export async function showSnackbar(message: string, duration: number, acceptText = 'OK', cancelText = 'Annulla'): Promise<boolean> {
+  const snackbar = document.createElement('mwc-snackbar');
+  snackbar.label = message;
+  snackbar.timeoutMs = duration;
+  if (acceptText) {
+    const button = document.createElement('mwc-button');
+    button.label = acceptText;
+    button.slot = 'action';
+    snackbar.append(button);
+  }
+  if (cancelText) {
+    const button = document.createElement('mwc-button');
+    button.label = cancelText;
+    button.slot = 'cancel';
+    snackbar.append(button);
+  }
+  document.body.append(snackbar);
+  let resolve: (value?: boolean) => void;
+  const reasonPromise = new Promise()((response) => {
+    resolve = response;
+  });
+  snackbar.addEventListener('MDCSnackbar:closed', (event) => {
+    resolve(event?.detail?.reason === 'action' ?? false);
+  });
+  snackbar.open();
+  const acceptOrReject = await reasonPromise;
+  snackbar.remove();
+  return acceptOrReject;
+}