Sorting items on check. Uncheck on search with result. Adding items from search bar. Fixed search ignoring case.

src/components/ItemCreateModal.vue

@@ -1,54 +0,0 @@
-<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>

src/components/ListItem.vue

@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     updateItem: function () {
-      this.$emit('updateItem', this.element)
+      this.$emit('updateItem', {id: this.element.id, checked: this.element.checked}, true)
     }
   }
 }

src/views/List.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="block">
-    <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()">
@@ -18,7 +16,7 @@
           </span>
           </p>
           <p class="control">
-            <button class="button is-link" v-on:click="toggleModal">
+            <button class="button is-link" v-on:click="createItem">
           <span class="icon is-medium">
             <ion-icon name="add-outline"></ion-icon>
           </span>
@@ -28,7 +26,7 @@
       </div>
 
       <draggable
-          v-model="items"
+          v-model="searchResults"
           group="people"
           @change="onChange"
           item-key="id" v-if="searchQ.length <= 0">
@@ -37,7 +35,7 @@
         </template>
       </draggable>
       <div v-if="searchQ.length > 0">
-        <ListItem v-for="element in items" v-bind:can-move="false" :key="element.id" v-bind:item="element" v-on:updateItem="updateItem"></ListItem>
+        <ListItem v-for="element in searchResults" v-bind:can-move="false" :key="element.id" v-bind:item="element" v-on:updateItem="updateItem"></ListItem>
       </div>
 
     </div>
@@ -45,19 +43,18 @@
 </template>
 
 <script>
-import ItemCreateModal from "@/components/ItemCreateModal";
 import draggable from 'vuedraggable'
 import ListItem from "@/components/ListItem";
 
 export default {
   name: "List",
-  components: {ListItem, ItemCreateModal, draggable},
+  components: {ListItem, draggable},
   data: function () {
     return {
       listId: this.$route.params.id,
       listName: '',
       searchQ: '',
-      items: [],
+      searchResults: [],
       initialItems: [],
       loading: true,
       addModalShown: false,
@@ -104,29 +101,50 @@ export default {
       })
     },
     recopyItemsObject: function () {
-      this.items = this.initialItems.map(x => ({...x}));
+      this.searchResults = 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)
+        this.searchResults = this.searchResults.filter(i => i.content.toLowerCase().indexOf(this.searchQ.toLowerCase()) >= 0)
       } else {
         this.recopyItemsObject();
       }
     },
-    toggleModal: function () {
-      this.searchQ = '';
-      this.addModalShown = !this.addModalShown;
-    },
     addItem: function (item) {
       this.initialItems.push(item);
       this.recopyItemsObject();
     },
     onChange: function (event) {
       if (event.moved) {
-        console.log(event.moved.newIndex)
-        const i = this.initialItems.find(i => i.id === event.moved.element.id)
-        i.position = event.moved.newIndex
-        this.updateItem(i, true);
+        this.updateItem({
+          id: event.moved.element.id,
+          position: event.moved.newIndex
+        }, true);
+      }
+    },
+    createItem: function () {
+      if (this.searchResults.length == 1) {
+        this.searchResults[0].checked = false;
+        this.searchQ = '';
+        const itemToSend = {
+          id : this.searchResults[0].id,
+          checked: this.searchResults[0].checked
+        };
+        this.updateItem(itemToSend, true);
+      } else {
+        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.searchQ})
+        }).then(r => {
+          return r.json();
+        }).then(result => {
+          this.searchQ = '';
+          this.addItem(result);
+        })
       }
     }
   },