From 1503343fde3b9e6ef80a2fc1b68ddf2bc0d8de74 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Thu, 16 Aug 2018 20:24:21 +0530
Subject: [PATCH 01/19] Show Create Kanban button if items present in list has
 select fieldtype

---
 ui/components/List/List.vue        | 41 ++++++++++++++----------------
 ui/components/List/ListActions.vue |  5 ++--
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/ui/components/List/List.vue b/ui/components/List/List.vue
index 9e99ba85..62859d09 100644
--- a/ui/components/List/List.vue
+++ b/ui/components/List/List.vue
@@ -1,26 +1,15 @@
 <template>
-        <div class="frappe-list">
-            <list-actions
-              :doctype="doctype"
-              :showDelete="checkList.length"
-              @new="$emit('newDoc')"
-              @delete="deleteCheckedItems"
-            />
-            <ul class="list-group">
-                <list-item v-for="doc of data" :key="doc.name"
-                    :id="doc.name"
-                    :isActive="doc.name === $route.params.name"
-                    :isChecked="isChecked(doc.name)"
-                    @clickItem="openForm(doc.name)"
-                    @checkItem="toggleCheck(doc.name)"
-                >
-                    <indicator v-if="hasIndicator" :color="getIndicatorColor(doc)" />
-                    <span class="d-inline-block ml-2">
-                        {{ doc[meta.titleField || 'name'] }}
-                    </span>
-                </list-item>
-            </ul>
-        </div>
+  <div class="frappe-list">
+    <list-actions :doctype="doctype" :showDelete="checkList.length" @new="$emit('newDoc')" :showCreateKanban="hasItems" @delete="deleteCheckedItems" />
+    <ul class="list-group">
+      <list-item v-for="doc of data" :key="doc.name" :id="doc.name" :isActive="doc.name === $route.params.name" :isChecked="isChecked(doc.name)" @clickItem="openForm(doc.name)" @checkItem="toggleCheck(doc.name)">
+        <indicator v-if="hasIndicator" :color="getIndicatorColor(doc)" />
+        <span class="d-inline-block ml-2">
+          {{ doc[meta.titleField || 'name'] }}
+        </span>
+      </list-item>
+    </ul>
+  </div>
 </template>
 <script>
 import frappe from 'frappejs';
@@ -47,6 +36,14 @@ export default {
     },
     hasIndicator() {
       return Boolean(this.meta.indicators);
+    },
+    hasItems() {
+      const fields = this.meta.fields;
+      const isSelectFieldPresent = fields.find(
+        field => field.fieldtype === 'Select'
+      );
+      if (isSelectFieldPresent && this.data.length > 0) return true;
+      else return false;
     }
   },
   created() {
diff --git a/ui/components/List/ListActions.vue b/ui/components/List/ListActions.vue
index 9901dea0..1bb31dc8 100644
--- a/ui/components/List/ListActions.vue
+++ b/ui/components/List/ListActions.vue
@@ -3,10 +3,11 @@
         <h5 class="m-0">{{ doctype }} List</h5>
         <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
         <button v-else class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
+        <button v-if="showCreateKanban" class="btn btn-primary btn-sm">Create Kanban</button>
     </div>
 </template>
 <script>
 export default {
-    props: ['doctype', 'showDelete']
-}
+  props: ['doctype', 'showDelete', 'showCreateKanban']
+};
 </script>

From 26469d2cc6ab731652c6b5344414b28a9653bd25 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Sun, 26 Aug 2018 13:31:18 +0530
Subject: [PATCH 02/19] Create Kanban modal for configuring kanban model

---
 models/doctype/Kanban/Kanban.js    | 46 ++++++++++++++++++++++++++++++
 models/doctype/Kanban/config.js    |  0
 models/index.js                    | 33 ++++++++++-----------
 ui/components/Form/Form.vue        |  6 ++--
 ui/components/Form/FormLayout.vue  | 11 ++++---
 ui/components/KanbanModal.vue      | 44 ++++++++++++++++++++++++++++
 ui/components/List/List.vue        | 25 +++++++++++++++-
 ui/components/List/ListActions.vue |  2 +-
 8 files changed, 143 insertions(+), 24 deletions(-)
 create mode 100644 models/doctype/Kanban/Kanban.js
 create mode 100644 models/doctype/Kanban/config.js
 create mode 100644 ui/components/KanbanModal.vue

