- Fixed pagination not refreshing the data...

- Start creating single page of an Event
2019-11-06 22:28:45 +01:00
parent 571e948d39
commit 7fe6b5fb6a
16 changed files with 112 additions and 96 deletions
--- a/src/components/CCard/CCard.ts
+++ b/src/components/CCard/CCard.ts
@@ -36,6 +36,7 @@ export default class CCard extends Vue {
        name: '',
        surname: '',
        qualification: '',
+        usertelegram: '',
        disciplines: '',
        certifications: '',
        img: '',
--- a/src/components/CCard/CCard.vue
+++ b/src/components/CCard/CCard.vue
@@ -22,16 +22,27 @@
                    <q-icon class="flex-icon" name="mobile_friendly"></q-icon>
                    <span class="q-mx-sm">{{myop.cell}}</span>

-                    <q-btn fab-mini icon="fab fa-whatsapp"
+                    <div class="row justify-center q-gutter-xs ">
+                        <q-btn v-if="myop.email" fab-mini icon="fas fa-envelope"
+                               color="blue-grey-6" type="a"
+                               size="xs"
+                               :href="tools.getemailto(myop.email)" target="__blank">
+                        </q-btn>
+                        <q-btn v-if="tools.getHttpForWhatsapp(myop.cell)" fab-mini icon="fab fa-whatsapp"
                               color="green" type="a"
                               size="xs"
-
                               :href="tools.getHttpForWhatsapp(myop.cell)" target="__blank">
+                        </q-btn>

+                        <q-btn v-if="tools.getHttpForTelegram(myop.usertelegram)" fab-mini icon="fab fa-telegram"
+                               color="blue" type="a"
+                               size="xs"
+                               :href="tools.getHttpForTelegram(myop.usertelegram)" target="__blank">
                        </q-btn>
                    </div>
+                </div>
                <div class="op__email">
-                    <q-icon class="flex-icon" name="contact_mail"> </q-icon>&nbsp;
+                    <q-icon class="flex-icon" name="contact_mail"></q-icon>&nbsp;
                    <a :href="tools.getemailto(myop.email)" target="_blank">{{myop.email}}
                    </a>
                </div>
--- a/src/components/CEventsCalendar/CEventsCalendar.ts
+++ b/src/components/CEventsCalendar/CEventsCalendar.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import { CalendarStore, UserStore } from '@store'

 import { Logo } from '../../components/logo/index'
@@ -31,16 +31,17 @@ import { lists } from '../../store/Modules/lists'
 import { GlobalStore, MessageStore } from '../../store/Modules'
 import { IMessagePage, IMessage, IIdentity, MsgDefault } from '../../model'
 import MixinUsers from '../../mixins/mixin-users'
-import { CDateTime } from '../CDateTime'
 import MixinOperator from '../../mixins/mixin-operator'
+import MixinEvents from '../../mixins/mixin-events'
+import { CDateTime } from '../CDateTime'
 import { CMyAvatar } from '../CMyAvatar'

@Component({
-  mixins: [MixinOperator, MixinUsers],
+  mixins: [MixinOperator, MixinUsers, MixinEvents],
  name: 'CEventsCalendar',
  components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor, CDateTime, CMyAvatar }
 })
