loviuz/openstamanager
loviuz/openstamanager
1
0
Fork 0
mirror of https://github.com/devcode-it/openstamanager.git synced 2025-02-24 23:37:51 +01:00
Code Issues Releases Activity

chore(deps): Sostituito componente LayoutGrid custom con Web Component

Browse Source
This commit is contained in:
Maicol Battistini 2021-11-11 18:32:07 +01:00
parent 4b6a3d599b
commit 664afad32e
No known key found for this signature in database
GPG Key ID: 4FDB0F87CDB1D34A
7 changed files with 45 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/Components/Grid/Cell.jsx
View File

@ -1,32 +0,0 @@
import {type ClassComponent} from 'mithril';
import Component from '../Component.jsx';
export default class Cell extends Component implements ClassComponent<{
align?: string;
columnspan?: number,
'columnspan-desktop'?: number,
'columnspan-tablet'?: number,
'columnspan-phone'?: number,
order?: number,
}> {
view(vnode) {
const spans = [];
for (const device of ['desktop', 'tablet', 'phone']) {
const key = `columnspan-${device}`;
if (this.attrs.has(key)) {
spans.push(`mdc-layout-grid__cell--span-${this.attrs.get(key)}-${device}`);
}
}
this.attrs.addClassNames('mdc-layout-grid__cell', {
[`mdc-layout-grid__cell--span-${this.attrs.get('columnspan')}`]: this.attrs.has('columnspan'),
[`mdc-layout-grid__cell--order-${this.attrs.get('order')}`]: this.attrs.has('order'),
[`mdc-layout-grid__cell--align-${this.attrs.get('align')}`]: this.attrs.has('align')
}, spans);
return <div {...this.attrs.all()}>
{vnode.children}
</div>;
}
}

19
resources/js/Components/Grid/LayoutGrid.jsx
View File

@ -1,19 +0,0 @@
import {type ClassComponent} from 'mithril';
import Component from '../Component.jsx';
export default class LayoutGrid extends Component implements ClassComponent<{
align?: string,
fixed?: boolean
}> {
view(vnode) {
this.attrs.addClassNames('mdc-layout-grid', {
'mdc-layout-grid--fixed-column-width': this.attrs.has('fixed'),
[`mdc-layout-grid--align-${this.attrs.get('align')}`]: this.attrs.has('align')
});
return <div {...this.attrs.all()}>
{vnode.children}
</div>;
}
}

8
resources/js/Components/Grid/Row.jsx
View File

@ -1,8 +0,0 @@
import Component from '../Component.jsx';
export default class Row extends Component {
view(vnode) {
this.attrs.addClassNames('mdc-layout-grid__inner');
return <div {...this.attrs.all()}>{vnode.children}</div>;
}
}

4
resources/js/Components/Grid/index.js vendored
View File

@ -1,4 +0,0 @@
export { default as Cell } from './Cell.jsx';
export { default as LayoutGrid } from './LayoutGrid.jsx';
export { default as Row } from './Row.jsx';

15
resources/js/Components/Pages/RecordsPage.jsx
View File

