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

Drag & Drop hand made... but don't working with the touch

Browse Source
This commit is contained in:
Paolo Arena
2019-02-19 18:44:48 +01:00
parent ec49343556
commit 1eca13c27f
13 changed files with 259 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,23 @@
$colcompleted: #a2a2a2;
$heightitem: 19px;
$heightitem: 32px;
$heightothers: 32px;
$heightBtn: 100%;
$heightcounter: 26px;
$heightdescr: 22px;
$heightdescr: 20px;
.flex-item{
// background-color: #d5e2eb;
padding: 0px;
margin: 0px;
margin: 1px;
margin-left: 3px;
margin-right: 3px;
color: #000;
font-size: 0.85rem;
height: $heightBtn;
line-height: $heightBtn;
vertical-align: middle;
//flex: 0 0 100%;
}
@@ -18,7 +25,7 @@ $heightdescr: 22px;
.flex-container2 {
flex-flow: row wrap;
justify-content: space-between;
margin: 2px 5px 2px 5px; // top right bottom left
margin: 0px 5px 0px 5px; // top right bottom left
}
// Set visibility: visible to the icon menu of pos-item-popover
@@ -26,6 +33,7 @@ $heightdescr: 22px;
//.flex-container2:hover .pos-item-popover {
background-color: rgba(230, 230, 230, 0.8);
display: inline-block;
transition: all ease-in-out .3s;
}
.comp_selected {
@@ -68,8 +76,12 @@ $heightdescr: 22px;
margin-right: 1px;
padding-left: 1px;
padding-right: 1px;
height: $heightitem;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
//height: $heightitem;
line-height: $heightitem;
min-height: $heightitem;
text-align: center;
// background-color: #ff4081;
font-size: 0.75rem;
@@ -104,7 +116,8 @@ $heightdescr: 22px;
display: none;
}
color: #777;
height: 100%;
height: $heightitem;
line-height: $heightitem;
//visibility: hidden;
}
@@ -134,7 +147,8 @@ $heightdescr: 22px;
text-align: center;
vertical-align: middle;
display: inline-block;
height: 100%;
height: $heightitem;
line-height: $heightitem;
color: #777;
}
@@ -146,23 +160,38 @@ $heightdescr: 22px;
.completed-item {
max-width: 24px;
min-width: 24px;
height: $heightitem;
line-height: $heightitem;
}
.progress-item {
max-width: 32px;
min-width: 24px;
margin: 1px;
padding: 2px;
padding-top: 4px;
padding-bottom: 4px;
max-width: 36px;
min-width: 32px;
flex: 1;
order: 2;
text-align: right;
order: 1;
}
.progrbar-item {
//height: 10px
padding-top: 7px;
}
.percProgress {
height: $heightitem;
line-height: $heightitem;
padding-top: 3px;
color: #888;
vertical-align: middle;
text-align: center;
cursor: pointer;
//line-height: $heightitem;
}
.editProgress{
//height: 20px;
}
.colProgress {
}
@@ -182,13 +211,14 @@ $heightdescr: 22px;
}
.myexpired {
padding-top: 0px;
padding-bottom: 0px;
font-size: 12px;
padding-top: 5px;
padding-bottom: 3px;
font-size: 0.85rem;
vertical-align: middle;
}
.data-item {
max-width: 100px;
max-width: 80px;
//min-width: 100px;
//display: flex;
//visibility: initial;
@@ -196,6 +226,8 @@ $heightdescr: 22px;
color: #ccc;
order: 1;
flex: 1;
height: $heightBtn;
line-height: $heightBtn;
}
@@ -217,10 +249,12 @@ $heightdescr: 22px;
.div_descr, .div_descr_edit {
margin: auto auto auto 2px;
//padding: 2px;
min-width: 200px;
min-width: 100px;
vertical-align: middle;
text-align: left;
color: blue !important;
max-height: 42px;
overflow: hidden;
flex: 1;
//order: 2;
@@ -236,6 +270,9 @@ $heightdescr: 22px;
}
.div_descr_edit {
max-height: 90px;
}
.div_descr:hover {
//border-width: 1px 0px 1px 0px;

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

@@ -101,7 +101,7 @@ export default class SingleTodo extends Vue {
this.classDescrEdit += ' titleLista-item'
}
this.classExpiring = 'flex-item data-item'
this.classExpiring = 'flex-item data-item shadow-1'
this.classExpiringEx = ''
if (this.itemtodo.completed) {
this.percentageProgress = 100
@@ -126,8 +126,9 @@ export default class SingleTodo extends Vue {
mycolcl = ' highperc'
}
if (this.itemtodo.completed)
if (this.itemtodo.completed) {
mycolcl = ' percompleted'
}
this.colProgress = mycolcl
@@ -250,7 +251,9 @@ export default class SingleTodo extends Vue {
theField = <HTMLInputElement>mythis.$parent.$parent.$parent.$parent.$refs[elem]
else
theField = <HTMLInputElement>mythis.$refs[elem]
theField.focus()
if (theField !== undefined)
theField.focus()
// console.log('focus()')
}, 100)
}
@@ -316,7 +319,7 @@ export default class SingleTodo extends Vue {
} else {
e.preventDefault()
this.deselectRiga()
this.faiFocus('insertTask', true)
this.faiFocus('insertTask', false)
}
}
@@ -399,6 +402,8 @@ export default class SingleTodo extends Vue {
return await this.setCompleted()
} else if (action === rescodes.MenuAction.PROGRESS_BAR) {
return await this.updatedata()
} else if (action === 0) {
this.deselectAndExitEdit()
}
}
@@ -430,4 +435,5 @@ export default class SingleTodo extends Vue {
})
}
}

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

