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

refact list front

Browse Source
This commit is contained in:
Romulus21
2020-05-02 11:05:16 +02:00
parent 2c0536a864
commit 033f563595
3 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/Http/Resources/ToDoCollection.php
View File

@@ -17,6 +17,7 @@ class ToDoCollection extends ResourceCollection
return [
'data' => $this->collection,
'to_dos_count' => $this->count(),
'to_dos_count_check' => $this->where('checked_at', '!=', null)->count(),
];
}
}

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

@@ -2,14 +2,14 @@
<div class="p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal px-2">
<p class="m-1 text-center">Add a new to-do list ?</p>
<p class="m-2 text-center">Add a new to-do list ?</p>
<InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" />
<div class="flex-center m-1 mt-2">
<div class="flex justify-center mx-2 my-4">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-primary" @click="create">Create</button>
</div>
</div>
<div class="flex-between flex-center mb-1">
<div class="flex justify-between mb-1">
<a href="#" class="btn" @click="$router.back()">Back</a>
<a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
@@ -23,7 +23,14 @@
: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" >
{{ toDoList.data.attributes.data.name }}
<div class="bg-orange-300 rounded text-black m-2 p-2">
<div class="flex justify-between">
{{ toDoList.data.attributes.data.name }}
<span class="text-orange-900">
{{ toDoList.data.attributes.data.to_dos.to_dos_count_check }} / {{ toDoList.data.attributes.data.to_dos.to_dos_count }}
</span>
</div>
</div>
</router-link>
</div>
</div>

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

@@ -1,5 +1,20 @@
<template>
<div class="p-4">
<div class="px-4 py-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>
<div class="flex justify-center mx-2 my-4">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
</div>
<div class="flex items-center justify-between pb-2">
<router-link to="/memos/" class="btn-secondary">Back</router-link>
<div class="flex-middle">
<router-link :to="'/to-do-lists/' + toDoList.data.to_do_list_id" class="btn-secondary mr-2" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
</div>
</div>
<div v-if="!loading" class="bg-orange-400 rounded p-1">
<h1 class="text-2xl font-bold mb-2 ml-2">{{ toDoList.data.attributes.data.name }}</h1>
<ul class='p-1'
@@ -48,6 +63,7 @@ export default {
loading: true,
name: '',
errors: null,
modal: false,
}
},
mounted() {
@@ -125,6 +141,16 @@ export default {
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
destroy: function () {
// eslint-disable-next-line no-undef
axios.delete('/api/to-do-lists/' + this.$route.params.id)
.then(() => {
this.$router.push('/to-do-lists')
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete list.' + errorRes)
})
}
}
}