Skip to content

Commit e47919d

Browse files
devel-padunglas
devel-pa
authored and
dunglas
committed
Fixes and features for Quasar generator. (#171)
* Add quasar generator. * Fix issues. * Add quasar test. * Fields by type. * Add initial dates as now for create form. * Painting code. * Again. * Fix linting errors. * Show displayed on 2 columns. * Linting issues. * Fix test. * Damn different styling. Fix test code styling. * Breadcrumb translations. Filter types. Lazy loading of selects. List date formatting. Fix update form. Route meta for breadcrumb. * Use inner loading instead ajax bar. Add translatable messages for tables. Fix row number in table when same value is returned. Not retrieving all collections from beginning on update form (use Groups in backend definitions). Fix sending request parameters for minimal list of all items. * Generate translation files. Make date extraction in a single place, i18n dates. Add switch helper to generator. Parameters cleanup and use data from fields list. Fix (?) reference naming. Show.vue display formatted dates. * Add breadcrumb common component. Use common fn for notifications. Use quasar dialog for delete confirmation. * Add date component and use it. Use directly router's breadcrumb. Use notify functions instead of main object (fix). Comment out validation, keep as example. * Fix rules texts in Form. Ensure new items are taken from server when filter is changing for select options in Form. Make buttons area smaller (auto-width) in List. * Mixins, common components, fixes, Vuex bindings outside components. * Fix linting. * Change some folder structure. Store less code, different boilerplate. * Move to vuexer service name lowercasing.
1 parent 959494e commit e47919d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+1948
-901
lines changed

‎src/generators/QuasarGenerator.js

Lines changed: 315 additions & 8 deletions
Large diffs are not rendered by default.

‎templates/quasar/common/components/ActionCell.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<q-td slot="body-cell-action" auto-width>
3+
<q-btn
4+
v-if="handleShow"
5+
flat
6+
round
7+
dense
8+
color="secondary"
9+
@click="handleShow"
10+
icon="format_align_justify"
11+
/>
12+
<q-btn v-if="handleEdit" flat round dense color="secondary" @click="handleEdit" icon="edit" />
13+
<q-btn
14+
v-if="handleDelete"
15+
icon="delete"
16+
flat
17+
round
18+
dense
19+
color="secondary"
20+
@click="confirmDelete = true"
21+
/>
22+
<ConfirmDelete v-if="handleDelete" :show="confirmDelete" :handle-delete="handleDelete" />
23+
</q-td>
24+
</template>
25+
26+
<script>
27+
import ConfirmDelete from './ConfirmDelete';
28+
29+
export default {
30+
name: 'ActionCell',
31+
components: {
32+
ConfirmDelete,
33+
},
34+
data() {
35+
return {
36+
confirmDelete: false,
37+
};
38+
},
39+
props: {
40+
handleShow: {
41+
type: Function,
42+
required: false,
43+
},
44+
handleEdit: {
45+
type: Function,
46+
required: false,
47+
},
48+
handleDelete: {
49+
type: Function,
50+
required: false,
51+
},
52+
},
53+
};
54+
</script>

‎templates/quasar/common/components/Breadcrumb.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<q-breadcrumbs class="q-mr-sm">
3+
<q-breadcrumbs-el icon="home" to="/" />
4+
<q-breadcrumbs-el
5+
v-for="(breadcrumb, idx) in values"
6+
:key="idx"
7+
:label="
8+
$t(breadcrumb.label) +
9+
' ' +
10+
(idx === values.length - 1 && item && item['@id'] ? item['@id'] : '')
11+
"
12+
:icon="breadcrumb.icon"
13+
:to="breadcrumb.to"
14+
/>
15+
</q-breadcrumbs>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'Breadcrumb',
21+
props: {
22+
values: {
23+
type: Array,
24+
required: true,
25+
},
26+
item: {
27+
type: Object,
28+
required: false,
29+
},
30+
},
31+
};
32+
</script>

