From 50ec5b864f23b99decb69313e987bcbaf7308d5a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 23 Jun 2024 16:10:27 +0530
Subject: [PATCH] fix: on new click show creation modal

---
 frontend/src/components/Kanban/KanbanView.vue | 19 +++---
 frontend/src/components/Modals/DealModal.vue  |  5 ++
 frontend/src/components/Modals/LeadModal.vue  |  5 ++
 frontend/src/components/Modals/TaskModal.vue  |  6 +-
 frontend/src/pages/Deals.vue                  | 21 ++++++-
 frontend/src/pages/Leads.vue                  | 63 +++++--------------
 frontend/src/pages/Tasks.vue                  | 20 +++++-
 7 files changed, 78 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index 4000cb5c..a6d24e39 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -58,7 +58,11 @@
                 />
               </template>
             </Dropdown>
-            <Button icon="plus" variant="ghost" />
+            <Button
+              icon="plus"
+              variant="ghost"
+              @click="options.onNewClick(column)"
+            />
           </div>
         </div>
         <Draggable
@@ -71,13 +75,13 @@
         >
           <template #item="{ element: fields }">
             <component
-              :is="options.getRowRoute ? 'router-link' : 'div'"
+              :is="options.getRoute ? 'router-link' : 'div'"
               class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-white text-base flex flex-col gap-2"
               :data-name="fields.name"
               v-bind="{
-                to: options.getRowRoute ? options.getRowRoute(fields) : undefined,
-                onClick: options.onRowClick
-                  ? () => options.onRowClick(fields)
+                to: options.getRoute ? options.getRoute(fields) : undefined,
+                onClick: options.onClick
+                  ? () => options.onClick(fields)
                   : undefined,
               }"
             >
