surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Converting all to Typescript

Browse Source 
- Installing 1.0.0.beta Quasar Upgrade
   - (Part 1 - Upgrade Components)
This commit is contained in:
Paolo Arena
2019-03-11 19:16:39 +01:00
parent 58967a1650
commit bb3be0ec16
85 changed files with 3961 additions and 32086 deletions
Download Patch File Download Diff File Expand all files Collapse all files

714
src/components/Header.vue
View File

@@ -1,714 +0,0 @@
<template>
<div>
<!--
<router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
<button>
<i>arrow_back</i>
</button>
</router-link>
-->
<q-layout-header>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
class="toolbar"
>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu"/>
</q-btn>
<div v-if="$q.platform.is.desktop">
<!--I'm only rendered on desktop!-->
</div>
<div v-if="$q.platform.is.mobile">
<!--I'm only rendered on mobile!-->
</div>
<div v-if="$q.platform.is.electron">
<!--I'm only rendered on Electron!-->
</div>
<q-btn id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
class="btnNewVersShow" @click="RefreshApp" :label="$t('notification.newVersionAvailable')"/>
<q-toolbar-title>
{{$t('msg.myAppName')}}
<div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
</q-toolbar-title>
<div v-if="isAdmin">
<q-btn flat dense round aria-label="">
<q-icon :class="clCloudUpload" name="cloud_upload"></q-icon>
</q-btn>
<q-btn flat dense round aria-label="">
<q-icon :class="clCloudUp_Indexeddb" name="arrow_upward"></q-icon>
</q-btn>
</div>
<q-btn
flat
dense
round
@click=""
aria-label="Connection"
>
<q-icon :name="iconConn" :class="clIconConn"></q-icon>
<q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
</q-btn>
<q-btn-dropdown
:label="langshort"
>
<q-list link>
<q-item v-for="langrec in selectOpLang" :key="langrec.value" v-close-overlay
@click.native="lang = langrec.value">
<q-item-side>
<img :src="langrec.image" class="flagimg">
</q-item-side>
<q-item-main>
<q-item-tile sublabel>{{langrec.label}}</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-btn-dropdown>
<!--
<message-popover></message-popover>
-->
<!--
<div class="right-itens">
<label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
</div>-->
</q-toolbar>
</q-layout-header>
<q-layout-drawer side="left"
v-model="leftDrawerOpen"
:content-class="['bg-grey-1', 'q-pa-sm']"
:content-style="{padding: '0px'}"
>
<drawer></drawer>
</q-layout-drawer>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import drawer from '../layouts/drawer/drawer.vue'
import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
import { GlobalStore, UserStore } from '@modules'
import { tools } from '../store/Modules/tools'
import QIcon from "quasar-framework/src/components/icon/QIcon"
import { StateConnection } from "../model"
import { Watch } from "vue-property-decorator"
import QField from "quasar-framework/src/components/field/QField"
@Component({
components: {
QField,
QIcon,
drawer,
messagePopover,
}
})
export default class Header extends Vue {
public $t
public $v
public $q
public isUserNotAuth: boolean = false
public iconConn: string = 'wifi'
public clIconConn: string = 'clIconOnline'
public strConn: string = ''
public langshort: string = ''
public clCloudUpload: string = ''
public clCloudDownload: string = ''
public clCloudUp_Indexeddb: string = ''
public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
get conn_changed() {
return GlobalStore.state.stateConnection
}
get isAdmin() {
return UserStore.state.isAdmin
}
get conndata_changed() {
return GlobalStore.state.connData
}
@Watch('GlobalStore.state.stateConnection', { immediate: true, deep: true })
changeconn(value: string, oldValue: string) {
this.strConn = value
// this.$q.notify({
// color : 'primary',
// icon: 'wifi',
// message: "CAMBIATOO! " + value
// })
}
@Watch('conndata_changed', { immediate: true, deep: true })
changeconnData(value: any, oldValue: any) {
// console.log('CHANGED GlobalStore.state.connData', value)
this.clCloudUpload = (value.uploading_server === 1) ? "clCloudUpload send" : "clCloudUpload"
this.clCloudUpload = (value.downloading_server === 1) ? "clCloudUpload receive" : "clCloudUpload"
this.clCloudUp_Indexeddb = (value.uploading_indexeddb === 1) ? "clIndexeddb send" : "clIndexeddb"
this.clCloudUp_Indexeddb = (value.downloading_indexeddb === 1) ? "clIndexeddb receive" : "clIndexeddb"
this.clCloudUpload = (value.uploading_server === -1) ? "clCloudUpload error" : this.clCloudUpload
this.clCloudUpload = (value.downloading_server === -1) ? "clCloudUpload error" : this.clCloudDownload
this.clCloudUp_Indexeddb = (value.uploading_indexeddb === -1) ? "clIndexeddb error" : this.clCloudUp_Indexeddb
this.clCloudUp_Indexeddb = (value.downloading_indexeddb === -1) ? "clIndexeddb error" : this.clCloudDown_Indexeddb
// console.log('clCloudUpload', this.clCloudUpload)
// console.log('clCloudDownload', this.clCloudDownload)
// console.log('clCloudUp_Indexeddb', this.clCloudUp_Indexeddb)
// console.log('value.downloading_indexeddb', value.downloading_indexeddb)
// console.log('value.uploading_server', value.uploading_server)
}
@Watch('conn_changed', { immediate: true, deep: true })
changeconn_changed(value: string, oldValue: string) {
if (value != oldValue) {
// console.log('SSSSSSSS: ', value, oldValue)
const color = (value === 'online') ? 'positive' : 'warning'
if (oldValue !== undefined) {
this.$q.notify({
color,
icon: 'wifi',
message: this.$t('connection') + ` ${value}`
})
}
this.changeIconConn()
}
}
get isNewVersionAvailable() {
console.log('______________ isNewVersionAvailable')
return GlobalStore.getters.isNewVersionAvailable
}
RefreshApp() {
// Unregister Service Worker
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
registration.unregister()
} })
window.location.reload(true)
}
changeIconConn() {
this.iconConn = GlobalStore.state.stateConnection === 'online' ? "wifi" : "wifi_off"
this.clIconConn = GlobalStore.state.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
}
public selectOpLang = [
{ label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
{ label: 'Español', icon: 'fa-flag-es', value: 'esEs', image: '../statics/images/es.png', short: 'ES' },
{ label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
// { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
]
// -------------------------------------------------------------------------
// QUASAR Example using event to open drawer from another component or page
// -------------------------------------------------------------------------
// (1) This code is inside layout file that have a drawer
// if this.leftDrawerOpen is true, drawer is displayed
// (2) Listen for an event in created
/* created(){
this.$root.$on("openLeftDrawer", this.openLeftDrawercb);
},
methods: {
openURL,
// (3) Define the callback in methods
openLeftDrawercb() {
this.leftDrawerOpen = !this.leftDrawerOpen;
}
}
// (4) In another component or page, emit the event!
// Call the method when clicking button etc.
methods: {
openLeftDrawer() {
this.$root.$emit("openLeftDrawer");
}
}
// -------------------------------------------------------------------------
*/
get leftDrawerOpen() {
return GlobalStore.state.leftDrawerOpen
}
set leftDrawerOpen(value) {
GlobalStore.state.leftDrawerOpen = value
localStorage.setItem(tools.localStorage.leftDrawerOpen, value.toString())
}
getAppVersion() {
// return "AA"
let strv = ''
if (process.env.DEV) {
strv = 'DEV '
} else if (process.env.TEST) {
strv = 'TEST '
}
return "[" + strv + process.env.APP_VERSION + "]"
}
get lang() {
return this.$q.i18n.lang
}
setshortlang(lang) {
for (let indrec in this.selectOpLang) {
if (this.selectOpLang[indrec].value === lang) {
// console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value)
this.langshort = this.selectOpLang[indrec].short
return
}
}
}
set lang(lang) {
console.log('set lang(' + this.$i18n.locale)
this.$i18n.locale = this.snakeToCamel(lang)
// this.$q.notify('IMPOSTA LANG= ' + this.$i18n.locale)
// console.log('IMPOSTA LANG= ' + this.$i18n.locale)
UserStore.mutations.setlang(this.$i18n.locale)
let mylangtopass = lang
this.setshortlang(mylangtopass)
if (mylangtopass === 'enUs')
mylangtopass = 'en-us'
if (mylangtopass === 'esEs')
mylangtopass = 'es'
// dynamic import, so loading on demand only
import(`quasar-framework/i18n/${mylangtopass}`).then(lang => {
this.$q.i18n.set(lang.default)
import(`src/statics/i18n`).then(function () {
})
})
}
getLangAtt() {
return this.$q.i18n.lang
}
setLangAtt(mylang) {
console.log('MYLL=', mylang)
this.$q.i18n.lang = mylang
}
beforeMount() {
// Estrai la Lang dal Localstorage
let my = this.getLangAtt()
// this.$q.notify('prima: ' + String(my))
let mylang = tools.getItemLS(tools.localStorage.lang)
if (mylang === '') {
if (navigator) {
mylang = navigator.language
console.log(`LANG2 NAVIGATOR ${mylang}`)
} else {
mylang = this.$q.i18n.lang
}
console.log('IMPOSTA LANGMY', mylang)
}
if (mylang !== '') {
if (mylang.toLowerCase() === 'enus')
mylang = 'enUs'
if ((mylang.toLowerCase() === 'eses') || (mylang.toLowerCase() === 'es-es'))
mylang = 'esEs'
if ((mylang.toLowerCase() === 'enus') || (mylang.toLowerCase() === 'en-us'))
mylang = 'enUs'
}
if (!mylang)
mylang = process.env.LANG_DEFAULT
this.setLangAtt(mylang)
this.setshortlang(mylang)
// this.$q.notify('Dopo: ' + String(this.getLangAtt()))
}
mounted() {
// Test this by running the code snippet below and then
// use the "TableOnlyView" checkbox in DevTools Network panel
let mythis = this
// console.log('Event LOAD')
if (window) {
window.addEventListener('load', function () {
// console.log('2) ENTERING Event LOAD')
function updateOnlineStatus(event) {
if (navigator.onLine) {
// console.log('EVENT ONLINE!')
// handle online status
GlobalStore.mutations.setStateConnection('online')
mythis.changeIconConn()
} else {
// console.log('EVENT OFFLINE!')
// handle offline status
GlobalStore.mutations.setStateConnection('offline')
mythis.changeIconConn()
}
}
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
})
}
}
public snakeToCamel(str) {
return str.replace(/(-\w)/g, m => {
return m[1].toUpperCase()
})
}
}
</script>
<style lang="scss">
.layout-padding {
padding: 1em 4em;
}
.item-content {
font-size: 0.8rem;
font-weight: 350;
}
@media screen and (max-width: 600px) {
.layout-padding {
padding: 1.5em .5em;
}
}
.fixed-left:hover {
cursor: ew-resize;
}
/*
@-webkit-keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
}
}
@keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
transform: translateY(-50%);
}
}
@-webkit-keyframes moveToRight {
from {
}
to {
-webkit-transform: translateX(100%);
}
}
@keyframes cartOut {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(1200px, 0px);
animation-timing-function: ease-out;
}
}
@-webkit-keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
}
}
@keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
}
}
@keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
*/
.drawer-closer .item-content {
margin-left: 20px !important;
}
.drawer-content .list-label {
line-height: 25px;
}
.drawer-content .item {
height: 25px;
}
.router-link-active .item-primary {
color: #027be3;
}
.q-picker-textfield .q-picker-textfield-label {
color: inherit !important;
}
.label-success .q-picker-textfield-label {
color: #4caf50 !important;
}
.label-error .q-picker-textfield-label {
color: #f44336 !important;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.label-success .q-picker-textfield:after, .label-error .q-picker-textfield:after {
content: "" !important;
}
#android-preview iframe {
margin-top: 64px;
width: 357px;
height: 590px;
background: #fff;
}
#ios-preview iframe {
margin-top: 64px;
width: 320px;
height: 590px;
background: #fff;
}
canvas {
width: 270px !important;
}
@media only screen and (min-width: 601px) {
.adv-form-one .timeline-badge {
right: auto !important;
left: auto !important;
}
.adv-form-one .timeline-content {
margin-left: 3.9rem;
}
.adv-form-one .timeline-item {
width: 100% !important;
}
.adv-form-one .timeline-title {
text-align: inherit !important;
margin-left: 3.9rem;
}
.timeline:before {
left: 1.6rem;
}
}
.adv-form-one .timeline-content .group .primary {
display: none !important;
}
.underline {
text-decoration: underline;
}
.toolbar {
min-height: 30px;
}
.right-itens a, .right-itens button {
margin-right: 10px;
}
.sel_lang {
padding: 5px;
color: white;
}
.fa-facebook:before {
content: url('../statics/icons/flag_it.svg');
}
.fa-flag-it:before {
content: url('../statics/icons/flag_it.svg');
}
.clIconOnline {
color: white;
}
.clIconOffline {
color: red;
}
.flagimg {
width: 30px;
height: 24px;
}
.clCloudUpload {
transition: all 1s ease-out;
color: initial;
&.send {
transition: all 1s ease-in;
background-color: lightgreen;
}
&.receive {
transition: all 1s ease-in;
background-color: yellow;
}
&.error {
transition: all 1s ease-in;
background-color: red;
}
}
.clIndexeddb {
transition: all 1s ease-out;
color: initial;
&.receive {
transition: all 1s ease-in;
background-color: yellow;
}
&.send {
transition: all 1s ease-in;
background-color: lightgreen;
}
&.error {
transition: all 1s ease-in;
background-color: red;
}
}
.btnNewVersHide {
display: none;
}
.btnNewVersShow {
display: inline-block;
}
</style>