‎templates/quasar/common/components/ConfirmDelete.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<q-dialog :value="show" persistent>
3+
<q-card>
4+
<q-card-section class="row items-center">
5+
<q-avatar icon="warning" color="primary" text-color="white" />
6+
<span class="q-ml-sm">\{{ $t('{{{labels.confirmDelete}}}') }}</span>
7+
</q-card-section>
8+
9+
<q-card-actions align="right">
10+
<q-btn flat label="{{{labels.cancel}}}" color="primary" v-close-popup />
11+
<q-btn flat label="{{{labels.delete}}}" color="primary" v-close-popup @click="handleDelete" />
12+
</q-card-actions>
13+
</q-card>
14+
</q-dialog>
15+
</template>
16+
17+
<script>
18+
export default {
19+
name: 'ConfirmDelete',
20+
props: {
21+
show: {
22+
type: Boolean,
23+
required: true,
24+
},
25+
handleDelete: {
26+
type: Function,
27+
required: true,
28+
},
29+
},
30+
};
31+
</script>

‎templates/quasar/common/components/DataFilter.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<q-expansion-item icon="search" :label="$t('{{{labels.filters}}}')" v-model="filtersExpanded">
3+
<q-card>
4+
<q-card-section>
5+
<slot name="filter"></slot>
6+
</q-card-section>
7+
<q-card-section>
8+
<q-btn :label="$t('{{{labels.filter}}}')" color="primary" @click="handleFilter" />
9+
<q-btn :label="$t('{{{labels.reset}}}')" color="primary" flat class="q-ml-sm" @click="handleReset" />
10+
</q-card-section>
11+
</q-card>
12+
</q-expansion-item>
13+
</template>
14+
15+
<script>
16+
export default {
17+
name: 'DataFilter',
18+
props: {
19+
handleReset: {
20+
type: Function,
21+
required: true,
22+
},
23+
handleFilter: {
24+
type: Function,
25+
required: true,
26+
},
27+
},
28+
data() {
29+
return {
30+
filtersExpanded: false,
31+
};
32+
},
33+
};
34+
</script>

‎templates/quasar/common/components/InputDate.vue

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!--
2+
https://github.com/controledigital/quasar-solutions/blob/master/components/cInputDate.vue
3+
Chamada:
4+
<InputDate :value="data" :set="(v) => { data = v }" label="Data" />
5+
-->
6+
<template>
7+
<q-input
8+
stack-label
9+
lazy-rules
10+
bottom-slots
11+
v-on="$listeners"
12+
v-bind="$attrs"
13+
v-model="inputModel"
14+
:error="!isValid"
15+
>
16+
<template v-slot:prepend v-if="kind === 'datetime' || kind === 'date'">
17+
<q-icon name="event" class="cursor-pointer">
18+
<q-popup-proxy transition-show="scale" transition-hide="scale" ref="qDateProxy">
19+
<q-date v-model="calendarModel" :mask="mask" />
20+
</q-popup-proxy>
21+
</q-icon>
22+
</template>
23+
24+
<template v-slot:append v-if="kind === 'datetime' || kind === 'time'">
25+
<q-icon name="access_time" class="cursor-pointer">
26+
<q-popup-proxy transition-show="scale" transition-hide="scale" ref="qTimeProxy">
27+
<q-time v-model="calendarModel" format24h :mask="mask" />
28+
</q-popup-proxy>
29+
</q-icon>
30+
</template>
31+
</q-input>
32+
</template>
33+
34+
<script>
35+
import { date } from 'quasar';
36+
37+
const localISOString = (d = new Date()) => {
38+
let pad = function(n) {
39+
return n < 10 ? '0' + n : n;
40+
},
41+
tz = d.getTimezoneOffset(), // mins
42+
tzs = (tz > 0 ? '-' : '+') + pad(parseInt(Math.abs(tz / 60))) + ':00';
43+
44+
if (tz % 60 != 0) tzs += pad(Math.abs(tz % 60));
45+
46+
if (tz === 0)
47+
// Zulu time == UTC
48+
tzs = 'Z';
49+
50+
return (
51+
d.getFullYear() +
52+
'-' +
53+
pad(d.getMonth() + 1) +
54+
'-' +
55+
pad(d.getDate()) +
56+
'T' +
57+
pad(d.getHours()) +
58+
':' +
59+
pad(d.getMinutes()) +
60+
':' +
61+
pad(d.getSeconds()) +
62+
tzs
63+
);
64+
};
65+
66+
export default {
67+
name: 'InputDate',
68+
props: { value: String, set: Function, kind: { type: String, default: 'datetime' } },
69+
data() {
70+
return {
71+
isValid: true,
72+
};
73+
},
74+
75+
computed: {
76+
mask: {
77+
get() {
78+
switch (this.kind) {
79+
case 'date':
80+
return 'YYYY/MM/DD';
81+
case 'time':
82+
return 'HH:mm';
83+
case 'datetime':
84+
default:
85+
return 'YYYY/MM/DD HH:mm';
86+
}
87+
},
88+
},
89+
inputModel: {
90+
get: function() {
91+
switch (this.kind) {
92+
case 'date':
93+
return this.Model ? this.$d(new Date(this.Model), 'short') : '';
94+
case 'time':
95+
return this.Model;
96+
case 'datetime':
97+
default:
98+
return this.Model ? this.$d(new Date(this.Model), 'long') : '';
99+
}
100+
},
101+
102+
set: function(value) {
103+
if (!value) {
104+
return;
105+
}
106+
this.Model = null;
107+
this.isValid = true;
108+
if (value.length === 10) {
109+
let val = value.substr(6, 4) + '/' + value.substr(3, 2) + '/' + value.substr(0, 2);
110+
if (new Date(val).toString() === 'Invalid Date') {
111+
this.isValid = false;
112+
} else {
113+
this.isValid = true;
114+
console.debug(val);
115+
this.Model = val;
116+
}
117+
}
118+
},
119+
},
120+
calendarModel: {
121+
get: function() {
122+
return this.Model ? date.formatDate(new Date(this.Model), this.mask) : '';
123+
},
124+
set: function(val) {
125+
let value = val;
126+
if (this.kind === 'datetime') {
127+
localISOString(new Date(val));
128+
}
129+
this.$refs.qDateProxy.hide();
130+
this.$refs.qTimeProxy.hide();
131+
this.Model = value;
132+
this.isValid = true;
133+
},
134+
},
135+
Model: {
136+
get: function() {
137+
return this.value;
138+
},
139+
set: function(value) {
140+
this.set(value);
141+
},
142+
},
143+
},
144+
};
145+
</script>

