- Generazione della Raccolta dei Cataloghi (web e Stampa), e creazione del PDF Online.
- Lista Raccolta Cataloghi, aggiungi/togli catalogo.
This commit is contained in:
Surya Paolo
83
src/components/CMyRecRaccoltaCataloghi/CMyRecRaccoltaCataloghi.scss
Executable file
83
src/components/CMyRecRaccoltaCataloghi/CMyRecRaccoltaCataloghi.scss
Executable file
@@ -0,0 +1,83 @@
|
||||
.cardrec {
|
||||
/* Aggiungi un bordo sottile */
|
||||
border: 1px solid #ddd;
|
||||
/* Applica un'ombreggiatura per dare l'effetto di elevazione */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
/* Arrotonda leggermente gli angoli */
|
||||
border-radius: 8px;
|
||||
/* Aggiungi un po' di spazio interno intorno ai contenuti */
|
||||
padding: 8px;
|
||||
/* Colore di sfondo bianco per separare dal resto del contenuto */
|
||||
background-color: #eff;
|
||||
|
||||
margin: 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 500px) {
|
||||
margin: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.catalog-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.imgcatalog {
|
||||
border: 4px solid #ffffff;
|
||||
/* Bordo bianco */
|
||||
border-radius: 12px;
|
||||
/* Angoli arrotondati */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
/* Ombra per un effetto 3D */
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
/* Transizione fluida */
|
||||
object-fit: cover;
|
||||
/* Mantiene l'aspetto dell'immagine senza distorsioni */
|
||||
}
|
||||
|
||||
.imgcatalog:hover {
|
||||
transform: scale(1.05);
|
||||
/* Effetto di ingrandimento al passaggio del mouse */
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
/* Ombra più pronunciata al passaggio del mouse */
|
||||
}
|
||||
|
||||
.back_img {
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
/* Usa flex-grow per occupare spazio disponibile */
|
||||
}
|
||||
|
||||
.title-container {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
/* Sfondo bianco con trasparenza */
|
||||
padding: 4px;
|
||||
/* Aggiunta di padding per creare spazio attorno al testo */
|
||||
border-radius: 8px;
|
||||
/* Arrotonda gli angoli dello sfondo */
|
||||
}
|
||||
|
||||
|
||||
.clickable-image {
|
||||
cursor: pointer;
|
||||
/* Cambia il cursore a puntatore quando si passa sopra */
|
||||
transition: transform 0.2s;
|
||||
/* Aggiunge una transizione dolce */
|
||||
}
|
||||
|
||||
.clickable-image:hover {
|
||||
transform: scale(1.05);
|
||||
/* Aumenta leggermente l'immagine al passaggio del mouse */
|
||||
}
|
||||
195
src/components/CMyRecRaccoltaCataloghi/CMyRecRaccoltaCataloghi.ts
Executable file
195
src/components/CMyRecRaccoltaCataloghi/CMyRecRaccoltaCataloghi.ts
Executable file
@@ -0,0 +1,195 @@
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent, onMounted, ref, watch, computed } from 'vue'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import type { IRaccoltaCatalogo, IOptGrid, IUserFields } from 'model';
|
||||
import { IImgGallery, IUserProfile } from 'model'
|
||||
import { costanti } from '@costanti'
|
||||
import { shared_consts } from '@src/common/shared_vuejs'
|
||||
import { fieldsTable } from '@store/Modules/fieldsTable'
|
||||
import { tools } from '@tools'
|
||||
import { toolsext } from '@store/Modules/toolsext'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { CLabel } from '@src/components/CLabel'
|
||||
import { CMyCardPopup } from '@src/components/CMyCardPopup'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useCalendarStore } from '@src/store/CalendarStore'
|
||||
import { useGlobalStore } from '@src/store/globalStore'
|
||||
|
||||
import type { ICatProd, ICollana, IPublisher } from "@src/model/Products"
|
||||
import { useProducts } from '@src/store/Products'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyRecRaccoltaCataloghi',
|
||||
components: { CMyCardPopup, CLabel },
|
||||
emits: ['setCmd', 'cmdext'],
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
prop_myrec: {
|
||||
type: Object as PropType<any>,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
editOn: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
dettagli: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
margin_right: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
opt: {
|
||||
type: Object as PropType<IOptGrid>,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
|
||||
const userStore = useUserStore()
|
||||
const calendarStore = useCalendarStore()
|
||||
const globalStore = useGlobalStore()
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const $router = useRouter()
|
||||
|
||||
const myrec = ref(<IRaccoltaCatalogo>{})
|
||||
|
||||
const statecolor = ref('negative')
|
||||
const apriInfo = ref(false)
|
||||
const collanestr = ref('')
|
||||
const argomentistr = ref('')
|
||||
const numprodtot = ref(0)
|
||||
const editorestr = ref('')
|
||||
|
||||
const products = useProducts()
|
||||
|
||||
const visupage = ref(false)
|
||||
const disabilita = computed(() => {
|
||||
return props.table === shared_consts.TABLES_MYBACHECAS
|
||||
})
|
||||
|
||||
const pagina_collegata = computed(() => {
|
||||
|
||||
let linkpage = ''
|
||||
|
||||
const idpag = myrec.value.idPageAssigned
|
||||
if (idpag) {
|
||||
const mypage = globalStore.getPageById(idpag)
|
||||
if (mypage)
|
||||
linkpage = mypage.path!
|
||||
}
|
||||
|
||||
return linkpage
|
||||
|
||||
})
|
||||
|
||||
const numcataloghistr = computed(() => {
|
||||
return myrec.value?.lista_cataloghi?.length || 0
|
||||
})
|
||||
|
||||
|
||||
watch(() => props.prop_myrec, (newval, oldval) => {
|
||||
|
||||
mounted()
|
||||
})
|
||||
|
||||
|
||||
function mounted() {
|
||||
if (props.prop_myrec) {
|
||||
myrec.value = props.prop_myrec
|
||||
}
|
||||
}
|
||||
|
||||
function showBadge() {
|
||||
if (shared_consts.TABLES_SHOW_ADTYPE.includes(props.table)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
function getImgUser(profile: IUserFields) {
|
||||
return userStore.getImgByProfile(profile)
|
||||
}
|
||||
|
||||
function naviga(path: string) {
|
||||
$router.push(path)
|
||||
}
|
||||
|
||||
|
||||
function setCmd($q: any, cmd: number, myusername: string, value: any, groupname: string) {
|
||||
emit('setCmd', $q, cmd, myusername, value, groupname)
|
||||
}
|
||||
|
||||
function cmdExt(cmd: any, val1: any, val2: any) {
|
||||
emit('cmdext', cmd, val1, val2)
|
||||
}
|
||||
|
||||
function navigaExt(obj: any) {
|
||||
cmdExt(costanti.CMD_SHOW_PAGE, null, obj)
|
||||
//let link = shared_consts.getDirectoryByTable(props.table) + '/' + obj._id
|
||||
//console.log('link', link)
|
||||
//$router.push(link)
|
||||
}
|
||||
|
||||
function getNameToShow(user: IUserFields, col = null) {
|
||||
if (myrec.value.groupname)
|
||||
return myrec.value.groupname
|
||||
else
|
||||
return userStore.getNameToShow(user, col)
|
||||
}
|
||||
|
||||
function computedWidth() {
|
||||
const width = tools.getwidth($q) - 20;
|
||||
return `${Math.min(width, 600)}px`; // Limita la larghezza massima a 600px
|
||||
}
|
||||
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
t,
|
||||
myrec,
|
||||
costanti,
|
||||
getImgUser,
|
||||
naviga,
|
||||
navigaExt,
|
||||
setCmd,
|
||||
shared_consts,
|
||||
userStore,
|
||||
tools,
|
||||
toolsext,
|
||||
fieldsTable,
|
||||
cmdExt,
|
||||
visupage,
|
||||
showBadge,
|
||||
getNameToShow,
|
||||
calendarStore,
|
||||
disabilita,
|
||||
globalStore,
|
||||
computedWidth,
|
||||
statecolor,
|
||||
apriInfo,
|
||||
collanestr,
|
||||
editorestr,
|
||||
pagina_collegata,
|
||||
argomentistr,
|
||||
numprodtot,
|
||||
numcataloghistr,
|
||||
}
|
||||
},
|
||||
})
|
||||
196
src/components/CMyRecRaccoltaCataloghi/CMyRecRaccoltaCataloghi.vue
Executable file
196
src/components/CMyRecRaccoltaCataloghi/CMyRecRaccoltaCataloghi.vue
Executable file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<q-card
|
||||
v-if="myrec"
|
||||
bordered
|
||||
class="full-height flex flex-column justify-evenly"
|
||||
:style="`width: ` + opt.widthcard + `; ` + (opt.heightcard ? `height: ` + opt.heightcard + `;` : '')"
|
||||
>
|
||||
<q-img
|
||||
:width="opt.widthimg"
|
||||
@click="naviga(pagina_collegata)"
|
||||
:height="opt.heightimg"
|
||||
class="clickable-image"
|
||||
fit="cover"
|
||||
:src="tools.getFullFileName([myrec.foto_raccolta], table, '', myrec._id)"
|
||||
>
|
||||
<template v-slot:error>
|
||||
<div class="absolute-full flex flex-center text-white">immagine non impostata</div>
|
||||
</template>
|
||||
<!--<div class="text-h6 absolute-bottom text-left">
|
||||
{{ myrec.title }}
|
||||
</div>-->
|
||||
</q-img>
|
||||
|
||||
<q-card-section class="q-px-sm" style="margin-top: 0; flex-grow: 0; align-self: flex-start;">
|
||||
|
||||
<div
|
||||
class="q-mb-md text-center text-bold"
|
||||
style="font-size: 1.15rem"
|
||||
>
|
||||
<a
|
||||
:href="pagina_collegata"
|
||||
target="_blank"
|
||||
>{{ myrec.title }}</a
|
||||
>
|
||||
</div>
|
||||
<div class="q-px-md">
|
||||
<div class="text-caption text-h7 text-grey q-pb-xs">
|
||||
<q-icon name="fas fa-list-ol" /> {{ $t('racccat.numcataloghi') }}:
|
||||
<span :class="`text-` + (numcataloghistr === 0 ? 'red' : 'blue')">{{ numcataloghistr }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="myrec.pdf_online"
|
||||
class="text-caption text-h7 text-blue q-pb-xs"
|
||||
>
|
||||
<q-icon name="fas fa-book" />
|
||||
<a
|
||||
:href="myrec.pdf_online"
|
||||
target="_blank"
|
||||
>PDF OnLine</a
|
||||
>
|
||||
aggiornato al ({{ tools.getstrDate(myrec.data_online) }})
|
||||
</div>
|
||||
<div
|
||||
v-if="!tools.isUtente() && myrec.pdf_online_stampa && dettagli"
|
||||
class="text-caption text-h7 text-blue q-pb-xs"
|
||||
>
|
||||
<q-icon name="fas fa-print" />
|
||||
<a
|
||||
:href="myrec.pdf_online_stampa"
|
||||
target="_blank"
|
||||
>PDF per Stampa</a
|
||||
>
|
||||
aggiornato al ({{ tools.getstrDate(myrec.data_online_stampa) }})
|
||||
</div>
|
||||
<div
|
||||
v-if="!tools.isUtente() && dettagli"
|
||||
class="text-caption text-h7 text-grey q-pb-xs"
|
||||
>
|
||||
<q-icon name="fas fa-list" /> Lista generata il:
|
||||
<span :class="`text-` + (tools.isDateValid(myrec.data_lista_generata) ? 'blue' : 'red')"
|
||||
>{{ tools.getstrDate(myrec.data_lista_generata) || '(non ancora generata)' }} da
|
||||
{{ myrec.username_lista_generata }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="text-overline text-orange-9">{{collanestr}}</div>-->
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions
|
||||
v-if="!tools.isUtente() && dettagli"
|
||||
align="center"
|
||||
class="q-mt-auto q-mx-auto q-mb-sm"
|
||||
>
|
||||
<q-fab
|
||||
color="primary"
|
||||
icon="fas fa-caret-down"
|
||||
label="Menu"
|
||||
direction="up"
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-fab-action
|
||||
v-if="tools.canModifyThisRec(myrec, table) || tools.isManager() || editOn"
|
||||
@click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
|
||||
color="negative"
|
||||
:label="$t('reg.elimina')"
|
||||
icon="fas fa-trash-alt"
|
||||
/>
|
||||
<!--<q-fab-action
|
||||
v-if="tools.canModifyThisRec(myrec, table) || tools.isManager() || editOn"
|
||||
@click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
|
||||
color="accent"
|
||||
:label="$t('event.duplicate')"
|
||||
icon="fas fa-copy"
|
||||
/>-->
|
||||
<q-fab-action
|
||||
v-if="tools.canModifyThisRec(myrec, table) || editOn"
|
||||
:disable="!pagina_collegata"
|
||||
color="positive"
|
||||
label="Gestisci"
|
||||
icon="fas fa-book-open"
|
||||
@click="naviga(pagina_collegata)"
|
||||
/>
|
||||
<q-fab-action
|
||||
v-if="tools.canModifyThisRec(myrec, table) || editOn"
|
||||
@click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
|
||||
color="primary"
|
||||
:label="$t('reg.edit')"
|
||||
icon="fas fa-pencil-alt"
|
||||
/>
|
||||
</q-fab>
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
label="Info"
|
||||
icon="fas fa-info"
|
||||
@click="apriInfo = true"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="apriInfo">
|
||||
<q-card>
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
{{ myrec.title }}
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="white"
|
||||
label="CHIUDI"
|
||||
icon="close"
|
||||
v-close-popup
|
||||
></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section>
|
||||
<div class="row justify-center q-ma-sm q-pb-xs">
|
||||
<div
|
||||
style="width: 300px"
|
||||
class="q-ma-sm"
|
||||
>
|
||||
<CLabel
|
||||
:value="
|
||||
tools.getstrDate(myrec.data_lista_generata) + ' da ' + myrec.username_lista_generata ||
|
||||
'ancora non è stata generata'
|
||||
"
|
||||
label="Lista generata"
|
||||
:color="myrec.pdf_generato ? 'green' : 'red'"
|
||||
/>
|
||||
</div>
|
||||
<CLabel
|
||||
:value="myrec.pdf_generato || 'ancora non è stato generato'"
|
||||
label="PDF generato"
|
||||
:color="myrec.pdf_generato ? 'green' : 'red'"
|
||||
:copy="true"
|
||||
/>
|
||||
<CLabel
|
||||
:value="myrec.pdf_online || 'ancora non è andato ONLINE'"
|
||||
label="PDF On-Line Ufficiale"
|
||||
:color="myrec.pdf_online ? 'green' : 'red'"
|
||||
:copy="true"
|
||||
/>
|
||||
<CLabel
|
||||
:value="myrec.pdf_generato_stampa || 'ancora non è stato generato'"
|
||||
label="PDF per Stampa"
|
||||
:color="myrec.pdf_generato_stampa ? 'green' : 'red'"
|
||||
:copy="true"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<q-card-actions align="center">
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="Chiudi"
|
||||
@click="apriInfo = false"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script lang="ts" src="./CMyRecRaccoltaCataloghi.ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyRecRaccoltaCataloghi.scss';
|
||||
</style>
|
||||
1
src/components/CMyRecRaccoltaCataloghi/index.ts
Executable file
1
src/components/CMyRecRaccoltaCataloghi/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export { default as CMyRecRaccoltaCataloghi } from './CMyRecRaccoltaCataloghi.vue'
|
||||
Reference in New Issue
Block a user