diff --git a/models/doctype/Kanban/Kanban.js b/models/doctype/Kanban/Kanban.js
new file mode 100644
index 00000000..c7651000
--- /dev/null
+++ b/models/doctype/Kanban/Kanban.js
@@ -0,0 +1,46 @@
+let options = [];
+let referencedoctype = '';
+
+async function populateFieldsAndOptions(doctype){
+  const meta = await frappe.getMeta(doctype);
+  referencedoctype = doctype;
+  console.log(referencedoctype);
+  meta.fields.forEach(field => {
+    if(field.fieldtype==='Select')
+    options.push(field.fieldname)
+  });
+  return meta.fields;
+};
+
+module.exports = {
+    name: 'Kanban',
+    doctype: 'DocType',
+    naming: 'autoincrement',
+    isSingle: 0,
+    isChild: 0,
+    "keywordFields": [],
+    "fields": [
+      {
+        "fieldname": "kanbanname",
+        "label": "Kanban Name",
+        "fieldtype": "Data",
+        "required": 1
+      },
+      {
+        "fieldname": "referencedoctype",
+        "label": "Reference Doctype",
+        "fieldtype": "Data",
+        "value": 'something',
+        "required": 1
+      },
+      {
+        "fieldname": "sortby",
+        "label": "Sort By",
+        "fieldtype": "Select",
+        "options": options,
+        "required": 1,
+      }
+    ],
+    populateFieldsAndOptions
+};
+  
\ No newline at end of file
diff --git a/models/doctype/Kanban/config.js b/models/doctype/Kanban/config.js
new file mode 100644
index 00000000..e69de29b
diff --git a/models/index.js b/models/index.js
index 4e0abb23..bc2a3556 100644
--- a/models/index.js
+++ b/models/index.js
@@ -1,17 +1,18 @@
 module.exports = {
-    models: {
-        FilterItem: require('./doctype/FilterItem/FilterItem.js'),
-        FilterGroup: require('./doctype/FilterGroup/FilterGroup.js'),
-        FilterSelector: require('./doctype/FilterSelector/FilterSelector.js'),
-        NumberSeries: require('./doctype/NumberSeries/NumberSeries.js'),
-        PrintFormat: require('./doctype/PrintFormat/PrintFormat.js'),
-        Role: require('./doctype/Role/Role.js'),
-        Session: require('./doctype/Session/Session.js'),
-        SingleValue: require('./doctype/SingleValue/SingleValue.js'),
-        SystemSettings: require('./doctype/SystemSettings/SystemSettings.js'),
-        ToDo: require('./doctype/ToDo/ToDo.js'),
-        User: require('./doctype/User/User.js'),
-        UserRole: require('./doctype/UserRole/UserRole.js'),
-        File: require('./doctype/File/File.js'),
-    }
-}
+  models: {
+    FilterItem: require('./doctype/FilterItem/FilterItem.js'),
+    FilterGroup: require('./doctype/FilterGroup/FilterGroup.js'),
+    FilterSelector: require('./doctype/FilterSelector/FilterSelector.js'),
+    NumberSeries: require('./doctype/NumberSeries/NumberSeries.js'),
+    PrintFormat: require('./doctype/PrintFormat/PrintFormat.js'),
+    Role: require('./doctype/Role/Role.js'),
+    Session: require('./doctype/Session/Session.js'),
+    SingleValue: require('./doctype/SingleValue/SingleValue.js'),
+    SystemSettings: require('./doctype/SystemSettings/SystemSettings.js'),
+    ToDo: require('./doctype/ToDo/ToDo.js'),
+    User: require('./doctype/User/User.js'),
+    UserRole: require('./doctype/UserRole/UserRole.js'),
+    File: require('./doctype/File/File.js'),
+    Kanban: require('./doctype/Kanban/Kanban.js')
+  }
+};
diff --git a/ui/components/Form/Form.vue b/ui/components/Form/Form.vue
index e9ac15f0..fe3d5372 100644
--- a/ui/components/Form/Form.vue
+++ b/ui/components/Form/Form.vue
@@ -56,7 +56,10 @@ export default {
     try {
       this.doc = await frappe.getDoc(this.doctype, this.name);
 
-      if (this.doc._notInserted && this.meta.fields.map(df => df.fieldname).includes('name')) {
+      if (
+        this.doc._notInserted &&
+        this.meta.fields.map(df => df.fieldname).includes('name')
+      ) {
         // For a user editable name field,
         // it should be unset since it is autogenerated
         this.doc.set('name', '');
@@ -89,7 +92,6 @@ export default {
         }
 
         this.$emit('save', this.doc);
-
       } catch (e) {
         console.error(e);
         return;
diff --git a/ui/components/Form/FormLayout.vue b/ui/components/Form/FormLayout.vue
index 58048f5f..555ed2d6 100644
--- a/ui/components/Form/FormLayout.vue
+++ b/ui/components/Form/FormLayout.vue
@@ -26,6 +26,7 @@ export default {
     const dataObj = {};
     for (let df of this.fields) {
       dataObj[df.fieldname] = this.doc[df.fieldname];
+      console.log(dataObj[df.fieldname]);
 
       if (df.fieldtype === 'Table' && !dataObj[df.fieldname]) {
         dataObj[df.fieldname] = [];
@@ -80,15 +81,17 @@ export default {
 
       if (!layout) {
         const fields = this.fields.map(df => df.fieldname);
-        layout = [{
-          columns: [{ fields }]
-        }];
+        layout = [
+          {
+            columns: [{ fields }]
+          }
+        ];
       }
 
       if (Array.isArray(layout)) {
         layout = {
           sections: layout
-        }
+        };
       }
       return layout;
     }
diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
new file mode 100644
index 00000000..32eec8e2
--- /dev/null
+++ b/ui/components/KanbanModal.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <form-layout 
+        :doc="doc"
+        :fields="fields"
+        />
+        <button class="btn btn-primary btn-sm" @click="submit">Submit</button>
+        <button class="btn btn-danger btn-sm" @click="closeModal">Cancel</button>
+    </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import FormLayout from './Form/FormLayout';
+import Observable from '../../utils/observable';
+export default {
+  name: 'KanbanModal',
+  props: ['refdoctype'],
+  components: {
+    FormLayout
+  },
+  created() {
+    this.doc = new Observable();
+  },
+  computed: {
+    meta() {
+      return frappe.getMeta('Kanban');
+    },
+    fields() {
+      return this.meta.fields;
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$modal.hide();
+    },
+    submit() {
+      const { kanbanname, sortby, referencedoctype } = this.doc;
+      console.log(kanbanname, sortby, referencedoctype);
+      console.log(this.doc);
+    }
+  }
+};
+</script>
diff --git a/ui/components/List/List.vue b/ui/components/List/List.vue
index 62859d09..598072e1 100644
--- a/ui/components/List/List.vue
+++ b/ui/components/List/List.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="frappe-list">
-    <list-actions :doctype="doctype" :showDelete="checkList.length" @new="$emit('newDoc')" :showCreateKanban="hasItems" @delete="deleteCheckedItems" />
+    <list-actions :doctype="doctype" :showDelete="checkList.length" @new="$emit('newDoc')" :showCreateKanban="hasItems" @delete="deleteCheckedItems" @createKanban="createKanban" />
     <ul class="list-group">
       <list-item v-for="doc of data" :key="doc.name" :id="doc.name" :isActive="doc.name === $route.params.name" :isChecked="isChecked(doc.name)" @clickItem="openForm(doc.name)" @checkItem="toggleCheck(doc.name)">
         <indicator v-if="hasIndicator" :color="getIndicatorColor(doc)" />
@@ -15,6 +15,9 @@
 import frappe from 'frappejs';
 import ListActions from './ListActions';
 import ListItem from './ListItem';
+// import FormLayout from '../Form/FormLayout';
+import KanbanModel from '../../../models/doctype/Kanban/Kanban';
+import KanbanModal from '../KanbanModal';
 
 export default {
   name: 'List',
@@ -105,6 +108,26 @@ export default {
     },
     getIndicatorColor(doc) {
       return this.meta.getIndicatorColor(doc);
+    },
+    async createKanban() {
+      // const kanban = frappe.getMeta('Kanban');
+      // const fields = kanban.fields;
+      // const newDoc = await frappe.getNewDoc('Kanban');
+      KanbanModel.populateFieldsAndOptions(this.doctype).then(
+        refDoctypeFields => {
+          console.log('promise resolved');
+          this.$modal.show({
+            component: KanbanModal,
+            modalProps: {
+              title: 'Create Kanban'
+            },
+            props: {
+              refdoctype: this.doctype
+              // doc: newDoc
+            }
+          });
+        }
+      );
     }
   }
 };
diff --git a/ui/components/List/ListActions.vue b/ui/components/List/ListActions.vue
index 1bb31dc8..8938f912 100644
--- a/ui/components/List/ListActions.vue
+++ b/ui/components/List/ListActions.vue
@@ -3,7 +3,7 @@
         <h5 class="m-0">{{ doctype }} List</h5>
         <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
         <button v-else class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
-        <button v-if="showCreateKanban" class="btn btn-primary btn-sm">Create Kanban</button>
+        <button v-if="showCreateKanban" class="btn btn-primary btn-sm" @click="$emit('createKanban')">Create Kanban</button>
     </div>
 </template>
 <script>

From 3b8115a765ab0dd243b7714893e98c6c7c1f5ba6 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Sat, 8 Sep 2018 13:28:12 +0530
Subject: [PATCH 03/19] Create Custom Kanban Modal for configuring kanbans

---
 models/doctype/Kanban/Kanban.js   |   1 -
 models/doctype/Kanban/config.js   |   0
 ui/components/Form/FormLayout.vue |   2 -
 ui/components/KanbanModal.vue     | 105 ++++++++++++++++++++++++++----
 ui/components/List/List.vue       |  43 +++++++-----
 5 files changed, 117 insertions(+), 34 deletions(-)
 delete mode 100644 models/doctype/Kanban/config.js

diff --git a/models/doctype/Kanban/Kanban.js b/models/doctype/Kanban/Kanban.js
index c7651000..da6962f3 100644
--- a/models/doctype/Kanban/Kanban.js
+++ b/models/doctype/Kanban/Kanban.js
@@ -30,7 +30,6 @@ module.exports = {
         "fieldname": "referencedoctype",
         "label": "Reference Doctype",
         "fieldtype": "Data",
-        "value": 'something',
         "required": 1
       },
       {
diff --git a/models/doctype/Kanban/config.js b/models/doctype/Kanban/config.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/ui/components/Form/FormLayout.vue b/ui/components/Form/FormLayout.vue
index 555ed2d6..e4ac6d05 100644
--- a/ui/components/Form/FormLayout.vue
+++ b/ui/components/Form/FormLayout.vue
@@ -26,8 +26,6 @@ export default {
     const dataObj = {};
     for (let df of this.fields) {
       dataObj[df.fieldname] = this.doc[df.fieldname];
-      console.log(dataObj[df.fieldname]);
-
       if (df.fieldtype === 'Table' && !dataObj[df.fieldname]) {
         dataObj[df.fieldname] = [];
       }
diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
index 32eec8e2..ab058ea4 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/KanbanModal.vue
@@ -1,11 +1,32 @@
 <template>
     <div>
-        <form-layout 
-        :doc="doc"
-        :fields="fields"
-        />
-        <button class="btn btn-primary btn-sm" @click="submit">Submit</button>
-        <button class="btn btn-danger btn-sm" @click="closeModal">Cancel</button>
+      <div class="modal-mask">
+        <div class="modal-wrapper">
+          <div class="modal-container">
+            <div class="modal-header">
+              Create Kanban for {{refdoctype}}
+            </div>
+            <div class="modal-body">
+              <form>
+                <div :key="key" v-for="(field,key) in fields">
+                <label>
+                  {{field.label}}
+                  <input v-if="fieldtypes[field.fieldtype] === 'text'" type="text" />
+                  <select v-if="fieldtypes[field.fieldtype] === 'select'">
+                    <option v-for="(option) in options" :key="option" :value="option">
+                      {{option}}
+                    </option>
+                  </select>  
+                </label>
+                </div>
+              </form>
+            </div>
+            <div class="modal-footer">
+              <button @click="$emit('closeKanbanModal')">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 </template>
 
@@ -15,10 +36,7 @@ import FormLayout from './Form/FormLayout';
 import Observable from '../../utils/observable';
 export default {
   name: 'KanbanModal',
-  props: ['refdoctype'],
-  components: {
-    FormLayout
-  },
+  props: ['refdoctype', 'closeKanbanModal'],
   created() {
     this.doc = new Observable();
   },
@@ -28,12 +46,37 @@ export default {
     },
     fields() {
       return this.meta.fields;
+    },
+    fieldtypes() {
+      return {
+        Select: 'select',
+        Data: 'text'
+      };
+    },
+    options() {
+      const refdoctypemeta = frappe.getMeta(this.refdoctype);
+      const options = [];
+      refdoctypemeta.fields.forEach(field => {
+        if (field.fieldtype === 'Select') options.push(field.fieldname);
+      });
+      return options;
     }
   },
   methods: {
-    closeModal() {
-      this.$modal.hide();
-    },
+    submit() {
+      const { kanbanname, sortby, referencedoctype } = this.doc;
+      console.log(kanbanname, sortby, referencedoctype);
+      console.log(this.doc);
+    }
+  },
+  created() {
+    console.log(this.meta.fields);
+    console.log(this.options);
+  }
+};
+</script>
+  },
+  methods: {
     submit() {
       const { kanbanname, sortby, referencedoctype } = this.doc;
       console.log(kanbanname, sortby, referencedoctype);
@@ -42,3 +85,39 @@ export default {
   }
 };
 </script>
+
+<style>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  max-width: 80%;
+  min-height: 30%;
+  background-color: white;
+  margin: 0 auto;
+  border-radius: 5px;
+}
+
+.modal-header {
+}
+
+.modal-body {
+  display: block;
+}
+
+.modal-footer {
+}
+</style>
diff --git a/ui/components/List/List.vue b/ui/components/List/List.vue
index 598072e1..1618dd58 100644
--- a/ui/components/List/List.vue
+++ b/ui/components/List/List.vue
@@ -9,6 +9,7 @@
         </span>
       </list-item>
     </ul>
+    <kanban-modal v-if="showKanbanModal" :refdoctype="doctype" @closeKanbanModal='closeKanbanModal' />
   </div>
 </template>
 <script>
@@ -24,13 +25,15 @@ export default {
   props: ['doctype'],
   components: {
     ListActions,
-    ListItem
+    ListItem,
+    KanbanModal
   },
   data() {
     return {
       data: [],
       checkList: [],
-      activeItem: ''
+      activeItem: '',
+      showKanbanModal: false
     };
   },
   computed: {
@@ -109,25 +112,29 @@ export default {
     getIndicatorColor(doc) {
       return this.meta.getIndicatorColor(doc);
     },
-    async createKanban() {
+    createKanban() {
       // const kanban = frappe.getMeta('Kanban');
       // const fields = kanban.fields;
       // const newDoc = await frappe.getNewDoc('Kanban');
-      KanbanModel.populateFieldsAndOptions(this.doctype).then(
-        refDoctypeFields => {
-          console.log('promise resolved');
-          this.$modal.show({
-            component: KanbanModal,
-            modalProps: {
-              title: 'Create Kanban'
-            },
-            props: {
-              refdoctype: this.doctype
-              // doc: newDoc
-            }
-          });
-        }
-      );
+      // KanbanModel.populateFieldsAndOptions(this.doctype).then(
+      //   refDoctypeFields => {
+      //     this.$modal.show({
+      //       component: KanbanModal,
+      //       modalProps: {
+      //         title: 'Create Kanban'
+      //       },
+      //       props: {
+      //         refdoctype: this.doctype
+      //         // doc: newDoc
+      //       }
+      //     });
+      //   }
+      // );
+      console.log('creating kanban');
+      this.showKanbanModal = true;
+    },
+    closeKanbanModal() {
+      this.showKanbanModal = false;
     }
   }
 };

From 7a59d31f063a0b726c34d6bfa2c68316a991ad12 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Sat, 8 Sep 2018 23:47:15 +0530
Subject: [PATCH 04/19] Add insert Kanban to backend on creating kanban

---
 models/doctype/Kanban/Kanban.js | 17 +----------
 ui/components/KanbanModal.vue   | 50 ++++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/models/doctype/Kanban/Kanban.js b/models/doctype/Kanban/Kanban.js
index da6962f3..ee8573d2 100644
--- a/models/doctype/Kanban/Kanban.js
+++ b/models/doctype/Kanban/Kanban.js
@@ -1,17 +1,3 @@
-let options = [];
-let referencedoctype = '';
-
-async function populateFieldsAndOptions(doctype){
-  const meta = await frappe.getMeta(doctype);
-  referencedoctype = doctype;
-  console.log(referencedoctype);
-  meta.fields.forEach(field => {
-    if(field.fieldtype==='Select')
-    options.push(field.fieldname)
-  });
-  return meta.fields;
-};
-
 module.exports = {
     name: 'Kanban',
     doctype: 'DocType',
@@ -36,10 +22,9 @@ module.exports = {
         "fieldname": "sortby",
         "label": "Sort By",
         "fieldtype": "Select",
-        "options": options,
+        "options": [],
         "required": 1,
       }
     ],
-    populateFieldsAndOptions
 };
   
\ No newline at end of file
diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
index ab058ea4..af70d5e9 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/KanbanModal.vue
@@ -11,14 +11,19 @@
                 <div :key="key" v-for="(field,key) in fields">
                 <label>
                   {{field.label}}
-                  <input v-if="fieldtypes[field.fieldtype] === 'text'" type="text" />
-                  <select v-if="fieldtypes[field.fieldtype] === 'select'">
+                  <input v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]"/>
+                  <select v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
                     <option v-for="(option) in options" :key="option" :value="option">
                       {{option}}
                     </option>
                   </select>  
                 </label>
                 </div>
+                <div>
+                  <button @click="submit" type="submit" value="submit">
+                    submit
+                  </button>
+                </div>
               </form>
             </div>
             <div class="modal-footer">
@@ -40,6 +45,29 @@ export default {
   created() {
     this.doc = new Observable();
   },
+  data() {
+    return {
+      configdata: {
+        kanbanname: '',
+        referencedoctype: this.refdoctype,
+        sortby: ''
+      }
+    };
+  },
+  methods: {
+    async submit(e) {
+      e.preventDefault();
+      console.log('submit');
+      const { kanbanname, referencedoctype, sortby } = this.configdata;
+      console.log(kanbanname, referencedoctype, sortby);
+      const newDoc = await frappe.getNewDoc('Kanban');
+      Object.keys(this.configdata).forEach(
+        field => (newDoc[field] = this.configdata[field])
+      );
+      console.log('newdoc', newDoc);
+      newDoc.insert();
+    }
+  },
   computed: {
     meta() {
       return frappe.getMeta('Kanban');
@@ -62,26 +90,10 @@ export default {
       return options;
     }
   },
-  methods: {
-    submit() {
-      const { kanbanname, sortby, referencedoctype } = this.doc;
-      console.log(kanbanname, sortby, referencedoctype);
-      console.log(this.doc);
-    }
-  },
   created() {
     console.log(this.meta.fields);
     console.log(this.options);
-  }
-};
-</script>
-  },
-  methods: {
-    submit() {
-      const { kanbanname, sortby, referencedoctype } = this.doc;
-      console.log(kanbanname, sortby, referencedoctype);
-      console.log(this.doc);
-    }
+    console.log('data', this.data);
   }
 };
 </script>

From d577ac791236ba12c158af609aabde3c61fcfbe0 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Sun, 9 Sep 2018 00:09:43 +0530
Subject: [PATCH 05/19] Add frappe styles in Kanban Modal

---
 ui/components/KanbanModal.vue | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
index af70d5e9..f4c91686 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/KanbanModal.vue
@@ -3,16 +3,16 @@
       <div class="modal-mask">
         <div class="modal-wrapper">
           <div class="modal-container">
-            <div class="modal-header">
+            <h3 class="modal-header">
               Create Kanban for {{refdoctype}}
-            </div>
+            </h3>
             <div class="modal-body">
               <form>
                 <div :key="key" v-for="(field,key) in fields">
                 <label>
                   {{field.label}}
-                  <input v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]"/>
-                  <select v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
+                  <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]"/>
+                  <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
                     <option v-for="(option) in options" :key="option" :value="option">
                       {{option}}
                     </option>
@@ -20,14 +20,14 @@
                 </label>
                 </div>
                 <div>
-                  <button @click="submit" type="submit" value="submit">
+                  <button class="btn btn-primary btn-lg" @click="submit" type="submit" value="submit" :disabled="submitdisabled">
                     submit
                   </button>
                 </div>
               </form>
             </div>
             <div class="modal-footer">
-              <button @click="$emit('closeKanbanModal')">Close</button>
+              <button class="btn btn-danger btn-lg" @click="$emit('closeKanbanModal')">Close</button>
             </div>
           </div>
         </div>
@@ -66,6 +66,7 @@ export default {
       );
       console.log('newdoc', newDoc);
       newDoc.insert();
+      this.$emit('closeKanbanModal');
     }
   },
   computed: {
@@ -88,12 +89,20 @@ export default {
         if (field.fieldtype === 'Select') options.push(field.fieldname);
       });
       return options;
+    },
+    disabled() {
+      return field => {
+        return field.fieldname === 'referencedoctype' ? true : false;
+      };
+    },
+    submitdisabled() {
+      let isInvalid = false;
+      const configFields = Object.keys(this.configdata);
+      configFields.forEach(field => {
+        if (this.configdata[field] === '') isInvalid = true;
+      });
+      return isInvalid;
     }
