mirror of
https://github.com/devcode-it/openstamanager.git
synced 2025-02-23 14:57:46 +01:00
feat(frontend): ✨ Aggiunta creazione di un nuovo record
This commit is contained in:
parent
51505d43e9
commit
fabf83641e
@ -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",
|
||||
|
@ -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('');
|
||||
|
||||
|
1
resources/js/Models/Model.js
vendored
1
resources/js/Models/Model.js
vendored
@ -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;
|
||||
|
||||
|
33
resources/js/utils.js
vendored
33
resources/js/utils.js
vendored
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user