Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refact theme todo with bug drag

Browse Source
This commit is contained in:
Romulus21
2020-07-26 22:15:30 +02:00
parent 8f66aee23d
commit 18fbf2f601
15 changed files with 99 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/views/ToDoLists/ToDo.vue
View File

@@ -15,7 +15,7 @@
<input type="text"
v-model="toDo.data.attributes.data.name"
@keypress.enter="updateToDo"
class="flex-1 rounded-sm border border-primary-600 pl-1">
class="flex-1 rounded-sm border border-primary-600 p-0 pl-1">
<span @click="edit = !edit">
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer mx-2" />
</span>

6
resources/js/views/ToDoLists/ToDoListIndex.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="p-4">
<div class="mx-2 p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal px-2">
<p class="m-2 text-center">Add a new to-do list ?</p>
@@ -22,8 +22,8 @@
:key="index"
:to="'/to-do-lists/' + toDoList.data.to_do_list_id"
:to-do-list="toDoList"
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
<div class="bg-gray-300 rounded text-black m-2 p-2">
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 no-underline" >
<div class="rounded bg-white text-black m-2 p-2">
<div class="flex justify-between">
<span class="font-bold">{{ toDoList.data.attributes.data.name }}</span>
<span>

13
resources/js/views/ToDoLists/ToDoListShow.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="px-4 py-2">
<div class="mx-2 p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal">
<p class="m-2 text-center">Are you sure you want to delete this list ?</p>
@@ -12,15 +12,18 @@
<router-link to="/to-do-lists/" class="btn">Back</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
</div>
<div v-if="!loading" class="bg-gray-400 rounded p-1">
<h1 class="mb-2 ml-2 todo" >
<div v-if="!loading" class="bg-marine-medium rounded p-1">
<h1 class="mb-2 ml-2 h-10 todo text-white flex items-center" >
<span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
<span @click="listNameEdit = !listNameEdit">
<svg-vue icon="edit" class="edit-icon inline w-4 fill-current cursor-pointer ml-2" />
</span>
</span>
<span v-else class="flex items-center">
<input type="text" class="p-1 rounded-sm mt-1 -ml-1" v-model="listName" @keydown.enter="updateList">
<input type="text"
class="px-1 py-0 text-2xl text-white font-bold bg-marine-medium rounded-sm -ml-1"
v-model="listName"
@keydown.enter="updateList">
<span @click="listNameEdit = !listNameEdit">
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer ml-2" />
</span>
@@ -96,12 +99,14 @@ export default {
},
methods: {
startDrag: (evt, item) => {
console.log('start', item)
evt.dataTransfer.dropEffect = 'move'
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('toDoID', item.data.to_do_id)
evt.dataTransfer.setData('toDoOrder', item.data.attributes.data.order)
},
onDrop (evt, toDoEnd) {
console.log('drop', evt, toDoEnd)
const toDoID = parseInt(evt.dataTransfer.getData('toDoID'), 10)
const toDoOrder = parseInt(evt.dataTransfer.getData('toDoOrder'), 10)
let toDoMove = this.toDoList.data.attributes.data.to_dos.data.find(toDo => toDo.data.to_do_id === toDoID)