Added bulma. Lists creation/update modal.
This commit is contained in:
aminecmi
parent
7a95ab8d3e
commit
2df42b6d5f
@ -8,6 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"bulma": "^0.9.3",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11"
|
||||
},
|
||||
|
||||
@ -13,5 +13,7 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
23
src/App.vue
23
src/App.vue
@ -1,9 +1,15 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div v-if="loading">LOADING...</div>
|
||||
<div id="app" class="container">
|
||||
<div v-if="loading"><progress class="progress is-small is-primary" max="100">15%</progress></div>
|
||||
<div v-show="!loading">
|
||||
<Login v-if="!authed" v-on:login="handleLoggedIn" v-on:loading="handleLoading"></Login>
|
||||
<span v-if="authed" class="bg-purple text-3xl font-bold underline">authed</span>
|
||||
<div v-if="authed">
|
||||
<div class="notification is-success" v-if="!hideAuthed">
|
||||
<button class="delete" v-on:click="hideAuthed = true"></button>
|
||||
Authed !
|
||||
</div>
|
||||
<Lists></Lists>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -11,21 +17,28 @@
|
||||
<script>
|
||||
|
||||
import Login from "@/components/Login";
|
||||
import Lists from "@/components/Lists";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Lists,
|
||||
Login
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
authed: false,
|
||||
loading: false
|
||||
loading: false,
|
||||
hideAuthed: false,
|
||||
lists: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLoggedIn: function () {
|
||||
this.authed = true;
|
||||
this.loading = false;
|
||||
setTimeout(() => {
|
||||
this.hideAuthed = true;
|
||||
}, 3000)
|
||||
},
|
||||
handleLoading: function (event) {
|
||||
this.loading = event;
|
||||
@ -35,6 +48,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "~bulma/css/bulma.css";
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
73
src/components/ListCreateUpdateModal.vue
Normal file
73
src/components/ListCreateUpdateModal.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<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">Name
|
||||
</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="name">
|
||||
</div>
|
||||
</div>
|
||||
<button class="button is-primary" v-if="item === null" v-on:click="createItem">Create new list</button>
|
||||
<button class="button is-primary" v-if="item !== null" v-on:click="updateItem">Update list</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" v-on:click="toggleModal"></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ListCreateUpdateModal",
|
||||
props: ['addModalShown', 'item'],
|
||||
data: function() {
|
||||
console.log(this.item);
|
||||
return {
|
||||
name: this.item != null ? this.item.name : ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleModal: function () {
|
||||
this.$emit('toggleModal')
|
||||
},
|
||||
createItem: function () {
|
||||
fetch('http://localhost:7000/api/lists', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8',
|
||||
'X-API-KEY': localStorage.getItem('KEY')
|
||||
},
|
||||
body: JSON.stringify({name: this.name})
|
||||
}).then(r => {
|
||||
return r.json();
|
||||
}).then(result => {
|
||||
this.$emit('newList', result)
|
||||
this.toggleModal();
|
||||
})
|
||||
},
|
||||
updateItem: function () {
|
||||
fetch('http://localhost:7000/api/lists/' + this.item.id, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8',
|
||||
'X-API-KEY': localStorage.getItem('KEY')
|
||||
},
|
||||
body: JSON.stringify({name: this.name})
|
||||
}).then(r => {
|
||||
return r.json();
|
||||
}).then(result => {
|
||||
if (result.status != 404) {
|
||||
this.$emit('updatedItem', this.item.id, result)
|
||||
this.toggleModal();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
108
src/components/Lists.vue
Normal file
108
src/components/Lists.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div>
|
||||
<ListCreateUpdateModal v-if="addModalShown" v-bind:add-modal-shown="addModalShown" v-on:newList="addListItem"
|
||||
v-on:updatedItem="updateListItem"
|
||||
v-on:toggleModal="toggleModal" v-bind:item="selectedItem"></ListCreateUpdateModal>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<h1 class="title">Vos listes</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<button class="button is-large" v-on:click="toggleModal">
|
||||
<span class="icon is-medium">
|
||||
<ion-icon name="add-outline"></ion-icon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter" v-for="item in lists" :key="item.id">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
{{item.name}}
|
||||
</p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a href="#" class="card-footer-item">Select</a>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ListCreateUpdateModal from "@/components/ListCreateUpdateModal";
|
||||
export default {
|
||||
name: "Lists",
|
||||
components: {ListCreateUpdateModal},
|
||||
data: function() {
|
||||
return {
|
||||
lists: [],
|
||||
addModalShown: false,
|
||||
name: '',
|
||||
selectedItem: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchLists: function () {
|
||||
fetch('http://localhost:7000/api/lists', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8',
|
||||
'X-API-KEY': localStorage.getItem('KEY')
|
||||
}
|
||||
}).then(r => {
|
||||
return r.json();
|
||||
}).then(result => {
|
||||
this.lists = result;
|
||||
})
|
||||
},
|
||||
deleteItem: function (item) {
|
||||
fetch('http://localhost:7000/api/lists/' + item.id, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8',
|
||||
'X-API-KEY': localStorage.getItem('KEY')
|
||||
}
|
||||
}).then(r => {
|
||||
if (r.status !== 404) {
|
||||
this.lists = this.lists.filter(r => r.id !== item.id);
|
||||
}
|
||||
});
|
||||
},
|
||||
toggleModal: function () {
|
||||
this.addModalShown = !this.addModalShown;
|
||||
},
|
||||
selectItem: function (item) {
|
||||
this.selectedItem = item;
|
||||
this.toggleModal();
|
||||
},
|
||||
addListItem: function (item) {
|
||||
this.lists.push(item);
|
||||
},
|
||||
updateListItem: function (id, item) {
|
||||
this.lists = this.lists.map(i => {
|
||||
if (i.id === id) {
|
||||
return item;
|
||||
} else {
|
||||
return i;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.fetchLists();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" v-model="key">
|
||||
<button type="button" v-on:click="sendKey"> Submit</button>
|
||||
<div class="box">
|
||||
<div class="field">
|
||||
<label class="label">Key</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="key">
|
||||
</div>
|
||||
</div>
|
||||
<button class="button is-primary" v-on:click="sendKey">Sign in</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -23,15 +28,17 @@ export default {
|
||||
},
|
||||
body: this.key
|
||||
}).then(r => {
|
||||
if (r.statusCode !== 404) {
|
||||
if (r.status !== 404) {
|
||||
localStorage.setItem(this.lsKey, this.key)
|
||||
this.$emit('login')
|
||||
} else {
|
||||
this.$emit('loading')
|
||||
}
|
||||
})
|
||||
}
|
||||
}, beforeMount() {
|
||||
this.$emit('loading', true)
|
||||
this.key = localStorage.getItem(this.lsKey);
|
||||
this.key = localStorage.getItem(this.lsKey) != 'null' ? localStorage.getItem(this.lsKey) : '';
|
||||
this.sendKey();
|
||||
}
|
||||
}
|
||||
|
||||
@ -2166,6 +2166,11 @@ builtin-status-codes@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
|
||||
integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
|
||||
|
||||
bulma@^0.9.3:
|
||||
version "0.9.3"
|
||||
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
|
||||
integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
|
||||
|
||||
bytes@3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user