From 8ba6c8361be62fcb736964b665171b95e5c3f23a Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Thu, 7 Nov 2019 23:11:05 +0100
Subject: [PATCH]  - Create single page of an Event (to share on FB for
 example).

---
 .../CEventsCalendar/CEventsCalendar.ts        | 10 +++
 .../CEventsCalendar/CEventsCalendar.vue       | 60 ++++++++++----
 src/components/CMyPage/CMyPage.ts             |  1 +
 src/components/CMyPage/CMyPage.vue            |  2 +-
 .../CMySingleEvent/CMySingleEvent.scss        | 83 +++++++++++++++++++
 .../CMySingleEvent/CMySingleEvent.vue         | 33 ++++----
 src/components/CTitle/CTitle.ts               |  3 +-
 src/components/CTitle/CTitle.vue              |  2 +-
 src/components/Footer/Footer.ts               |  2 +-
 src/components/Footer/Footer.vue              |  6 +-
 src/statics/i18n.js                           | 15 ++--
 11 files changed, 176 insertions(+), 41 deletions(-)

diff --git a/src/components/CEventsCalendar/CEventsCalendar.ts b/src/components/CEventsCalendar/CEventsCalendar.ts
index afd6f96..ed5c258 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.ts
+++ b/src/components/CEventsCalendar/CEventsCalendar.ts
@@ -48,6 +48,7 @@ export default class CEventsCalendar extends MixinEvents {
   public $t: any
   public calendarView = 'month'
   public selectedDate = '2019-04-01'
+  public tabeditor: string = 'details'
   public formDefault: IEvents = {
     title: '',
     details: '',
@@ -497,6 +498,13 @@ export default class CEventsCalendar extends MixinEvents {
     return (this.isAlreadyBooked(event) ? 'text-left bg-light-green-1' : 'text-left')
   }
 
+  public checkFieldUndef() {
+    if (this.eventForm.bodytext === undefined)
+      this.eventForm.bodytext = ''
+    if (this.eventForm.details === undefined)
+      this.eventForm.details = ''
+  }
+
   public editEvent(eventparam) {
     console.log('editEvent - INIZIO')
     this.resetForm()
@@ -505,6 +513,8 @@ export default class CEventsCalendar extends MixinEvents {
 
     this.eventForm = { ...eventparam }
 
+    this.checkFieldUndef()
+
     this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(eventparam.dateTimeStart)
     this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(eventparam.dateTimeEnd)
 
diff --git a/src/components/CEventsCalendar/CEventsCalendar.vue b/src/components/CEventsCalendar/CEventsCalendar.vue
index c03a801..93b20fb 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -75,7 +75,7 @@
                                             <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)">
                                         </q-avatar>
                                         <q-avatar v-else color="blue" font-size="20px" text-color="white" icon="home">
-                                        </q-avatar>
+                                        </q-avatar>showpage
                                         <span class="cal__teacher-content">{{getWhereName(myevent.wherecode)}}</span>
                                     </q-chip>
                                 </span>
@@ -93,7 +93,7 @@
                         </div>
                         <p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
                             <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
-                                   target="_blank" rounded color="primary" icon="info" :label="$t('cal.showinfo')">
+                                   target="_blank" rounded color="primary" icon="info" :label="$t('cal.showpdf')">
                             </q-btn>
                         </p>
                     </div>
@@ -132,9 +132,35 @@
                                  borderless rounded dense :label="$t('event.title')"
                                  :rules="[v => v && v.length > 0 || $t('event.notempty')]"></q-input>
 
-                        <CMyEditor :value.sync="eventForm.details">
 
-                        </CMyEditor>
+                        <q-tabs
+                                v-model="tabeditor"
+                                dense
+                                class="text-grey"
+                                active-color="primary"
+                                indicator-color="primary"
+                                align="justify"
+                                narrow-indicator
+                        >
+                            <q-tab name="details" label="Descrizione"/>
+                            <q-tab name="container" label="Contenuto"/>
+                        </q-tabs>
+
+
+                        <q-tab-panels v-model="tabeditor" animated>
+                            <q-tab-panel name="details">
+                                <CMyEditor :value.sync="eventForm.details">
+
+                                </CMyEditor>
+                            </q-tab-panel>
+                            <q-tab-panel name="container">
+                                <CMyEditor :value.sync="eventForm.bodytext">
+
+                                </CMyEditor>
+                            </q-tab-panel>
+
+                        </q-tab-panels>
+
 
                         <!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
 
@@ -304,7 +330,7 @@
 
                         <p v-if="myevent.linkpdf" style="margin-top: 10px; text-align: center">
                             <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
-                                   target="_blank" rounded color="primary" icon="info" :label="$t('cal.showinfo')">
+                                   target="_blank" rounded color="primary" icon="info" :label="$t('cal.showpdf')">
                             </q-btn>
                         </p>
                     </div>
@@ -377,7 +403,7 @@
         <!-- the calendar -->
         <q-page v-if="visuAllCal" class="column" style="min-height: 500px !important;">
 
-            <div >
+            <div>
                 <q-toolbar class="mytoolbar">
                     <q-btn color="primary" round icon="keyboard_arrow_left" @click="calendarPrev"/>
                     <q-btn color="primary" round icon="keyboard_arrow_right" @click="calendarNext"/>
@@ -669,16 +695,20 @@
                                 </div>
 
 
-                                <p class="text-center">
-                                        <span v-if="event.linkpdf" class="">
-                                            <q-btn size="md" type="a" :href="`../../statics/` + event.linkpdf"
-                                                   target="_blank" rounded color="primary" icon="info"
-                                                   :label="$t('cal.showinfo')">
-
-                                            </q-btn>
-                                        </span>
-                                </p>
                                 <div class="row justify-end">
+                                    <div class="justify-start">
+                                        <q-btn v-if="event.linkpdf" size="md" type="a"
+                                               :href="`../../statics/` + event.linkpdf"
+                                               target="_blank" rounded color="primary" icon="info"
+                                               :label="$t('cal.showpdf')">
+
+                                        </q-btn>
+                                        <q-btn v-if="event.bodytext" rounded outline class="q-mx-sm"
+                                               color="primary"
+                                               :to="`/event/` + event._id"
+                                               :label="$t('event.showpage')">
+                                        </q-btn>
+                                    </div>
                                     <q-btn rounded outline class="q-mx-sm"
                                            color="primary" @click="askForInfoEventMenu(event)"
                                            :label="$t('event.askinfo')">
diff --git a/src/components/CMyPage/CMyPage.ts b/src/components/CMyPage/CMyPage.ts
index fb44dd4..cfa5af9 100644
--- a/src/components/CMyPage/CMyPage.ts
+++ b/src/components/CMyPage/CMyPage.ts
@@ -35,6 +35,7 @@ export default class CMyPage extends Vue {
   @Prop({ required: false, default: '' }) public img: string
   @Prop({ required: false, default: '' }) public imgbackground: string
   @Prop({ required: false, default: '' }) public sizes: string
+  @Prop({ required: false, default: '' }) public styleadd: string
   public $t
   public $q
 
diff --git a/src/components/CMyPage/CMyPage.vue b/src/components/CMyPage/CMyPage.vue
index cc33c69..147afef 100644
--- a/src/components/CMyPage/CMyPage.vue
+++ b/src/components/CMyPage/CMyPage.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <CTitle v-if="imgbackground" :imgbackground="imgbackground"
-                :headtitle="title" :sizes="sizes"></CTitle>
+                :headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
         <div v-if="!imgbackground">
             <CImgTitle v-if="img" :src="img" :title="title">
             </CImgTitle>
diff --git a/src/components/CMySingleEvent/CMySingleEvent.scss b/src/components/CMySingleEvent/CMySingleEvent.scss
index 50a72ae..b9c7f03 100644
--- a/src/components/CMySingleEvent/CMySingleEvent.scss
+++ b/src/components/CMySingleEvent/CMySingleEvent.scss
@@ -1,3 +1,5 @@
+$graytext: #555;
+
 .listaev {
   color: black;
   font-size: 0.75rem;
@@ -84,3 +86,84 @@
   }
 
 }
+
+.cal {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__title {
+    color: white;
+    font-weight: 700;
+    font-size: 1rem;
+    padding-bottom: 10px;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__hours {
+    color: blue;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      font-weight: 400;
+    }
+  }
+
+  &__where {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__when {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__teacher {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__quota {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+
+    }
+  }
+
+  &__img {
+    width: 100px;
+    height: 100px;
+    padding: 10px;
+  }
+
+}
+
diff --git a/src/components/CMySingleEvent/CMySingleEvent.vue b/src/components/CMySingleEvent/CMySingleEvent.vue
index 038d84e..4d552c1 100644
--- a/src/components/CMySingleEvent/CMySingleEvent.vue
+++ b/src/components/CMySingleEvent/CMySingleEvent.vue
@@ -2,7 +2,7 @@
     <div>
         <CMyPage v-if="myevent" :imgbackground="myevent.img" :title="myevent.title" keywords="" description="">
 
-            <div class="q-ma-md">
+            <div class="q-mx-md">
                 <div class="listaev__align_chips q-ma-md">
                     <img :src="getImgEvent(myevent)"
                          @click="selectEvent(myevent)"
@@ -79,7 +79,7 @@
 
                     <div style="margin: 10px;"></div>
 
-                    <p v-if="myevent.bodytext" class="listaev__details text-left" v-html="myevent.bodytext"></p>
+                    <p v-if="myevent.bodytext" class="listaev__details text-left q-mb-md" v-html="myevent.bodytext"></p>
                     <p v-else class="listaev__details" v-html="myevent.details"></p>
 
                     <div v-if="myevent.teacher" class="">
@@ -97,7 +97,7 @@
                             <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher2)}}</span>
                         </q-chip>
 
-                        <span v-if="myevent.wherecode" class="">
+                        <span v-if="myevent.wherecode" class="q-ma-md">
                                         <span v-if="tools.isMobile()"><br/></span>
                                         <span class="cal__where-title">{{$t('cal.where')}}: </span>
 
@@ -112,7 +112,7 @@
                                         </q-chip>
                                     </span>
                     </div>
-                    <div v-if="myevent.contribtype" class="">
+                    <div v-if="myevent.contribtype" class="q-ma-sm">
                                 <span class="cal__quota-title">{{$t('event.price')}}:<span
                                         class="margin_with"></span></span>
                         <span v-if="!isShowPrice(myevent)" class="">
@@ -128,21 +128,26 @@
                     </div>
 
 
-                    <p class="text-center">
-                                        <span v-if="myevent.linkpdf" class="">
-                                            <q-btn size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
-                                                   target="_blank" rounded color="primary" icon="info"
-                                                   :label="$t('cal.showinfo')">
+                    <div class="row justify-start q-ma-md">
+                        <q-btn v-if="myevent.linkpdf"
+                               size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
+                               target="_blank" rounded outline
+                               color="primary" icon="info"
+                               :label="$t('cal.showpdf')">
 
-                                            </q-btn>
-                                        </span>
-                    </p>
-                    <div class="row justify-end">
+                        </q-btn>
+                        <q-btn v-if="myevent.bodytext" rounded outline class="q-mx-sm"
+                               color="primary"
+                               :to="`/event/` + myevent._id"
+                               :label="$t('event.showpage')">
+                        </q-btn>
+                    </div>
+                    <div class="row justify-end q-ma-md">
                         <q-btn rounded outline class="q-mx-sm"
                                color="primary" @click="askForInfoEventMenu(myevent)"
                                :label="$t('event.askinfo')">
                         </q-btn>
-                        <q-btn rounded outline class="q-mx-sm"
+                        <q-btn rounded class="q-mx-sm"
                                v-if="!myevent.nobookable && !isAlreadyBooked(myevent) && static_data.functionality.BOOKING_EVENTS"
                                color="primary" @click="addBookEventMenu(myevent)"
                                :label="$t('cal.booking')" :disable="!isEventEnabled(myevent)">
diff --git a/src/components/CTitle/CTitle.ts b/src/components/CTitle/CTitle.ts
index d30fbe1..2139656 100644
--- a/src/components/CTitle/CTitle.ts
+++ b/src/components/CTitle/CTitle.ts
@@ -10,10 +10,11 @@ import { Screen } from 'quasar'
   name: 'CTitle'
 })
 export default class CTitle extends Vue {
+  @Prop({ required: true }) public headtitle: string
   @Prop({ required: false, default: '' }) public imgbackground: string
   @Prop({ required: false, default: '' }) public imghead: string
   @Prop({ required: false, default: '' }) public sizes: string
-  @Prop({ required: true }) public headtitle: string
+  @Prop({ required: false, default: '' }) public styleadd: string
 
   get tools() {
     return tools
diff --git a/src/components/CTitle/CTitle.vue b/src/components/CTitle/CTitle.vue
index 699b130..f7cc0ae 100644
--- a/src/components/CTitle/CTitle.vue
+++ b/src/components/CTitle/CTitle.vue
@@ -3,7 +3,7 @@
         <q-img v-if="imgbackground" :src="getsrc"
                :style="tools.styles_imgtitle(sizes)">
 
-            <div class="absolute-bottom text-body1 text-center">
+            <div class="absolute-bottom text-body1 text-center" :style="styleadd">
                 <h2 class="titletext">{{headtitle}}</h2>
             </div>
         </q-img>
diff --git a/src/components/Footer/Footer.ts b/src/components/Footer/Footer.ts
index c5e5c8d..4789b42 100644
--- a/src/components/Footer/Footer.ts
+++ b/src/components/Footer/Footer.ts
@@ -30,7 +30,7 @@ export default class Footer extends Vue {
     return tools
   }
 
-  get mythis() {
+  get mythisfoot() {
     return this
   }
 
diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
index 92d36ce..0407441 100644
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -98,16 +98,16 @@
                         <div v-if="myitemmenu.infooter">
 
                             <div v-if="myitemmenu.solotitle">
-                                <span class="footer_link">{{tools.getLabelByItem(myitemmenu, mythis)}}</span><br/>
+                                <span class="footer_link">{{tools.getLabelByItem(myitemmenu, mythisfoot)}}</span><br/>
                             </div>
                             <div v-else>
                                 <router-link :to="myitemmenu.path">
                                     <span class="footer_link"><span
                                             v-if="myitemmenu.level_child > 0">&nbsp;&nbsp;&nbsp;</span>
-                                        {{tools.getLabelByItem(myitemmenu, mythis)}}</span><br/>
+                                        {{tools.getLabelByItem(myitemmenu, mythisfoot)}}</span><br/>
                                 </router-link>
                             </div>
-                            <!--<a :href="myitemmenu.path"><span class="footer_link">{{tools.getLabelByItem(myitemmenu, mythis)}}</span></a><br/>-->
+                            <!--<a :href="myitemmenu.path"><span class="footer_link">{{tools.getLabelByItem(myitemmenu, mythisfoot)}}</span></a><br/>-->
                         </div>
                     </div>
                 </div>
diff --git a/src/statics/i18n.js b/src/statics/i18n.js
index 7cff765..ef2941d 100644
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -247,7 +247,7 @@ const msgglobal = {
       selnumpeople: 'Partecipanti',
       selnumpeople_short: 'Num',
       msgbooking: 'Messaggio da inviare',
-      showinfo: 'Vedi Info',
+      showpdf: 'Vedi PDF',
       bookingtextdefault: 'Mi prenoto all\'evento',
       bookingtextdefault_of: 'di',
       data: 'Data',
@@ -277,6 +277,7 @@ const msgglobal = {
       contribtype: 'Tipo Contributo',
       price: 'Contributo',
       askinfo: 'Chiedi Info',
+      showpage: 'Vedi Pagina',
       infoafterprice: 'Note dopo la Quota',
       teacher: 'Insegnante',  // teacherid
       teacher2: 'Insegnante2', // teacherid2
@@ -546,7 +547,7 @@ const msgglobal = {
       selnumpeople: 'Partecipantes',
       selnumpeople_short: 'Num',
       msgbooking: 'Mensaje para enviar',
-      showinfo: 'Ver Info',
+      showpdf: 'Ver PDF',
       bookingtextdefault: 'Reservo el evento',
       bookingtextdefault_of: 'de',
       data: 'Fecha',
@@ -576,6 +577,7 @@ const msgglobal = {
       contribtype: 'Tipo de Contribución',
       price: 'Precio',
       askinfo: 'Solicitar información',
+      showpage: 'Ver página',
       infoafterprice: 'notas después del precio',
       teacher: 'Profesor',  // teacherid
       teacher2: 'Profesor2', // teacherid2
@@ -844,7 +846,7 @@ const msgglobal = {
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message à envoyer',
-      showinfo: 'Voir Info',
+      showpdf: 'Voir PDF',
       bookingtextdefault: 'Je réserve l\'événement',
       bookingtextdefault_of: 'du',
       data: 'Date',
@@ -874,6 +876,7 @@ const msgglobal = {
       contribtype: 'Type de contribution',
       price: 'Prix',
       askinfo: 'Demander des infos',
+      showpage: 'Voir la page',
       infoafterprice: 'Notes après le prix',
       teacher: 'Enseignant',  // teacherid
       teacher2: 'Enseignant2', // teacherid2
@@ -1141,7 +1144,7 @@ const msgglobal = {
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
-      showinfo: 'Show Info',
+      showpdf: 'Show PDF',
       bookingtextdefault: 'I book the event',
       bookingtextdefault_of: 'of',
       data: 'Date',
@@ -1171,6 +1174,7 @@ const msgglobal = {
       contribtype: 'Contribute Type',
       price: 'Price',
       askinfo: 'Ask for Info',
+      showpage: 'Show Page',
       infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2
@@ -1440,7 +1444,7 @@ const msgglobal = {
       selnumpeople: 'Participants',
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
-      showinfo: 'Show Info',
+      showpdf: 'Show PDF',
       bookingtextdefault: 'I book the event',
       bookingtextdefault_of: 'of',
       data: 'Date',
@@ -1470,6 +1474,7 @@ const msgglobal = {
       contribtype: 'Contribute Type',
       price: 'Price',
       askinfo: 'Ask for Info',
+      showpage: 'Show Page',
       infoafterprice: 'Info after Price',
       teacher: 'Teacher',  // teacherid
       teacher2: 'Teacher2', // teacherid2