@ -26,11 +26,6 @@ import TableHead from '../DataTable/TableHead.jsx';
import TableHeadCell from '../DataTable/TableHeadCell.jsx'; import TableHeadCell from '../DataTable/TableHeadCell.jsx';
import TableHeadRow from '../DataTable/TableHeadRow.jsx'; import TableHeadRow from '../DataTable/TableHeadRow.jsx';
import TableRow from '../DataTable/TableRow.jsx'; import TableRow from '../DataTable/TableRow.jsx';
import {
Cell,
LayoutGrid,
Row
} from '../Grid';
import LoadingButton from '../LoadingButton.jsx'; import LoadingButton from '../LoadingButton.jsx';
import Mdi from '../Mdi.jsx'; import Mdi from '../Mdi.jsx';
import Page from '../Page.jsx'; import Page from '../Page.jsx';
@ -219,21 +214,19 @@ export default class RecordsPage extends Page {
<> <>
<div id={section.id ?? index}> <div id={section.id ?? index}>
<h4 class="mdc-typography--overline">{section.heading}</h4> <h4 class="mdc-typography--overline">{section.heading}</h4>
<LayoutGrid> <mwc-layout-grid>
<Row>
{(() => { {(() => {
const fields = collect(section.fields); const fields = collect(section.fields);
return fields.map((field, fieldIndex) => ( return fields.map((field, fieldIndex) => (
<Cell key={fieldIndex} columnspan={12 / (section.columns ?? 3)}> <mwc-layout-grid-cell key={fieldIndex} span={12 / (section.columns ?? 3)}>
<text-field {...field} id={field.id ?? fieldIndex} <text-field {...field} id={field.id ?? fieldIndex}
name={field.name ?? field.id ?? fieldIndex} name={field.name ?? field.id ?? fieldIndex}
data-default-value={field.value ?? ''}/> data-default-value={field.value ?? ''}/>
</Cell>)) </mwc-layout-grid-cell>))
.toArray(); .toArray();
})()} })()}
</Row> </mwc-layout-grid>
</LayoutGrid>
</div> </div>
{index !== sections.keys() {index !== sections.keys()
.last() && <hr/>} .last() && <hr/>}

1
resources/js/Components/index.js vendored
View File

@ -5,7 +5,6 @@ export * from './Card';
export { default as Component } from './Component.jsx'; export { default as Component } from './Component.jsx';
export * from './DataTable'; export * from './DataTable';
export { extend, override } from './extend'; export { extend, override } from './extend';
export * from './Grid';
export {default as LoadingButton} from './LoadingButton.jsx'; export {default as LoadingButton} from './LoadingButton.jsx';
export {default as Mdi} from './Mdi.jsx'; export {default as Mdi} from './Mdi.jsx';
export { default as Page } from './Page.jsx'; export { default as Page } from './Page.jsx';

86
resources/js/Views/SetupPage.jsx
View File

@ -5,23 +5,21 @@ import '@material/mwc-formfield';
import '@material/mwc-list/mwc-list-item'; import '@material/mwc-list/mwc-list-item';
import '@material/mwc-select'; import '@material/mwc-select';
import '@material/mwc-textarea'; import '@material/mwc-textarea';
import 'mwc-layout-grid';
import '../WebComponents/TextField'; import '../WebComponents/TextField';
import collect from 'collect.js'; import collect from 'collect.js';
import LocaleCode from 'locale-code'; import LocaleCode from 'locale-code';
import Mithril from 'mithril'; import Mithril from 'mithril';
import redaxios from 'redaxios';
// eslint-disable-next-line import/no-absolute-path // eslint-disable-next-line import/no-absolute-path
import logoUrl from '/images/logo_completo.png'; import logoUrl from '/images/logo_completo.png';
import {Alert} from '../Components';
import Card from '../Components/Card/Card.jsx'; import Card from '../Components/Card/Card.jsx';
import Cell from '../Components/Grid/Cell.jsx';
import LayoutGrid from '../Components/Grid/LayoutGrid.jsx';
import Row from '../Components/Grid/Row.jsx';
import Mdi from '../Components/Mdi.jsx'; import Mdi from '../Components/Mdi.jsx';
import Page from '../Components/Page.jsx'; import Page from '../Components/Page.jsx';
import redaxios from 'redaxios';
import {Alert} from '../Components';
import {getFormData} from '../utils'; import {getFormData} from '../utils';
export default class SetupPage extends Page { export default class SetupPage extends Page {
@ -61,9 +59,8 @@ export default class SetupPage extends Page {
<Card outlined className="center" style="width: 85%;"> <Card outlined className="center" style="width: 85%;">
<form id="setup"> <form id="setup">
<img src={logoUrl} className="center" alt={__('OpenSTAManager')} /> <img src={logoUrl} className="center" alt={__('OpenSTAManager')} />
<LayoutGrid> <mwc-layout-grid>
<Row> <mwc-layout-grid-cell span-desktop="8">
<Cell columnspan-desktop="8">
<h2>{__('Benvenuto in :name!', {name: <strong>{__('OpenSTAManager')}</strong>})}</h2> <h2>{__('Benvenuto in :name!', {name: <strong>{__('OpenSTAManager')}</strong>})}</h2>
<p>{__('Puoi procedere alla configurazione tecnica del software attraverso i ' <p>{__('Puoi procedere alla configurazione tecnica del software attraverso i '
+ 'parametri seguenti, che potranno essere corretti secondo necessità tramite il file .env.')}<br/> + 'parametri seguenti, che potranno essere corretti secondo necessità tramite il file .env.')}<br/>
@ -78,72 +75,72 @@ export default class SetupPage extends Page {
{link: <a href="https://www.php.net/manual/en/function.date.php#refsect1-function.date-parameters">PHP</a>}) {link: <a href="https://www.php.net/manual/en/function.date.php#refsect1-function.date-parameters">PHP</a>})
} }
</small> </small>
<Row style="margin-top: 8px;"> <mwc-layout-grid inner style="margin-top: 8px;">
<Cell> <mwc-layout-grid-cell >
<text-field name="timestamp_format" label={__('Formato data lunga')} <text-field name="timestamp_format" label={__('Formato data lunga')}
required value="d/m/Y H:i"> required value="d/m/Y H:i">
<Mdi icon="calendar-clock" slot="icon"/> <Mdi icon="calendar-clock" slot="icon"/>
</text-field> </text-field>
</Cell> </mwc-layout-grid-cell>
<Cell> <mwc-layout-grid-cell >
<text-field name="date_format" label={__('Formato data corta')} <text-field name="date_format" label={__('Formato data corta')}
required value="d/m/Y"> required value="d/m/Y">
<Mdi icon="calendar-month-outline" slot="icon"/> <Mdi icon="calendar-month-outline" slot="icon"/>
</text-field> </text-field>
</Cell> </mwc-layout-grid-cell>
<Cell> <mwc-layout-grid-cell >
<text-field name="time_format" label={__('Formato orario')} required <text-field name="time_format" label={__('Formato orario')} required
value="H:i"> value="H:i">
<Mdi icon="clock-outline" slot="icon"/> <Mdi icon="clock-outline" slot="icon"/>
</text-field> </text-field>
</Cell> </mwc-layout-grid-cell>
</Row> </mwc-layout-grid>
<hr/> <hr/>
<h4>{__('Database')}</h4> <h4>{__('Database')}</h4>
<Row> <mwc-layout-grid inner>
<Cell columnspan="4"> <mwc-layout-grid-cell span="4">
<text-field name="host" label={__('Host')} required <text-field name="host" label={__('Host')} required
helper={examplesTexts.get('localhost')}> helper={examplesTexts.get('localhost')}>
<Mdi icon="server-network" slot="icon"/> <Mdi icon="server-network" slot="icon"/>
</text-field> </text-field>
</Cell> </mwc-layout-grid-cell>
<Cell columnspan="4"> <mwc-layout-grid-cell span="4">
<text-field name="username" label={__('Nome utente')} required <text-field name="username" label={__('Nome utente')} required
helper={examplesTexts.get('root')}> helper={examplesTexts.get('root')}>
<Mdi icon="account-outline" slot="icon"/> <Mdi icon="account-outline" slot="icon"/>
</text-field> </text-field>
</Cell> </mwc-layout-grid-cell>
<Cell columnspan="4"> <mwc-layout-grid-cell span="4">
<text-field name="password" label={__('Password')} <text-field name="password" label={__('Password')}
helper={examplesTexts.get('mysql')}> helper={examplesTexts.get('mysql')}>
<Mdi icon="lock-outline" slot="icon"/> <Mdi icon="lock-outline" slot="icon"/>
</text-field> </text-field>
</Cell> </mwc-layout-grid-cell>
<Cell columnspan="4"> <mwc-layout-grid-cell span="4">
<text-field name="database_name" label={__('Nome database')} required <text-field name="database_name" label={__('Nome database')} required
helper={examplesTexts.get('openstamanager')}> helper={examplesTexts.get('openstamanager')}>
<Mdi icon="database-outline" slot="icon"/> <Mdi icon="database-outline" slot="icon"/>
</text-field> </text-field>
</Cell> </mwc-layout-grid-cell>
</Row> </mwc-layout-grid>
<hr/> <hr/>
<Row> <mwc-layout-grid inner>
<Cell> <mwc-layout-grid-cell >
<small>{__('* Campi obbligatori')}</small> <small>{__('* Campi obbligatori')}</small>
</Cell> </mwc-layout-grid-cell>
<Cell> <mwc-layout-grid-cell >
<mwc-button id="save-install" raised label={__('Salva e installa')} onclick={this.onSaveButtonClicked.bind(this)}> <mwc-button id="save-install" raised label={__('Salva e installa')} onclick={this.onSaveButtonClicked.bind(this)}>
<Mdi icon="check" slot="icon"/> <Mdi icon="check" slot="icon"/>
</mwc-button> </mwc-button>
</Cell> </mwc-layout-grid-cell>
<Cell> <mwc-layout-grid-cell >
<mwc-button id="test-db" outlined label={__('Testa il database')} onclick={this.onTestButtonClicked.bind(this)}> <mwc-button id="test-db" outlined label={__('Testa il database')} onclick={this.onTestButtonClicked.bind(this)}>
<Mdi icon="test-tube" slot="icon"/> <Mdi icon="test-tube" slot="icon"/>
</mwc-button> </mwc-button>
</Cell> </mwc-layout-grid-cell>
</Row> </mwc-layout-grid>
</Cell> </mwc-layout-grid-cell>
<Cell> <mwc-layout-grid-cell >
<h4>{__('Lingua')}</h4> <h4>{__('Lingua')}</h4>
<mwc-select id="language-select"> <mwc-select id="language-select">
{this.languages()} {this.languages()}
@ -152,23 +149,22 @@ export default class SetupPage extends Page {
<h4>{__('Licenza')}</h4> <h4>{__('Licenza')}</h4>
<p>{__('OpenSTAManager è tutelato dalla licenza GPL 3.0, da accettare obbligatoriamente per poter utilizzare il gestionale.')}</p> <p>{__('OpenSTAManager è tutelato dalla licenza GPL 3.0, da accettare obbligatoriamente per poter utilizzare il gestionale.')}</p>
<mwc-textarea value={this.page.props.license} rows="15" cols="40" disabled /> <mwc-textarea value={this.page.props.license} rows="15" cols="40" disabled />
<Row style="margin-top: 5px;"> <mwc-layout-grid inner="" style="margin-top: 5px;">
<Cell columnspan-desktop="8" columnspan-tablet="8"> <mwc-layout-grid-cell span-desktop="8" span-tablet="8">
<mwc-formfield label={__('Ho visionato e accetto la licenza')}> <mwc-formfield label={__('Ho visionato e accetto la licenza')}>
<mwc-checkbox name="license_agreement"/> <mwc-checkbox name="license_agreement"/>
</mwc-formfield> </mwc-formfield>
</Cell> </mwc-layout-grid-cell>
<Cell> <mwc-layout-grid-cell >
<a href="https://www.gnu.org/licenses/translations.en.html#GPL" target="_blank"> <a href="https://www.gnu.org/licenses/translations.en.html#GPL" target="_blank">
<mwc-button label={__('Versioni tradotte')}> <mwc-button label={__('Versioni tradotte')}>
<Mdi icon="license" slot="icon"/> <Mdi icon="license" slot="icon"/>
</mwc-button> </mwc-button>
</a> </a>
</Cell> </mwc-layout-grid-cell>
</Row> </mwc-layout-grid>
</Cell> </mwc-layout-grid-cell>
</Row> </mwc-layout-grid>
</LayoutGrid>
</form> </form>
</Card> </Card>
<mwc-fab id="contrast-switcher" className="sticky contrast-light" <mwc-fab id="contrast-switcher" className="sticky contrast-light"