287
src/components/Header/Header.scss Normal file
View File

@@ -0,0 +1,287 @@
.layout-padding {
padding: 1em 4em;
}
.item-content {
font-size: 0.8rem;
font-weight: 350;
}
@media screen and (max-width: 600px) {
.layout-padding {
padding: 1.5em .5em;
}
}
.fixed-left:hover {
cursor: ew-resize;
}
/*
@-webkit-keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveFromLeftFade {
from {
opacity: 0.3;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
}
}
@keyframes moveFromTopFade {
from {
opacity: 0.3;
-webkit-transform: translateY(0%);
transform: translateY(-50%);
}
}
@-webkit-keyframes moveToRight {
from {
}
to {
-webkit-transform: translateX(100%);
}
}
@keyframes cartOut {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(1200px, 0px);
animation-timing-function: ease-out;
}
}
@-webkit-keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
}
}
@keyframes moveToLeft {
from {
}
to {
opacity: .5;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
}
}
@keyframes moveToBottom {
from {
}
to {
opacity: .5;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
}
}
@keyframes moveFromRight {
from {
opacity: .7;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
*/
.drawer-closer .item-content {
margin-left: 20px !important;
}
.drawer-content .list-label {
line-height: 25px;
}
.drawer-content .item {
height: 25px;
}
.router-link-active .item-primary {
color: #027be3;
}
.q-picker-textfield .q-picker-textfield-label {
color: inherit !important;
}
.label-success .q-picker-textfield-label {
color: #4caf50 !important;
}
.label-error .q-picker-textfield-label {
color: #f44336 !important;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.label-success .q-picker-textfield:after, .label-error .q-picker-textfield:after {
content: "" !important;
}
#android-preview iframe {
margin-top: 64px;
width: 357px;
height: 590px;
background: #fff;
}
#ios-preview iframe {
margin-top: 64px;
width: 320px;
height: 590px;
background: #fff;
}
canvas {
width: 270px !important;
}
@media only screen and (min-width: 601px) {
.adv-form-one .timeline-badge {
right: auto !important;
left: auto !important;
}
.adv-form-one .timeline-content {
margin-left: 3.9rem;
}
.adv-form-one .timeline-item {
width: 100% !important;
}
.adv-form-one .timeline-title {
text-align: inherit !important;
margin-left: 3.9rem;
}
.timeline:before {
left: 1.6rem;
}
}
.adv-form-one .timeline-content .group .primary {
display: none !important;
}
.underline {
text-decoration: underline;
}
.toolbar {
min-height: 30px;
}
.right-itens a, .right-itens button {
margin-right: 10px;
}
.sel_lang {
padding: 5px;
color: white;
}
.fa-facebook:before {
content: url('../../statics/icons/flag_it.svg');
}
.fa-flag-it:before {
content: url('../../statics/icons/flag_it.svg');
}
.clIconOnline {
color: white;
}
.clIconOffline {
color: red;
}
.flagimg {
width: 30px;
height: 24px;
}
.clCloudUpload {
transition: all 1s ease-out;
color: initial;
&.send {
transition: all 1s ease-in;
background-color: lightgreen;
}
&.receive {
transition: all 1s ease-in;
background-color: yellow;
}
&.error {
transition: all 1s ease-in;
background-color: red;
}
}
.clIndexeddb {
transition: all 1s ease-out;
color: initial;
&.receive {
transition: all 1s ease-in;
background-color: yellow;
}
&.send {
transition: all 1s ease-in;
background-color: lightgreen;
}
&.error {
transition: all 1s ease-in;
background-color: red;
}
}
.btnNewVersHide {
display: none;
}
.btnNewVersShow {
display: inline-block;
}

