From f99deb26311380363afb2224a219aad25d47cb5f Mon Sep 17 00:00:00 2001
From: aminecmi <aminecmi@gmail.com>
Date: Sat, 29 Jan 2022 10:20:02 +0100
Subject: [PATCH] List items displaying.

---
 src/components/ItemCreateModal.vue       |  54 ++++++++++
 src/components/ListCreateUpdateModal.vue |   1 -
 src/router/index.ts                      |   3 +-
 src/views/List.vue                       | 129 +++++++++++++++++++++++
 src/views/Lists.vue                      |   2 +-
 5 files changed, 186 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ItemCreateModal.vue
 create mode 100644 src/views/List.vue

diff --git a/src/components/ItemCreateModal.vue b/src/components/ItemCreateModal.vue
new file mode 100644
index 0000000..8405fcb
--- /dev/null
+++ b/src/components/ItemCreateModal.vue
@@ -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>
diff --git a/src/components/ListCreateUpdateModal.vue b/src/components/ListCreateUpdateModal.vue
index 9251a0f..59800a7 100644
--- a/src/components/ListCreateUpdateModal.vue
+++ b/src/components/ListCreateUpdateModal.vue
@@ -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 : ''
     }
diff --git a/src/router/index.ts b/src/router/index.ts
index b0bee1b..b1deb63 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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({
diff --git a/src/views/List.vue b/src/views/List.vue
new file mode 100644
index 0000000..3b230ae
--- /dev/null
+++ b/src/views/List.vue
@@ -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>
diff --git a/src/views/Lists.vue b/src/views/Lists.vue
index 65938f4..00f31e9 100644
--- a/src/views/Lists.vue
+++ b/src/views/Lists.vue
@@ -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>