Truc.

.drone.yml

@@ -1,64 +1,19 @@
 kind: pipeline
 type: docker
-name: build
 
 steps:
-  - name: lintAndBuild
+  - name: build
     image: node:14
     commands:
       - npm install
+      - echo $VUE_APP_API_BASE_URL
       - npm run lint
       - npm run build:prod
     environment:
       VUE_APP_API_BASE_URL:
         from_secret: baseurl
 
-  - name: saveNodeModules
-    image: drillster/drone-volume-cache
-    volumes:
-      - name: cache
-        path: /cache
-    settings:
-      rebuild: true
-      mount:
-        - ./node_modules
-      cache_key: [ DRONE_REPO_NAME, DRONE_BRANCH ]
-
-trigger:
-  event:
-    - push
-    - pull_request
-
-volumes:
-  - name: cache
-    host:
-      path: /tmp/cache
----
-kind: pipeline
-type: docker
-name: Deploy
-
-steps:
-  - name: getNodeModules
-    image: drillster/drone-volume-cache
-    volumes:
-      - name: cache
-        path: /cache
-    settings:
-      restore: true
-      mount:
-        - ./node_modules
-      cache_key: [ DRONE_REPO_NAME, DRONE_BRANCH ]
-
-  - name: build
-    image: node:14
-    commands:
-      - npm run build:prod
-    environment:
-      VUE_APP_API_BASE_URL:
-        from_secret: baseurl
-
-  - name: scpFiles
+  - name: scp files
     image: appleboy/drone-scp
     settings:
       host: amine-louveau.fr