309
src/components/Header/Header.ts Normal file
View File

@@ -0,0 +1,309 @@
import Vue from 'vue'
import Component from 'vue-class-component'
import drawer from '../../layouts/drawer/drawer.vue'
import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue'
import { GlobalStore, UserStore } from '@modules'
// import { StateConnection } from '../../model'
import { Watch } from 'vue-property-decorator'
import { tools } from '../../store/Modules/tools'
import Quasar from 'quasar'
@Component({
components: {
drawer,
messagePopover
}
})
export default class Header extends Vue {
public $t
public $v
public $q
public isUserNotAuth: boolean = false
public iconConn: string = 'wifi'
public clIconConn: string = 'clIconOnline'
public strConn: string = ''
public langshort: string = ''
public clCloudUpload: string = ''
public clCloudDownload: string = ''
public clCloudUp_Indexeddb: string = ''
public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
public selectOpLang = [
{ label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
{ label: 'Español', icon: 'fa-flag-es', value: 'es', image: '../statics/images/es.png', short: 'ES' },
{ label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
// { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
]
get conn_changed() {
return GlobalStore.state.stateConnection
}
get isAdmin() {
return UserStore.state.isAdmin
}
get conndata_changed() {
return GlobalStore.state.connData
}
get isNewVersionAvailable() {
return GlobalStore.getters.isNewVersionAvailable
}
// -------------------------------------------------------------------------
// QUASAR Example using event to open drawer from another component or page
// -------------------------------------------------------------------------
// (1) This code is inside layout file that have a drawer
// if this.leftDrawerOpen is true, drawer is displayed
// (2) Listen for an event in created
/* created(){
this.$root.$on("openLeftDrawer", this.openLeftDrawercb);
},
methods: {
openURL,
// (3) Define the callback in methods
openLeftDrawercb() {
this.leftDrawerOpen = !this.leftDrawerOpen;
}
}
// (4) In another component or page, emit the event!
// Call the method when clicking button etc.
methods: {
openLeftDrawer() {
this.$root.$emit("openLeftDrawer");
}
}
// -------------------------------------------------------------------------
*/
get leftDrawerOpen() {
return GlobalStore.state.leftDrawerOpen
}
set leftDrawerOpen(value) {
GlobalStore.state.leftDrawerOpen = value
localStorage.setItem(tools.localStorage.leftDrawerOpen, value.toString())
}
get lang() {
return this.$q.lang.isoName
}
set lang(lang) {
console.log('set lang(' + this.$i18n.locale)
this.$i18n.locale = this.snakeToCamel(lang)
// this.$q.notify('IMPOSTA LANG= ' + this.$i18n.locale)
// console.log('IMPOSTA LANG= ' + this.$i18n.locale)
UserStore.mutations.setlang(this.$i18n.locale)
let mylangtopass = lang
this.setshortlang(mylangtopass)
if (mylangtopass === 'enUs') {
mylangtopass = 'en-us'
}
if (mylangtopass === 'es') {
mylangtopass = 'es'
}
this.setLangAtt(mylangtopass)
}
@Watch('GlobalStore.state.stateConnection', { immediate: true, deep: true })
public changeconn(value: string, oldValue: string) {
this.strConn = value
// this.$q.notify({
// color : 'primary',
// icon: 'wifi',
// message: "CAMBIATOO! " + value
// })
}
@Watch('conndata_changed', { immediate: true, deep: true })
public changeconnData(value: any, oldValue: any) {
// console.log('CHANGED GlobalStore.state.connData', value)
this.clCloudUpload = (value.uploading_server === 1) ? 'clCloudUpload send' : 'clCloudUpload'
this.clCloudUpload = (value.downloading_server === 1) ? 'clCloudUpload receive' : 'clCloudUpload'
this.clCloudUp_Indexeddb = (value.uploading_indexeddb === 1) ? 'clIndexeddb send' : 'clIndexeddb'
this.clCloudUp_Indexeddb = (value.downloading_indexeddb === 1) ? 'clIndexeddb receive' : 'clIndexeddb'
this.clCloudUpload = (value.uploading_server === -1) ? 'clCloudUpload error' : this.clCloudUpload
this.clCloudUpload = (value.downloading_server === -1) ? 'clCloudUpload error' : this.clCloudDownload
this.clCloudUp_Indexeddb = (value.uploading_indexeddb === -1) ? 'clIndexeddb error' : this.clCloudUp_Indexeddb
this.clCloudUp_Indexeddb = (value.downloading_indexeddb === -1) ? 'clIndexeddb error' : this.clCloudDown_Indexeddb
// console.log('clCloudUpload', this.clCloudUpload)
// console.log('clCloudDownload', this.clCloudDownload)
// console.log('clCloudUp_Indexeddb', this.clCloudUp_Indexeddb)
// console.log('value.downloading_indexeddb', value.downloading_indexeddb)
// console.log('value.uploading_server', value.uploading_server)
}
@Watch('conn_changed', { immediate: true, deep: true })
public changeconn_changed(value: string, oldValue: string) {
if (value != oldValue) {
// console.log('SSSSSSSS: ', value, oldValue)
const color = (value === 'online') ? 'positive' : 'warning'
if (oldValue !== undefined) {
this.$q.notify({
color,
icon: 'wifi',
message: this.$t('connection') + ` ${value}`
})
}
this.changeIconConn()
}
}
public RefreshApp() {
// Unregister Service Worker
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for (const registration of registrations) {
registration.unregister()
}
})
window.location.reload(true)
}
public changeIconConn() {
this.iconConn = GlobalStore.state.stateConnection === 'online' ? 'wifi' : 'wifi_off'
this.clIconConn = GlobalStore.state.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
}
public getAppVersion() {
// return "AA"
let strv = ''
if (process.env.DEV) {
strv = 'DEV '
} else if (process.env.TEST) {
strv = 'TEST '
}
return '[' + strv + process.env.APP_VERSION + ']'
}
public setshortlang(lang) {
for (const indrec in this.selectOpLang) {
if (this.selectOpLang[indrec].value === lang) {
// console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value)
this.langshort = this.selectOpLang[indrec].short
return
}
}
}
public getLangAtt() {
return this.$q.lang.isoName
}
public setLangAtt(mylang) {
console.log('MYLL=', mylang)
console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)
// dynamic import, so loading on demand only
import(`quasar/lang/${mylang}`).then((lang) => {
Quasar.lang.set(lang.default)
import(`../../statics/i18n`).then(() => {
console.log('MY LANG DOPO=', this.$q.lang.isoName)
})
})
// this.$q.lang.set(mylang)
}
public beforeMount() {
// Estrai la Lang dal Localstorage
console.log('this.$q.i18n=', this.$q.i18n, 'this.$q.getLocale()=', this.$q.lang.isoName)
const my = this.getLangAtt()
this.$q.notify('prima: ' + String(my))
let mylang = tools.getItemLS(tools.localStorage.lang)
if (mylang === '') {
if (navigator) {
mylang = navigator.language
console.log(`LANG2 NAVIGATOR ${mylang}`)
} else {
mylang = this.$q.lang.isoName
}
console.log('IMPOSTA LANGMY', mylang)
}
if (mylang !== '') {
if (mylang.toLowerCase() === 'enus') {
mylang = 'enUs'
}
if ((mylang.toLowerCase() === 'es') || (mylang.toLowerCase() === 'es-es')) {
mylang = 'es'
}
if ((mylang.toLowerCase() === 'enus') || (mylang.toLowerCase() === 'en-us')) {
mylang = 'enUs'
}
}
if (!mylang) {
mylang = process.env.LANG_DEFAULT
}
this.setLangAtt(mylang)
this.setshortlang(mylang)
// this.$q.notify('Dopo: ' + String(this.getLangAtt()))
}
public mounted() {
// Test this by running the code snippet below and then
// use the "TableOnlyView" checkbox in DevTools Network panel
const mythis = this
// console.log('Event LOAD')
if (window) {
window.addEventListener('load', function() {
// console.log('2) ENTERING Event LOAD')
function updateOnlineStatus(event) {
if (navigator.onLine) {
// console.log('EVENT ONLINE!')
// handle online status
GlobalStore.mutations.setStateConnection('online')
mythis.changeIconConn()
} else {
// console.log('EVENT OFFLINE!')
// handle offline status
GlobalStore.mutations.setStateConnection('offline')
mythis.changeIconConn()
}
}
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
})
}
}
public snakeToCamel(str) {
return str.replace(/(-\w)/g, (m) => {
return m[1].toUpperCase()
})
}
}

