Popupmenu Todo:
- Show Task Completed
This commit is contained in:
Paolo Arena
@@ -71,6 +71,7 @@
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.titleSubMenu {
|
||||
@@ -102,3 +103,8 @@
|
||||
min-height: 50px;
|
||||
background-color: #9f9f9f;
|
||||
}
|
||||
|
||||
.menuInputCompleted > div:nth-child(2) > div > input {
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
@@ -6,18 +6,26 @@ import { ITodo, ITodosState, IDrag, IGlobalState, ICfgServer } from '@src/model'
|
||||
|
||||
import { tools } from '../../../store/Modules/tools'
|
||||
|
||||
import { Todos } from '@store'
|
||||
import { GlobalStore, Todos } from '@store'
|
||||
import { UserStore } from '@store'
|
||||
|
||||
// _.cloneDeep( Per clonare un oggetto
|
||||
|
||||
import { Getter } from 'vuex-class'
|
||||
import { Getter, State, Mutation } from 'vuex-class'
|
||||
import { costanti } from '@src/store/Modules/costanti'
|
||||
const namespace: string = 'Todos'
|
||||
|
||||
|
||||
@Component({
|
||||
|
||||
components: { SingleTodo }
|
||||
components: { SingleTodo },
|
||||
filters: {
|
||||
capitalize: function (value) {
|
||||
if (!value) return ''
|
||||
value = value.toString()
|
||||
return value.charAt(0).toUpperCase() + value.slice(1)
|
||||
}
|
||||
}
|
||||
})
|
||||
export default class Todo extends Vue {
|
||||
$q: any
|
||||
@@ -37,6 +45,7 @@ export default class Todo extends Vue {
|
||||
public actualMaxPosition: number = 15
|
||||
public scrollable = true
|
||||
public categoryAtt: string = ''
|
||||
// public showtype: number = Todos.state.showtype
|
||||
|
||||
$refs: {
|
||||
single: SingleTodo[]
|
||||
@@ -52,10 +61,41 @@ export default class Todo extends Vue {
|
||||
this.categoryAtt = this.$route.params.category
|
||||
}
|
||||
|
||||
get showtype () {
|
||||
return Todos.state.showtype
|
||||
}
|
||||
|
||||
set showtype (value) {
|
||||
// console.log('showtype', value)
|
||||
GlobalStore.mutations.setShowType(value)
|
||||
}
|
||||
|
||||
// clickaggshowtype () {
|
||||
// console.log('1B) clickaggshowtype Todos.state.showtype=', Todos.state.showtype)
|
||||
// Todos.state.showtype = costanti.ShowTypeTask.SHOW_ALL
|
||||
// console.log('2B) Dopo: showtype=', this.showtype)
|
||||
// }
|
||||
|
||||
|
||||
loadval (e) {
|
||||
console.log('1) loadval, showtype=', this.showtype)
|
||||
this.showtype = Todos.state.showtype
|
||||
console.log('2) Dopo: showtype=', this.showtype)
|
||||
}
|
||||
|
||||
|
||||
get doneTodosCount() {
|
||||
return Todos.getters.doneTodosCount(this.categoryAtt)
|
||||
}
|
||||
|
||||
get menuPopupConfigTodo() {
|
||||
return tools.menuPopupConfigTodo[UserStore.state.lang]
|
||||
}
|
||||
|
||||
get listOptionShowTask() {
|
||||
return tools.listOptionShowTask[UserStore.state.lang]
|
||||
}
|
||||
|
||||
get TodosCount() {
|
||||
return Todos.getters.TodosCount(this.categoryAtt)
|
||||
}
|
||||
@@ -94,6 +134,10 @@ export default class Todo extends Vue {
|
||||
return 'row' + id
|
||||
}
|
||||
|
||||
showTask(field_value) {
|
||||
return field_value === tools.MenuAction.SHOW_TASK
|
||||
}
|
||||
|
||||
onStart() {
|
||||
|
||||
this.startpos = 0
|
||||
@@ -295,6 +339,7 @@ export default class Todo extends Vue {
|
||||
}
|
||||
|
||||
async load() {
|
||||
console.log('LOAD TODO....')
|
||||
this.categoryAtt = this.$route.params.category
|
||||
|
||||
// Set last category selected
|
||||
@@ -343,6 +388,7 @@ export default class Todo extends Vue {
|
||||
}
|
||||
|
||||
mydeleteItem(idobj: string) {
|
||||
console.log('mydeleteItem', idobj)
|
||||
return Todos.actions.deleteItem({ cat: this.categoryAtt, idobj })
|
||||
}
|
||||
|
||||
|
||||
@@ -3,8 +3,50 @@
|
||||
<div class="panel">
|
||||
<p class="caption"></p>
|
||||
|
||||
showtype = {{showtype}}
|
||||
<div class="divtitlecat">
|
||||
<div class="categorytitle">{{ categoryAtt }}</div>
|
||||
<div class="flex-container">
|
||||
<div class="flex-item categorytitle">{{categoryAtt | capitalize}}</div>
|
||||
<div class="flex-item">
|
||||
<q-btn push
|
||||
icon="settings">
|
||||
<q-popover 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-main v-if="showTask(field.value)">
|
||||
|
||||
<q-select
|
||||
radio
|
||||
color="secondary"
|
||||
: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-side>-->
|
||||
<!--<div>-->
|
||||
<!--<q-input v-model="itemtodo.progress"-->
|
||||
<!--class="menuInputCompleted"-->
|
||||
<!--type="number"-->
|
||||
<!--suffix=""-->
|
||||
<!--@change="val => { model = val }"-->
|
||||
<!-->-->
|
||||
<!--</div>-->
|
||||
<!--</q-item-side>-->
|
||||
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-popover>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input ref="insertTask" v-model="todotop" inverted :float-label="$t('todo.inserttop')"
|
||||
@@ -21,24 +63,25 @@
|
||||
<!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >-->
|
||||
|
||||
<!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
|
||||
<div class="container" v-dragula="todos_dacompletare(categoryAtt)" drake="first">
|
||||
<div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in todos_dacompletare(categoryAtt)"
|
||||
:key="mytodo._id" class="myitemdrag">
|
||||
<div class="container" v-dragula="todos_dacompletare(categoryAtt)" drake="first">
|
||||
<div :id="getmyid(mytodo._id)" :index="index"
|
||||
v-for="(mytodo, index) in todos_dacompletare(categoryAtt)"
|
||||
:key="mytodo._id" class="myitemdrag">
|
||||
|
||||
<div v-if="(prior !== mytodo.priority) && !mytodo.completed"
|
||||
:class="getTitlePriority(mytodo.priority)">
|
||||
<label>{{getPriorityByInd(mytodo.priority)}}</label>
|
||||
</div>
|
||||
<SingleTodo ref="single" @deleteItem="mydeleteItem" @eventupdate="updateitem"
|
||||
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
|
||||
:itemtodo='mytodo'/>
|
||||
<div v-if="(prior !== mytodo.priority) && !mytodo.completed"
|
||||
:class="getTitlePriority(mytodo.priority)">
|
||||
<label>{{getPriorityByInd(mytodo.priority)}}</label>
|
||||
</div>
|
||||
<SingleTodo ref="single" @deleteItem="mydeleteItem(mytodo._id)" @eventupdate="updateitem"
|
||||
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
|
||||
:itemtodo='mytodo'/>
|
||||
|
||||
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
|
||||
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
|
||||
|
||||
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
|
||||
</div>
|
||||
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</q-infinite-scroll>-->
|
||||
|
||||
<div v-if="doneTodosCount > 0" class="titleCompleted">
|
||||
@@ -46,38 +89,40 @@
|
||||
</div>
|
||||
|
||||
<!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
|
||||
<div class="container" v-dragula="todos_completati(categoryAtt)" drake="second">
|
||||
<div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in todos_completati(categoryAtt)"
|
||||
:key="mytodo._id" class="myitemdrag">
|
||||
<div class="container" v-dragula="todos_completati(categoryAtt)" drake="second">
|
||||
<div :id="getmyid(mytodo._id)" :index="index"
|
||||
v-for="(mytodo, index) in todos_completati(categoryAtt)"
|
||||
:key="mytodo._id" class="myitemdrag">
|
||||
|
||||
<SingleTodo ref="single" @deleteItem="deleteItem(mytodo._id)" @eventupdate="updateitem"
|
||||
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
|
||||
:itemtodo='mytodo'/>
|
||||
<SingleTodo ref="single" @deleteItem="mydeleteItem(mytodo._id)" @eventupdate="updateitem"
|
||||
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
|
||||
:itemtodo='mytodo'/>
|
||||
|
||||
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
|
||||
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
|
||||
|
||||
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
|
||||
</div>
|
||||
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</q-infinite-scroll>-->
|
||||
<!--</transition-group>-->
|
||||
<!--</draggable>-->
|
||||
</div>
|
||||
|
||||
|
||||
<q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom" inverted :float-label="$t('todo.insertbottom')"
|
||||
<q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom" inverted
|
||||
:float-label="$t('todo.insertbottom')"
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertTodo(false)"/>
|
||||
|
||||
<br>
|
||||
|
||||
<!--<!–-->
|
||||
<!--<!–<div class="flex-item btn-item">–>-->
|
||||
<!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
|
||||
<!--<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>-->
|
||||
<!--<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>-->
|
||||
<!--<!–</div>–>-->
|
||||
<!--
|
||||
<div class="flex-item btn-item">
|
||||
<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>
|
||||
<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>
|
||||
<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>
|
||||
<!--</div>-->
|
||||
|
||||
<!--<!–<q-input v-model="testPao" float-label="testPao"/>–>-->
|
||||
<!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
|
||||
@@ -89,7 +134,9 @@
|
||||
<!--<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>-->
|
||||
<!--–>-->
|
||||
<!--–>-->
|
||||
|
||||
<!--<q-btn class="mybtn" round color="" icon="lock" @click="clickaggshowtype()"></q-btn>-->
|
||||
|
||||
|
||||
<!--<span style="white-space: pre;">{{ todos_vista }}</span>-->
|
||||
|
||||
Reference in New Issue
Block a user