Step 1: Creating page Messages: userlist last messages + a page for all the messages received and sent.

- Added CMyEditor and CMySelect to the git committ.

src/components/CMySelect/CMySelect.scss

@@ -0,0 +1,4 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}

src/components/CMySelect/CMySelect.ts

@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { IPerson } from '../../model/GlobalStore'
+
+@Component({
+  name: 'CMySelect'
+})
+
+export default class CMySelect extends Vue {
+  @Prop({ required: true }) public value
+  @Prop({ required: true, default: '' }) public label
+  @Prop({ required: false, default: '' }) public myclass
+  @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: null }) public funcgetvaluebyid
+  @Prop({ required: true }) public options
+
+  public myvalue = ''
+
+  get tools() {
+    return tools
+  }
+
+  public nothing() {
+
+  }
+
+  public changeval(newval) {
+    console.log('changeval', newval)
+    // const newvallab = newval[`${this.optval}`]
+    // this.myvalue = newvallab
+    this.$emit('update:value', newval)
+  }
+
+  public mounted() {
+    const rec = this.options.find((myrec) => myrec[`${this.optval}`] === this.value)
+    console.log('rec', rec)
+    if (!this.useinput) {
+      this.myvalue = this.value
+    } else {
+      if (rec) {
+        if (this.funcgetvaluebyid)
+          this.myvalue = this.funcgetvaluebyid(rec[`${this.optval}`])
+        else
+          this.myvalue = rec[`${this.optlab}`]
+
+        console.log('this.myvalue', this.myvalue, 'this.optval', this.optval, 'rec', rec[`${this.optval}`])
+      }
+    }
+  }
+}

src/components/CMySelect/CMySelect.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div v-if="useinput">
+            <q-select
+                    :input-class="myclass"
+                    filled
+                    v-model="myvalue"
+                    :use-input="useinput"
+                    input-debounce="0"
+                    @new-value="newvaluefunc"
+                    new-value-mode="add-unique"
+                    :options="options"
+                    :option-value="optval"
+                    :option-label="optlab"
+                    @input="changeval"
+                    :label="label"
+                    dense
+            >
+            </q-select>
+        </div>
+        <div v-else>
+            <q-select
+                    :input-class="myclass"
+                    filled
+                    v-model="myvalue"
+                    :options="options"
+                    :option-value="optval"
+                    :option-label="optlab"
+                    @input="changeval"
+                    :label="label"
+                    emit-value
+                    map-options
+                    style="min-width: 170px; max-width: 400px;"
+            >
+
+            </q-select>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CMySelect.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMySelect.scss';
+</style>

src/components/CMySelect/index.ts

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