75 lines
No EOL
2 KiB
Vue
75 lines
No EOL
2 KiB
Vue
<script setup lang="ts">
|
|
import {onMounted, ref} from 'vue'
|
|
import Item from "./components/Item.vue";
|
|
import Edit from "./components/Edit.vue";
|
|
import config from "./config";
|
|
import axios from 'axios'
|
|
|
|
onMounted(async () => {
|
|
const response = await axios.get(`${config.apiEndpoint}/items`)
|
|
notes.value = response.data
|
|
id = Math.max(...notes.value.map((note: any) => note.id), 0)
|
|
currentNote.value.id = id += 1
|
|
})
|
|
|
|
|
|
let id;
|
|
const notes = ref<any[]>([])
|
|
const currentNote = ref<any>({id: id += 1, title: "", checked: false})
|
|
|
|
async function processNote(note: any) {
|
|
const index = notes.value.findIndex((item) => item.id === note.id)
|
|
if (index !== -1) {
|
|
await axios.put(`${config.apiEndpoint}/items/update`, note).then((response) => {
|
|
notes.value[index] = response.data
|
|
})
|
|
}
|
|
else {
|
|
await axios.post(`${config.apiEndpoint}/items/create`, {title: note.title}).then((response) => {
|
|
notes.value.push(response.data)
|
|
})
|
|
}
|
|
currentNote.value = {id: id += 1, title: "", checked: false}
|
|
}
|
|
|
|
|
|
async function deleteNote(note: any) {
|
|
await axios.delete(`${config.apiEndpoint}/items/delete`, {data: {id: note.id}})
|
|
notes.value = notes.value.filter((item) => item.id !== note.id)
|
|
}
|
|
|
|
|
|
async function updateChecked(id: any, checked: boolean) {
|
|
const index = notes.value.findIndex((item) => item.id === id)
|
|
if (index !== -1) {
|
|
notes.value[index].checked = checked
|
|
await axios.put(`${config.apiEndpoint}/items/update`, notes.value[index])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container" id="container">
|
|
<item v-for="el in notes"
|
|
:note="el"
|
|
:key="el.id"
|
|
@delete="deleteNote"
|
|
@edit="(note) => currentNote = note"
|
|
@updateChecked="(checked) => updateChecked(el.id, checked)"
|
|
/>
|
|
</div>
|
|
<edit
|
|
v-bind:note="currentNote"
|
|
@done="processNote"
|
|
@updateTitle="(title) => currentNote.title = title"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
border: 1px solid #000;
|
|
padding: 10px;
|
|
width: fit-content;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |