From 15a5f615f91b18da5ecd0710fe71c406db4ec31e Mon Sep 17 00:00:00 2001
From: Isabelle Lafont <isalafont@gmail.com>
Date: Tue, 29 Dec 2020 13:25:47 +0100
Subject: [PATCH 1/3] feat design / Add editing lists modal

---
 .../stylesheets/components/_button.scss       |  4 ++
 app/assets/stylesheets/components/_list.scss  |  4 +-
 app/javascript/components/list.vue            | 53 ++++++++++++++++++-
 app/javascript/packs/application.js           |  3 --
 app/views/lists/index.html.erb                |  4 +-
 5 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/components/_button.scss b/app/assets/stylesheets/components/_button.scss
index e69de29..da3b9fa 100644
--- a/app/assets/stylesheets/components/_button.scss
+++ b/app/assets/stylesheets/components/_button.scss
@@ -0,0 +1,4 @@
+#editing-btn {
+  color: $vintage;
+  font-size: 14px;
+}
diff --git a/app/assets/stylesheets/components/_list.scss b/app/assets/stylesheets/components/_list.scss
index 1ed8883..ac32c1b 100644
--- a/app/assets/stylesheets/components/_list.scss
+++ b/app/assets/stylesheets/components/_list.scss
@@ -1,3 +1,5 @@
 .list-title {
-  margin: 30px 15px;
+  display: flex;
+  justify-content: space-between;
+  align-item: baseline;
 }
diff --git a/app/javascript/components/list.vue b/app/javascript/components/list.vue
index 853f2fe..6832df6 100644
--- a/app/javascript/components/list.vue
+++ b/app/javascript/components/list.vue
@@ -1,6 +1,30 @@
 <template>
   <div class="list">
-    <h6>{{ list.name }}</h6>
+    <div class="list-title">
+      <h6>{{ list.name }}</h6>
+      <i @click="editing=true" class="fas fa-ellipsis-h" id="editing-btn"></i>
+    </div>
+
+    <!-- Editing Modal Editing List -->
+    <div v-if="editing" class="modal-backdrop show"></div>
+
+    <div v-if="editing" @click="closeModal" class="modal show" style="display: block">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ list.name }}</h5>
+          </div>
+          <div class="modal-body">
+            <input v-model="name" class="form-control"></input>
+          </div>
+          <div class="modal-footer">
+            <button @click="save" type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- End Modal -->
+
 
     <draggable v-model="list.cards" v-bind="{group: 'cards'}" class="dragArea" @change="cardMoved">
       <card v-for="card in list.cards" :card="card" :list="list"></card>