-export default class CEventsCalendar extends Vue {
+export default class CEventsCalendar extends MixinEvents {
  public $q
  public $t: any
  public calendarView = 'month'
@@ -48,6 +49,7 @@ export default class CEventsCalendar extends Vue {
  public formDefault: IEvents = {
    title: '',
    details: '',
+    bodytext: '',
    dateTimeStart: tools.getstrYYMMDDDateTime(tools.getDateNow()),
    dateTimeEnd: tools.getstrYYMMDDDateTime(tools.getDateNow()),
    icon: '',
@@ -284,9 +286,6 @@ export default class CEventsCalendar extends Vue {
    return (CalendarStore.state.intervalRange.max - CalendarStore.state.intervalRange.min) * (1 / CalendarStore.state.intervalRangeStep)
  }

-  get editable() {
-    return CalendarStore.state.editable
-  }

  get containerStyle() {
    const styles = { height: '' }
@@ -851,17 +850,6 @@ export default class CEventsCalendar extends Vue {
    return await CalendarStore.actions.BookEvent(eventparam)
  }

-  public isAlreadyBooked(eventparam: IEvents) {
-    return CalendarStore.getters.findEventBooked(eventparam, true)
-  }
-
-  public getImgEvent(event: IEvents) {
-    if (!!event.img)
-      return '../../statics/' + event.img
-    else
-      return '../../statics/images/noimg.png'
-  }
-
  get getContribTypeArr() {
    return CalendarStore.state.contribtype
  }
@@ -874,15 +862,6 @@ export default class CEventsCalendar extends Vue {
    return CalendarStore.state.wheres
  }

-  public isShowPrice(event: IEvents) {
-    const rec = CalendarStore.getters.getContribtypeRec(event.contribtype)
-    return (rec) ? rec.showprice : true
-  }
-
-  public getContribtypeById(id) {
-    return CalendarStore.getters.getContribtypeById(id)
-  }
-
  public createContribType(value) {
    console.log('createContribType', value)
    tools.createNewRecord(this, 'contribtype', { label: value }).then((myrec) => {
@@ -897,26 +876,6 @@ export default class CEventsCalendar extends Vue {
    return this.dateFormatter.format(mydate)
  }

-  public getPrice(event: IEvents) {
-    let myprice = (event.price > 0) ? event.price + ' €' : ''
-    myprice = (event.price === -1) ? this.$t('event.askinfo') : myprice
-
-    if (event.infoafterprice)
-      myprice += ' ' + event.infoafterprice
-
-    return myprice
-  }
-
-  public getWhereIcon(where) {
-    const whererec = CalendarStore.getters.getWhereRec(where)
-    return (whererec) ? whererec.whereicon : ''
-  }
-
-  public getWhereName(where) {
-    const whererec = CalendarStore.getters.getWhereRec(where)
-    return (whererec) ? whererec.placename : ''
-  }
-
  public badgeClasses(eventparam, type) {
    const cssColor = tools.isCssColor(eventparam.bgcolor)
    const isHeader = type === 'header'
@@ -1027,22 +986,8 @@ export default class CEventsCalendar extends Vue {
    return eventsloc
  }

-  public isEventEnabled(myevent) {
-    // check if event is in the past
-    const datenow = tools.addDays(tools.getDateNow(), -1)
-
-    // console.log('datenow', datenow, 'end', myevent.dateTimeEnd)
-
-    return (new Date(myevent.dateTimeEnd) >= datenow)
-  }
-
  public getTitleEv(event: IEvents) {
    return (!!event.short_tit) ? event.short_tit : event.title
  }

-  public getStyleByEvent(event: IEvents) {
-    if (event === this.myevent) {
-      return 'border: inset; border-color: darkblue; border-width: 3px; padding: 5px !important; '
-    }
-  }
 }
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -74,7 +74,7 @@
                                        <q-avatar v-if="getWhereIcon(myevent.wherecode)">
                                            <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
                                        </q-avatar>
-                                        <q-avatar color="blue" font-size="20px" text-color="white" icon="home">
+                                        <q-avatar v-else color="blue" font-size="20px" text-color="white" icon="home">
                                        </q-avatar>
                                        <span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
                                    </q-chip>
@@ -528,8 +528,8 @@
                        <div class="listaev__align_chips">
                            <img :src="getImgEvent(event)"
                                 @click="selectEvent(event)"
-                                 class="text-left padding_cell listaev__tdimg listaev__img cursor-pointer"
-                                :style="getStyleByEvent(event)">
+                                 class="text-left padding_cell listaev__tdimg listaev__img cursor-pointer q-mx-sm"
+                                :style="getStyleByEvent(event, event === myevent)">
                            <q-chip dense v-if="isAlreadyBooked(event)" class="cltexth4 chipbooked shadow-5 q-mb-md"
                                    color="green" text-color="white"
                                    icon="event_available">{{$t('cal.booked')}}
@@ -587,16 +587,25 @@
                                </q-btn>
                                <!-- altrimenti mostra solo Chip -->
                                <div v-else>
-                                    <div v-if="tools.isMobile()" class="cltexth3 text-center"
-                                         :style="`background-color: ${event.bgcolor} !important; color: white !important;`">
-                                        {{event.title}}
-                                    </div>
-                                    <q-chip v-else class="cltexth3 text-center"
+                                    <q-btn size="md" type="a"
+                                           :to="`/event/` + event._id"
+                                           target="_blank"
                                           :style="`background-color: ${event.bgcolor} !important; color: white !important;`"
-                                            text-color="white"
-                                            :icon="event.icon"
-                                            dense>{{event.title}}
-                                    </q-chip>
+                                           ripple rounded
+                                           :label="event.title" :icon="event.icon"
+                                           :color="event.bgcolor" text-color="white" glossy>
+
+                                    </q-btn>
+                                    <!--<div v-if="tools.isMobile()" class="cltexth3 text-center"-->
+                                         <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`">-->
+                                        <!--{{event.title}}-->
+                                    <!--</div>-->
+                                    <!--<q-chip v-else class="cltexth3 text-center"-->
+                                            <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`"-->
+                                            <!--text-color="white"-->
+                                            <!--:icon="event.icon"-->
+                                            <!--dense>{{event.title}}-->
+                                    <!--</q-chip>-->
                                </div>
                            </div>

--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -180,6 +180,10 @@ export default class CGridTableRec extends Vue {
    const startRow = (page - 1) * rowsPerPage
    const endRow = startRow + fetchCount

+    console.log('startRow', startRow)
+
+    this.serverData = []
+
    // fetch data from "server"
    this.fetchFromServer(startRow, endRow, filter, sortBy, descending).then((ris) => {

@@ -189,12 +193,14 @@ export default class CGridTableRec extends Vue {
      if (this.returnedData === []) {
        this.serverData = []
      } else {
-        if (this.serverData.length > 0)
-          this.serverData.splice(0, this.serverData.length, ...this.returnedData)
-        else
+        // if (this.serverData.length > 0)
+        //   this.serverData.splice(0, this.serverData.length, ...this.returnedData)
+        // else
        this.serverData = [...this.returnedData]
      }

+      console.log('this.serverData', this.serverData)
+
      // don't forget to update local pagination object
      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
@@ -358,7 +364,7 @@ export default class CGridTableRec extends Vue {
    // console.log('this.filter', this.filter)

    this.onRequest({
-      pagination: this.pagination,
+      pagination: this.pagination
    })
  }

--- a/src/components/Footer/Footer.ts
+++ b/src/components/Footer/Footer.ts
@@ -42,6 +42,11 @@ export default class Footer extends Vue {
    return GlobalStore.getters.getValueSettingsByKey('WHATSAPP_CELL')
  }

+  get Telegram_UsernameHttp() {
+
+    return tools.getHttpForTelegram(GlobalStore.getters.getValueSettingsByKey('TELEGRAM_USERNAME'))
+  }
+
  get FBPage() {
    const fb = GlobalStore.getters.getValueSettingsByKey('URL_FACEBOOK')
    return fb
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -35,7 +35,9 @@
                                <span v-for="rec in getarrValDb('CONTACTS_EMAIL_CELL')">
                                    {{ rec.name }}: {{ rec.phone }}
                                    <a v-if="!!tools.getHttpForWhatsapp(rec.phone)" :href="tools.getHttpForWhatsapp(rec.phone)" target="_blank">
-                                        <i aria-hidden="true" class="q-icon fab fa-whatsapp icon_contact links"></i></a>
+                                        <i aria-hidden="true" class="q-icon fab fa-whatsapp icon_contact links q-mx-xs"></i></a>
+                                    <a v-if="!!tools.getHttpForTelegram(rec.usertelegram)" :href="tools.getHttpForTelegram(rec.usertelegram)" target="_blank">
+                                        <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links q-mx-xs"></i></a>
                                    <br>
                                    <i v-if="rec.email" aria-hidden="true"
                                       class="q-icon fas fa-envelope q-mx-sm"></i> <a :href="`mailto:`+ rec.email "
@@ -68,6 +70,9 @@
                            <a v-if="!!Whatsapp_Cell" :href="ChatWhatsapp" target="_blank">
                                <i aria-hidden="true" class="q-icon fab fa-whatsapp icon_contact links"></i></a>

+                            <a v-if="!!Telegram_UsernameHttp" :href="Telegram_UsernameHttp" target="_blank">
+                                <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
+

                            <!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
                            <!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
--- a/src/layouts/menuone/menuOne.scss
+++ b/src/layouts/menuone/menuOne.scss
@@ -61,6 +61,10 @@
  color: red;
 }

+.isCalendar {
+  color: #fff241;
+}
+
 .isManager {
  color: green;
 }
--- a/src/layouts/menuone/menuOne.ts
+++ b/src/layouts/menuone/menuOne.ts
@@ -74,6 +74,9 @@ export default class MenuOne extends Vue {
    if (elem.onlyManager)
      menu += ' isManager'

+    if (elem.extraclass)
+      menu += ' ' + elem.extraclass
+
    return menu
  }
 }
--- a/src/mixins/mixin-base.ts
+++ b/src/mixins/mixin-base.ts
@@ -31,6 +31,7 @@ export default class MixinBase extends Vue {
  public getarrValDb(keystr) {
    const myval = GlobalStore.getters.getValueSettingsByKey(keystr)
    // console.log('myval', myval)
+    try {
      if (myval) {
        const myrec = JSON.parse(myval)
        // console.log('*************** getarrValDb')
@@ -39,5 +40,8 @@ export default class MixinBase extends Vue {
      } else {
        return []
      }
+    }catch (e) {
+      return []
+    }
  }
 }
--- a/src/model/Calendar.ts
+++ b/src/model/Calendar.ts
@@ -6,6 +6,7 @@ export interface IEvents {
  short_tit?: string
  title?: string
  details?: string
+  bodytext?: string
  dateTimeStart?: Date
  dateTimeEnd?: Date
  side?: string
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -96,6 +96,7 @@ export interface IListRoutes {
  submenu?: boolean
  onlyAdmin?: boolean
  onlyManager?: boolean
+  extraclass?: string
  meta?: any
  idelem?: string
  urlroute?: string
@@ -118,6 +119,7 @@ export interface IOperators {
  certifications?: string
  img?: string
  cell?: string
+  usertelegram?: string
  paginaweb?: string
  paginafb?: string
  intro?: string
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -130,6 +130,7 @@ const msgglobal = {
    },
    op: {
      qualification: 'Qualifica',
+      usertelegram: 'Username Telegram',
      disciplines: 'Discipline',
      certifications: 'Certificazioni',
      intro: 'Introduzione',
@@ -264,6 +265,7 @@ const msgglobal = {
      short_tit: 'Titolo Breve',
      title: 'Titolo',
      details: 'Dettagli',
+      bodytext: 'Testo Evento',
      dateTimeStart: 'Data Inizio',
      dateTimeEnd: 'Data Fine',
      bgcolor: 'Colore Sfondo',
@@ -429,6 +431,7 @@ const msgglobal = {
    },
    op: {
      qualification: 'Calificación',
+      usertelegram: 'Username Telegram',
      disciplines: 'Disciplinas',
      certifications: 'Certificaciones',
      intro: 'Introducción',
@@ -561,6 +564,7 @@ const msgglobal = {
      short_tit: 'Título Corto',
      title: 'Título',
      details: 'Detalles',
+      bodytext: 'Texto del evento',
      dateTimeStart: 'Fecha de Inicio',
      dateTimeEnd: 'Fecha Final',
      bgcolor: 'Color de fondo',
@@ -725,6 +729,7 @@ const msgglobal = {
    },
    op: {
      qualification: 'Qualification',
+      usertelegram: 'Username Telegram',
      disciplines: 'Disciplines',
      certifications: 'Certifications',
      intro: 'Introduction',
@@ -857,6 +862,7 @@ const msgglobal = {
      short_tit: 'Titre abrégé\'',
      title: 'Titre',
      details: 'Détails',
+      bodytext: 'texte de l\'événement',
      dateTimeStart: 'Data Initiale',
      dateTimeEnd: 'Date de fin',
      bgcolor: 'Couleur de fond',
@@ -1021,6 +1027,7 @@ const msgglobal = {
    },
    op: {
      qualification: 'Qualification',
+      usertelegram: 'Username Telegram',
      disciplines: 'Disciplines',
      certifications: 'Certifications',
      intro: 'Introduction',
@@ -1152,6 +1159,7 @@ const msgglobal = {
      short_tit: 'Short Title',
      title: 'Title',
      details: 'Details',
+      bodytext: 'Event Text',
      dateTimeStart: 'Date Start',
      dateTimeEnd: 'Date End',
      bgcolor: 'Background color',
@@ -1317,6 +1325,7 @@ const msgglobal = {
    },
    op: {
      qualification: 'Qualification',
+      usertelegram: 'Username Telegram',
      disciplines: 'Disciplines',
      certifications: 'Certifications',
      intro: 'Introduction',
@@ -1449,6 +1458,7 @@ const msgglobal = {
      short_tit: 'Short Title',
      title: 'Title',
      details: 'Details',
+      bodytext: 'Event Text',
      dateTimeStart: 'Date Start',
      dateTimeEnd: 'Date End',
      bgcolor: 'Background color',
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -75,6 +75,7 @@ const colTableOperator = [
  AddCol({ name: 'email', label_trans: 'reg.email' }),
  AddCol({ name: 'img', label_trans: 'event.img' }),
  AddCol({ name: 'cell', label_trans: 'reg.cell' }),
+  AddCol({ name: 'usertelegram', label_trans: 'op.usertelegram' }),
  AddCol({ name: 'qualification', label_trans: 'op.qualification' }),
  AddCol({ name: 'disciplines', label_trans: 'op.disciplines' }),
  AddCol({ name: 'certifications', label_trans: 'op.certifications' }),
@@ -90,7 +91,8 @@ const colTableEvents = [
  AddCol({ name: 'typol', label_trans: 'event.typol' }),
  AddCol({ name: 'short_tit', label_trans: 'event.short_tit' }),
  AddCol({ name: 'title', label_trans: 'event.title' }),
-  AddCol({ name: 'details', label_trans: 'event.details' }),
+  AddCol({ name: 'details', label_trans: 'event.details', fieldtype: tools.FieldType.html }),
+  AddCol({ name: 'bodytext', label_trans: 'event.bodytext', fieldtype: tools.FieldType.html }),
  AddCol({ name: 'dateTimeStart', label_trans: 'event.dateTimeStart', fieldtype: tools.FieldType.date }),
  AddCol({ name: 'dateTimeEnd', label_trans: 'event.dateTimeEnd', fieldtype: tools.FieldType.date }),
  AddCol({ name: 'bgcolor', label_trans: 'event.bgcolor' }),
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -2626,6 +2626,13 @@ export const tools = {
      return 'https://wa.me/' + mynum
    else
      return ''
+  },
+
+  getHttpForTelegram(usertelegram) {
+    if (usertelegram)
+      return 'https://t.me/' + usertelegram
+    else
+      return ''
  }

 // getLocale() {
--- a/src/views/admin/testp1/testp1.ts
+++ b/src/views/admin/testp1/testp1.ts
@@ -23,11 +23,12 @@ export default class Testp1 extends Vue {
  public testpao1_array: (state: IGlobalState, miorec: ICfgServer) => ICfgServer[]

  @Watch('GlobalStore.state.testp1.mioarray', { immediate: true, deep: true })
-  array_changed() {
+  public array_changed() {
    console.log('*** array_changed *** ', GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1])
  }

-  @Watch('$route.params.category') changecat() {
+  @Watch('$route.params.category')
+  public changecat() {
    // this.mytypetransgroup = ''
    console.log('PRIMA this.paramcategory', this.paramcategory)
    this.paramcategory = this.$route.params.category