88 lines
3.2 KiB
Vue
88 lines
3.2 KiB
Vue
<template>
|
|
<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>
|
|
<InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" classes="border" />
|
|
<div class="flex justify-center mx-2 my-4">
|
|
<button class="btn mr-2" @click="modal = ! modal">Cancel</button>
|
|
<button class="btn-primary" @click="create">Create</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between mb-1">
|
|
<router-link to="/" class="btn">Back</router-link>
|
|
|
|
<a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
|
|
</div>
|
|
<Loader v-if="loading" />
|
|
<div v-else class="flex flex-wrap -m-2 mt-2">
|
|
<div v-if="toDoLists.length < 1" class="font-bold p-2">No List Yet</div>
|
|
<router-link v-else
|
|
v-for="(toDoList, index) in toDoLists"
|
|
: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 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>
|
|
{{ 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>
|
|
</template>
|
|
|
|
<script>
|
|
import Loader from '../../components/Loader'
|
|
import InputField from '../../components/Form/InputField'
|
|
|
|
export default {
|
|
name: 'ToDoListIndex',
|
|
components: {
|
|
Loader, InputField
|
|
},
|
|
data: function () {
|
|
return {
|
|
loading: true,
|
|
modal: false,
|
|
toDoLists: null,
|
|
name: '',
|
|
errors: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
// eslint-disable-next-line no-undef
|
|
axios.get('/api/to-do-lists')
|
|
.then(res => {
|
|
this.toDoLists = res.data.data
|
|
this.loading = false
|
|
})
|
|
.catch(errorRes => {
|
|
this.loading = false
|
|
if (errorRes.response.status === 404) {
|
|
this.$router.push('/')
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
create: function () {
|
|
// eslint-disable-next-line no-undef
|
|
axios.post('/api/to-do-lists', {name: this.name})
|
|
.then(res => {
|
|
console.log(res)
|
|
this.modal = false
|
|
this.name = ''
|
|
this.toDoLists.push(res.data)
|
|
})
|
|
.catch(errorRes => {
|
|
console.log('Internal Error, Unable to delete contact.' + errorRes)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|