‎templates/quasar/common/components/Loading.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<q-inner-loading :showing="showing">
3+
<q-spinner size="50px" color="primary" />
4+
</q-inner-loading>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: {
10+
showing: {
11+
type: Boolean,
12+
required: true,
13+
},
14+
},
15+
};
16+
</script>

‎templates/quasar/common/components/Toolbar.vue

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<q-toolbar class="q-my-md">
3+
<slot name="left"></slot>
4+
<q-space />
5+
<div>
6+
<q-btn v-if="handleSubmit" :label="$t('{{{labels.submit}}}')" color="primary" @click="submitItem" />
7+
<q-btn
8+
v-if="handleReset"
9+
:label="$t('{{{labels.reset}}}')"
10+
color="primary"
11+
flat
12+
class="q-ml-sm"
13+
@click="resetItem"
14+
/>
15+
<q-btn
16+
v-if="handleDelete"
17+
:label="$t('{{{labels.delete}}}')"
18+
color="primary"
19+
flat
20+
class="q-ml-sm"
21+
@click="confirmDelete = true"
22+
/>
23+
<q-btn v-if="handleAdd" flat round dense icon="add" @click="addItem" />
24+
</div>
25+
<ConfirmDelete v-if="handleDelete" :show="confirmDelete" :handle-delete="handleDelete" />
26+
</q-toolbar>
27+
</template>
28+
29+
<script>
30+
import ConfirmDelete from './ConfirmDelete';
31+
32+
export default {
33+
name: 'Toolbar',
34+
components: {
35+
ConfirmDelete,
36+
},
37+
data() {
38+
return {
39+
confirmDelete: false,
40+
};
41+
},
42+
props: {
43+
handleSubmit: {
44+
type: Function,
45+
required: false,
46+
},
47+
handleReset: {
48+
type: Function,
49+
required: false,
50+
},
51+
handleDelete: {
52+
type: Function,
53+
required: false,
54+
},
55+
handleAdd: {
56+
type: Function,
57+
required: false,
58+
},
59+
},
60+
methods: {
61+
addItem() {
62+
if (this.handleAdd) {
63+
this.handleAdd();
64+
}
65+
},
66+
submitItem() {
67+
if (this.handleSubmit) {
68+
this.handleSubmit();
69+
}
70+
},
71+
resetItem() {
72+
if (this.handleReset) {
73+
this.handleReset();
74+
}
75+
},
76+
},
77+
};
78+
</script>

0 commit comments

Comments
 (0)