124
src/components/Header/Header.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<div>
<!--
<router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
<button>
<i>arrow_back</i>
</button>
</router-link>
-->
<q-header elevated>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
class="toolbar"
>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu"
>
<q-icon name="menu"/>
</q-btn>
<div v-if="$q.platform.is.desktop">
<!--I'm only rendered on desktop!-->
</div>
<div v-if="$q.platform.is.mobile">
<!--I'm only rendered on mobile!-->
</div>
<div v-if="$q.platform.is.electron">
<!--I'm only rendered on Electron!-->
</div>
<q-btn id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
class="btnNewVersShow" @click="RefreshApp" :label="$t('notification.newVersionAvailable')"/>
<q-toolbar-title>
{{$t('msg.myAppName')}}
<div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
</q-toolbar-title>
<div v-if="isAdmin">
<q-btn flat dense round aria-label="">
<q-icon :class="clCloudUpload" name="cloud_upload"></q-icon>
</q-btn>
<q-btn flat dense round aria-label="">
<q-icon :class="clCloudUp_Indexeddb" name="arrow_upward"></q-icon>
</q-btn>
</div>
<q-btn
flat
dense
round
@click=""
aria-label="Connection"
>
<q-icon :name="iconConn" :class="clIconConn"></q-icon>
<q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
</q-btn>
<q-btn-dropdown
stretch
flat
:label="langshort"
>
<q-list bordered>
<q-item clickable v-ripple v-for="langrec in selectOpLang" :key="langrec.value"
@click.native="lang = langrec.value">
<q-item-section avatar>
<img :src="langrec.image" class="flagimg">
</q-item-section>
<q-item-section>
{{langrec.label}}
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<!--
<message-popover></message-popover>
-->
<!--
<div class="right-itens">
<label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
</div>-->
</q-toolbar>
</q-header>
<q-drawer side="left"
v-model="leftDrawerOpen"
:content-class="['bg-grey-1', 'q-pa-sm']"
:content-style="{padding: '0px'}"
>
<drawer></drawer>
</q-drawer>
</div>
</template>
<script lang="ts" src="./Header.ts">
</script>
<style lang="scss" scoped>
@import './Header.scss';
</style>

