CGridTableRec + fields + page
pagine: - Siti Web - Operazioni - Push...
This commit is contained in:
Paolo Arena
58
src/rootgen/admin/eventlist/eventlist.scss
Executable file
58
src/rootgen/admin/eventlist/eventlist.scss
Executable file
@@ -0,0 +1,58 @@
|
||||
.listaev {
|
||||
color: black;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
letter-spacing: 0.03333em;
|
||||
|
||||
&__date {
|
||||
font-weight: bold;
|
||||
color: #2ba0fd;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: red;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.066em;
|
||||
}
|
||||
|
||||
&__details {
|
||||
color: black;
|
||||
}
|
||||
|
||||
&__tdimg {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
&__table {
|
||||
margin: 10px;
|
||||
border-radius: 1rem;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
&__align_center_mobile {
|
||||
text-align: left;
|
||||
@media (max-width: 718px) {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
padding: 0.5rem !important;
|
||||
float: left;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 1rem;
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
float: none;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
156
src/rootgen/admin/eventlist/eventlist.ts
Executable file
156
src/rootgen/admin/eventlist/eventlist.ts
Executable file
@@ -0,0 +1,156 @@
|
||||
import { defineComponent, onMounted, ref } from 'vue'
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { func_tools } from '@src/store/Modules/toolsext'
|
||||
import { CTitle } from '../../../components/CTitle/index'
|
||||
import { CMyPage } from '../../../components/CMyPage/index'
|
||||
import { IBookedEvent, ICalendarState, IEvents, ITodo, ITodosState, IUserState, IUserFields } from '@src/model'
|
||||
import { lists } from '@src/store/Modules/lists'
|
||||
|
||||
import MixinUsers from '@src/mixins/mixin-users'
|
||||
import MixinOperator from '@src/mixins/mixin-operator'
|
||||
import MixinEvents from '@src/mixins/mixin-events'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useCalendarStore } from '@store/CalendarStore'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Eventlist',
|
||||
components: { CTitle, CMyPage },
|
||||
|
||||
setup() {
|
||||
|
||||
const shownote = ref(false)
|
||||
const eventsel = ref(null)
|
||||
const showPrev = ref(false)
|
||||
const numrec = ref(0)
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
|
||||
const calendarStore = useCalendarStore()
|
||||
const userStore = useUserStore()
|
||||
const $route = useRoute()
|
||||
|
||||
const { getTeacherByUsername } = MixinOperator()
|
||||
|
||||
const { UpdateDbByFields } = MixinEvents()
|
||||
|
||||
function getEventList() {
|
||||
const eventsloc: IEvents[] = []
|
||||
|
||||
const datenow = tools.addDays(tools.getDateNow(), -1)
|
||||
|
||||
let numevent = 0
|
||||
|
||||
calendarStore.eventlist.forEach((myevent: IEvents) => {
|
||||
// console.log(' ciclo i = ', i, calendarStore.eventlist[i])
|
||||
// let dateEvent = new Date(myevent.date + ' 00:00:00')
|
||||
const dateEvent = new Date(myevent.dateTimeEnd!)
|
||||
|
||||
let add = true
|
||||
|
||||
if (!showall) {
|
||||
add = calendarStore.getNumParticipants(myevent, showall(), tools.peopleWhere.participants) > 0
|
||||
}
|
||||
|
||||
if (add) {
|
||||
|
||||
if (showPrev.value) {
|
||||
if (dateEvent < datenow) {
|
||||
eventsloc.push(myevent)
|
||||
numevent++
|
||||
}
|
||||
} else {
|
||||
if (dateEvent >= datenow) {
|
||||
eventsloc.push(myevent)
|
||||
numevent++
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
numrec.value = numevent
|
||||
|
||||
if (showPrev.value) {
|
||||
eventsloc.reverse()
|
||||
}
|
||||
|
||||
return eventsloc.filter((rec) => rec.title !== '')
|
||||
}
|
||||
|
||||
function getNumEvent() {
|
||||
const eventsloc: IEvents[] = []
|
||||
|
||||
const datenow = tools.addDays(tools.getDateNow(), -1)
|
||||
|
||||
let numevent = 0
|
||||
|
||||
calendarStore.eventlist.forEach((myevent: IEvents) => {
|
||||
// console.log(' ciclo i = ', i, calendarStore.eventlist[i])
|
||||
// let dateEvent = new Date(myevent.date + ' 00:00:00')
|
||||
const dateEvent = new Date(myevent.dateTimeEnd!)
|
||||
|
||||
let add = true
|
||||
|
||||
if (!showall) {
|
||||
add = calendarStore.getNumParticipants(myevent, showall(), tools.peopleWhere.participants) > 0
|
||||
}
|
||||
|
||||
if (add) {
|
||||
if (showPrev.value) {
|
||||
if (dateEvent < datenow)
|
||||
numevent++
|
||||
} else {
|
||||
if (dateEvent >= datenow)
|
||||
numevent++
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
numrec.value = numevent
|
||||
|
||||
return eventsloc
|
||||
}
|
||||
|
||||
function mostra() {
|
||||
return $route.name
|
||||
}
|
||||
|
||||
function showall() {
|
||||
return $route.name === 'otherpages.admin.usereventlist'
|
||||
}
|
||||
|
||||
function gettitle() {
|
||||
if (showall())
|
||||
return t('otherpages.admin.usereventlist')
|
||||
else
|
||||
return t('otherpages.admin.eventlist')
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
getNumEvent()
|
||||
}
|
||||
|
||||
function change_rec(eventparam: any) {
|
||||
UpdateDbByFields($q, eventparam)
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
getEventList,
|
||||
tools,
|
||||
func_tools,
|
||||
lists,
|
||||
showall,
|
||||
calendarStore,
|
||||
userStore,
|
||||
getTeacherByUsername,
|
||||
numrec,
|
||||
shownote,
|
||||
}
|
||||
}
|
||||
})
|
||||
190
src/rootgen/admin/eventlist/eventlist.vue
Executable file
190
src/rootgen/admin/eventlist/eventlist.vue
Executable file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<CMyPage
|
||||
title="Events" keywords="" description="" imgbackground="../../public/images/calendario_eventi.jpg"
|
||||
sizes="max-height: 120px">
|
||||
|
||||
<div class="q-ma-sm q-pa-xs">
|
||||
<div v-if="!showall" class="text-h6 bg-red text-white text-center q-pa-xs shadow-max">Lista delle tue
|
||||
prenotazioni agli Eventi:
|
||||
</div>
|
||||
|
||||
<q-space></q-space>
|
||||
|
||||
<!--<q-toggle v-model="showPrev" :val="lists.MenuAction.SHOW_PREV_REC"
|
||||
:label="$t('grid.showprevedit')"></q-toggle>-->
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
|
||||
<thead>
|
||||
<th>{{ $t('cal.data') }}</th>
|
||||
<th>{{ $t('cal.event') }}</th>
|
||||
<th v-if="!tools.isMobile()">{{ $t('cal.teachertitle') }}</th>
|
||||
<th v-if="showall">
|
||||
<span v-if="!tools.isMobile()">{{ $t('cal.selnumpeople') }}</span>
|
||||
<span v-else>{{ $t('cal.selnumpeople_short') }}</span>
|
||||
</th>
|
||||
<th v-if="showall">
|
||||
{{ $t('cal.selnumpeopleLunch') }}
|
||||
</th>
|
||||
<th v-if="showall">
|
||||
{{ $t('cal.selnumpeopleDinner') }}
|
||||
</th>
|
||||
<th v-if="showall">
|
||||
{{ $t('cal.selnumpeopleDinnerShared') }}
|
||||
</th>
|
||||
<th>{{ $t('cal.peoplebooked') }}</th>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="(event, index) in getEventList()" :key="index" class="listaev listaev__table">
|
||||
<td>
|
||||
<div class="text-center text-blue">{{ func_tools.getDateStr(event.dateTimeStart) }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-center boldhigh">{{ event.title }}</div>
|
||||
</td>
|
||||
<td v-if="!tools.isMobile()">
|
||||
<div class="text-center">{{ getTeacherByUsername(event.teacher) }}
|
||||
<span v-if="isValidUsername(event.teacher2)"> - {{ getTeacherByUsername(event.teacher2) }}</span>
|
||||
<span v-if="isValidUsername(event.teacher3)"> - {{ getTeacherByUsername(event.teacher3) }}</span>
|
||||
<span v-if="isValidUsername(event.teacher4)"> - {{ getTeacherByUsername(event.teacher4) }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="showall">
|
||||
<div class="text-center">{{
|
||||
calendarStore.getNumParticipants(event, showall, tools.peopleWhere.participants)
|
||||
}}
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="showall">
|
||||
<div class="text-center">{{
|
||||
calendarStore.getNumParticipants(event, showall, tools.peopleWhere.lunch)
|
||||
}}
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="showall">
|
||||
<div class="text-center">{{
|
||||
calendarStore.getNumParticipants(event, showall, tools.peopleWhere.dinner)
|
||||
}}
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="showall">
|
||||
<div class="text-center">{{
|
||||
calendarStore.getNumParticipants(event, showall, tools.peopleWhere.dinnerShared)
|
||||
}}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-center">
|
||||
<q-btn
|
||||
v-if="calendarStore.getNumParticipants(event, showall, tools.peopleWhere.participants) > 0"
|
||||
flat
|
||||
dense
|
||||
color="positive"
|
||||
rounded
|
||||
icon="fas fa-user-check"
|
||||
@click="showpeople = true; eventsel = event"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
rounded
|
||||
:color="!!event.note ? 'positive' : 'dark'"
|
||||
icon="fas fa-pencil-alt"
|
||||
@click="shownote = true; eventsel = event"
|
||||
>
|
||||
</q-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
<q-dialog v-model="shownote">
|
||||
<q-card v-if="eventsel" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
Note: {{ eventsel.title }}
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section class="q-pa-xs inset-shadow">
|
||||
<q-input
|
||||
v-model="eventsel.note" style="min-height: 50px; " label="Note:"
|
||||
filled dense
|
||||
autogrow
|
||||
type="textarea" debounce="500"
|
||||
input-class="myinput-area"
|
||||
@input="change_rec(eventsel)">
|
||||
</q-input>
|
||||
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-dialog v-model="showpeople">
|
||||
<q-card v-if="eventsel" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar-title>
|
||||
{{ eventsel.title }}
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section class="q-pa-xs inset-shadow">
|
||||
<q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
|
||||
<thead>
|
||||
<th>Data</th>
|
||||
<th>Messaggio</th>
|
||||
<th>Partec</th>
|
||||
<th>Azione</th>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(eventbook, index) in calendarStore.getEventsBookedByIdEvent(eventsel._id, showall)"
|
||||
:key="index"
|
||||
class="listaev listaev__table">
|
||||
<td class="text-center">
|
||||
<div>{{ func_tools.getDateTimeShortStr(eventbook.datebooked) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<strong>{{ userStore.getNameSurnameByUserId(eventbook.userId) }}</strong> <span
|
||||
v-if="eventbook.msgbooking"> {{ $t('sendmsg.write') }}: </span><br>
|
||||
{{ eventbook.msgbooking }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span v-if="eventbook.numpeople > 0">Partecipanti: {{ eventbook.numpeople }}<br></span>
|
||||
<span v-if="eventbook.numpeopleLunch > 0">Pranzo: {{ eventbook.numpeopleLunch }}<br></span>
|
||||
<span v-if="eventbook.numpeopleDinner > 0">Cena: {{ eventbook.numpeopleDinner }}<br></span>
|
||||
<span v-if="eventbook.numpeopleDinnerShared > 0">Cena Condivisa: {{ eventbook.numpeopleDinnerShared }}<br></span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<q-btn
|
||||
flat round color="red" icon="fas fa-trash-alt" size="sm"
|
||||
@click="tools.CancelBookingEvent(mythis, eventsel, eventbook._id, false)"></q-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<div v-if="numrec === 0">
|
||||
<div v-if="!showPrev" class="text-blue text-center q-pa-xs shadow">
|
||||
Attualmente non hai nessuna Prenotazione futura.
|
||||
</div>
|
||||
<div v-else class="text-blue text-center q-pa-xs shadow">
|
||||
Non hai nessuna Prenotazione passata.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</template>
|
||||
<script lang="ts" src="./eventlist.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './eventlist.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user