@@ -68,28 +23,3 @@ steps:
       port: 22
       target: /home/ubuntu/courses
       source: dist/*
-
-  - name: deploy
-    image: appleboy/drone-ssh
-    settings:
-      host: amine-louveau.fr
-      user: ubuntu
-      key:
-        from_secret: privateKey
-      command_timeout: 2m
-      script:
-        - cd /home/ubuntu/courses
-        - mv dist/* ./
-        - sudo chown www-data:www-data ./*
-        - sudo rm -rf /var/www/amine/courses/*
-        - sudo mv ./* /var/www/amine/courses/
-trigger:
-  event:
-    - promote
-  target:
-    - production
-
-volumes:
-  - name: cache
-    host:
-      path: /tmp/cache

README.md

@@ -1,5 +1,7 @@
 # An alternative front to Google Keep
 
+[![Build Status](http://18.0.0.7:46053/api/badges/AmineL/liste-de-courses-www/status.svg?ref=refs/heads/main)](http://18.0.0.7:46053/AmineL/liste-de-courses-www)
+
 ## HOW TO USE
 
 - Change the api url

src/components/ListCreateUpdateModal.vue

@@ -71,3 +71,7 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>

src/components/ListItem.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="panel-block" v-bind:class="{'disabled': element.loading}">
-             <span class="icon is-pulled-left handle" v-if="canMove">
+             <span class="icon is-pulled-left" v-if="canMove">
               <ion-icon name="move-outline"></ion-icon>
             </span>
 
-    <input type="checkbox" v-model="element.checked" v-on:change="updateCheckbox(element)">
+    <input type="checkbox" v-model="element.checked" v-on:change="updateItem(element)">
     <div class="field is-horizontal has-addons">
       <div class="control">
         <input class="input" type="text" v-bind:disabled="element.checked" v-model="element.content"
-               v-on:blur="updateContent(element)">
+               v-on:blur="updateItem(element)">
       </div>
       <div class="control">
         <a class="button is-danger" v-on:click="deleteElement(element)">
@@ -29,12 +29,9 @@ export default {
     }
   },
   methods: {
-    updateCheckbox: function () {
+    updateItem: function () {
       this.$emit('updateItem', {id: this.element.id, checked: this.element.checked}, true)
     },
-    updateContent: function () {
-      this.$emit('updateItem', {id: this.element.id, content: this.element.content}, true)
-    },
     deleteElement: function () {
       this.$emit('deleteElement', this.element.id)
     }

src/views/List.vue

@@ -26,18 +26,14 @@
       </div>
 
       <draggable
-          v-model="uncheckedItems"
+          v-model="searchResults"
           group="listItems"
           @change="onChange"
-          item-key="id" v-if="searchQ.length <= 0"
-          handle=".handle">
+          item-key="id" v-if="searchQ.length <= 0">
         <template #item="{element}">
           <ListItem v-bind:item="element" v-bind:can-move="!element.checked" v-on:updateItem="updateItem" v-on:deleteElement="deleteElement"></ListItem>
         </template>
       </draggable>
-      <div v-if="searchQ.length <= 0">
-        <ListItem v-for="element in checkedItems" v-bind:can-move="false" :key="element.id" v-bind:item="element" v-on:updateItem="updateItem" v-on:deleteElement="deleteElement"></ListItem>
-      </div>
       <div v-if="searchQ.length > 0">
         <ListItem v-for="element in searchResults" v-bind:can-move="false" :key="element.id" v-bind:item="element" v-on:updateItem="updateItem" v-on:deleteElement="deleteElement"></ListItem>
       </div>
@@ -59,8 +55,6 @@ export default {
       listName: '',
       searchQ: '',
       searchResults: [],
-      uncheckedItems: [],
-      checkedItems: [],
       initialItems: [],
       loading: true,
       addModalShown: false,
@@ -119,20 +113,23 @@ export default {
       })
     },
     recopyItemsObject: function () {
-      this.uncheckedItems = this.initialItems.filter(x => !x.checked).map(x => ({...x}));
-      this.checkedItems = this.initialItems.filter(x => x.checked).map(x => ({...x}));
+      this.searchResults = this.initialItems.map(x => ({...x}));
     },
     searchItem: function (e) {
       if (e.key === 'Enter') {
         this.createItem();
       } else {
         if (this.searchQ.length > 0) {
-          this.searchResults = this.initialItems.filter(i => i.content.toLowerCase().indexOf(this.searchQ.toLowerCase()) >= 0)
+          this.searchResults = this.searchResults.filter(i => i.content.toLowerCase().indexOf(this.searchQ.toLowerCase()) >= 0)
         } else {
           this.recopyItemsObject();
         }
       }
     },
+    addItem: function (item) {
+      this.initialItems.push(item);
+      this.recopyItemsObject();
+    },
     onChange: function (event) {
       if (event.moved) {
         this.updateItem({
@@ -160,7 +157,7 @@ export default {
           body: JSON.stringify({content: this.searchQ})
         }).then(r => {
           return r.json();
-        }).then(() => {
+        }).then(result => {
           this.searchQ = '';
           this.fetchListAndItems(true);
         })

src/views/Lists.vue

@@ -11,7 +11,7 @@
       </div>
 
       <div class="level-right">
-        <button class="button is-large" v-on:click="newItem">
+        <button class="button is-large" v-on:click="toggleModal">
           <span class="icon is-medium">
             <ion-icon name="add-outline"></ion-icon>
           </span>
@@ -20,19 +20,18 @@
     </nav>
     <div class="columns">
       <div class="column is-one-quarter"  v-for="item in lists" :key="item.id">
-        <router-link :to="{ name: 'List', params: { id: item.id }}" custom v-slot="{ navigate }">
-          <div class="card" @click="navigate">
-            <div class="card-content">
-              <p class="title">
-                {{item.name}}
-              </p>
-            </div>
-            <footer class="card-footer">
-              <a href="#" class="card-footer-item" v-on:click.prevent="selectItem(item)">Edit</a>
-              <a href="#" class="card-footer-item" v-on:click.prevent="deleteItem(item)">Delete</a>
-            </footer>
+        <div class="card">
+          <div class="card-content">
+            <p class="title">
+              {{item.name}}
+            </p>
           </div>
-        </router-link>
+          <footer class="card-footer">
+            <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>
+        </div>
       </div>
     </div>
   </div>
@@ -73,8 +72,8 @@ export default {
           'Content-Type': 'application/json;charset=utf-8',
           'X-API-KEY': localStorage.getItem('KEY')
         }
-      }).then(result => {
-        if (result.status !== 404) {
+      }).then(r => {
+        if (r.status !== 404) {
           this.lists = this.lists.filter(r => r.id !== item.id);
         }
       });
@@ -82,10 +81,6 @@ export default {
     toggleModal: function () {
       this.addModalShown = !this.addModalShown;
     },
-    newItem: function () {
-      this.selectedItem = null;
-      this.toggleModal();
-    },
     selectItem: function (item) {
       this.selectedItem = item;
       this.toggleModal();
@@ -109,11 +104,6 @@ export default {
 }
 </script>
 
-
-
 <style scoped>
 
-.columns {
-  flex-wrap: wrap;
-}
 </style>

src/views/Login.vue

@@ -46,3 +46,7 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>