CGridTableRec + fields + page
pagine: - Siti Web - Operazioni - Push...
This commit is contained in:
@@ -79,7 +79,7 @@ flat round color="white" icon="cancel" v-close-popup
|
||||
<q-chip>
|
||||
<q-avatar v-if="getWhereIcon(myevent.wherecode)">
|
||||
<img
|
||||
:src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)"
|
||||
:src="`../../public/images/avatar/` + getWhereIcon(myevent.wherecode)"
|
||||
alt="Località">
|
||||
</q-avatar>
|
||||
<q-avatar v-else color="blue" font-size="20px" text-color="white" icon="home">
|
||||
@@ -831,7 +831,7 @@ size="md" type="a"
|
||||
<q-chip>
|
||||
<q-avatar v-if="getWhereIcon(event.wherecode)">
|
||||
<img
|
||||
:src="`../../statics/images/avatar/` + getWhereIcon(event.wherecode)"
|
||||
:src="`../../public/images/avatar/` + getWhereIcon(event.wherecode)"
|
||||
:alt="event.wherecode">
|
||||
</q-avatar>
|
||||
<q-avatar color="blue" font-size="20px" text-color="white" icon="home">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent, PropType, ref, watch, toRef, onMounted } from 'vue'
|
||||
import { defineComponent, PropType, ref, watch, toRef, onMounted, toRefs } from 'vue'
|
||||
import { useI18n } from '@src/boot/i18n'
|
||||
|
||||
import { tools } from '../../store/Modules/tools'
|
||||
@@ -81,12 +81,12 @@ export default defineComponent({
|
||||
type: Object as PropType<IPagination>,
|
||||
required: false,
|
||||
default: () => {
|
||||
return { sortBy: '', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
|
||||
return { sortBy: 'desc', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
|
||||
},
|
||||
},
|
||||
defaultnewrec: {
|
||||
type: Function,
|
||||
required: true,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
components: { CMyPopupEdit, CTitleBanner },
|
||||
@@ -96,16 +96,18 @@ export default defineComponent({
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const mypagination = toRef(props, 'pagination')
|
||||
|
||||
const addRow = ref('Aggiungi')
|
||||
|
||||
const newRecordBool = ref(false)
|
||||
const newRecord: any = ref({})
|
||||
const savenewRec = ref(false)
|
||||
|
||||
const mytable = ref('')
|
||||
const mytitle = ref('')
|
||||
const mycolumns = ref([])
|
||||
const colkey = ref('')
|
||||
const mytable = toRef(props, 'prop_mytable')
|
||||
const mytitle = toRef(props, 'prop_mytitle')
|
||||
const mycolumns = toRef(props, 'prop_mycolumns')
|
||||
const colkey = toRef(props, 'prop_colkey')
|
||||
const search = ref('')
|
||||
|
||||
const tablesel = ref('')
|
||||
@@ -138,8 +140,6 @@ export default defineComponent({
|
||||
|
||||
const mycodeid = toRef(props, 'prop_codeId')
|
||||
|
||||
const mypag = toRef(props, 'pagination')
|
||||
|
||||
// emulate 'SELECT count(*) FROM ...WHERE...'
|
||||
function getRowsNumberCount(myfilter?: any) {
|
||||
|
||||
@@ -206,9 +206,9 @@ export default defineComponent({
|
||||
emit('savefilter', myfilterand)
|
||||
}
|
||||
|
||||
function onRequest(myprops: any) {
|
||||
function onRequest() {
|
||||
// console.log('onRequest', 'myfilter = ', myfilter)
|
||||
const { page, rowsPerPage, rowsNumber, sortBy, descending } = myprops.pagination
|
||||
const { page, rowsPerPage, rowsNumber, sortBy, descending } = mypagination.value
|
||||
const myfilternow = myfilter.value
|
||||
const myfilterandnow = myfilterand.value
|
||||
|
||||
@@ -235,9 +235,9 @@ export default defineComponent({
|
||||
serverData.value = []
|
||||
|
||||
// fetch data from "server"
|
||||
fetchFromServer(startRow, endRow, myfilternow, myfilterandnow, sortBy, descending).then((ris: any) => {
|
||||
return fetchFromServer(startRow, endRow, myfilternow, myfilterandnow, sortBy, descending).then((ris: any) => {
|
||||
|
||||
myprops.pagination.rowsNumber = getRowsNumberCount(myfilter)
|
||||
mypagination.value.rowsNumber = getRowsNumberCount(myfilter)
|
||||
|
||||
// clear out existing data and add new
|
||||
if (returnedData.value === []) {
|
||||
@@ -252,10 +252,10 @@ export default defineComponent({
|
||||
// console.log('serverData', serverData)
|
||||
|
||||
// don't forfunction to update local pagination object
|
||||
myprops.pagination.page = page
|
||||
myprops.pagination.rowsPerPage = rowsPerPage
|
||||
myprops.pagination.sortBy = sortBy
|
||||
myprops.pagination.descending = descending
|
||||
mypagination.value.page = page
|
||||
mypagination.value.rowsPerPage = rowsPerPage
|
||||
mypagination.value.sortBy = sortBy
|
||||
mypagination.value.descending = descending
|
||||
|
||||
// console.log('pagination', pagination)
|
||||
|
||||
@@ -267,9 +267,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
function refresh_table() {
|
||||
onRequest({
|
||||
pagination: props.pagination
|
||||
})
|
||||
onRequest()
|
||||
rowclicksel.value = null
|
||||
}
|
||||
|
||||
@@ -410,18 +408,6 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
|
||||
function created() {
|
||||
console.log('created')
|
||||
// serverData = mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
|
||||
|
||||
mytable.value = props.prop_mytable
|
||||
mytitle.value = props.prop_mytitle
|
||||
mycolumns.value = props.prop_mycolumns
|
||||
colkey.value = props.prop_colkey
|
||||
|
||||
changeTable(false)
|
||||
}
|
||||
|
||||
function updatedcol() {
|
||||
// console.log('updatedcol')
|
||||
if (mycolumns.value) {
|
||||
@@ -444,7 +430,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function getrows() {
|
||||
return props.pagination.rowsNumber
|
||||
return mypagination.value.rowsNumber
|
||||
}
|
||||
|
||||
async function createNewRecordDialog() {
|
||||
@@ -472,7 +458,7 @@ export default defineComponent({
|
||||
async function createNewRecord() {
|
||||
loading.value = true
|
||||
|
||||
const mydata = {
|
||||
const mydata: any = {
|
||||
table: mytable,
|
||||
data: {}
|
||||
}
|
||||
@@ -487,7 +473,7 @@ export default defineComponent({
|
||||
const data = await globalStore.saveTable(mydata)
|
||||
|
||||
serverData.value.push(data)
|
||||
mypag.value.rowsNumber++
|
||||
mypagination.value.rowsNumber++
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
@@ -639,7 +625,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function changefuncAct(newval: any) {
|
||||
if (!disabilita) {
|
||||
if (!disabilita()) {
|
||||
tools.setCookie(tools.CAN_EDIT, newval)
|
||||
}
|
||||
}
|
||||
@@ -733,7 +719,6 @@ export default defineComponent({
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
selItem,
|
||||
@@ -773,6 +758,13 @@ export default defineComponent({
|
||||
colExtra,
|
||||
colclicksel,
|
||||
selected,
|
||||
mypagination,
|
||||
loading,
|
||||
onRequest,
|
||||
serverData,
|
||||
myfilter,
|
||||
disabilita,
|
||||
newRecordBool,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
flat
|
||||
bordered
|
||||
class="my-sticky-header-table"
|
||||
:data="serverData"
|
||||
:rows="serverData"
|
||||
:columns="mycolumns"
|
||||
:filter="myfilter"
|
||||
v-model:pagination="pagination"
|
||||
v-model:pagination="mypagination"
|
||||
:row-key="colkey"
|
||||
:loading="loading"
|
||||
@request="onRequest"
|
||||
@@ -137,7 +137,7 @@
|
||||
<div :class="getclrow(props.row)">
|
||||
<CMyPopupEdit
|
||||
:canEdit="canEdit"
|
||||
:disable="disabilita"
|
||||
:disable="disabilita()"
|
||||
:col="col"
|
||||
v-model:row="props.row"
|
||||
:field="col.field"
|
||||
@@ -198,7 +198,7 @@
|
||||
@click="colclicksel = mycol">
|
||||
<CMyPopupEdit
|
||||
:canEdit="true"
|
||||
:disable="disabilita"
|
||||
:disable="disabilita()"
|
||||
view="field"
|
||||
:col="mycol"
|
||||
:showall="true"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-parallax :src="getsrc" :height="tools.myheight_imgtitle(myheight, myheightmobile)">
|
||||
<q-parallax :src="getsrc()" :height="tools.myheight_imgtitle(myheight, myheightmobile)">
|
||||
<h1 class="text-white title" style="text-align: center" >{{title}}</h1>
|
||||
<div v-if="legendinside" class="mylegendinside absolute-bottom custom-caption" style="text-align: center" v-html="legendinside"></div>
|
||||
</q-parallax>
|
||||
|
||||
@@ -180,18 +180,18 @@ export default defineComponent({
|
||||
return visuValByType(myvalue.value)
|
||||
}
|
||||
|
||||
function savefield(value: any, initialval: any) {
|
||||
function savefield(value: any, initialval: any, myq: any) {
|
||||
myvalue.value = value
|
||||
setValDb(props.mykey, myvalue.value, props.type, props.serv, props.table, props.mysubkey, props.id)
|
||||
setValDb(myq, props.mykey, myvalue.value, props.type, props.serv, props.table, props.mysubkey, props.id)
|
||||
}
|
||||
|
||||
function savefieldboolean(value: any) {
|
||||
function savefieldboolean($q: any, value: any) {
|
||||
if (myvalue.value === undefined)
|
||||
myvalue.value = 'true'
|
||||
else
|
||||
myvalue.value = value
|
||||
|
||||
setValDb(props.mykey, myvalue, props.type, props.serv, props.table, props.mysubkey, props.id)
|
||||
setValDb($q, props.mykey, myvalue, props.type, props.serv, props.table, props.mysubkey, props.id)
|
||||
}
|
||||
|
||||
function selectcountry({ name, iso2, dialCode }: { name: string, iso2: string, dialCode: string }) {
|
||||
@@ -227,7 +227,7 @@ export default defineComponent({
|
||||
onInput,
|
||||
tools,
|
||||
costanti,
|
||||
|
||||
myq: $q,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
<div v-else-if="type === costanti.FieldType.boolean">
|
||||
<q-toggle
|
||||
dark color="green" v-model="myvalue" :label="col.title"
|
||||
@input="savefieldboolean"></q-toggle>
|
||||
@input="savefieldboolean($q)"></q-toggle>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-html="myvalprinted()"></div>
|
||||
@@ -120,19 +120,20 @@
|
||||
v-model="myvalue"
|
||||
:disable="col.disable"
|
||||
:title="col.title"
|
||||
@save="savefield"
|
||||
@save="(val, initialValue) => savefield(val, initialValue, myq)"
|
||||
buttons
|
||||
v-slot="scope"
|
||||
>
|
||||
|
||||
<div v-if="type === costanti.FieldType.boolean">
|
||||
<q-checkbox v-model="myvalue" :label="col.title">
|
||||
<q-checkbox v-model="scope.value" :label="col.title">
|
||||
</q-checkbox>
|
||||
<div v-html="visuValByType(myvalue)">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="type === costanti.FieldType.string">
|
||||
<q-input
|
||||
v-model="myvalue"
|
||||
v-model="scope.value"
|
||||
autogrow
|
||||
@keyup.enter.stop
|
||||
autofocus>
|
||||
@@ -141,16 +142,17 @@
|
||||
</div>
|
||||
<div v-else-if="type === costanti.FieldType.password">
|
||||
<q-input
|
||||
v-model="myvalue"
|
||||
v-model="scope.value"
|
||||
type="password"
|
||||
@keyup.enter.stop
|
||||
@keyup.enter="scope.set"
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-else-if="type === costanti.FieldType.number">
|
||||
<q-input
|
||||
v-model="myvalue" type="number"
|
||||
v-model="scope.value" type="number"
|
||||
@keyup.enter="scope.set"
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
@@ -194,6 +196,7 @@
|
||||
:readonly="true"
|
||||
rounded dense
|
||||
debounce="1000"
|
||||
@keyup.enter="scope.set"
|
||||
:label="title">
|
||||
|
||||
<template v-slot:prepend>
|
||||
@@ -246,7 +249,7 @@
|
||||
|
||||
<!--
|
||||
<q-select
|
||||
v-model="myvalue"
|
||||
v-model="scope.value"
|
||||
rounded
|
||||
dense
|
||||
outlined
|
||||
|
||||
@@ -8,12 +8,10 @@ import { Footer } from '@/components/Footer'
|
||||
|
||||
import { CImgTitle } from '../CImgTitle/index'
|
||||
import { CTitle } from '../CTitle/index'
|
||||
import MixinsMetaTags from '../../mixins/mixin-metatags'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyPage',
|
||||
components: { Footer, CImgTitle, CTitle },
|
||||
mixins: [MixinsMetaTags],
|
||||
props: {
|
||||
title: String,
|
||||
mypath: {
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
<div v-else>
|
||||
<div v-if="!!title">
|
||||
<CTitle
|
||||
v-if="imgbackground" :imgbackground="imgbackground"
|
||||
:headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
|
||||
v-if="imgbackground" :imgbackground="imgbackground"
|
||||
:headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
|
||||
<div v-if="!imgbackground">
|
||||
<CImgTitle v-if="img" :src="img" :title="title">
|
||||
</CImgTitle>
|
||||
|
||||
@@ -256,7 +256,6 @@
|
||||
<!--</q-dialog>-->
|
||||
</div>
|
||||
|
||||
myvalue: {{ myvalue}}
|
||||
<q-popup-edit
|
||||
v-if="canEdit && col.fieldtype !== costanti.FieldType.html"
|
||||
v-model="myvalue"
|
||||
@@ -265,16 +264,17 @@
|
||||
buttons
|
||||
persistent
|
||||
@save="SaveValueInt"
|
||||
@show="OpenEdit">
|
||||
@show="OpenEdit"
|
||||
v-slot="scope">
|
||||
|
||||
<div v-if="col.fieldtype === costanti.FieldType.boolean">
|
||||
<q-checkbox v-model="myvalue" :label="col.title">
|
||||
<q-checkbox v-model="scope.value" :label="col.title">
|
||||
</q-checkbox>
|
||||
{{ visuValByType(myvalue, col, row) }}
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.string">
|
||||
<q-input
|
||||
v-model="myvalue"
|
||||
v-model="scope.value"
|
||||
autogrow
|
||||
@keyup.enter.stop
|
||||
autofocus>
|
||||
@@ -283,23 +283,23 @@
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.password">
|
||||
<q-input
|
||||
v-model="myvalue"
|
||||
v-model="scope.value"
|
||||
type="password"
|
||||
@keyup.enter.stop
|
||||
@keyup.enter="scope.set"
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.number">
|
||||
<q-input
|
||||
v-model="myvalue" type="number"
|
||||
v-model="scope.value" type="number"
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.hours">
|
||||
<q-input
|
||||
v-model="myvalue" type="number"
|
||||
v-model="scope.value" type="number"
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
@@ -334,14 +334,14 @@
|
||||
|
||||
<template v-slot:prepend>
|
||||
<div style="font-size: 1rem;">
|
||||
<vue-country-code
|
||||
<!--<vue-country-code
|
||||
:defaultCountry="myvalue"
|
||||
:disabledFetchingCountry="true"
|
||||
@onSelect="selectcountry"
|
||||
:preferredCountries="tools.getprefCountries"
|
||||
:dropdownOptions="{ disabledDialCode: true }">
|
||||
|
||||
</vue-country-code>
|
||||
</vue-country-code>-->
|
||||
</div>
|
||||
</template>
|
||||
</q-input>
|
||||
@@ -352,7 +352,7 @@
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.intcode">
|
||||
|
||||
<vue-tel-input
|
||||
<!-- <vue-tel-input
|
||||
@country-changed="intcode_change"
|
||||
:value="myvalue"
|
||||
@input="oninput"
|
||||
@@ -361,13 +361,14 @@
|
||||
inputClasses="clCell"
|
||||
wrapperClasses="clCellCode">
|
||||
</vue-tel-input>
|
||||
-->
|
||||
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
|
||||
<div>join: {{ col.jointable }}</div>
|
||||
|
||||
<q-select
|
||||
v-model="myvalue"
|
||||
v-model="scope.value"
|
||||
rounded
|
||||
outlined
|
||||
multiple
|
||||
|
||||
@@ -117,7 +117,7 @@ v-else class="cltexth3 text-center boldhigh"
|
||||
<q-chip>
|
||||
<q-avatar v-if="getWhereIcon(myevent.wherecode)">
|
||||
<img
|
||||
:src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)"
|
||||
:src="`../../public/images/avatar/` + getWhereIcon(myevent.wherecode)"
|
||||
alt="località">
|
||||
</q-avatar>
|
||||
<q-avatar
|
||||
|
||||
@@ -56,7 +56,7 @@ h4 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../statics/images/cover.jpg) 50%;
|
||||
//background: #000 url(../../public/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
@@ -51,6 +51,7 @@ export default defineComponent({
|
||||
return {
|
||||
getsrc,
|
||||
getaltimg,
|
||||
tools,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-img
|
||||
v-if="imgbackground" :src="getsrc" :alt="getaltimg"
|
||||
:style="tools.styles_imgtitle(sizes)">
|
||||
<div>
|
||||
<q-img
|
||||
v-if="imgbackground" :src="getsrc()" :alt="getaltimg()"
|
||||
:style="tools.styles_imgtitle(sizes)">
|
||||
|
||||
<div class="absolute-bottom text-body1 text-center" :style="styleadd">
|
||||
<h1 class="titletext" v-html="headtitle"></h1>
|
||||
</div>
|
||||
</q-img>
|
||||
<div class="absolute-bottom text-body1 text-center" :style="styleadd">
|
||||
<h1 class="titletext" v-html="headtitle"></h1>
|
||||
</div>
|
||||
</q-img>
|
||||
|
||||
<!--
|
||||
<q-parallax :height="tools.myheight_imgtitle()" :width="tools.mywidth_imgtitle()">
|
||||
<template v-slot:media>
|
||||
<img :src="imgbackground" class="cltitlebg">
|
||||
</template>
|
||||
<h2 class="titletext">{{headtitle}}</h2>
|
||||
</q-parallax>
|
||||
-->
|
||||
<!--
|
||||
<q-parallax :height="tools.myheight_imgtitle()" :width="tools.mywidth_imgtitle()">
|
||||
<template v-slot:media>
|
||||
<img :src="imgbackground" class="cltitlebg">
|
||||
</template>
|
||||
<h2 class="titletext">{{headtitle}}</h2>
|
||||
</q-parallax>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CTitle.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './CTitle.scss';
|
||||
@import './CTitle.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-header reveal elevated :class="getClassColorHeader">
|
||||
<q-header reveal elevated :class="getClassColorHeader()">
|
||||
<q-toolbar
|
||||
color="primary"
|
||||
:glossy="$q.theme === 'mat'"
|
||||
@@ -31,7 +31,7 @@
|
||||
<q-btn
|
||||
ripple
|
||||
size="md"
|
||||
id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
|
||||
id="newvers" v-if="isNewVersionAvailable()" color="secondary" rounded icon="refresh"
|
||||
class="btnNewVersShow" @click="RefreshApp()" :label="t('notification.newVersionAvailable')">
|
||||
</q-btn>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user