-  },
-  created() {
-    console.log(this.meta.fields);
-    console.log(this.options);
-    console.log('data', this.data);
   }
 };
 </script>

From e051b69e1ec2ddb652ecdf36f070132f5e7d0847 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Mon, 17 Sep 2018 00:02:26 +0530
Subject: [PATCH 06/19] Add childtype KanbanList

---
 models/doctype/Kanban/Kanban.js         | 59 +++++++++---------
 models/doctype/KanbanList/KanbanList.js | 14 +++++
 models/index.js                         |  3 +-
 ui/components/KanbanModal.vue           | 81 ++++++++++++++++---------
 4 files changed, 98 insertions(+), 59 deletions(-)
 create mode 100644 models/doctype/KanbanList/KanbanList.js

diff --git a/models/doctype/Kanban/Kanban.js b/models/doctype/Kanban/Kanban.js
index ee8573d2..6cfd04a1 100644
--- a/models/doctype/Kanban/Kanban.js
+++ b/models/doctype/Kanban/Kanban.js
@@ -1,30 +1,33 @@
 module.exports = {
-    name: 'Kanban',
-    doctype: 'DocType',
-    naming: 'autoincrement',
-    isSingle: 0,
-    isChild: 0,
-    "keywordFields": [],
-    "fields": [
-      {
-        "fieldname": "kanbanname",
-        "label": "Kanban Name",
-        "fieldtype": "Data",
-        "required": 1
-      },
-      {
-        "fieldname": "referencedoctype",
-        "label": "Reference Doctype",
-        "fieldtype": "Data",
-        "required": 1
-      },
-      {
-        "fieldname": "sortby",
-        "label": "Sort By",
-        "fieldtype": "Select",
-        "options": [],
-        "required": 1,
-      }
-    ],
+  name: 'Kanban',
+  doctype: 'DocType',
+  naming: 'autoincrement',
+  keywordFields: ['kanbanname', 'referencedoctype', 'sortby'],
+  fields: [
+    {
+      fieldname: 'kanbanname',
+      label: 'Kanban Name',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'referencedoctype',
+      label: 'Reference Doctype',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'sortby',
+      label: 'Sort By',
+      fieldtype: 'Select',
+      options: [],
+      required: 1
+    },
+    {
+      fieldname: 'lists',
+      label: 'Lists',
+      fieldType: 'Table',
+      childType: 'KanbanList'
+    }
+  ]
 };
-  
\ No newline at end of file
diff --git a/models/doctype/KanbanList/KanbanList.js b/models/doctype/KanbanList/KanbanList.js
new file mode 100644
index 00000000..c88210b5
--- /dev/null
+++ b/models/doctype/KanbanList/KanbanList.js
@@ -0,0 +1,14 @@
+module.exports = {
+  name: 'KanbanList',
+  doctype: 'DocType',
+  isChild: 1,
+  naming: 'random',
+  fields: [
+    {
+      label: 'List Name',
+      fieldname: 'listname',
+      fieldtype: 'Data',
+      required: 1
+    }
+  ]
+};
diff --git a/models/index.js b/models/index.js
index bc2a3556..9515ec4f 100644
--- a/models/index.js
+++ b/models/index.js
@@ -13,6 +13,7 @@ module.exports = {
     User: require('./doctype/User/User.js'),
     UserRole: require('./doctype/UserRole/UserRole.js'),
     File: require('./doctype/File/File.js'),
-    Kanban: require('./doctype/Kanban/Kanban.js')
+    Kanban: require('./doctype/Kanban/Kanban.js'),
+    KanbanList: require('./doctype/KanbanList/KanbanList.js')
   }
 };
diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
index f4c91686..1c18dad5 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/KanbanModal.vue
@@ -1,38 +1,38 @@
 <template>
-    <div>
-      <div class="modal-mask">
-        <div class="modal-wrapper">
-          <div class="modal-container">
-            <h3 class="modal-header">
-              Create Kanban for {{refdoctype}}
-            </h3>
-            <div class="modal-body">
-              <form>
-                <div :key="key" v-for="(field,key) in fields">
+  <div>
+    <div class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <h3 class="modal-header">
+            Create Kanban for {{refdoctype}}
+          </h3>
+          <div class="modal-body">
+            <form>
+              <div :key="key" v-for="(field,key) in fields">
                 <label>
                   {{field.label}}
-                  <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]"/>
-                  <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
+                  <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
+                  <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby" @change="updateLists">
                     <option v-for="(option) in options" :key="option" :value="option">
                       {{option}}
                     </option>
-                  </select>  
+                  </select>
                 </label>
-                </div>
-                <div>
-                  <button class="btn btn-primary btn-lg" @click="submit" type="submit" value="submit" :disabled="submitdisabled">
-                    submit
-                  </button>
-                </div>
-              </form>
-            </div>
-            <div class="modal-footer">
-              <button class="btn btn-danger btn-lg" @click="$emit('closeKanbanModal')">Close</button>
-            </div>
+              </div>
+              <div>
+                <button class="btn btn-primary btn-lg" @click="submit" type="submit" value="submit" :disabled="submitdisabled">
+                  submit
+                </button>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-danger btn-lg" @click="$emit('closeKanbanModal')">Close</button>
           </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -50,23 +50,44 @@ export default {
       configdata: {
         kanbanname: '',
         referencedoctype: this.refdoctype,
-        sortby: ''
+        sortby: '',
+        lists: []
       }
     };
   },
   methods: {
     async submit(e) {
       e.preventDefault();
-      console.log('submit');
       const { kanbanname, referencedoctype, sortby } = this.configdata;
-      console.log(kanbanname, referencedoctype, sortby);
       const newDoc = await frappe.getNewDoc('Kanban');
-      Object.keys(this.configdata).forEach(
-        field => (newDoc[field] = this.configdata[field])
-      );
+      console.log('here', newDoc);
+      Object.keys(this.configdata).forEach(field => {
+        newDoc[field] = this.configdata[field];
+      });
+      newDoc._meta.fields.forEach(field => {
+        if (fieldtype === 'Select') field.options = this.options;
+      });
       console.log('newdoc', newDoc);
       newDoc.insert();
       this.$emit('closeKanbanModal');
+    },
+    async updateLists() {
+      const refdoctypemeta = await frappe.getMeta(this.refdoctype);
+      const sortField = refdoctypemeta.fields.find(
+        field =>
+          field.fieldtype === 'Select' &&
+          field.fieldname === this.configdata.sortby
+      );
+      const columns = sortField.options.map(column => {
+        const newColumn = frappe.getNewDoc('KanbanList');
+        return newColumn.then(doc => {
+          doc.listname = column;
+          return doc;
+        });
+      });
+      Promise.all(columns).then(kanbanColumns => {
+        this.configdata.lists = kanbanColumns;
+      });
     }
   },
   computed: {

From 7695e7dbaa43ffc2e665b4e07e67aba78ff230c5 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Sun, 30 Sep 2018 18:59:12 +0530
Subject: [PATCH 07/19] Add KanbanCard model and Initialise new cards on
 creation of Kanban

---
 models/doctype/Kanban/Kanban.js         |  11 ++-
 models/doctype/KanbanCard/KanbanCard.js |  32 ++++++
 models/doctype/KanbanList/KanbanList.js |   3 +-
 models/index.js                         |   3 +-
 ui/components/KanbanModal.vue           | 126 +++++++++++++++---------
 ui/components/List/List.vue             |  18 ----
 6 files changed, 124 insertions(+), 69 deletions(-)
 create mode 100644 models/doctype/KanbanCard/KanbanCard.js

diff --git a/models/doctype/Kanban/Kanban.js b/models/doctype/Kanban/Kanban.js
index 6cfd04a1..7b7f89d8 100644
--- a/models/doctype/Kanban/Kanban.js
+++ b/models/doctype/Kanban/Kanban.js
@@ -26,8 +26,15 @@ module.exports = {
     {
       fieldname: 'lists',
       label: 'Lists',
-      fieldType: 'Table',
-      childType: 'KanbanList'
+      fieldtype: 'Table',
+      childtype: 'KanbanList'
+    },
+    {
+      fieldname: 'titlefield',
+      label: 'Title Field for Cards',
+      fieldtype: 'Select',
+      options: [],
+      required: 1
     }
   ]
 };
diff --git a/models/doctype/KanbanCard/KanbanCard.js b/models/doctype/KanbanCard/KanbanCard.js
new file mode 100644
index 00000000..2eba10d6
--- /dev/null
+++ b/models/doctype/KanbanCard/KanbanCard.js
@@ -0,0 +1,32 @@
+module.exports = {
+  name: 'KanbanCard',
+  doctype: 'DocType',
+  naming: 'random',
+  fields: [
+    {
+      fieldname: 'cardtitle',
+      label: 'Card Title',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'listname',
+      label: 'Add To List',
+      fieldtype: 'Select',
+      options: [],
+      required: 1
+    },
+    {
+      fieldname: 'boardname',
+      label: 'Kanban board',
+      fieldtype: 'Data',
+      required: 1
+    },
+    {
+      fieldname: 'refdoctypename',
+      label: 'Reference Doctype Name',
+      fieldtype: 'Data',
+      required: 1
+    }
+  ]
+};
diff --git a/models/doctype/KanbanList/KanbanList.js b/models/doctype/KanbanList/KanbanList.js
index c88210b5..b0792981 100644
--- a/models/doctype/KanbanList/KanbanList.js
+++ b/models/doctype/KanbanList/KanbanList.js
@@ -7,8 +7,7 @@ module.exports = {
     {
       label: 'List Name',
       fieldname: 'listname',
-      fieldtype: 'Data',
-      required: 1
+      fieldtype: 'Data'
     }
   ]
 };
diff --git a/models/index.js b/models/index.js
index 9515ec4f..16f912d1 100644
--- a/models/index.js
+++ b/models/index.js
@@ -14,6 +14,7 @@ module.exports = {
     UserRole: require('./doctype/UserRole/UserRole.js'),
     File: require('./doctype/File/File.js'),
     Kanban: require('./doctype/Kanban/Kanban.js'),
-    KanbanList: require('./doctype/KanbanList/KanbanList.js')
+    KanbanList: require('./doctype/KanbanList/KanbanList.js'),
+    KanbanCard: require('./doctype/KanbanCard/KanbanCard.js')
   }
 };
diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
index 1c18dad5..45f5a4c9 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/KanbanModal.vue
@@ -12,8 +12,8 @@
                 <label>
                   {{field.label}}
                   <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
-                  <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby" @change="updateLists">
-                    <option v-for="(option) in options" :key="option" :value="option">
+                  <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata[field.fieldname]" @change="updateLists">
+                    <option v-for="(option) in options[field.fieldname]" :key="option" :value="option">
                       {{option}}
                     </option>
                   </select>
@@ -42,33 +42,76 @@ import Observable from '../../utils/observable';
 export default {
   name: 'KanbanModal',
   props: ['refdoctype', 'closeKanbanModal'],
-  created() {
-    this.doc = new Observable();
-  },
   data() {
     return {
       configdata: {
         kanbanname: '',
         referencedoctype: this.refdoctype,
         sortby: '',
-        lists: []
+        lists: [],
+        titlefield: ''
       }
     };
   },
+  created() {
+    this.doc = new Observable();
+  },
+  computed: {
+    meta() {
+      return frappe.getMeta('Kanban');
+    },
+    fields() {
+      console.log(this.meta.fields);
+      return this.meta.fields;
+    },
+    fieldtypes() {
+      return {
+        Select: 'select',
+        Data: 'text',
+        Table: 'table'
+      };
+    },
+    options() {
+      const refdoctypemeta = frappe.getMeta(this.refdoctype);
+      const options = {
+        sortby: [],
+        titlefield: []
+      };
+      refdoctypemeta.fields.forEach(field => {
+        if (field.fieldtype === 'Select') options.sortby.push(field.fieldname);
+        else if (field.fieldtype === 'Data')
+          options.titlefield.push(field.fieldname);
+      });
+      return options;
+    },
+    disabled() {
+      return field => {
+        return field.fieldname === 'referencedoctype' ? true : false;
+      };
+    },
+    submitdisabled() {
+      let isInvalid = false;
+      const configFields = Object.keys(this.configdata);
+      configFields.forEach(field => {
+        if (this.configdata[field] === '') isInvalid = true;
+      });
+      return isInvalid;
+    }
+  },
   methods: {
     async submit(e) {
       e.preventDefault();
-      const { kanbanname, referencedoctype, sortby } = this.configdata;
       const newDoc = await frappe.getNewDoc('Kanban');
       console.log('here', newDoc);
       Object.keys(this.configdata).forEach(field => {
         newDoc[field] = this.configdata[field];
       });
       newDoc._meta.fields.forEach(field => {
-        if (fieldtype === 'Select') field.options = this.options;
+        if (field.fieldtype === 'Select') field.options = this.options;
       });
       console.log('newdoc', newDoc);
       newDoc.insert();
+      this.initCards();
       this.$emit('closeKanbanModal');
     },
     async updateLists() {
@@ -85,44 +128,41 @@ export default {
           return doc;
         });
       });
