Add link modal

.eslintrc.js

@@ -25,9 +25,8 @@ module.exports = {
     'generator-star-spacing': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'semi': 'on',
-    'indent': 'off',
-    // 'indent': ["error", 4],
+    'semi': 2,
+    'indent': ["error", 2],
     'space-before-function-paren': 'off'
   }
 }

models/doctype/Contact/Contact.js

@@ -10,7 +10,6 @@ module.exports = {
     "keywordFields": [
         "fullName"
     ],
-    "titleField": "fullName",
     "fields": [
         {
             "fieldname": "fullName",

src/components/Form/Form.vue

@@ -68,10 +68,8 @@ export default {
           await this.doc.update();
         }
 
-        if (this.doc.name !== this.$route.params.name) {
-          this.$router.push(`/edit/${this.doctype}/${this.doc.name}`);
-          return;
-        }
+        this.$emit('save', this.doc);
+
       } catch (e) {
         console.error(e);
         return;
@@ -95,7 +93,4 @@ export default {
 };
 </script>
 <style>
-.frappe-form {
-  height: calc(100vh - 50px);
-}
 </style>

src/components/ListAndForm.vue

@@ -4,7 +4,7 @@
             <frappe-list :doctype="doctype" :filters="filters" :key="doctype" />
         </div>
         <div class="col-8">
-            <frappe-form v-if="name" :key="doctype + name" :doctype="doctype" :name="name" />
+            <frappe-form v-if="name" :key="doctype + name" :doctype="doctype" :name="name" @save="onSave" />
         </div>
     </div>
 </template>
@@ -17,6 +17,13 @@ export default {
     components: {
         FrappeList: List,
         FrappeForm: Form
+    },
+    methods: {
+        onSave(doc) {
+             if (doc.name !== this.$route.params.name) {
+                this.$router.push(`/edit/${doc.doctype}/${doc.name}`);
+            }
+        }
     }
 }
 </script>

src/components/Modal.vue

@@ -1,8 +1,7 @@
 <template>
   <div>
     <div :class="['modal fade', modalClasses]" :style="{display: show ? 'block' : ''}" id="frappe-modal"
-      tabindex="-1" role="dialog" aria-labelledby="frappe-modal-label" aria-hidden="true"
-    >
+      tabindex="-1" role="dialog" aria-labelledby="frappe-modal-label" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
@@ -11,11 +10,11 @@
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          <div class="modal-body">
-            <component :is="body" />
+          <div class="modal-body modal-height">
+            <component :is="bodyComponent" v-bind="bodyProps"/>
           </div>
           <div class="modal-footer">
-            <component :is="footer" />
+            <component :is="footerComponent" v-bind="footerProps"/>
             <button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
           </div>
         </div>
@@ -30,28 +29,42 @@ export default {
     show: Boolean,
     title: {
       type: String,
-      default: 'Modal Title'
+      default: "Modal Title"
     },
-    body: {
+    bodyComponent: {
       type: Object,
       default: null
     },
-    footer: {
+    bodyProps: {
       type: Object,
       default: null
-    }
+    },
+    footerComponent: {
+      type: Object,
+      default: null
+    },
+    footerProps: {
+      type: Object,
+      default: null
+    },
   },
   computed: {
     modalClasses() {
       return {
         show: this.show
-      }
+      };
     }
   },
   methods: {
     closeModal() {
-      this.$emit('closeModal');
-    }
+      this.$modal.hide();
     }
   }
+};
 </script>
+<style scoped>
+.modal-height {
+  max-height: 80vh;
+  overflow: auto;
+}
+</style>

src/components/controls/Autocomplete.vue

@@ -21,7 +21,8 @@ export default {
           this.awesomplete.list = await this.getList(e.target.value);
         },
         'awesomplete-select': e => {
-          this.handleChange(e.text.value);
+          const value = e.text.value;
+          this.handleChange(value);
         }
       }
     },
@@ -44,9 +45,14 @@ export default {
           return li;
         }
       });
-      input.addEventListener('awesomplete-select', (e) => { console.log(e);this.$emit('awesomplete-select', e)} )
+
+      this.bindEvents();
+    },
+    bindEvents() {
+
     },
     sort() {
+      //
     }
   }
 };

src/components/controls/Link.vue

@@ -2,6 +2,8 @@
 import frappe from 'frappejs';
 import feather from 'feather-icons';
 import Autocomplete from './Autocomplete';
+import Form from '../Form/Form';
+import { _ } from 'frappejs/utils';
 
 export default {
     extends: Autocomplete,
@@ -42,6 +44,31 @@ export default {
                 }
                 return a.value > b.value;
             }
+        },
+        bindEvents() {
+            const input = this.$refs.input;
+
+            input.addEventListener('awesomplete-select', async (e) => {
+                // new item action
+                if (e.text && e.text.value === '__newItem') {
+                    e.preventDefault();
+                    const newDoc = await frappe.getNewDoc(this.getTarget());
+
+                    this.$modal.show({
+                        title: _('New {0}', _(newDoc.doctype)),
+                        bodyComponent: Form,
+                        bodyProps: {
+                            doctype: newDoc.doctype,
+                            name: newDoc.name,
+                        },
+                    });
+
+                    newDoc.on('afterInsert', (data) => {
+                        this.handleChange(newDoc.name);
+                        this.$modal.hide();
+                    });
+                }
+            })
         }
     }
 }