Louvorg/liste-de-courses-www
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

List items displaying.

Browse Source
This commit is contained in:
aminecmi 2022-01-29 10:20:02 +01:00
parent 89a2936de9
commit f99deb2631
5 changed files with 186 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/ItemCreateModal.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="modal" v-bind:class="{ 'is-active': addModalShown }">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<div class="field">
<label class="label">Content
</label>
<div class="control">
<input class="input" type="text" v-model="content">
</div>
</div>
<button class="button is-primary" v-on:click="createItem">Create item</button>
</div>
</div>
<button class="modal-close is-large" aria-label="close" v-on:click="toggleModal"></button>
</div>
</template>
<script>
export default {
name: "ItemCreateModal",
props: ['addModalShown', 'listId'],
data: function() {
return {
content: ''
}
},
methods: {
toggleModal: function () {
this.$emit('toggleModalItem')
},
createItem: function () {
fetch('http://localhost:7000/api/lists/' + this.listId + '/items', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-API-KEY': localStorage.getItem('KEY')
},
body: JSON.stringify({content: this.content})
}).then(r => {
return r.json();
}).then(result => {
this.$emit('newItem', result)
this.toggleModal();
})
},
}
}
</script>
<style scoped>
</style>

1
src/components/ListCreateUpdateModal.vue
View File

@ -23,7 +23,6 @@ export default {
name: "ListCreateUpdateModal",
props: ['addModalShown', 'item'],
data: function() {
console.log(this.item);
return {
name: this.item != null ? this.item.name : ''
}

3
src/router/index.ts
View File

@ -11,7 +11,8 @@ const routes: Array<RouteRecordRaw> = [
path: '/lists',
name: 'Lists',
component: () => import('../views/Lists.vue')
}
},
{ path: '/lists/:id', name: 'List', component: () => import('../views/List.vue') },
]
const router = createRouter({

129
src/views/List.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div>
<ItemCreateModal v-if="addModalShown" v-bind:add-modal-shown="addModalShown" v-bind:list-id="listId"
v-on:newItem="addItem" v-on:toggleModalItem="toggleModal"></ItemCreateModal>
<div class="panel is-info" v-if="!loading">
<p class="panel-heading">
<span class="icon is-pulled-left" v-on:click="$router.back()">
<ion-icon name="chevron-back-outline"></ion-icon>
</span>
{{ this.listName }}
</p>
<div class="panel-block">
<div class="field is-grouped">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" v-model="searchQ" placeholder="Search" v-on:keyup="searchItem">
<span class="icon is-left">
<ion-icon name="search-outline"></ion-icon>
</span>
</p>
<p class="control">
<button class="button is-link" v-on:click="toggleModal">
<span class="icon is-medium">
<ion-icon name="add-outline"></ion-icon>
</span>
</button>
</p>
</div>
</div>
<div class="panel-block" v-for="item in items" :key="item.id" v-bind:class="{'disabled': item.loading}">
<input type="checkbox" v-model="item.checked" v-on:change="updateItem(item)">
<div class="field is-horizontal has-addons">
<div class="control">
<input class="input" type="text" v-bind:disabled="item.checked" v-model="item.content" v-on:blur="updateItem(item)">
</div>
<div class="control" v-if="!item.checked">
<a class="button is-primary" v-on:click="updateItem(item)">
Save
</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ItemCreateModal from "@/components/ItemCreateModal";
export default {
name: "List",
components: {ItemCreateModal},
data: function () {
return {
listId: this.$route.params.id,
listName: '',
searchQ: '',
items: [],
initialItems: [],
loading: true,
addModalShown: false
}
},
methods: {
fetchListAndItems: function () {
this.loading = true;
fetch('http://localhost:7000/api/lists/' + this.listId + '/items', {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-API-KEY': localStorage.getItem('KEY')
}
}).then(r => {
return r.json();
}).then(result => {
this.listName = result.name;
this.initialItems = result.items.sort((a, b) => a.position - b.position);
this.recopyItemsObject();
}).finally(() => {
this.loading = false;
})
},
updateItem: function (item) {
item.loading = true;
const itemCopy = Object.assign({}, item);
delete itemCopy.loading;
fetch('http://localhost:7000/api/lists/' + this.listId + '/items/' + item.id, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-API-KEY': localStorage.getItem('KEY')
},
body: JSON.stringify(itemCopy)
}).finally(() => {
item.loading = false;
})
},
recopyItemsObject: function () {
this.items = this.initialItems.map(x => ({...x}));
},
searchItem: function () {
if (this.searchQ.length > 0) {
this.items = this.items.filter(i => i.content.toLowerCase().indexOf(this.searchQ) >= 0)
} else {
this.recopyItemsObject();
}
},
toggleModal: function () {
this.searchQ = '';
this.addModalShown = !this.addModalShown;
},
addItem: function (item) {
this.initialItems.push(item);
this.recopyItemsObject();
}
},
beforeMount() {
this.fetchListAndItems();
}
}
</script>
<style scoped>
.panel-block.disabled {
opacity: .5;
}
.field, .field .control:first-child {
width: 100%;
}
</style>

2
src/views/Lists.vue
View File

@ -27,7 +27,7 @@
</p>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Select</a>
<router-link class="card-footer-item" :to="{ name: 'List', params: { id: item.id }}">Select</router-link>
<a href="#" class="card-footer-item" v-on:click="selectItem(item)">Edit</a>
<a href="#" class="card-footer-item" v-on:click="deleteItem(item)">Delete</a>
</footer>