+      console.log(columns);
       Promise.all(columns).then(kanbanColumns => {
+        console.log(kanbanColumns);
         this.configdata.lists = kanbanColumns;
+        console.log(this.configdata.lists);
       });
-    }
-  },
-  computed: {
-    meta() {
-      return frappe.getMeta('Kanban');
     },
-    fields() {
-      return this.meta.fields;
-    },
-    fieldtypes() {
-      return {
-        Select: 'select',
-        Data: 'text'
-      };
-    },
-    options() {
-      const refdoctypemeta = frappe.getMeta(this.refdoctype);
-      const options = [];
-      refdoctypemeta.fields.forEach(field => {
-        if (field.fieldtype === 'Select') options.push(field.fieldname);
+    async initCards() {
+      const refdoctypemeta = await frappe.getMeta(this.refdoctype);
+      const refdoctypefields = refdoctypemeta.fields.map(
+        field => field.fieldname
+      );
+      console.log('refdoctypefields', refdoctypefields);
+      const allItems = await frappe.db.getAll({
+        doctype: this.refdoctype,
+        fields: ['name', ...refdoctypefields]
       });
-      return options;
-    },
-    disabled() {
-      return field => {
-        return field.fieldname === 'referencedoctype' ? true : false;
-      };
-    },
-    submitdisabled() {
-      let isInvalid = false;
-      const configFields = Object.keys(this.configdata);
-      configFields.forEach(field => {
-        if (this.configdata[field] === '') isInvalid = true;
+      console.log('allitems', allItems);
+      console.log(this.configdata.kanbanname);
+      const board = await frappe.db.getAll({
+        doctype: 'Kanban',
+        fields: ['name'],
+        filters: { kanbanname: this.configdata.kanbanname }
+      });
+      console.log(board);
+      allItems.forEach(item => {
+        const newCard = frappe.getNewDoc('KanbanCard');
+        newCard.then(doc => {
+          doc.boardname = board[0].name;
+          doc.refdoctypename = this.configdata.referencedoctype;
+          doc.listname = item[this.configdata.sortby];
+          doc.cardtitle = item[this.configdata.titlefield];
+          doc.insert();
+        });
       });
-      return isInvalid;
     }
   }
 };
@@ -153,13 +193,7 @@ export default {
   border-radius: 5px;
 }
 
-.modal-header {
-}
-
 .modal-body {
   display: block;
 }
-
-.modal-footer {
-}
 </style>
diff --git a/ui/components/List/List.vue b/ui/components/List/List.vue
index 1618dd58..eab195d4 100644
--- a/ui/components/List/List.vue
+++ b/ui/components/List/List.vue
@@ -16,7 +16,6 @@
 import frappe from 'frappejs';
 import ListActions from './ListActions';
 import ListItem from './ListItem';
-// import FormLayout from '../Form/FormLayout';
 import KanbanModel from '../../../models/doctype/Kanban/Kanban';
 import KanbanModal from '../KanbanModal';
 
@@ -113,23 +112,6 @@ export default {
       return this.meta.getIndicatorColor(doc);
     },
     createKanban() {
-      // const kanban = frappe.getMeta('Kanban');
-      // const fields = kanban.fields;
-      // const newDoc = await frappe.getNewDoc('Kanban');
-      // KanbanModel.populateFieldsAndOptions(this.doctype).then(
-      //   refDoctypeFields => {
-      //     this.$modal.show({
-      //       component: KanbanModal,
-      //       modalProps: {
-      //         title: 'Create Kanban'
-      //       },
-      //       props: {
-      //         refdoctype: this.doctype
-      //         // doc: newDoc
-      //       }
-      //     });
-      //   }
-      // );
       console.log('creating kanban');
       this.showKanbanModal = true;
     },

From 1699e7f079fc24b9a3d5e8482ff163d30057d204 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Thu, 4 Oct 2018 00:10:30 +0530
Subject: [PATCH 08/19] Use props as object in ListActions to support
 defaultProps

---
 ui/components/List/ListActions.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/components/List/ListActions.vue b/ui/components/List/ListActions.vue
index 8938f912..0db577f1 100644
--- a/ui/components/List/ListActions.vue
+++ b/ui/components/List/ListActions.vue
@@ -2,12 +2,20 @@
     <div class="frappe-list-actions d-flex justify-content-between align-items-center p-3 border-bottom">
         <h5 class="m-0">{{ doctype }} List</h5>
         <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
-        <button v-else class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
+        <button v-if="showNew" class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
         <button v-if="showCreateKanban" class="btn btn-primary btn-sm" @click="$emit('createKanban')">Create Kanban</button>
     </div>
 </template>
 <script>
 export default {
-  props: ['doctype', 'showDelete', 'showCreateKanban']
+  props: {
+    doctype: String,
+    showDelete: Number,
+    showCreateKanban: Boolean,
+    showNew: {
+      type: Boolean,
+      default: true
+    }
+  }
 };
 </script>

From e2b796fc7ecf362924df8318820759f1aad2815d Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Thu, 4 Oct 2018 00:10:57 +0530
Subject: [PATCH 09/19] Transfer Kanban Components from Accounting to frappejs
 repo

---
 ui/components/Kanban/Kanban.vue        | 154 +++++++++++++++++++++++++
 ui/components/Kanban/KanbanDetails.vue | 109 +++++++++++++++++
 ui/components/Kanban/KanbanTable.vue   | 101 ++++++++++++++++
 ui/routes/index.js                     |  18 +++
 4 files changed, 382 insertions(+)
 create mode 100644 ui/components/Kanban/Kanban.vue
 create mode 100644 ui/components/Kanban/KanbanDetails.vue
 create mode 100644 ui/components/Kanban/KanbanTable.vue

diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
new file mode 100644
index 00000000..63629d61
--- /dev/null
+++ b/ui/components/Kanban/Kanban.vue
@@ -0,0 +1,154 @@
+<template>
+  <div v-if="kanban !== null" class="kanban-container">
+    <div class="kanban-list" v-for="list in kanban.lists" :id="list.listname" :key="list.listname" v-on:dragover="dragover" v-on:drop="drophandler">
+      <div class="list-name">
+        {{list.listname | capitalize}}
+        <div v-for="card in cards" :key="card.cardtitle">
+          <div v-if="card.listname === list.listname" :name="card.name" class="card-item" draggable="true" v-on:dragstart="dragstart">
+            <span class="card-title">{{card.cardtitle}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import Vue from 'vue';
+
+export default {
+  name: 'Kanban',
+  // components: {
+  //   KanbanBoard
+  // },
+  data: function() {
+    return {
+      kanban: null,
+      draggedItemName: '',
+      doctype: 'Kanban',
+      cards: []
+    };
+  },
+  computed: {
+    name() {
+      return this.$route.params.name;
+    },
+    cardmeta() {
+      return frappe.getMeta('KanbanCard');
+    },
+    fields() {
+      return this.cardmeta.fields.map(field => field.fieldname);
+    }
+  },
+  filters: {
+    capitalize(value) {
+      if (!value) return '';
+      value = value.toString();
+      return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+  },
+  created() {
+    this.initKanbanBoard();
+  },
+  methods: {
+    dragstart: function(e) {
+      console.log(e);
+      e.dataTransfer.effectAllowed = 'move';
+      let attribute, draggedItemName;
+      draggedItemName = e.target.getAttribute('name');
+      this.draggedItemName = draggedItemName;
+      console.log(this.draggedItemName);
+    },
+    drophandler: function(e) {
+      const destinationListName = e.target.id;
+      // const draggedItemN = this.draggedItem;
+      const draggedItem = this.cards.filter(
+        card => card.name === this.draggedItemName
+      )[0];
+      draggedItem.listname = destinationListName;
+      this.updateItem(destinationListName);
+    },
+    dragover: function(e) {
+      e.preventDefault();
+    },
+    async updateItem(destinationListName) {
+      console.log(this.draggedItemName);
+      const sourceItem = await frappe.getDoc(
+        'KanbanCard',
+        this.draggedItemName
+      );
+      sourceItem.listname = destinationListName;
+      sourceItem.update();
+    },
+    onSubmit: function() {
+      console.log(this.doctype, this.field);
+      if (this.doctype === 'ToDo') this.updateListsForTodos();
+      else if (this.doctype === 'Party') this.updateListsForParty();
+    },
+    async initKanbanBoard() {
+      const kanban = await frappe.getDoc(this.doctype, this.name);
+      this.kanban = kanban;
+      this.getCards(kanban.name);
+    },
+    async getCards(boardname) {
+      const allCards = await frappe.db.getAll({
+        doctype: 'KanbanCard',
+        filters: { boardname },
+        fields: [...this.fields, 'name']
+      });
+      this.cards = allCards;
+      console.log(this.cards);
+    }
+  }
+};
+</script>
+
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+.kanban-container {
+  display: flex;
+  margin: 0 auto;
+  justify-content: space-around;
+}
+.kanban-list {
+  margin: 1rem 0;
+  border-radius: 5px;
+  min-height: 400px;
+  min-width: 300px;
+  background-color: #e8ebed;
+  box-shadow: -1px 1px 16px -3px rgba(0, 0, 0, 0.75);
+}
+.list-name {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.card-item {
+  background: #fff;
+  margin: 0.5rem;
+  padding: 1rem;
+  border-radius: 5px;
+}
+.card-item:hover {
+  box-shadow: -1px 10px 12px -7px rgba(0, 0, 0, 0.75);
+}
+.card-title {
+  color: #2066d6;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+</style>
diff --git a/ui/components/Kanban/KanbanDetails.vue b/ui/components/Kanban/KanbanDetails.vue
new file mode 100644
index 00000000..5db12c20
--- /dev/null
+++ b/ui/components/Kanban/KanbanDetails.vue
@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <form>
+      <div :key="key" v-for="(field,key) in fields">
+        <label>
+          {{field.label}}
+          <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
+          <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
+            <option v-for="(option) in options" :key="option" :value="option">
+              {{option}}
+            </option>
+          </select>
+          <div v-if="field.fieldname === 'lists'">
+            <div v-for="(list,key) in configdata['lists']" :key="key">
+              {{list.listname}}
+            </div>
+          </div>
+        </label>
+      </div>
+      <div>
+        <button class="btn btn-primary btn-lg" @click="update" type="submit" value="submit">
+          submit
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+
+export default {
+  name: 'KanbanDetails',
+  data() {
+    return {
+      doctype: 'Kanban',
+      configdata: {
+        kanbanname: '',
+        referencedoctype: '',
+        sortby: '',
+        lists: []
+      },
+      doc: null
+    };
+  },
+  computed: {
+    name() {
+      return this.$route.params.name;
+    },
+    options() {
+      const options = [];
+      if (this.configdata.referencedoctype) {
+        const refdoctypemeta = frappe.getMeta(this.configdata.referencedoctype);
+        console.log(refdoctypemeta);
+        refdoctypemeta.fields.forEach(field => {
+          if (field.fieldtype === 'Select') options.push(field.fieldname);
+        });
+      }
+      return options;
+    },
+    meta() {
+      return frappe.getMeta(this.doctype);
+    },
+    fields() {
+      console.log(this.meta.fields);
+      return this.meta.fields;
+    },
+    disabled() {
+      return field => {
+        return field.fieldname === 'referencedoctype' ? true : false;
+      };
+    },
+    fieldtypes() {
+      return {
+        Select: 'select',
+        Data: 'text'
+      };
+    }
+  },
+  created() {
+    const doc = this.getDetails();
+    doc.then(data => {
+      console.log(data);
+      Object.keys(this.configdata).forEach(
+        field => (this.configdata[field] = data[field])
+      );
+      console.log(this.configdata);
+    });
+  },
+  methods: {
+    async getDetails() {
+      const doc = await frappe.getDoc(this.doctype, this.name);
+      console.log('doc', doc);
+      this.doc = doc;
+      return doc;
+    },
+    async update(e) {
+      e.preventDefault();
+      const doc = await frappe.getDoc(this.doctype, this.name);
+      console.log(doc);
+      Object.keys(this.configdata).forEach(
+        field => (doc[field] = this.configdata[field])
+      );
+      doc.update();
+    }
+  }
+};
+</script>
+
diff --git a/ui/components/Kanban/KanbanTable.vue b/ui/components/Kanban/KanbanTable.vue
new file mode 100644
index 00000000..6c80e8ec
--- /dev/null
+++ b/ui/components/Kanban/KanbanTable.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <table class="datatable-wrapper">
+      <thead>
+        <tr>
+          <th v-for="column in columns" :key="column['name']">
+            {{ column['name'] | capitalize }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="board in kanbanBoards" :key="board['name']" @click="editKanban" :boardname="board['name']">
+          <td v-for="(column, key) in columns" :key="key">
+            {{board[column['field']]}}
+          </td>
+          <td @click="showKanban($event,board.name)">Show Kanban</td>
+        </tr>
+      </tbody>
+    </table>
+    <div>
+      <list-actions :doctype="doctype" :showNew="false" />
+      <ul class="list-group">
+        <list-item v-for="board in kanbanBoards" :key="board.name" :id="board.name" @clickItem="showKanban($event,board.name)" @checkItem="toggleCheck(board.name)">
+          <span class="d-inline-block ml-2">
+            {{board.kanbanname}}
+          </span>
+        </list-item>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+import ListActions from '../List/ListActions';
+import ListItem from '../List/ListItem';
+
+export default {
+  name: 'KanbanTable',
+  components: {
+    ListActions,
+    ListItem
+  },
+  async created() {
+    const kanbanBoards = await frappe.db.getAll({
+      doctype: 'Kanban',
+      fields: ['name', ...this.meta.keywordFields]
+    });
+    this.kanbanBoards = kanbanBoards;
+    console.log(this.kanbanBoards);
+    console.log(this.meta);
+  },
+  computed: {
+    meta() {
+      return frappe.getMeta('Kanban');
+    }
+  },
+  data() {
+    return {
+      doctype: 'Kanban',
+      kanbanBoards: [],
+      columns: [
+        { name: 'name', field: 'kanbanname' },
+        { name: 'reference doctype', field: 'referencedoctype' }
+      ]
+    };
+  },
+  filters: {
+    capitalize: function(value) {
+      if (!value) return '';
+      value = value.toString();
+      return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+  },
+  methods: {
+    editKanban(e) {
+      const name = e.currentTarget.getAttribute('boardname');
+      this.$router.push(`/Kanban/${name}`);
+    },
+    showKanban(e, name) {
+      e.stopPropagation();
+      console.log('name', name);
+      this.$router.push(`/Kanban/view/${name}`);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+
+.list-group-item {
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+}
+
+.list-group-item:first-child {
+  border-top: none;
+}
+</style>
diff --git a/ui/routes/index.js b/ui/routes/index.js
index 3ba36c89..fb3dbb0c 100644
--- a/ui/routes/index.js
+++ b/ui/routes/index.js
@@ -1,6 +1,9 @@
 import ListAndForm from '../pages/ListAndForm';
 import ListAndPrintView from '../pages/ListAndPrintView';
 import Tree from '../components/Tree';
+import KanbanTable from '../components/Kanban/KanbanTable';
+import KanbanDetails from '../components/Kanban/KanbanDetails';
+import Kanban from '../components/Kanban/Kanban';
 
 export default [
   {
@@ -26,5 +29,20 @@ export default [
     name: 'PrintView',
     component: ListAndPrintView,
     props: true
+  },
+  {
+    path: '/kanban',
+    name: 'Kanban',
+    component: KanbanTable
+  },
+  {
+    path: '/Kanban/:name',
+    name: 'Edit Kanban',
+    component: KanbanDetails
+  },
+  {
+    path: '/kanban/view/:name',
+    name: 'Show Kanban',
+    component: Kanban
   }
 ];

From ceeb9d84933c5f3425fe177c4728959343388624 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Thu, 4 Oct 2018 00:35:58 +0530
Subject: [PATCH 10/19] Use frappe List component to show list of Kanban and
 remove old table layout

---
 ui/components/Kanban/KanbanTable.vue | 87 ++++++++++++++++------------
 1 file changed, 49 insertions(+), 38 deletions(-)

diff --git a/ui/components/Kanban/KanbanTable.vue b/ui/components/Kanban/KanbanTable.vue
index 6c80e8ec..eaf7d30f 100644
--- a/ui/components/Kanban/KanbanTable.vue
+++ b/ui/components/Kanban/KanbanTable.vue
@@ -1,32 +1,14 @@
 <template>
   <div>
-    <table class="datatable-wrapper">
-      <thead>
-        <tr>
-          <th v-for="column in columns" :key="column['name']">
-            {{ column['name'] | capitalize }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="board in kanbanBoards" :key="board['name']" @click="editKanban" :boardname="board['name']">
-          <td v-for="(column, key) in columns" :key="key">
-            {{board[column['field']]}}
-          </td>
-          <td @click="showKanban($event,board.name)">Show Kanban</td>
-        </tr>
-      </tbody>
-    </table>
-    <div>
-      <list-actions :doctype="doctype" :showNew="false" />
-      <ul class="list-group">
-        <list-item v-for="board in kanbanBoards" :key="board.name" :id="board.name" @clickItem="showKanban($event,board.name)" @checkItem="toggleCheck(board.name)">
-          <span class="d-inline-block ml-2">
-            {{board.kanbanname}}
-          </span>
-        </list-item>
-      </ul>
-    </div>
+    <list-actions :doctype="doctype" :showNew="false" :showDelete="checkList.length" @delete="deleteCheckedItems" />
+    <ul class="list-group">
+      <list-item v-for="board in kanbanBoards" :key="board.name" :id="board.name" :isChecked="isChecked(board.name)" @checkItem="toggleCheck(board.name)" @clickItem="editKanban(board.name)">
+        <span class="d-inline-block ml-2">
+          {{board.kanbanname}}
+        </span>
+        <button class="btn btn-sm btn-primary" @click="showKanban($event,board.name)">Show Kanban</button>
+      </list-item>
+    </ul>
   </div>
 </template>
 
@@ -41,14 +23,13 @@ export default {
     ListActions,
     ListItem
   },
-  async created() {
-    const kanbanBoards = await frappe.db.getAll({
-      doctype: 'Kanban',
-      fields: ['name', ...this.meta.keywordFields]
+  created() {
+    frappe.db.on(`change:${this.doctype}`, () => {
+      this.updateList();
     });
-    this.kanbanBoards = kanbanBoards;
-    console.log(this.kanbanBoards);
-    console.log(this.meta);
+  },
+  mounted() {
+    this.updateList();
   },
   computed: {
     meta() {
@@ -62,7 +43,8 @@ export default {
       columns: [
         { name: 'name', field: 'kanbanname' },
         { name: 'reference doctype', field: 'referencedoctype' }
-      ]
+      ],
+      checkList: []
     };
   },
   filters: {
@@ -73,14 +55,37 @@ export default {
     }
   },
   methods: {
-    editKanban(e) {
-      const name = e.currentTarget.getAttribute('boardname');
+    editKanban(name) {
+      // console.log(e);
       this.$router.push(`/Kanban/${name}`);
     },
     showKanban(e, name) {
-      e.stopPropagation();
+      // e.stopPropagation();
       console.log('name', name);
       this.$router.push(`/Kanban/view/${name}`);
+    },
+    async deleteCheckedItems() {
+      await frappe.db.deleteMany(this.doctype, this.checkList);
+      this.checkList = [];
+    },
+    toggleCheck(name) {
+      if (this.checkList.includes(name)) {
+        this.checkList = this.checkList.filter(docname => docname !== name);
+      } else {
+        this.checkList = this.checkList.concat(name);
+      }
+    },
+    isChecked(name) {
+      return this.checkList.includes(name);
+    },
+    async updateList() {
+      const kanbanBoards = await frappe.db.getAll({
+        doctype: 'Kanban',
+        fields: ['name', ...this.meta.keywordFields]
+      });
+      this.kanbanBoards = kanbanBoards;
+      console.log(this.kanbanBoards);
+      console.log(this.meta);
     }
   }
 };
@@ -93,6 +98,12 @@ export default {
   border-left: none;
   border-right: none;
   border-radius: 0;
+  display: flex;
+  justify-content: space-between;
+  &:hover {
+    cursor: pointer;
+    background-color: $light;
+  }
 }
 
 .list-group-item:first-child {

From f110977073c7369b084a64b3fe04b93936716362 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Sun, 7 Oct 2018 14:18:48 +0530
Subject: [PATCH 11/19] Add Custom Modal component

---
 ui/components/Kanban/CustomModal.vue | 49 ++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 ui/components/Kanban/CustomModal.vue

diff --git a/ui/components/Kanban/CustomModal.vue b/ui/components/Kanban/CustomModal.vue
new file mode 100644
index 00000000..47b87a2d
--- /dev/null
+++ b/ui/components/Kanban/CustomModal.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="modal-mask">
+        <div class="modal-wrapper">
+            <div class="modal-container">
+                <h3 class="modal-header">
+                    Create something
+                </h3>
+                <div class="modal-body">
+                    Custom Modal
+                    <slot></slot>
+                </div>
+                <div>
+                    <button class="btn btn-sm btn-danger" @click="$emit('closeModal')">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  max-width: 80%;
+  min-height: 30%;
+  background-color: white;
+  margin: 0 auto;
+  border-radius: 5px;
+}
+
+.modal-body {
+  display: block;
+}
+</style>
+

From c65c4a715027389421d6800a538348c6155583ff Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Sun, 7 Oct 2018 16:07:52 +0530
Subject: [PATCH 12/19] Add methods to create card

---
 models/doctype/KanbanCard/KanbanCard.js |  2 +-
 ui/components/Kanban/Kanban.vue         | 97 ++++++++++++++++++++++---
 ui/components/KanbanModal.vue           |  2 +-
 3 files changed, 90 insertions(+), 11 deletions(-)

diff --git a/models/doctype/KanbanCard/KanbanCard.js b/models/doctype/KanbanCard/KanbanCard.js
index 2eba10d6..9b57b123 100644
--- a/models/doctype/KanbanCard/KanbanCard.js
+++ b/models/doctype/KanbanCard/KanbanCard.js
@@ -23,7 +23,7 @@ module.exports = {
       required: 1
     },
     {
-      fieldname: 'refdoctypename',
+      fieldname: 'referencedoctype',
       label: 'Reference Doctype Name',
       fieldtype: 'Data',
       required: 1
diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
index 63629d61..a70011bb 100644
--- a/ui/components/Kanban/Kanban.vue
+++ b/ui/components/Kanban/Kanban.vue
@@ -8,26 +8,61 @@
             <span class="card-title">{{card.cardtitle}}</span>
           </div>
         </div>
+        <button class="btn btn-lg" @click="addCard">Add a card</button>
       </div>
     </div>
+    <button class="btn btn-lg" @click="addList">Add a List</button>
+    <custom-modal v-if="showModal" @closeModal="closeModal">
+      <form @submit.prevent="onSubmit">
+        <label for="listname">
+          List Name
+          <input type="text" name="listname" v-model="newListName" required />
+        </label>
+          <input class="btn btn-primary" type="submit" value="submit" />
+      </form>
+    </custom-modal>
+    <custom-modal v-if="showCardModal" @closeModal="closeCardModal">
+      <form @submit.prevent="onCardSubmit">
+        <label for="card">
+          Card Name
+          <input type="text" name="cardname" v-model="cardconfig['cardname']" required />
+        </label>
+          <label for="listname">
+            List Name
+            <select name="referencedoctype" v-model="cardconfig['listname']">
+              <option v-for="(list) in kanban.lists" :value="list.listname" :key="list.listname">
+                {{list.listname}}
+              </option>
+            </select>
+          </label>
+          <input class="btn btn-primary" type="submit" value="submit" />
+      </form>
+    </custom-modal>
   </div>
 </template>
 
 <script>
 import frappe from 'frappejs';
-import Vue from 'vue';
+import CustomModal from './CustomModal';
 
 export default {
   name: 'Kanban',
-  // components: {
-  //   KanbanBoard
-  // },
+  components: {
+    CustomModal
+  },
   data: function() {
     return {
       kanban: null,
       draggedItemName: '',
       doctype: 'Kanban',
-      cards: []
+      cards: [],
+      showModal: false,
+      newListName: '',
+      showCardModal: '',
+      cardconfig: {
+        listname: '',
+        cardname: ''
+      }
     };
   },
   computed: {
@@ -39,6 +74,12 @@ export default {
     },
     fields() {
       return this.cardmeta.fields.map(field => field.fieldname);
+    },
+    referencedoctypemeta() {
+      return frappe.getMeta(this.kanban.referencedoctype);
+    },
+    referencedoctypefields() {
+      return this.referencedoctypemeta.fields.map(field => field.fieldname);
     }
   },
   filters: {
@@ -62,7 +103,6 @@ export default {
     },
     drophandler: function(e) {
       const destinationListName = e.target.id;
-      // const draggedItemN = this.draggedItem;
       const draggedItem = this.cards.filter(
         card => card.name === this.draggedItemName
       )[0];
@@ -89,16 +129,55 @@ export default {
     async initKanbanBoard() {
       const kanban = await frappe.getDoc(this.doctype, this.name);
       this.kanban = kanban;
-      this.getCards(kanban.name);
+      this.getCards();
     },
-    async getCards(boardname) {
+    async getCards() {
       const allCards = await frappe.db.getAll({
         doctype: 'KanbanCard',
-        filters: { boardname },
+        filters: { boardname: this.name },
         fields: [...this.fields, 'name']
       });
       this.cards = allCards;
       console.log(this.cards);
+    },
+    addList() {
+      console.log('adding list');
+      this.showModal = true;
+    },
+    closeModal() {
+      this.showModal = false;
+    },
+    async onSubmit() {
+      console.log('form submitted', this.newListName);
+      const newList = await frappe.getNewDoc('KanbanList');
+      newList.listname = this.newListName;
+      this.updateKanban(newList);
+      this.showModal = false;
+    },
+    async updateKanban(newList) {
+      const Kanban = await frappe.getDoc(this.doctype, this.name);
+      Kanban.lists.push(newList);
+      Kanban.update();
+      this.Kanban = Kanban;
+    },
+    async addCard() {
+      console.log('creating card');
+      console.log(this.referencedoctypefields);
+      this.showCardModal = true;
+    },
+    closeCardModal() {
+      this.showCardModal = false;
+    },
+    async onCardSubmit() {
+      console.log('submitting card', this.cardconfig['cardname']);
+      const newCard = await frappe.getNewDoc('KanbanCard');
+      newCard.cardtitle = this.cardconfig.cardname;
+      newCard.boardname = this.kanban.name;
+      newCard.listname = this.cardconfig.listname;
+      newCard.referencedoctype = this.kanban.referencedoctype;
+      newCard.insert();
+      await this.getCards();
+      this.closeCardModal();
     }
   }
 };
diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
index 45f5a4c9..82f3c68c 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/KanbanModal.vue
@@ -157,7 +157,7 @@ export default {
         const newCard = frappe.getNewDoc('KanbanCard');
         newCard.then(doc => {
           doc.boardname = board[0].name;
-          doc.refdoctypename = this.configdata.referencedoctype;
+          doc.referencedoctype = this.configdata.referencedoctype;
           doc.listname = item[this.configdata.sortby];
           doc.cardtitle = item[this.configdata.titlefield];
           doc.insert();

From 3a7e9fce3b87950306d49a758f24172a4fddecc9 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Mon, 8 Oct 2018 13:09:57 +0530
Subject: [PATCH 13/19] Renders cards and lists with list-item and list-actions

---
 ui/components/Kanban/Kanban.vue    | 65 +++++++++++++++++++-----------
 ui/components/List/ListActions.vue | 12 +++---
 2 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
index a70011bb..508af80b 100644
--- a/ui/components/Kanban/Kanban.vue
+++ b/ui/components/Kanban/Kanban.vue
@@ -1,15 +1,13 @@
 <template>
   <div v-if="kanban !== null" class="kanban-container">
     <div class="kanban-list" v-for="list in kanban.lists" :id="list.listname" :key="list.listname" v-on:dragover="dragover" v-on:drop="drophandler">
-      <div class="list-name">
-        {{list.listname | capitalize}}
-        <div v-for="card in cards" :key="card.cardtitle">
-          <div v-if="card.listname === list.listname" :name="card.name" class="card-item" draggable="true" v-on:dragstart="dragstart">
-            <span class="card-title">{{card.cardtitle}}</span>
-          </div>
-        </div>
+      <list-actions :doctype="list.listname" :showDelete="checklist.length" @new="addCard" @delete="deleteCards" />
+      <ul class="list-group">
+        <list-item v-for="card in cards" :key="card.cardtitle" :id="card.name" v-if="card.listname === list.listname" :name="card.name" :isChecked="isChecked(card.name)" @checkItem="toggleCheck(card.name)" draggable="true" v-on:dragstart="dragstart">
+          <span class="card-title">{{card.cardtitle}}</span>
+        </list-item>
         <button class="btn btn-lg" @click="addCard">Add a card</button>
-      </div>
+      </ul>
     </div>
     <button class="btn btn-lg" @click="addList">Add a List</button>
     <custom-modal v-if="showModal" @closeModal="closeModal">
@@ -18,7 +16,7 @@
           List Name
           <input type="text" name="listname" v-model="newListName" required />
         </label>
-          <input class="btn btn-primary" type="submit" value="submit" />
+        <input class="btn btn-primary" type="submit" value="submit" />
       </form>
     </custom-modal>
     <custom-modal v-if="showCardModal" @closeModal="closeCardModal">
@@ -27,15 +25,15 @@
           Card Name
           <input type="text" name="cardname" v-model="cardconfig['cardname']" required />
         </label>
-          <label for="listname">
-            List Name
-            <select name="referencedoctype" v-model="cardconfig['listname']">
-              <option v-for="(list) in kanban.lists" :value="list.listname" :key="list.listname">
-                {{list.listname}}
-              </option>
-            </select>
-          </label>
-          <input class="btn btn-primary" type="submit" value="submit" />
+        <label for="listname">
+          List Name
+          <select name="referencedoctype" v-model="cardconfig['listname']">
+            <option v-for="(list) in kanban.lists" :value="list.listname" :key="list.listname">
+              {{list.listname}}
+            </option>
+          </select>
+        </label>
+        <input class="btn btn-primary" type="submit" value="submit" />
       </form>
     </custom-modal>
   </div>
@@ -44,11 +42,15 @@
 <script>
 import frappe from 'frappejs';
 import CustomModal from './CustomModal';
+import ListItem from '../List/ListItem';
+import ListActions from '../List/ListActions';
 
 export default {
   name: 'Kanban',
   components: {
-    CustomModal
+    CustomModal,
+    ListItem,
+    ListActions
   },
   data: function() {
     return {
@@ -62,7 +64,8 @@ export default {
       cardconfig: {
         listname: '',
         cardname: ''
-      }
+      },
+      checklist: []
     };
   },
   computed: {
@@ -178,12 +181,28 @@ export default {
       newCard.insert();
       await this.getCards();
       this.closeCardModal();
+    },
+    toggleCheck(name) {
+      if (this.checklist.includes(name)) {
+        this.checklist = this.checklist.filter(docname => docname !== name);
+      } else {
+        this.checklist = this.checklist.concat(name);
+      }
+    },
+    isChecked(name) {
+      return this.checklist.includes(name);
+    },
+    async deleteCards() {
+      await frappe.db.deleteMany('KanbanCard', this.checklist);
+      this.checklist = [];
     }
   }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import '../../styles/variables';
+
 h3 {
   margin: 40px 0 0;
 }
@@ -211,7 +230,7 @@ a {
   background-color: #e8ebed;
   box-shadow: -1px 1px 16px -3px rgba(0, 0, 0, 0.75);
 }
-.list-name {
+/* .list-name {
   text-align: center;
   font-size: 1.5rem;
   font-weight: bold;
@@ -229,5 +248,5 @@ a {
   color: #2066d6;
   font-size: 1.2rem;
   font-weight: bold;
-}
+} */
 </style>
diff --git a/ui/components/List/ListActions.vue b/ui/components/List/ListActions.vue
index 0db577f1..faffdbb5 100644
--- a/ui/components/List/ListActions.vue
+++ b/ui/components/List/ListActions.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="frappe-list-actions d-flex justify-content-between align-items-center p-3 border-bottom">
-        <h5 class="m-0">{{ doctype }} List</h5>
-        <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
-        <button v-if="showNew" class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
-        <button v-if="showCreateKanban" class="btn btn-primary btn-sm" @click="$emit('createKanban')">Create Kanban</button>
-    </div>
+  <div class="frappe-list-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+    <h5 class="m-0">{{ doctype }} List</h5>
+    <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
+    <button v-if="showNew" class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
+    <button v-if="showCreateKanban" class="btn btn-primary btn-sm" @click="$emit('createKanban')">Create Kanban</button>
+  </div>
 </template>
 <script>
 export default {

From 55f5566478fe2a174f70e26e63674daa24c1c690 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Mon, 8 Oct 2018 14:51:46 +0530
Subject: [PATCH 14/19] Fix moving cards across lists

---
 ui/components/Kanban/Kanban.vue | 27 +++++++++++++--------------
 ui/components/List/ListItem.vue | 19 ++++++++++---------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
index 508af80b..eb972000 100644
--- a/ui/components/Kanban/Kanban.vue
+++ b/ui/components/Kanban/Kanban.vue
@@ -1,12 +1,14 @@
 <template>
   <div v-if="kanban !== null" class="kanban-container">
     <div class="kanban-list" v-for="list in kanban.lists" :id="list.listname" :key="list.listname" v-on:dragover="dragover" v-on:drop="drophandler">
-      <list-actions :doctype="list.listname" :showDelete="checklist.length" @new="addCard" @delete="deleteCards" />
+      <list-actions :doctype="list.listname" :showDelete="checklist.length" @delete="deleteCards" :showNew="false" />
       <ul class="list-group">
-        <list-item v-for="card in cards" :key="card.cardtitle" :id="card.name" v-if="card.listname === list.listname" :name="card.name" :isChecked="isChecked(card.name)" @checkItem="toggleCheck(card.name)" draggable="true" v-on:dragstart="dragstart">
-          <span class="card-title">{{card.cardtitle}}</span>
-        </list-item>
-        <button class="btn btn-lg" @click="addCard">Add a card</button>
+        <div v-for="card in cards" :key="card.cardtitle" v-if="card.listname === list.listname" :name="card.name" draggable="true" v-on:dragstart="dragstart">
+          <list-item v-if="card.listname === list.listname" :id="card.name" :isChecked="isChecked(card.name)" @checkItem="toggleCheck(card.name)">
+            <span class="card-title">{{card.cardtitle}}</span>
+          </list-item>
+        </div>
+        <button class="btn btn-lg" @click="addCard" :listname="list.listname">Add a card</button>
       </ul>
     </div>
     <button class="btn btn-lg" @click="addList">Add a List</button>
@@ -27,11 +29,7 @@
         </label>
         <label for="listname">
           List Name
-          <select name="referencedoctype" v-model="cardconfig['listname']">
-            <option v-for="(list) in kanban.lists" :value="list.listname" :key="list.listname">
-              {{list.listname}}
-            </option>
-          </select>
+          <input type="text" name="listname" v-model="cardconfig['listname']" value="cardconfig['listname']" disabled />
         </label>
         <input class="btn btn-primary" type="submit" value="submit" />
       </form>
@@ -97,7 +95,7 @@ export default {
   },
   methods: {
     dragstart: function(e) {
-      console.log(e);
+      console.log('hereh', e);
       e.dataTransfer.effectAllowed = 'move';
       let attribute, draggedItemName;
       draggedItemName = e.target.getAttribute('name');
@@ -163,9 +161,10 @@ export default {
       Kanban.update();
       this.Kanban = Kanban;
     },
-    async addCard() {
-      console.log('creating card');
-      console.log(this.referencedoctypefields);
+    async addCard(e) {
+      const targetList = e.target.getAttribute('listname');
+      this.cardconfig.listname = targetList;
+      console.log(this.cardconfig);
       this.showCardModal = true;
     },
     closeCardModal() {
diff --git a/ui/components/List/ListItem.vue b/ui/components/List/ListItem.vue
index 8eb43d96..6dbaf5b4 100644
--- a/ui/components/List/ListItem.vue
+++ b/ui/components/List/ListItem.vue
@@ -1,9 +1,7 @@
 <template>
     <div :class="classList" @click.self="$emit('clickItem')">
         <div class="custom-control custom-checkbox d-flex">
-            <input type="checkbox" class="custom-control-input" :id="id"
-                :value="isChecked" @change="$emit('checkItem', isChecked)"
-            >
+            <input type="checkbox" class="custom-control-input" :id="id" :value="isChecked" @change="$emit('checkItem', isChecked)">
             <label class="custom-control-label" :for="id"></label>
         </div>
         <div @click="$emit('clickItem')">
@@ -13,11 +11,14 @@
 </template>
 <script>
 export default {
-    props: ['id', 'isActive', 'isChecked'],
-    computed: {
-        classList() {
-            return ['list-group-item d-flex align-items-center', this.isActive ? 'bg-light' : ''];
-        }
+  props: ['id', 'isActive', 'isChecked'],
+  computed: {
+    classList() {
+      return [
+        'list-group-item d-flex align-items-center',
+        this.isActive ? 'bg-light' : ''
+      ];
     }
-}
+  }
+};
 </script>

From 7ff981d0855ed1c9320ce32ce4b083dcb9108fd1 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Mon, 8 Oct 2018 16:06:35 +0530
Subject: [PATCH 15/19] Make list archivable

---
 models/doctype/Kanban/Kanban.js         |  2 +-
 models/doctype/KanbanList/KanbanList.js |  6 ++++++
 ui/components/Kanban/Kanban.vue         | 23 +++++++++++++++++------
 ui/components/KanbanModal.vue           |  1 +
 ui/components/List/ListActions.vue      |  5 +++++
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/models/doctype/Kanban/Kanban.js b/models/doctype/Kanban/Kanban.js
index 7b7f89d8..93d6c6c4 100644
--- a/models/doctype/Kanban/Kanban.js
+++ b/models/doctype/Kanban/Kanban.js
@@ -1,7 +1,7 @@
 module.exports = {
   name: 'Kanban',
   doctype: 'DocType',
-  naming: 'autoincrement',
+  naming: 'random',
   keywordFields: ['kanbanname', 'referencedoctype', 'sortby'],
   fields: [
     {
diff --git a/models/doctype/KanbanList/KanbanList.js b/models/doctype/KanbanList/KanbanList.js
index b0792981..4b25838b 100644
--- a/models/doctype/KanbanList/KanbanList.js
+++ b/models/doctype/KanbanList/KanbanList.js
@@ -8,6 +8,12 @@ module.exports = {
       label: 'List Name',
       fieldname: 'listname',
       fieldtype: 'Data'
+    },
+    {
+      label: 'Archived',
+      fieldname: 'archived',
+      fieldtype: 'Int',
+      default: 0
     }
   ]
 };
diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
index eb972000..4ccd0248 100644
--- a/ui/components/Kanban/Kanban.vue
+++ b/ui/components/Kanban/Kanban.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="kanban !== null" class="kanban-container">
-    <div class="kanban-list" v-for="list in kanban.lists" :id="list.listname" :key="list.listname" v-on:dragover="dragover" v-on:drop="drophandler">
-      <list-actions :doctype="list.listname" :showDelete="checklist.length" @delete="deleteCards" :showNew="false" />
+    <div class="kanban-list" v-for="list in kanban.lists" v-if="!list.archived" :id="list.listname" :key="list.listname" v-on:dragover="dragover" v-on:drop="drophandler">
+      <list-actions :doctype="list.listname" :showDelete="checklist.length" @delete="deleteCards" :showNew="false" :showArchive="true" @archiveList="archiveList(list.listname)" />
       <ul class="list-group">
         <div v-for="card in cards" :key="card.cardtitle" v-if="card.listname === list.listname" :name="card.name" draggable="true" v-on:dragstart="dragstart">
           <list-item v-if="card.listname === list.listname" :id="card.name" :isChecked="isChecked(card.name)" @checkItem="toggleCheck(card.name)">
@@ -152,13 +152,13 @@ export default {
       console.log('form submitted', this.newListName);
       const newList = await frappe.getNewDoc('KanbanList');
       newList.listname = this.newListName;
-      this.updateKanban(newList);
-      this.showModal = false;
-    },
-    async updateKanban(newList) {
       const Kanban = await frappe.getDoc(this.doctype, this.name);
       Kanban.lists.push(newList);
       Kanban.update();
+      this.updateKanban(Kanban);
+      this.showModal = false;
+    },
+    async updateKanban(Kanban) {
       this.Kanban = Kanban;
     },
     async addCard(e) {
@@ -194,6 +194,17 @@ export default {
     async deleteCards() {
       await frappe.db.deleteMany('KanbanCard', this.checklist);
       this.checklist = [];
+    },
+    async archiveList(listname) {
+      const Kanban = await frappe.getDoc(this.doctype, this.name);
+      Kanban.lists.forEach(
+        list =>
+          list.listname === listname
+            ? (list.archived = 1)
+            : (list.archived = list.archived)
+      );
+      Kanban.update();
+      this.updateKanban(Kanban);
     }
   }
 };
diff --git a/ui/components/KanbanModal.vue b/ui/components/KanbanModal.vue
index 82f3c68c..587c8e20 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/KanbanModal.vue
@@ -125,6 +125,7 @@ export default {
         const newColumn = frappe.getNewDoc('KanbanList');
         return newColumn.then(doc => {
           doc.listname = column;
+          doc.archived = false;
           return doc;
         });
       });
diff --git a/ui/components/List/ListActions.vue b/ui/components/List/ListActions.vue
index faffdbb5..41a09dbc 100644
--- a/ui/components/List/ListActions.vue
+++ b/ui/components/List/ListActions.vue
@@ -3,6 +3,7 @@
     <h5 class="m-0">{{ doctype }} List</h5>
     <button v-if="showDelete" class="btn btn-danger btn-sm" @click="$emit('delete')">Delete</button>
     <button v-if="showNew" class="btn btn-primary btn-sm" @click="$emit('new')">New</button>
+    <button v-if="showArchive" class="btn btn-primary btn-sm" @click="$emit('archiveList')">Archive</button>
     <button v-if="showCreateKanban" class="btn btn-primary btn-sm" @click="$emit('createKanban')">Create Kanban</button>
   </div>
 </template>
@@ -15,6 +16,10 @@ export default {
     showNew: {
       type: Boolean,
       default: true
+    },
+    showArchive: {
+      type: Boolean,
+      default: false
     }
   }
 };

From 99aee2b1415ec07b1e027256311b0d0dff047c1e Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Tue, 9 Oct 2018 23:07:32 +0530
Subject: [PATCH 16/19] Add Card info modal

---
 models/doctype/KanbanCard/KanbanCard.js | 13 +++++++
 ui/components/Kanban/CustomModal.vue    | 12 +++++--
 ui/components/Kanban/Kanban.vue         | 45 +++++++++++++++++++++----
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/models/doctype/KanbanCard/KanbanCard.js b/models/doctype/KanbanCard/KanbanCard.js
index 9b57b123..e7591dbc 100644
--- a/models/doctype/KanbanCard/KanbanCard.js
+++ b/models/doctype/KanbanCard/KanbanCard.js
@@ -2,6 +2,8 @@ module.exports = {
   name: 'KanbanCard',
   doctype: 'DocType',
   naming: 'random',
+  keywordFields: ['cardtitle', 'carddescription', 'assignee'],
+  titleField: 'cardtitle',
   fields: [
     {
       fieldname: 'cardtitle',
@@ -27,6 +29,17 @@ module.exports = {
       label: 'Reference Doctype Name',
       fieldtype: 'Data',
       required: 1
+    },
+    {
+      fieldname: 'carddescription',
+      label: 'Card Description',
+      fieldtype: 'Text'
+    },
+    {
+      fieldname: 'assignee',
+      label: 'Assignee',
+      fieldtype: 'Link',
+      target: 'User'
     }
   ]
 };
diff --git a/ui/components/Kanban/CustomModal.vue b/ui/components/Kanban/CustomModal.vue
index 47b87a2d..93c1f470 100644
--- a/ui/components/Kanban/CustomModal.vue
+++ b/ui/components/Kanban/CustomModal.vue
@@ -3,13 +3,12 @@
         <div class="modal-wrapper">
             <div class="modal-container">
                 <h3 class="modal-header">
-                    Create something
+                    {{header}}
                 </h3>
                 <div class="modal-body">
-                    Custom Modal
                     <slot></slot>
                 </div>
-                <div>
+                <div class="modal-footer">
                     <button class="btn btn-sm btn-danger" @click="$emit('closeModal')">Close</button>
                 </div>
             </div>
@@ -17,6 +16,13 @@
     </div>
 </template>
 
+<script>
+export default {
+  name: 'CustomModal',
+  props: ['header']
+};
+</script>
+
 <style scoped>
 .modal-mask {
   position: fixed;
diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
index 4ccd0248..4d0b28f6 100644
--- a/ui/components/Kanban/Kanban.vue
+++ b/ui/components/Kanban/Kanban.vue
@@ -4,7 +4,7 @@
       <list-actions :doctype="list.listname" :showDelete="checklist.length" @delete="deleteCards" :showNew="false" :showArchive="true" @archiveList="archiveList(list.listname)" />
       <ul class="list-group">
         <div v-for="card in cards" :key="card.cardtitle" v-if="card.listname === list.listname" :name="card.name" draggable="true" v-on:dragstart="dragstart">
-          <list-item v-if="card.listname === list.listname" :id="card.name" :isChecked="isChecked(card.name)" @checkItem="toggleCheck(card.name)">
+          <list-item v-if="card.listname === list.listname" :id="card.name" :isChecked="isChecked(card.name)" @checkItem="toggleCheck(card.name)" @clickItem="displayCardDetails(card.name)">
             <span class="card-title">{{card.cardtitle}}</span>
           </list-item>
         </div>
@@ -12,7 +12,7 @@
       </ul>
     </div>
     <button class="btn btn-lg" @click="addList">Add a List</button>
-    <custom-modal v-if="showModal" @closeModal="closeModal">
+    <custom-modal v-if="showModal" @closeModal="closeModal" header="Create List">
       <form @submit.prevent="onSubmit">
         <label for="listname">
           List Name
@@ -21,7 +21,7 @@
         <input class="btn btn-primary" type="submit" value="submit" />
       </form>
     </custom-modal>
-    <custom-modal v-if="showCardModal" @closeModal="closeCardModal">
+    <custom-modal v-if="showCardModal" @closeModal="closeCardModal" header="Create Card">
       <form @submit.prevent="onCardSubmit">
         <label for="card">
           Card Name
@@ -34,6 +34,10 @@
         <input class="btn btn-primary" type="submit" value="submit" />
       </form>
     </custom-modal>
+    <custom-modal v-if="showCardInfoModal" @closeModal="closeCardInfoModal" header="Card Details">
+      <form-actions class="p-3 border-bottom" v-if="currentCard !== null" :doc="currentCard" @save="saveCardChanges" @submit="submitCardChanges" :links="links" @revert="revert" @print="print" />
+      <form-layout class="p-3" :doc="currentCard" :fields="cardmeta.fields" :layout="cardmeta.layout" v-if="currentCard !== null" />
+    </custom-modal>
   </div>
 </template>
 
@@ -42,13 +46,17 @@ import frappe from 'frappejs';
 import CustomModal from './CustomModal';
 import ListItem from '../List/ListItem';
 import ListActions from '../List/ListActions';
+import FormLayout from '../Form/FormLayout';
+import FormActions from '../Form/FormActions';
 
 export default {
   name: 'Kanban',
   components: {
     CustomModal,
     ListItem,
-    ListActions
+    ListActions,
+    FormLayout,
+    FormActions
   },
   data: function() {
     return {
@@ -61,9 +69,13 @@ export default {
       showCardModal: '',
       cardconfig: {
         listname: '',
-        cardname: ''
+        cardname: '',
+        carddescription: ''
       },
-      checklist: []
+      checklist: [],
+      showCardInfoModal: false,
+      currentCard: null,
+      links: []
     };
   },
   computed: {
@@ -205,6 +217,27 @@ export default {
       );
       Kanban.update();
       this.updateKanban(Kanban);
+    },
+    async displayCardDetails(cardName) {
+      this.showCardInfoModal = true;
+      const card = await frappe.getDoc('KanbanCard', cardName);
+      this.currentCard = card;
+    },
+    closeCardInfoModal() {
+      this.showCardInfoModal = false;
+    },
+    async saveCardChanges() {
+      console.log('save');
+      await this.currentCard.update();
+    },
+    submitCardChanges() {
+      console.log('save');
+    },
+    revert() {
+      console.log('save');
+    },
+    print() {
+      console.log('print');
     }
   }
 };

From 8d2a0faf8b1d11065767ee7290403d3b420f8b85 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Wed, 10 Oct 2018 00:02:42 +0530
Subject: [PATCH 17/19] Refactor CreateKanbanModal

---
 .../CreateKanbanModal.vue}                    | 68 +++++++++----------
 ui/components/Kanban/Kanban.vue               | 34 ++++++----
 ui/components/List/List.vue                   | 13 ++--
 3 files changed, 55 insertions(+), 60 deletions(-)
 rename ui/components/{KanbanModal.vue => Kanban/CreateKanbanModal.vue} (72%)

diff --git a/ui/components/KanbanModal.vue b/ui/components/Kanban/CreateKanbanModal.vue
similarity index 72%
rename from ui/components/KanbanModal.vue
rename to ui/components/Kanban/CreateKanbanModal.vue
index 587c8e20..7e69f0f7 100644
--- a/ui/components/KanbanModal.vue
+++ b/ui/components/Kanban/CreateKanbanModal.vue
@@ -1,47 +1,38 @@
 <template>
-  <div>
-    <div class="modal-mask">
-      <div class="modal-wrapper">
-        <div class="modal-container">
-          <h3 class="modal-header">
-            Create Kanban for {{refdoctype}}
-          </h3>
-          <div class="modal-body">
-            <form>
-              <div :key="key" v-for="(field,key) in fields">
-                <label>
-                  {{field.label}}
-                  <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
-                  <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata[field.fieldname]" @change="updateLists">
-                    <option v-for="(option) in options[field.fieldname]" :key="option" :value="option">
-                      {{option}}
-                    </option>
-                  </select>
-                </label>
-              </div>
-              <div>
-                <button class="btn btn-primary btn-lg" @click="submit" type="submit" value="submit" :disabled="submitdisabled">
-                  submit
-                </button>
-              </div>
-            </form>
-          </div>
-          <div class="modal-footer">
-            <button class="btn btn-danger btn-lg" @click="$emit('closeKanbanModal')">Close</button>
-          </div>
-        </div>
+  <custom-modal v-if="showCreateKanbanModal" :header="'Create Kanban for' + refdoctype" @closeModal="closeCreateKanbanModal">
+    <form>
+      <div :key="key" v-for="(field,key) in fields">
+        <label>
+          {{field.label}}
+          <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
+          <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata[field.fieldname]" @change="updateLists">
+            <option v-for="(option) in options[field.fieldname]" :key="option" :value="option">
+              {{option}}
+            </option>
+          </select>
+        </label>
       </div>
-    </div>
-  </div>
+      <div>
+        <button class="btn btn-primary btn-lg" @click="submit" type="submit" value="submit" :disabled="submitdisabled">
+          submit
+        </button>
+      </div>
+    </form>
+  </custom-modal>
 </template>
 
 <script>
 import frappe from 'frappejs';
-import FormLayout from './Form/FormLayout';
-import Observable from '../../utils/observable';
+import FormLayout from '../Form/FormLayout';
+import Observable from '../../../utils/observable';
+import CustomModal from './CustomModal';
+
 export default {
-  name: 'KanbanModal',
-  props: ['refdoctype', 'closeKanbanModal'],
+  name: 'CreateKanbanModal',
+  props: ['refdoctype', 'showCreateKanbanModal'],
+  components: {
+    CustomModal
+  },
   data() {
     return {
       configdata: {
@@ -164,6 +155,9 @@ export default {
           doc.insert();
         });
       });
+    },
+    closeCreateKanbanModal() {
+      this.showCreateKanbanModal = false;
     }
   }
 };
diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
index 4d0b28f6..a00043c5 100644
--- a/ui/components/Kanban/Kanban.vue
+++ b/ui/components/Kanban/Kanban.vue
@@ -11,8 +11,10 @@
         <button class="btn btn-lg" @click="addCard" :listname="list.listname">Add a card</button>
       </ul>
     </div>
-    <button class="btn btn-lg" @click="addList">Add a List</button>
-    <custom-modal v-if="showModal" @closeModal="closeModal" header="Create List">
+    <div>
+      <button class="btn btn-lg btn-block mt-16" @click="addList">Add a List</button>
+    </div>
+    <custom-modal v-if="showCreateListModal" @closeModal="closeCreateListModal" header="Create List">
       <form @submit.prevent="onSubmit">
         <label for="listname">
           List Name
@@ -21,7 +23,7 @@
         <input class="btn btn-primary" type="submit" value="submit" />
       </form>
     </custom-modal>
-    <custom-modal v-if="showCardModal" @closeModal="closeCardModal" header="Create Card">
+    <custom-modal v-if="showCreateCardModal" @closeModal="closeCreateCardModal" header="Create Card">
       <form @submit.prevent="onCardSubmit">
         <label for="card">
           Card Name
@@ -64,9 +66,9 @@ export default {
       draggedItemName: '',
       doctype: 'Kanban',
       cards: [],
-      showModal: false,
+      showCreateListModal: false,
       newListName: '',
-      showCardModal: '',
+      showCreateCardModal: '',
       cardconfig: {
         listname: '',
         cardname: '',
@@ -155,10 +157,10 @@ export default {
     },
     addList() {
       console.log('adding list');
-      this.showModal = true;
+      this.showCreateListModal = true;
     },
-    closeModal() {
-      this.showModal = false;
+    closeCreateListModal() {
+      this.showCreateListModal = false;
     },
     async onSubmit() {
       console.log('form submitted', this.newListName);
@@ -168,7 +170,7 @@ export default {
       Kanban.lists.push(newList);
       Kanban.update();
       this.updateKanban(Kanban);
-      this.showModal = false;
+      this.showCreateListModal = false;
     },
     async updateKanban(Kanban) {
       this.Kanban = Kanban;
@@ -177,10 +179,10 @@ export default {
       const targetList = e.target.getAttribute('listname');
       this.cardconfig.listname = targetList;
       console.log(this.cardconfig);
-      this.showCardModal = true;
+      this.showCreateCardModal = true;
     },
-    closeCardModal() {
-      this.showCardModal = false;
+    closeCreateCardModal() {
+      this.showCreateCardModal = false;
     },
     async onCardSubmit() {
       console.log('submitting card', this.cardconfig['cardname']);
@@ -191,7 +193,7 @@ export default {
       newCard.referencedoctype = this.kanban.referencedoctype;
       newCard.insert();
       await this.getCards();
-      this.closeCardModal();
+      this.closeCreateCardModal();
     },
     toggleCheck(name) {
       if (this.checklist.includes(name)) {
@@ -264,14 +266,16 @@ a {
   display: flex;
   margin: 0 auto;
   justify-content: space-around;
+  overflow-x: scroll;
 }
 .kanban-list {
-  margin: 1rem 0;
+  margin: 1rem 0.5rem;
   border-radius: 5px;
-  min-height: 400px;
+  min-height: calc(100vh - 5rem);
   min-width: 300px;
   background-color: #e8ebed;
   box-shadow: -1px 1px 16px -3px rgba(0, 0, 0, 0.75);
+  overflow-y: auto;
 }
 /* .list-name {
   text-align: center;
diff --git a/ui/components/List/List.vue b/ui/components/List/List.vue
index eab195d4..2c9a7783 100644
--- a/ui/components/List/List.vue
+++ b/ui/components/List/List.vue
@@ -9,7 +9,7 @@
         </span>
       </list-item>
     </ul>
-    <kanban-modal v-if="showKanbanModal" :refdoctype="doctype" @closeKanbanModal='closeKanbanModal' />
+    <create-kanban-modal :showCreateKanbanModal="showCreateKanbanModal" :refdoctype="doctype" />
   </div>
 </template>
 <script>
@@ -17,7 +17,7 @@ import frappe from 'frappejs';
 import ListActions from './ListActions';
 import ListItem from './ListItem';
 import KanbanModel from '../../../models/doctype/Kanban/Kanban';
-import KanbanModal from '../KanbanModal';
+import CreateKanbanModal from '../Kanban/CreateKanbanModal';
 
 export default {
   name: 'List',
@@ -25,14 +25,14 @@ export default {
   components: {
     ListActions,
     ListItem,
-    KanbanModal
+    CreateKanbanModal
   },
   data() {
     return {
       data: [],
       checkList: [],
       activeItem: '',
-      showKanbanModal: false
+      showCreateKanbanModal: false
     };
   },
   computed: {
@@ -113,10 +113,7 @@ export default {
     },
     createKanban() {
       console.log('creating kanban');
-      this.showKanbanModal = true;
-    },
-    closeKanbanModal() {
-      this.showKanbanModal = false;
+      this.showCreateKanbanModal = true;
     }
   }
 };

From 64e1184554999f84dd55fbeb08944937b235d983 Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Wed, 10 Oct 2018 09:48:21 +0530
Subject: [PATCH 18/19] Style forms in CustomModal

---
 models/doctype/KanbanCard/KanbanCard.js    |  3 +--
 ui/components/Kanban/CreateKanbanModal.vue |  2 +-
 ui/components/Kanban/CustomModal.vue       |  2 +-
 ui/components/Kanban/Kanban.vue            | 14 +++++++++++---
 ui/components/Kanban/KanbanDetails.vue     |  4 ++--
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/models/doctype/KanbanCard/KanbanCard.js b/models/doctype/KanbanCard/KanbanCard.js
index e7591dbc..037a01a7 100644
--- a/models/doctype/KanbanCard/KanbanCard.js
+++ b/models/doctype/KanbanCard/KanbanCard.js
@@ -14,8 +14,7 @@ module.exports = {
     {
       fieldname: 'listname',
       label: 'Add To List',
-      fieldtype: 'Select',
-      options: [],
+      fieldtype: 'Data',
       required: 1
     },
     {
diff --git a/ui/components/Kanban/CreateKanbanModal.vue b/ui/components/Kanban/CreateKanbanModal.vue
index 7e69f0f7..46224301 100644
--- a/ui/components/Kanban/CreateKanbanModal.vue
+++ b/ui/components/Kanban/CreateKanbanModal.vue
@@ -103,7 +103,7 @@ export default {
       console.log('newdoc', newDoc);
       newDoc.insert();
       this.initCards();
-      this.$emit('closeKanbanModal');
+      this.closeCreateKanbanModal();
     },
     async updateLists() {
       const refdoctypemeta = await frappe.getMeta(this.refdoctype);
diff --git a/ui/components/Kanban/CustomModal.vue b/ui/components/Kanban/CustomModal.vue
index 93c1f470..f1a82249 100644
--- a/ui/components/Kanban/CustomModal.vue
+++ b/ui/components/Kanban/CustomModal.vue
@@ -9,7 +9,7 @@
                     <slot></slot>
                 </div>
                 <div class="modal-footer">
-                    <button class="btn btn-sm btn-danger" @click="$emit('closeModal')">Close</button>
+                    <button class="btn btn-danger" @click="$emit('closeModal')">Close</button>
                 </div>
             </div>
         </div>
diff --git a/ui/components/Kanban/Kanban.vue b/ui/components/Kanban/Kanban.vue
index a00043c5..2a402409 100644
--- a/ui/components/Kanban/Kanban.vue
+++ b/ui/components/Kanban/Kanban.vue
@@ -18,7 +18,7 @@
       <form @submit.prevent="onSubmit">
         <label for="listname">
           List Name
-          <input type="text" name="listname" v-model="newListName" required />
+          <input class="form-control" type="text" name="listname" v-model="newListName" required />
         </label>
         <input class="btn btn-primary" type="submit" value="submit" />
       </form>
@@ -27,11 +27,11 @@
       <form @submit.prevent="onCardSubmit">
         <label for="card">
           Card Name
-          <input type="text" name="cardname" v-model="cardconfig['cardname']" required />
+          <input class="form-control" type="text" name="cardname" v-model="cardconfig['cardname']" required />
         </label>
         <label for="listname">
           List Name
-          <input type="text" name="listname" v-model="cardconfig['listname']" value="cardconfig['listname']" disabled />
+          <input class="form-control" type="text" name="listname" v-model="cardconfig['listname']" value="cardconfig['listname']" disabled />
         </label>
         <input class="btn btn-primary" type="submit" value="submit" />
       </form>
@@ -105,6 +105,14 @@ export default {
     }
   },
   created() {
+    frappe.db.on(`change:${this.doctype}`, () => {
+      this.initKanbanBoard();
+    });
+    frappe.db.on(`change:KanbanCard`, () => {
+      this.getCards();
+    });
+  },
+  mounted() {
     this.initKanbanBoard();
   },
   methods: {
diff --git a/ui/components/Kanban/KanbanDetails.vue b/ui/components/Kanban/KanbanDetails.vue
index 5db12c20..603f07fc 100644
--- a/ui/components/Kanban/KanbanDetails.vue
+++ b/ui/components/Kanban/KanbanDetails.vue
@@ -4,8 +4,8 @@
       <div :key="key" v-for="(field,key) in fields">
         <label>
           {{field.label}}
-          <input class="form-control" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
-          <select class="form-control" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
+          <input class="form-control form-control-lg" :disabled="disabled(field)" v-if="fieldtypes[field.fieldtype] === 'text'" type="text" v-model="configdata[field.fieldname]" />
+          <select class="form-control form-control-lg" v-if="fieldtypes[field.fieldtype] === 'select'" v-model="configdata.sortby">
             <option v-for="(option) in options" :key="option" :value="option">
               {{option}}
             </option>

From 5631bd3b0cfb9cba9e642ebd2c9cb8146ffd704f Mon Sep 17 00:00:00 2001
From: zamhaq <haque864@gmail.com>
Date: Wed, 10 Oct 2018 20:18:09 +0530
Subject: [PATCH 19/19] Stop rendering two routes due to event bubbling

---
 ui/components/Kanban/KanbanTable.vue | 2 +-
 ui/routes/index.js                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/Kanban/KanbanTable.vue b/ui/components/Kanban/KanbanTable.vue
index eaf7d30f..9f2cd557 100644
--- a/ui/components/Kanban/KanbanTable.vue
+++ b/ui/components/Kanban/KanbanTable.vue
@@ -60,7 +60,7 @@ export default {
       this.$router.push(`/Kanban/${name}`);
     },
     showKanban(e, name) {
-      // e.stopPropagation();
+      e.stopPropagation();
       console.log('name', name);
       this.$router.push(`/Kanban/view/${name}`);
     },
diff --git a/ui/routes/index.js b/ui/routes/index.js
index fb3dbb0c..614c6292 100644
--- a/ui/routes/index.js
+++ b/ui/routes/index.js
@@ -36,7 +36,7 @@ export default [
     component: KanbanTable
   },
   {
-    path: '/Kanban/:name',
+    path: '/kanban/:name',
     name: 'Edit Kanban',
     component: KanbanDetails
   },