From 2df42b6d5fa780657450f272fe6de60d9a57b52c Mon Sep 17 00:00:00 2001
From: aminecmi <aminecmi@gmail.com>
Date: Fri, 28 Jan 2022 20:26:46 +0100
Subject: [PATCH] Added bulma. Lists creation/update modal.

---
 package.json                             |   1 +
 public/index.html                        |   2 +
 src/App.vue                              |  23 ++++-
 src/components/ListCreateUpdateModal.vue |  73 +++++++++++++++
 src/components/Lists.vue                 | 108 +++++++++++++++++++++++
 src/components/Login.vue                 |  17 ++--
 yarn.lock                                |   5 ++
 7 files changed, 220 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ListCreateUpdateModal.vue
 create mode 100644 src/components/Lists.vue

diff --git a/package.json b/package.json
index 874f068..908054e 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bulma": "^0.9.3",
     "core-js": "^3.6.5",
     "vue": "^2.6.11"
   },
diff --git a/public/index.html b/public/index.html
index 3e5a139..812f705 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
diff --git a/src/App.vue b/src/App.vue
index 66153af..167224b 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/components/ListCreateUpdateModal.vue b/src/components/ListCreateUpdateModal.vue
new file mode 100644
index 0000000..9251a0f
--- /dev/null
+++ b/src/components/ListCreateUpdateModal.vue
@@ -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>
diff --git a/src/components/Lists.vue b/src/components/Lists.vue
new file mode 100644
index 0000000..7d7a258
--- /dev/null
+++ b/src/components/Lists.vue
@@ -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>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index c57df5e..617ae85 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -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();
   }
 }
diff --git a/yarn.lock b/yarn.lock
index e7c4062..5ec2800 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"