1
src/components/Header/index.ts Normal file
View File

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

2
src/components/todos/SingleTodo/SingleTodo.scss
View File

@@ -121,7 +121,7 @@ $heightdescr: 20px;
//visibility: hidden;
}
//.q-popover.animate-scale {
//.q-menu.animate-scale {
// animation: none;
//}

145
src/components/todos/SingleTodo/SingleTodo.ts
View File

@@ -1,22 +1,19 @@
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '../../../store/Modules/tools'
import { UserStore } from '@modules'
import { tools } from '../../../store/Modules/tools'
import { ITodo } from '../../../model/index'
import { SubMenus } from '../SubMenus'
import $ from 'jquery'
// import { debounce } from '../../../classes/debounce'
import { date } from 'quasar'
import { askConfirm } from '../../../classes/routinestd'
@Component({
name: 'SingleTodo',
components: { SubMenus }
components: { SubMenus },
name: 'SingleTodo'
})
export default class SingleTodo extends Vue {
public selectPriority: [] = []
@@ -43,20 +40,19 @@ export default class SingleTodo extends Vue {
public clButtPopover: string = 'pos-item-popover'
public numpos: number = 0
$q: any
@Prop({ required: true }) itemtodo: ITodo
public $q: any
@Prop({ required: true }) public itemtodo: ITodo
// @Watch('itemtodo.completed') valueChanged() {
// this.watchupdate('completed')
// }
@Watch('itemtodo.enableExpiring') valueChanged4() {
@Watch('itemtodo.enableExpiring') public valueChanged4() {
this.watchupdate('enableExpiring')
}
@Watch('itemtodo.expiring_at') valueChanged2() {
@Watch('itemtodo.expiring_at') public valueChanged2() {
this.watchupdate('expiring_at')
}
@@ -64,39 +60,40 @@ export default class SingleTodo extends Vue {
// this.watchupdate('priority')
// }
@Watch('itemtodo.descr') valueChanged5() {
@Watch('itemtodo.descr') public valueChanged5() {
this.precDescr = this.itemtodo.descr
}
@Watch('itemtodo.progress') valueChanged6() {
@Watch('itemtodo.progress') public valueChanged6() {
this.updateClasses()
}
dateToYYYYMMDD(date) {
/*
public dateToYYYYMMDD(date) {
// may have timezone caveats https://stackoverflow.com/a/29774197/1850609
return date && date.toISOString().split('T')[0]
}
*/
// Computed:
get isSel() {
return this.sel
}
isTodo() {
public isTodo() {
return this.isTodoByElem(this.itemtodo)
}
isTodoByElem(elem) {
public isTodoByElem(elem) {
return elem.descr.slice(-1) !== ':'
}
watchupdate(field = '') {
public watchupdate(field = '') {
this.$emit('eventupdate', {myitem: this.itemtodo, field } )
this.updateicon()
}
updateClasses() {
public updateClasses() {
// this.classCompleted = 'completed-item'
this.classCompleted = 'completed-item-popover'
this.classDescr = 'flex-item div_descr show donotdrag'
@@ -146,8 +143,6 @@ export default class SingleTodo extends Vue {
this.clButtPopover += ' pos-item-popover_cursor'
}
// if (this.inEdit) {
// this.classDescr += ' hide'
// this.classDescrEdit += ' show'
@@ -162,8 +157,9 @@ export default class SingleTodo extends Vue {
// console.log('classDescr', this.classDescr)
// console.log('UserStore.state.lang', UserStore.state.lang)
if (this.isTodo())
if (this.isTodo()) {
this.menuPopupTodo = tools.menuPopupTodo[UserStore.state.lang]
}
else {
this.menuPopupTodo = []
this.menuPopupTodo.push(tools.menuPopupTodo[UserStore.state.lang][tools.INDEX_MENU_DELETE])
@@ -171,7 +167,11 @@ export default class SingleTodo extends Vue {
}
created() {
public getstrDate(mytimestamp) {
return date.formatDate(mytimestamp, 'DD-MM-YY')
}
public created() {
this.precDescr = this.itemtodo.descr
this.updateicon()
@@ -179,14 +179,13 @@ export default class SingleTodo extends Vue {
this.selectPriority = tools.selectPriority[UserStore.state.lang]
}
getClassRow() {
public getClassRow() {
return 'row flex-container2 ' + this.classRow
}
clickRiga(clickmenu: boolean = false) {
public clickRiga(clickmenu: boolean = false) {
// console.log('CLICK RIGA ************')
if (!this.sel) {
@@ -202,7 +201,7 @@ export default class SingleTodo extends Vue {
}
}
selectRiga() {
public selectRiga() {
// console.log('selectRiga', this.itemtodo.descr)
this.sel = true
this.classRow = 'rowselected'
@@ -210,7 +209,7 @@ export default class SingleTodo extends Vue {
// console.log('FINE selectRiga', this.itemtodo.descr)
}
deselectRiga() {
public deselectRiga() {
// console.log('DeselectRiga', this.itemtodo.descr)
this.sel = false
this.classRow = ''
@@ -218,12 +217,12 @@ export default class SingleTodo extends Vue {
this.updateClasses()
}
deselectAndExitEdit() {
public deselectAndExitEdit() {
this.deselectRiga()
this.exitEdit()
}
mouseUp() {
public mouseUp() {
if (!this.inEdit) {
if (this.sel) {
this.selectRiga()
@@ -233,44 +232,50 @@ export default class SingleTodo extends Vue {
}
}
clickRow() {
public clickRow() {
this.clickRiga()
}
editTodo() {
public editTodo() {
if (!this.itemtodo.completed) {
// console.log('INIZIO - editTodo')
this.$emit('click')
this.precDescr = this.itemtodo.descr
this.inEdit = true
if (!this.sel)
if (!this.sel) {
this.selectRiga()
else
}
else {
this.updateClasses()
}
this.faiFocus('inputdescr')
}
// console.log('FINE - editTodo')
}
faiFocus(elem, isparent: boolean = false) {
public faiFocus(elem, isparent: boolean = false) {
setTimeout(() => {
let theField = null
if (isparent)
theField = <HTMLInputElement>this.$parent.$parent.$parent.$parent.$refs[elem]
else
theField = <HTMLInputElement>this.$refs[elem]
if (isparent) {
theField = this.$parent.$parent.$parent.$parent.$refs[elem] as HTMLInputElement
}
else {
theField = this.$refs[elem] as HTMLInputElement
}
if (theField !== undefined)
if (theField !== undefined) {
theField.focus()
}
// console.log('focus()')
}, 100)
}
exitEdit(singola: boolean = false) {
public exitEdit(singola: boolean = false) {
if (this.inEdit) {
if (this.precDescr !== this.itemtodo.descr)
if (this.precDescr !== this.itemtodo.descr) {
this.updateTodo()
}
// console.log('exitEdit')
this.inEdit = false
this.updateClasses
@@ -278,8 +283,7 @@ export default class SingleTodo extends Vue {
}
}
keyDownRow(e) {
public keyDownRow(e) {
console.log('keyDownRow')
// Delete Key or Backspage
if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
@@ -294,7 +298,7 @@ export default class SingleTodo extends Vue {
}
keyDownArea(e) {
public keyDownArea(e) {
console.log('keyDownArea')
/*
if ((e.key === 'ArrowUp') && !e.shiftKey) {
@@ -342,9 +346,10 @@ export default class SingleTodo extends Vue {
}
updateTodo() {
if (this.itemtodo.descr === this.precDescr)
public updateTodo() {
if (this.itemtodo.descr === this.precDescr) {
return
}
this.itemtodo.descr = this.precDescr
console.log('updateTodo', this.precDescr, this.itemtodo.descr)
@@ -357,7 +362,7 @@ export default class SingleTodo extends Vue {
this.updateClasses()
}
setCompleted() {
public setCompleted() {
// console.log('setCompleted')
this.itemtodo.completed = !this.itemtodo.completed
@@ -368,41 +373,44 @@ export default class SingleTodo extends Vue {
this.deselectAndExitEdit()
}
updatedata(field: string) {
public updatedata(field: string) {
// const myitem = tools.jsonCopy(this.itemtodo)
console.log('calling this.$emit(eventupdate)', this.itemtodo)
this.$emit('eventupdate', { myitem: this.itemtodo, field } )
}
updateicon() {
public updateicon() {
// console.log('updateicon')
if (this.itemtodo.completed)
if (this.itemtodo.completed) {
this.iconCompleted = 'check_circle'
else
}
else {
this.iconCompleted = 'check_circle_outline'
}
if (this.itemtodo.priority === tools.Todos.PRIORITY_HIGH)
this.iconPriority = 'expand_less' // expand_less
else if (this.itemtodo.priority === tools.Todos.PRIORITY_NORMAL)
if (this.itemtodo.priority === tools.Todos.PRIORITY_HIGH) {
this.iconPriority = 'expand_less'
} // expand_less
else if (this.itemtodo.priority === tools.Todos.PRIORITY_NORMAL) {
this.iconPriority = 'remove'
else if (this.itemtodo.priority === tools.Todos.PRIORITY_LOW)
this.iconPriority = 'expand_more' // expand_more
}
else if (this.itemtodo.priority === tools.Todos.PRIORITY_LOW) {
this.iconPriority = 'expand_more'
} // expand_more
this.updateClasses()
}
removeitem(id) {
public removeitem(id) {
this.$emit('deleteItem', id)
}
enableExpiring() {
public enableExpiring() {
this.itemtodo.enableExpiring = !this.itemtodo.enableExpiring
}
async clickMenu(action) {
public async clickMenu(action) {
console.log('click menu: ', action)
if (action === tools.MenuAction.DELETE) {
return await this.askConfirmDelete()
@@ -418,7 +426,7 @@ export default class SingleTodo extends Vue {
}
setPriority(newpriority) {
public setPriority(newpriority) {
if (this.itemtodo.priority !== newpriority) {
this.itemtodo.priority = newpriority
@@ -431,21 +439,20 @@ export default class SingleTodo extends Vue {
// this.$q.notify('setPriority: ' + elem)
}
async askConfirmDelete() {
public async askConfirmDelete() {
const deletestr = this.$t('dialog.delete')
const cancelstr = this.$t('dialog.cancel')
let msg = this.$t('dialog.msg.deleteTask', {'mytodo' : this.itemtodo.descr })
const msg = this.$t('dialog.msg.deleteTask', {mytodo : this.itemtodo.descr })
await askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), msg, deletestr, cancelstr)
.then(ris => {
.then((ris) => {
console.log('ris', ris)
if (ris) {
this.removeitem(this.itemtodo._id)
}
}).catch(err => {
}).catch((err) => {
})
}
}

28
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -38,12 +38,13 @@
<!--</div>-->
<div v-if="isTodo() && (percentageProgress > 0) " class="flex-item progress-item shadow-1">
<q-progress
<q-linear-progress
stripe
:percentage="percentageProgress"
class="progrbar-item"
:color="colProgress"
>
</q-progress>
</q-linear-progress>
<div :class="percProgress">
{{percentageProgress}}%
<q-popup-edit v-model="itemtodo.progress" title="Progress" buttons class="editProgress">
@@ -55,23 +56,26 @@
<div v-if="itemtodo.enableExpiring" :class="classExpiring">
<q-datetime
type="date"
v-model="itemtodo.expiring_at"
class="myexpired"
format="DD/MM/YY"
@change="val => { model = val }">
</q-datetime>
{{getstrDate(itemtodo.expiring_at)}}
<q-popup-edit v-model="itemtodo.expiring_at" title="Edit" buttons class="">
<q-input
filled
v-model="itemtodo.expiring_at"
type="date"
class="myexpired"
format="DD/MM/YY"
@change="val => { model = val }">
</q-input>
</q-popup-edit>
</div>
<div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
<q-btn push
:class="clButtPopover"
icon="menu">
<q-popover id="popmenu" v-if="true" self="top right">
<q-menu id="popmenu" v-if="true" self="top right">
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu"
@setPriority="setPriority"></SubMenus>
</q-popover>
</q-menu>
</q-btn>
</div>

108
src/components/todos/SubMenus/SubMenus.vue
View File

@@ -2,69 +2,97 @@
<div>
<q-list link separator no-border class="todo-menu">
<div v-for="field in menuPopupTodo" :key="field.value">
<q-item v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
<q-item clickable v-ripple v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
@click.native="clickMenu(field.value)">
<q-item-side :icon="field.icon"/>
<q-item-section avatar>
<q-icon :name="field.icon"/>
</q-item-section>
<q-item-main v-if="field.value !== 120">
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
</q-item-main>
<q-item-section v-if="field.value !== 120" label class="item-menu">{{field.label}}</q-item-section>
<q-item-side v-if="field.value === 101">
<q-item-section side top v-if="field.value === 101">
<q-checkbox v-model="itemtodo.enableExpiring"/>
</q-item-side>
<q-item-side v-if="field.value === 110">
</q-item-section>
<q-item-section v-if="field.value === 110">
<q-checkbox v-model="itemtodo.completed"/>
</q-item-side>
</q-item-section>
<q-item-main v-if="field.value === 120">
<!--<q-item tag="label" v-ripple>-->
<!--<q-item-section side top>-->
<!--<q-checkbox v-model="check1" />-->
<!--</q-item-section>-->
<!--<q-item-section>-->
<!--<q-item-label>Notifications</q-item-label>-->
<!--<q-item-label caption>-->
<!--Notify me about updates to apps or games that I downloaded-->
<!--</q-item-label>-->
<!--</q-item-section>-->
<!--</q-item>-->
<!--<q-item tag="label" v-ripple>-->
<!--<q-item-section side top>-->
<!--<q-checkbox v-model="check2" />-->
<!--</q-item-section>-->
<!--<q-item-section>-->
<!--<q-item-label>Sound</q-item-label>-->
<!--<q-item-label caption>-->
<!--Auto-update apps at anytime. Data charges may apply-->
<!--</q-item-label>-->
<!--</q-item-section>-->
<!--</q-item>-->
<q-item-section v-if="field.value === 120">
<q-slider :class="$parent.menuProgress" v-model="itemtodo.progress" :min="0" :max="100"
:step="5"/>
</q-item-main>
<q-item-side v-if="field.value === 120" >
</q-item-section>
<q-item-section v-if="field.value === 120">
<div>
<q-input v-model="itemtodo.progress"
class="menuInputProgress"
type="number"
suffix="%"
@change="val => { model = val }"
@keydown="KeychangeProgress"
/>
<q-input v-model="itemtodo.progress"
class="menuInputProgress"
type="number"
suffix="%"
@change="val => { model = val }"
@keydown="KeychangeProgress"
/>
</div>
</q-item-side>
<!--<q-item-side right v-if="field.value === 120">-->
<!--<div :class="$parent.percProgress">-->
<!--{{$parent.percentageProgress}}%-->
<!--</div>-->
<!--</q-item-side>-->
</q-item-section>
</q-item>
<q-item v-if="(field.value === 100)" :icon="field.icon" v-close-overlay
<q-item v-if="(field.value === 100)" :icon="field.icon"
@click.native="clickMenu(field.value)">
<q-item-side :icon="field.icon"/>
<q-item-main label class="item-menu">{{field.label}}</q-item-main>
<q-item-section avatar>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section class="item-menu">
{{field.label}}
</q-item-section>
</q-item>
<q-item v-if="(field.value === 130)" :icon="field.icon"
<q-item clickable v-if="(field.value === 130)" :icon="field.icon"
@click.native="clickMenu(field.value)">
<q-item-side :icon="$parent.iconPriority"/>
<q-item-section avatar>
<q-icon :name="$parent.iconPriority" inverted color="primary"/>
</q-item-section>
<q-item-main>
<q-item-section>
<q-btn-dropdown ref="dropdown_priority" flat :label="field.label"
>
<q-list link>
<q-item v-close-overlay v-for="field in selectPriority" :key="field.value"
<q-list bordered>
<q-item clickable v-ripple v-for="field in selectPriority" :key="field.value"
@click.native="setPriority(field.value)">
<q-item-side :icon="field.icon" inverted color="primary"/>
<q-item-main>
<q-item-tile label>{{field.label}}</q-item-tile>
</q-item-main>
<q-item-section avatar>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>
{{field.label}}
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</q-item-main>
</q-item-section>
</q-item>
</div>

16
src/components/todos/todo/todo.vue
View File

@@ -7,14 +7,14 @@
<div class="flex-item">
<q-btn push
icon="settings">
<q-popover id="popconfig" self="top right">
<q-menu id="popconfig" self="top right">
<q-list link separator no-border class="todo-menu">
<div v-for="field in menuPopupConfigTodo" :key="field.value">
<q-item :icon="field.icon"
@click.native="">
<q-item-side :icon="field.icon"/>
<q-item-section :icon="field.icon"/>
<q-item-main v-if="showTask(field.value)">
<q-item-label v-if="showTask(field.value)">
<q-select
radio
@@ -22,14 +22,14 @@
:float-label="field.label"
v-model="showtype"
:options="listOptionShowTask"/>
</q-item-main>
<q-item-main v-else>
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
</q-item-main>
</q-item-label>
<q-item-label v-else>
<q-item-section label class="item-menu">{{field.label}}</q-item-section>
</q-item-label>
</q-item>
</div>
</q-list>
</q-popover>
</q-menu>
</q-btn>
</div>
</div>