Version 0.2.7

src/views/test/test.scss

@@ -0,0 +1,12 @@
+.profile {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+.myrow{
+  display: flex;
+  @media (max-width: 600px) {
+    flex-flow: column;
+  }
+}

src/views/test/test.ts

@@ -0,0 +1,93 @@
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CSkill } from '@/components/CSkill'
+import { tools } from '@store/Modules/tools'
+import { defineComponent, onMounted, ref } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+
+
+export default defineComponent({
+  name: 'ProfileMy',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const $router = useRouter()
+    const globalStore = useGlobalStore()
+    const $q = useQuasar()
+    const { t } = useI18n();
+
+    const filtroutente = ref(<any[]>[])
+
+    function getpayment() {
+      return userStore.my.profile.paymenttypes
+    }
+
+    function profile() {
+      return userStore.my.profile
+    }
+
+    function eliminaAccount() {
+
+      $q.dialog({
+        message: t('reg.cancellami', { sitename: t('ws.sitename') }),
+        ok: {
+          label: t('dialog.yes'),
+          push: true
+        },
+        cancel: {
+          label: t('dialog.cancel')
+        },
+        title: t('pages.profile')
+      }).onOk(() => {
+        $q.dialog({
+          message: t('reg.cancellami_2', { sitename: t('ws.sitename') }),
+          ok: {
+            label: t('dialog.yes'),
+            push: true
+          },
+          cancel: {
+            label: t('dialog.cancel')
+          },
+          title: t('pages.profile')
+        })
+          .onOk(() => {
+            globalStore.DeleteRec({ table: toolsext.TABUSER, id: userStore.my._id })
+              .then((ris: any) => {
+                if (ris) {
+                  tools.showPositiveNotif($q, t('reg.account_cancellato'))
+                  userStore.logout()
+                  $router.replace('/')
+                } else
+                  tools.showNegativeNotif($q, t('db.recfailed'))
+
+              })
+          })
+      })
+    }
+
+    function mounted() {
+      filtroutente.value = [
+        { userId: userStore.my._id}
+      ]
+    }
+
+    onMounted(mounted)
+
+    return {
+      eliminaAccount,
+      profile,
+      getpayment,
+      tools,
+      costanti,
+      filtroutente,
+    }
+  }
+})

src/views/test/test.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-md">
+      <q-select
+        filled
+        v-model="model"
+        clearable
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        label="Focus after filtering"
+        :options="options"
+        @filter="filterFn"
+        @filter-abort="abortFilterFn"
+        style="width: 250px"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        filled
+        v-model="model"
+        clearable
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        label="Autoselect after filtering"
+        :options="options"
+        @filter="filterFnAutoselect"
+        @filter-abort="abortFilterFn"
+        style="width: 250px"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              No results
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+const stringOptions = [
+  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
+].reduce((acc, opt) => {
+  for (let i = 1; i <= 5; i++) {
+    acc.push(opt + ' ' + i)
+  }
+  return acc
+}, [])
+
+export default {
+  setup () {
+    const options = ref(stringOptions)
+
+    return {
+      model: ref(null),
+      options,
+
+      filterFn (val, update, abort) {
+        // call abort() at any time if you can't retrieve data somehow
+
+        setTimeout(() => {
+          update(
+            () => {
+              if (val === '') {
+                options.value = stringOptions
+              }
+              else {
+                const needle = val.toLowerCase()
+                options.value = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
+              }
+            },
+
+            // "ref" is the Vue reference to the QSelect
+            ref => {
+              if (val !== '' && ref.options.length > 0) {
+                ref.setOptionIndex(-1) // reset optionIndex in case there is something selected
+                ref.moveOptionSelection(1, true) // focus the first selectable option and do not update the input-value
+              }
+            }
+          )
+        }, 300)
+      },
+
+      filterFnAutoselect (val, update, abort) {
+        // call abort() at any time if you can't retrieve data somehow
+
+        setTimeout(() => {
+          update(
+            () => {
+              if (val === '') {
+                options.value = stringOptions
+              }
+              else {
+                const needle = val.toLowerCase()
+                options.value = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
+              }
+            },
+
+            // "ref" is the Vue reference to the QSelect
+            ref => {
+              if (val !== '' && ref.options.length > 0 && ref.getOptionIndex() === -1) {
+                ref.moveOptionSelection(1, true) // focus the first selectable option and do not update the input-value
+                ref.toggleOption(ref.options[ ref.optionIndex ], true) // toggle the focused option
+              }
+            }
+          )
+        }, 300)
+      },
+
+      abortFilterFn () {
+        // console.log('delayed filter aborted')
+      }
+    }
+  }
+}
+</script>