@@ -16,7 +16,7 @@
</div>
<q-input v-if="sel && !itemtodo.completed" hide-underline type="textarea" ref="inputdescr" v-model.trim="precDescr"
:class="classDescrEdit" :max-height="50"
:class="classDescrEdit" :max-height="100"
@keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
<div v-else :class="classDescr"
@@ -32,33 +32,34 @@
<!--<q-field>{{ itemtodo.descr }}</q-field>-->
<!--</div>-->
<div v-if="isTodo() && (percentageProgress > 0) " class="flex-item progress-item">
<div v-if="isTodo() && (percentageProgress > 0) " class="flex-item progress-item shadow-1">
<q-progress
:percentage="percentageProgress"
class="progress-item"
class="progrbar-item"
:color="colProgress"
>
</q-progress>
<div :class="percProgress">
{{percentageProgress}}%
<q-popup-edit v-model="itemtodo.progress" title="Progress" buttons class="editProgress">
<q-input type="number" v-model="itemtodo.progress" :max="100" :min="0" />
</q-popup-edit>
</div>
</div>
<div v-if="itemtodo.enableExpiring" class="flex-item">
<div :class="classExpiring">
<q-datetime
type="date"
:class="classExpiringEx"
v-model="itemtodo.expiring_at"
class="myexpired"
format="DD/MM/YY"
@change="val => { model = val }" >
<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>
</div>
</q-datetime>
</div>
<div v-if="isTodo()" class="flex-item pos-item" @mouseup.left="mouseUp" @mousedown="clickRiga">
<div v-if="isTodo()" class="flex-item pos-item item-drag" @mouseup.left="mouseUp" @mousedown="clickRiga">
<q-btn push
:class="clButtPopover"
icon="menu" >

5
src/components/todos/SubMenus/SubMenus.ts
View File

@@ -32,6 +32,11 @@ export default class SubMenus extends Vue {
if (this.itemtodo.progress < 0) {
this.itemtodo.progress = 0
}
if (e.key === 'Enter') {
// chiudi il meno
this.$emit('clickMenu', 0)
}
}
create () {

28
src/components/todos/todo/todo.scss
View File

@@ -2,6 +2,7 @@
background-color: rgb(250, 250, 250);
padding: 5px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
@@ -14,7 +15,7 @@
.myitemdrag {
padding: 2px;
margin-top: 4px;
//margin-top: 4px;
border-width: 1px 0px 0px 0px;
//border: solid 1px #ccc;
border-style: solid;
@@ -76,3 +77,28 @@
font-size: 0.7rem;
font-weight: 350;
}
.draggatodraggato2 {
display: inline-block;
}
.non-draggato {
display: none;
}
@keyframes fadeIn {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 0.3;
}
}
.divdrag{
animation: fadeIn 0.2s ease-in 1 forwards;
min-height: 50px;
background-color: #9f9f9f;
}

69
src/components/todos/todo/todo.ts
View File

