Draft: Feat/design card

app/assets/stylesheets/components/_button.scss

@@ -0,0 +1,4 @@
+#editing-btn {
+  color: $vintage;
+  font-size: 14px;
+}

app/assets/stylesheets/components/_list.scss

@@ -1,3 +1,5 @@
 .list-title {
-  margin: 30px 15px;
+  display: flex;
+  justify-content: space-between;
+  align-item: baseline;
 }

app/javascript/components/list.vue

@@ -1,14 +1,38 @@
 <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>
+      <!-- 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">Edit column 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 -->
+
 
     <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>
     </draggable>
 
     <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>
@@ -25,11 +49,37 @@
     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)
+            window.store.lists.splice(list_index, 1, data)
+
+            this.editing = false
+          }
+        })
+      },
+
+
       startEditing: function() {
         this.editing = true
         this.$nextTick(() => { this.$refs.message.focus() })

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)
 

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) }