@@ -25,11 +49,38 @@
     data: function() {
       return {
         editing: false,
+        name: this.list.name,
         message: ""
       }
     },
 
     methods: {
+      // Clicking backdrop will close modal
+      closeModal: function(event) {
+        if (event.target.classList.contains("modal")) { this.editing = false }
+      },
+
+      // Save Modal Edit name
+      save: function() {
+        var data = new FormData
+        data.append("list[name]", this.name)
+
+        Rails.ajax({
+          url: `/lists/${this.list.id}`,
+          type: "PATCH",
+          data: data,
+          dataType: "json",
+          success: (data) => {
+            const list_index = window.store.lists.findIndex((item) => item.id == this.list.id)
+            // const list_name = window.store.lists[list_index].list[name]
+            window.store.lists.splice(list_index, 1, data)
+
+            this.editing = false
+          }
+        })
+      },
+
+
       startEditing: function() {
         this.editing = true
         this.$nextTick(() => { this.$refs.message.focus() })
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 42bda86..793ceaa 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -29,9 +29,6 @@ import TurbolinksAdapter from 'vue-turbolinks'
 import Vue from "vue/dist/vue.esm"
 import App from "../app.vue"
 
-// Internal imports, e.g:
-// import { initSelect2 } from '../components/init_select2';
-
 window.store = {}
 Vue.use(TurbolinksAdapter)
 
diff --git a/app/views/lists/index.html.erb b/app/views/lists/index.html.erb
index 5e11d09..ab76f14 100644
--- a/app/views/lists/index.html.erb
+++ b/app/views/lists/index.html.erb
@@ -2,8 +2,8 @@
 <!-- <p id="notice"><%#= notice %></p> -->
 
 <div class="list-title">
-  <%= link_to 'New List', new_list_path %>
-  <hr />
+  <%#= link_to 'New List', new_list_path %>
+  <!-- <hr /> -->
 </div>
 
 <%= tag.div id: :boards, data: { lists: @lists.to_json(include: :cards) }

From 8e47af18cca371d0552217fd80a48dab7ca889d9 Mon Sep 17 00:00:00 2001
From: Isabelle Lafont <isalafont@gmail.com>
Date: Tue, 29 Dec 2020 14:30:53 +0100
Subject: [PATCH 2/3] clean code a little bit

---
 app/javascript/components/list.vue | 33 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/javascript/components/list.vue b/app/javascript/components/list.vue
index 6832df6..2b385f5 100644
--- a/app/javascript/components/list.vue
+++ b/app/javascript/components/list.vue
@@ -3,26 +3,26 @@
     <div class="list-title">
       <h6>{{ list.name }}</h6>
       <i @click="editing=true" class="fas fa-ellipsis-h" id="editing-btn"></i>
-    </div>
-
-    <!-- Editing Modal Editing List -->
-    <div v-if="editing" class="modal-backdrop show"></div>
-
-    <div v-if="editing" @click="closeModal" class="modal show" style="display: block">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">{{ list.name }}</h5>
-          </div>
-          <div class="modal-body">
-            <input v-model="name" class="form-control"></input>
-          </div>
-          <div class="modal-footer">
-            <button @click="save" type="button" class="btn btn-primary">Save changes</button>
+      <!-- Editing Modal Editing List -->
+      <div v-if="editing" class="modal-backdrop show"></div>
+
+      <div v-if="editing" @click="closeModal" class="modal show" style="display: block">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">{{ list.name }}</h5>
+            </div>
+            <div class="modal-body">
+              <input v-model="name" class="form-control"></input>
+            </div>
+            <div class="modal-footer">
+              <button @click="save" type="button" class="btn btn-primary">Save changes</button>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
     <!-- End Modal -->
 
 
@@ -72,7 +72,6 @@
           dataType: "json",
           success: (data) => {
             const list_index = window.store.lists.findIndex((item) => item.id == this.list.id)
-            // const list_name = window.store.lists[list_index].list[name]
             window.store.lists.splice(list_index, 1, data)
 
             this.editing = false

From 8a0e4107912317d923edb50404d4f17071bce42c Mon Sep 17 00:00:00 2001
From: Isabelle Lafont <isalafont@gmail.com>
Date: Tue, 29 Dec 2020 18:21:09 +0100
Subject: [PATCH 3/3] fix typo

---
 app/javascript/components/list.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/components/list.vue b/app/javascript/components/list.vue
index 2b385f5..ae1f814 100644
--- a/app/javascript/components/list.vue
+++ b/app/javascript/components/list.vue
@@ -10,7 +10,7 @@
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
-              <h5 class="modal-title">{{ list.name }}</h5>
+              <h5 class="modal-title">Edit column name</h5>
             </div>
             <div class="modal-body">
               <input v-model="name" class="form-control"></input>
@@ -32,7 +32,7 @@
 
     <a v-if="!editing" v-on:click="startEditing">Add a card</a>
     <textarea v-if="editing" ref="message" v-model="message" class="form-control mb-1"></textarea>
-    <button  v-if="editing" v-on:click="submitMessage" class="btn btn-primary"">Add</button>
+    <button  v-if="editing" v-on:click="submitMessage" class="btn btn-primary">Add</button>
     <a v-if="editing" v-on:click="editing=false">Cancel</a>
   </div>
 </template>