@@ -17,6 +17,8 @@ import draggable from 'vuedraggable'
import VueIdb from 'vue-idb'
// import 'statics/css/dragula.css'
import globalroutines from '../../../globalroutines/index'
import $ from 'jquery'
@@ -43,9 +45,11 @@ export default class Todo extends Vue {
itemDragEnd: any = null
selrowid: number = 0
polling = null
mytypetransgroup: string = 'flip-list'
mytypetransgroup: string = '' // 'flip-list'
tmpstrTodos: string = ''
loadDone: boolean = false
public dragging: number
public itemdrag: any = {}
fieldtochange: String [] = ['descr', 'completed', 'category', 'expiring_at', 'priority', 'id_prev', 'id_next', 'pos', 'enableExpiring', 'progress']
@@ -60,6 +64,7 @@ export default class Todo extends Vue {
console.log('drag = ' + this.drag)
}
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: any) {
// Some action
@@ -68,9 +73,14 @@ export default class Todo extends Vue {
@Watch('$route.params.category') changecat() {
// console.log('changecat')
this.mytypetransgroup = 'nessuno'
// this.mytypetransgroup = ''
this.updatetable(false, '$route.params.category').then(() => {
this.mytypetransgroup = 'crossfade'
const mythis = this
setTimeout(function () {
// mythis.mytypetransgroup = 'crossfade'
}, 1000)
})
}
@@ -292,7 +302,10 @@ export default class Todo extends Vue {
}
async onEnd(itemdragend) {
console.log('newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
console.log('3) newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
// MOVE
this.todos_arr.splice(itemdragend.newIndex, 0, this.todos_arr.splice(itemdragend.oldIndex, 1)[0])
if (itemdragend.newIndex === itemdragend.oldIndex)
return // If nothing change, exit
@@ -616,7 +629,6 @@ export default class Todo extends Vue {
console.log('deleteitem: KEY = ', id)
let myobjtrov = this.getElemById(id)
if (myobjtrov !== null) {
@@ -648,8 +660,8 @@ export default class Todo extends Vue {
this.updatetable(true, 'deleteitem')
}).catch((error) => {
console.log('err: ', error)
})
console.log('err: ', error)
})
// 3) Delete from the Server (call)
this.deleteItemToSyncAndDb(rescodes.DB.TABLE_DELETE_TODOS, myobjtrov, id, true)
@@ -908,4 +920,47 @@ export default class Todo extends Vue {
Todos.actions.waitAndcheckPendingMsg()
}
dragStart(which, ev) {
this.itemdrag.indTemp = which
console.log('1) DRAG INIZIO: ', which)
this.itemdrag.oldIndex = which
this.dragging = which
}
public randomHexColor() {
return Math.random().toString(16).slice(2, 8)
}
dragEnter(index, ev) {
if (this.itemdrag.indTemp !== index) {
console.log(`[${index}] DRAG ENTER`)
this.itemdrag.indTemp = index
this.getItemDrag(index).addClass('draggato2').removeClass('non-draggato')
}
}
getItemDrag(index) {
return $('div[name=REF' + index + ']')
}
dragLeave(index, ev) {
if (this.itemdrag.indTemp !== index) {
this.getItemDrag(index).addClass('non-draggato').removeClass('draggato')
}
}
dragEnd(ev) {
this.dragging = -1
}
dragFinish(to, ev) {
this.itemdrag.indTemp = -1
this.getItemDrag(to).addClass('non-draggato').removeClass('draggato')
console.log('2) DRAG FINE: ', to)
this.itemdrag.newIndex = to
this.onEnd(this.itemdrag)
}
}

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

@@ -10,14 +10,12 @@
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
<div class="drag">
<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
@start="onStart" @end="onEnd" class="dragArea">
<!--<transition-group :name="mytypetransgroup">-->
<div style="display: none">{{counter = 0}} </div>
<div :id="getmyid(mytodo._id)" :key="mytodo._id" v-for="mytodo in todos_arr" class="myitemdrag">
<!--<div v-if="isTodoByElem(mytodo)" style="display: none">{{counter++ = (mytodo.counter === undefined) ? 0: mytodo.counter++}} </div>-->
<div v-if="isTodoByElem(mytodo)" style="display: none">{{counter++, mytodo.counter = counter}} </div>
<!--<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"-->
<!--@start="onStart" @end="onEnd" class="dragArea">-->
<transition-group :name="mytypetransgroup">
<div :id="getmyid(mytodo._id)" v-for="(mytodo, index) in todos_arr" :key="mytodo._id" class="myitemdrag"
draggable="true" @dragstart="dragStart(index, $event)" @dragover.prevent @dragenter="dragEnter(index)"
@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >
<div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
<label>{{getPriorityByInd(mytodo.priority)}}</label>
@@ -27,13 +25,15 @@
<div style="display: none">{{ priorcomplet = true }}</div>
</div>
<SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
@deselectAllRows="deselectAllRows"
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
:itemtodo='mytodo' />
<div :name="`REF${index}`" class="divdrag non-draggato"></div>
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
</div>
<!--</transition-group>-->
</draggable>
</transition-group>
<!--</draggable>-->
</div>
@@ -42,18 +42,18 @@
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo"/>
{{ tmpstrTodos }}
<!--{{ tmpstrTodos }}-->
<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"/>
<!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
<!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>
<!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
<!--<div class="flex-item btn-item">-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>&ndash;&gt;-->