@@ -102,8 +106,9 @@ const props = defineProps({
   options: {
     type: Object,
     default: () => ({
-      getRowRoute: null,
-      onRowClick: null,
+      getRoute: null,
+      onClick: null,
+      onNewClick: null,
     }),
   },
 })
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index 15147f69..293e81ac 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -46,6 +46,10 @@ import { Switch, createResource } from 'frappe-ui'
 import { computed, ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
+const props = defineProps({
+  defaults: Object,
+})
+
 const { getUser } = usersStore()
 const { getDealStatus, statusOptions } = statusesStore()
 
@@ -194,6 +198,7 @@ function createDeal() {
 }
 
 onMounted(() => {
+  Object.assign(deal, props.defaults)
   if (!deal.deal_owner) {
     deal.deal_owner = getUser().email
   }
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 6a3d35fd..b29be41b 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -31,6 +31,10 @@ import { createResource } from 'frappe-ui'
 import { computed, onMounted, ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 
+const props = defineProps({
+  defaults: Object,
+})
+
 const { getUser } = usersStore()
 const { getLeadStatus, statusOptions } = statusesStore()
 
@@ -146,6 +150,7 @@ function createNewLead() {
 }
 
 onMounted(() => {
+  Object.assign(lead, props.defaults)
   if (!lead.lead_owner) {
     lead.lead_owner = getUser().email
   }
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 46e903c3..a86bf023 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -119,7 +119,7 @@ import Link from '@/components/Controls/Link.vue'
 import { taskStatusOptions, taskPriorityOptions } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -205,6 +205,10 @@ async function updateTask() {
   show.value = false
 }
 
+onMounted(() => {
+  _task.value = { ...props.task }
+})
+
 watch(
   () => show.value,
   (value) => {
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 8dde10c7..c7f1200f 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -32,7 +32,8 @@
     v-if="route.params.viewType == 'kanban'"
     v-model="deals"
     :options="{
-      getRowRoute: (row) => ({ name: 'Deal', params: { dealId: row.name } }),
+      getRoute: (row) => ({ name: 'Deal', params: { dealId: row.name } }),
+      onNewClick: (column) => onNewClick(column),
     }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
   />
@@ -67,7 +68,11 @@
       </Button>
     </div>
   </div>
-  <DealModal v-model="showDealModal" />
+  <DealModal
+    v-if="showDealModal"
+    v-model="showDealModal"
+    :defaults="defaults"
+  />
 </template>
 
 <script setup>
@@ -104,6 +109,8 @@ const route = useRoute()
 const dealsListView = ref(null)
 const showDealModal = ref(false)
 
+const defaults = reactive({})
+
 // deals data is loaded in the ViewControls component
 const deals = ref({})
 const loadMore = ref(1)
@@ -248,4 +255,14 @@ function parseRows(rows) {
     return _rows
   })
 }
+
+function onNewClick(column) {
+  let column_field = deals.value.params.column_field
+
+  if (column_field) {
+    defaults[column_field] = column.column.name
+  }
+
+  showDealModal.value = true
+}
 </script>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 8193fe14..8b0ceb90 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -33,7 +33,8 @@
     v-if="route.params.viewType == 'kanban'"
     v-model="leads"
     :options="{
-      getRowRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
+      getRoute: (row) => ({ name: 'Lead', params: { leadId: row.name } }),
+      onNewClick: (column) => onNewClick(column),
     }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
   />
@@ -68,7 +69,11 @@
       </Button>
     </div>
   </div>
-  <LeadModal v-model="showLeadModal" />
+  <LeadModal
+    v-if="showLeadModal"
+    v-model="showLeadModal"
+    :defaults="defaults"
+  />
 </template>
 
 <script setup>
@@ -106,6 +111,8 @@ const route = useRoute()
 const leadsListView = ref(null)
 const showLeadModal = ref(false)
 
+const defaults = reactive({})
+
 // leads data is loaded in the ViewControls component
 const leads = ref({})
 const loadMore = ref(1)
@@ -252,53 +259,13 @@ function parseRows(rows) {
   })
 }
 
-let newLead = reactive({
-  salutation: '',
-  first_name: '',
-  last_name: '',
-  lead_name: '',
-  organization: '',
-  status: '',
-  email: '',
-  mobile_no: '',
-  lead_owner: '',
-})
+function onNewClick(column) {
+  let column_field = leads.value.params.column_field
 
-const createLead = createResource({
-  url: 'frappe.client.insert',
-  makeParams(values) {
-    return {
-      doc: {
-        doctype: 'CRM Lead',
-        ...values,
-      },
-    }
-  },
-})
+  if (column_field) {
+    defaults[column_field] = column.column.name
+  }
 
-function createNewLead(close) {
-  createLead
-    .submit(newLead, {
-      validate() {
-        if (!newLead.first_name) {
-          createToast({
-            title: __('Error creating lead'),
-            text: __('First name is required'),
-            icon: 'x',
-            iconClasses: 'text-red-600',
-          })
-          return __('First name is required')
-        }
-      },
-      onSuccess(data) {
-        router.push({
-          name: 'Lead',
-          params: {
-            leadId: data.name,
-          },
-        })
-      },
-    })
-    .then(close)
+  showLeadModal.value = true
 }
 </script>
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index dcbe9f39..ea63013c 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -28,7 +28,8 @@
     v-if="$route.params.viewType == 'kanban' && rows.length"
     v-model="tasks"
     :options="{
-      onRowClick: (row) => showTask(row.name),
+      onClick: (row) => showTask(row.name),
+      onNewClick: (column) => createTask(column),
     }"
     @update="(data) => viewControls.updateKanbanSettings(data)"
   />
@@ -64,7 +65,12 @@
       </Button>
     </div>
   </div>
-  <TaskModal v-model="showTaskModal" v-model:reloadTasks="tasks" :task="task" />
+  <TaskModal
+    v-if="showTaskModal"
+    v-model="showTaskModal"
+    v-model:reloadTasks="tasks"
+    :task="task"
+  />
 </template>
 
 <script setup>
@@ -165,7 +171,7 @@ function showTask(name) {
   showTaskModal.value = true
 }
 
-function createTask() {
+function createTask(column) {
   task.value = {
     name: '',
     title: '',
@@ -177,6 +183,14 @@ function createTask() {
     reference_doctype: 'CRM Lead',
     reference_docname: '',
   }
+
+  if (column.column?.name) {
+    let column_field = tasks.value.params.column_field
+    if (column_field) {
+      task.value[column_field] = column.column.name
+    }
+  }
+
   showTaskModal.value = true
 }
 </script>