fix: on new click show creation modal

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,
+                to: options.getRoute ? options.getRoute(fields) : undefined,
-                onClick: options.onRowClick
+                onClick: options.onClick
-                  ? () => options.onRowClick(fields)
+                  ? () => options.onClick(fields)
                   : undefined,
               }"
             >
@@ -102,8 +106,9 @@ const props = defineProps({
   options: {
     type: Object,
     default: () => ({
-      getRowRoute: null,
+      getRoute: null,
-      onRowClick: null,
+      onClick: null,
+      onNewClick: null,
     }),
   },
 })

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
   }

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
   }

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) => {

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>

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({
+function onNewClick(column) {
-  salutation: '',
+  let column_field = leads.value.params.column_field
-  first_name: '',
-  last_name: '',
-  lead_name: '',
-  organization: '',
-  status: '',
-  email: '',
-  mobile_no: '',
-  lead_owner: '',
-})
 
-const createLead = createResource({
+  if (column_field) {
-  url: 'frappe.client.insert',
+    defaults[column_field] = column.column.name
-  makeParams(values) {
+  }
-    return {
-      doc: {
-        doctype: 'CRM Lead',
-        ...values,
-      },
-    }
-  },
-})
 
-function createNewLead(close) {
+  showLeadModal.value = true
-  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)
 }
 </script>

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>