From 6f2e4f891ebad2d39823d0d3988a8542672ebd92 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Wed, 4 Dec 2019 02:05:08 +0100
Subject: [PATCH] - Import emails from a list to a DB - Create Template Emails
 - Options Email

---
 src/components/CMyFieldDb/CMyFieldDb.scss     |  17 ++
 src/components/CMyFieldDb/CMyFieldDb.ts       | 101 ++++++++++++
 src/components/CMyFieldDb/CMyFieldDb.vue      | 147 ++++++++++++++++++
 src/components/CMyFieldDb/index.ts            |   1 +
 src/components/CTitleBanner/CTitleBanner.scss |   0
 src/components/CTitleBanner/CTitleBanner.ts   |  31 ++++
 src/components/CTitleBanner/CTitleBanner.vue  |  16 ++
 src/components/CTitleBanner/index.ts          |   1 +
 8 files changed, 314 insertions(+)
 create mode 100644 src/components/CMyFieldDb/CMyFieldDb.scss
 create mode 100644 src/components/CMyFieldDb/CMyFieldDb.ts
 create mode 100644 src/components/CMyFieldDb/CMyFieldDb.vue
 create mode 100644 src/components/CMyFieldDb/index.ts
 create mode 100644 src/components/CTitleBanner/CTitleBanner.scss
 create mode 100644 src/components/CTitleBanner/CTitleBanner.ts
 create mode 100644 src/components/CTitleBanner/CTitleBanner.vue
 create mode 100644 src/components/CTitleBanner/index.ts

