- Iscrizione Conacreis

- Calendario
- Prodotti

src/classes/DateController.ts

@@ -1,8 +1,8 @@
 import moment from 'moment'
-import 'moment/locale/fr'
-moment.locale('fr')
+import 'moment/locale/it'
+moment.locale('it')
 
-const monthsStrings = ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+const monthsStrings = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre']
 
 export class DateMoving {
   public date: moment.Moment

src/common/shared_vuejs.ts

@@ -36,6 +36,20 @@ export const shared_consts = {
   FILTER_NAVI_NON_PRESENTI: 8192,
   FILTER_QUALIFIED: 16384,
   FILTER_ASK_ZOOM_VISTO: 32768,
+  FILTER_HOURS_MYLIST: 65536,
+  FILTER_HOURS_ALL: 131072,
+  FILTER_MISSING_PAYMENT: 262144,
+  FILTER_TO_MAKE_MEMBERSHIP_CARD: 524288,
+  FILTER_MEMBERSHIP_CARD_OK: 1048576,
+
+  REPORT_FILT_RESP: 1,
+  REPORT_FILT_ATTIVITA: 2,
+
+  CashType: {
+    None: 0,
+    Incoming: 1,
+    Outcoming: 2,
+  },
 
   Permissions: {
     Admin: {
@@ -62,9 +76,9 @@ export const shared_consts = {
       icon: 'fas fa-user-tie',
       color: 'fuchsia'
     },
-    Traduttrici: {
+    Editor: {
       value: 16,
-      label: 'dashboard.traduttrici',
+      label: 'dashboard.Editor',
       icon: 'fas fa-user-tie',
       color: 'orange'
     },
@@ -73,6 +87,12 @@ export const shared_consts = {
       label: 'dashboard.zoomeri',
       icon: 'fas fa-user-tie',
       color: 'yellow'
+    },
+    Department: {
+      value: 64,
+      label: 'pages.department',
+      icon: 'fas fa-user-tie',
+      color: 'yellow'
     }
   },
 
@@ -83,12 +103,16 @@ export const shared_consts = {
 
   TypeMsg: {
     SEND_TO_ALL: 1,
+    SEND_TO_SOCI: 2,
+    SEND_TO_SOCIO_RESIDENTE: 3,
+    SEND_TO_NON_SOCI: 10,
+    SEND_TO_PAOLO: 20
   },
 
   TypeMsg_Actions: {
     NORMAL: 0,
     YESNO: 1,
-    OPZ1_2: 2,
+    OPZ1_2: 2
   },
 
   selectActions: [
@@ -109,6 +133,93 @@ export const shared_consts = {
     }
   ],
 
+  selectDestination: [
+    {
+      id: 0,
+      label: 'A Tutti',
+      value: 1
+    },
+    {
+      id: 1,
+      label: 'Solo ai Soci',
+      value: 2
+    },
+    {
+      id: 2,
+      label: 'Solo ai Soci Residenti',
+      value: 3
+    },
+    {
+      id: 3,
+      label: 'Solo ai NON Soci',
+      value: 10
+    },
+    {
+      id: 4,
+      label: 'a Paolo (test)',
+      value: 20
+    }
+  ],
+
+  OrderStatus: {
+    NONE: 0,
+    IN_CART: 1,
+    CHECKOUT_SENT: 2,
+    ORDER_CONFIRMED: 3,
+    PAYED: 4,
+    DELIVEDED: 5,
+    RECEIVED: 6,
+    CANCELED: 10
+  },
+
+  OrderStatusView: [
+    2,
+    3,
+    4,
+    6,
+    10
+  ],
+
+  OrderStatusStr: [
+    {
+      label: 'Nessuno',
+      value: 0
+    },
+    {
+      label: 'In Carrello',
+      value: 1
+    },
+    {
+      label: 'Ordine in Lavorazione',
+      value: 2
+    },
+    {
+      label: 'Ordine Confermato',
+      value: 3
+    },
+    {
+      label: 'Pagato',
+      value: 4
+    },
+    {
+      label: 'Spedito',
+      value: 5
+    },
+    {
+      label: 'Ricevuto',
+      value: 6
+    },
+    {
+      label: 'Cancellato',
+      value: 10
+    }
+  ],
+
+  getStatusStr(status) {
+    const trovatorec = this.OrderStatusStr.find((rec) => rec.value === status)
+    return (!!trovatorec) ? trovatorec.label : ''
+  },
+
   fieldsUserToChange() {
     return ['_id', 'username', 'email', 'name', 'surname', 'perm', 'date_reg', 'verified_email', 'img', 'ipaddr', 'lasttimeonline', 'profile', 'news_on']
   }

src/components/CDate/CDate.ts

@@ -16,6 +16,9 @@ export default class CDate extends Vue {
   @Prop({ required: false, default: false }) public readonly!: boolean
   @Prop({ required: false, default: false }) public disable!: boolean
   @Prop({ required: false, default: '' }) public color!: string
+  @Prop({ required: false, default: false }) public rounded!: boolean
+  @Prop({ required: false, default: false }) public outlined!: boolean
+  @Prop({ required: false, default: true }) public dense!: boolean
 
   public mystyleicon: string = 'font-size: 1.5rem;'
 
@@ -41,7 +44,7 @@ export default class CDate extends Vue {
     const datavalida = tools.convertstrtoDate(value)
     if (!!datavalida) {
       this.valueInternal = datavalida
-      console.log('EMIT: changedate', datavalida)
+      console.log('EMIT: changedate', datavalida.toString())
       this.$emit('input', this.getDate())
     } else {
       console.log('   DATA NON VALIDAAAAAAAAAAAAA ', value, datavalida)
@@ -50,7 +53,9 @@ export default class CDate extends Vue {
   }
 
   get getdatestring() {
-    return tools.getstrDate(this.valueInternal)
+    const mydate = tools.getstrDate(this.valueInternal)
+    console.log('getdatestring', mydate)
+    return mydate
   }
   get getdateyymmddstring() {
     return tools.getstrYYMMDDDate(this.valueInternal)

src/components/CDate/CDate.vue

@@ -1,18 +1,22 @@
 <template>
-    <q-input :class="data_class" :bg-color="color" :readonly="readonly" :disable="disable" debounce="1000" dense :value="getdatestring" stack-label :label="label" @input="changedate">
-        <template v-slot:append>
-            <q-icon name="event" class="cursor-pointer" :style="mystyleicon">
-                <q-popup-proxy v-if="!readonly" ref="datePicker">
-                    <q-date :value="getdateyymmddstring" today-btn @input="changedate"></q-date>
-                </q-popup-proxy>
-            </q-icon>
-        </template>
-    </q-input>
+  <q-input :class="data_class" :bg-color="color" :readonly="readonly" :disable="disable" debounce="1000" :dense="dense"
+           :value="getdatestring" stack-label :label="label" @input="changedate" :rounded="rounded"
+           mask="##/##/####"
+           fill-mask
+           :outlined="outlined">
+    <template v-slot:append>
+      <q-icon name="event" class="cursor-pointer" :style="mystyleicon">
+        <q-popup-proxy v-if="!readonly" ref="datePicker">
+          <q-date :value="getdateyymmddstring" today-btn @input="changedate"></q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
 </template>
 
 <script lang="ts" src="./CDate.ts">
 </script>
 
 <style lang="scss" scoped>
-    @import './CDate.scss';
+@import './CDate.scss';
 </style>

src/components/CDateTime/CDateTime.ts

@@ -24,6 +24,7 @@ export default class CDateTime extends Vue {
   @Prop({ required: false, default: '' }) public bgcolor!: string
   @Prop({ required: false, default: false }) public dense: boolean
   @Prop({ required: false, default: '5' }) public minuteinterval: boolean
+  @Prop({ required: false, default: 'date-time' }) public view: string
 
   public mystyleicon: string = 'font-size: 1.5rem;'
   public showDateTimeScroller: boolean = false
@@ -118,4 +119,12 @@ export default class CDateTime extends Vue {
     else
       return ''
   }
+
+  public getstrDate(mydate) {
+    if (this.view === 'date-time') {
+      return tools.getstrDateTime(mydate)
+    } else {
+      return tools.getstrDate(mydate)
+    }
+  }
 }

src/components/CDateTime/CDateTime.vue

@@ -31,7 +31,7 @@
             <template v-slot:control>
                 <div style="">
                     <div class="self-center full-width no-outline" :style="mystyle" tabindex="0">
-                        {{ tools.getstrDateTime(myvalue) }}
+                        {{ getstrDate(myvalue) }}
                     </div>
                 </div>
             </template>
@@ -41,7 +41,7 @@
 
                         <q-scroller
                                 v-model="myvalue"
-                                view="date-time"
+                                :view="view"
                                 :locale="toolsext.getLocale()"
                                 :rounded-borders="true"
                                 border-color="#2196f3"

src/components/CEventsCalendar/CEventsCalendar.scss

@@ -272,7 +272,7 @@ $graytext: #555;
   position: absolute;
   margin-top: -10px;
   overflow: hidden;
-  z-index: 9999;
+  z-index: 1000;
   box-sizing: border-box;
   right: 0;
   @media (max-width: 400px) {
@@ -297,3 +297,7 @@ $graytext: #555;
     flex-flow: column;
   }
 }
+.itemprenota{
+  align-self: center;
+  color: blue;
+}

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -57,8 +57,9 @@ export default class CEventsCalendar extends MixinEvents {
   public $q
   public $t: any
   public calendarView = 'month'
-  public selectedDate = '2019-04-01'
+  public selectedDate = ''
   public tabeditor: string = 'details'
+  public showPrev: boolean = false
   public formDefault: IEvents = {
     title: '',
     details: '',
@@ -74,6 +75,9 @@ export default class CEventsCalendar extends MixinEvents {
     msgbooking: '',
     infoevent: '',
     numpeople: 1,
+    numpeopleLunch: 0,
+    numpeopleDinner: 0,
+    numpeopleDinnerShared: 0,
     datebooked: tools.getDateNow(),
     booked: false,
     modified: false
@@ -133,33 +137,15 @@ export default class CEventsCalendar extends MixinEvents {
     return this
   }
 
+  get lists() {
+    return lists
+  }
+
   set mythis(aa) {
 
   }
 
-  public resources = [
-    {
-      label: 'John'
-    },
-    {
-      label: 'Mary'
-    },
-    {
-      label: 'Susan'
-    },
-    {
-      label: 'Olivia'
-    },
-    {
-      label: 'Board Room'
-    },
-    {
-      label: 'Room-1'
-    },
-    {
-      label: 'Room-2'
-    }
-  ]
+  public resources = []
 
   // public eventdata =
   //   [
@@ -365,6 +351,9 @@ export default class CEventsCalendar extends MixinEvents {
 
   get hasModifiedBooking() {
     return (this.bookEventpage.bookedevent.numpeople !== this.bookEventForm.numpeople) ||
+      (this.bookEventpage.bookedevent.numpeopleLunch !== this.bookEventForm.numpeopleLunch) ||
+      (this.bookEventpage.bookedevent.numpeopleDinner !== this.bookEventForm.numpeopleDinner) ||
+      (this.bookEventpage.bookedevent.numpeopleDinnerShared !== this.bookEventForm.numpeopleDinnerShared) ||
       (this.bookEventpage.bookedevent.msgbooking !== this.bookEventForm.msgbooking) ||
       (this.bookEventpage.bookedevent.booked !== this.bookEventForm.booked)
   }
@@ -399,16 +388,21 @@ export default class CEventsCalendar extends MixinEvents {
   }
 
   public mounted() {
-    this.selectedDate = this.formatDate(tools.getDateNow())
     this.$root.$on('calendar:next', this.calendarNext)
     this.$root.$on('calendar:prev', this.calendarPrev)
     this.$root.$on('calendar:today', this.calendarToday)
+
+    this.SetToday()
     // CalendarStore.state.eventlist = events
     this.updateFormatters()
 
   }
 
   public beforeMount() {
+    // console.log('mounted')
+    this.selectedDate = this.formatDate(tools.getDateNow())
+    // console.log('this.selectedDate', this.selectedDate)
+
     CalendarStore.state.locale = toolsext.getLocale()
     this.updateFormatters()
   }
@@ -450,16 +444,18 @@ export default class CEventsCalendar extends MixinEvents {
     this.eventForm = { ...this.formDefault }
   }
 
-  public addEventMenu(day, type) {
-    // console.log('addeventmenu editable = ', this.editable)
+  public addEventMenu(day) {
+    console.log('addeventmenu', day)
     if (this.calendarView === 'scheduler' || this.calendarView === 'week-scheduler' || this.calendarView === 'month-scheduler' || !this.editable) {
       return
     }
     this.resetForm()
-    this.contextDay = { ...day }
+    this.contextDay = { ...day.scope }
 
-    this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(day.date + ' 21:00:00')
-    this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(day.date + ' 22:00:00')
+    this.eventForm.dateTimeStart = tools.getstrYYMMDDDateTime(day.scope.timestamp.date + ' 21:00:00')
+    this.eventForm.dateTimeEnd = tools.getstrYYMMDDDateTime(day.scope.timestamp.date + ' 22:00:00')
+
+    console.log('eventForm', this.eventForm)
 
     this.addEvent = true // show dialog
   }
@@ -467,7 +463,7 @@ export default class CEventsCalendar extends MixinEvents {
   public addBookEventMenu(eventparam) {
     if (!UserStore.state.isLogged || !UserStore.state.my.verified_email) {
       // Visu right Toolbar to make SignIn
-      GlobalStore.state.RightDrawerOpen = true
+      GlobalStore.state.rightDrawerOpen = true
       tools.showNeutralNotif(this.$q, this.$t('login.needlogin'))
       tools.scrollToTop()
       // window.scrollTo(0, 0)
@@ -479,6 +475,9 @@ export default class CEventsCalendar extends MixinEvents {
       this.myevent = eventparam
       this.bookEventForm.msgbooking = ''
       this.bookEventForm.numpeople = 1
+      this.bookEventForm.numpeopleLunch = 0
+      this.bookEventForm.numpeopleDinner = 0
+      this.bookEventForm.numpeopleDinnerShared = 0
       this.bookEventForm.booked = true
       this.bookEventpage.state = EState.Creating
 
@@ -490,7 +489,7 @@ export default class CEventsCalendar extends MixinEvents {
   public askForInfoEventMenu(eventparam) {
     if (!UserStore.state.isLogged || !UserStore.state.my.verified_email) {
       // Visu right Toolbar to make SignIn
-      GlobalStore.state.RightDrawerOpen = true
+      GlobalStore.state.rightDrawerOpen = true
 
       tools.showNeutralNotif(this.$q, this.$t('login.needlogin'))
       tools.scrollToTop()
@@ -703,6 +702,9 @@ export default class CEventsCalendar extends MixinEvents {
     if (bookedevent) {
       this.bookEventForm._id = bookedevent._id
       this.bookEventForm.numpeople = bookedevent.numpeople
+      this.bookEventForm.numpeopleLunch = bookedevent.numpeopleLunch
+      this.bookEventForm.numpeopleDinner = bookedevent.numpeopleDinner
+      this.bookEventForm.numpeopleDinnerShared = bookedevent.numpeopleDinnerShared
       this.bookEventForm.infoevent = bookedevent.infoevent
       this.bookEventForm.msgbooking = bookedevent.msgbooking
       this.bookEventForm.booked = bookedevent.booked
@@ -755,6 +757,9 @@ export default class CEventsCalendar extends MixinEvents {
         userId: UserStore.state.my._id,
         id_bookedevent: myevent._id,
         numpeople: self.bookEventForm.numpeople,
+        numpeopleLunch: self.bookEventForm.numpeopleLunch,
+        numpeopleDinner: self.bookEventForm.numpeopleDinner,
+        numpeopleDinnerShared: self.bookEventForm.numpeopleDinnerShared,
         infoevent: tools.gettextevent(self, myevent),
         msgbooking: self.bookEventForm.msgbooking,
         booked: self.bookEventForm.booked,
@@ -763,6 +768,7 @@ export default class CEventsCalendar extends MixinEvents {
       }
 
       this.BookEvent(data).then((ris) => {
+        console.log('ris uscita di BookEvent', ris)
         if (ris)
           tools.showPositiveNotif(self.$q, self.$t('cal.booked') + ' ' + self.$t('cal.event') + ' "' + myevent.title + '"')
         else
@@ -894,6 +900,10 @@ export default class CEventsCalendar extends MixinEvents {
     return CalendarStore.state.operators
   }
 
+  get getInternalPagesArr() {
+    return CalendarStore.state.internalpages
+  }
+
   get getWhereArr() {
     return CalendarStore.state.wheres
   }
@@ -986,6 +996,7 @@ export default class CEventsCalendar extends MixinEvents {
 
   public getEvents(dt) {
     const eventsloc = []
+    // console.log('dt', dt)
 
     for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
       let added = false
@@ -994,11 +1005,11 @@ export default class CEventsCalendar extends MixinEvents {
           // check for overlapping times
           const startTime = CalendarStore.state.eventlist[i].dateTimeStart
           const endTime = CalendarStore.state.eventlist[i].dateTimeEnd
-          for (let j = 0; j < eventsloc.length; ++j) {
-            const startTime2 = eventsloc[j].dateTimeStart
-            const endTime2 = eventsloc[j].dateTimeEnd
+          for (const item of eventsloc) {
+            const startTime2 = item.dateTimeStart
+            const endTime2 = item.dateTimeEnd
             if (date.isBetweenDates(startTime, startTime2, endTime2) || date.isBetweenDates(endTime, startTime2, endTime2)) {
-              eventsloc[j].side = 'left'
+              item.side = 'left'
               eventsloc.push(CalendarStore.state.eventlist[i])
               added = true
               break
@@ -1018,6 +1029,8 @@ export default class CEventsCalendar extends MixinEvents {
         }
       }
     }
+    // if (eventsloc.length > 0)
+      // console.log('eventsloc', eventsloc)
     return eventsloc
   }
 

src/components/CGeoChart/CGeoChart.ts

@@ -52,7 +52,7 @@ export default class CGeoChart extends Vue {
 
     for (const rec of this.mydata) {
       alldata = []
-      alldata.push(tools.getNationsByNationality(rec._id, true))
+      alldata.push(tools.getNationsByNationality(rec._id))
       alldata.push(rec.count)
 
       this.mydatafixed.push(alldata)

src/components/CGridTableRec/CGridTableRec.scss

@@ -12,5 +12,11 @@
 }
 
 .q-table td {
-  padding: 0;
+  padding-left: 1px;
+  padding-right: 2px;
+  padding-top: 0;
+  padding-bottom: 0;
+  &__title {
+    font-size: 1rem;
+  }
 }

src/components/CGridTableRec/CGridTableRec.ts

@@ -5,7 +5,7 @@ import { GlobalStore, UserStore } from '../../store/Modules/index'
 import { tools } from '../../store/Modules/tools'
 
 import { shared_consts } from '../../common/shared_vuejs'
-import { ICategory, IColGridTable, IFilter, ITableRec } from '../../model'
+import { ICategory, IColGridTable, IFilter, ITableRec, IPagination } from '../../model'
 import { CTodo } from '../todos/CTodo'
 import { SingleProject } from '../projects/SingleProject'
 import { lists } from '../../store/Modules/lists'
@@ -19,14 +19,32 @@ import { CMyDashboard } from '../CMyDashboard'
   components: { CMyPopupEdit, CTitleBanner, CMyDashboard }
 })
 export default class CGridTableRec extends Vue {
+  private addRow: string = 'Aggiungi'
   @Prop({ required: true }) public prop_mytitle: string
   @Prop({ required: false }) public prop_mytable: string
   @Prop({ required: false, default: null }) public prop_mycolumns: any[]
   @Prop({ required: false, default: '' }) public prop_colkey: string
+  @Prop({ required: false, default: '' }) public prop_codeId: string
   @Prop({ required: false, default: '' }) public nodataLabel: string
+  @Prop({ required: false, default: 'Aggiungi' }) public labelBtnAddRow: string
   @Prop({ required: false, default: '' }) public noresultLabel: string
+  @Prop({
+    required: false, default: function mydef(): object {
+      return {}
+    }
+  }) public defaultnewrec: object
   @Prop({ required: false, default: null }) public tablesList: ITableRec[]
   @Prop({ required: false, default: null }) public arrfilters: IFilter[]
+  @Prop({ required: false, default: [] }) public filterdef: number[]
+  @Prop({ required: false, default: {} }) public extraparams: any
+  @Prop({
+    required: false,
+    default: { sortBy: '', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
+  }) public pagination: IPagination
+
+  public newRecordBool: boolean = false
+  public newRecord: any = {}
+  public savenewRec: boolean = false
 
   public mytable: string
   public mytitle: string
@@ -39,13 +57,6 @@ export default class CGridTableRec extends Vue {
   public $q
   public $t
   public loading: boolean = false
-  public pagination: {
-    sortBy: string,
-    descending: boolean
-    rowsNumber: number
-    page: number,
-    rowsPerPage: number // specifying this determines pagination is server-side
-  } = { sortBy: '', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
 
   public serverData: any [] = []
   public spinner_visible: boolean = false
@@ -55,9 +66,9 @@ export default class CGridTableRec extends Vue {
   public valPrec: string = ''
 
   public separator: 'horizontal'
-  public myfilter = undefined
+  public myfilter: any = ''
   public myfilterand = []
-  public rowsel: any
+  public rowsel: any = {}
   public dark: boolean = true
   public canEdit: boolean = false
 
@@ -71,6 +82,11 @@ export default class CGridTableRec extends Vue {
 
   public selected = []
 
+  @Watch('prop_codeId')
+  public changeprop_codeId() {
+    this.refresh()
+  }
+
   get isAdmin() {
     return UserStore.state.isAdmin
   }
@@ -79,6 +95,10 @@ export default class CGridTableRec extends Vue {
     return UserStore.state.isManager
   }
 
+  get isSocioResidente() {
+    return UserStore.state.my.profile.socioresidente
+  }
+
   get isTutor() {
     return UserStore.state.isTutor
   }
@@ -154,7 +174,11 @@ export default class CGridTableRec extends Vue {
   }
 
   public annulla(val) {
-    // this.rowclicksel = null
+    console.log('annulla')
+    GlobalStore.actions.DeleteRec({ table: this.mytable, id: this.newRecord._id })
+      .then((ris) => {
+        return true
+      })
   }
 
   public SaveValue(newVal, valinitial) {
@@ -189,9 +213,15 @@ export default class CGridTableRec extends Vue {
     this.valPrec = valinitial
 
     this.saveFieldValue(mydata)
+
+  }
+
+  public beforeMount() {
+    console.log('beforeMount')
   }
 
   public created() {
+    console.log('created')
     // this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
 
     this.mytable = this.prop_mytable
@@ -228,6 +258,8 @@ export default class CGridTableRec extends Vue {
     const myfilter = this.myfilter
     const myfilterand = this.myfilterand
 
+    this.savefilter()
+
     if (!this.mytable)
       return
 
@@ -292,16 +324,20 @@ export default class CGridTableRec extends Vue {
         myobj[sortBy] = 1
     }
 
-    const params: IParamsQuery = {
+    let params: IParamsQuery = {
       table: this.mytable,
       startRow,
       endRow,
       filter: myfilter,
       filterand: myfilterand,
       sortBy: myobj,
-      descending
+      descending,
+      userId: UserStore.state.my._id,
+      codeId: this.prop_codeId
     }
 
+    params = { ...params, ...this.extraparams }
+
     const data = await GlobalStore.actions.loadTable(params)
 
     if (data) {
@@ -368,6 +404,27 @@ export default class CGridTableRec extends Vue {
     return this.returnedCount
   }
 
+  public async createNewRecordDialog() {
+
+    const mydata = {
+      table: this.mytable,
+      data: {}
+    }
+
+    mydata.data = this.defaultnewrec
+
+    // const mykey = fieldsTable.getKeyByTable(this.mytable)
+
+    // mydata.data[mykey] = ''
+
+    console.log('mydata', mydata)
+    const data = await GlobalStore.actions.saveTable(mydata)
+
+    this.newRecord = data
+    this.newRecordBool = true
+
+  }
+
   public async createNewRecord() {
     this.loading = true
 
@@ -376,10 +433,13 @@ export default class CGridTableRec extends Vue {
       data: {}
     }
 
+    mydata.data = this.defaultnewrec
+
     // const mykey = fieldsTable.getKeyByTable(this.mytable)
 
     // mydata.data[mykey] = ''
 
+    console.log('mydata', mydata)
     const data = await GlobalStore.actions.saveTable(mydata)
 
     this.serverData.push(data)
@@ -403,11 +463,13 @@ export default class CGridTableRec extends Vue {
   }
 
   public mounted() {
+    console.log('GridTable mounted', this.tablesel)
 
     if (!!this.tablesList) {
       this.canEdit = tools.getCookie(tools.CAN_EDIT, this.canEdit) === 'true'
       this.tablesel = tools.getCookie('tablesel', this.tablesel)
     }
+    this.myfilterand = this.filterdef
     console.log('this.tablesel', this.tablesel)
 
     if (this.tablesel === '') {
@@ -588,9 +650,11 @@ export default class CGridTableRec extends Vue {
     else
       return ''
   }
+
   public getSelectedString() {
     return this.selected.length === 0 ? '' : `${this.selected.length} record${this.selected.length > 1 ? 's' : ''} selected of ${this.serverData.length}`
   }
+
   public selectionclick(details) {
     // console.log('selectionclick this.selected', this.selected, 'details', details)
     if (details.added) {
@@ -618,4 +682,49 @@ export default class CGridTableRec extends Vue {
   public changemyfilterand() {
     this.refresh()
   }
+
+  public async saveNewRecord() {
+    console.log('saveNewRecord')
+    this.savenewRec = true
+    const mydata = {
+      table: this.mytable,
+      data: {}
+    }
+
+    mydata.data = this.newRecord
+
+    const data = await GlobalStore.actions.saveTable(mydata)
+      .then((ris) => {
+        if (ris) {
+          // console.log('ris', ris)
+          this.newRecordBool = false
+          this.refresh()
+        }
+      })
+  }
+
+  public hidewindow() {
+    console.log('hidewindow')
+    if (!this.savenewRec) {
+      this.annulla(0)
+    }
+  }
+
+  get isfinishLoading() {
+    return GlobalStore.state.finishLoading
+  }
+
+  get getlabelAddRow() {
+    return this.labelBtnAddRow
+  }
+
+  get visButtRow() {
+    return this.labelBtnAddRow !== this.addRow
+  }
+
+  public savefilter() {
+    // console.log('Close')
+    this.$emit('savefilter', this.myfilterand)
+  }
+
 }

src/components/CGridTableRec/CGridTableRec.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="q-pa-xs">
-
+  <div class="q-pa-xs" v-if="isfinishLoading">
+    <div class="centermydiv q-ma-sm" style="text-align: center">
+      <q-btn v-if="mytable && visButtRow" rounded dense color="primary"
+             size="lg"
+             :label="getlabelAddRow"
+             @click="createNewRecordDialog"></q-btn>
+    </div>
 
     <q-table
       flat
@@ -20,8 +25,7 @@
       :no-results-label="noresultLabel"
       :selected-rows-label="getSelectedString"
       selection="single"
-      :selected.sync="selected"
-    >
+      :selected.sync="selected">
 
       <template v-slot:header="props">
 
@@ -42,7 +46,7 @@
       </template>
 
       <template v-slot:top="props">
-        <div class="col-2 q-table__title">{{ mytitle }}</div>
+        <div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
 
         <!--<p style="color:red"> Rows: {{ getrows }}</p>-->
 
@@ -54,16 +58,17 @@
         </q-input>
         <q-toggle v-if="mytable" v-model="canEdit" :disable="disabilita" :val="lists.MenuAction.CAN_EDIT_TABLE"
                   class="q-mx-sm"
-                  :label="$t('grid.editvalues')" @input="changefuncAct"
-        ></q-toggle>
+                  :label="$t('grid.editvalues')" @input="changefuncAct">
+        </q-toggle>
 
         <q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
                :label="$t('grid.addrecord')"
-               @click="createNewRecord"></q-btn>
+               @click="createNewRecord">
+
+        </q-btn>
 
         <q-space/>
 
-
         <!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
 
         <q-select
@@ -79,7 +84,7 @@
           map-options
           :options="mycolumns"
           option-value="name"
-          style="min-width: 150px"
+          º
           @input="changeCol">
 
         </q-select>
@@ -102,11 +107,14 @@
         </q-inner-loading>
 
         <div class="row">
-          <q-toggle v-for="(filter, index) of arrfilters" :key="index" v-model="myfilterand" :val="filter.value"
-                    :label="filter.label"></q-toggle>
+          <q-toggle v-for="(filter, index) of arrfilters"
+                    :key="index"
+                    v-model="myfilterand" :disable="filter.hide"
+                    :val="filter.value"
+                    :label="filter.label">
+
+          </q-toggle>
         </div>
-
-
       </template>
 
       <template v-slot:body="props">
@@ -141,6 +149,7 @@
           </q-td>
         </q-tr>
       </template>
+
       <!--
                       <q-btn
                               flat round dense
@@ -169,7 +178,7 @@
           <div class="q-ma-xs">
             <q-field rounded outlined bg-color="orange-3" dense>
               <template v-slot:control>
-                <div class="self-center full-width no-outline" tabindex="0">{{mycol.label}}</div>
+                <div class="self-center full-width no-outline" tabindex="0">{{ mycol.label }}</div>
               </template>
             </q-field>
           </div>
@@ -193,11 +202,45 @@
         </div>
       </div>
     </div>
+    <q-dialog v-model="newRecordBool" @hide="hidewindow">
+      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-toolbar class="bg-primary text-white">
+          <q-toolbar-title>
+            {{ mytitle }}
+          </q-toolbar-title>
+          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+        </q-toolbar>
+        <q-card-section class="inset-shadow">
+          <div v-for="col in mycolumns" :key="col.name"
+               v-if="colVisib.includes(col.field + col.subfield)">
+            <div>
+
+              <CMyPopupEdit :canEdit="true"
+                            :col="col"
+                            :row.sync="newRecord"
+                            :field="col.field"
+                            :subfield="col.subfield"
+                            minuteinterval="1"
+                            :visulabel="true"
+                            @save="SaveValue"
+                            @show="selItem(newRecord, col)"
+                            @showandsave="showandsel">
+
+              </CMyPopupEdit>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="center">
+          <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveNewRecord"></q-btn>
+          <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup @click="annulla"></q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 <script lang="ts" src="./CGridTableRec.ts">
 </script>
 
 <style lang="scss">
-  @import './CGridTableRec.scss';
+@import './CGridTableRec.scss';
 </style>

src/components/CGuidelines/CGuidelines.vue

@@ -1,922 +1,11 @@
 <template>
   <div>
     <div v-if="toolsext.isLang('it')">
-      <CTitleBanner title="AYNI GIFT*ECOnomy"></CTitleBanner>
+      <CTitleBanner title=""></CTitleBanner>
       <CImgText src="">
         <p class="cltexth3 text-green-8 q-ma-sm"><span
-          class="boldhigh">Movimento di ECOnomia Solidale ~ AYNI GIFT*ECOnomy</span></p>
-        <p>
-          <strong>Ayni</strong> è un movimento di economia solidale. Si basa sulla pratica del
-          <strong>regalo</strong>,
-          del <strong>donare come risorsa e come ricchezza! Dare e donare mi apre al ricevere, crea relazioni
-          basate
-          sull’aiuto e la gratitudine</strong>, non
-          sul profitto.</p>
-        <p>
-          <strong>Ayni</strong> è pensata e creata per permettere alle persone di aiutarsi e sostenersi fra di
-          loro, in
-          modo da realizzare i propri sogni e i propri progetti di vita. È un progetto serio che richiede, a
-          chi ne vuol
-          far parte, di
-          comprendere che questo non è un sistema per guadagnare o un classico fondo di investimento, ma un
-          modo per
-          recuperare quel fattore umano di aiuto reciproco attraverso il continuo sostegno e accompagnamento
-          dei nuovi
-          membri supportati da chi ha già fatto esperienza in questo e in altri movimenti di Economia
-          Solidale,
-          attraverso
-          il fare Rete, creando così <strong>relazioni e esperienze di Valore, generando Ricchezza
-          Reale</strong>.</p>
-        <p class="text-center"><strong>Strumenti necessari per far parte di AYNI</strong></p>
-        <ul class="lista text-center">
-          <li>Cellulare e/o computer</li>
-          <li>App Telegram</li>
-        </ul>
-        <p class="cltexth3 text-red q-ma-lg">Cosa devi fare per poter entrare in <strong>Ayni</strong>?</p>
-        <p class="cltexth3 text-blue q-ma-lg">Fase 1: Accoglienza</p>
-        <ul class="lista">
-          <li>Qualcuno ti ha invitato e ti ha dato il link di accesso al sito <strong>AYNI
-            GIFT*ECOnomy.</strong> e ti
-            sei iscritto.
-          </li>
-          <li>Entri nella chat Telegram <strong>Ayni EMPOWER</strong>, luogo dove ci incontriamo, accogliamo i
-            nuovi
-            invitati,
-            e ci aiutiamo a sostenere e ad espandere la nostra visione e il movimento.
-          </li>
-          <li>
-            Entri nel Canale Telegram <strong>AYNI BIBLIO</strong> che è un canale di informazioni in cui
-            vengono
-            postati
-            comunicati, notizie e novità sul movimento.
-          </li>
-          <li>
-            Infine abbiamo Telegram <strong>AYNI HELP</strong> dove puoi entrare ogni volta che dovessero
-            sorgerti
-            domande
-            o dubbi, trovando un aiuto pratico a tua disposizione.
-          </li>
-        </ul>
-
-        <p class="cltexth3 text-blue q-ma-lg">Fase 2: Completamento dei requisiti richiesti</p>
-        <ol class="lista">
-          <li>Leggere ed accettare le nostre Linee Guida e Guardare i Video Introduttivi al Movimento.</li>
-          <li>Attivare almeno <strong>2 metodi di pagamento</strong>.
-            <strong>Revolut, Payeer e Paypal (tramite MoneyBox)</strong> sono quelli maggiormente consigliati.<br>
-          </li>
-        </ol>
-
-        <p class="cltexth3 text-blue q-ma-lg">Fase 3: Lista d'imbarco e partenza della Nave</p>
-
-        <p>In AYNI La sequenza dei passaggi è programmata in anticipo, in modo da:</p>
-        <ul class="lista">
-          <li>garantire che i 3 passi del processo si svolgano nei tempi e nella forma previsti.</li>
-          <li>realizzare e concludere il processo in maniera semplice, godibile e semi-automatizzata.</li>
-        </ul>
-
-        <p>La tua Nave verrà programmata e tu entrerai in una chat coi tuoi compagni di viaggio. Allo stesso
-          tempo,
-          ti verrà comunicata la data in cui la tua Nave salperà, cioè quando potrai donare i 33€ e il
-          nominativo e i
-          dati del Sognatore a cui fare il tuo dono.
-        </p>
-
-        <p class="clBorderImportant" style="border-color: deepskyblue">
-          Le date di programmazione e dei passi sono intese come ‘<em>previsioni di attivazione e di
-          completamento</em>’.
-          Nel caso il flusso di persone e di invitati non consentisse di mantenere e realizzare quanto
-          programmato nei
-          tempi e forma previsti, le date verranno riprogrammate per permettere il completamento di tutti e
-          non lasciare
-          che il
-          viaggio possa interrompersi.
-        </p>
-
-        <p>Nel fare esperienza dei 3 passi incontreremo e transiteremo in 3 personaggi:</p>
-
-        <p style=""><strong>Donatore</strong>: Colui che effettua il Dono di 33€.<br>
-          <strong>Mediatore</strong>: È il ponte, colui che mette in relazione Donatori e Sognatore.<br>
-          <strong>Sognatore</strong>: Colui che manifesta il suo sogno ricevendo i Doni.<br>
-        </p>
-
-        <CTitleBanner title="Visualizza in Anteprima I 3 Passi (clicca qui)" bgcolor="bg-green-5" canopen="true"
-                      :visible="false" imgpreview="statics/images/passo_1.jpg">
-          <p>Dal momento in cui conosco il giorno della partenza della mia Nave, i passi da compiere
-            saranno questi:</p>
-          <div class="text-center">
-            <q-img src="statics/images/passo_1.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Entro nella chat Telegram come Donatore:</p>
-          <p>La chat è formata da 8 donatori e un mediatore.<br>
-            Il mio compito è di regalare 33€ al Sognatore (il mediatore mi guiderà nel processo).<br>
-            Il dono lo farò nella data di attivazione della billetera e del passo 1.</p>
-          <div class="text-center">
-            <q-img src="statics/images/passo_2.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Apro una chat Telegram e divento Mediatore:</p>
-          <p>La chat è formata da 8 donatori (che aiuterò ad entrare in chat) e da me, il Mediatore.<br>
-
-            Il mio compito è quello di assicurarmi che tutti i Donatori facciano il Dono al Sognatore.
-            Il sistema invierà in automatico le istruzioni per fare il Dono, il Mediatore (io) verificherà e
-            accompagnerà il processo.
-          </p>
-
-          <div class="text-center">
-            <q-img src="statics/images/passo_3.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Divento Sognatore:</p>
-          <p>La chat dove sono Sognatore è la stessa e con le stesse persone aperta nel passo 2 (dove io ero
-            Mediatore)
-            e anche qui cambiano i ruoli, ovvero ora ci sono 8 mediatori e io, il Sognatore.<br>
-            Il mio compito è quello di aprirmi a ricevere i Doni da ciascun Donatore, completarmi e
-            celebrare
-            l’Abbondanza.<br>
-            <br>
-          </p>
-
-        </CTitleBanner>
-
-        <p class="text-blue-10 q-ma-lg clBorderImportant text-center" style="font-size: 1.15rem;">La Chat
-          Automatica
-          <strong>AYNI BOT</strong> mi invierà tutte le istruzioni che dovrò compiere, al momento opportuno!
-        </p>
-
-
-        <p class="cltexth2 text-green-8 q-ma-lg"><span class="boldhigh">Bene... Ora mettiti comodo, il tuo viaggio è cominciato!</span>
-        </p>
+          class="boldhigh">Movimento </span></p>
       </CImgText>
-    </div>
-    <div v-else-if="toolsext.isLang('si')">
-      <CTitleBanner title="AYNI DARILO * ECOnomy"></CTitleBanner>
-      <CImgText src="">
-        <p class="cltexth3 text-green-8 q-ma-sm"><span
-          class="boldhigh">Gibanje Solidarna ECOnomia ~ AYNI DARILO * ECOnomy</span></p>
-        <p>
-          Ayni je gibanje solidarnostnega gospodarstva. Temelji na praksi darovanja, dajanja kot viru in
-          obilja! Dajanje me odpira do sprejemanja, ustvarja odnose, ki temeljijo na pomoči in hvaležnosti, ne
-          na dobičku.
-        </p>
-        <p>
-          Ayni je zasnovana in ustvarjena tako, da si ljudje medsebojno pomagajo in se podpirajo, da bi
-          dosegli svoje sanje in življenjske cilje. Gre za resen projekt, ki od tistih, ki želijo biti del
-          tega, zahteva, razumevanje, da ne gre za sistem zaslužka ali klasičen investicijski sklad, ampak
-          način, ki skozi medsebojno pomočjo, nenehno podporo in spremljavo novih članov, ki so podprti z
-          osebami, ki so to izkušnjo že sami doživeli v tem ali podobnem gibanju Solidarne Ekonomije in
-          ustvarili mreženje in ustvarili tako odnose, pridobili vredne izkušnje ter ustvarili resnično
-          obilje.</p>
-        <p class="text-center"><strong>Za vključitev v AYNI potrebujete:</strong></p>
-        <ul class="lista text-center">
-          <li>Mobilni telefon in / ali računalnik</li>
-          <li>Aplikacijo Telegram</li>
-        </ul>
-        <p class="cltexth3 text-red q-ma-lg">Kaj morate storiti, da lahko vstopite v Ayni?</p>
-        <p class="cltexth3 text-blue q-ma-lg">1. Faza: sprejem</p>
-        <ul class="lista">
-          <li>Nekdo vas je povabil in vam posredoval povezavo za dostop do spletnega mesta AYNI GIFT *
-            ECOnomy. in ste se prijavili.
-          </li>
-          <li>Vstopite v klepet Telegram Ayni EMPOWER, kraj, kjer se srečujemo, pozdravljamo nove člane, se
-            medsebojno podpiramo, širimo našo vizijo in gibanje.
-          </li>
-          <li>Vstopite v kanal Telegram AYNI BIBLIO, ki je informacijski kanal, na katerem so objavljena
-            sporočila za javnost, novice in novice o gibanju.
-          </li>
-          <li>
-            Končno imamo na voljo Telegram AYNI HELP, kamor lahko pišete in vprašate karkoli vas zanima ali
-            kakršnikoli dvom in poiščete praktično pomoč.
-          </li>
-
-        </ul>
-
-        <p class="cltexth3 text-blue q-ma-lg">2. Faza: Izpolnitev zahtevanih zahtev
-        </p>
-        <ol class="lista">
-          <li>Preberite in sprejmite naše smernice ter si pogledate uvodne video posnetke gibanja.</li>
-          <li>Aktivirajte vsaj 2 načina plačila.
-            <strong>Revolut, Payeer in Paypal (preko MoneyBoxa)</strong> so najbolj priporočljivi.<br>
-
-          </li>
-        </ol>
-
-        <p class="cltexth3 text-blue q-ma-lg">3. faza: Programiranje in aktiviranje ladjice</p>
-
-        <p>V AYNI Zaporedje korakov je vnaprej programirano, da:</p>
-        <ul class="lista">
-          <li>zagotovite, da se trije koraki postopka odvijajo po načrtih in v pričakovani obliki.</li>
-          <li>Izvedete in zaključite postopek na preprost, prijeten in polavtomatski način.
-          </li>
-        </ul>
-
-        <p>
-          Ko bo vaša ladjica na sporedu, boste v njo vstopili v klepet s sopotniki. Hkrati boste obveščeni
-          o datumu starta ladjice, kjer boste lahko podarili 33 evrov, ter izvedeli ime s podatke Sanjača,
-          ki mu izročite svoje darilo. Izvedeli boste tudi datume vseh treh korakov.
-        </p>
-        <p class="clBorderImportant" style="border-color: deepskyblue">
-          Datumi in koraki programiranja so mišljeni kot „napovedi aktiviranja in zaključka“. V primeru, da
-          pretok ljudi ne dovoli obdržati in izvesti načrtovanega v predvidenem roku in obliki, bodo datumi
-          prestavljeni, da se vsem omogoči dokončanje in se tako ne dovoli prekinitev potovanja.
-
-        </p>
-
-        <p>Pri procesu treh korakov se bomo srečali in prešli skozi 3 imena:</p>
-
-        <p style=""><strong>Donator</strong>: tisti, ki donira 33 €.<br>
-          <strong>Posrednik- Mediator</strong>: Most med tistim, ki povezuje donatorje in sanjača.<br>
-          <strong>Sanjač</strong>: Kdor svoje sanje manifestira s sprejemanjem Daril.<br>
-        </p>
-
-        <CTitleBanner title="Predogled 3 korakov (kliknite tukaj)" bgcolor="bg-green-5" canopen="true"
-                      :visible="false" imgpreview="statics/images/passo_1.jpg">
-          <p>Od trenutka, ko bom izvedel dan odhoda svoje ladje, bodo naslednji koraki naslednji:</p>
-          <div class="text-center">
-            <q-img src="statics/images/passo_1.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">V klepet Telegrama vstopim kot donator:</p>
-          <p>Klepet sestavlja 8 donatorjev in mediator-posrednik.<br>
-            Moja naloga je, da sanjaču vplačam 33 evrov (mediator me bo vodil v postopku).
-            Darilo bom izvedel na datum starta moje ladje In 1. koraka.</p>
-          <div class="text-center">
-            <q-img src="statics/images/passo_2.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Odprem telegramski klepet in postanem posrednik:</p>
-          <p>Klepet sestavlja 8 donatorjev (ki jim bom pomagal vstopiti v klepet) tako jaz, kot posrednik.<br>
-            Moja naloga je, da poskrbim, da bodo vsi donatorji sanjaču vplačali darilo. Sistem bo samodejno
-            poslal navodila za način vplačila, Posrednik (jaz) bo postopek preveril in spremljal.
-          </p>
-
-          <div class="text-center">
-            <q-img src="statics/images/passo_3.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Postanem sanjač:</p>
-          <p>Klepet, kjer sem sanjač, je enak in z istimi ljudmi odprt v koraku 2 (kjer sem bil Mediator) in
-            tudi tukaj se vloge spreminjajo, torej je zdaj 8 mediatorjev in jaz, sanjač.
-            Moja naloga je, da se odprem, da sprejmem vplačila od vsakega donatorja, se dopolnim in
-            proslavim obilje.
-          </p>
-
-        </CTitleBanner>
-
-        <p class="text-blue-10 q-ma-lg clBorderImportant text-center" style="font-size: 1.15rem;">Samodejni
-          klepet <strong>AYNI BOT</strong> mi bo ob pravem času poslal vsa navodila, ki jih bom moral
-          izpolniti!
-        </p>
-
-        <p class="cltexth2 text-green-8 q-ma-lg"><span class="boldhigh">No ... Zdaj se udobno opremite, vaše potovanje se je začelo!</span>
-        </p>
-      </CImgText>
-    </div>
-    <div v-else-if="toolsext.isLang('es')">
-      <CTitleBanner title="AYNI GIFT*ECOnomy"></CTitleBanner>
-      <CImgText src="">
-        <p class="cltexth3 text-green-8 q-ma-sm"><span
-          class="boldhigh">Economía Solidaria ~ AYNI GIFT*ECOnomía</span></p>.
-        <p>
-          <strong>Ayni</strong> es un movimiento de economía solidaria. Se basa en la práctica del
-          hacer un <strong>regalo</strong>,
-          de <strong> dar como recurso y como riqueza!</strong> Dar me abre a recibir, crea relaciones basadas
-          en la
-          ayuda y la gratitud, no en el beneficio.
-        </p>
-        <p>
-          <strong>Ayni</strong> está diseñado y creado para permitir a las personas ayudarse y apoyarse
-          mutuamente, para que puedan hacer realidad sus sueños y sus planes de vida. Es un proyecto serio que
-          requiere, por parte de aquellos a quienes les gustaría participar, de entender primero que nada, que
-          este no es un sistema para hacer dinero o un fondo de inversión clásico, sino una forma de recuperar
-          ese factor humano de ayuda mutua a través del apoyo y el acompañamiento continuo de los nuevos
-          miembros que vendràn guiados por quienes ya han tenido experiencia en este y otros movimientos de
-          Economía Solidaria, a través de La creación de redes, creando así relaciones y experiencias de
-          Valor, generando Riqueza Real.
-        </p>
-        <p class="text-center"><strong>Herramientas necesarias para formar parte de AYNI</strong></p>.
-        <ul class="text-center lista">
-          <li>Teléfono móvil y/o ordenador</li>
-          <li>Telegram de aplicación</li>
-        </ul>
-        <p class="cltexth3 text-red q-ma-lg">¿Qué tienes que hacer para entrar en <strong>Ayni</strong>?</p>
-        <p class="cltexth3 text-blue q-ma-lg">Paso 1: Recepción</p>
-        <ul class="lista">
-          <li>Alguien te invitó y te dio el enlace de acceso a la página web de AYNI GIFT*ECOnomy.
-            estás inscrito.
-          </li>
-          <li>Entra en el chat Telegram <strong>AYNI-EMPOWER</strong>, lugar donde nos encontramos, damos la
-            bienvenida a los nuevos invitados, y somos ayudados para ampliar nuestra visión del movimiento.
-          </li>
-          <li>
-            Entra en el canal de Telegram <strong>AYNI-BIBLIO</strong> que es un canal de información donde
-            puedes conseguir las publicaciones con comunicados, noticias y novedades sobre el movimiento.
-          </li>
-          <li>
-            Finalmente tenemos el Telegram <strong>AYNI-HELP</strong> donde puedes entrar cuando quieras
-            preguntar o tengas
-            dudas, encontrando ayuda práctica a su disposición.
-          </li>
-        </ul>
-
-        <p class="cltexth3 text-blue q-ma-lg">Paso 2: Cumplimiento de los requisitos</p>.
-        <ol class="lista">
-          <li>Lee y acepta nuestras directrices y ve los vídeos de introducción al movimiento.
-          <li>Activar por lo menos <strong>2 métodos de pago</strong>.
-            <strong>Revolut, Payeer y Paypal (a través de MoneyBox)</strong> son los más recomendados.<br>
-
-          </li>
-        </ol>
-
-        <p class="cltexth3 text-blue q-ma-lg">Paso 3: Programación y activación de mi Nave</p>.
-
-        <p>En AYNI La secuencia de pasos está programada de antemano, de modo que:</p>
-        <ul class="lista">
-          <li>Podemos garantizar que los 3 pasos del proceso se lleven a cabo en el tiempo y la forma
-            previstos.
-          </li>
-          <li>Realizamos y terminamos el proceso de una manera simple, agradable y semi-automática.</li>
-        </ul>
-
-        <p>Tu Nave será programada y entrarás en una chat con tus compañeros de viaje. Al mismo tiempo, se te
-          informará de la fecha en la que se activará tu Nave en la que podrás donar los 33 € y el nombre y el
-          los datos del Soñador para darle su regalo.
-        </p>
-
-        <p class="clBorderImportant" style="border-color: deepskyblue">
-          Las fechas de programación y los pasos se entienden como "<em>activación y predicciones de
-          finalización</em>".
-          En caso de que el flujo de personas e invitados no permita mantener y lograr lo que se ha programado
-          en el momento y de la forma esperada, las fechas se re programaran para permitir la finalización de
-          todos y no dejar que el viaje pueda ser interrumpido.
-        </p>
-
-        <p>En la experiencia de los 3 pasos nos encontraremos y pasaremos por 3 caracteres:</p>
-
-        <p style=""><strong>Donante</strong>: El que hace el regalo de 33 €.<br>
-          <strong>Mediador</strong>:Él es el puente, el que conecta a los donantes y al Soñador.<br>
-          <strong>Soñador</strong>: Aquel que manifiesta su sueño recibiendo los Regalos.<br>
-        </p>
-
-        <CTitleBanner title="Previsualización de los 3 pasos (click aquí)" bgcolor="bg-green-5" canopen="true"
-                      :visible="false" imgpreview="statics/images/passo_1.jpg">
-          <p>Desde el momento en que sé el día de la salida de mi Nave, los pasos a seguir
-            serán estos:</p>
-          <div class="text-center">
-            <q-img src="statics/images/passo_1.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Entraré en el chat de Telegram como Donador:</p>
-          <p>El chat está formada por 8 Donantes y un mediador.
-            Mi tarea es dar 33 € al Soñador (el mediador me guiará en el proceso).
-            <br>
-            Daré el regalo en la fecha de activación de la Nave y el paso 1.
-          <div class="text-center">
-            <q-img src="statics/images/passo_2.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Abro un chat de Telegram y me convierto en Mediador:</p>
-          <p>El chat consiste en 8 donantes (a los que ayudaré a entrar en el chat) y yo.<br>
-
-            Mi trabajo es asegurarme de que todos los donantes le den el regalo al Soñador.
-            El sistema enviará automáticamente instrucciones para hacer el Regalo, el Mediador
-            verificará y acompañará el proceso.
-
-          <div class="text-center">
-            <q-img src="statics/images/passo_3.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Conviértete en un Soñador:</p>
-          <p>El chat donde soy Soñador es el mismo y con las mismas personas abierto en el paso 2 (donde fui
-            Mediador)
-            e incluso aquí los papeles cambian, es decir, ahora hay 8 Mediadores y yo, el Soñador.
-            Mi tarea es abrirme para recibir los regalos de cada donante, completarme y celebrar
-            la Abundancia.
-            El paso 3 se activa normalmente 4 días después del paso 2.<br><br>.
-          </p>
-
-        </CTitleBanner>
-
-        <p class="text-blue-10 q-ma-lg clBorderImportant text-center" style="font-size: 1.15rem;">El Chat
-          Automático
-          <strong>AYNI BOT</strong> me enviará todas las instrucciones que necesito hacer en el momento
-          adecuado.
-        </p>
-
-
-        <p class="cltexth2 text-green-8 q-ma-lg"><span class="boldhigh">Bueno... Ahora ponte cómodo, ¡tu viaje ha comenzado!</span>
-        </p>
-
-      </CImgText>
-    </div>
-    <div v-else-if="toolsext.isLang('pt')">
-      <CTitleBanner title="AYNI GIFT*ECOnomy"></CTitleBanner>
-      <CImgText src="">
-        <p class="cltexth3 text-green-8 q-ma-sm"><span
-          class="boldhigh">Movimento ECOnomy Solidarity ~ AYNI GIFT*ECOnomy</span></p>.
-        <p>
-          <strong>Ayni</strong> é um movimento de economia solidária. É baseado na prática de
-          <strong>presente</strong>,
-          de <strong>give como um recurso e como riqueza! Dar e dar me abre para receber, cria relacionamentos
-          baseados
-          em
-          sobre ajuda e gratidão</strong>, não
-          sobre o lucro.</p>
-        <p>
-          <strong>Ayni</strong> foi concebido e criado para permitir que as pessoas se ajudem e apoiem umas às
-          outras,
-          em
-          para que possas tornar os teus sonhos e os teus planos de vida realidade. É um projeto sério que
-          requer, para
-          aqueles que o querem
-          pertencer, a
-          entender que este não é um sistema para fazer dinheiro ou um fundo de investimento clássico, mas uma
-          forma de
-          recuperar esse factor humano de ajuda mútua através do contínuo apoio e acompanhamento do novo
-          membros apoiados por aqueles que já tiveram experiência neste e em outros movimentos de Economia
-          Solidária, através de
-          Trabalho em rede, criando assim relações <strong>relacionamentos e experiências de Valor, gerando
-          Riqueza
-          Real</strong>.</p>
-        <p class="text-center"><strong>Ferramentas necessárias para fazer parte do AYNI</strong></p>.
-        <ul class="text-center lista">
-          <li>Móvel telefone e/ou computador</li>
-          <li>Telegrama de aplicação</li>
-        </ul>
-        <p class="cltexth3 text-red q-ma-lg">O que você precisa fazer para entrar em <strong>Ayni</strong>?</p>
-        <p class="cltexth3 text-blue q-ma-lg">Passo 1: Recepção</p>
-        <ul class="lista">
-          <li>Algém o convidou e deu-lhe o link de acesso ao site <strong>AYNI GIFT*ECOnomy.</strong> e você
-            você está inscrito.
-          </li>
-          <li>Vá para o chat Telegrama <strong>Ayni EMPOWER</strong>, lugar onde nos encontramos, acolhemos
-            novas
-            pessoas
-            convidados,
-            e ajudar-nos a apoiar e expandir a nossa visão e movimento.
-          </li>
-          <li>
-            Entre no Canal de Telegrama <strong>BIBLIOTECA AYNI LIBRARY</strong> que é um canal de
-            informação onde você
-            pode obter
-            publicado
-            comunicados, notícias e notícias sobre o movimento.
-          </li>
-          <li>
-            Finalmente temos Telegrama <strong>AYNI HELP</strong> onde você pode entrar quando quiser
-            questões
-            ou dúvidas, encontrando ajuda prática à sua disposição.
-          </li>
-        </ul>
-
-        <p class="cltexth3 text-blue q-ma-lg">Passo 2: Conclusão dos requisitos</p>.
-        <ol class="lista">
-          <li>Ler e aceitar nossas Diretrizes e Assistir os Vídeos Introdutórios ao Movimento.
-          <li>Ativar pelo menos <strong>2 formas de pagamento</strong>.
-            <strong>Revolut, Payeer e Paypal (via MoneyBox)</strong> são os mais recomendados.<br>
-
-          </li>
-        </ol>
-        <p class="cltexth3 text-blue q-ma-lg">Passo 3: Programação e ativação do Navio</p>.
-
-        <p>Em AYNI A sequência de passos é programada com antecedência, de modo que:</p>
-        <ul class="lista">
-          <li>garantia de que as 3 etapas do processo ocorrem dentro do prazo e da forma prevista.</li>
-          <li>Fazer e terminar o processo de uma forma simples, agradável e semi-automática.</li>
-        </ul>
-
-        <p>Sua nave será programada e você entrará em uma conversa com seus colegas passageiros. Ao mesmo tempo,
-          você será informado da data em que seu navio navegará, ou seja, quando você poderá doar os 33 euros
-          e o nome e
-          dados do Sonhador para dar o seu presente.
-        </p>
-
-        <p class="clBorderImportant" style="border-color: deepskyblue">
-          As datas de programação e os passos são entendidos como '<em>previsão de ativação e conclusão</em>'.
-          No caso do fluxo de pessoas e convidados não permitir manter e alcançar o que foi programado no
-          tempos e
-          formulário esperado, as datas serão reprogramadas para permitir a conclusão de todos e não deixar o
-          a viagem pode ser interrompida.
-        </p>
-
-        <p>Na experiência dos 3 passos vamos nos encontrar e passar em 3 caracteres:</p>
-
-        <p style=""><strong>Doador</strong>: Aquele que faz o Presente de 33 €.<br>
-          <strong>Mediador</strong>: Ele é a ponte, aquele que liga os Doadores ao Sonhador.<br>
-          <strong>Dreamer</strong>: Aquele que manifesta o seu sonho ao receber os Presentes.<br>
-        </p>
-
-        <CTitleBanner title="Preview The 3 Steps (click here)" bgcolor="bg-green-5" canopen="true"
-                      visible="false" imgpreview="statics/images/step_1.jpg">
-          <p>A partir do momento em que sei o dia da partida do meu bilhete, os passos a dar
-            serão estes:</p>
-          <div class="text-center">
-            <q-img src="statics/images/passi_1.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Entro no chat Telegrama como Doador:</p>
-          <p>A conversa consiste em 8 doadores e um mediador.<br>
-            A minha tarefa é dar 33 € ao Sonhador (o mediador irá guiar-me no processo).<br>
-            O presente será dado na data de ativação do boleto e no passo 1.
-          <div class="text-center">
-            <q-img src="statics/images/passi_2.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">abro uma conversa por telegrama e torno-me Provedor de Justiça:</p>
-          <p>O chat consiste em 8 doadores (que eu ajudarei a entrar no chat) e eu, o Mediador.<br>
-
-            O meu trabalho é garantir que todos os Doadores façam o Presente para o Sonhador.
-            O sistema enviará automaticamente instruções para fazer o Presente, o Mediador (I) irá verificar
-            e
-            irá acompanhar o processo.<br>
-
-          <div class="text-center">
-            <q-img src="statics/images/passi_3.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Dreamer Become a Dreamer:</p>
-          <p>O chat onde eu sou o Dreamer é o mesmo e com as mesmas pessoas abertas no passo 2 (onde eu fui
-            mediador)
-            e mesmo aqui os papéis mudam, ou seja, agora há 8 mediadores e eu, o Sonhador.<br>
-            Minha tarefa é abrir-me para receber os Presentes de cada Doador, completar-me e celebrar
-            a Abundância.<br>
-          </p>
-
-        </CTitleBanner>
-
-        <p class="text-blue-10 q-ma-lg clBorderImportant text-center" style="font-size: 1.15rem;">O Chat
-          Automático
-          <strong>AYNI BOT</strong> me enviará todas as instruções que preciso de fazer no momento apropriado!
-
-        <p class="cltexth2 text-green-8 q-ma-lg"><span class="boldhigh">Good... Agora fique à vontade, a sua viagem já começou!</span>
-        </p>
-
-      </CImgText>
-    </div>
-    <div v-else-if="toolsext.isLang('fr')">
-      <CTitleBanner title="AYNI GIFT*ECOnomy"></CTitleBanner>
-      .
-      <CImgText src="">
-        <p class="cltexth3 text-green-8 q-ma-sm"><span
-          class="boldhigh">Mouvement d’ĒCOnomie Solidaire ~AYNI GIFT*ECOnomy</span></p>.
-        <p>
-          <strong>Ayni</strong> est un mouvement d'économie solidaire. Il est basé sur la <strong>pratique du
-          don</strong>, de
-          l’acte de donner comme ressource et comme richesse ! Donner et offrir m'ouvre à recevoir, crée des
-          relations basées sur le <strong>soutien et la gratitude</strong>, et non sur le profit.</p>
-        <p>
-          <strong>Ayni</strong> est pensée et créée pour permettre aux personnes de s'aider et de se soutenir
-          mutuellement, pour réaliser les propres rêves et les propres projets de vie. C'est un projet sérieux
-          qui nécessite, pour ceux qui veulent y participer, de comprendre qu'il ne s'agit pas d'un système
-          pour gagner de l'argent ou d'un fond d'investissement classique, mais d'un moyen qui invite à
-          récupérer le facteur humain d'entraide à travers le soutien et l'accompagnement continus des
-          nouveaux participants/es par ceux et celles qui ont déjà eu une expérience dans ce mouvement et dans
-          d'autres mouvements d'Ēconomie Solidaire, par le biais d’une mise en réseau, créant ainsi des
-          relations et des expériences de <strong>Valeur, générant une Véritable Richesse</strong>.</p>
-        <br>
-        <p class="text-center"><strong>Les outils nécessaires pour faire partie de AYNI</strong></p>.
-        <ul class="text-center lista">
-          <li>Téléphone portable et/ou ordinateur</li>
-          <li>App Telegram</li>
-        </ul>
-        <p class="cltexth3 text-red q-ma-lg">Qu'est-ce qu'il faut faire pour entrer dans <strong>Ayni</strong>?
-        </p>
-        <p class="cltexth3 text-blue q-ma-lg">Etape 1: ACCUEIL</p>
-        <ul class="lista">
-          <li>Quelqu'un vous a invité et vous a donné le lien d'accès au site <strong>AYNI
-            GIFT*ECOnomy.</strong> et vous vous êtes inscrit.
-          </li>
-          <li>Entrez dans le chat Télégram <strong>Ayni-EMPOWER</strong>, lieu de rencontre, accueil de
-            nouvelles
-            personnes invitées, et nous aidons à soutenir et à élargir notre vision et notre mouvement.
-          </li>
-          <li>
-            Entrez dans le chat Télégram <strong>AYNI-BIBLIO</strong> qui est un canal d'informations
-            où sont publiés des communiqués, des nouvelles et des informations sur le mouvement.
-          </li>
-          <li>
-            Enfin, nous avons Télégram <strong>AYNI-HELP</strong> où vous pouvez entrer quand vous voulez
-            pour toutes demandes ou doutes, en trouvant une aide pratique à votre disposition-
-          </li>
-        </ul>
-
-        <p class="cltexth3 text-blue q-ma-lg">Étape 2: COMPLÉTER LES REQUIS DEMANDĒS</p>.
-        <ol class="lista">
-          <li>Lisez et acceptez nos lignes directrices et regardez les vidéos d'introduction au mouvement.
-          <li>Activer au moins 2 <strong>moyens de paiement</strong>
-            <strong>Revolut, Payeer et Paypal (via MoneyBox)</strong> sont les plus recommandés.<br>
-          </li>
-        </ol>
-        <p class="cltexth3 text-blue q-ma-lg">Etape 3: PROGRAMMATION ET ACTIVATION DE DES NAVIRES</p>.
-
-        <p>Dans AYNI La séquence des étapes est programmée à l'avance, de sorte à:</p>
-        <ul class="lista">
-          <li>garantir que les 3 passages du processus se déroulent dans les délais et sous la forme prévus
-          </li>
-          <li>réaliser et terminer le processus de manière simple, agréable et semi-automatique.</li>
-        </ul>
-
-        <p>Votre Navire sera programmé et vous entrerez en conversation avec vos compagnons de voyage. Dans le
-          même temps, vous serez informé(e) de la date à laquelle le navire sera activé et à laquelle vous
-          pourrez faire le Don des 33€, ainsi que le nom et les données du Rêveur/Rêveuse à qui faire votre
-          Don. Vous connaîtrez également les dates de chacune des 3 étapes.
-
-        </p>
-
-        <p class="clBorderImportant" style="border-color: deepskyblue">
-          Les dates de programmation et les étapes sont comprises comme <em>"prévisions d’activation et de
-          complètement"</em>. Au cas où le flux de personnes et d'invités ne permettrait pas de maintenir et
-          de
-          réaliser ce qui a été programmé dans les délais et forme prévus, les dates seront reprogrammées pour
-          permettre le complètement à toutes et tous et pour éviter que le voyage puisse être interrompu.
-
-        </p>
-
-        <p>Dans l'expérience des 3 étapes nous rencontrerons et interpréterons 3 personnages:</p>
-
-        <p style=""><strong>Donateur</strong>: Celui/celle qui fait le Don de 33€.<br>
-          <strong>Médiateur</strong>: Il/Elle est le pont, celui ou celle qui met en relation le Donateur et
-          le Rêveur.<br>
-          <strong>Rêveur</strong>: Celui/celle qui manifeste son rêve en recevant les Dons.<br>
-        </p>
-
-        <CTitleBanner title="Aperçu des 3 étapes (cliquez ici)" bgcolor="bg-green-5" canopen="true"
-                      :visible="false" imgpreview="statics/images/passo_1.jpg">
-          <p>À partir du moment où je connais le jour du départ de mon navire, les étapes à suivre seront les
-            suivantes:</p>
-          <div class="text-center">
-            <q-img src="statics/images/passo_1.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">J'entre dans le chat du télégramme en tant que Donateur/Donatrice:</p>
-          <p>Le chat est formé de 8 donateurs et d'un médiateur.<br>
-            Mon rôle consiste à donner 33 € au Rêveur (le Médiateur me guidera dans le processus).<br>
-            Je ferai le Don à la date de départ de mon navire et à l'étape 1.
-          <div class="text-center">
-            <q-img src="statics/images/passo_2.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">J'ouvre un chat Telegram et deviens Médiateur/Médiatrice:</p>
-          <p>Le chat est formé de 8 Donateurs (que j'aiderai à entrer dans le chat) et moi, le Médiateur. <br>
-
-            Mon rôle consiste à m'assurer que tous les Donateurs fassent le Don au Rêveur. Le système
-            enverra automatiquement les instructions pour faire le Don, le Médiateur (moi) vérifiera et
-            accompagnera le processus.<br>
-
-
-          <div class="text-center">
-            <q-img src="statics/images/passo_3.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Je deviens Rêveur/Rêveuse:</p>
-          <p>Le chat où je suis Rêveur est le même et avec les mêmes personnes ouvert à l'étape 2 (où j'étais
-            Médiateur) et ici aussi les rôles changent, c'est-à-dire qu'il y a maintenant 8 médiateurs et
-            moi, le Rêveur.<br>
-            Ma tâche est de m'ouvrir pour recevoir les Dons de chaque Donateur, de compléter et de célébrer
-            l'Abondance.<br>
-          </p>
-
-        </CTitleBanner>
-
-        <p class="text-blue-10 q-ma-lg clBorderImportant text-center" style="font-size : 1.15rem ;">La Chat
-          automatique AYNI BOT m'enverra toutes les instructions nécessaires que je devrai réaliser au moment
-          opportun !
-
-        <p class="cltexth2 text-green-8 q-ma-lg"><span class="boldhigh">Bien... Mettez-vous à l'aise, votre voyage a commencé
-        </span>
-        </p>
-
-      </CImgText>
-    </div>
-    <div v-else>
-      <CTitleBanner title="AYNI GIFT*ECOnomy"></CTitleBanner>
-      <CImgText src="">
-        <p class="cltexth3 text-green-8 q-ma-sm"><span
-          class="boldhigh">Movement ECOnomy Solidarity ~ AYNI GIFT*ECOnomy</span></p>.
-        <p>
-          <strong>Ayni</strong> is a solidarity economy movement. It is based on the practice of
-          <strong>gift</strong>,
-          <strong>give as a resource as well as abundance! Giving open me up to receiving, creates
-            relationships based on help and gratitude</strong>, not on profit.</p>
-        <p>
-          <strong>Ayni</strong> is designed and created to allow people to help and support each other, so you
-          can make your dreams and your life plans come true. It is a serious project that gives, for those
-          who want to be part of it, understanding that this is not a system for making money or a classic
-          investment fund, but a way to recover that human factor of mutual aid through the continuous support
-          and accompaniment of the new members supported by those who have already had experience in this and
-          other Solidarity Economy movements through Networking, thus creating <strong>relationships and
-          experiences of Value, generating Real abundance.</strong>.</p>
-        <div class="text-center">
-          <p class="text-center"><strong>Tools needed to be part of AYNI</strong></p>.
-          <ul class="lista center_img">
-            <li>Mobile phone and/or computer</li>
-            <li>App Telegram</li>
-          </ul>
-        </div>
-        <p class="cltexth3 text-red q-ma-lg">What do you have to do to get into <strong>Ayni</strong>?</p>
-        <p class="cltexth3 text-blue q-ma-lg">Step 1: Welcome</p>
-        <ul class="lista">
-          <li>Someone invited you and gave you the login link to <strong>AYNI GIFT*ECOnomy.</strong> and you
-            signed up.
-          </li>
-          <li>Go into the Telegram <strong>Ayni-EMPOWER</strong> chat, where we meet, welcome new guests,
-            and help us to support and expand our vision and movement.
-          </li>
-          <li>
-            Enter the Telegram Channel <strong>AYNI-BIBLIO</strong> which is an information channel in which
-            you post communications, news and news about the movement.
-          </li>
-          <li>
-            Finally we have Telegram <strong>AYNI-HELP</strong> where you can enter whenever questions or
-            doubts arise, finding practical help at your disposal.
-          </li>
-        </ul>
-
-        <p class="cltexth3 text-blue q-ma-lg">Step 2: Completion of requirements</p>
-        <ol class="lista">
-          <li>Read and accept our Guidelines and Watch the Introductory Videos to the Movement.
-          <li>Activate at least <strong>2 payment methods</strong> (is recommended).
-            <strong>Revolut, Payeer and Paypal (via MoneyBox)</strong> are the most recommended.<br>
-          </li>
-        </ol>
-
-        <p class="cltexth3 text-blue q-ma-lg">Step 3: Programming and Activation of the Ship</p>
-
-        <p>In AYNI The sequence of steps is programmed in advance, so that:</p>
-        <ul class="lista">
-          <li>guarantee that the 3 steps of the process take place on time and in the form provided.</li>
-          <li>make and finish the process in a simple, enjoyable and semi-automated way.</li>
-        </ul>
-
-        <p>Your Ship will be programmed and you'll enter a chat with your fellow travellers. At the same time,
-          you will be informed of the date at which your ship will be activated and donate
-          the 33 € and the name and the data of the Dreamer to give your gift to.
-        </p>
-
-        <p class="clBorderImportant" style="border-color: deepskyblue">
-          The dates of programming and steps are understood as '<em>activation and completion predictions</em>'.
-          In case the flow of people and guests does not allow to maintain and achieve what has been
-          programmed in the times and form expected, the dates will be rescheduled to allow for completion of
-          all and not let the travel may be interrupted.
-        </p>
-
-        <p>In the experience of the 3 steps we will meet and pass in 3 characters:</p>
-
-        <p style=""><strong>Donor</strong>: He who makes the Gift of 33€.<br>
-          <strong>Mediator</strong>: He is the bridge, the one who connects Donors and Dreamer.<br>
-          <strong>Dreamer</strong>: He who manifests his dream by receiving the Gifts.<br>
-        </p>
-
-        <CTitleBanner title="Preview The 3 Steps (click here)" bgcolor="bg-green-5" canopen="true"
-                      :visible="false" imgpreview="statics/images/passo_1.jpg">
-          <p>From the moment I know the starting day, the steps to be taken will be these:</p>
-          <div class="text-center">
-            <q-img src="statics/images/passo_1.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">I enter the Telegram chat as Donor:</p>
-          <p>The chat is formed by 8 donors and a mediator.<br>
-            My task is to give 33 € to the Dreamer (the mediator will guide me in the process).<br>
-            The gift will be given on the date of activation of the Ship and step 1.
-          <div class="text-center">
-            <q-img src="statics/images/passo_2.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">I open a Telegram chat and become Mediator:</p>
-          <p>The chat consists of 8 Donors (which I will help to enter the chat) and me, the Mediator.
-            My job is to make sure that all the Donors give the Gift to the Dreamer. The system will
-            automatically send instructions to make the Gift, the Mediator (me) will verify and will
-            accompany the process.<br>
-
-          <div class="text-center">
-            <q-img src="statics/images/passo_3.jpg" class="img"></q-img>
-          </div>
-          <p class="grass">Dreamer Become a Dreamer:</p>
-          <p>The chat where I am Dreamer is the same and with the same people open in step 2 (where I was
-            Mediator) and here the roles change, there are now 8 mediators and me, the Dreamer.
-            My task is to open myself to receive the Gifts from each Donor, complete myself and celebrate
-            the Abundance.<br>
-            <br><br>.
-          </p>
-
-        </CTitleBanner>
-
-        <p class="text-blue-10 q-ma-lg clBorderImportant text-center" style="font-size: 1.15rem;">The Automatic
-          Chat <strong>AYNI BOT</strong> will send me all the instructions I need to do at the appropriate
-          time!
-
-
-        <p class="cltexth2 text-green-8 q-ma-lg"><span class="boldhigh">Good... Now make yourself comfortable, your journey has begun!
-        </span></p>
-      </CImgText>
-    </div>
-
-    <div>
-      <p>&nbsp;</p>
-      <div v-if="toolsext.isLang('it')">
-        <CTitleBanner title="Condizioni da Accettare:" bgcolor="bg-red-5"></CTitleBanner>
-        <ul class="lista-small">
-          <li>dichiaro di aver letto e ben compreso le linee guida del movimento AYNI</li>
-
-          <li>dichiaro di aver ben compreso l'impegno che prendo iscrivendomi a AYNI (facendo un regalo di 33
-            €)
-            e di aver compreso che senza non potrò proseguire il mio viaggio.
-          </li>
-
-          <li>Potrò avvalermi del diritto di recesso, entro 14 giorni dall'invio del dono, qualora non volessi
-            più continuare il mio viaggio.
-          </li>
-
-          <li>dichiaro di aver ben compreso che <strong>non è un fondo di investimento e che il mio regalo,
-            scaduti i 14 giorni del diritto di recesso, è a fondo perduto</strong>
-          </li>
-
-        </ul>
-      </div>
-      <div v-else-if="toolsext.isLang('si')">
-        <CTitleBanner title="Pogoji za sprejem:" bgcolor="bg-red-5"></CTitleBanner>
-        <ul class="lista-small">
-          <li>Izjavljam, da sem prebral in razumel smernice gibanja AYNI</li>
-
-          <li>Izjavljam, da sem popolnoma razumel zaveze, ki jih prevzemam z registracijo pri AYNI (z darilom
-            v višini 33 evrov) in da razumem, da brez vplačila ne bom mogel nadaljevati poti.
-          </li>
-
-          <li>Pravico do odstopanja bom lahko uveljavil v 14 dneh po pošiljanju darila, če ne želim več
-            nadaljevati poti
-          </li>
-
-          <li>Izjavljam, da sem dobro razumel, da ne gre za investicijski sklad in da je moje darilo po 14
-            dneh pravice do odstopa izgubljeno
-
-          </li>
-
-        </ul>
-      </div>
-      <div v-else-if="toolsext.isLang('es')">
-        <CTitleBanner title="Condiciones de aceptación:" bgcolor="bg-red-5"></CTitleBanner>
-        <ul class="lista-small">
-          <li>Declaro que he leído y comprendido bien las directrices del movimiento AYNI.</li>
-
-          <li>Declaro que he entendido bien los compromisos que hago al firmar para AYNI y haber entendido que
-            sin ella no seré incluido en la programación.
-          </li>
-
-          <li>Declaro que he comprendido bien que el <strong>no es un fondo de inversión y que mi regalo, una
-            vez que los 14 días del derecho de retiro hayan expirado, es no reembolsable</strong>.
-          </li>
-          <li>
-            Puedo ejercer mi derecho de retirada dentro de los 14 días siguientes al envío del regalo si no
-            deseo continuar mi viaje.
-          </li>
-        </ul>
-
-      </div>
-      <div v-else-if="toolsext.isLang('pt')">
-        <CTitleBanner title="Condições para Aceitar:" bgcolor="bg-red-5"></CTitleBanner>
-        <ul class="lista-small">
-          <li>Eu declaro que li e compreendi bem as orientações do movimento AYNI</li>
-          <li>Declaro que compreendi bem os compromissos que assumi ao inscrever-me no AYNI (trazer 2 pessoas,
-            presente
-            33 €) e ter entendido que sem isso não serei incluído na programação.
-          </li>
-
-          <li>Eu declaro que compreendi bem que <strong> não é um fundo de investimento e que a minha doação é
-            não
-            reembolsável</strong>
-          </li>
-
-          <li>
-            Posso exercer o meu direito de retirada no prazo de 14 dias após o envio do presente se não
-            quiser mais
-            continuar a minha viagem.
-          </li>
-        </ul>
-      </div>
-      <div v-else-if="toolsext.isLang('fr')">
-        <CTitleBanner title="Conditions d'acceptation:" bgcolor="bg-red-5"></CTitleBanner>
-        .
-        <ul class="lista-small">
-          <li>Je déclare avoir lu et bien compris les directives du mouvement AYNI;</li>
-          <li>Je déclare avoir bien compris les engagements que je prends en m'inscrivant à AYNI (Don de 33 €)
-            et que je comprends que sans cela je ne pourrai pas continuer mon voyage. Je pourrai bénéficier
-            du droit de rétraction, dans les 14 jours qui suivent l’envoie de mon Don si je ne souhaite plus
-            poursuivre mon voyage.
-          </li>
-
-          <li>Je déclare avoir bien compris qu'il ne s'agit pas d'un fonds d'investissement et que mon Don,
-            après 14 jours de la possibilité de rétraction, n’est plus remboursable
-          </li>
-
-          <li>Je peux exercer mon droit de rétractation dans les 14 jours suivant l'envoi du cadeau si je ne
-            souhaite plus poursuivre mon voyage.
-          </li>
-        </ul>
-
-      </div>
-      <div v-else>
-
-        <CTitleBanner title="Conditions to Accept:" bgcolor="bg-red-5"></CTitleBanner>
-        <ul class="lista-small">
-          <li>I declare that I have read and well understood the guidelines of the AYNI movement</li>
-          <li>I declare that I have well understood the commitments I make by enrolling in AYNI and to have
-            understood that without it I will not be included in the programming.
-          </li>
-
-          <li>I declare that I have well understood that <strong>is not an investment fund and that my gift,
-            once the 14 days of the right of withdrawal have expired, is
-            permanent donation</strong>
-          </li>
-
-          <li>I can exercise my right of withdrawal within 14 days of sending the gift if I no longer wish to
-            continue my trip.
-          </li>
-        </ul>
-      </div>
-
       <div v-if="showconditions">
         <q-checkbox
           class="bg-grey-4"

src/components/CHours/CHours.ts

@@ -0,0 +1,91 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { colTableHours, colTableStorehouse } from '@src/store/Modules/fieldsTable'
+
+
+import { CCard, CGridTableRec, CMyPage, CTitleBanner, CImgText } from '@components'
+
+import MixinBase from '@src/mixins/mixin-base'
+import { shared_consts } from '@src/common/shared_vuejs'
+import { UserStore } from '@store'
+
+@Component({
+  name: 'CHours',
+  mixins: [MixinBase],
+  components: { CImgText, CCard, CMyPage, CTitleBanner, CGridTableRec }
+})
+export default class CHours extends MixinBase {
+
+  @Prop({ required: true }) public todoId: string
+
+  public pagination = {
+    sortBy: 'descr',
+    descending: false,
+    page: 2,
+    rowsPerPage: 5
+    // rowsNumber: xx if getting data from a server
+  }
+
+  public created() {
+    console.log('created CHours')
+  }
+
+  get extraparams() {
+    return {
+      lk_tab: 'users',
+      lk_LF: 'userId',
+      lk_FF: '_id',
+      lk_as: 'user',
+      af_objId_tab: 'myId',
+      lk_proj: {
+        todoId: 1, userId: 1, descr: 1, date: 1, time_start: 1, time_end: 1, hours: 1,
+        username: 1, name: 1, surname: 1
+      }
+    }
+  }
+
+  public arrfilterand = [
+    {
+      label: 'Tutte le ore',
+      value: shared_consts.FILTER_HOURS_ALL
+    }
+  ]
+
+  get myfilterdef() {
+    return [shared_consts.FILTER_HOURS_MYLIST]
+  }
+
+  get myarrfilterand() {
+    const myfiltrodef = {
+      label: 'Mie Ore',
+      value: shared_consts.FILTER_HOURS_MYLIST,
+      hide: true,
+      default: true
+    }
+    let myarr = []
+    myarr.push(myfiltrodef)
+    if (this.arrfilterand)
+      myarr = [...myarr, ...this.arrfilterand]
+
+    return myarr
+  }
+
+  public selected = []
+  public dataPages = []
+
+  get getcolHours() {
+    return colTableHours
+  }
+
+  get getdefaultnewrec() {
+    const myrec = {
+      todoId: this.todoId,
+      userId: UserStore.state.my._id,
+      descr: ''
+    }
+
+    return myrec
+  }
+
+}

src/components/CHours/CHours.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <div class="q-ma-sm q-gutter-sm q-pa-xs">
+            <CGridTableRec prop_mytable="hours"
+                           prop_mytitle="Lista Ore"
+                           :prop_mycolumns="getcolHours"
+                           prop_colkey="descr"
+                           nodataLabel="Nessuna Lista Ore"
+                           noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
+                           :arrfilters="myarrfilterand"
+                           :filterdef="myfilterdef"
+                           :prop_codeId="todoId"
+                           :defaultnewrec="getdefaultnewrec"
+                           :extraparams="extraparams"
+            labeladd="Aggiungi Ora">
+
+            </CGridTableRec>
+        </div>
+    </div>
+</template>
+<script lang="ts" src="./CHours.ts">
+
+</script>
+<style lang="scss" scoped>
+    @import 'CHours.scss';
+</style>

src/components/CHours/index.ts

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

src/components/CImgTitle/CImgTitle.scss

@@ -55,7 +55,7 @@
 }
 
 .title{
-  font-size: 3.5rem;
+  font-size: 3rem;
   padding: 10px;
   text-shadow: .2rem .2rem .2rem #3d3d3d;
 }
@@ -63,7 +63,7 @@
 @media (max-width: 400px) {
   .title{
     padding: 5px;
-    font-size: 3rem;
+    font-size: 2.5rem;
   }
 }
 

src/components/CImgTitle/CImgTitle.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <q-parallax :src="getsrc" :height="tools.myheight_imgtitle(myheight, myheightmobile)">
-            <h1 class="text-white center_to_image title">{{title}}</h1>
-            <div v-if="legendinside" class="mylegendinside absolute-bottom custom-caption center_to_image" v-html="legendinside"></div>
+            <h1 class="text-white title" style="text-align: center" >{{title}}</h1>
+            <div v-if="legendinside" class="mylegendinside absolute-bottom custom-caption" style="text-align: center" v-html="legendinside"></div>
         </q-parallax>
         <div v-if="legend" class="mylegend" v-html="legend"></div>
     </div>

src/components/CInput/CInput.ts

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import VueScrollReveal from 'vue-scroll-reveal'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { Screen } from 'quasar'
+
+
+@Component({
+  name: 'CInput'
+})
+export default class CInput extends Vue {
+  @Prop({ required: false, default: '' }) public src: string
+  @Prop({ required: false, default: '' }) public src2: string
+  @Prop({ required: false, default: 'myclimg' }) public class1: string
+  @Prop({ required: false, default: '' }) public style1: string
+  @Prop({ required: false, default: 'image' }) public alt1: string
+  @Prop({ required: false, default: 'image' }) public alt2: string
+
+  get clrowcol() {
+    let mycl = 'row'
+    if (tools.isMobile())
+      mycl = 'column'
+
+    return mycl
+  }
+
+  get myclass() {
+
+    return this.clrowcol + ' items-start q-col-gutter-xs imgtext '
+  }
+}

src/components/CInput/CInput.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <q-field
+  </div>
+</template>
+
+<script lang="ts" src="./CInput.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CInput.scss';
+</style>

src/components/CInput/index.ts

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

src/components/CListNationality/CListNationality.vue

@@ -18,7 +18,7 @@
             </q-item-section>
 
             <q-item-section>
-              <q-item-label>{{ tools.getNationsByNationality(nat._id, false) }}</q-item-label>
+              <q-item-label>{{ tools.getNationsByNationality(nat._id) }}</q-item-label>
             </q-item-section>
 
             <q-item-section side>

src/components/CMyCart/CMyCart.ts

@@ -6,7 +6,7 @@ import { CCardState } from '../CCardState'
 import { CCopyBtn } from '../CCopyBtn'
 
 import { IOrder, IProduct } from '@src/model'
-import { Products, UserStore } from '@store'
+import { GlobalStore, Products, UserStore } from '@store'
 import { CSingleCart } from '../../components/CSingleCart'
 import MixinUsers from '@src/mixins/mixin-users'
 
@@ -44,4 +44,8 @@ export default class CMyCart extends MixinUsers {
       return 0
     }
   }
+
+  public closecart() {
+    GlobalStore.state.rightCartOpen = false
+  }
 }

src/components/CMyCart/CMyCart.vue

@@ -11,7 +11,7 @@
           </q-btn>
         </div>
         <div class="col-6" style="text-align: right">
-          <span class="text-grey q-mr-xs">Totale:</span> <span
+          <span v-if="myTotalPrice" class="text-grey q-mr-xs">Totale:</span> <span
           class="text-subtitle1 q-mr-sm ">€ {{ myTotalPrice.toFixed(2) }}</span>
         </div>
       </div>
@@ -30,7 +30,7 @@
         Il Carrello è Vuoto
       </div>
       <div v-else style="text-align: center">
-        <q-btn rounded icon="fas fa-shopping-cart" color="green" label="Vai alla Cassa" class="q-mb-sm" to="/checkout"></q-btn>
+        <q-btn rounded icon="fas fa-shopping-cart" color="green" label="Vai alla Cassa" class="q-mb-sm" to="/checkout" @click="closecart"></q-btn>
       </div>
     </div>
   </div>

src/components/CMyEditor/CMyEditor.ts

@@ -18,6 +18,7 @@ export default class CMyEditor extends Vue {
   @Prop({ required: false, default: '' }) public title
   @Prop({ required: true }) public value
   @Prop({ required: false, default: '' }) public myclass
+  @Prop({ required: false, default: true }) public showButtons
 
   public myvalue = ''
   public mycolor = ''

src/components/CMyEditor/CMyEditor.vue

@@ -1,50 +1,49 @@
 <template>
   <div>
-    <q-dialog v-model="showeditor">
-      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;` ">
-        <q-toolbar class="bg-primary text-white" style="min-height: 30px;">
-          <q-toolbar-title>
-            Editor
-          </q-toolbar-title>
-          <q-btn flat round color="white" icon="close" v-close-popup @click="showeditor=false"></q-btn>
-        </q-toolbar>
-        <q-card-section class="inset-shadow" style="padding: 4px !important;">
+    <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;` ">
+      <q-toolbar class="bg-primary text-white" style="min-height: 30px;">
+        <q-toolbar-title>
+          Editor
+        </q-toolbar-title>
+        <q-btn flat round color="white" icon="close" v-close-popup @click="showeditor=false"></q-btn>
+      </q-toolbar>
+      <q-card-section class="inset-shadow" style="padding: 4px !important;">
 
-          <CTitleBanner :title="title"></CTitleBanner>
-          <form
-            autocorrect="off"
-            autocapitalize="off"
-            autocomplete="off"
-            spellcheck="false">
+        <CTitleBanner :title="title"></CTitleBanner>
+        <form
+          autocorrect="off"
+          autocapitalize="off"
+          autocomplete="off"
+          spellcheck="false">
+
+          <q-btn rounded size="sm" color="primary">
+            <q-icon name="colorize" class="cursor-pointer">
+              <q-popup-proxy>
+                <q-color v-model="mycolor" @change="setcolor"></q-color>
+              </q-popup-proxy>
+            </q-icon>
+          </q-btn>
+          <q-editor
+            ref="editor_ref"
+            toolbar-text-color="white"
+            toolbar-toggle-color="yellow-8"
+            toolbar-bg="primary"
+            :toolbar="toolbarcomp"
+            debounce="500"
+            :fonts="myfonts"
+            @input="changeval"
+            @paste.native="evt => pasteCapture(evt)"
+            @keyup.enter.stop
+            v-model="myvalue">
+          </q-editor>
+        </form>
+      </q-card-section>
+      <q-card-actions v-if="showButtons" align="center">
+        <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveval"></q-btn>
+        <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup @click="annulla"></q-btn>
+      </q-card-actions>
+    </q-card>
 
-            <q-btn rounded size="sm" color="primary">
-              <q-icon name="colorize" class="cursor-pointer">
-                <q-popup-proxy>
-                  <q-color v-model="mycolor" @change="setcolor"></q-color>
-                </q-popup-proxy>
-              </q-icon>
-            </q-btn>
-            <q-editor
-              ref="editor_ref"
-              toolbar-text-color="white"
-              toolbar-toggle-color="yellow-8"
-              toolbar-bg="primary"
-              :toolbar="toolbarcomp"
-              debounce="500"
-              :fonts="myfonts"
-              @input="changeval"
-              @paste.native="evt => pasteCapture(evt)"
-              @keyup.enter.stop
-              v-model="myvalue">
-            </q-editor>
-          </form>
-        </q-card-section>
-        <q-card-actions align="center">
-          <q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveval"></q-btn>
-          <q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup @click="annulla"></q-btn>
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
   </div>
 </template>
 
@@ -52,5 +51,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import './CMyEditor.scss';
+@import './CMyEditor.scss';
 </style>

src/components/CMyFieldDb/CMyFieldDb.ts

@@ -13,10 +13,11 @@ import { GlobalStore, UserStore } from '../../store/Modules'
 import { CMyChipList } from '../CMyChipList'
 import { CMyToggleList } from '../CMyToggleList'
 import translate from '@src/globalroutines/util'
+import { CDateTime } from '../CDateTime'
 
 @Component({
   name: 'CMyFieldDb',
-  components: { CMyEditor, CMySelect, CMyChipList, CMyToggleList }
+  components: { CMyEditor, CMySelect, CMyChipList, CMyToggleList, CDateTime }
 })
 
 export default class CMyFieldDb extends MixinBase {
@@ -29,6 +30,8 @@ export default class CMyFieldDb extends MixinBase {
   @Prop({ required: false, default: '' }) public jointable: string
   @Prop({ required: false, default: 'settings' }) public table: string
   @Prop({ required: false, default: '' }) public myimg: string
+  @Prop({ required: false, default: '' }) public id: string
+  @Prop({ required: false, default: '' }) public idmain: string
 
   public $t
   public myvalue = ''
@@ -37,18 +40,28 @@ export default class CMyFieldDb extends MixinBase {
   public countryname = ''
 
   public created() {
-    this.myvalue = this.getValDb(this.mykey, this.serv, '', this.table, this.mysubkey)
+    this.crea()
+  }
+
+  public crea() {
+
+    this.myvalue = this.getValDb(this.mykey, this.serv, '', this.table, this.mysubkey, this.id, this.idmain)
     this.col.jointable = this.jointable
     this.col.fieldtype = this.type
     this.col.label = this.title
 
-    // console.log('created', this.myvalue)
+    // console.log('CMyFieldDb crea', this.myvalue)
+  }
+
+  @Watch('id')
+  public idchanged(value) {
+    this.crea()
   }
 
   public getclassCol(col) {
     if (col) {
       let mycl = (this.disable || col.disable) ? '' : 'colmodif '
-      mycl += (col.fieldtype === tools.FieldType.date) ? ' coldate flex flex-container ' : ''
+      mycl += ((col.fieldtype === tools.FieldType.date) || (col.fieldtype === tools.FieldType.onlydate)) ? ' coldate flex flex-container ' : ''
 
       return mycl
     } else {
@@ -63,6 +76,12 @@ export default class CMyFieldDb extends MixinBase {
       } else {
         return tools.getstrDateTime(val)
       }
+    } else if (this.col.fieldtype === tools.FieldType.onlydate) {
+      if (val === undefined) {
+        return '[]'
+      } else {
+        return tools.getstrDate(val)
+      }
     } else if (this.col.fieldtype === tools.FieldType.boolean) {
       return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
     } else if (this.col.fieldtype === tools.FieldType.binary) {
@@ -120,7 +139,7 @@ export default class CMyFieldDb extends MixinBase {
 
   public savefield(value, initialval) {
     this.myvalue = value
-    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey)
+    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey, this.id)
   }
 
   public savefieldboolean(value) {
@@ -129,10 +148,10 @@ export default class CMyFieldDb extends MixinBase {
     else
       this.myvalue = value
 
-    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey)
+    this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey, this.id)
   }
 
-  public selectcountry({name, iso2, dialCode}) {
+  public selectcountry({ name, iso2, dialCode }) {
     // console.log(name, iso2, dialCode)
     this.myvalue = iso2
     this.countryname = name

src/components/CMyFieldDb/CMyFieldDb.vue

@@ -31,6 +31,18 @@
           >
           </CDateTime>
         </div>
+        <div v-else-if="type === tools.FieldType.onlydate">
+          <CDateTime
+            :label="col.label"
+            class="cursor-pointer"
+            :value.sync="myvalue"
+            :readonly="false"
+            :dense="true"
+            :canEdit="canEdit"
+            view="date"
+          >
+          </CDateTime>
+        </div>
         <div v-else :class="mycl">
           <div v-if="type === tools.FieldType.binary">
             <CMyChipList
@@ -140,6 +152,13 @@
 
               </q-input>
             </div>
+            <div v-else-if="type === tools.FieldType.hours">
+              <CMySelect label="Ore" :value.sync="myvalue"
+                         optval="_id" optlab="label"
+                         :useinput="false"
+                     o    :options="tools.SelectHours">
+              </CMySelect>
+            </div>
             <div v-else-if="type === tools.FieldType.binary">
               <CMyToggleList :label="col.title"
                              :options="db_fieldsTable.getTableJoinByName(col.jointable)"

src/components/CMyPage/CMyPage.ts

@@ -4,13 +4,10 @@ import { GlobalStore, UserStore } from '@store'
 
 import { Footer } from '../../components/Footer'
 
-// import VueScrollReveal from 'vue-scroll-reveal'
-import { tools } from '@src/store/Modules/tools'
-import { toolsext } from '@src/store/Modules/toolsext'
-import { Screen } from 'quasar'
 import { CImgTitle } from '../../components/CImgTitle/index'
 import { CTitle } from '../../components/CTitle/index'
 import MixinsMetaTags from '../../mixins/mixin-metatags'
+import { IMyPage } from '@src/model'
 
 @Component({
   name: 'CMyPage',
@@ -18,7 +15,8 @@ import MixinsMetaTags from '../../mixins/mixin-metatags'
   components: { Footer, CImgTitle, CTitle }
 })
 export default class CMyPage extends Vue {
-  @Prop({ required: true, default: '' }) public title: string
+  @Prop({ required: false, default: '' }) public title: string
+  @Prop({ required: false, default: '' }) public mypath: string
   @Prop({ required: false, default: '' }) public img: string
   @Prop({ required: false, default: '' }) public imgbackground: string
   @Prop({ required: false, default: '' }) public sizes: string
@@ -26,6 +24,7 @@ export default class CMyPage extends Vue {
   @Prop({ required: false, default: false }) public nofooter: boolean
   public $t
   public $q
+  public rec: IMyPage = null
 
   // public metaInfo() {
   //   return {
@@ -40,8 +39,10 @@ export default class CMyPage extends Vue {
   //   }
   // }
 
-  public mounted() {
+  public async mounted() {
     // console.log('CMYPage title=', this.title)
     // console.table(this.meta)
+    if (this.mypath !== '')
+      this.rec = await GlobalStore.actions.loadPage(this.mypath)
   }
 }

src/components/CMyPage/CMyPage.vue

@@ -1,21 +1,53 @@
 <template>
-    <div>
+  <div>
+    <div v-if="mypath && !!rec">
+      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+        <div v-if="!!rec.img1" class="text-center">
+          <q-img :src="`statics/`+ rec.img1" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content" v-html="rec.content"></div>
+        <q-video v-if="!!rec.video1" :src="rec.video1" :ratio="rec.ratio1">
+        </q-video>
+
+        <div v-if="!!rec.img2" class="text-center">
+          <q-img :src="`statics/`+ rec.img2" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content2" v-html="rec.content2"></div>
+        <q-video v-if="!!rec.video2" :src="rec.video2" :ratio="rec.ratio2"></q-video>
+
+        <div v-if="!!rec.img3" class="text-center">
+          <q-img :src="`statics/`+ rec.img2" class="img"></q-img>
+        </div>
+
+        <div v-if="!!rec.content3" v-html="rec.content3"></div>
+        <q-video v-if="!!rec.video3" :src="rec.video3" :ratio="rec.ratio3"></q-video>
+        <div v-if="!!rec.content4" v-html="rec.content4"></div>
+
+      </div>
+
+    </div>
+    <div v-else>
+      <div v-if="!!title">
         <CTitle v-if="imgbackground" :imgbackground="imgbackground"
                 :headtitle="title" :sizes="sizes" :styleadd="styleadd"></CTitle>
         <div v-if="!imgbackground">
-            <CImgTitle v-if="img" :src="img" :title="title">
-            </CImgTitle>
+          <CImgTitle v-if="img" :src="img" :title="title">
+          </CImgTitle>
         </div>
         <slot></slot>
         <div v-if="!nofooter">
-            <Footer></Footer>
+          <Footer></Footer>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 
 <script lang="ts" src="./CMyPage.ts">
 </script>
 <style lang="scss" scoped>
-    @import './CMyPage.scss';
+@import './CMyPage.scss';
 </style>

src/components/CMyPopupEdit/CMyPopupEdit.ts

@@ -6,6 +6,7 @@ import { toolsext } from '@src/store/Modules/toolsext'
 import { IColGridTable } from '../../model'
 import { fieldsTable } from '../../store/Modules/fieldsTable'
 import { CMyChipList } from '../CMyChipList'
+import { CDate } from '../CDate'
 import { CDateTime } from '../CDateTime'
 import { CMyToggleList } from '../CMyToggleList'
 import { CMySelect } from '../CMySelect'
@@ -14,7 +15,7 @@ import { CGallery } from '../CGallery'
 
 @Component({
   name: 'CMyPopupEdit',
-  components: { CMyChipList, CDateTime, CMyToggleList, CMySelect, CMyEditor, CGallery }
+  components: { CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery }
 })
 
 export default class CMyPopupEdit extends Vue {
@@ -27,11 +28,13 @@ export default class CMyPopupEdit extends Vue {
   @Prop({ required: false, default: 'row' }) public view
   @Prop({ required: false, default: '5' }) public minuteinterval
   @Prop({ required: false, default: false }) public disable
+  @Prop({ required: false, default: false }) public visulabel
 
   public myvalue = ''
   public myvalueprec = 'false'
   public countryname = ''
-  public visueditor : boolean = false
+  public visueditor: boolean = false
+  public showeditor: boolean = true
 
   get tools() {
     return tools
@@ -50,6 +53,29 @@ export default class CMyPopupEdit extends Vue {
     this.$emit('update:row', newval)
   }
 
+  public getrealval(newval) {
+    if (this.col.fieldtype === tools.FieldType.hours) {
+      newval = newval.value
+    }
+  }
+
+  public changevalRec(newval) {
+    console.log('this.row', this.row, 'this.col', this.col, 'newval', newval)
+    console.log('this.row[this.col.name]', this.row[this.col.name])
+    this.row[this.col.name] = newval
+    console.log('changevalRec update:row', newval)
+    this.$emit('update:row', this.row)
+  }
+
+  public changevalRecHours(newval) {
+    if (this.col.fieldtype === tools.FieldType.hours) {
+      newval = newval.value
+    }
+    this.changevalRec(newval)
+
+    this.myvalue = newval
+  }
+
   public updatedata() {
     this.mounted()
   }
@@ -161,6 +187,12 @@ export default class CMyPopupEdit extends Vue {
       } else {
         return tools.getstrDateTime(val)
       }
+    } else if (col.fieldtype === tools.FieldType.onlydate) {
+      if (val === undefined) {
+        return '[]'
+      } else {
+        return tools.getstrDate(val)
+      }
     } else if (col.fieldtype === tools.FieldType.boolean) {
       return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
     } else if (col.fieldtype === tools.FieldType.binary) {
@@ -179,7 +211,7 @@ export default class CMyPopupEdit extends Vue {
       else
         return fieldsTable.getMultiValueByTable(col, val)
     } else {
-      if (val === undefined)
+      if (val === undefined || val === null)
         return '[]'
       else if (val === '') {
         return '[]'
@@ -201,10 +233,14 @@ export default class CMyPopupEdit extends Vue {
     }
   }
 
+  public visInNewRec(col) {
+    return !col.notShowInNewRec
+  }
+
   public getclassCol(col) {
     if (col) {
       let mycl = (col.disable || this.isviewfield) ? '' : 'colmodif'
-      mycl += (col.fieldtype === tools.FieldType.date) ? ' coldate flex flex-container' : ''
+      mycl += ((col.fieldtype === tools.FieldType.date) || (col.fieldtype === tools.FieldType.onlydate)) ? ' coldate flex flex-container' : ''
 
       return mycl
     } else {
@@ -228,4 +264,8 @@ export default class CMyPopupEdit extends Vue {
     this.myvalue = '+' + coderec.dialCode
   }
 
+  public createHours(value) {
+
+  }
+
 }

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -1,30 +1,168 @@
 <template>
   <div :class="getclassCol(col)">
-    <div v-if="col.fieldtype === tools.FieldType.listimages">
-      <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
-                @showandsave="Savedb">
+    <div v-if="visulabel" class="flex">
+      <div v-if="visInNewRec(col)" style="flex-grow: 1;">
+        <div v-if="col.fieldtype === tools.FieldType.string">
+          <q-input v-model="myvalue"
+                   autogrow
+                   @keyup.enter.stop
+                   @input="changevalRec"
+                   autofocus
+                   :label="col.label">
+          </q-input>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.date">
+          <CDateTime
+            :label="col.label"
+            class="cursor-pointer"
+            :valueDate="myvalue"
+            :readonly="false"
+            :minuteinterval="minuteinterval"
+            :dense="true"
+            @input="changevalRec"
+            canEdit="true"
+            @savetoclose="SaveValueInt"
+            @show="OpenEdit">
+          </CDateTime>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.onlydate">
+          <CDateTime
+            :label="col.label"
+            class="cursor-pointer"
+            :valueDate="myvalue"
+            :readonly="false"
+            :minuteinterval="minuteinterval"
+            :dense="true"
+            @input="changevalRec"
+            canEdit="true"
+            @savetoclose="SaveValueInt"
+            @show="OpenEdit"
+            view="date">
+          </CDateTime>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.number">
+          <q-input v-model="myvalue" type="number"
+                   autofocus
+                   @input="changevalRec"
+                   :label="col.label"
+          >
 
-      </CGallery>
-    </div>
-    <div v-else-if="col.fieldtype === tools.FieldType.image">
-      <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
-                @showandsave="Savedb">
+          </q-input>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.hours">
+          <div class="row">
+            <q-input v-model="myvalue" type="number"
+                     autofocus
+                     @input="changevalRec"
+                     style="max-width: 100px;"
+                     :label="col.label"
+            >
 
-      </CGallery>
-    </div>
-    <div v-else-if="col.fieldtype === tools.FieldType.nationality">
-      <div>
-        {{myvalue}}
-      </div>
-    </div>
-    <div v-else-if="col.fieldtype === tools.FieldType.intcode">
-      <div>
-        {{myvalue}}
+            </q-input>
+
+            <CMySelect label="Ore" :value.sync="myvalue"
+                       optval="value" optlab="label"
+                       :dense="false"
+                       :use-input="false"
+                       @changeval="changevalRecHours"
+                       style="max-width: 100px;"
+                       :options="tools.SelectHours">
+            </CMySelect>
+          </div>
+
+          <!--<q-input v-model="myvalue" type="number"
+                   autofocus
+                   @input="changevalRec"
+                   :label="col.label">
+          </q-input>
+          -->
+
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.listimages">
+          <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
+                    @showandsave="Savedb"
+                    @input="changevalRec"
+          >
+
+          </CGallery>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.image">
+          <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
+                    @input="changevalRec"
+                    @showandsave="Savedb">
+
+          </CGallery>
+        </div>
+        <div v-if="col.fieldtype === tools.FieldType.binary">
+          <CMyChipList
+            :type="tools.FieldType.binary"
+            :value="myvalue"
+            @input="changevalRec"
+            :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+            :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+            :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
+        </div>
+        <!-- Show Value -->
+        <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
+          <CMyChipList
+            @input="changevalRec"
+            :type="tools.FieldType.multiselect"
+            :value="myvalue"
+            :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+            :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+            :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.select">
+          <CMyChipList
+            @input="changevalRec"
+            myclass="text-center"
+            :type="tools.FieldType.select"
+            :value="myvalue"
+            :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+            :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+            :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+            :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.boolean">
+          <q-toggle dark color="green" v-model="myvalue" :label="col.title"
+                    :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
+                    @input="changevalRec"></q-toggle>
+        </div>
+        <div v-else-if="col.fieldtype === tools.FieldType.html">
+          <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true">
+
+          </div>
+        </div>
       </div>
     </div>
     <div v-else>
-      <!-- Edit Value -->
-      <span v-if="col.fieldtype === tools.FieldType.date">
+      <div v-if="col.fieldtype === tools.FieldType.listimages">
+        <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
+                  @showandsave="Savedb">
+
+        </CGallery>
+      </div>
+      <div v-else-if="col.fieldtype === tools.FieldType.image">
+        <CGallery :gall="row" :listimages="myvalue" :edit="isviewfield"
+                  @showandsave="Savedb">
+
+        </CGallery>
+      </div>
+      <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+        <div>
+          {{ myvalue }}
+        </div>
+      </div>
+      <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+        <div>
+          {{ myvalue }}
+        </div>
+      </div>
+      <div v-else>
+        <!-- Edit Value -->
+        <span v-if="col.fieldtype === tools.FieldType.date">
                 <CDateTime
                   :label="col.label"
                   class="cursor-pointer"
@@ -37,174 +175,197 @@
                   @show="OpenEdit">
                 </CDateTime>
             </span>
-      <div v-if="col.fieldtype !== tools.FieldType.date">
-        <div>
-          <div v-if="col.fieldtype === tools.FieldType.binary">
-            <CMyChipList
-              :type="tools.FieldType.binary"
-              :value="myvalue"
-              :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-              :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-              :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-              :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-          </div>
-          <!-- Show Value -->
-          <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
-            <CMyChipList
-              :type="tools.FieldType.multiselect"
-              :value="myvalue"
-              :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-              :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-              :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-              :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-          </div>
-          <div v-else-if="col.fieldtype === tools.FieldType.select">
-            <CMyChipList
-              myclass="text-center"
-              :type="tools.FieldType.select"
-              :value="myvalue"
-              :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-              :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-              :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-              :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
-          </div>
-          <div v-else-if="col.fieldtype === tools.FieldType.boolean">
-            <q-toggle dark color="green" v-model="myvalue" :label="col.title"
-                      :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
-                      @input="Savedb"></q-toggle>
-          </div>
-          <div v-else-if="col.fieldtype === tools.FieldType.html">
-            <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true">
-
+        <span v-else-if="col.fieldtype === tools.FieldType.onlydate">
+                <CDateTime
+                  :label="col.label"
+                  class="cursor-pointer"
+                  :valueDate="myvalue"
+                  :readonly="false"
+                  :minuteinterval="minuteinterval"
+                  :dense="true"
+                  :canEdit="canEdit"
+                  @savetoclose="SaveValueInt"
+                  @show="OpenEdit"
+                  view="date">
+                </CDateTime>
+            </span>
+        <div v-else>
+          <div>
+            <div v-if="col.fieldtype === tools.FieldType.binary">
+              <CMyChipList
+                :type="tools.FieldType.binary"
+                :value="myvalue"
+                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
             </div>
-          </div>
-          <div v-else>
-            {{ visuValByType(myvalue, col, row) }}
-          </div>
-
-          <div v-if="col.fieldtype === tools.FieldType.html">
-
-            <CMyEditor v-if="visueditor" :value.sync="myvalue" :title="col.title" @keyup.enter.stop
-                       @showandsave="Savedb" @annulla="visueditor=false">
-
-            </CMyEditor>
-          </div>
-          <q-popup-edit
-            v-if="canEdit && col.fieldtype !== tools.FieldType.html"
-            v-model="myvalue"
-            :disable="col.disable"
-            :title="col.title"
-            buttons
-            persistent
-            @save="SaveValueInt"
-            @show="OpenEdit">
-
-            <div v-if="col.fieldtype === tools.FieldType.boolean">
-              <q-checkbox v-model="myvalue" :label="col.title">
-              </q-checkbox>
-              {{ visuValByType(myvalue, col, row) }}
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.string">
-              <q-input v-model="myvalue"
-                       autogrow
-                       @keyup.enter.stop
-                       autofocus>
-
-              </q-input>
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.password">
-              <q-input v-model="myvalue"
-                       type="password"
-                       @keyup.enter.stop
-                       autofocus>
-
-              </q-input>
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.number">
-              <q-input v-model="myvalue" type="number"
-                       autofocus>
-
-              </q-input>
-            </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.binary">
-              <CMyToggleList :label="col.title"
-                             :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-                             :value.sync="myvalue"
-                             :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-                             :optlab="db_fieldsTable.getLabelByTable(col.jointable)">
-              </CMyToggleList>
+            <!-- Show Value -->
+            <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
+              <CMyChipList
+                :type="tools.FieldType.multiselect"
+                :value="myvalue"
+                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
             </div>
             <div v-else-if="col.fieldtype === tools.FieldType.select">
-              <CMySelect :label="col.title"
-                         :value.sync="myvalue"
-                         :optval="db_fieldsTable.getKeyByTable(col.jointable)"
-                         :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
-                         :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-                         :useinput="false">
-              </CMySelect>
+              <CMyChipList
+                myclass="text-center"
+                :type="tools.FieldType.select"
+                :value="myvalue"
+                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
             </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.nationality">
-              <div class="justify-center q-gutter-sm clgutter q-mt-sm">
-                <q-input
-                  v-model="countryname"
-                  :readonly="true"
-                  rounded dense
-                  debounce="1000"
-                >
+            <div v-else-if="col.fieldtype === tools.FieldType.boolean">
+              <q-toggle dark color="green" v-model="myvalue" :label="col.title"
+                        :disable="disable && col.name !== 'profile.saw_zoom_presentation'"
+                        @input="Savedb"></q-toggle>
+            </div>
+            <div v-else-if="col.fieldtype === tools.FieldType.html">
+              <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true">
 
-                  <template v-slot:prepend>
-                    <div style="font-size: 1rem;">
-                      <vue-country-code
-                        :defaultCountry="myvalue"
-                        :disabledFetchingCountry="true"
-                        @onSelect="selectcountry"
-                        :preferredCountries="tools.getprefCountries"
-                        :dropdownOptions="{ disabledDialCode: true }">
-
-                      </vue-country-code>
-                    </div>
-                  </template>
-                </q-input>
-                <div style="height: 180px;">
-
-                </div>
               </div>
             </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.intcode">
-
-              <vue-tel-input
-                @country-changed="intcode_change"
-                v-model="myvalue"
-                :placeholder="$t('reg.cell')"
-                :enabledCountryCode="true"
-                inputClasses="clCell"
-                wrapperClasses="clCellCode">
-              </vue-tel-input>
+            <div v-else>
+              {{ visuValByType(myvalue, col, row) }}
 
             </div>
-            <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
-              <div>join: {{col.jointable}}</div>
 
-              <q-select
-                v-model="myvalue"
-                rounded
-                outlined
-                multiple
-                dense
-                options-dense
-                :display-value="db_fieldsTable.getTitleByTable(col.jointable)"
-                emit-value
-                map-options
-                :options="db_fieldsTable.getTableJoinByName(col.jointable)"
-                :option-label="db_fieldsTable.getLabelByTable(col.jointable)"
-                :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
-                style="min-width: 150px"
-                @input="changeCol">
+            <div v-if="col.fieldtype === tools.FieldType.html">
 
-              </q-select>
+              <!--<q-dialog v-model="showeditor">-->
+                <CMyEditor v-if="visueditor" :value.sync="myvalue" :title="col.title" @keyup.enter.stop
+                           @showandsave="Savedb" @annulla="visueditor=false">
+
+                </CMyEditor>
+              <!--</q-dialog>-->
             </div>
+            <q-popup-edit
+              v-if="canEdit && col.fieldtype !== tools.FieldType.html"
+              v-model="myvalue"
+              :disable="col.disable"
+              :title="col.title"
+              buttons
+              persistent
+              @save="SaveValueInt"
+              @show="OpenEdit">
 
-          </q-popup-edit>
+              <div v-if="col.fieldtype === tools.FieldType.boolean">
+                <q-checkbox v-model="myvalue" :label="col.title">
+                </q-checkbox>
+                {{ visuValByType(myvalue, col, row) }}
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.string">
+                <q-input v-model="myvalue"
+                         autogrow
+                         @keyup.enter.stop
+                         autofocus>
+
+                </q-input>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.password">
+                <q-input v-model="myvalue"
+                         type="password"
+                         @keyup.enter.stop
+                         autofocus>
+
+                </q-input>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.number">
+                <q-input v-model="myvalue" type="number"
+                         autofocus>
+
+                </q-input>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.hours">
+                <q-input v-model="myvalue" type="number"
+                         autofocus>
+
+                </q-input>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.binary">
+                <CMyToggleList :label="col.title"
+                               :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                               :value.sync="myvalue"
+                               :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                               :optlab="db_fieldsTable.getLabelByTable(col.jointable)">
+                </CMyToggleList>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.select">
+                <CMySelect :label="col.title"
+                           :value.sync="myvalue"
+                           :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                           :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                           :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                           :useinput="false">
+                </CMySelect>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.nationality">
+                <div class="justify-center q-gutter-sm clgutter q-mt-sm">
+                  <q-input
+                    v-model="countryname"
+                    :readonly="true"
+                    rounded dense
+                    debounce="1000"
+                  >
+
+                    <template v-slot:prepend>
+                      <div style="font-size: 1rem;">
+                        <vue-country-code
+                          :defaultCountry="myvalue"
+                          :disabledFetchingCountry="true"
+                          @onSelect="selectcountry"
+                          :preferredCountries="tools.getprefCountries"
+                          :dropdownOptions="{ disabledDialCode: true }">
+
+                        </vue-country-code>
+                      </div>
+                    </template>
+                  </q-input>
+                  <div style="height: 180px;">
+
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.intcode">
+
+                <vue-tel-input
+                  @country-changed="intcode_change"
+                  v-model="myvalue"
+                  :placeholder="$t('reg.cell')"
+                  :enabledCountryCode="true"
+                  inputClasses="clCell"
+                  wrapperClasses="clCellCode">
+                </vue-tel-input>
+
+              </div>
+              <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
+                <div>join: {{ col.jointable }}</div>
+
+                <q-select
+                  v-model="myvalue"
+                  rounded
+                  outlined
+                  multiple
+                  dense
+                  options-dense
+                  :display-value="db_fieldsTable.getTitleByTable(col.jointable)"
+                  emit-value
+                  map-options
+                  :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                  :option-label="db_fieldsTable.getLabelByTable(col.jointable)"
+                  :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
+                  style="min-width: 150px"
+                  @input="changeCol">
+
+                </q-select>
+              </div>
+            </q-popup-edit>
+          </div>
         </div>
       </div>
     </div>
@@ -215,5 +376,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import './CMyPopupEdit.scss';
+@import './CMyPopupEdit.scss';
 </style>

src/components/CMySelect/CMySelect.ts

@@ -15,7 +15,13 @@ export default class CMySelect extends Vue {
   @Prop({ required: true, default: '' }) public optlab
   @Prop({ required: true, default: '' }) public optval
   @Prop({ required: false, default: true }) public useinput: boolean
-  @Prop({ required: false, default: null }) public newvaluefunc
+  @Prop({ required: false, default: true }) public dense: boolean
+  @Prop({ required: false, default: false }) public multiple: boolean
+  @Prop({
+    required: false, default: function mydef(): object {
+      return {}
+    }
+  }) public newvaluefunc: object
   @Prop({ required: false, default: null }) public funcgetvaluebyid
   @Prop({ required: true }) public options
 
@@ -26,7 +32,9 @@ export default class CMySelect extends Vue {
   }
 
   public changeval(newval) {
+    console.log('changeval', newval)
     this.$emit('update:value', newval)
+    this.$emit('changeval', newval)
   }
 
   public mounted() {

src/components/CMySelect/CMySelect.vue

@@ -2,6 +2,7 @@
     <div class="text-center">
         <div v-if="useinput">
             <q-select
+                    :multiple="multiple"
                     rounded
                     outlined
                     :input-class="myclass"
@@ -15,15 +16,16 @@
                     :option-label="optlab"
                     @input="changeval"
                     :label="label"
-                    dense
+                    :dense="dense"
             >
             </q-select>
         </div>
         <div v-else>
             <q-select
+                    :multiple="multiple"
                     rounded
                     outlined
-                    dense
+                    :dense="dense"
                     :input-class="myclass"
                     v-model="myvalue"
                     :options="options"

src/components/CMySingleEvent/CMySingleEvent.scss

@@ -61,11 +61,11 @@ $graytext: #555;
     align-items: center;
   }
 
-  &__img {
+  &__singleevimg {
     padding: 0.25rem !important;
     float: left;
-    width: 150px;
-    height: 150px;
+    width: 250px;
+    height: 250px;
     border-radius: 1rem;
 
     @media (max-width: 718px) {
@@ -73,6 +73,9 @@ $graytext: #555;
       float: none;
       text-align: center;
       margin: 0 auto;
+
+      width: 200px;
+      height: 200px;
     }
   }
 

src/components/CMySingleEvent/CMySingleEvent.vue

@@ -1,173 +1,187 @@
 <template>
-    <div>
-        <CMyPage v-if="myevent" :imgbackground="myevent.img" :title="myevent.title" keywords="" description="" nofooter="true">
+  <div>
+    <CMyPage v-if="myevent" :imgbackground="myevent.img" :title="myevent.title" keywords="" description=""
+             nofooter="true">
 
-            <div class="q-mx-md">
-                <div class="listaev__align_chips q-ma-md">
-                    <img :src="getImgEvent(myevent)"
-                         @click="selectEvent(myevent)"
-                         class="text-left padding_cell listaev__tdimg listaev__img cursor-pointer"
-                         :style="getStyleByEvent(myevent, true)"
-                         :alt="myevent.title">
-                    <q-chip dense v-if="isAlreadyBooked(myevent)" class="cltexth4 chipbooked shadow-5 q-mb-md"
-                            color="green" text-color="white"
-                            icon="event_available">{{$t('cal.booked')}}
-                    </q-chip>
-                    <div v-if="selected">
-                        <q-chip v-if="editable" class="text-center shadow-5 glossy bg-blue chipmodif">
+      <div class="q-mx-md">
+        <div class="listaev__align_chips q-ma-md">
+          <img :src="getImgEvent(myevent)"
+               @click="selectEvent(myevent)"
+               class="text-left padding_cell listaev__tdimg listaev__singleevimg cursor-pointer"
+               :style="getStyleByEvent(myevent, true)"
+               :alt="myevent.title">
+          <q-chip dense v-if="isAlreadyBooked(myevent)" class="cltexth4 chipbooked shadow-5 q-mb-md"
+                  color="green" text-color="white"
+                  icon="event_available">{{ $t('cal.booked') }}
+          </q-chip>
+          <div v-if="selected">
+            <q-chip v-if="editable" class="text-center shadow-5 glossy bg-blue chipmodif">
 
-                            <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
-                                <q-menu
-                                        transition-show="flip-right"
-                                        transition-hide="flip-left">
-                                    <q-list style="min-width: 100px">
-                                        <q-item clickable @click="duplicateEvent(myevent, 7)">
-                                            <q-item-section>Tra 1 Settimana</q-item-section>
-                                        </q-item>
-                                        <q-item clickable @click="duplicateEvent(myevent, 14)">
-                                            <q-item-section>Tra 2 Settimane</q-item-section>
-                                        </q-item>
-                                        <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
-                                            <q-item-section>4 Eventi ogni Settimana</q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </q-menu>
-                            </q-btn>
-                            <q-btn v-if="editable" flat round color="white" icon="delete" v-close-popup
-                                   @click="deleteEvent(myevent)"></q-btn>
-                            <q-btn v-if="editable" flat round color="white" icon="edit" v-close-popup
-                                   @click="editEvent(myevent)"></q-btn>
-                            <q-btn v-if="editable" flat round color="white" icon="cancel"
-                                   @click="selectEvent(null)"></q-btn>
-                        </q-chip>
-                    </div>
-                    <q-chip v-if="myevent.news" class="cltexth4 chipnews shadow-5 glossy text-right" color="red"
-                            text-color="white" icon-right="star" icon="star" dense
-                            style="">
-                        {{$t('event.news')}}
-                    </q-chip>
+              <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
+                <q-menu
+                  transition-show="flip-right"
+                  transition-hide="flip-left">
+                  <q-list style="min-width: 100px">
+                    <q-item clickable @click="duplicateEvent(myevent, 7)">
+                      <q-item-section>Tra 1 Settimana</q-item-section>
+                    </q-item>
+                    <q-item clickable @click="duplicateEvent(myevent, 14)">
+                      <q-item-section>Tra 2 Settimane</q-item-section>
+                    </q-item>
+                    <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
+                      <q-item-section>4 Eventi ogni Settimana</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+              <q-btn v-if="editable" flat round color="white" icon="delete" v-close-popup
+                     @click="deleteEvent(myevent)"></q-btn>
+              <q-btn v-if="editable" flat round color="white" icon="edit" v-close-popup
+                     @click="editEvent(myevent)"></q-btn>
+              <q-btn v-if="editable" flat round color="white" icon="cancel"
+                     @click="selectEvent(null)"></q-btn>
+            </q-chip>
+          </div>
+          <q-chip v-if="myevent.news" class="cltexth4 chipnews shadow-5 glossy text-right" color="red"
+                  text-color="white" icon-right="star" icon="star" dense
+                  style="">
+            {{ $t('event.news') }}
+          </q-chip>
 
-                </div>
+        </div>
 
-                <div class="listaev__date listaev__align_center_mobile">
-                    <span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
-                </div>
+        <div class="listaev__date listaev__align_center_mobile">
+          <span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
+        </div>
 
-                <div class="listaev__align_center_mobile">
+        <div class="listaev__align_center_mobile">
 
-                    <div style="margin: 10px;"></div>
+          <div style="margin: 10px;"></div>
 
-                    <div class="">
-                        <!-- Se c'è un link, allora -->
-                        <q-btn v-if="myevent.linkpdf" size="md" type="a"
-                               :href="`../../statics/` + myevent.linkpdf"
-                               target="_blank"
-                               ripple rounded :label="myevent.title" :icon="myevent.icon"
-                               :color="myevent.bgcolor" text-color="white" glossy>
+          <div class="q-pa-sm q-gutter-md text-center">
+            <!-- Se c'è un link, allora -->
+            <q-btn class="text-center boldhigh" v-if="myevent.linkpdf" size="md" type="a"
+                   :href="`../../statics/` + myevent.linkpdf"
+                   target="_blank"
+                   ripple rounded :label="myevent.title"
+                   :color="myevent.bgcolor" text-color="white" glossy>
 
-                        </q-btn>
-                        <!-- altrimenti mostra solo Chip -->
-                        <div v-else>
-                            <div v-if="tools.isMobile()" class="cltexth3 text-center"
-                                 :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`">
-                                {{myevent.title}}
-                            </div>
-                            <q-chip v-else class="cltexth3 text-center"
-                                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
-                                    text-color="white"
-                                    :icon="myevent.icon"
-                                    dense>{{myevent.title}}
-                            </q-chip>
-                        </div>
-                    </div>
+            </q-btn>
+            <!-- altrimenti mostra solo Chip -->
+            <div v-else-if="tools.isMobile()" class="cltexth3 text-center boldhigh"
+                 :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`">
+              {{ myevent.title }}
+            </div>
+            <q-chip v-else class="cltexth3 text-center boldhigh"
+                    icon="bookmark"
+                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                    text-color="white"
+                    dense>{{ myevent.title }}
+            </q-chip>
+          </div>
 
-                    <div style="margin: 10px;"></div>
+          <div style="margin: 10px;"></div>
 
-                    <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>
+          <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="">
-                                    <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
-                                            class="margin_with"></span></span>
 
-                        <CMyTeacher :username="myevent.teacher"></CMyTeacher>
-                        <CMyTeacher :username="myevent.teacher2"></CMyTeacher>
+          <div v-for="(mypage, index) in myevent.pagefooter" :key="index">
+            <CMyPage v-if="!!mypage" :mypath="`/`+ mypage">
+            </CMyPage>
+          </div>
 
-                        <span v-if="myevent.wherecode" class="q-ma-md">
+          <div v-if="myevent.teacher" class="">
+                                    <span class="cal__teacher-title">{{ $t('cal.teacher') }}: <span
+                                      class="margin_with"></span></span>
+
+            <CMyTeacher :username="myevent.teacher"></CMyTeacher>
+            <CMyTeacher :username="myevent.teacher2"></CMyTeacher>
+            <CMyTeacher :username="myevent.teacher3"></CMyTeacher>
+            <CMyTeacher :username="myevent.teacher4"></CMyTeacher>
+
+            <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>
+                                        <span class="cal__where-title">{{ $t('cal.where') }}: </span>
 
                                         <q-chip>
                                             <q-avatar v-if="getWhereIcon(myevent.wherecode)">
-                                                <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)" alt="località">
+                                                <img
+                                                  :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)"
+                                                  alt="località">
                                             </q-avatar>
                                             <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>
+                                            <span
+                                              class="cal__teacher-content">{{ getWhereName(myevent.wherecode) }}</span>
                                         </q-chip>
                                     </span>
-                    </div>
-                    <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="">
+          </div>
+          <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="">
                                     <q-chip class="glossy" color="orange" text-color="white">
-                                        <span class="cal__quota-content">{{getContribtypeById(myevent.contribtype)}}</span>
+                                        <span
+                                          class="cal__quota-content">{{
+                                            getContribtypeById(myevent.contribtype)
+                                          }}</span>
                                     </q-chip>
                                 </span>
 
-                        <q-chip v-if="myevent.price && isShowPrice(myevent)" class="glossy" color="orange"
-                                text-color="white" icon-right="star">
-                            <span class="cal__quota-content">{{getPrice(myevent)}}</span>
-                        </q-chip>
-                    </div>
+            <q-chip v-if="myevent.price && isShowPrice(myevent)" class="glossy" color="orange"
+                    text-color="white" icon-right="star">
+              <span class="cal__quota-content">{{ getPrice(myevent) }}</span>
+            </q-chip>
+          </div>
 
 
-                    <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')">
+          <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>
-                        <q-btn v-if="myevent.bodytext" rounded outline class="q-mx-sm"
-                               color="primary"
-                               :to="`/event/${myevent.typol}/${myevent._id}`"
-                               :label="$t('event.showpage')">
-                        </q-btn>
-                    </div>
-                    <div class="row justify-end q-mb-lg">
-                        <q-btn rounded outline class="q-mx-sm"
-                               color="primary" @click="askForInfoEventMenu(myevent)"
-                               :label="$t('event.askinfo')">
-                        </q-btn>
-                        <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)">
-                        </q-btn>
-                        <q-btn rounded outline class="q-mx-sm"
-                               v-if="!myevent.nobookable && isAlreadyBooked(myevent) && static_data.functionality.BOOKING_EVENTS"
-                               text-color="red"
-                               @click="EditBookEvent(myevent)"
-                               :label="$t('cal.modifybooking')">
-                        </q-btn>
-                        <!--
-                                                            <q-btn push rounded v-if="!myevent.nobookable && isAlreadyBooked(myevent)" color="positive" @click="BookEvent(myevent)"
-                                                                   :label="$t('cal.booked')">
-                                                            </q-btn>
-                        -->
+            </q-btn>
+            <!--<q-btn v-if="myevent.bodytext" rounded outline class="q-mx-sm"
+                   color="primary"
+                   :to="`/event/${myevent.typol}/${myevent._id}`"
+                   :label="$t('event.showpage')">
+            </q-btn>-->
+          </div>
+          <div class="row text-center">
+            <q-btn rounded outline class="q-mx-sm"
+                   color="primary" @click="askForInfoEventMenu(myevent)"
+                   :label="$t('event.askinfo')">
+            </q-btn>
+            <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)">
+            </q-btn>
+            <q-btn rounded outline class="q-mx-sm"
+                   v-if="!myevent.nobookable && isAlreadyBooked(myevent) && static_data.functionality.BOOKING_EVENTS"
+                   text-color="red"
+                   @click="EditBookEvent(myevent)"
+                   :label="$t('cal.modifybooking')">
+            </q-btn>
+            <br>
+            <!--
+                                                <q-btn push rounded v-if="!myevent.nobookable && isAlreadyBooked(myevent)" color="positive" @click="BookEvent(myevent)"
+                                                       :label="$t('cal.booked')">
+                                                </q-btn>
+            -->
 
-                    </div>
-                </div>
-            </div>
-        </CMyPage>
-    </div>
+          </div>
+        </div>
+      </div>
+    </CMyPage>
+  </div>
 </template>
 <script lang="ts" src="./CMySingleEvent.ts">
 </script>
 <style lang="scss" scoped>
-    @import './CMySingleEvent.scss';
+@import './CMySingleEvent.scss';
 </style>

src/components/CMyToggleList/CMyToggleList.ts

@@ -41,6 +41,7 @@ export default class CMyToggleList extends Vue {
   }
 
   public mounted() {
+    console.log('mounted')
     this.myarrvalues = []
 
     // console.log('value', this.value)
@@ -50,11 +51,28 @@ export default class CMyToggleList extends Vue {
     if (this.isarray) {
       // console.table(this.options)
       this.options.forEach((rec) => {
-        console.log('rec: ', rec)
+        console.log('rec: ', rec, 'optval', this.optval, 'optlab', this.optlab)
         const mydata = {
-          label: this.$t(rec[this.optlab]),
+          label: '',
           value: rec[this.optval],
-          valbool: this.value.includes(rec[this.optval])
+          valbool: false
+        }
+
+        const lab = rec[`${this.optlab}`]
+        console.log('lab', lab)
+
+        if (tools.isObject(this.optlab)) {
+          const arr = this.options.filter((myrec) => myrec[this.optval] === mydata.value).map(this.optlab)
+          if (arr) {
+            // @ts-ignore
+            mydata.label = arr[0]
+          }
+        } else {
+          mydata.label = this.$t(rec[this.optlab])
+        }
+
+        if (this.value) {
+          mydata.valbool = this.value.includes(rec[this.optval])
         }
         console.log('mydata ', mydata)
         this.myarrvalues.push(mydata)

src/components/CPhotosGallery/CPhotosGallery.scss

@@ -0,0 +1,168 @@
+$grayshadow: #555;
+$textcol: #eeefe1;
+$textcol_scuro: darkblue;
+
+p {
+  margin: 0 0 1.25rem;
+  //text-shadow: .125rem .125rem .25rem $grayshadow;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+.landing > section {
+  /*
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  //padding: 0 16px
+  */
+}
+
+.subtitle {
+
+  text-align: center;
+  font-size: 0.85rem;
+}
+
+.landing > section.padding {
+  padding: 5.62rem 1rem;
+}
+
+.landing > section > div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.landing__footer .doc-link {
+  color: $textcol;
+}
+
+.landing__footer .doc-link:hover {
+  opacity: .8
+}
+
+.gallery:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  //background: #000 url(../../statics/images/cover.jpg) 50%;
+
+  background-size: cover
+}
+
+.carousel_slide {
+
+}
+
+.gallery {
+  background-size: cover;
+  background-position: center center;
+
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  max-width: 800px;
+}
+
+.gallery2{
+  margin: auto;
+  max-width: 800px;
+}
+
+.btn-start {
+  margin: 3.125rem;
+}
+
+.shadow {
+  //color: white;
+  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
+}
+
+.shadow-max {
+  //color: white;
+  text-shadow: .25rem .25rem .5rem $grayshadow;
+}
+
+@media (max-width: 2000px) {
+  .q-carousel {
+    height: 800px !important;
+  }
+}
+
+@media (max-width: 1000px) {
+  .q-carousel {
+    height: 800px !important;
+  }
+}
+
+@media (max-width: 800px) {
+  .q-carousel {
+    height: 600px !important;
+  }
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+
+  .gallery2 {
+    max-height: 80vh;
+  }
+
+  .text-h1 {
+    font-size: 3rem;
+    line-height: 3.05rem;
+    margin-bottom: 1.5rem
+  }
+
+  .text-subtitle1 {
+    font-size: 1.25rem;
+  }
+  .text-vers {
+    font-size: 0.6rem;
+  }
+
+}
+
+@media (max-width: 600px) {
+  .q-carousel {
+    height: 450px !important;
+  }
+}
+
+@media (max-width: 400px) {
+  .q-carousel {
+    height: 300px !important;
+  }
+}
+
+.allunga0 {
+  height: 300px !important;
+}
+.allunga1 {
+  height: 400px !important;
+}
+.allunga2 {
+  height: 500px !important;
+}
+.allunga3 {
+  height: 600px !important;
+}
+
+
+.custom-caption {
+  text-align: center;
+  padding: .75rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .3);
+}

src/components/CPhotosGallery/CPhotosGallery.ts

@@ -0,0 +1,250 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { IColl, IGallery, ITimeLineEntry } from '@src/model/GlobalStore'
+
+import { Logo } from '../../components/logo'
+
+import { Footer } from '../../components/Footer'
+
+import VueScrollReveal from 'vue-scroll-reveal'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { CImgTitle } from '../../components/CImgTitle/index'
+import { Screen } from 'quasar'
+import { static_data } from '@src/db/static_data'
+
+Vue.use(VueScrollReveal, {
+  class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
+  duration: 1200,
+  scale: 0.95,
+  distance: '10px',
+  rotate: {
+    x: 0,
+    y: 0,
+    z: 0
+  }
+  // mobile: true
+})
+
+@Component({
+  components: { Logo, Footer, CImgTitle }
+})
+export default class PhotosGallery extends Vue {
+  @Prop({ required: true }) public mygallery: []
+  public text: string = ''
+  public visibile: boolean = false
+  public cardvisible: string = 'hidden'
+  public displaycard: string = 'block'
+  public $t: any
+  // public firstClassSection: string = 'landing_background fade homep-cover-img animate-fade homep-cover-img-1'
+  public firstClassSection: string = 'fade homep-cover-img animate-fade homep-cover-img-1'
+  public $q
+  public polling
+  public slide = 'first'
+  public slide2 = 1
+  public animare: number = 0
+  public activePanelImg: number
+  public withThumbnails: boolean = true
+  public withCaptions: boolean = true
+  public allunga: boolean = false
+  public fullscreen: boolean = false
+  public myclass: string = ''
+  public dimensione: string = ''
+  public dimensioneImg: any = [
+    {
+      id: 0,
+      label: 'Piccola',
+      value: 0
+    },
+    {
+      id: 1,
+      label: 'Media',
+      value: 1
+    },
+    {
+      id: 2,
+      label: 'Grande',
+      value: 2
+    },
+    {
+      id: 3,
+      label: 'Molto Grande',
+      value: 3
+    }
+  ]
+
+  constructor() {
+    super()
+    // console.log('Home constructor...')
+    this.initprompt()
+  }
+
+  get static_data() {
+    return static_data
+  }
+
+  public changeAllunga(value, evt) {
+    if (value)
+      this.myclass = 'allunga'
+    else
+      this.myclass = ''
+  }
+
+  get getappname() {
+    return this.$t('msg.myAppName')
+  }
+
+  get tools() {
+    return tools
+  }
+
+  public mounted() {
+    let primo = true
+    const mytime = 10000
+    this.polling = setInterval(() => {
+
+      this.firstClassSection = 'landing_background fade homep-cover-img ' + (primo ? 'homep-cover-img-2' : 'homep-cover-img-1')
+      primo = !primo
+
+      // console.log('this.firstClassSection', this.firstClassSection)
+
+    }, mytime)
+  }
+
+  get appname() {
+    return process.env.APP_NAME
+  }
+
+  public beforeDestroy() {
+    console.log('beforeDestroy')
+    clearInterval(this.polling)
+  }
+
+  public created() {
+    this.animare = process.env.DEV ? 0 : 8000
+
+    GlobalStore.actions.prova()
+  }
+
+  get isLogged() {
+    return UserStore.state.isLogged
+  }
+
+  public meta() {
+    return {
+      keywords: { name: 'keywords', content: 'Quasar website' },
+      // meta tags
+      meta: {
+        mykey: { name: 'mykey', content: 'Key 1' },
+        description: { name: 'description', content: 'Page 1' },
+        keywords: { name: 'keywords', content: 'Quasar website' },
+        equiv: { 'http-equiv': 'Content-Type', 'content': 'text/html; charset=UTF-8' }
+      }
+    }
+  }
+
+  public mystilecard() {
+    return {
+      visibility: this.cardvisible,
+      display: this.displaycard
+    }
+  }
+
+  get conta() {
+    return GlobalStore.state.conta
+  }
+
+  public getenv(myvar) {
+    return process.env[myvar]
+  }
+
+  set conta(valore) {
+    GlobalStore.actions.setConta(valore)
+    const my = this.$q.lang.isoName
+    tools.showNotif(this.$q, String(my))
+  }
+
+  public initprompt() {
+    window.addEventListener('beforeinstallprompt', function (event) {
+      // console.log('********************************   beforeinstallprompt fired')
+      event.preventDefault()
+      // console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ')
+      // #Todo++ IMPOSTA DEFERRED PROMPT
+      return false
+    })
+
+  }
+
+  get isInCostruction() {
+    return process.env.IN_CONSTRUCTION === '1'
+  }
+
+  public getPermission() {
+    return Notification.permission
+  }
+
+  public NotServiceWorker() {
+    return (!('serviceWorker' in navigator))
+  }
+
+  public PagLogin() {
+    this.$router.replace('/signin')
+  }
+
+  public PagReg() {
+    this.$router.replace('/signup')
+  }
+
+  public openCreatePostModal() {
+    console.log('APERTO ! openCreatePostModal')
+
+    this.conta = this.conta + 1
+
+    this.visibile = !this.visibile
+
+    if (this.visibile) {
+      this.displaycard = 'block'
+      this.cardvisible = 'visible'
+    } else {
+      this.displaycard = 'block'
+      this.cardvisible = 'hidden'
+    }
+
+  }
+
+  public getmywidth(rec: IColl) {
+    return rec.width
+  }
+
+  public getmyheight(rec: IColl) {
+    return rec.height
+  }
+
+  public setTransition(newVal, oldVal) {
+    // console.log('setTransition', newVal, oldVal)
+    this.activePanelImg = newVal
+  }
+
+  public getsubtitle(data: IColl) {
+    if (data.subtitle[toolsext.getLocale()])
+      return data.subtitle[toolsext.getLocale()]
+    else {
+      return data.subtitle[static_data.arrLangUsed[0]]
+    }
+  }
+
+  public getTitle(data: IColl) {
+    if (data.title[toolsext.getLocale()])
+      return data.title[toolsext.getLocale()]
+    else {
+      return data.title[static_data.arrLangUsed[0]]
+    }
+  }
+
+  public changedim(value) {
+    this.myclass = 'allunga' + value
+    // console.log('myclass', this.myclass, value)
+  }
+}

src/components/CPhotosGallery/CPhotosGallery.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="text-black">
+      <q-checkbox v-model="withThumbnails" label="Miniature">
+      </q-checkbox>
+      <q-checkbox v-model="withCaptions" label="Didascalie">
+      </q-checkbox>
+      <q-select v-model="dimensione" :options="dimensioneImg"
+                style="max-width: 150px"
+                rounded
+                outlined
+                dense
+                label="Altezza"
+                emit-value map-options
+                @input="changedim"
+      ></q-select>
+    </div>
+
+    <q-carousel
+      animated
+      infinite
+      arrows
+      control-color="primary"
+      control-text-color="white"
+      swipeable
+      :thumbnails="withThumbnails"
+      transition-next="slide-left"
+      transition-prev="slide-right"
+      v-model="slide2"
+      :class="`bg-grey-1 shadow-2 rounded-borders ` + myclass + ' gallery2 ' "
+      @transition="setTransition"
+
+    >
+      <q-carousel-slide v-for="(rec, index) in mygallery" v-if="rec.ingallery"
+                        :key="index" :name="index" :img-src="rec.img">
+
+        <div v-if="rec.ingallery && withCaptions" class="absolute-bottom custom-caption"
+             style="margin-bottom: 70px">
+          <div v-if="!!rec.title" class="text-h5"><span style="font-size: 1.25rem;">{{ getTitle(rec) }}</span></div>
+          <div class="subtitle" v-html="getsubtitle(rec)"></div>
+        </div>
+      </q-carousel-slide>
+
+      <!--<template v-slot:control>
+        <q-carousel-control
+          position="bottom-right"
+          :offset="[18, 18]"
+        >
+          <q-btn
+            push round dense color="white" text-color="primary"
+            :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
+            @click="fullscreen = !fullscreen"
+          />
+        </q-carousel-control>
+      </template>-->
+    </q-carousel>
+
+    <br>
+  </div>
+</template>
+
+<script lang="ts" src="./CPhotosGallery.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CPhotosGallery.scss';
+</style>

src/components/CPhotosGallery/index.ts

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

src/components/CProductCard/CProductCard.ts

@@ -17,7 +17,10 @@ import { Products, UserStore } from '@store'
 
 export default class CProductCard extends MixinBase {
   public $t
-  @Prop({ required: true }) public product: IProduct
+  @Prop({ required: false, default: null }) public product: IProduct
+  public myproduct: IProduct = null
+  @Prop({ required: false, default: '' }) public code: string
+  @Prop({ required: false, default: false }) public complete: boolean
   @Prop({
     required: false,
     type: Object,
@@ -50,11 +53,17 @@ export default class CProductCard extends MixinBase {
 
   public addtoCart() {
 
+    if (!UserStore.state.isLogged) {
+      tools.showNeutralNotif(this.$q, 'Devi prima accedere alla tua Area Personale')
+      GlobalStore.state.rightDrawerOpen = true
+      return false
+    }
+
     // Controlla se esiste già nel carrello il prodotto
-    if (Products.getters.existProductInCart(this.product._id)) {
+    if (Products.getters.existProductInCart(this.myproduct._id)) {
       tools.showNegativeNotif(this.$q, 'Questo prodotto è stato già aggiunto al Carrello')
     } else {
-      Products.actions.addToCart({ product: this.product, order: this.order }).then((ris) => {
+      Products.actions.addToCart({ product: this.myproduct, order: this.order }).then((ris) => {
         let strprod = 'prodotto'
         if (this.order.quantity > 1)
           strprod = 'prodotti'
@@ -67,14 +76,14 @@ export default class CProductCard extends MixinBase {
   }
 
   public getnumstore() {
-    if (!!this.product.storehouses)
-      return this.product.storehouses.length
+    if (this.myproduct.storehouses)
+      return this.myproduct.storehouses.length
     else
       return 0
   }
 
   public getSingleStorehouse() {
-    const mystore = this.product.storehouses[0]
+    const mystore = this.myproduct.storehouses[0]
     return mystore.name + ' (' + mystore.city + ')'
   }
 
@@ -82,7 +91,7 @@ export default class CProductCard extends MixinBase {
 
     const myarr = []
     let ind = 1
-    this.product.storehouses.forEach((store) => {
+    this.myproduct.storehouses.forEach((store) => {
       myarr.push(
         {
           id: ind,
@@ -101,13 +110,40 @@ export default class CProductCard extends MixinBase {
     return !this.order.idStorehouse
   }
 
-  public infoproduct() {
-
+  @Watch('code')
+  public codechanged(value) {
+    console.log('change code')
+    this.load()
   }
 
-  public created() {
-    if (this.product.storehouses.length === 1) {
-      this.order.idStorehouse = this.product.storehouses[0]._id
+  public async load() {
+    // console.log('created Cproductcard', this.code)
+    if (this.code) {
+      this.myproduct = await Products.actions.loadProduct({ code: this.code })
+    } else {
+      this.myproduct = this.product
+    }
+
+    console.log('this.myproduct', this.myproduct, 'this.product', this.product)
+
+    if (!!this.myproduct) {
+      if (this.myproduct.storehouses.length === 1) {
+        this.order.idStorehouse = this.myproduct.storehouses[0]._id
+      }
     }
   }
+
+  public async created() {
+    this.load()
+  }
+
+  get getmycardcl() {
+    return (this.complete) ? 'my-card-big' : 'my-card'
+  }
+
+  get getclimg() {
+    return (this.complete) ? 'myimgtitle centermydiv' : 'centermydiv'
+  }
+
+
 }

src/components/CProductCard/CProductCard.vue

@@ -1,50 +1,50 @@
 <template>
-  <q-card class="my-card">
-    <img :src="`statics/` + product.img" :alt="product.name">
+  <q-card :class="getmycardcl" v-if="!!myproduct">
+    <q-img :src="`statics/` + myproduct.img" :alt="myproduct.name" :class="getclimg"></q-img>
 
     <q-card-section>
       <q-btn
+        v-if="!complete"
         fab
         color="primary"
         icon="fas fa-info"
         class="absolute"
         style="top: 0; right: 12px; transform: translateY(-50%);"
-        @click="infoproduct"
+        :to="`/product/`+ myproduct.code"
       />
 
-      <div class="row items-center">
-        <div class="text-h7">
-          {{ product.name }}
+      <div class="row items-center centeritems">
+        <div class="text-h7 boldhigh">
+          {{ myproduct.name }}
         </div>
       </div>
-      <div class="row items-center">
+      <div v-if="complete" class="row items-center">
         <div class="text-title text-grey-9">
-          <span class="text-grey-7">{{ product.description }}</span>
+          <span class="text-grey-7" v-html="myproduct.description"></span>
         </div>
       </div>
       <div>
-        <div>
+        <div v-if="complete">
           <div class="text-grey text-title row items-center q-mt-sm">
             <q-icon name="map" class="q-mr-xs"/>
-            Origine: <span class="text-blue q-ml-xs text-h8"> {{ product.producer.city }} ({{
-              product.producer.region
+            Origine: <span class="text-blue q-ml-xs text-h8"> {{ myproduct.producer.city }} ({{
+              myproduct.producer.region
             }})</span>
           </div>
 
         </div>
-        <div class="text-grey text-title row items-center">
+        <div v-if="complete" class="text-grey text-title row items-center">
           <q-icon name="place" class="q-mr-xs"/>
-          Produttore: <span class="text-black q-ml-xs text-h8"> {{ product.producer.name }}</span>
+          Produttore: <span class="text-black q-ml-xs text-h8"> {{ myproduct.producer.name }}</span>
         </div>
       </div>
 
-      <!--<q-rating v-model="product.stars" :max="5" size="32px" readonly/>-->
-    </q-card-section>
+      <!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->
 
-    <q-card-section class="q-pt-none">
       <div class="row q-mb-sm no-wrap items-center centeritems">
-        <div class="text-price q-mr-md no-wrap">
-          € {{ product.price.toFixed(2) }}
+        <div class="text-price no-wrap">
+          <span v-if="!!myproduct.price">€ {{ myproduct.price.toFixed(2) }}</span>
+          <span v-if="!!myproduct.after_price">{{ myproduct.after_price }}</span>
         </div>
       </div>
       <div class="row q-mb-sm no-wrap items-center centeritems">
@@ -56,21 +56,23 @@
         </q-field>
         <q-btn round size="xs" text-color="grey" icon="fas fa-plus" @click="addqty"></q-btn>
       </div>
-      <div class="text-blue text-title row items-center q-mr-md centeritems">
-        <q-icon size="sm" name="fas fa-shipping-fast" class="q-mr-sm"/>
-        Ritiro presso:
-      </div>
-      <div class="text-green-6 text-title row items-center q-my-sm centeritems">
-
-        <div v-if="getnumstore() > 1">
-          <q-select
-            outlined v-model="order.idStorehouse"
-            :options="getStorehouses()"
-            label="Magazzino:" emit-value map-options>
-          </q-select>
+      <div v-if="complete || getnumstore() > 1">
+        <div class="text-blue text-title row items-center q-mr-md centeritems">
+          <q-icon size="sm" name="fas fa-shipping-fast" class="q-mr-sm"/>
+          Ritiro presso:
         </div>
-        <div v-else>
-          <span class="text-title text-center">{{ getSingleStorehouse() }}</span>
+        <div class="text-green-6 text-title row items-center q-my-sm centeritems">
+
+          <div v-if="getnumstore() > 1">
+            <q-select
+              outlined v-model="order.idStorehouse"
+              :options="getStorehouses()"
+              label="Magazzino:" emit-value map-options>
+            </q-select>
+          </div>
+          <div v-else>
+            <span class="text-title text-center">{{ getSingleStorehouse() }}</span>
+          </div>
         </div>
       </div>
     </q-card-section>
@@ -78,10 +80,13 @@
     <q-separator/>
 
     <q-card-actions vertical align="center">
-      <q-btn icon="fas fa-cart-plus" color="primary" :disable="checkifCartDisable" rounded size="md" label="Aggiungi al Carrello" @click="addtoCart">
+      <q-btn icon="fas fa-cart-plus" color="primary" :disable="checkifCartDisable" rounded size="md"
+             label="Aggiungi al Carrello" @click="addtoCart">
       </q-btn>
-      <q-btn :icon="iconWhishlist(product)" flat color="primary" rounded label="Lista Desideri">
+      <!--
+      <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
       </q-btn>
+      -->
     </q-card-actions>
   </q-card>
 </template>

src/components/CProgress/CProgress.scss

@@ -12,9 +12,23 @@ $heightBtn: 100%;
 
 .cpr-progrbar-item {
   //height: 10px
-  margin-top: 11px;
-  margin-bottom: 11px;
-  height:15px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  height:10px;
+}
+
+@media (max-width: 600px) {
+  .cpr-progrbar-item {
+    //height: 10px
+    margin-top: 6px;
+    margin-bottom: 6px;
+    height: 8px;
+  }
+
+  .progress-item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
 }
 
 .cpr-slider-item {

src/components/CProgress/CProgress.ts

@@ -40,7 +40,7 @@ export default class CProgress extends Vue {
 
   get getdescr() {
     if (!!this.descr) {
-      return this.descr + ' : '
+      return this.descr + ': '
     }
   }
 

src/components/CShareWithUs/CShareWithUs.scss

@@ -0,0 +1,18 @@
+.zoom_data{
+  font-size:1rem;
+  font-weight: bold;
+  text-shadow: .05rem .05rem .05rem #3d3d3d;
+  color: green;
+}
+
+.title {
+  font-weight: bold;
+}
+
+.id_conf{
+  font-weight: normal;
+}
+
+.note{
+  font-style: italic;
+}

src/components/CShareWithUs/CShareWithUs.ts

@@ -0,0 +1,225 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { INotData, IParamsQuery, IShareWithUs } from '../../model/index'
+import { tools } from '../../store/Modules/tools'
+import { NotevoleStore } from '@store'
+import MixinBase from '@src/mixins/mixin-base'
+import { validationMixin } from 'vuelidate'
+import { validations } from '../CSignUpNotevole/CSignUp-validate'
+import { CTitleBanner } from '@components'
+import { CCardState } from '../CCardState'
+import { UserStore } from '../../store/Modules'
+import { GlobalStore } from '../../store'
+import { CCopyBtn } from '../CCopyBtn'
+
+import { date } from 'quasar'
+import objectId from '@src/js/objectId'
+
+@Component({
+  name: 'CShareWithUs',
+  components: { CTitleBanner, CCardState, CCopyBtn }
+})
+
+export default class CShareWithUs extends MixinBase {
+  public $t
+  public myshares: IShareWithUs[] = []
+  public mydescr: string = ''
+
+  get listasharewithus() {
+    return GlobalStore.state.sharewithus.sort((a, b) => b.numshared - a.numshared)
+  }
+
+  get listamyshare() {
+    return UserStore.state.my.profile.myshares
+  }
+
+  public myload() {
+    const sortBy = 'numshared'
+    const descending = 1
+    const myobj = {}
+    if (descending)
+      myobj[sortBy] = -1
+    else
+      myobj[sortBy] = 1
+
+    const params: IParamsQuery = {
+      table: 'sharewithus',
+      startRow: 0,
+      endRow: 10000,
+      filter: '',
+      filterand: '',
+      sortBy: myobj,
+      descending,
+      userId: UserStore.state.my._id
+    }
+
+    console.log('myload', params)
+
+    GlobalStore.actions.loadTable(params).then((data) => {
+      GlobalStore.state.sharewithus = data.rows
+    })
+  }
+
+  public mounted() {
+    this.myload()
+  }
+
+  public recsharenow(mydescr): IShareWithUs {
+    return {
+      idapp: process.env.APP_ID,
+      description: mydescr,
+      userId: UserStore.state.my._id,
+      numshared: 0,
+      rating: 0
+    }
+  }
+
+  public add_newshare(mydescr) {
+    if (!mydescr)
+      return false
+    const recfound = UserStore.state.my.profile.myshares.find((rec) => rec.description.toLowerCase() === mydescr.toLowerCase())
+    if (!!recfound) {
+      tools.showNegativeNotif(this.$q, '"' + mydescr + '" è già presente!')
+      return false
+    }
+    UserStore.state.my.profile.myshares.push({ description: mydescr, rating: 5 })
+
+    const mydata = {
+      'profile.myshares': UserStore.state.my.profile.myshares
+    }
+    tools.saveFieldToServer(this, 'users', UserStore.state.my._id, mydata)
+
+    const myrec = this.recsharenow(mydescr)
+
+    const updatedexistingrec = this.updaterecnow(mydescr, true)
+    if (!updatedexistingrec) {
+      tools.createNewRecord(this, 'sharewithus', myrec, false).then((myrecris) => {
+        GlobalStore.state.sharewithus.push(myrecris)
+        this.myload()
+        this.mydescr = ''
+        return true
+      })
+    }
+
+  }
+
+  public updaterecnow(mydescr, add) {
+    const recesistente = GlobalStore.state.sharewithus.find((rec) => rec.description.toLowerCase() === mydescr.toLowerCase())
+    const indrec = GlobalStore.state.sharewithus.findIndex((rec) => rec.description.toLowerCase() === mydescr.toLowerCase())
+    console.log('recesistente', recesistente)
+    if (recesistente) {
+      const mydatatosave = {
+        id: recesistente._id,
+        table: tools.TABSHAREWITHUS,
+        fieldsvalue: recesistente
+      }
+
+      if (add)
+        recesistente.numshared++
+      else {
+        if (recesistente.numshared <= 0)
+          return false
+        else
+          recesistente.numshared--
+      }
+
+      GlobalStore.actions.saveFieldValue(mydatatosave).then((myrecris) => {
+        if (myrecris) {
+          GlobalStore.state.sharewithus[indrec] = recesistente
+          this.myload()
+        }
+        this.mydescr = ''
+      })
+      return true
+    } else {
+      return false
+    }
+  }
+
+  public selected(value, shared) {
+    shared.numshared++
+    tools.saveFieldToServer(this, 'sharewithus', shared._id, { numshared: shared.numshared })
+
+  }
+
+  public checkifICanRemove(shared) {
+    // Controlla se questo è stato aggiunto da me
+    const recfound = GlobalStore.state.sharewithus.find((rec) => rec.description.toLowerCase() === shared.description.toLowerCase())
+    if (!!recfound)
+      return recfound.userId === UserStore.state.my._id
+    else
+      return true
+  }
+
+  public removeShared(shared) {
+    this.$q.dialog({
+      message: 'Vuoi cancellare "' + shared.description + '" dalla tua lista ?',
+      ok: {
+        label: this.$t('dialog.yes'),
+        push: true
+      },
+      cancel: {
+        label: this.$t('dialog.cancel')
+      },
+      title: this.$t('pages.sharedwithus')
+    }).onOk(async () => {
+
+        const descr = shared.description
+
+        // Aggiorna Record Personale
+        UserStore.state.my.profile.myshares = UserStore.state.my.profile.myshares.filter((rec) => rec.description !== descr)
+
+        const mydata = {
+          'profile.myshares': UserStore.state.my.profile.myshares
+        }
+        tools.saveFieldToServer(this, 'users', UserStore.state.my._id, mydata)
+
+        const updatedexistingrec = this.updaterecnow(shared.description, false)
+        if (!updatedexistingrec) {
+          if (this.checkifICanRemove(shared)) {
+            const myrec = GlobalStore.state.sharewithus.find((rec) => rec.description.toLowerCase() === descr.toLowerCase())
+            if (!!myrec) {
+              GlobalStore.actions.DeleteRec({ table: tools.TABSHAREWITHUS, id: myrec._id })
+                .then((ris) => {
+                  console.log('DELETEREC ris=', ris)
+                  if (ris) {
+
+                    // Aggiorna Array Globale
+                    GlobalStore.state.sharewithus = GlobalStore.state.sharewithus.filter((rec) => rec.description !== descr)
+                    this.myload()
+
+                    console.log('GlobalStore.state.sharewithus', GlobalStore.state.sharewithus)
+                    tools.showPositiveNotif(this.$q, this.$t('db.deletedrecord'))
+                  }
+                })
+            }
+          }
+        }
+      }
+    )
+  }
+
+  public findrec(descr) {
+    if (UserStore.state.my.profile.myshares.length === 0)
+      return false
+    return UserStore.state.my.profile.myshares.find((rec) => rec.description.toLowerCase() === descr.toLowerCase())
+  }
+
+  public mycolorbtn(shared) {
+    if (this.findrec(shared.description)) {
+      return 'positive'
+    } else {
+      return 'primary'
+    }
+  }
+
+  public geticon(shared) {
+    if (this.findrec(shared.description))
+      return undefined
+    else
+      return 'fas fa-plus'
+  }
+
+  public getifdisable(shared) {
+    return this.findrec(shared.description)
+  }
+}

src/components/CShareWithUs/CShareWithUs.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div>
+      <CTitleBanner v-if="listasharewithus && listasharewithus.length > 0" class="q-pa-xs"
+                    :title="$t('pages.sharewithus')"
+                    bgcolor="bg-white" clcolor="text-blue"
+                    mystyle="" myclass="myshad" canopen="true">
+
+
+        <div class="flex flex-center">
+
+          <div class="row animazione justify-center q-gutter-xs">
+
+            <q-item v-for="(shared, index) in listamyshare" :key="shared._id"
+                    class="q-mb-xs animated clBorderShare q-pa-sm" v-ripple>
+
+              <transition name="fade" mode="out-in"
+                          appear
+                          enter-active-class="animazione fadeIn"
+                          leave-active-class="animazione fadeOut">
+
+                <div class="row">
+                  <q-item-section class="text-center">
+                    <q-item-label class="title">{{ shared.description }}</q-item-label>
+                    <!--<q-item-label class="title">Condiviso: {{ shared.numshared }}</q-item-label>
+                    <q-item-label class="title">Rating: {{ shared.rating }}</q-item-label>-->
+                  </q-item-section>
+                  <!--<q-rating v-model="shared.rating" :max="5" size="16px" @input="change_rating(shared.rating, shared)"/>-->
+
+
+                </div>
+              </transition>
+              <q-btn class="q-ml-sm" round icon="fas fa-times" color="white" text-color="grey" size="sm" @click="removeShared(shared)"></q-btn>
+
+            </q-item>
+          </div>
+        </div>
+      </CTitleBanner>
+      Scrivi cosa vorresti fare con noi:<br>
+      <div class="row no-wrap justify-between q-pa-md q-gutter-sm">
+
+        <q-input v-model="mydescr" label="Cosa vorresti fare?" class="full-width">
+        </q-input>
+        <q-btn rounded label="Aggiungi" color="positive" @click="add_newshare(mydescr)" :disable="mydescr === ''"></q-btn>
+      </div>
+
+      <CTitleBanner v-if="listasharewithus && listasharewithus.length > 0" class="q-pa-xs"
+                    title="Graduatoria Attuale"
+                    bgcolor="bg-white" clcolor="text-blue"
+                    mystyle="" myclass="myshad" canopen="true">
+
+
+        <div class="flex flex-center text-center">
+
+          <div class="animazione justify-center q-gutter-xs">
+
+            <q-item v-for="(shared, index) in listasharewithus" :key="shared._id"
+                    class="animated" style="padding: 4px;" v-ripple>
+
+              <transition name="fade" mode="out-in"
+                          appear
+                          enter-active-class="animazione fadeIn"
+                          leave-active-class="animazione fadeOut">
+
+                <div class="row no-wrap">
+
+                    <q-btn dense size="md" :color="mycolorbtn(shared)" rounded :icon="geticon(shared)" :label="shared.description + ` (` + (shared.numshared + 1) + `)`"
+                    @click="add_newshare(shared.description)"></q-btn>
+                    <!--<q-item-label class="title">Condiviso: {{ shared.numshared }}</q-item-label>
+                    <q-item-label class="title">Rating: {{ shared.rating }}</q-item-label>-->
+                  <!--<q-rating v-model="shared.rating" :max="5" size="16px" @input="change_rating(shared.rating, shared)"/>-->
+
+                </div>
+              </transition>
+
+            </q-item>
+          </div>
+        </div>
+      </CTitleBanner>
+
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CShareWithUs.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CShareWithUs.scss';
+</style>

src/components/CShareWithUs/index.ts

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

src/components/CSignIn/CSignIn.vue

@@ -53,16 +53,19 @@
                  :disable="$v.$error || iswaitingforRes">{{$t('login.enter')}}
           </q-btn>
         </div>
-        <div v-if="static_data.functionality.ENABLE_REGISTRATION && showregbutt" align="center" style="margin-top:10px;">
-          <q-btn flat rounded size="md" color="primary" to="/signup" :label="$t('reg.submit')">
-          </q-btn>
-        </div>
+
         <br>
 
         <div class="text-center" style="margin-bottom: 10px;">
           <a :href="getlinkforgetpwd()" style="color:gray;">{{$t('reg.forgetpassword')}}</a>
         </div>
 
+        <div v-if="static_data.functionality.ENABLE_REGISTRATION && showregbutt" align="center" style="margin-top:10px;">
+          Se non sei ancora Registrato:<br>
+          <q-btn rounded size="md" color="primary" to="/signup" :label="$t('reg.submit')">
+          </q-btn>
+        </div>
+
       </div>
     </form>
   </div>

src/components/CSignUp/CSignUp.ts

@@ -117,6 +117,7 @@ export default class CSignUp extends MixinBase {
       if (!item.$error) {
         return ''
       }
+      console.log('item', item)
       // console.log('errorMsg', cosa, item)
       if (item.$params.email && !item.email) {
         return this.$t('reg.err.email')
@@ -157,6 +158,8 @@ export default class CSignUp extends MixinBase {
         }
       } else if (cosa === 'username') {
         // console.log(item);
+        console.log('username')
+        console.log(item.$error)
         if (!item.isUnique) {
           return this.$t('reg.err.duplicate_username')
         }
@@ -176,9 +179,22 @@ export default class CSignUp extends MixinBase {
     }
   }
 
+  public changeemail(value) {
+    this.signup.email = tools.removespaces(this.signup.email)
+    this.signup.email = this.signup.email.toLowerCase()
+    this.$emit('update:value', this.signup.email)
+  }
+
+  public changeusername(value) {
+    this.signup.username = tools.removespaces(this.signup.username)
+    this.$emit('update:value', this.signup.username)
+  }
+
   public submitOk() {
     this.$v.signup.$touch()
 
+    this.signup.email = tools.removespaces(this.signup.email)
+    this.signup.email = this.signup.email.toLowerCase()
     this.signup.username = tools.removespaces(this.signup.username)
 
     this.duplicate_email = false

src/components/CSignUp/CSignUp.vue

@@ -14,6 +14,7 @@
         v-model="signup.email"
         rounded outlined
         @blur="$v.signup.email.$touch"
+        @input="changeemail"
         :error="$v.signup.email.$error"
         :error-message="errorMsg('email', $v.signup.email)"
         maxlength="50"
@@ -29,6 +30,7 @@
       <q-input
         v-model="signup.username"
         rounded outlined
+        @input="changeusername"
         @blur="$v.signup.username.$touch"
         :error="$v.signup.username.$error"
         @keydown.native.54="(event) => event.preventDefault()"

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis-validate.ts

@@ -0,0 +1,56 @@
+import { ISignupIscrizioneConacreisOptions } from 'model'
+import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
+
+export interface ISignupConacreis {
+  signup: ISignupIscrizioneConacreisOptions,
+  validationGroup: string[]
+}
+
+export const validations = {
+  signup: {
+    name: {
+      required
+    },
+    surname: {
+      required
+    },
+    email: {
+      email,
+      required
+    },
+    fiscalcode: {
+      required,
+      minLength: minLength(16)
+    },
+    residency_address: {
+      required
+    },
+    residency_city: {
+      required
+    },
+    residency_province: {
+      required
+    },
+    residency_zipcode: {
+      required
+    },
+    dateofbirth: {
+      required
+    },
+    born_city: {
+      required
+    },
+    born_province: {
+      required
+    },
+    born_country: {
+      required
+    },
+    metodo_pagamento: {
+      required
+    },
+    terms: {
+      required
+    },
+  }
+}

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.scss

@@ -0,0 +1,34 @@
+.signup {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clCellCode {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.clCell {
+  border-radius: 32px;
+  border-right: #2d2260;
+  height: 50px;
+  font-size: 1rem;
+  padding: 8px;
+}
+
+.vue-country-select{
+  border-radius: 32px;
+}
+
+

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.ts

@@ -0,0 +1,198 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { UserStore } from '@store'
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { ISignupIscrizioneConacreisOptions } from 'model'
+import { validations, ISignupConacreis } from './CSignUpIscrizioneConacreis-validate'
+
+import { validationMixin } from 'vuelidate'
+
+import { Logo } from '../../components/logo'
+import { DefaultProfile } from '../../store/Modules/UserStore'
+
+// import 'vue-country-code/dist/vue-country-code.css'
+import { serv_constants } from '@src/store/Modules/serv_constants'
+
+import VueCountryCode from 'vue-country-code'
+import { registereduser } from '../../validation'
+import MixinBase from '../../mixins/mixin-base'
+import { CTitleBanner } from '../CTitleBanner'
+import { CDate } from '../../components/CDate'
+import { date } from 'quasar'
+import { CMyPage } from '@src/components/CMyPage'
+import MixinUsers from '@src/mixins/mixin-users'
+
+Vue.use(VueCountryCode)
+// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
+@Component({
+  name: 'CSignUpIscrizioneConacreis',
+  mixins: [validationMixin],
+  validations,
+  components: { Logo, CTitleBanner, CDate, CMyPage }
+})
+
+export default class CSignUpIscrizioneConacreis extends MixinUsers {
+  public $v
+  public $q
+  public $t: any
+  public countryname: string = ''
+  public countryborn: string = ''
+  public iamadult: boolean = false
+
+  public duplicate_email: boolean = false
+  public duplicate_username: boolean = false
+
+  public signup: ISignupIscrizioneConacreisOptions = {
+    accetta_carta_costituzionale_on: false,
+    newsletter_on: false,
+    terms: false
+  }
+
+  public created() {
+    if (!!this.getMyUsername() && (!UserStore.state.my.profile.socio)) {
+      this.signup.name = UserStore.state.my.name
+      this.signup.surname = this.mySurname.toString()
+      this.signup.email = this.Email
+      this.signup.cell_phone = this.myCell.toString()
+    }
+    this.$v.$reset()
+  }
+
+  get allowSubmit() {
+
+    const error = this.$v.$error || this.$v.$invalid
+
+    // console.log('v', this.$v, 'error', error, 'terms', this.signup.terms, 'carta', this.signup.accetta_carta_costituzionale_on)
+    return !error && this.signup.terms && this.signup.accetta_carta_costituzionale_on
+  }
+
+  public env() {
+    return process.env
+  }
+
+  public setDateOfBirth(param) {
+    console.log('param', param)
+    // this.signup.dateofbirth = tools.convertstrtoDate(arguments[0])
+    this.signup.dateofbirth = new Date(arguments[0])
+  }
+
+  public errorMsg(cosa: string, item: any) {
+    try {
+      if (!item.$error) {
+        return ''
+      }
+      console.log('item', item)
+      // console.log('errorMsg', cosa, item)
+      if (item.$params.email && !item.email) {
+        return this.$t('reg.err.email')
+      }
+
+      // console.log('item', item)
+
+      if (item.minLength !== undefined) {
+        if (!item.minLength) {
+          return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char')
+        }
+      }
+      if (item.complexity !== undefined) {
+        if (!item.complexity) {
+          return this.$t('reg.err.complexity')
+        }
+      }
+// if (!item.maxLength) { return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char') }
+
+      if (item.required !== undefined) {
+        if (!item.required) {
+          return this.$t('reg.err.required')
+        }
+      }
+
+      // console.log('    ....avanti')
+      if (cosa === 'email') {
+        // console.log("EMAIL " + item.isUnique);
+        // console.log(item);
+        if (!item.isUnique) {
+          return this.$t('reg.err.duplicate_email')
+        }
+      } else if (cosa === 'username') {
+        // console.log(item);
+        console.log('username')
+        console.log(item.$error)
+        if (!item.isUnique) {
+          return this.$t('reg.err.duplicate_username')
+        }
+      } else if ((cosa === 'name') || (cosa === 'surname')) {
+        // console.log(item);
+      }
+
+      return ''
+    } catch (error) {
+      // console.log("ERR : " + error);
+    }
+  }
+
+  public submitOk() {
+    this.$v.signup.$touch()
+
+    this.signup.email = tools.removespaces(this.signup.email)
+    this.signup.email = this.signup.email.toLowerCase()
+
+    this.signup.residency_country = tools.CapitalizeAllWords(this.signup.residency_country)
+    this.signup.residency_address = tools.CapitalizeAllWords(this.signup.residency_address)
+    this.signup.residency_city = tools.CapitalizeAllWords(this.signup.residency_city)
+    this.signup.residency_province = this.signup.residency_province.toUpperCase()
+    this.signup.born_province = this.signup.born_province.toUpperCase()
+
+    this.duplicate_email = false
+    this.duplicate_username = false
+
+    if (!this.signup.terms) {
+      tools.showNotif(this.$q, this.$t('reg.err.terms'))
+      return
+    }
+
+    if (!this.signup.accetta_carta_costituzionale_on) {
+      tools.showNotif(this.$q, this.$t('reg.err.accetta_carta_costituzionale_on'))
+      return
+    }
+
+    if (this.$v.signup.$error) {
+      tools.showNotif(this.$q, this.$t('reg.err.errore_generico'))
+      return
+    }
+
+    this.signup.name = tools.CapitalizeAllWords(this.signup.name)
+    this.signup.surname = tools.CapitalizeAllWords(this.signup.surname)
+    this.signup.annoTesseramento = 2021
+
+    this.$q.loading.show({ message: this.$t('reg.iscrizioneincorso') })
+
+    console.log(this.signup)
+    return UserStore.actions.iscrivitiConacreis(tools.clone(this.signup))
+      .then((ris) => {
+        if (tools.SignUpcheckErrors(this, ris.code, ris.msg))
+          this.$q.loading.hide()
+      }).catch((error) => {
+        console.log('ERROR = ' + error)
+        this.$q.loading.hide()
+      })
+
+  }
+
+  public selectcountry({ name, iso2, dialCode }) {
+    // console.log(name, iso2, dialCode)
+    this.signup.residency_country = name
+    this.countryname = name
+  }
+
+  public selectcountryborn({ name, iso2, dialCode }) {
+    // console.log(name, iso2, dialCode)
+    this.signup.born_country = name
+    this.countryborn = name
+  }
+
+
+}

src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.vue

@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <div class="text-center">
+      <logo></logo>
+      <CTitleBanner :title="$t('pages.SignUpIscrizione')" :canopen="true" :visible="false">
+
+        <div class="q-gutter-xs">
+
+          <p class="q-ml-md text-center">
+            Leggi
+            <span class="underline"> <router-link to="/il-nostro-progetto" custom v-slot="{ navigate }">
+            <span class="footer_link" @click="navigate" @keypress.enter="navigate" role="link">Il Nostro Progetto</span>
+            </router-link></span>
+          </p>
+
+
+          <q-input
+            v-model="signup.name"
+            rounded outlined
+            @blur="$v.signup.name.$touch"
+            :error="$v.signup.name.$error"
+            maxlength="30"
+            :error-message="errorMsg('name', $v.signup.name)"
+            :label="$t('reg.name')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.surname"
+            rounded outlined
+            @blur="$v.signup.surname.$touch"
+            :error="$v.signup.surname.$error"
+            maxlength="30"
+            :error-message="errorMsg('surname', $v.signup.surname)"
+            :label="$t('reg.surname')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.email"
+            rounded outlined
+            @blur="$v.signup.email.$touch"
+            :error="$v.signup.email.$error"
+            :error-message="errorMsg('email', $v.signup.email)"
+            maxlength="50"
+            debounce="1000"
+            :label="$t('reg.email')">
+
+            <template v-slot:prepend>
+              <q-icon name="email"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.fiscalcode"
+            rounded outlined
+            @blur="$v.signup.fiscalcode.$touch"
+            :error="$v.signup.fiscalcode.$error"
+            maxlength="20"
+            mask="AAAAAA##A##A###A"
+            debounce="1000"
+            :error-message="errorMsg('fiscalcode', $v.signup.fiscalcode)"
+            :label="$t('reg.fiscalcode')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_address"
+            rounded outlined
+            @blur="$v.signup.residency_address.$touch"
+            :error="$v.signup.residency_address.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('residency_address', $v.signup.residency_address)"
+            :label="$t('reg.residency_address')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_city"
+            rounded outlined
+            @blur="$v.signup.residency_city.$touch"
+            :error="$v.signup.residency_city.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('residency_city', $v.signup.residency_city)"
+            :label="$t('reg.residency_city')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_province"
+            rounded outlined
+            @blur="$v.signup.residency_province.$touch"
+            :error="$v.signup.residency_province.$error"
+            maxlength="3"
+            debounce="1000"
+            :error-message="errorMsg('residency_province', $v.signup.residency_province)"
+            :label="$t('reg.residency_province')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.residency_zipcode"
+            rounded outlined
+            @blur="$v.signup.residency_zipcode.$touch"
+            :error="$v.signup.residency_zipcode.$error"
+            maxlength="10"
+            debounce="1000"
+            :error-message="errorMsg('residency_zipcode', $v.signup.residency_zipcode)"
+            :label="$t('reg.residency_zipcode')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="countryname"
+            :readonly="true"
+            rounded outlined
+
+            debounce="1000"
+            :label="$t('reg.nationality')">
+
+            <template v-slot:prepend>
+              <vue-country-code
+                @onSelect="selectcountry"
+                :preferredCountries="tools.getprefCountries"
+                :dropdownOptions="{ disabledDialCode: true }"
+              >
+
+              </vue-country-code>
+            </template>
+
+          </q-input>
+
+          <br>
+
+          <vue-tel-input
+            v-model="signup.cell_phone"
+            :placeholder="$t('reg.cell')"
+            maxlength="20"
+            debounce="1000"
+            :enabledCountryCode="true"
+            inputClasses="clCell"
+            wrapperClasses="clCellCode">
+          </vue-tel-input>
+
+          <br>
+
+          <q-input
+            v-model="signup.dateofbirth"
+            debounce="1000"
+            @blur="$v.signup.dateofbirth.$touch"
+            :error="$v.signup.dateofbirth.$error"
+            :error-message="errorMsg('dateofbirth', $v.signup.dateofbirth)"
+            stack-label
+            :label="$t('reg.dateofbirth')"
+            rounded
+            type="date"
+            mask="date"
+            fill-mask
+            outlined>
+          </q-input>
+
+          <q-input
+            v-model="signup.born_city"
+            rounded outlined
+            @blur="$v.signup.born_city.$touch"
+            :error="$v.signup.born_city.$error"
+            maxlength="60"
+            debounce="1000"
+            :error-message="errorMsg('born_city', $v.signup.born_city)"
+            :label="$t('reg.born_city')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <q-input
+            v-model="signup.born_province"
+            rounded outlined
+            @blur="$v.signup.born_province.$touch"
+            :error="$v.signup.born_province.$error"
+            maxlength="3"
+            debounce="1000"
+            :error-message="errorMsg('born_province', $v.signup.born_province)"
+            :label="$t('reg.born_province')">
+
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+
+          </q-input>
+
+          <!--<CDate :mydate="signup.dateofbirth" @input="setDateOfBirth(arguments[0])"
+                 :rounded="true" :outlined="true"
+                 :dense="false"
+                 :label="$t('reg.dateofbirth')">
+          </CDate>-->
+
+
+          <q-input
+            v-model="countryborn"
+            :readonly="true"
+            rounded outlined
+
+            debounce="1000"
+            :label="$t('reg.nationality_born')">
+
+            <template v-slot:prepend>
+              <vue-country-code
+                @onSelect="selectcountryborn"
+                :preferredCountries="tools.getprefCountries"
+                :dropdownOptions="{ disabledDialCode: true }"
+              >
+
+              </vue-country-code>
+            </template>
+
+          </q-input>
+
+          <br>
+
+          <!--<div v-if="!tools.isMobile()"><br></div>-->
+
+
+          <q-select
+            rounded outlined v-model="signup.metodo_pagamento"
+            :options="tools.SelectMetodiPagamento"
+            :label="$t('reg.metodopagamento')" emit-value map-options>
+          </q-select>
+
+          <q-checkbox
+            v-model="signup.accetta_carta_costituzionale_on"
+            color="secondary">
+            <span v-html="$t('reg.accetta_carta_costituzionale_on')"></span>
+          </q-checkbox>
+
+          <q-checkbox
+            v-model="signup.terms"
+            color="secondary"
+            @blur="$v.signup.terms.$touch"
+            :error="$v.signup.terms.$error"
+            :error-message="`${errorMsg('terms', $v.signup.terms)}`"
+            :label="$t('reg.terms')">
+
+          </q-checkbox>
+
+
+          <div class="wrapper">
+            <q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'
+                   :label="$t('reg.iscriviti')">
+            </q-btn>
+          </div>
+
+          <br>
+        </div>
+      </CTitleBanner>
+      <br>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CSignUpIscrizioneConacreis.ts">
+</script>
+<style lang="scss" scoped>
+@import './CSignUpIscrizioneConacreis.scss';
+</style>

src/components/CSignUpIscrizioneConacreis/index.ts

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

src/components/CSigninNoreg/CSigninNoreg.vue

@@ -3,7 +3,7 @@
     <CSignIn :mythis="mythis"
              @loginOk="loginOk"
              @loginInCorso="loginInCorso"
-             :showregbutt="false"
+             :showregbutt="showregbutt"
              @checkErrors="checkErrors"
              @showNotif="showNotif">
     </CSignIn>

src/components/CSingleCart/CSingleCart.ts

@@ -18,6 +18,7 @@ export default class CSingleCart extends MixinBase {
   public $t
   @Prop({ required: true }) public order: IOrder
   @Prop({ required: false, default: false }) public showall: boolean
+  @Prop({ required: false, default: false }) public nomodif: boolean
 
   get myimgclass() {
     if (this.showall) {

src/components/CSingleCart/CSingleCart.vue

@@ -13,7 +13,7 @@
       </div>
       <div class="col-3">
         <div class="row q-mb-xs no-wrap items-center centeritems">
-          <q-btn v-if="showall" round size="xs" text-color="grey" icon="fas fa-minus"
+          <q-btn v-if="showall && !nomodif" round size="xs" text-color="grey" icon="fas fa-minus"
                  @click="addsubqty(false, true)"></q-btn>
           <!--<q-field outlined dense style="width: 25px; height: 20px; " class="q-mx-xs text-subtitle4">
             <template v-slot:control>
@@ -21,15 +21,15 @@
             </template>
           </q-field>-->
           <div class="q-mx-sm text-blue-14">{{ order.quantity }}</div>
-          <q-btn v-if="showall" round size="xs" text-color="grey" icon="fas fa-plus"
+          <q-btn v-if="showall && !nomodif" round size="xs" text-color="grey" icon="fas fa-plus"
                  @click="addsubqty(true, false)"></q-btn>
         </div>
       </div>
       <div class="col-2 no-wrap text-subtitle3 q-mr-sm">
-        € {{ (order.price * order.quantity).toFixed(2) }}
+        €&nbsp;{{ (order.price * order.quantity).toFixed(2) }}
       </div>
       <div class="col-1">
-        <q-btn icon="fas fa-times" color="negative" round size="xs" @click="removeFromCard">
+        <q-btn v-if="!nomodif" icon="fas fa-times" color="negative" round size="xs" @click="removeFromCard">
         </q-btn>
       </div>
     </div>

src/components/CVideoPromo/CVideoPromo.vue

@@ -10,27 +10,12 @@
                     myclass="myshad" canopen="true" :visible="true">
 
         <div v-if="showconditions">
-          <div v-if="toolsext.isLang('fr')">
-            <CVideo myvideokey="GZR0ncSaG8s"></CVideo>
-          </div>
-          <div v-else>
-            <CVideo myvideokey="DWfQzbOCK3s"></CVideo>
-          </div>
+          <CVideo myvideokey="DWfQzbOCK3s"></CVideo>
         </div>
         <div v-else>
-          <div v-if="toolsext.isLang('si')">
-            <CVideo myvideokey="5vJ-xSdoUmk"></CVideo>
+          <div v-if="toolsext.isLang('it')">
+            <CVideo myvideokey=""></CVideo>
           </div>
-          <div v-else-if="toolsext.isLang('it')">
-            <CVideo myvideokey="GU93sIBG6yM"></CVideo>
-          </div>
-          <div v-else-if="toolsext.isLang('hr')">
-            <CVideo myvideokey="zBksb1vdddw"></CVideo>
-          </div>
-          <div v-else>
-            <CVideo myvideokey="16VpLhir7xg"></CVideo>
-          </div>
-
         </div>
       </CTitleBanner>
 

src/components/Footer/Footer.vue

@@ -114,8 +114,8 @@
                     </FormNewsletter>
 
                     <p class="text-center">
-                        <router-link v-if="static_data.functionality.SHOW_ONLY_POLICY" to="/policy"><span
-                                class="footer_link">{{$t('privacy_policy')}}</span></router-link>
+                        <router-link v-if="static_data.functionality.SHOW_ONLY_POLICY" to="/policy" custom v-slot="{ navigate }">
+                          <span class="footer_link"  @click="navigate" @keypress.enter="navigate" role="link">{{$t('privacy_policy')}}</span></router-link>
                     </p>
 
                 </div>
@@ -131,8 +131,8 @@
                                 <span class="footer_link">{{tools.getLabelByItem(myitemmenu, mythisfoot)}}</span><br/>
                             </div>
                             <div v-else>
-                                <router-link :to="myitemmenu.path">
-                                    <span class="footer_link"><span
+                                <router-link :to="myitemmenu.path" custom v-slot="{ navigate }">
+                                    <span class="footer_link"  @click="navigate" @keypress.enter="navigate" role="link"><span
                                             v-if="myitemmenu.level_child > 0">&nbsp;&nbsp;&nbsp;</span>
                                         {{tools.getLabelByItem(myitemmenu, mythisfoot)}}</span><br/>
                                 </router-link>

src/components/FormNewsletter/FormNewsletter.vue

@@ -44,7 +44,8 @@
 
                 </q-input>
 
-                <router-link to="/policy"><span class="news_link">{{$t('privacy_policy')}}</span></router-link>
+                <router-link to="/policy" custom v-slot="{ navigate }">
+                  <span class="news_link" @click="navigate" @keypress.enter="navigate" role="link">{{$t('privacy_policy')}}</span></router-link>
 
                 <q-toggle dark v-model="accept" :label="$t('newsletter.acceptlicense')"/>
 

src/components/Header/Header.scss

@@ -213,9 +213,6 @@ canvas {
   display: none !important;
 }
 
-.underline {
-  text-decoration: underline;
-}
 
 .toolbar {
   min-height: 43px;

src/components/Header/Header.ts

@@ -18,6 +18,7 @@ import MixinUsers from '../../mixins/mixin-users'
 import { CMyAvatar } from '../CMyAvatar'
 import { CSigninNoreg } from '../CSigninNoreg'
 import { CMyCart } from '@components'
+import { shared_consts } from '@src/common/shared_vuejs'
 
 @Component({
   name: 'Header',
@@ -42,6 +43,7 @@ export default class Header extends Vue {
   public clCloudUpload: string = ''
   public clCloudDownload: string = ''
   public clCloudUp_Indexeddb: string = ''
+  public tabcmd: string = ''
   public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
   public photo = ''
   public visuimg: boolean = true
@@ -62,6 +64,21 @@ export default class Header extends Vue {
     return UserStore.state.isManager
   }
 
+  get isSocio() {
+    return UserStore.state.my.profile.socio
+  }
+
+  get isSocioResidente() {
+    return UserStore.state.my.profile.socioresidente
+  }
+  get isConsiglio() {
+    return UserStore.state.my.profile.consiglio
+  }
+
+  get getcolormenu() {
+    return this.isSocio ? 'green-7' : 'white'
+  }
+
   get isTutor() {
     return UserStore.state.isTutor
   }
@@ -120,19 +137,25 @@ export default class Header extends Vue {
   }
 
   get rightDrawerOpen() {
-    return GlobalStore.state.RightDrawerOpen
+    return GlobalStore.state.rightDrawerOpen
+  }
+
+  set rightDrawerOpen(value) {
+    GlobalStore.state.rightDrawerOpen = value
+
+    if (GlobalStore.state.rightDrawerOpen)
+      GlobalStore.state.rightCartOpen = false
   }
 
   get rightCartOpen() {
     return GlobalStore.state.rightCartOpen
   }
 
-  set rightDrawerOpen(value) {
-    GlobalStore.state.RightDrawerOpen = value
-  }
-
   set rightCartOpen(value) {
     GlobalStore.state.rightCartOpen = value
+
+    if (GlobalStore.state.rightCartOpen)
+      GlobalStore.state.rightDrawerOpen = false
   }
 
   get lang() {
@@ -195,11 +218,12 @@ export default class Header extends Vue {
       // console.log('SSSSSSSS: ', value, oldValue)
 
       const color = (value === 'online') ? 'positive' : 'warning'
+      const statoconn = this.$t('connection.conn') + ' ' +  ((value === 'online') ? this.$t('connection.online') : this.$t('connection.offline'))
 
       if (this.static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION) {
 
         if (!!oldValue) {
-          tools.showNotif(this.$q, this.$t('connection') + ` {disc__value}`, {
+          tools.showNotif(this.$q, statoconn, {
             color,
             icon: 'wifi'
           })
@@ -358,7 +382,7 @@ export default class Header extends Vue {
       })
   }
 
-  get static_data(){
+  get static_data() {
     return static_data
   }
 
@@ -390,6 +414,15 @@ export default class Header extends Vue {
     return 0
   }
 
+  get getnumOrdersCart() {
+    const arrorderscart = Products.state.orders.filter((rec) => rec.status < shared_consts.OrderStatus.RECEIVED)
+    // const arrorderscart = Products.state.orders
+    if (!!arrorderscart) {
+      return arrorderscart.length
+    }
+    return 0
+  }
+
   get getcart() {
     return Products.state.cart
   }
@@ -402,4 +435,9 @@ export default class Header extends Vue {
     else
       return 'bg-primary'
   }
+
+  public changecmd(value) {
+    console.log('changecmd', value)
+    GlobalStore.mutations.changeCmdClick(value)
+  }
 }

src/components/Header/Header.vue

@@ -40,8 +40,8 @@
           <q-avatar>
             <img :src="imglogo" height="27" alt="Immagine Logo">
           </q-avatar>
-          <div class="q-mx-sm titlesite">{{getappname}}</div>
-          <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
+          <div class="q-mx-sm titlesite">{{ getappname }}</div>
+          <div slot="subtitle">{{ $t('msg.myDescriz') }} {{ getAppVersion() }}</div>
         </q-toolbar-title>
 
 
@@ -87,7 +87,7 @@
                 <img :src="langrec.image" class="flagimg" alt="flag">
               </q-item-section>
               <q-item-section>
-                {{langrec.label}}
+                {{ langrec.label }}
               </q-item-section>
             </q-item>
           </q-list>
@@ -108,16 +108,33 @@
                icon="menu"
                @click="rightDrawerOpen = !rightDrawerOpen">
         </q-btn>
+
         <q-btn class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && isLogged" round dense flat
                @click="rightCartOpen = !rightCartOpen" icon="fas fa-shopping-cart">
 
 
           <q-badge v-if="getnumItemsCart > 0" color="red" floating transparent>
-            {{getnumItemsCart}}
+            {{ getnumItemsCart }}
           </q-badge>
         </q-btn>
+
+
+        <q-btn class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && isLogged && getnumOrdersCart > 0"
+               round dense flat
+               to="/orderinfo" icon="fas fa-list-ol">
+
+
+          <q-badge v-if="getnumOrdersCart > 0" color="blue" floating transparent>
+            {{ getnumOrdersCart }}
+          </q-badge>
+        </q-btn>
+
+
         <q-btn class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && isLogged" round dense flat
-               @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon">
+               @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon" :color="getcolormenu">
+          <!--<q-badge v-if="isSocio" color="green" floating transparent>
+            s
+          </q-badge>-->
         </q-btn>
 
       </q-toolbar>
@@ -152,47 +169,56 @@
                style="height: 150px" alt="section page">
         </q-img>
         <div class="absolute-top bg-transparent text-black center_img" style="margin-top: 10px;">
+          <div class="text-center q-ma-xs boldhigh text-white text-h7">Area Personale</div>
 
           <CMyAvatar :myimg="getMyImg"></CMyAvatar>
 
           <q-btn class="absolute-top-right" style="margin-right: 10px; color: white;"
                  dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
           </q-btn>
-          <div v-if="isLogged" class="text-weight-bold text-user">{{ Username }} - {{ myName }} <span
-            v-if="isAdmin"> [Admin]</span>
-              <span v-if="isManager"> [Manager]</span>
-              <span v-if="isTutor"> [Tutor]</span>
-              <span v-if="isTratuttrici"> [Trad]</span>
+
+          <div v-if="isLogged" class="text-weight-bold text-user">{{ Username }} - {{ myName }}
           </div>
-          <div v-else class="text-user text-italic bg-red">
+          <div class="row justify-evenly q-pa-xs-sm">
+            <div v-if="isLogged && isAdmin" class="text-weight-bold text-user bg-red q-px-xs">Admin</div>
+            <div v-if="isSocio" class="text-weight-bold text-user q-px-xs">Socio</div>
+            <div v-if="isSocioResidente" class="text-weight-bold text-user q-px-xs bg-amber">Residente</div>
+            <div v-if="isConsiglio" class="text-weight-bold text-user q-px-xs bg-deep-orange-10">Consiglio</div>
+            <div v-if="isManager" class="text-weight-bold text-user bg-blue q-px-xs">Segreteria</div>
+            <div v-if="isTutor" class="text-weight-bold text-user q-px-xs">Tutor</div>
+            <div v-if="isTratuttrici" class="text-weight-bold text-user q-px-xs">Editor</div>
+          </div>
+          <div v-if="!isLogged" class="text-user text-italic bg-red">
             {{ $t('user.loggati') }}
           </div>
 
           <div v-if="isLogged && !isEmailVerified" class="text-verified">{{
-            $t('components.authentication.email_verification.verify_email') }}
+              $t('components.authentication.email_verification.verify_email')
+            }}
           </div>
 
           <!--<span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>-->
           <!--<span class="text-white background-red" v-else> {{$t('reg.non_verificato')}} </span>-->
 
           <div v-if="isLogged" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
-            <q-btn rounded color="primary" icon="person" to="/profile">{{$t('pages.profile')}}</q-btn>
+            <q-btn rounded color="primary" icon="person" to="/profile">{{ $t('pages.profile') }}</q-btn>
             <!--<q-btn round color="warning" icon="lock"></q-btn>-->
-            <q-btn rounded color="negative" icon="exit_to_app" @click='logoutHandler'>{{$t('login.esci')}}</q-btn>
+            <q-btn rounded color="negative" icon="exit_to_app" @click='logoutHandler'>{{ $t('login.esci') }}</q-btn>
           </div>
 
         </div>
         <div style="margin-top:120px;"></div>
         <div v-show="!isLogged">
+
           <div class="q-ma-md" style="">
-            <CSigninNoreg :showregbutt="static_data.functionality.SHOW_REG_BUTTON">
+            <CSigninNoreg :showregbutt="true">
 
             </CSigninNoreg>
           </div>
         </div>
 
       </div>
-      <div v-if="isLogged" class="q-mt-lg"><br><br></div>
+      <div v-if="isLogged" class="q-mt-lg"></div>
 
       <slot></slot>
 
@@ -204,6 +230,6 @@
 </script>
 
 <style lang="scss" scoped>
-  @import './Header.scss';
+@import './Header.scss';
 </style>
 

src/components/Shen/CTesseraElettronica/CTesseraElettronica.ts

@@ -27,6 +27,6 @@ export default class CTesseraElettronica extends Vue {
   }
 
   get rightDrawerOpen() {
-    return GlobalStore.state.RightDrawerOpen
+    return GlobalStore.state.rightDrawerOpen
   }
 }

src/components/index.ts

@@ -16,6 +16,7 @@ export * from './CMyPopupEdit'
 export * from './CMyToggleList'
 export * from './CMyChipList'
 export * from './CMyEditor'
+export * from './CInput'
 export * from './CMyFieldDb'
 export * from './CMyTeacher'
 export * from './CImgText'
@@ -25,6 +26,7 @@ export * from './CSignIn'
 export * from './CSignUp'
 export * from './CSignUpNotevole'
 export * from './CSignUpSIP'
+export * from './CSignUpIscrizioneConacreis'
 export * from './CEventsCalendar'
 export * from './CMySingleEvent'
 export * from './CDate'
@@ -63,4 +65,6 @@ export * from './CMyFlotta'
 export * from './CECommerce'
 export * from './CSingleCart'
 export * from './CMyCart'
+export * from './CShareWithUs'
+export * from './CHours'
 export * from '../views/ecommerce/'

src/components/projects/SingleProject/SingleProject.scss

@@ -1,5 +1,4 @@
 
-
 $colcompleted: #a2a2a2;
 $heightitem: 32px;
 $heightothers: 32px;
@@ -11,7 +10,7 @@ $heightdescr: 20px;
 .flex-container2 {
   flex-flow: row wrap;
   justify-content: space-between;
-  margin: 0px 10px 0px 10px;  // top right bottom left
+  // margin: 0px 10px 0px 10px;  // top right bottom left
 }
 
 // Set visibility: visible to the icon menu of pos-item-popover
@@ -56,26 +55,33 @@ $heightdescr: 20px;
 }
 
 .pos-item {
-  max-width: 24px;
-  min-width: 26px;
-  margin-left: 1px;
-  margin-right: 1px;
+  // max-width: 24px;
+  // min-width: 26px;
   padding-left: 1px;
   padding-right: 1px;
-  margin: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  margin: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   //height: $heightitem;
   line-height: $heightitem;
   min-height: $heightitem;
   text-align: center;
+  vertical-align: middle;
   // background-color: #ff4081;
   font-size: 1rem;
-  order: 2;
-  flex: 1;
+  // order: 1;
+  // flex: 1;
 
 }
 
+.pos-group {
+  order: 1;
+}
+
+.pos-go {
+  // order: 1;
+}
+
 
 
 .titleLista-item {
@@ -92,8 +98,8 @@ $heightdescr: 20px;
 
 
 .pos-item-popover{
-  max-width: 24px;
-  min-width: 24px;
+  // max-width: 24px;
+  // min-width: 24px;
   padding: 0px;
   text-align: center;
   vertical-align: middle;
@@ -157,8 +163,10 @@ $heightdescr: 20px;
   padding-bottom: 4px;
   max-width: 36px;
   min-width: 32px;
-  flex: 1;
-  order: 1;
+  display: inline-block;
+  vertical-align: middle;
+  // flex: 1;
+  // order: 1;
 }
 
 .progrbar-item {
@@ -247,6 +255,7 @@ $heightdescr: 20px;
   font-size: 1rem;
   display: table;
   flex: 1;
+  order: 1;
   height:  $heightitem;
   vertical-align: middle;
 }
@@ -388,3 +397,15 @@ $heightdescr: 20px;
 */
 
 
+.clResp{
+  font-weight: bold;
+  color: darkgreen;
+}
+.clViceResp{
+  font-weight: bold;
+  color: red;
+}
+.clVice2Resp{
+  font-weight: bold;
+  color: darkblue;
+}

src/components/projects/SingleProject/SingleProject.ts

@@ -6,7 +6,7 @@ import { tools } from '../../../store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
 import { lists } from '../../../store/Modules/lists'
 
-import { IProject } from '../../../model/index'
+import { IProject, TipoVisu } from '../../../model/index'
 
 import { SubMenusProj } from '../SubMenusProj'
 import { CDate } from '../../CDate'
@@ -14,6 +14,7 @@ import { CDate } from '../../CDate'
 import { date } from 'quasar'
 import { GlobalStore } from '@store'
 import { RouteNames } from '@src/router/route-names'
+import { shared_consts } from '@src/common/shared_vuejs'
 
 @Component({
   components: { SubMenusProj, CDate },
@@ -51,6 +52,24 @@ export default class SingleProject extends Vue {
     return Projects.getters.CanIModifyPanelPrivacy(this.itemproject)
   }
 
+  get TipoVisu() {
+    return TipoVisu
+  }
+
+  get getTipovisuByProjParent() {
+    let myprojparent = Projects.getters.getRecordById(this.itemproject.id_parent)
+    if (!myprojparent)
+      myprojparent = this.itemproject
+    return Projects.getters.getTipoVisuProj(myprojparent)
+  }
+
+  get getTipoViewByProjParent() {
+    const myprojparent = Projects.getters.getRecordById(this.itemproject.id_parent)
+    if (!myprojparent)
+      return ''
+    return myprojparent.view
+  }
+
   @Prop({ required: true }) public itemproject: IProject
 
   @Watch('itemproject.enableExpiring')
@@ -83,6 +102,31 @@ export default class SingleProject extends Vue {
     this.watchupdate('themecolor')
   }
 
+  @Watch('itemproject.pos')
+  public valueChangedpos() {
+    this.watchupdate('pos')
+  }
+
+  @Watch('itemproject.groupId')
+  public valueChangedgroupId() {
+    this.watchupdate('groupId')
+  }
+
+  @Watch('itemproject.respUsername')
+  public valueChangedresp() {
+    this.watchupdate('respUsername')
+  }
+
+  @Watch('itemproject.viceRespUsername')
+  public valueChangedviceResp() {
+    this.watchupdate('viceRespUsername')
+  }
+
+  @Watch('itemproject.vice2RespUsername')
+  public valueChangedvice2Resp() {
+    this.watchupdate('vice2RespUsername')
+  }
+
   @Watch('itemproject.themebgcolor')
   public valueChangedthemebgcolor() {
     this.watchupdate('themebgcolor')
@@ -123,6 +167,11 @@ export default class SingleProject extends Vue {
     this.watchupdate('privacywrite')
   }
 
+  @Watch('itemproject.tipovisu')
+  public valueChanged_tipovisu() {
+    this.watchupdate('tipovisu')
+  }
+
   @Watch('itemproject.totalphases')
   public valueChangedtotalphases() {
     this.watchupdate('totalphases')
@@ -130,7 +179,7 @@ export default class SingleProject extends Vue {
 
   @Watch('itemproject.progressCalc')
   public valueChanged6() {
-    console.log('itemproject.progressCalc')
+    // console.log('itemproject.progressCalc')
     this.updateClasses()
 
     // console.log('this.percentageProgress', this.percentageProgress, 'this.itemproject.progressCalc', this.itemproject.progressCalc)
@@ -169,15 +218,15 @@ export default class SingleProject extends Vue {
   }
 
   public watchupdate(field = '') {
-    console.log('watchupdate PROJ', field)
+    // console.log('watchupdate PROJ', field)
     this.$emit('eventupdateproj', { myitem: this.itemproject, field })
     this.updateicon()
   }
 
   public updateClasses() {
     // this.classCompleted = 'completed-item'
-    this.classDescr = 'flex-item div_descr show donotdrag'
-    this.classDescrEdit = 'flex-item div_descr_edit donotdrag'
+    this.classDescr = ''
+    this.classDescrEdit = 'div_descr_edit donotdrag'
     if (!this.isProject()) {
       this.classDescr += ' titleLista-item'
       this.classDescrEdit += ' titleLista-item'
@@ -188,7 +237,7 @@ export default class SingleProject extends Vue {
 
     this.percProgress = 'percProgress'
 
-    this.classExpiring = 'flex-item data-item shadow-1 hide-if-small'
+    this.classExpiring = 'data-item shadow-1 hide-if-small'
     this.classExpiringEx = ''
 
     this.clButtPopover = this.sel ? 'pos-item-popover comp_selected' : 'pos-item-popover'
@@ -231,7 +280,7 @@ export default class SingleProject extends Vue {
   }
 
   public clickRiga(clickmenu: boolean = false) {
-    console.log('CLICK RIGA PROJ ************')
+    // console.log('CLICK RIGA PROJ ************')
 
     // if (!this.sel) {
 
@@ -240,12 +289,12 @@ export default class SingleProject extends Vue {
       this.$emit('deselectAllRowstodo', null, false)
       this.$emit('deselectAllRowsproj', this.itemproject, true)
 
-      if (!this.sel) {
-        this.selectRiga()
-      } else {
-        this.$emit('deselectAllRowsproj', null, false, false, true)
-        this.deselectRiga()
-      }
+      // if (!this.sel) {
+      this.selectRiga()
+      // } else {
+      //   this.$emit('deselectAllRowsproj', null, false, false, true)
+      //   this.deselectRiga()
+      // }
     }
   }
 
@@ -287,7 +336,7 @@ export default class SingleProject extends Vue {
   }
 
   public activeEdit() {
-    console.log('Attiva Edit')
+    // console.log('Attiva Edit')
     this.attivaEdit = true
     this.editProject()
   }
@@ -297,7 +346,11 @@ export default class SingleProject extends Vue {
   }
 
   get tipoProj() {
-    return this.$route.name
+    const myarr = this.$route.name.split('.')
+    if (myarr)
+      return myarr[1]
+    else
+      return this.$route.name
   }
 
   get getrouteto() {
@@ -342,7 +395,7 @@ export default class SingleProject extends Vue {
       }
 
       // console.log('focus()')
-    }, 400)
+    }, 100)
   }
 
   public getFocus(e) {
@@ -379,7 +432,9 @@ export default class SingleProject extends Vue {
   }
 
   public keyDownArea(e) {
-    console.log('keyDownArea')
+    // console.log('keyDownArea', e.keyCode, 'key', e.key)
+    // console.log('precDescr', this.precDescr)
+    // console.log('shiftKey', e.shiftKey)
     /*
         if ((e.key === 'ArrowUp') && !e.shiftKey) {
           e.key = 'Tab'
@@ -405,6 +460,7 @@ export default class SingleProject extends Vue {
     }
 
     if (((e.key === 'Enter') || (e.key === 'Tab')) && !e.shiftKey) {
+      // console.log('   updateTodo...')
       this.updateTodo()
 
       if ((e.key === 'Tab') && !e.shiftKey) {
@@ -427,14 +483,17 @@ export default class SingleProject extends Vue {
   }
 
   public updateTodo() {
+    // console.log('this.itemproject.descr', this.itemproject.descr)
+    // console.log('precDescr', this.precDescr)
+
     if (this.itemproject.descr === this.precDescr) {
       return
     }
 
     this.itemproject.descr = this.precDescr
-    console.log('updateTodo', this.precDescr, this.itemproject.descr)
-    console.log('itemproject', this.itemproject)
-    console.log('Prec:', this.itemprojectPrec)
+    // console.log('updateTodo', this.precDescr, this.itemproject.descr)
+    // console.log('itemproject', this.itemproject)
+    // console.log('Prec:', this.itemprojectPrec)
 
     this.watchupdate('descr')
     this.inEdit = false
@@ -467,7 +526,7 @@ export default class SingleProject extends Vue {
 
   public updatedata(field: string) {
     // const myitem = tools.jsonCopy(this.itemproject)
-    console.log('calling this.$emit(eventupdateproj)', this.itemproject)
+    // console.log('calling this.$emit(eventupdateproj)', this.itemproject)
     this.$emit('eventupdateproj', { myitem: this.itemproject, field })
   }
 
@@ -497,7 +556,7 @@ export default class SingleProject extends Vue {
   }
 
   public async clickMenu(action) {
-    console.log('click menu: ', action)
+    // console.log('click menu: ', action)
     if (action === lists.MenuAction.DELETE) {
       return await this.askConfirmDelete()
     } else if (action === lists.MenuAction.TOGGLE_EXPIRING) {
@@ -598,4 +657,25 @@ export default class SingleProject extends Vue {
     */
   }
 
+  public getResp() {
+    if (!!GlobalStore.state.resps)
+      return this.itemproject.respUsername ? GlobalStore.getters.getRespByUsername(this.itemproject.respUsername) : ''
+    else
+      return ''
+  }
+
+  public getViceResp() {
+    if (!!GlobalStore.state.resps)
+      return this.itemproject.viceRespUsername ? GlobalStore.getters.getRespByUsername(this.itemproject.viceRespUsername) : ''
+    else
+      return ''
+  }
+
+  public getVice2Resp() {
+    if (!!GlobalStore.state.resps)
+      return this.itemproject.vice2RespUsername ? GlobalStore.getters.getRespByUsername(this.itemproject.vice2RespUsername) : ''
+    else
+      return ''
+  }
+
 }

src/components/projects/SingleProject/SingleProject.vue

@@ -1,15 +1,51 @@
 <template>
-    <div :class="getClassRow()" @click="clickProject" >
+  <q-item @click="clickProject" clickable>
 
-        <q-btn :disable="isDisable" class="flex-item donotdrag " size="sm" push color="primary" round icon="arrow_forward"
-               :to="getrouteto"></q-btn>
 
-        <div class="flex-item donotdrag divdescrTot">
+    <q-item-section avatar>
+      <q-btn
+        v-if="isProject()"
+        :class="(itemproject.respUsername !== '' && itemproject.viceRespUsername !== '') ? 'clresp' : 'clrespempty' + ' clButtPopover pos-item'"
+        :readonly="!CanIModifyProject"
+        size="sm"
+        dense
+        flat
+        @mousedown="clickRiga"
+        :disable="!CanIModifyProject"
+        icon="menu">
+        <q-menu ref="popmenu" self="top right">
+          <SubMenusProj :menuPopupProj="menuPopupProj" :itemproject="itemproject" @clickMenu="clickMenu"
+                        @selectSubMenu="selectSubMenu"></SubMenusProj>
+        </q-menu>
+      </q-btn>
+    </q-item-section>
+    <q-item-section>
+
+      <div :class="getClassRow()">
+        <!--<div :class="(itemproject.respUsername !== '' && itemproject.viceRespUsername !== '') ? 'clresp' : 'clrespempty' + ' pos-group flex-item'">
+          <q-icon class="" name="fas fa-user-friends"></q-icon>
+        </div>-->
+        <!--<div class="q-mx-xs"></div>-->
+
+
+        <q-item-label v-if="getTipoViewByProjParent === 'posiz'">
+          <div class="flex-item donotdrag">
+            <q-input
+              v-model="itemproject.pos"
+              type="number"
+              rounded outlined
+              dense
+              debounce="500"
+              style="max-width: 70px;"></q-input>
+          </div>
+        </q-item-label>
+
+        <q-item-label>
+          <div class="flex-item donotdrag">
             <q-input v-if="(sel && inEdit)" hide-underline type="textarea" ref="inputprojdescr"
                      v-model.trim="precDescr"
                      autogrow
                      borderless
-                     debounce="1000"
                      :label="getlabeltext"
                      dense
                      @focus="getFocus($event)"
@@ -18,50 +54,64 @@
             </q-input>
 
             <div v-else :class="classDescr"
-                 @keydown="keyDownRow">{{itemproject.descr}}
-            </div>
+                 @keydown="keyDownRow">
 
-        </div>
-
-        <div v-if="isProject()" class="flex-item progress-item shadow-1">
-            <q-linear-progress
-                    stripe
-                    rounded
-                    :value="percentageProgress / 100"
-                    class="progrbar-item"
-                    :color="colProgress"
-            >
-            </q-linear-progress>
-            <div :class="percProgress">
-                {{percentageProgress}}%
+              <!--<div class="clpos">{{ itemproject.pos }}.</div> -->
+              {{ itemproject.descr }}
             </div>
-        </div>
+          </div>
+        </q-item-label>
+
+        <q-item-label v-if="getTipovisuByProjParent === TipoVisu.responsabili" caption lines="2">
+          <span v-if="getResp()">Responsabile: <span class="clResp">{{ getResp() }}</span></span>
+          <span v-if="getViceResp()"><br>ViceResponsabile: <span class="clViceResp">{{ getViceResp() }}</span></span>
+          <span v-if="getVice2Resp()"><br>Vice 2 Responsabile: <span class="clVice2Resp">{{ getVice2Resp() }}</span></span>
+        </q-item-label>
+
+        <!--<div>
+          {{ tools.getGroupById(itemproject.groupId) }}
+        </div>-->
 
 
         <div v-if="itemproject.enableExpiring" :class="classExpiring">
-            <CDate :mydate="itemproject.expiring_at" @input="itemproject.expiring_at = new Date(arguments[0])"
-                   data_class="data_string">
-            </CDate>
-        </div>
-        <div v-if="isProject()" class="flex-item pos-item " @mousedown="clickRiga">
-            <q-btn flat
-                   :class="clButtPopover"
-                   :readonly="!CanIModifyProject"
-                   :disable="!CanIModifyProject"
-                   icon="menu">
-                <q-menu ref="popmenu" self="top right">
-                    <SubMenusProj :menuPopupProj="menuPopupProj" :itemproject="itemproject" @clickMenu="clickMenu"
-                              @selectSubMenu="selectSubMenu"></SubMenusProj>
-                </q-menu>
-            </q-btn>
+          <CDate :mydate="itemproject.expiring_at" @input="itemproject.expiring_at = new Date(arguments[0])"
+                 data_class="data_string">
+          </CDate>
         </div>
+      </div>
+    </q-item-section>
+
+    <q-item-section side>
+      <q-item-label caption>
+        <div v-if="isProject() && itemproject.tipovisu === TipoVisu.taskProgress && percentageProgress > 0"
+             class="donotdrag progress-item shadow-1">
+          <q-linear-progress
+            stripe
+            rounded
+            :value="percentageProgress / 100"
+            class="progrbar-item"
+            :color="colProgress"
+          >
+          </q-linear-progress>
+          <div :class="percProgress">
+            {{ percentageProgress }}%
+          </div>
+        </div>
+        <q-btn :disable="isDisable" class="pos-go" size="sm" push color="primary" round
+               icon="arrow_forward"
+               :to="getrouteto">
+
+        </q-btn>
+      </q-item-label>
+    </q-item-section>
+
+  </q-item>
 
-    </div>
 </template>
 
 <script lang="ts" src="./SingleProject.ts">
 </script>
 
 <style lang="scss" scoped>
-    @import './SingleProject.scss';
+@import './SingleProject.scss';
 </style>

src/components/todos/CTodo/CTodo.ts

@@ -13,6 +13,7 @@ import { UserStore } from '@store'
 
 import { Getter } from 'vuex-class'
 import { SingleTodo } from '../SingleTodo'
+import { costanti } from '@src/store/Modules/costanti'
 
 const namespace: string = 'Todos'
 
@@ -91,27 +92,29 @@ export default class CTodo extends Vue {
   }
 
   public created() {
-    const $service = this.$dragula.$service
-    tools.dragula_option($service, this.dragname)
+    if (costanti.DRAGULA) {
+      const service = this.$dragula.$service
+      tools.dragula_option(service, this.dragname)
 
-    $service.eventBus.$on('dragend', (args) => {
-      // console.log('args', args)
-      if (args.name === this.dragname) {
-        const itemdragend: IDrag = {
-          category: this.categoryAtt,
-          newIndex: this.getElementIndex(args.el),
-          oldIndex: this.getElementOldIndex(args.el)
+      service.eventBus.$on('dragend', (args) => {
+        // console.log('args', args)
+        if (args.name === this.dragname) {
+          const itemdragend: IDrag = {
+            category: this.categoryAtt,
+            newIndex: this.getElementIndex(args.el),
+            oldIndex: this.getElementOldIndex(args.el)
+          }
+          this.onEndtodo(itemdragend)
         }
-        this.onEndtodo(itemdragend)
-      }
-    })
+      })
 
-    $service.eventBus.$on('drag', (el, source) => {
-      this.scrollable = false
-    })
-    $service.eventBus.$on('drop', (el, source) => {
-      this.scrollable = true
-    })
+      service.eventBus.$on('drag', (el, source) => {
+        this.scrollable = false
+      })
+      service.eventBus.$on('drop', (el, source) => {
+        this.scrollable = true
+      })
+    }
 
     this.load()
   }
@@ -167,8 +170,7 @@ export default class CTodo extends Vue {
     // empty the field
     if (atfirst) {
       this.todotop = ''
-    }
-    else {
+    } else {
       this.todobottom = ''
     }
 
@@ -188,7 +190,13 @@ export default class CTodo extends Vue {
     //
     // await Todos.actions.swapElems(itemdragend)
 
-    await Todos.actions.modify({ myitem, field })
+    Todos.actions.modify({ myitem, field })
+      .then((ris) => {
+        if (ris)
+          tools.showPositiveNotif(this.$q, 'Campo Aggiornato')
+        else
+          tools.showNegativeNotif(this.$q, 'Campo non Aggiornato!')
+      })
 
   }
 

src/components/todos/CTodo/CTodo.vue

@@ -1,163 +1,171 @@
 <template>
-    <q-page>
-        <div class="panel">
-            <div v-if="!!title" class="divtitlecat">
-                <div class="flex-container">
-                    <div class="flex-item categorytitle" :style="`background-color: ${backcolor} !important; color: ${forecolor} !important;`">{{title | capitalize}}</div>
-                    <div class="flex-item">
-                        <q-btn push
-                               size="sm"
-                               icon="settings">
-                            <q-menu id="popconfig" self="top right">
-                                <q-list link separator no-border class="todo-menu">
-                                    <q-item clickable v-for="field in menuPopupConfigTodo" :key="field.value">
-                                        <q-item-section avatar>
-                                            <q-icon :name="field.icon"/>
-                                        </q-item-section>
+  <q-page>
+    <div class="panel">
+      <div v-if="!!title" class="divtitlecat">
+        <div class="flex-container">
+          <div class="flex-item categorytitle"
+               :style="`background-color: ${backcolor} !important; color: ${forecolor} !important;`">
+            {{ title | capitalize }}
+          </div>
+          <div class="flex-item">
+            <q-btn push
+                   size="sm"
+                   icon="settings">
+              <q-menu id="popconfig" self="top right">
+                <q-list link separator no-border class="todo-menu">
+                  <q-item clickable v-for="field in menuPopupConfigTodo" :key="field.value">
+                    <q-item-section avatar>
+                      <q-icon :name="field.icon"/>
+                    </q-item-section>
 
-                                        <q-item-section>{{field.label}}</q-item-section>
+                    <q-item-section>{{ field.label }}</q-item-section>
 
-                                        <q-item-section side v-if="showTask(field.value)">
-                                            <q-item-section side>
-                                                <q-icon name="keyboard_arrow_right"/>
-                                            </q-item-section>
+                    <q-item-section side v-if="showTask(field.value)">
+                      <q-item-section side>
+                        <q-icon name="keyboard_arrow_right"/>
+                      </q-item-section>
 
-                                            <q-menu auto-close anchor="bottom middle" self="top middle">
-                                                <q-list dense>
-                                                    <q-item side :icon="field.icon">
+                      <q-menu auto-close anchor="bottom middle" self="top middle">
+                        <q-list dense>
+                          <q-item side :icon="field.icon">
 
-                                                        <q-item-section>
-                                                            <q-list dense>
-                                                                <q-item clickable v-ripple v-for="opt in listOptionShowTask"
-                                                                        :key="opt.value"
-                                                                        @click="showtype = opt.value">
-                                                                    <q-item-section avatar>
-                                                                        <q-icon :name="opt.icon" inverted color="primary"/>
-                                                                    </q-item-section>
-                                                                    <q-item-section>
-                                                                        {{opt.label}}
-                                                                    </q-item-section>
-                                                                </q-item>
-                                                            </q-list>
-                                                        </q-item-section>
-                                                    </q-item>
-                                                </q-list>
-                                            </q-menu>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-menu>
-                        </q-btn>
-                    </div>
-                </div>
-            </div>
-
-            <q-input v-if="viewtaskTop" ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
-                     style="margin-left: 6px;"
-                     debounce="1000"
-                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                     v-on:keyup.enter="dbInsert(true)">
-                <template v-slot:prepend>
-                    <q-icon name="add"/>
-                </template>
-            </q-input>
-
-            <!--categoryAtt: {{categoryAtt}}<br>-->
-
-            <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
-            <div>
-                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
-                <div class="container" v-dragula="items_dacompletare(categoryAtt)" :drake="dragname">
-                    <div :id="tools.getmyid(mytodo._id)" :index="index"
-                         v-for="(mytodo, index) in items_dacompletare(categoryAtt)"
-                         :key="mytodo._id" class="myitemdrag">
-
-                        <div v-if="(prior !== mytodo.priority) && mytodo.statustodo !== tools.Status.COMPLETED"
-                             :class="tools.getTitlePriority(mytodo.priority)">
-                            <label>{{tools.getPriorityByInd(mytodo.priority)}}</label>
-                        </div>
-                        <SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
-                                    @setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
-                                    :itemtodo='mytodo' :CanIModifyTodo="CanIModifyTodo">
-
-                        </SingleTodo>
-
-                        <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
-
-                        <div style="display: none">{{ prior = mytodo.priority, priorcomplet = (mytodo.statustodo === tools.Status.COMPLETED) }}
-                        </div>
-                    </div>
-                </div>
-                <!--</q-infinite-scroll>-->
-
-                <div v-if="doneTodosCount > 0" class="titleCompleted">
-                    <label>{{$t('todo.completed')}}</label>
-                </div>
-
-                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
-                <div class="container">
-                    <div :id="tools.getmyid(mytodo._id)" :index="index"
-                         v-for="(mytodo, index) in todos_completati(categoryAtt)"
-                         :key="mytodo._id" class="myitemdrag">
-
-                        <SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
-                                    @setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
-                                    :itemtodo='mytodo'/>
-
-                        <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
-
-                        <div style="display: none">{{ prior = mytodo.priority, priorcomplet = (mytodo.statustodo === tools.Status.COMPLETED) }}
-                        </div>
-                    </div>
-                </div>
-                <!--</q-infinite-scroll>-->
-            </div>
-            <!--CanIModifyTodo : {{CanIModifyTodo}}-->
-
-            <q-input v-if="(TodosCount > 0 || !viewtaskTop) && CanIModifyTodo" ref="insertTaskBottom" v-model="todobottom"
-                     style="margin-left: 6px;"
-                     color="blue-12"
-                     debounce="1000"
-                     :label="$t('todo.insertbottom')"
-                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                     v-on:keyup.enter="dbInsert(false)">
-
-            </q-input>
-
-            <br>
-
-            <!--{{ tmpstrTodos }}-->
-
-            <!--<div class="flex-item btn-item">-->
-            <!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
-            <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>&ndash;&gt;-->
-            <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>&ndash;&gt;-->
-            <!--</div>-->
-
-            <!--
-            <!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
-            <!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
-
-            <!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
-
-            <!--<div class="flex-item btn-item">-->
-            <!--<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>-->
-            <!--<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>-->
-            <!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
-            <!--</div>-->
-            <!--&ndash;&gt;-->
-
-            <!--<q-btn class="mybtn" round color="" icon="lock" @click="clickaggshowtype()"></q-btn>-->
-
-
-            <!--<span style="white-space: pre;">{{ todos_vista }}</span>-->
+                            <q-item-section>
+                              <q-list dense>
+                                <q-item clickable v-ripple v-for="opt in listOptionShowTask"
+                                        :key="opt.value"
+                                        @click="showtype = opt.value">
+                                  <q-item-section avatar>
+                                    <q-icon :name="opt.icon" inverted color="primary"/>
+                                  </q-item-section>
+                                  <q-item-section>
+                                    {{ opt.label }}
+                                  </q-item-section>
+                                </q-item>
+                              </q-list>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                      </q-menu>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
         </div>
-    </q-page>
+      </div>
+
+      <q-input v-if="viewtaskTop" ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
+               style="margin-left: 6px;"
+               debounce="1000"
+               :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+               v-on:keyup.enter="dbInsert(true)">
+        <template v-slot:prepend>
+          <q-icon name="add"/>
+        </template>
+      </q-input>
+
+      <!--categoryAtt: {{categoryAtt}}<br>-->
+
+      <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
+      <div>
+        <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+        <!--<div class="container" v-dragula="items_dacompletare(categoryAtt)" :drake="dragname">-->
+        <div class="container">
+          <div :id="tools.getmyid(mytodo._id)" :index="index"
+               v-for="(mytodo, index) in items_dacompletare(categoryAtt)"
+               :key="mytodo._id" class="myitemdrag">
+
+            <div v-if="(prior !== mytodo.priority) && mytodo.statustodo !== tools.Status.COMPLETED"
+                 :class="tools.getTitlePriority(mytodo.priority)">
+              <label>{{ tools.getPriorityByInd(mytodo.priority) }}</label>
+            </div>
+            <SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
+                        @setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo"
+                        @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
+                        :itemtodo='mytodo' :CanIModifyTodo="CanIModifyTodo">
+
+            </SingleTodo>
+
+            <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
+
+            <div style="display: none">
+              {{ prior = mytodo.priority, priorcomplet = (mytodo.statustodo === tools.Status.COMPLETED) }}
+            </div>
+          </div>
+        </div>
+        <!--</q-infinite-scroll>-->
+
+        <div v-if="doneTodosCount > 0" class="titleCompleted">
+          <label>{{ $t('todo.completed') }}</label>
+        </div>
+
+        <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+        <div class="container">
+          <div :id="tools.getmyid(mytodo._id)" :index="index"
+               v-for="(mytodo, index) in todos_completati(categoryAtt)"
+               :key="mytodo._id" class="myitemdrag">
+
+            <SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
+                        @setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo"
+                        @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
+                        :itemtodo='mytodo'/>
+
+            <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
+
+            <div style="display: none">
+              {{ prior = mytodo.priority, priorcomplet = (mytodo.statustodo === tools.Status.COMPLETED) }}
+            </div>
+          </div>
+        </div>
+        <!--</q-infinite-scroll>-->
+      </div>
+      <!--CanIModifyTodo : {{CanIModifyTodo}}-->
+
+      <q-input v-if="(TodosCount > 0 || !viewtaskTop) && CanIModifyTodo" ref="insertTaskBottom" v-model="todobottom"
+               style="margin-left: 6px;"
+               color="blue-12"
+               debounce="1000"
+               :label="$t('todo.insertbottom')"
+               :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+               v-on:keyup.enter="dbInsert(false)">
+
+      </q-input>
+
+      <br>
+
+      <!--{{ tmpstrTodos }}-->
+
+      <!--<div class="flex-item btn-item">-->
+      <!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
+      <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>&ndash;&gt;-->
+      <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>&ndash;&gt;-->
+      <!--</div>-->
+
+      <!--
+      <!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
+      <!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
+
+      <!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
+
+      <!--<div class="flex-item btn-item">-->
+      <!--<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>-->
+      <!--<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>-->
+      <!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
+      <!--</div>-->
+      <!--&ndash;&gt;-->
+
+      <!--<q-btn class="mybtn" round color="" icon="lock" @click="clickaggshowtype()"></q-btn>-->
+
+
+      <!--<span style="white-space: pre;">{{ todos_vista }}</span>-->
+    </div>
+  </q-page>
 
 
 </template>
 <script lang="ts" src="./CTodo.ts">
 </script>
 <style lang="scss" scoped>
-    @import './CTodo.scss';
+@import './CTodo.scss';
 </style>

src/components/todos/SingleTodo/SingleTodo.ts

@@ -65,25 +65,34 @@ export default class SingleTodo extends Vue {
   //   this.watchupdate('priority')
   // }
 
-  @Watch('itemtodo.descr') public valueChanged5() {
+  @Watch('itemtodo.descr') public valueChangeddescr() {
     this.precDescr = this.itemtodo.descr
     this.watchupdate('descr')
   }
 
+  @Watch('itemtodo.note') public valueChanged5() {
+    this.precDescr = this.itemtodo.note
+    this.watchupdate('note')
+  }
+
   @Watch('itemtodo.hoursplanned') public valueChangedhoursplanned() {
-    console.log('itemtodo.hoursplanned', this.itemtodo.hoursplanned)
+    // console.log('itemtodo.hoursplanned', this.itemtodo.hoursplanned)
     this.watchupdate('hoursplanned')
   }
+  @Watch('itemtodo.pos') public valueChangedpos() {
+    // console.log('itemtodo.hoursplanned', this.itemtodo.hoursplanned)
+    this.watchupdate('pos')
+  }
   @Watch('itemtodo.statustodo') public valueChangedstatus() {
-    console.log('itemtodo.statustodo', this.itemtodo.statustodo)
+    // console.log('itemtodo.statustodo', this.itemtodo.statustodo)
     this.watchupdate('statustodo')
   }
   @Watch('itemtodo.completed_at') public valueChangedcompleted_at() {
-    console.log('itemtodo.completed_at', this.itemtodo.completed_at)
+    // console.log('itemtodo.completed_at', this.itemtodo.completed_at)
     this.watchupdate('completed_at')
   }
   @Watch('itemtodo.hoursworked') public valueChangedhoursworked() {
-    console.log('itemtodo.hoursworked', this.itemtodo.hoursworked)
+    // console.log('itemtodo.hoursworked', this.itemtodo.hoursworked)
     this.watchupdate('hoursworked')
   }
   @Watch('itemtodo.start_date') public valueChangedstart_date() {
@@ -102,11 +111,15 @@ export default class SingleTodo extends Vue {
     this.watchupdate('phase')
   }
 
+  @Watch('itemtodo.assignedToUsers') public valueChangeassignedToUsers() {
+    this.watchupdate('assignedToUsers')
+  }
+
   @Watch('itemtodo.progress') public valueChanged6() {
-    console.log('itemtodo.progress')
+    // console.log('itemtodo.progress')
     this.updateClasses()
 
-    console.log('this.percentageProgress', this.percentageProgress, 'this.itemtodo.progress', this.itemtodo.progress)
+    // console.log('this.percentageProgress', this.percentageProgress, 'this.itemtodo.progress', this.itemtodo.progress)
     this.watchupdate('progress')
   }
 
@@ -221,12 +234,12 @@ export default class SingleTodo extends Vue {
       this.$emit('deselectAllRowsproj', null, false, false)
       this.$emit('deselectAllRowstodo', this.itemtodo, true)
 
-      if (!this.sel) {
-        this.selectRiga()
-      } else {
-        this.$emit('deselectAllRowsproj', null, false, false, true)
-        this.deselectRiga()
-      }
+      // if (!this.sel) {
+      this.selectRiga()
+      // } else {
+      //   this.$emit('deselectAllRowsproj', null, false, false, true)
+      //   this.deselectRiga()
+      // }
     }
   }
 
@@ -239,7 +252,7 @@ export default class SingleTodo extends Vue {
   }
 
   public deselectRiga() {
-    console.log('DeselectRiga', this.itemtodo.descr)
+    // console.log('DeselectRiga', this.itemtodo.descr)
     this.sel = false
     this.classRow = ''
     this.inEdit = false
@@ -298,7 +311,7 @@ export default class SingleTodo extends Vue {
       }
 
       if (!!theField) {
-        console.log('FOCUS TODO', theField)
+        // console.log('FOCUS TODO', theField)
         theField.focus()
       }
       // console.log('focus()')
@@ -320,7 +333,7 @@ export default class SingleTodo extends Vue {
   }
 
   public keyDownRow(e) {
-    console.log('keyDownRow')
+    // console.log('keyDownRow')
     // Delete Key or Backspage
     if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
       e.preventDefault()
@@ -335,7 +348,7 @@ export default class SingleTodo extends Vue {
   }
 
   public keyDownArea(e) {
-    console.log('keyDownArea')
+    // console.log('keyDownArea')
 /*
     if ((e.key === 'ArrowUp') && !e.shiftKey) {
       e.key = 'Tab'
@@ -376,7 +389,7 @@ export default class SingleTodo extends Vue {
     if (e.key === 'Escape') {
       this.deselectRiga()
       // this.faiFocus('insertTask', true)
-      console.log('LOAD this.precDescr', this.precDescr)
+      // console.log('LOAD this.precDescr', this.precDescr)
       this.precDescr = this.itemtodo.descr
     }
 
@@ -388,9 +401,9 @@ export default class SingleTodo extends Vue {
     }
 
     this.itemtodo.descr = this.precDescr
-    console.log('updateTodo', this.precDescr, this.itemtodo.descr)
-    console.log('itemtodo', this.itemtodo)
-    console.log('Prec:', this.itemtodoPrec)
+    // console.log('updateTodo', this.precDescr, this.itemtodo.descr)
+    // console.log('itemtodo', this.itemtodo)
+    // console.log('Prec:', this.itemtodoPrec)
 
     this.watchupdate('descr')
     this.inEdit = false
@@ -426,7 +439,7 @@ export default class SingleTodo extends Vue {
 
   public updatedata(field: string) {
     // const myitem = tools.jsonCopy(this.itemtodo)
-    console.log('calling this.$emit(eventupdate)', this.itemtodo)
+    // console.log('calling this.$emit(eventupdate)', this.itemtodo)
     this.$emit('eventupdate', { myitem: this.itemtodo, field } )
   }
 
@@ -462,13 +475,13 @@ export default class SingleTodo extends Vue {
   }
 
   public activeEdit() {
-    console.log('Attiva Edit')
+    // console.log('Attiva Edit')
     this.attivaEdit = true
     this.editTodo()
   }
 
   public async clickMenu(action) {
-    console.log('click menu: ', action)
+    // console.log('click menu: ', action)
     if (action === lists.MenuAction.DELETE) {
       return await this.askConfirmDelete()
     } else if (action === lists.MenuAction.TOGGLE_EXPIRING) {

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,90 +1,93 @@
 <template>
-    <div :class="getClassRow()" @click="clickRow">
-        <div v-if="isTodo()" class="flex-item completed-item donotdrag">
-            <q-btn push flat
-                   :class="classCompleted"
-                   :icon="iconCompleted"
-                   :readonly="!CanIModifyTodo"
-                   :disable="!CanIModifyTodo"
-                   @click="setCompleted">
-            </q-btn>
-        </div>
-
-        <div class="flex-item donotdrag divdescrTot">
-            <q-input v-if="sel && inEdit && itemtodo.statustodo !== tools.Status.COMPLETED" hide-underline type="textarea" ref="inputdescr"
-                     v-model.trim="precDescr"
-                     debounce="1000"
-                     autogrow
-                     borderless
-                     :readonly="!CanIModifyTodo"
-                     dense
-                     :class="classDescrEdit" :max-height="100"
-                     @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"></q-input>
-
-            <div v-else :class="classDescr"
-                 @keydown="keyDownRow">{{itemtodo.descr}}
-            </div>
-
-        </div>
-
-        <!--<q-field dark v-else :label="itemtodo.descr"-->
-        <!--:class="classDescr"-->
-        <!--@keydown="keyDownRow"></q-field>-->
-
-        <!--:after="[{icon: 'arrow_forward', content: true, handler () {}}]"-->
-
-        <!--<div :class="classDescr" @mousedown.left="editTodo()">-->
-        <!--<q-field>{{ itemtodo.descr }}</q-field>-->
-        <!--</div>-->
-
-        <div v-if="isTodo() && (itemtodo.progress > 0) " class="flex-item progress-item shadow-1">
-            <q-linear-progress
-                    stripe
-                    rounded
-                    :readonly="!CanIModifyTodo"
-                    :value="percentageProgress / 100"
-                    class="progrbar-item"
-                    :color="colProgress"
-            >
-            </q-linear-progress>
-            <div :class="percProgress">
-                {{percentageProgress}}%
-                <q-popup-edit v-if="CanIModifyTodo" v-model="percentageProgress" title="Progress" buttons class="editProgress"
-                              @change="val => { model = val }"
-                              :readonly="!CanIModifyTodo"
-                              @save="aggiornaProgress"
-                >
-                    <q-input dense autofocus type="number" v-model="percentageProgress" :max="100" :min="0"/>
-                </q-popup-edit>
-
-            </div>
-        </div>
-
-
-        <div v-if="itemtodo.enableExpiring" :class="classExpiring">
-            <CDate :mydate="itemtodo.expiring_at" @input="itemtodo.expiring_at = new Date(arguments[0])"
-                   data_class="data_string" :readonly="!CanIModifyTodo">
-            </CDate>
-        </div>
-        <div :class="classMenuBtn" @mousedown="clickRiga">
-            <q-btn flat
-                   :class="clButtPopover"
-                   :readonly="!CanIModifyTodo"
-                   icon="menu">
-                <q-menu v-if="CanIModifyTodo" ref="popmenu" self="top right">
-                    <SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu"
-                              @selectSubMenu="selectSubMenu"></SubMenus>
-                </q-menu>
-
-            </q-btn>
-        </div>
+  <div :class="getClassRow()" @click="clickRow">
+    <div v-if="isTodo()" class="flex-item completed-item donotdrag">
+      <q-btn push flat
+             :class="classCompleted"
+             :icon="iconCompleted"
+             :readonly="!CanIModifyTodo"
+             :disable="!CanIModifyTodo"
+             @click="setCompleted">
+      </q-btn>
     </div>
 
+    <div :class="classMenuBtn" @mousedown="clickRiga">
+      <q-btn flat
+             :class="clButtPopover"
+             :readonly="!CanIModifyTodo"
+             icon="menu">
+        <q-menu v-if="CanIModifyTodo" ref="popmenu" self="top right">
+          <SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu"
+                    @selectSubMenu="selectSubMenu"></SubMenus>
+        </q-menu>
+
+      </q-btn>
+    </div>
+
+    <!-- <q-icon :name="iconPriority"/> -->
+
+    <div class="flex-item donotdrag divdescrTot">
+      <q-input v-if="sel && inEdit && itemtodo.statustodo !== tools.Status.COMPLETED" hide-underline type="textarea"
+               ref="inputdescr"
+               v-model.trim="precDescr"
+               autogrow
+               borderless
+               :readonly="!CanIModifyTodo"
+               dense
+               :class="classDescrEdit" :max-height="100"
+               @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"></q-input>
+
+      <div v-else :class="classDescr"
+           @keydown="keyDownRow">{{ itemtodo.descr }}
+      </div>
+
+
+    </div>
+
+    <!--<q-field dark v-else :label="itemtodo.descr"-->
+    <!--:class="classDescr"-->
+    <!--@keydown="keyDownRow"></q-field>-->
+
+    <!--:after="[{icon: 'arrow_forward', content: true, handler () {}}]"-->
+
+    <!--<div :class="classDescr" @mousedown.left="editTodo()">-->
+    <!--<q-field>{{ itemtodo.descr }}</q-field>-->
+    <!--</div>-->
+
+    <div v-if="isTodo() && (itemtodo.progress > 0) " class="flex-item progress-item shadow-1">
+      <q-linear-progress
+        stripe
+        rounded
+        :readonly="!CanIModifyTodo"
+        :value="percentageProgress / 100"
+        class="progrbar-item"
+        :color="colProgress"
+      >
+      </q-linear-progress>
+      <div :class="percProgress">
+        {{ percentageProgress }}%
+        <q-popup-edit v-if="CanIModifyTodo" v-model="percentageProgress" title="Progress" buttons class="editProgress"
+                      @change="val => { model = val }"
+                      :readonly="!CanIModifyTodo"
+                      @save="aggiornaProgress"
+        >
+          <q-input dense autofocus type="number" v-model="percentageProgress" :max="100" :min="0"/>
+        </q-popup-edit>
+
+      </div>
+    </div>
+
+    <div v-if="itemtodo.enableExpiring" :class="classExpiring">
+      <CDate :mydate="itemtodo.expiring_at" @input="itemtodo.expiring_at = new Date(arguments[0])"
+             data_class="data_string" :readonly="!CanIModifyTodo">
+      </CDate>
+    </div>
+  </div>
+
 </template>
 
 <script lang="ts" src="./SingleTodo.ts">
 </script>
 
 <style lang="scss" scoped>
-    @import './SingleTodo.scss';
+@import './SingleTodo.scss';
 </style>

src/globalroutines/index.ts

@@ -2,18 +2,19 @@ import indexdb from './indexdb'
 import { GlobalStore } from '../store/Modules'
 
 export default async (context, cmd, table, data = null, id = '') => {
-  const descr = data !== null ? data.descr : ''
+  // const descr = data !== null ? data.descr : ''
   // console.log('globalroutines', cmd, table, descr, id)
-  return await indexdb(context, cmd, table, data, id)
-    .then(ris => {
-      setTimeout(() => {
-        GlobalStore.state.connData.uploading_indexeddb = 0
-        GlobalStore.state.connData.downloading_indexeddb = 0
-      }, 1000)
-      return ris
-    }
+  return indexdb(context, cmd, table, data, id)
+    .then((ris) => {
+        // console.log('GlobalStore.state.connData', GlobalStore.state.connData)
 
-  ).catch(err => {
+        setTimeout(() => {
+          GlobalStore.state.connData.uploading_indexeddb = 0
+          GlobalStore.state.connData.downloading_indexeddb = 0
+        }, 1000)
+        return ris
+      }
+    ).catch((err) => {
       setTimeout(() => {
         GlobalStore.state.connData.uploading_indexeddb = (GlobalStore.state.connData.uploading_indexeddb === 1) ? -1 : GlobalStore.state.connData.uploading_indexeddb
         GlobalStore.state.connData.downloading_indexeddb = (GlobalStore.state.connData.downloading_indexeddb === 1) ? -1 : GlobalStore.state.connData.downloading_indexeddb

src/globalroutines/indexdb.ts

@@ -67,7 +67,7 @@ async function readfromIndexDbToState(context, table) {
 
       } else {
         const arrris = tools.setArrayMainByTable(table, reccat)
-        // console.log('************  ARRAYS SALVATI IN MEMORIA ', table, arrris)
+        console.log('************  ARRAYS SALVATI IN MEMORIA ', table, arrris)
 
       }
 
@@ -89,41 +89,46 @@ function testfunc2() {
 
 export default async (context, cmd, table, datakey = null, id = '') => {
 
-  // console.log('TABLE', table, 'cmd', cmd)
-  if (cmd === 'loadapp') {
-    // ****** LOAD APP AL CARICAMENTO ! *******
-    return saveConfigIndexDb(context)
+  try {
+    // console.log('TABLE', table, 'cmd', cmd)
+    if (cmd === 'loadapp') {
+      // ****** LOAD APP AL CARICAMENTO ! *******
+      return saveConfigIndexDb(context)
 
-  } else if (cmd === 'write') {
-    if (GlobalStore) {
-      GlobalStore.state.connData.uploading_indexeddb = 1
+    } else if (cmd === 'write') {
+      if (GlobalStore) {
+        GlobalStore.state.connData.uploading_indexeddb = 1
+      }
+      return await storage.setdata(table, datakey)
+    } else if (cmd === 'updatefromIndexedDbToState') {
+      return await readfromIndexDbToState(context, table)
+    } else if (cmd === 'readall') {
+      if (GlobalStore) {
+        GlobalStore.state.connData.downloading_indexeddb = 1
+        console.log('getalldata table', table)
+      }
+      return await storage.getalldata(table)
+    } else if (cmd === 'count') {
+      return await storage.count(table)
+    } else if (cmd === 'read') {
+      if (GlobalStore) {
+        GlobalStore.state.connData.downloading_indexeddb = 1
+      }
+      return await storage.getdata(table, id)
+    } else if (cmd === 'delete') {
+      if (GlobalStore) {
+        GlobalStore.state.connData.uploading_indexeddb = 1
+      }
+      return await storage.deletedata(table, id)
+    } else if (cmd === 'clearalldata') {
+      if (GlobalStore) {
+        GlobalStore.state.connData.uploading_indexeddb = 1
+      }
+      return await storage.clearalldata(table)
+    } else if (cmd === 'log') {
+      consolelogpao(table)
     }
-    return await storage.setdata(table, datakey)
-  } else if (cmd === 'updatefromIndexedDbToState') {
-    return await readfromIndexDbToState(context, table)
-  } else if (cmd === 'readall') {
-    if (GlobalStore) {
-      GlobalStore.state.connData.downloading_indexeddb = 1
-    }
-    return await storage.getalldata(table)
-  } else if (cmd === 'count') {
-    return await storage.count(table)
-  } else if (cmd === 'read') {
-    if (GlobalStore) {
-      GlobalStore.state.connData.downloading_indexeddb = 1
-    }
-    return await storage.getdata(table, id)
-  } else if (cmd === 'delete') {
-    if (GlobalStore) {
-      GlobalStore.state.connData.uploading_indexeddb = 1
-    }
-    return await storage.deletedata(table, id)
-  } else if (cmd === 'clearalldata') {
-    if (GlobalStore) {
-      GlobalStore.state.connData.uploading_indexeddb = 1
-    }
-    return await storage.clearalldata(table)
-  } else if (cmd === 'log') {
-    consolelogpao(table)
+  } catch (e) {
+    console.error('error INDEXdb', e);
   }
 }

src/js/storage.js

@@ -7,7 +7,8 @@ export let idbKeyval = (() => {
     if (!db) {
       // console.log('CREO DB STORAGE JS !')
       db = new Promise((resolve, reject) => {
-        const openreq = indexedDB.open('mydb3', 11);
+        // console.log('open mydb3')
+        const openreq = indexedDB.open('mydb3', 12);
 
         openreq.onerror = () => {
           reject(openreq.error);
@@ -16,14 +17,15 @@ export let idbKeyval = (() => {
         openreq.onupgradeneeded = () => {
           // First time setup: create an empty object store
           for (let mytab of ApiTables.MainTables) {
-            openreq.result.createObjectStore(mytab, { keyPath: '_id' });
+            openreq.result.createObjectStore(mytab, { keyPath: 'BOMID', autoIncrement: true });
             for (let mymeth of ApiTables.allMethod) {
               const tab = mymeth + mytab
-              openreq.result.createObjectStore(tab, { keyPath: '_id' });
+              openreq.result.createObjectStore(tab, { keyPath: 'BOMID', autoIncrement: true });
             }
           }
           for (let mytab of ApiTables.OtherTables) {
-            openreq.result.createObjectStore(mytab, { keyPath: '_id' });
+            console.log('mytab', mytab);
+            openreq.result.createObjectStore(mytab, { keyPath: 'BOMID', autoIncrement: true });
           }
         };
 

src/layouts/menuone/menuOne.scss

@@ -67,6 +67,10 @@
   color: red;
 }
 
+.isSocioResidente {
+  color: darkgreen;
+}
+
 .isCalendar {
   color: #fff241;
 }

src/layouts/menuone/menuOne.ts

@@ -60,7 +60,7 @@ export default class MenuOne extends Vue {
     return text
   }
 
-  get static_data(){
+  get static_data() {
     return static_data
   }
 
@@ -76,14 +76,25 @@ export default class MenuOne extends Vue {
   public getmymenuclass(elem: IListRoutes) {
     let menu = this.clBaseint
 
-    if (elem.onlyAdmin)
-      menu += ' isAdmin'
-    if (elem.onlyManager)
-      menu += ' isManager'
-    if (elem.onlyTutor)
-      menu += ' isTutor'
-    if (elem.onlyTraduttrici)
-      menu += ' isTraduttrici'
+    if (elem.color) {
+      menu += ' ' + elem.color
+    } else {
+      if (elem.onlyAdmin)
+        menu += ' isAdmin'
+      if (elem.onlyManager)
+        menu += ' isManager'
+      if (elem.onlySocioResidente)
+        menu += ' isSocioResidente'
+      if (elem.onlyConsiglio)
+        menu += ' isConsiglio'
+      if (elem.onlyDepartment)
+        menu += ' isDepartment'
+      if (elem.onlyTutor)
+        menu += ' isTutor'
+      if (elem.onlyEditor)
+        menu += ' isEditor'
+
+    }
 
     if (elem.extraclass)
       menu += ' ' + elem.extraclass

src/mixins/mixin-base.ts

@@ -9,6 +9,8 @@ import { fieldsTable } from '@src/store/Modules/fieldsTable'
 import { CalendarStore } from '@store'
 import MixinMetaTags from '@src/mixins/mixin-metatags'
 
+import { shared_consts } from '../common/shared_vuejs'
+
 // You can declare a mixin as the same style as components.
 @Component
 export default class MixinBase extends MixinMetaTags {
@@ -36,9 +38,13 @@ export default class MixinBase extends MixinMetaTags {
     return tools
   }
 
-  public getValDb(keystr, serv, def?, table?, subkey?, id?) {
+  get shared_consts() {
+    return shared_consts
+  }
 
-    return tools.getValDb(keystr, serv, def, table, subkey, id)
+  public getValDb(keystr, serv, def?, table?, subkey?, id?, idmain?) {
+
+    return tools.getValDb(keystr, serv, def, table, subkey, id, idmain)
   }
 
   public getValDbLang(keystr, serv, def?, table?, subkey?) {
@@ -55,7 +61,7 @@ export default class MixinBase extends MixinMetaTags {
     if (table === 'users') {
       const myid = UserStore.state.my._id
 
-      let myfield = {}
+      const myfield = {}
 
       if (key === 'profile') {
         UserStore.state.my.profile[subkey] = value
@@ -78,6 +84,25 @@ export default class MixinBase extends MixinMetaTags {
         fieldsvalue: myfield
       }
 
+    } else if (table === 'todos') {
+
+      const myfield = {}
+
+      // Save to the DB:
+      if (subkey) {
+        myfield[key + '.' + subkey] = value
+      } else {
+        myfield[key] = value
+      }
+
+      // console.log('myfield', myfield)
+
+      mydatatosave = {
+        id,
+        table,
+        fieldsvalue: myfield
+      }
+
     } else if (table === 'settings') {
       GlobalStore.mutations.setValueSettingsByKey({ key, value, serv })
 
@@ -89,9 +114,9 @@ export default class MixinBase extends MixinMetaTags {
           type
         }
         myrec.serv = serv
-        if (myrec.type === tools.FieldType.date)
+        if ((myrec.type === tools.FieldType.date) || (myrec.type === tools.FieldType.onlydate))
           myrec.value_date = value
-        else if (myrec.type === tools.FieldType.number)
+        else if ((myrec.type === tools.FieldType.number) || (myrec.type === tools.FieldType.hours))
           myrec.value_num = value
         else if (myrec.type === tools.FieldType.boolean)
           myrec.value_bool = value

src/mixins/mixin-users.ts

@@ -70,7 +70,7 @@ export default class MixinUsers extends Vue {
 
   get getMyImgforIcon() {
     const ris = UserStore.getters.getImgByUsername(UserStore.state.my.username)
-    return (ris !== '') ? 'img:statics/' + ris : 'fas fa-user-circle'
+    return (ris !== '') ? 'img:statics/' + ris : 'fas fa-user'
   }
 
   get getIconCart() {
@@ -96,6 +96,10 @@ export default class MixinUsers extends Vue {
     return UserStore.state.my.surname
   }
 
+  get myCell() {
+    return UserStore.state.my.profile.cell
+  }
+
   get Verificato() {
     return UserStore.state.my.verified_email
   }

src/model/Calendar.ts

@@ -1,4 +1,4 @@
-import { IOperators } from '@src/model/GlobalStore'
+import { IInternalPage, IMyPage, IOperators } from '@src/model/GlobalStore'
 
 export interface IEvents {
   _id?: any
@@ -20,11 +20,24 @@ export interface IEvents {
   infoafterprice?: string
   teacher?: string
   teacher2?: string
+  teacher3?: string
+  teacher4?: string
   infoextra?: string
   linkpage?: string
+  pagefooter?: IInternalPage[]
   linkpdf?: string
   nobookable?: boolean
+  lunchAvailable?: boolean
+  dinnerAvailable?: boolean
+  dinnerSharedAvailable?: boolean
+  lunchType?: number
+  dinnerType?: number
+  lunchPrice?: number
+  dinnerPrice?: number
+  internal?: boolean
+  note?: string
   news?: boolean
+  facebook?: string
   canceled?: boolean
   deleted?: boolean
   dupId?: any
@@ -36,6 +49,9 @@ export interface IBookedEvent {
   userId: string
   id_bookedevent?: any
   numpeople: number
+  numpeopleLunch?: number
+  numpeopleDinner?: number
+  numpeopleDinnerShared?: number
   infoevent: string
   msgbooking: string
   datebooked?: Date
@@ -70,6 +86,7 @@ export interface ICalendarState {
   eventlist: IEvents[]
   bookedevent: IBookedEvent[]
   operators: IOperators[]
+  internalpages: IMyPage[]
   wheres: IWheres[]
   contribtype: IContribtype[]
   // ---------------

src/model/GlobalStore.ts

@@ -2,7 +2,7 @@ import { IAction } from '@src/model/Projects'
 import { Component } from 'vue-router/types/router'
 import { lists } from '@src/store/Modules/lists'
 import { IPaymentType } from '@src/model/UserStore'
-import { ICart, IProducer, IProduct, IStorehouse } from '@src/model/Products'
+import { ICart, IDepartment, IProducer, IProduct, IShareWithUs, IStorehouse } from '@src/model/Products'
 
 export interface IPost {
   title: string
@@ -52,6 +52,17 @@ export interface ITeachUname {
   username?: string
 }
 
+export interface IInternalPage {
+  path?: string
+}
+
+export interface IResp {
+  _id?: string
+  username?: string
+  name?: string
+  surname?: string
+}
+
 export interface IMyPage {
   _id?: string
   author_username?: string
@@ -62,14 +73,45 @@ export interface IMyPage {
   path?: string
   keywords?: string
   description?: string
+  img1?: string
   content?: string
+  video1?: string
+  img2?: string
+  content2?: string
+  video2?: string
+  img3?: string
+  content3?: string
+  video3?: string
+  content4?: string
   active?: boolean
   inmenu?: boolean
+  color?: string
   onlyif_logged?: boolean
+  only_residenti?: boolean
+  only_consiglio?: boolean
   submenu?: boolean
   l_par?: number,
   l_child?: number,
   infooter?: boolean
+  internalpage?: boolean
+}
+
+export interface ISites {
+  _id?: string
+  attiva?: boolean
+  idapp?: string
+  name?: string
+  adminemail?: string
+  manageremail?: string
+  replyTo?: string
+  host?: string
+  portapp?: string
+  dir?: string
+  email_from?: string
+  email_pwd?: string
+  telegram_key?: string
+  telegram_bot_name?: string
+  pathreg_add?: string
 }
 
 export interface INewsToSent {
@@ -98,6 +140,11 @@ export interface ICalZoom {
   note?: string
 }
 
+export interface IGroup {
+  _id?: any
+  descr?: string
+}
+
 export interface IMailinglist {
   name?: string
   surname?: string
@@ -149,11 +196,12 @@ export interface IGlobalState {
   mobileMode: boolean
   menuCollapse: boolean
   leftDrawerOpen: boolean
-  RightDrawerOpen: boolean
+  rightDrawerOpen: boolean
   rightCartOpen: boolean
   category: string
   stateConnection: string
   networkDataReceived: boolean
+  clickcmd?: string
   cfgServer: ICfgServer[]
   testp1: ITestp1
   connData: IConnData
@@ -175,6 +223,11 @@ export interface IGlobalState {
   calzoom: ICalZoom[],
   producers: IProducer[],
   storehouses: IStorehouse[],
+  departments: IDepartment[],
+  sharewithus: IShareWithUs[],
+  groups: IGroup[],
+  resps: IResp[],
+  workers: IResp[],
   autoplaydisc: number
 }
 
@@ -207,8 +260,13 @@ export interface IListRoutes {
   onlyAdmin?: boolean
   onlyif_logged?: boolean
   onlyManager?: boolean
+  onlySocioResidente?: boolean
+  onlyConsiglio?: boolean
+  onlyNotSoci?: boolean
+  onlyDepartment?: boolean
   onlyTutor?: boolean
-  onlyTraduttrici?: boolean
+  color?: string
+  onlyEditor?: boolean
   extraclass?: string
   meta?: any
   idelem?: string
@@ -345,6 +403,7 @@ export interface IFunctionality {
   BOOKING_EVENTS?: boolean
   ENABLE_REG_AYNI?: boolean
   ENABLE_REG_SIP?: boolean
+  ENABLE_REG_CNM?: boolean
 }
 
 export interface IParamsQuery {
@@ -355,6 +414,15 @@ export interface IParamsQuery {
   filterand: string
   sortBy: any
   descending: number
+  userId: string
+  codeId?: string
+  lk_tab?: string,
+  af_objId_tab?: string,
+  lk_LF?: string,
+  lk_FF?: string,
+  lk_as?: string,
+  lk_proj?: string,
+  lk_col2?: string,
 }
 
 export interface IColGridTable {
@@ -377,6 +445,7 @@ export interface IColGridTable {
   jointable?: string
   resultjoin?: string[]
   visuonlyEditVal?: boolean
+  notShowInNewRec?: boolean
 }
 
 export interface ITableRec {
@@ -393,6 +462,8 @@ export interface ITableRec {
 export interface IFilter {
   label: string
   value: string
+  hide?: boolean
+  default?: boolean
 }
 
 export interface IDataPass {
@@ -418,3 +489,11 @@ export const DefaultNewsState: INewsState = {
   totunsubscribed: 0,
   totsentlastid: 0
 }
+
+export interface IPagination {
+  sortBy: string,
+  descending: boolean
+  rowsNumber: number
+  page: number,
+  rowsPerPage: number // specifying this determines pagination is server-side
+}

src/model/Products.ts

@@ -1,17 +1,22 @@
 export interface IProduct {
   _id?: any
-  descr?: string,
+  active?: boolean
   idProducer?: string,
   idStorehouses?: string[],
   producer?: IProducer,
   storehouses?: IStorehouse[],
+  code?: string,
   name?: string,
+  description?: string,
   department?: string,
   category?: string,
   price?: number,
+  after_price?: string,
   color?: string,
   size?: string,
   quantityAvailable?: number,
+  canBeShipped?: boolean,
+  canBeBuyOnline?: boolean,
   weight?: number,
   stars?: number,
   date?: Date,
@@ -32,6 +37,7 @@ export interface IOrder {
   idProducer?: string
   idStorehouse?: string
   price?: number
+  after_price?: string
   color?: string
   size?: string
   quantity?: number
@@ -51,6 +57,7 @@ export interface IOrder {
 export interface IProductsState {
   products: IProduct[]
   cart: ICart
+  orders: IOrderCart[]
 }
 
 export interface IProducer {
@@ -59,12 +66,20 @@ export interface IProducer {
   name?: string,
   description?: string,
   referent?: string,
+  username?: string,
   region?: string,
   city?: string,
   img?: string,
   website?: string,
 }
 
+export interface IDepartment {
+  _id?: any
+  idapp?: string
+  name?: string,
+  username?: string,
+}
+
 export interface IStorehouse {
   _id?: any
   idapp?: string
@@ -84,5 +99,33 @@ export interface ICart {
   userId?: string
   totalQty?: number
   totalPrice?: number
+  department?: string
   items?: IBaseOrder[]
+  note?: string
+  modify_at?: Date
+}
+
+export interface IOrderCart {
+  _id?: any
+  idapp?: string
+  numorder?: number
+  userId?: string
+  totalQty?: number
+  totalPrice?: number
+  department?: string
+  items?: IBaseOrder[]
+  nameSurname?: string
+  status?: number
+  note?: string
+  modify_at?: Date
+  completed_at?: Date
+}
+
+export interface IShareWithUs {
+  _id?: any
+  idapp?: string
+  userId?: string
+  description?: string
+  numshared?: number
+  rating?: number
 }

src/model/Projects.ts

@@ -18,6 +18,7 @@ export interface IProject {
   id_main_project?: string
   id_parent?: string
   descr?: string
+  note?: string
   longdescr?: string
   priority?: number
   statusproj?: number
@@ -26,7 +27,6 @@ export interface IProject {
   completed_at?: Date
   expiring_at?: Date
   enableExpiring?: boolean
-  id_prev?: string
   modified?: boolean
   favourite?: number
   pos?: number
@@ -45,8 +45,14 @@ export interface IProject {
   actualphase?: number
   privacyread?: string
   privacywrite?: string
+  tipovisu?: number
   themecolor?: string
   themebgcolor?: string
+  groupId?: string
+  respUsername?: string
+  viceRespUsername?: string
+  vice2RespUsername?: string
+  view?: string
 }
 
 export interface IProjectsState {
@@ -60,7 +66,15 @@ export const Privacy = {
   all: 'all',
   friends: 'friends',
   mygroup: 'mygroup',
-  onlyme: 'onlyme'
+  onlyme: 'onlyme',
+  inherited: 'inherited'
+}
+
+export const TipoVisu = {
+  inherited: 0,
+  simplelist: 1,
+  taskProgress: 2,
+  responsabili: 3
 }
 
 export const TypeProj = {

src/model/Todos.ts

@@ -5,6 +5,7 @@ export interface ITodo {
   userId?: string
   category?: string
   descr?: string,
+  note?: string,
   priority?: number,
   statustodo?: number,
   created_at?: Date,
@@ -12,7 +13,6 @@ export interface ITodo {
   completed_at?: Date,
   expiring_at?: Date,
   enableExpiring?: boolean,
-  id_prev?: string,
   modified?: boolean,
   pos?: number,
   order?: number,
@@ -25,6 +25,7 @@ export interface ITodo {
   start_date?: Date
   themecolor?: string
   themebgcolor?: string
+  assignedToUsers?: string[]
 }
 
 export interface IParamTodo {
@@ -57,3 +58,14 @@ export interface ITodosState {
   insidePending: boolean
   visuLastCompleted: number
 }
+
+export interface IHours {
+  _id?: any,
+  userId?: string
+  descr?: string,
+  todoId?: string,
+  date?: Date,
+  time_start: number
+  time_end: number
+  hours: number
+}

src/model/UserStore.ts

@@ -1,5 +1,5 @@
 import { IToken } from 'model/other'
-import { ICart } from '@src/model/Products'
+import { ICart, IOrderCart, IShareWithUs } from '@src/model/Products'
 
 const enum ESexType {
   None = 0,
@@ -33,6 +33,9 @@ export interface IUserProfile {
   saw_and_accepted?: boolean
   qualified?: boolean
   qualified_2invitati?: boolean
+  myshares?: IShareWithUs[]
+  socio?: boolean
+  socioresidente?: boolean
 }
 
 export interface IPaymentType {
@@ -88,6 +91,7 @@ export interface IUserFields {
   numinvitati?: number
   numinvitatiattivi?: number
   cart?: ICart
+  ordercart?: IOrderCart
 }
 
 /*
@@ -116,9 +120,10 @@ export interface IUserState {
   isLogged?: boolean
   isAdmin?: boolean
   isManager?: boolean
+  isDepartment?: boolean
   isTutor?: boolean
   isZoomeri?: boolean
-  isTraduttrici?: boolean
+  isEditor?: boolean
   isTeacher?: boolean
   usersList?: IUserFields[]
   countusers?: number

src/model/signup-option.ts

@@ -13,3 +13,39 @@ export interface ISignupOptions {
   profile?: IUserProfile
   // already_registered: boolean
 }
+
+export interface ISignupIscrizioneConacreisOptions {
+  userId?: string
+  name?: string
+  surname?: string
+  email?: string
+  fiscalcode?: string
+  residency_address?: string
+  residency_city?: string
+  residency_province?: string
+  residency_country?: string
+  residency_zipcode?: string
+  dateofbirth?: Date
+  dateofreg?: Date
+  dateofapproved?: Date
+  born_city?: string
+  born_province?: string
+  born_country?: string
+  cell_phone?: string
+  newsletter_on?: boolean
+  accetta_carta_costituzionale_on?: boolean
+  metodo_pagamento?: number
+  iscrizione_compilata?: boolean
+  ha_pagato?: boolean
+  codiceConacreis?: string
+  annoTesseramento?: number
+  numTesseraInterna?: number
+  motivazioni?: string
+  competenze_professionalita?: string
+  cosa_potrei_offrire?: string
+  cosa_vorrei_ricevere?: string
+  altre_comunicazioni?: string
+  come_ci_hai_conosciuto?: string
+  terms?: boolean
+  note?: string
+}

src/rootgen/admin/departments/departments.ts

@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { tools } from '../../../store/Modules/tools'
+import { toolsext } from '../../../store/Modules/toolsext'
+import { static_data } from '../../../db/static_data'
+import { Screen } from 'quasar'
+
+import { colTabledepartments } from '@src/store/Modules/fieldsTable'
+
+import { CImgText } from '../../../components/CImgText/index'
+import { CCard, CGridTableRec, CMyPage, CTitleBanner } from '@components'
+import MixinMetaTags from '../../../mixins/mixin-metatags'
+import MixinBase from '@src/mixins/mixin-base'
+
+@Component({
+  mixins: [MixinBase],
+  components: { CImgText, CCard, CMyPage, CTitleBanner, CGridTableRec }
+})
+export default class StorehousePage extends MixinMetaTags {
+  public pagination = {
+    sortBy: 'name',
+    descending: false,
+    page: 2,
+    rowsPerPage: 5
+    // rowsNumber: xx if getting data from a server
+  }
+
+  public selected = []
+  public dataPages = []
+
+  get getcoldepartments() {
+    return colTabledepartments
+  }
+
+  public meta() {
+    return tools.metafunc(this)
+  }
+
+  get static_data() {
+    return static_data
+  }
+}

src/rootgen/admin/departments/departments.vue

@@ -0,0 +1,27 @@
+<template>
+    <CMyPage title="Uffici" imgbackground="../../statics/images/produttori.jpg" sizes="max-height: 120px">
+        <span>{{ setmeta({
+            title: 'Uffici',
+            description: "",
+            keywords: '' } ) }}
+        </span>
+
+        <div class="q-ma-sm q-gutter-sm q-pa-xs">
+            <CTitleBanner title="Uffici"></CTitleBanner>
+            <CGridTableRec prop_mytable="departments"
+                           prop_mytitle="Lista Uffici"
+                           :prop_mycolumns="getcoldepartments"
+                           prop_colkey="name"
+                           nodataLabel="Nessun Ufficio"
+                           noresultLabel="Il filtro selezionato non ha trovato nessun risultato">
+
+            </CGridTableRec>
+        </div>
+    </CMyPage>
+</template>
+<script lang="ts" src="./departments.ts">
+
+</script>
+<style lang="scss" scoped>
+    @import 'departments.scss';
+</style>

src/rootgen/admin/eventlist/eventlist.ts

@@ -10,6 +10,7 @@ import { Getter } from 'vuex-class'
 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'
 
 const namespace = 'CalendarModule'
 
@@ -18,10 +19,11 @@ const namespace = 'CalendarModule'
   name: 'EventList',
   components: { CTitle, CMyPage }
 })
-export default class Eventlist extends Vue {
+export default class Eventlist extends MixinEvents {
   public $t: any
   public $q
   public showpeople: boolean = false
+  public shownote: boolean = false
   public eventsel: IEvents = null
   public showPrev = false
   public numrec = 0
@@ -30,7 +32,7 @@ export default class Eventlist extends Vue {
   public getEventsBookedByIdEvent: (state: ICalendarState, id, showall) => IBookedEvent[]
 
   @Getter('getNumParticipants', { namespace })
-  public getNumParticipants: (state: ICalendarState, event: IEvents, showall) => number
+  public getNumParticipants: (state: ICalendarState, event: IEvents, showall, tipo) => number
 
   public getNameSurnameByUserId(userid) {
     return UserStore.getters.getNameSurnameByUserId(userid)
@@ -51,7 +53,7 @@ export default class Eventlist extends Vue {
       let add = true
 
       if (!this.showall) {
-        add = CalendarStore.getters.getNumParticipants(myevent, this.showall) > 0
+        add = CalendarStore.getters.getNumParticipants(myevent, this.showall, tools.peopleWhere.participants) > 0
       }
 
       if (add) {
@@ -78,7 +80,7 @@ export default class Eventlist extends Vue {
       eventsloc.reverse()
     }
 
-    return eventsloc
+    return eventsloc.filter((rec) => rec.title !== '')
   }
 
   public getNumEvent() {
@@ -96,7 +98,7 @@ export default class Eventlist extends Vue {
       let add = true
 
       if (!this.showall) {
-        add = CalendarStore.getters.getNumParticipants(myevent, this.showall) > 0
+        add = CalendarStore.getters.getNumParticipants(myevent, this.showall, tools.peopleWhere.participants) > 0
       }
 
       if (add) {
@@ -154,4 +156,8 @@ export default class Eventlist extends Vue {
     this.getNumEvent()
   }
 
+  public change_rec(eventparam) {
+    this.UpdateDbByFields(this, eventparam)
+  }
+
 }

src/rootgen/admin/eventlist/eventlist.vue

@@ -1,114 +1,171 @@
 <template>
-    <CMyPage title="Events" keywords="" description="" imgbackground="../../statics/images/calendario_eventi.jpg" sizes="max-height: 120px">
+  <CMyPage title="Events" keywords="" description="" imgbackground="../../statics/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 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()" class="listaev listaev__table">
+          <td>
+            <div class="text-center text-blue">{{ func_tools.getDateStr(event.dateTimeStart) }}</div>
+          </td>
+          <td :class="">
+            <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">{{ getNumParticipants(event, showall, tools.peopleWhere.participants) }}</div>
+          </td>
+          <td v-if="showall">
+            <div class="text-center">{{ getNumParticipants(event, showall, tools.peopleWhere.lunch) }}</div>
+          </td>
+          <td v-if="showall">
+            <div class="text-center">{{ getNumParticipants(event, showall, tools.peopleWhere.dinner) }}</div>
+          </td>
+          <td v-if="showall">
+            <div class="text-center">{{ getNumParticipants(event, showall, tools.peopleWhere.dinnerShared) }}</div>
+          </td>
 
-            <q-space></q-space>
+          <td class="text-center">
+            <q-btn v-if="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-toggle v-model="showPrev" :val="lists.MenuAction.SHOW_PREV_REC"
-                      :label="$t('grid.showprevedit')"></q-toggle>
-        </div>
-
-        <div>
+          </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>{{$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>{{$t('cal.peoplebooked')}}</th>
-                </thead>
+              <thead>
+              <th>Data</th>
+              <th>Messaggio</th>
+              <th>Partec</th>
+              <th>Azione</th>
+              </thead>
 
-                <tbody>
-                <tr v-for="(event, index) in getEventList()" class="listaev listaev__table">
-                    <td>
-                        <div class="text-center text-blue">{{func_tools.getDateStr(event.dateTimeStart)}}</div>
-                    </td>
-                    <td :class="">
-                        <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>
-                        </div>
-                    </td>
-                    <td v-if="showall">
-                        <div class="text-center">{{ getNumParticipants(event, showall) }}</div>
-                    </td>
-                    <td class="text-center">
-                        <q-btn v-if="getNumParticipants(event, showall) > 0"
-                               dense
-                               round
-                               @click="showpeople = true; eventsel = event"
-                               aria-label="Menu">
-                            <q-icon name="info"/>
-                        </q-btn>
-                    </td>
-                </tr>
-                </tbody>
+              <tbody>
+              <tr v-for="(eventbook, index) in getEventsBookedByIdEvent(eventsel._id, showall)"
+                  class="listaev listaev__table">
+                <td class="text-center">
+                  <div>{{ func_tools.getDateTimeShortStr(eventbook.datebooked) }}
+                  </div>
+                </td>
+                <td class="text-center">
+                  <strong>{{ 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-dialog v-model="showpeople">
-                <q-card v-if="eventsel">
-                    <q-toolbar class="bg-primary text-white" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
-                        <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>Num</th>
-                            <th>Azione</th>
-                            </thead>
-
-                            <tbody>
-                            <tr v-for="(eventbook, index) in getEventsBookedByIdEvent(eventsel._id, showall)"
-                                class="listaev listaev__table">
-                                <td class="text-center">
-                                    <div>{{func_tools.getDateTimeShortStr(eventbook.datebooked)}}
-                                    </div>
-                                </td>
-                                <td class="text-center">
-                                    <strong>{{getNameSurnameByUserId(eventbook.userId)}}</strong> <span
-                                        v-if="eventbook.msgbooking"> {{ $t('sendmsg.write') }}: </span><br>
-                                    {{ eventbook.msgbooking }}
-                                </td>
-                                <td class="text-center">
-                                    {{eventbook.numpeople}}
-                                </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>
+          </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>
-    </CMyPage>
+        <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';
+@import './eventlist.scss';
 </style>

src/rootgen/admin/groups/groups.ts

@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { tools } from '../../../store/Modules/tools'
+import { toolsext } from '../../../store/Modules/toolsext'
+import { static_data } from '../../../db/static_data'
+import { Screen } from 'quasar'
+
+import { colTablegroups } from '@src/store/Modules/fieldsTable'
+
+import { CImgText } from '../../../components/CImgText/index'
+import { CCard, CGridTableRec, CMyPage, CTitleBanner } from '@components'
+import MixinMetaTags from '../../../mixins/mixin-metatags'
+import MixinBase from '@src/mixins/mixin-base'
+
+@Component({
+  mixins: [MixinBase],
+  components: { CImgText, CCard, CMyPage, CTitleBanner, CGridTableRec }
+})
+export default class GroupPage extends MixinMetaTags {
+  public pagination = {
+    sortBy: 'descr',
+    descending: false,
+    page: 2,
+    rowsPerPage: 5
+    // rowsNumber: xx if getting data from a server
+  }
+
+  public selected = []
+  public dataPages = []
+
+  get getcolgroups() {
+    return colTablegroups
+  }
+
+  public meta() {
+    return tools.metafunc(this)
+  }
+
+  get static_data() {
+    return static_data
+  }
+}

src/rootgen/admin/groups/groups.vue

@@ -0,0 +1,27 @@
+<template>
+    <CMyPage title="Gruppi" imgbackground="../../statics/images/produttori.jpg" sizes="max-height: 120px">
+        <span>{{ setmeta({
+            title: 'Gruppi',
+            description: "",
+            keywords: '' } ) }}
+        </span>
+
+        <div class="q-ma-sm q-gutter-sm q-pa-xs">
+            <CTitleBanner title="Gruppi"></CTitleBanner>
+            <CGridTableRec prop_mytable="groups"
+                           prop_mytitle="Gruppi"
+                           :prop_mycolumns="getcolgroups"
+                           prop_colkey="descr"
+                           nodataLabel="Nessun Gruppo"
+                           noresultLabel="Il filtro selezionato non ha trovato nessun risultato">
+
+            </CGridTableRec>
+        </div>
+    </CMyPage>
+</template>
+<script lang="ts" src="./groups.ts">
+
+</script>
+<style lang="scss" scoped>
+    @import 'groups.scss';
+</style>