surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web Editor home made

Browse Source
This commit is contained in:
Surya Paolo
2022-11-17 08:10:43 +01:00
parent 711f1b515d
commit 495abc33be
77 changed files with 1742 additions and 1771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/CMyEditElem/CMyEditElem.ts
View File

@@ -2,7 +2,7 @@ import {
defineComponent, onMounted, PropType, ref, toRef, watch,
} from 'vue'
import { ILabelValue, IMyElem, IMyPage, IOperators } from '@src/model'
import { IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { CImgTitle } from '../CImgTitle/index'
@@ -26,13 +26,15 @@ import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'
import { emitKeypressEvents } from 'readline'
import { costanti } from '@costanti'
import objectId from '@src/js/objectId'
export default defineComponent({
name: 'CMyEditElem',
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
components: {
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize },
CSelectColor, CSelectFontSize
},
emits: ['saveElem'],
props: {
myelem: {
@@ -74,7 +76,7 @@ export default defineComponent({
const elemChanged = ref(false)
const enableAdd = ref(true)
const neworder = ref(<number|undefined>0)
const neworder = ref(<number | undefined>0)
const myel = toRef(props, 'myelem')
const newtype = ref(<any>'')
@@ -87,13 +89,6 @@ export default defineComponent({
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
}
function getheightgallery() {
if (tools.isMobile())
return '400px'
else
return '600px'
}
function saveElem(exit?: boolean) {
// Save Elem record
const myelem = props.myelem
@@ -165,7 +160,7 @@ export default defineComponent({
}
function modifElem(value: any) {
function modifElem() {
disableSave.value = false
elemChanged.value = true
}
@@ -174,7 +169,7 @@ export default defineComponent({
neworder.value = props.myelem.order
arrPages.value = []
arrPages.value.push({label: '[Vuoto]', path: ''})
arrPages.value.push({ label: '[Vuoto]', path: '' })
for (const page of globalStore.mypage) {
const rec = {
@@ -198,8 +193,9 @@ export default defineComponent({
function addNewCard() {
if (!myel.value.listcards)
myel.value.listcards = []
myel.value.listcards.push({ imagefile: '', alt: '', description: '' })
modifElem(true)
myel.value.listcards.push({ _id: objectId(), imagefile: '', alt: '', description: '' })
modifElem()
}
function getClass() {
@@ -222,13 +218,37 @@ export default defineComponent({
return false
}
function delRecCard(idcard: string, myel: IMyElem) {
//
if (myel.listcards)
myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== idcard)
}
function saveCard(recpass: IMyCard, myval: any) {
if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
if (props.myelem.listcards) {
props.myelem.listcards.forEach((rec: IMyCard) => {
if (recpass._id === rec._id) {
rec.imagefile = myval
}
})
}
}
modifElem()
}
function updateElem(myvalue: any) {
myel.value = myvalue
modifElem()
}
onMounted(mounted)
return {
tools,
shared_consts,
getArrDisciplines,
getheightgallery,
slide,
slide2,
animare,
@@ -253,6 +273,9 @@ export default defineComponent({
addNewCard,
arrPages,
costanti,
delRecCard,
saveCard,
updateElem,
}
},

129
src/components/CMyEditElem/CMyEditElem.vue
View File

@@ -7,14 +7,9 @@
(!myel.active ? ` clEditNotActive` : ``)
"
>
<div>
<div v-if="!!myel.type">
<q-bar v-if="enableEdit" dense class="bg-blue-1 q-px-sm">
<q-toggle
left-label="Attiva"
v-model="myel.active"
color="positive"
icon="fas fa-eye"
>
<q-toggle v-model="myel.active" color="positive" icon="fas fa-eye">
</q-toggle>
<!--<q-toggle v-if="tools.isManager()"
v-model="enableAdd"
@@ -74,7 +69,27 @@
>
</q-btn>
</q-bar>
<div class="justify-center q-gutter-xs row">
<div class="row">
<q-input
label="Width:"
@update:model-value="modifElem"
v-model="myel.widthimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Height:"
@update:model-value="modifElem"
v-model="myel.heightimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div class="justify-center row q-ma-xs">
<q-btn
dense
v-if="enableEdit && !disableSave"
@@ -171,6 +186,16 @@
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
:class="myel.span ? '' : ''"
>
<div class="row">
<q-input
label="Classe Card:"
@update:model-value="modifElem"
v-model="myel.class3"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<q-btn
rounded
dense
@@ -181,28 +206,48 @@
>
</q-btn>
<div v-for="(rec, ind) in myel.listcards" :key="ind">
<div v-if="enableEdit" class="column">
<div v-if="enableEdit" class="column bordered q-ma-xs">
<q-bar class="bg-primary text-white">
Card {{ ind + 1 }}
<q-space />
<q-btn
icon="fas fa-trash-alt"
color="negative"
dense
flat
size="sm"
@click="delRecCard(rec._id, myel)"
>
</q-btn>
</q-bar>
<CSelectImage
:title="tools.getTitleGall()"
:directory="tools.getDirectoryGall(myvalue, 'imgcards')"
:imgGall="[myvalue]"
:edit="true"
:canModify="true"
:isInModif="true"
@update:imgGall="updateElem"
@showandsave="Savedb">
</CSelectImage>
<CMyFieldRec
title="Lista Immagini:"
table="myelems"
:id="myel._id"
:rec="myel"
field="listcards"
title="Immagine:"
table="imgcards"
:id="rec._id"
:rec="rec"
field="imagefile"
@update:model-value="modifElem"
@save="saveCard"
:canEdit="true"
:canModify="true"
:nosaveToDb="true"
:path="myel.path"
:fieldtype="costanti.FieldType.imgcard"
>
</CMyFieldRec>
<q-input
label="Immagine:"
dense
class="fa-border"
@update:model-value="modifElem"
v-model="rec.imagefile"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<div v-if="enableEdit" class="row">
<q-input
dense
@@ -215,6 +260,17 @@
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
style="min-width: 100px"
label="Style:"
class="fa-border"
@update:model-value="modifElem"
v-model="rec.style"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CSelectColor
v-if="enableEdit"
style="min-width: 100px"
@@ -375,30 +431,9 @@
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:type="costanti.FieldType.images"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<div class="row">
<q-input
label="Width:"
@update:model-value="modifElem"
v-model="myel.widthimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Height:"
@update:model-value="modifElem"
v-model="myel.heightimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
</div>
@@ -421,7 +456,7 @@
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:type="costanti.FieldType.images"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<div class="row">

3
src/components/CMyEditor/CMyEditor.ts
View File

@@ -16,7 +16,8 @@ export default defineComponent({
},
value: {
type: String,
required: true,
required: false,
default: '',
},
myclass: {
type: String,

3
src/components/CMyElem/CMyElem.scss
View File

@@ -462,6 +462,9 @@ body.mobile .landing:before {
border: #11f609 solid 2px;
cursor: pointer;
}
.selectedElem {
border: #200e96 solid 3px !important;
}
.align_center {
text-align: center;

25
src/components/CMyElem/CMyElem.ts
View File

@@ -28,15 +28,21 @@ import { useI18n } from '@/boot/i18n'
export default defineComponent({
name: 'CMyElem',
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
components: {
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize },
CSelectColor, CSelectFontSize
},
emits: ['selElemClick'],
props: {
myelem: {
type: Object as PropType<IMyElem>,
required: true,
},
selElem: {
type: Object as PropType<IMyElem>,
required: false,
},
path: {
type: String,
required: false,
@@ -70,7 +76,7 @@ export default defineComponent({
const enableEdit = ref(false)
const enableAdd = ref(true)
const neworder = ref(<number|undefined>0)
const neworder = ref(<number | undefined>0)
const myel = toRef(props, 'myelem')
const newtype = ref(<any>'')
@@ -157,7 +163,7 @@ export default defineComponent({
}
function modifElem(value: any) {
function modifElem() {
disableSave.value = false
}
@@ -171,6 +177,7 @@ export default defineComponent({
function clickOnElem() {
if (props.editOn) {
enableEdit.value = true
console.log('selElemClick', props.myelem)
emit('selElemClick', props.myelem)
}
}
@@ -188,13 +195,21 @@ export default defineComponent({
if (props.myelem.class2)
mycl += ' ' + props.myelem.class2
if (props.selElem && props.editOn) {
if (props.myelem._id === props.selElem._id)
mycl += ' selectedElem'
}
return mycl
}
function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
if (elem) {
if (elem.type === shared_consts.ELEMTYPE.CARD) {
return 'upload/pages/' + elem.path + '/' + reccard!.imagefile
if (reccard?.imagefile)
return 'upload/pages/' + elem.path + '/' + reccard.imagefile
else
return ''
} else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
return 'upload/pages/' + elem.path + '/' + elem.container
} else {

11
src/components/CMyElem/CMyElem.vue
View File

@@ -25,8 +25,8 @@
@click="clickOnElem"
>
<div v-for="(rec, ind) in myel.listcards" :key="ind" >
<q-card class="my-card center_img" flat bordered>
rec: {{rec}}
<q-card :class="`my-card center_img bordered ` + myel.class3"
:style="rec.style">
<q-img :src="getImgFileByElem(myel, rec)" />
<q-card-section>
<div :class="` ` + rec.size" :style="`color: ` + rec.color">
@@ -221,7 +221,7 @@
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
<section
class="maxwidth padding_gallery bg-white text-grey-10 text-center"
class="padding_gallery bg-white text-grey-10 text-center"
>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@@ -236,14 +236,15 @@
:fit="myel.fit"
:thumbnails="myel.parambool2"
infinite
:height="myel.height ? myel.height.toString() : 600"
:height="myel.heightimg ? myel.heightimg.toString() : tools.getheightgallery()"
>
<q-carousel-slide
v-for="(rec, index) in myel.list"
:key="index"
:name="index"
:img-src="
getsrcbyimg(`upload/pages/` + path + `/` + rec.imagefile)
getsrcbyimg(`upload/pages/` + myel.path + `/` + rec.imagefile)
"
:alt="rec.alt"
class="carousel_slide"

14
src/components/CMyFieldDb/CMyFieldDb.ts
View File

@@ -96,7 +96,7 @@ export default defineComponent({
default: null,
},
mycol: {
type: Object as PropType<IColGridTable>,
type: Object as PropType<IColGridTable> | undefined,
required: false,
default: () => {
return { name: '' }
@@ -142,16 +142,24 @@ export default defineComponent({
}
function withBorder() {
return col.value.fieldtype !== costanti.FieldType.onlydate && col.value.fieldtype !== costanti.FieldType.date
if (col.value)
return col.value.fieldtype !== costanti.FieldType.onlydate && col.value.fieldtype !== costanti.FieldType.date
else
return false
}
function mounted() {
if (props.rec) {
row.value = props.rec
}
if (props.mycol.name !== '') {
if (props.mycol && props.mycol.name !== '') {
col.value = props.mycol
} else {
console.log('Tab = ', props.table, 'key=', props.mykey)
col.value = fieldsTable.getColByTable(props.table, props.mykey)
console.log('MYCOL = ', col.value)
}
}
onMounted(mounted)

3
src/components/CMyFieldDb/CMyFieldDb.vue
View File

@@ -23,6 +23,7 @@
<div :class="` q-ma-sm q-pa-sm col-grow popupedit `" :style="withBorder() ? `` : ``">
<CMyPopupEdit
:fielddb="true"
v-bind="$attrs"
:rec="rec"
:isrec="!!rec"
@@ -43,7 +44,7 @@
:canEdit="true"
:id="id"
:idmain="idmain"
:mycol="col"
:mycol="col ? col : {}"
:tablesel="tablesel"
:pickup="pickup"
v-model:row="row"

18
src/components/CMyFieldRec/CMyFieldRec.ts
View File

@@ -12,6 +12,7 @@ import MixinBase from '@/mixins/mixin-base'
export default defineComponent({
name: 'CMyFieldRec',
emits: ['save'],
props: {
table: {
type: String,
@@ -95,7 +96,12 @@ export default defineComponent({
tupe: String,
required: false,
default: '',
}
},
nosaveToDb: {
type: Boolean,
required: false,
default: false,
},
},
components: { CMyPopupEdit },
setup(props, { emit }) {
@@ -143,15 +149,23 @@ export default defineComponent({
mysubkey.value = arrk[1]
if (arrk.length > 2)
mysubsubkey.value = arrk[2]
else
mykey.value = props.field
}
}
function showandsel(row: any, col: any, newval: any, valinitial: any) {
console.log('showandsel CMyFieldDb', row, col, newval)
// console.log('showandsel CMyFieldDb', row, col, newval)
emit('save', props.rec, newval)
if (props.nosaveToDb)
return
if (newval !== valinitial)
setValDb($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
}
function withBorder() {

2
src/components/CMyFieldRec/CMyFieldRec.vue
View File

@@ -18,6 +18,7 @@
</q-field>
</div>
<div :class="` col-grow clpopupVisuCard ` + getclass()" :style="withBorder() ? `` : ``">
<CMyPopupEdit
v-bind="$attrs"
@@ -43,6 +44,7 @@
:pickup="pickup"
v-model:row="rec"
minuteinterval="1"
:nosaveToDb="nosaveToDb"
@showandsave="showandsel"
>

6
src/components/CMyPage/CMyPage.ts
View File

@@ -54,12 +54,12 @@ export default defineComponent({
const load = async (): Promise<void> => {
// console.log('load', mypath.value)
if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value, 'cmypage')
}
watch(() => props.mypath, async (to: string, from: string) => {
// console.log('load', mypath.value)
if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
console.log('load', mypath.value, to, from )
if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value, 'cmypage watch')
})
onMounted(load)

49
src/components/CMyPageElem/CMyPageElem.ts
View File

@@ -15,6 +15,7 @@ import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'
import { shared_consts } from '@/common/shared_vuejs'
import objectId from '@src/js/objectId'
export default defineComponent({
name: 'CMyPageElem',
@@ -59,13 +60,14 @@ export default defineComponent({
const $q = useQuasar()
const { t } = useI18n()
const globalStore = useGlobalStore()
const editOn = ref(false)
const addOn = ref(false)
const selElem = ref({} as IMyElem)
const myelemVoid = ref({active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value} as IMyElem)
const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)
const globalStore = useGlobalStore()
const selElem = ref(globalStore.selElem)
const myelems = computed(() => {
if (mypathin.value)
@@ -74,37 +76,52 @@ export default defineComponent({
return null
})
const load = async (): Promise<void> => {
function load() {
// console.log('load', mypathin.value)
if (mypathin.value !== '') rec.value = await globalStore.loadPage('/' + mypathin.value)
if (mypathin.value !== '') {
globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
rec.value = ris
})
}
editOn.value = tools.getCookie('EDIT_' + mypathin.value) === '-1' ? true : false
if (mypathin.value === 'home')
editOn.value = false
console.log('getcookie: ', editOn.value, mypathin.value)
if (tools.isManager()) {
editOn.value = tools.getCookie('EDITPAGES', '0') === '-1' ? true : false
console.log('getcookie: ', editOn.value, mypathin.value)
}
}
watch(() => props.mypath, async (to: string, from: string) => {
watch(() => props.mypath, (to: string, from: string) => {
console.log('... load', mypathin.value, props.mypath)
await load()
selElem.value = {}
load()
})
watch(
() => editOn.value,
() => {
if (!editOn.value) {
selElem.value = {}
}
})
function selElemClick(myelem: IMyElem) {
console.log('mypageelem selElemClick', myelem)
selElem.value = myelem
}
function mounted() {
load()
}
function saveElem(myelem: IMyElem) {
//
}
function changeVisuDrawer() {
console.log('changeVisuDrawer')
tools.setCookie('EDIT_' + mypathin.value, editOn.value ? '-1' : '0')
function changeVisuDrawer(path: string, edit: boolean) {
globalStore.changeVisuDrawer(path, edit)
}
onMounted(load)
onMounted(mounted)
return {
rec, myelems,

43
src/components/CMyPageElem/CMyPageElem.vue
View File

@@ -5,35 +5,37 @@
v-if="tools.isManager()"
v-model="editOn"
color="green"
@update:model-value="changeVisuDrawer"
@update:model-value="changeVisuDrawer(mypathin, editOn)"
icon="fas fa-pencil-alt"
>
</q-toggle>
<q-drawer
v-model="editOn"
side="right"
show-if-above
:width="400"
:breakpoint="700"
elevated
>
<q-bar dense class="bg-primary text-white">
<q-toolbar-title> Editor </q-toolbar-title>
<q-btn
flat
round
color="white"
icon="close"
@click="editOn = false; changeVisuDrawer()"
></q-btn>
</q-bar>
<CMyEditElem
:myelem="selElem"
:editOn="true"
:path="rec.path"
@saveElem="saveElem"
>
</CMyEditElem>
<q-scroll-area class="fit">
<q-bar dense class="bg-primary text-white">
<q-toolbar-title> Editor </q-toolbar-title>
<q-btn
flat
round
color="white"
icon="close"
@click="
editOn = false;
"
></q-btn>
</q-bar>
<CMyEditElem
:myelem="selElem"
:editOn="true"
:path="rec.path"
>
</CMyEditElem>
</q-scroll-area>
</q-drawer>
<div class="q-ma-sm q-gutter-sm q-pa-xs">
@@ -75,6 +77,7 @@
:editOn="editOn"
:addOn="addOn"
:path="rec.path"
:selElem="selElem"
@selElemClick="selElemClick"
>
</CMyElem>
@@ -85,7 +88,9 @@
:myelem="myelemVoid"
:editOn="editOn"
:addOn="addOn"
:selElem="selElem"
:path="rec.path"
@selElemClick="selElemClick"
>
</CMyElem>
</div>

143
src/components/CMyPopupEdit/CMyPopupEdit.ts
View File

@@ -13,6 +13,7 @@ import { CMySelect } from '../CMySelect'
import { CCurrencyValue } from '../CCurrencyValue'
import { CMyEditor } from '../CMyEditor'
import { CGallery } from '../CGallery'
import { CSelectImage } from '../CSelectImage'
import { CAccomodation } from '../CAccomodation'
import { tools } from '@store/Modules/tools'
import { costanti } from '@costanti'
@@ -46,13 +47,18 @@ export default defineComponent({
required: false,
default: null,
},
fielddb: {
type: Boolean,
required: false,
default: false,
},
isrec: {
type: Boolean,
required: false,
default: false,
},
mycol: {
type: Object as PropType<IColGridTable>,
type: Object as PropType<IColGridTable | undefined>,
required: true,
},
canEdit: {
@@ -185,9 +191,19 @@ export default defineComponent({
required: false,
default: false,
},
nosaveToDb: {
type: Boolean,
required: false,
default: false,
},
path: {
type: String,
required: false,
default: '',
},
},
components: { CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery,
CCurrencyValue, CLabel, CAccomodation },
CCurrencyValue, CLabel, CAccomodation, CSelectImage },
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
@@ -203,14 +219,14 @@ export default defineComponent({
const myImgGall = ref([{}] as IImgGallery[])
const col = ref({
const col = ref(<IColGridTable>{
name: 'test',
fieldtype: 0,
showWhen: costanti.showWhen.NewRec + costanti.showWhen.InEdit + costanti.showWhen.InView,
visible: true,
maxlength: props.mycol ? props.mycol.maxlength : 0,
minlength: props.mycol ? props.mycol.minlength : undefined
} as IColGridTable)
})
const { setValDb, getValDb } = MixinBase()
const { getMyUsername } = MixinUsers()
@@ -227,42 +243,42 @@ export default defineComponent({
})
function crea() {
// console.log('crea', isFieldDb())
// console.log('crea', isFieldDb(), 'props.mycol', props.mycol)
if (props.mycol && props.mycol.name) {
col.value = props.mycol
} else {
col.value.jointable = props.jointable
if (props.filter)
col.value.filter = props.filter
col.value.fieldtype = props.type
col.value.label = props.title
if (props.type === costanti.FieldType.image) {
myImgGall.value = [{
_id: '',
imagefile: myvalue.value,
// order: 1,
alt: 'img',
}]
} else if (props.type === costanti.FieldType.imgcard) {
myImgGall.value = [myvalue.value]
}
console.log('* col', col.value);
}
if (props.type) {
col.value.fieldtype = props.type
}
if (props.isrec) {
col.value = props.mycol
} else {
if (isFieldDb()) {
// mykey -> field
// mysubkey -> subfield
// table -> table
// serv -> serv
// id -> id
// idmain -> idmain
// console.table(props)
myvalue.value = getValDb(props.field, props.serv, '', props.table, props.subfield, props.id, props.idmain, props.indrec, props.mysubsubkey, props.specialField)
// console.log('myvalue.value', myvalue.value)
col.value.jointable = props.jointable
if (props.filter)
col.value.filter = props.filter
col.value.fieldtype = props.type
col.value.label = props.title
if (props.type === costanti.FieldType.image) {
myImgGall.value = [{
_id: '',
imagefile: myvalue.value,
// order: 1,
alt: 'img',
}]
}
// console.log('col', col.value);
} else {
col.value = { ...props.mycol }
if (props.mycol && props.mycol.name)
col.value = { ...props.mycol }
}
}
@@ -275,7 +291,8 @@ export default defineComponent({
function isFieldDb() {
return props.type !== 0
// return props.type !== 0
return props.fielddb
}
function isviewfield() {
@@ -404,6 +421,8 @@ export default defineComponent({
// console.log('myvalue.value', myvalue.value)
myvalueprec.value = myvalue.value
crea()
// console.log('myvalueprec', myvalueprec)
}
@@ -510,6 +529,9 @@ export default defineComponent({
if (col.value.fieldtype === costanti.FieldType.image) {
console.log('newVal.imagefile', newVal)
myvalue.value = newVal
} else if (col.value.fieldtype === costanti.FieldType.imgcard) {
console.log('newVal.imagefile', newVal)
myvalue.value = newVal
}
if (col.value.fieldtype === costanti.FieldType.listobj) {
@@ -660,52 +682,6 @@ export default defineComponent({
}
}
function getTitleGall() {
if (fieldsTable.tableForUsers.includes(props.table)) {
return 'Profilo'
} else {
return fieldsTable.getTitleImgByTable(props.table)
}
}
function getDirectoryGall() {
console.log('getDirectoryGall', myrow.value)
let ris = ''
try {
let username = myrow.value.hasOwnProperty('username') ? myrow.value['username'] : ''
const userId = myrow.value.hasOwnProperty('userId') ? myrow.value['userId'] : ''
if (username === '') {
if (userId === userStore.my._id)
username = userStore.my.username
}
if (username === '') {
username = userStore.my.username
}
if (fieldsTable.tableForUsers.includes(props.table)) {
ris = 'profile/' + username + '/' + props.table
} else if (props.table === 'users') {
ris = 'profile/' + userStore.my.username
} else if (props.table === 'mygroups') {
if (myrow.value.hasOwnProperty('groupname'))
ris = 'mygroups/' + myrow.value['groupname']
} else if (props.table === 'circuits') {
if (myrow.value.hasOwnProperty('path'))
ris = 'circuits/' + myrow.value['path']
} else if (!!myrow.value && !!myrow.value.directory) {
ris = myrow.value.directory
} else if (props.table === 'myelems') {
ris = 'pages/' + myrow.value.path
} else {
ris = props.table
}
} catch (e) {
console.error('err getDirectoryGall', e)
}
console.log('getDirectoryGall', ris)
return ris
}
function uploaded(info: any) {
@@ -726,6 +702,7 @@ export default defineComponent({
function noPopupeditByCol(mycol: IColGridTable) {
return (mycol.fieldtype !== costanti.FieldType.html
&& mycol.fieldtype !== costanti.FieldType.image
&& mycol.fieldtype !== costanti.FieldType.imgcard
&& mycol.fieldtype !== costanti.FieldType.listimages
&& mycol.fieldtype !== costanti.FieldType.listobj
&& mycol.fieldtype !== costanti.FieldType.number
@@ -749,7 +726,7 @@ export default defineComponent({
onBeforeMount(mounted)
crea()
return {
myvalue,
@@ -778,8 +755,6 @@ export default defineComponent({
onInput,
globalStore,
userStore,
getTitleGall,
getDirectoryGall,
removephoto,
isFieldDb,
col,

53
src/components/CMyPopupEdit/CMyPopupEdit.vue
View File

@@ -79,6 +79,7 @@
<q-input
v-bind="$attrs"
v-model="myvalue"
:autogrow="col.fieldtype !== costanti.FieldType.crypted"
:style="$q.screen.lt.sm ? 'min-width: 300px' : ''"
counter
@@ -173,8 +174,8 @@
<div v-else-if="col.fieldtype === costanti.FieldType.listimages" style="text-align: center;">
<CGallery
:imagebak="col.showpicprofile_ifnotset ? ((userStore.getImgByProfile(row, true) === '') ? costanti.NESSUN_IMMAGINE : userStore.getImgByProfile(row, true)) : ''"
:title="getTitleGall()"
:directory="getDirectoryGall()"
:title="tools.getTitleGall()"
:directory="tools.getDirectoryGall(myrow, table, path)"
:imgGall="myvalue"
:isInModif="isInModif"
:edit="isviewfield() && isInModif"
@@ -196,13 +197,13 @@
{{ $t('reg.photo') }}
<CGallery
:imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
:title="getTitleGall()"
:directory="getDirectoryGall()"
:title="tools.getTitleGall()"
:directory="tools.getDirectoryGall()"
:imgGall="[{ imagefile: myvalue }]"
:edit="isviewfield()"
:canModify="canModify"
:isInModif="isInModif"
:single="isFieldDb()"
:single="true"
@update:imgGall="changevalRec"
@showandsave="Savedb">
</CGallery>
@@ -232,6 +233,47 @@
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.imgcard">
<div v-if="canEdit">
{{ $t('reg.photo') }}
<CSelectImage
v-bind="$attrs"
:imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
:title="tools.getTitleGall()"
:directory="tools.getDirectoryGall()"
:imgGall="[myvalue]"
:edit="isviewfield()"
:canModify="canModify"
:isInModif="isInModif"
@update:imgGall="changevalRec"
@showandsave="Savedb">
</CSelectImage>
</div>
<div v-else>
<div v-if="myvalue" class="text-center">
<q-img
:src="myvalue"
class="text-center"
style="height: 100px; width: 100px;"
alt="foto">
</q-img>
</div>
<div v-else class="text-center">
<q-img
:src="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : 'images/noimg-user.svg'"
class="text-center"
style="height: 100px; width: 100px;"
alt="nessuna immagine">
</q-img>
</div>
<q-btn
v-if="myvalue"
label="Rimuovi Foto"
color="blue" icon="fas fa-trash-alt" size="sm"
@click="removephoto"></q-btn>
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.nationality">
<div v-if="isInModif" class="justify-center q-gutter-sm clgutter q-mt-sm">
<CMySelect
@@ -604,6 +646,7 @@
<div v-else>
<span v-html="visuValByType(myvalue, col, row)"></span>
</div>
<q-popup-edit
v-if="(!isInModif && canEdit && noPopupeditByCol(col))"
v-model="myvalue"

3
src/components/CSelectColor/CSelectColor.ts
View File

@@ -11,7 +11,8 @@ export default defineComponent({
props: {
modelValue: {
type: String,
required: true,
required: false,
default: '',
},
title: {
type: String,

3
src/components/CSelectFontSize/CSelectFontSize.ts
View File

@@ -11,7 +11,8 @@ export default defineComponent({
props: {
modelValue: {
type: String,
required: true,
required: false,
default: '',
},
title: {
type: String,

65
src/components/CSelectImage/CSelectImage.scss Executable file
View File

@@ -0,0 +1,65 @@
$heightBtn: 100%;
$grayshadow: #555;
.text-subtitle-gallery {
font-size: 1rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: .00937em;
text-shadow: .1rem .1rem .1rem $grayshadow;
}
@media (max-width: 718px) {
// PER VERSIONE MOBILE
.text-subtitle-gallery {
font-size: 1rem;
}
}
.myimg {
border-radius: 10px !important;
height: 200px;
cursor: pointer;
}
.myimg-modify {
cursor: grab;
}
.barwidth{
width: 250px !important;
}
.q-img {
&__image {
border-radius: 10px !important;
}
}
.my-card-gallery {
width: 100%;
max-width: 300px;
min-width: 200px;
padding: 0.5rem 0.5rem;
height: 350px;
margin: auto;
}
.my-card-gallery-noModif {
width: 100%;
max-width: 300px;
min-width: 200px;
padding: 1rem 1rem;
height: 220px;
}
.my-card-gallery-view {
width: 100px;
height: 100px;
padding: 0.25rem 0.25rem;
margin: auto;
}

374
src/components/CSelectImage/CSelectImage.ts Executable file
View File

@@ -0,0 +1,374 @@
import { defineComponent, ref, PropType, watch, onMounted, computed } from 'vue'
import { useI18n } from '@src/boot/i18n'
import { useUserStore } from '@store/UserStore'
import { useQuasar } from 'quasar'
import { IGallery, IImgGallery } from 'model'
import { CMyPage } from '@/components/CMyPage'
import { tools } from '@store/Modules/tools'
import { useGlobalStore } from '@store/globalStore'
import { costanti } from '@costanti'
export default defineComponent({
name: 'CSelectImage',
props: {
edit: {
type: Boolean,
required: true,
},
canModify: {
type: Boolean,
required: true,
},
isInModif: {
type: Boolean,
required: false,
default: false,
},
title: String,
directory: {
type: String,
required: true,
},
imagebak: {
type: String,
required: false,
default: '',
},
imgGall: {
type: Object as PropType<IImgGallery[] | string | undefined | null>,
required: true,
},
},
emits: ['showandsave'],
components: { CMyPage },
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const userStore = useUserStore()
const globalStore = useGlobalStore()
const displayGall = ref(false)
const gallerylist = ref(<IImgGallery[]>[])
const maximizedToggle = ref(true)
const fullscreen = ref(false)
const fullscreensrc = ref('')
function isValid(myobj: any): boolean {
return (myobj && typeof myobj !== 'string' && typeof myobj !== 'undefined')
}
const isListImgValid = computed(() => {
const arr = getlistimages()
if (arr && tools.isArray(arr)) {
return arr.length > 0
} else {
return !!arr
}
})
watch(() => props.imgGall, (newval, oldval) => {
updateArray()
})
function updateArray() {
// console.log('created cgallery')
// @ts-ignore
let myarr: any = props.imgGall
gallerylist.value = []
if (Array.isArray(myarr)) {
myarr.forEach((imgfile: string) => {
if (imgfile) {
gallerylist.value.push({ imagefile: imgfile })
}
})
}
}
function created() {
updateArray()
}
function showandsave(value: any) {
console.log('EMIT: showandsave')
emit('showandsave', value)
}
function getnumimages() {
if (gallerylist.value)
return gallerylist.value.length
else
return 0
}
function getlistimages() {
if (gallerylist.value)
// return gallerylist.value.slice().sort((a: any, b: any) => a.order! - b.order!)
return gallerylist.value
else
return null
}
function onDragStart(e: any) {
console.log('onDragStart')
e.dataTransfer.setData('text', e.target.id)
e.dataTransfer.dropEffect = 'move'
}
function onDragEnter(e: any) {
if (props.canModify) {
// don't drop on other draggables
if (e.target.draggable !== true) {
e.target.classList.add('drag-enter')
}
}
}
function onDragLeave(e: any) {
if (props.canModify) {
e.target.classList.remove('drag-enter')
}
}
function onDragOver(e: any) {
if (props.canModify) {
e.preventDefault()
}
}
function onDrop(e: any) {
if (props.canModify) {
console.log('onDrop', e)
e.preventDefault()
// don't drop on other draggables
if (e.target.draggable === true) {
return
}
if (gallerylist.value) {
const draggedId = e.dataTransfer.getData('text')
let dragout = ''
try {
dragout = e.target.parentNode.parentNode.parentNode.id
} catch (err) {
dragout = ''
}
const draggedEl = document.getElementById(draggedId)
console.log('draggedId', draggedId, 'draggedEl', draggedEl)
console.log('dragout', dragout)
// check if original parent node
if (draggedEl) {
if (draggedEl.parentNode === e.target) {
e.target.classList.remove('drag-enter')
return
}
}
const myindexIn = gallerylist.value.findIndex((rec: any) => rec._id === draggedId)
const myrecIn: IImgGallery = gallerylist.value[myindexIn]
let myrecOut: IImgGallery
const myindexout = gallerylist.value.findIndex((rec: any) => rec._id === dragout)
myrecOut = gallerylist.value[myindexout]
if (myindexIn === myindexout)
return
tools.array_move(gallerylist.value, myindexIn, myindexout)
// make the exchange
// draggedEl.parentNode.removeChild(draggedEl)
// e.target.appendChild(draggedEl)
e.target.classList.remove('drag-enter')
save()
}
}
}
function getclass() {
return (props.edit || displayGall.value) ? (props.isInModif ? 'my-card-gallery' : 'my-card-gallery-noModif') : 'my-card-gallery-view' + ' text-center'
}
function getclimg() {
let mycl = (props.edit || displayGall.value) ? 'myimg' : 'myimg-view'
if (props.canModify && props.edit)
mycl = mycl + ' myimg-modify'
return mycl
}
/*function getlastord() {
if (gallerylist.value) {
let myord = 0
for (const file of gallerylist.value) {
if (file.order! > myord)
myord = file.order!
}
return myord + 10
}
}*/
function uploaded(info: any) {
console.log('uploaded', info)
if (gallerylist.value) {
for (const file of info.files) {
gallerylist.value.push({ imagefile: file.name })
}
console.log('gallerylist', gallerylist.value)
}
}
function apri() {
displayGall.value = true
}
function deleted(rec: any) {
console.log('deleted', rec.imagefile)
// console.table(mylistimages)
if (gallerylist.value) {
const index = gallerylist.value.findIndex((elem: any) => elem.imagefile === rec.imagefile)
if (index > -1) {
gallerylist.value.splice(index, 1)
}
// mylistimages = mylistimages.pop((elem) => elem.imagefile !== rec.imagefile)
// console.table(mylistimages)
}
}
function getfullname(rec: any) {
if (rec) {
return costanti.DIR_UPLOAD + props.directory + '/' + rec.imagefile
} else {
return props.imagebak
}
}
function copytoclipboard(rec: any) {
const filename = getfullname(rec)
tools.copyStringToClipboard($q, filename, true)
}
function deleteFile(rec: any) {
console.log('deleteFile....')
const filename = getfullname(rec)
const filenamerel = filename.replace(/^.*[\\\/]/, '')
$q.dialog({
message: 'Eliminare il file ' + filenamerel + '?',
html: true,
ok: {
label: 'Elimina',
push: true,
},
title: filenamerel,
cancel: true,
persistent: false,
}).onOk(async () => {
// Delete File on server:
const ris = await globalStore.DeleteFile({ filename })
// console.log('ris', ris)
if (ris)
deleted(rec)
})
}
function save() {
console.log('CGallery save', gallerylist.value)
if (gallerylist.value.length > 0) {
emit('showandsave', gallerylist.value[0].imagefile)
} else {
emit('showandsave', '')
}
}
function close() {
return ''
}
function getsrcimg(imgfile: any) {
if (!imgfile.imagefile) {
return 'images/noimg.png';
}
if (imgfile) {
if (tools.getextfile(imgfile.imagefile) === 'pdf')
return 'images/images/pdf.jpg'
else
return costanti.DIR_UPLOAD + props.directory + '/' + imgfile.imagefile
} else {
return 'images/noimg.png';
}
}
function getParamDir() {
return tools.escapeslash(props.directory)
}
function getUrl() {
const myurl = tools.geturlupload() + getParamDir()
console.log('myurl', myurl)
return myurl
}
function ImgFullScreen(mygallery: IImgGallery) {
fullscreen.value = true
fullscreensrc.value = getfullname(mygallery)
}
function onRejected(rejectedEntries: any) {
// Notify plugin needs to be installed
// https://quasar.dev/quasar-plugins/notify#Installation
console.log('rejectedEntries', rejectedEntries)
$q.notify({
type: 'negative',
message: 'La Dimensione massima dell\'immagine è di 2 MB'
})
}
onMounted(created)
return {
getlistimages,
onDragStart,
onDragEnter,
onDragLeave,
onDragOver,
onDrop,
getclass,
getclimg,
copytoclipboard,
deleteFile,
getsrcimg,
tools,
uploaded,
gallerylist,
getnumimages,
apri,
displayGall,
save,
maximizedToggle,
getUrl,
close,
ImgFullScreen,
fullscreen,
fullscreensrc,
onRejected,
isListImgValid,
costanti,
}
}
})

289
src/components/CSelectImage/CSelectImage.vue Executable file
View File

@@ -0,0 +1,289 @@
<template>
<!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->
<div v-if="!edit">
<div class="q-pa-xs">
<q-card v-if="isListImgValid" :class="getclass()" @click="apri">
<div v-for="(imgfile, index) in getlistimages()" :key="index">
<div v-if="index === 0">
<q-img
:src="getsrcimg(imgfile)" :class="getclimg()">
<div v-if="getnumimages() > 1" class="absolute-bottom text-shadow no-padding">
({{ getnumimages() }})
</div>
</q-img>
</div>
</div>
</q-card>
<div v-else-if="!isInModif && !isListImgValid && imagebak">
<q-card v-if="imagebak !== costanti.NESSUN_IMMAGINE" :class="getclass()" @click="ImgFullScreen(imgfile)">
<q-img
:src="imagebak" :class="getclimg()">
</q-img>
</q-card>
</div>
<div v-else>
<q-card :class="getclass()" @click="apri">
<q-img
src="images/noimg.png" :class="getclimg()"
alt="no image">
</q-img>
</q-card>
</div>
<q-btn
v-if="isInModif"
color="primary" @click="apri"
icon="fas fa-file-upload"
:label="$t('gallery.load_image')">
</q-btn>
</div>
</div>
<div v-else>
<div v-if="!isListImgValid">
<q-btn
flat round color="blue" icon="fas fa-tools" size="md"
@click="apri"></q-btn>
</div>
<div v-else>
<div class=" row">
<!--<q-draggable-rows
v-model="order">-->
<div v-for="(mygallery, index) in getlistimages()" :key="index">
<div
class="q-pa-sm q-gutter-sm"
@dragenter="onDragEnter"
@dragleave="onDragLeave"
@dragover="onDragOver">
<q-card
:id="mygallery._id" :class="getclass()"
:draggable="canModify"
@dragstart="onDragStart"
@drop="onDrop"
>
<q-img
:src="getsrcimg(mygallery)"
:class="getclimg()"
:alt="mygallery.alt">
<div class="absolute-bottom text-shadow">
<!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
<div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
</div>
</q-img>
<q-field
v-if="canModify"
stack-label
dense
label="Nome File">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
</template>
</q-field>
<q-input
v-if="canModify"
v-model="mygallery.description"
dense
:label="$t('proj.longdescr')"
@keyup.enter.stop
@update:model-value="save"
debounce="1000"
autofocus>
</q-input>
<q-card-actions align="center">
<q-btn
v-if="canModify"
flat round color="blue" icon="fas fa-copy" size="sm"
@click="copytoclipboard(mygallery)"></q-btn>
<q-btn
v-if="canModify"
flat round color="red" icon="fas fa-trash-alt" size="sm"
@click="deleteFile(mygallery)"></q-btn>
</q-card-actions>
</q-card>
</div>
</div>
<div class="q-pa-sm">
<div v-if="edit" class="q-gutter-sm " style="max-height: 200px; width: 208px;">
<q-uploader
label="Aggiungi Immagine"
accept="image/jpeg, image/jpg, image/png, .pdf"
:url="getUrl()"
:headers="tools.getheaders()"
:max-file-size="3000000"
multiple
auto-upload
hide-upload-btn
no-thumbnails
@uploaded="uploaded"
@rejected="onRejected"
style="width: 208px"
></q-uploader>
</div>
</div>
</div>
</div>
</div>
<q-dialog
v-model="displayGall"
persistent
:maximized="maximizedToggle"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card>
<q-bar class="bg-primary text-white">
<q-space/>
<q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
<q-tooltip v-if="maximizedToggle" class="bg-white text-primary">Minimize</q-tooltip>
</q-btn>
<q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
<q-tooltip v-if="!maximizedToggle" class="bg-white text-primary">Maximize</q-tooltip>
</q-btn>
<q-btn dense flat icon="close" v-close-popup>
<q-tooltip class="bg-white text-primary">Close</q-tooltip>
</q-btn>
</q-bar>
<q-card-section>
<div class="text-h6">{{ title }}</div>
</q-card-section>
<q-card-section class="q-pt-none">
<div class=" row">
<div v-for="(mygallery, index) in getlistimages()" :key="index">
<div
class="q-pa-sm barwidth"
@dragenter="onDragEnter"
@dragleave="onDragLeave"
@dragover="onDragOver"
>
<q-bar
class="bg-primary text-white"
>
<q-btn flat round dense icon="menu" class="q-mr-sm"/>
<q-btn
v-if="canModify"
flat round icon="fas fa-copy" size="sm"
@click="copytoclipboard(mygallery)"></q-btn>
<div>
Foto {{ index + 1 }}
</div>
<q-space></q-space>
<q-btn v-if="canModify" flat round color="red" icon="fas fa-trash-alt"
@click="deleteFile(mygallery)"></q-btn>
</q-bar>
<q-card
:id="mygallery._id" :class="getclass()"
:data-ind="index"
:draggable="canModify"
@dragstart="onDragStart"
@drop="onDrop"
>
<q-img
:src="getsrcimg(mygallery)"
:class="getclimg()"
@click="ImgFullScreen(mygallery)"
:alt="mygallery.alt">
<div v-if="mygallery.description" class="absolute-bottom text-shadow">
<!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
<div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
</div>
</q-img>
<q-card-section>
<q-field
v-if="canModify"
stack-label
dense
label="Nome File">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
</template>
</q-field>
<q-input
v-if="canModify"
v-model="mygallery.description"
dense
:label="$t('proj.longdescr')"
@keyup.enter.stop
@update:model-value="save"
debounce="1000"
autofocus>
</q-input>
</q-card-section>
</q-card>
</div>
</div>
<div
v-if="canModify"
class="q-pa-sm">
<div class="q-gutter-sm " style="max-height: 200px; width: 208px;">
<q-uploader
label="Aggiungi Immagine"
accept="image/jpeg, image/jpg, image/png, .pdf"
:url="getUrl()"
:headers="tools.getheaders()"
:max-file-size="40000000"
multiple
auto-upload
hide-upload-btn
no-thumbnails
@uploaded="uploaded"
@rejected="onRejected"
style="width: 208px"
></q-uploader>
</div>
</div>
<div v-if="!isInModif && !isListImgValid && imagebak">
<q-card :class="getclass()" @click="ImgFullScreen(mygallery)">
<q-img
:src="imagebak" :class="getclimg()">
</q-img>
</q-card>
</div>
</div>
<q-card-actions align="right">
<q-btn v-if="canModify" flat label="Annulla" color="primary" v-close-popup/>
<q-btn v-if="canModify" label="salva" color="primary" v-close-popup @click="save"/>
<q-btn v-if="!canModify" label="Chiudi" color="primary" v-close-popup/>
</q-card-actions>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog
v-model="fullscreen"
:maximized="false"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="my-card">
<q-img v-if="fullscreensrc" alt="fullscreen" :src="fullscreensrc" @click="fullscreen = false"></q-img>
</q-card>
</q-dialog>
</template>
<script lang="ts" src="./CSelectImage.ts">
</script>
<style lang="scss" scoped>
@import './CSelectImage.scss';
</style>

1
src/components/CSelectImage/index.ts Executable file
View File

@@ -0,0 +1 @@
export {default as CSelectImage} from './CSelectImage.vue'

2
src/components/CStatusReg/CStatusReg.vue
View File

@@ -63,7 +63,7 @@
field="username"
:canEdit="false"
:canModify="false"
:type="costanti.FieldType.username_chip">
:fieldtype="costanti.FieldType.username_chip">
</CMyFieldRec>
</q-item-label>

1
src/components/index.ts
View File

@@ -15,6 +15,7 @@ export * from './CMyAvatar'
export * from './CMyCart'
export * from './CMyFieldDb'
export * from './CMyFieldRec'
export * from './CSelectImage'
export * from './CMyPage'
export * from './CMyPageElem'
export * from './CMyPageIntro'