diff --git a/src/components/CMyFieldDb/CMyFieldDb.scss b/src/components/CMyFieldDb/CMyFieldDb.scss
new file mode 100644
index 0000000..574dc13
--- /dev/null
+++ b/src/components/CMyFieldDb/CMyFieldDb.scss
@@ -0,0 +1,17 @@
+.colmodif {
+  cursor: pointer;
+}
+
+
+.colmodif:hover {
+  background-color: #a8f0ff;
+  cursor: pointer;
+}
+
+.colsel {
+  background-color: #81b8ff;
+}
+
+.cldisable{
+  color: gray !important;
+}
diff --git a/src/components/CMyFieldDb/CMyFieldDb.ts b/src/components/CMyFieldDb/CMyFieldDb.ts
new file mode 100644
index 0000000..126475d
--- /dev/null
+++ b/src/components/CMyFieldDb/CMyFieldDb.ts
@@ -0,0 +1,101 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { QEditor } from 'quasar'
+import { CMyEditor } from '../CMyEditor'
+import MixinBase from '../../mixins/mixin-base'
+import { fieldsTable } from '../../store/Modules/fieldsTable'
+import { IColGridTable } from '../../model'
+import { CMySelect } from '../CMySelect'
+
+@Component({
+  name: 'CMyFieldDb',
+  components: { CMyEditor, CMySelect }
+})
+
+export default class CMyFieldDb extends MixinBase {
+  @Prop({ required: true }) public title
+  @Prop({ required: true }) public mykey: string
+  @Prop({ required: true }) public type: number
+  @Prop({ required: false, default: false }) public serv: boolean
+  @Prop({ required: false, default: false }) public disable: boolean
+  @Prop({ required: false, default: '' }) public jointable: string
+
+  public $t
+  public myvalue = ''
+  public col: IColGridTable = { name: 'test' }
+  public canEdit: boolean = true
+
+  public created() {
+    this.myvalue = this.getValDb(this.mykey, this.serv)
+    this.col.jointable = this.jointable
+    this.col.fieldtype = this.type
+    this.col.label = this.title
+    // console.log('created', this.myvalue)
+  }
+
+  public visuValByType(val) {
+    if (this.col.fieldtype === tools.FieldType.date) {
+      if (val === undefined) {
+        return '[]'
+      } else {
+        return tools.getstrDateTime(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) {
+      if (val === undefined)
+        return '[---]'
+      else
+        return fieldsTable.getArrStrByValueBinary(this, this.col, val)
+    } else if (this.col.fieldtype === tools.FieldType.select) {
+      if (val === undefined)
+        return '[---]'
+      else
+        return fieldsTable.getValueByTable(this.col, val)
+    } else if (this.col.fieldtype === tools.FieldType.multiselect) {
+      if (val === undefined)
+        return '[---]'
+      else
+        return fieldsTable.getMultiValueByTable(this.col, val)
+    } else if (this.col.fieldtype === tools.FieldType.password) {
+      if (val === undefined)
+        return '[---]'
+      else
+        return '***************'
+    } else {
+      if (val === undefined)
+        return '-'
+      else if (val === '') {
+        return '-'
+      } else {
+        let mystr = tools.firstchars(val, 5000)
+        if (val) {
+          if (val.length > 5000)
+            mystr += '...'
+        } else {
+          return val
+        }
+        return mystr
+      }
+    }
+  }
+
+  get mycl() {
+    if (this.disable) {
+      return 'cldisable'
+    }
+  }
+
+  get myvalprinted() {
+    return this.visuValByType(this.myvalue)
+  }
+
+  public savefield(value, initialval) {
+    this.myvalue = value
+    this.setValDb(this.mykey, this.myvalue, this.type, this.serv)
+  }
+
+}
diff --git a/src/components/CMyFieldDb/CMyFieldDb.vue b/src/components/CMyFieldDb/CMyFieldDb.vue
new file mode 100644
index 0000000..21083c4
--- /dev/null
+++ b/src/components/CMyFieldDb/CMyFieldDb.vue
@@ -0,0 +1,147 @@
+<template>
+    <div class="text-center">
+        <div class="row items-center justify-center q-gutter-md q-ma-xs">
+            <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">{{title}}</div>
+                    </template>
+                </q-field>
+            </div>
+            <div class="q-ma-sm q-pa-sm colmodif col-grow rounded-borders " style="border: 1px solid #bbb">
+                <div v-if="type === tools.FieldType.date">
+                    <CDateTime
+                            :label="col.label"
+                            class="cursor-pointer"
+                            :value.sync="myvalue"
+                            :readonly="false"
+                            :dense="true"
+                            :canEdit="canEdit"
+                    >
+                    </CDateTime>
+                </div>
+                <div v-else :class="mycl">
+                    <div v-if="type === 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="type === 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="type === tools.FieldType.html">
+                        <div v-html="myvalprinted">
+
+                        </div>
+                    </div>
+                    <div v-else-if="type === tools.FieldType.boolean">
+                        <q-toggle dark color="green" v-model="myvalue" :label="col.title"
+                                  @input="savefield"></q-toggle>
+                    </div>
+
+                    <div v-else>
+                        {{ myvalprinted }}
+                    </div>
+
+                    <q-popup-edit
+                            v-if="canEdit && type !== tools.FieldType.boolean"
+                            v-model="myvalue"
+                            :disable="col.disable"
+                            :title="col.title"
+                            @save="savefield"
+                            buttons
+                    >
+
+                        <div v-if="type === tools.FieldType.boolean">
+                            <q-checkbox v-model="myvalue" :label="col.title">
+                            </q-checkbox>
+                            {{ visuValByType(myvalue) }}
+                        </div>
+                        <div v-else-if="type === tools.FieldType.string">
+                            <q-input v-model="myvalue"
+                                     autogrow
+                                     @keyup.enter.stop
+                                     autofocus>
+
+                            </q-input>
+                        </div>
+                        <div v-else-if="type === tools.FieldType.password">
+                            <q-input v-model="myvalue"
+                                     type="password"
+                                     @keyup.enter.stop
+                                     autofocus>
+
+                            </q-input>
+                        </div>
+                        <div v-else-if="type === tools.FieldType.number">
+                            <q-input v-model="myvalue" type="number"
+                                     autofocus>
+
+                            </q-input>
+                        </div>
+                        <div v-else-if="type === 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="type === tools.FieldType.html">
+                            <CMyEditor :value.sync="myvalue" :title="title" @keyup.enter.stop>
+
+                            </CMyEditor>
+                        </div>
+                        <div v-else-if="type === 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="type === tools.FieldType.multiselect">
+                            <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"
+                            >
+
+                            </q-select>
+                        </div>
+
+                    </q-popup-edit>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CMyFieldDb.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyFieldDb.scss';
+</style>
diff --git a/src/components/CMyFieldDb/index.ts b/src/components/CMyFieldDb/index.ts
new file mode 100644
index 0000000..04e1799
--- /dev/null
+++ b/src/components/CMyFieldDb/index.ts
@@ -0,0 +1 @@
+export {default as CMyFieldDb} from './CMyFieldDb.vue'
diff --git a/src/components/CTitleBanner/CTitleBanner.scss b/src/components/CTitleBanner/CTitleBanner.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/CTitleBanner/CTitleBanner.ts b/src/components/CTitleBanner/CTitleBanner.ts
new file mode 100644
index 0000000..f1e686e
--- /dev/null
+++ b/src/components/CTitleBanner/CTitleBanner.ts
@@ -0,0 +1,31 @@
+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'
+
+// 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({
+  name: 'CTitleBanner'
+})
+export default class CTitleBanner extends Vue {
+  @Prop({ required: true}) public title: string
+  @Prop({ required: false, default: 'bg-primary' }) public bgcolor: string
+  @Prop({ required: false, default: 'primary' }) public color: string
+
+}
diff --git a/src/components/CTitleBanner/CTitleBanner.vue b/src/components/CTitleBanner/CTitleBanner.vue
new file mode 100644
index 0000000..61fe274
--- /dev/null
+++ b/src/components/CTitleBanner/CTitleBanner.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <q-banner
+                class="q-my-md"
+                rounded dense :class="bgcolor+` text-white`"
+                :color="color+` q-title`" style="text-align: center;">
+            <span class="mybanner">{{title}}</span>
+        </q-banner>
+    </div>
+</template>
+
+<script lang="ts" src="./CTitleBanner.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CTitleBanner.scss';
+</style>
diff --git a/src/components/CTitleBanner/index.ts b/src/components/CTitleBanner/index.ts
new file mode 100644
index 0000000..ef17a23
--- /dev/null
+++ b/src/components/CTitleBanner/index.ts
@@ -0,0 +1 @@
+export {default as CTitleBanner} from './CTitleBanner.vue'