fix: fileuploader for lead image and deal image

frontend/src/pages/Deal.vue

@@ -87,6 +87,8 @@
         />
       </div>
       <div class="flex flex-col justify-between border-l w-[370px]">
+        <FileUploader @success="changeDealImage" :validateFile="validateFile">
+          <template #default="{ openFileSelector, error }">
             <div
               class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
             >
@@ -96,6 +98,7 @@
                 :label="deal.data.organization_name"
                 :image="deal.data.organization_logo"
               />
+              <ErrorMessage :message="error" />
               <div class="font-medium text-2xl">
                 {{ deal.data.organization_name }}
               </div>
@@ -118,9 +121,23 @@
                     class="rounded-full h-8 w-8"
                   />
                 </Tooltip>
+                <Dropdown
+                  :options="[
+                    {
+                      icon: 'upload',
+                      label: deal.data.organization_logo
+                        ? 'Change image'
+                        : 'Upload image',
+                      onClick: openFileSelector,
+                    },
+                  ]"
+                >
                   <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+                </Dropdown>
               </div>
             </div>
+          </template>
+        </FileUploader>
         <div class="flex-1 flex flex-col justify-between overflow-hidden">
           <div class="flex flex-col gap-6 p-3 overflow-y-auto">
             <div
@@ -321,6 +338,8 @@ import {
   createDocumentResource,
   createListResource,
   FeatherIcon,
+  FileUploader,
+  ErrorMessage,
   Autocomplete,
   FormControl,
   Dropdown,
@@ -412,14 +431,22 @@ const tabs = computed(() => {
 })
 
 function all_activities() {
-  if (!lead.data) return []
+  if (!deal.data) return []
-  if (!calls.data) return lead.data.activities
+  if (!calls.data) return deal.data.activities
-  console.log(lead.data.activities[0].creation)
+  return [...deal.data.activities, ...calls.data].sort(
-  console.log(calls.data[0].creation)
+    (a, b) => new Date(b.creation) - new Date(a.creation)
-  return [
+  )
-    ...lead.data.activities,
+}
-    ...calls.data,
+
-  ].sort((a, b) => new Date(b.creation) - new Date(a.creation))
+function changeDealImage(file) {
+  uDeal.setValue.submit({ organization_logo: file.file_url })
+}
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return 'Only PNG and JPG images are allowed'
+  }
 }
 
 const tabRef = ref([])
@@ -601,7 +628,8 @@ const calls = createListResource({
   auto: true,
   transform: (docs) => {
     docs.forEach((doc) => {
-      doc.activity_type = doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
+      doc.activity_type =
+        doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
       doc.duration = secondsToDuration(doc.duration)
       if (doc.type === 'Incoming') {
         doc.caller = {

frontend/src/pages/Lead.vue

@@ -90,6 +90,8 @@
         />
       </div>
       <div class="flex flex-col justify-between border-l w-[370px]">
+        <FileUploader @success="changeLeadImage" :validateFile="validateFile">
+          <template #default="{ openFileSelector, error }">
             <div
               class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
             >
@@ -98,6 +100,7 @@
                 :label="lead.data.first_name"
                 :image="lead.data.image"
               />
+              <ErrorMessage :message="error" />
               <div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
               <div class="flex gap-3">
                 <Tooltip text="Make a call...">
@@ -118,9 +121,21 @@
                     class="rounded-full h-8 w-8"
                   />
                 </Tooltip>
+                <Dropdown
+                  :options="[
+                    {
+                      icon: 'upload',
+                      label: lead.data.image ? 'Change photo' : 'Upload photo',
+                      onClick: openFileSelector,
+                    },
+                  ]"
+                >
                   <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+                </Dropdown>
               </div>
             </div>
+          </template>
+        </FileUploader>
         <div class="flex-1 flex flex-col justify-between overflow-hidden">
           <div class="flex flex-col gap-6 p-3 overflow-y-auto">
             <div
@@ -310,6 +325,8 @@ import {
   createResource,
   createDocumentResource,
   createListResource,
+  FileUploader,
+  ErrorMessage,
   FeatherIcon,
   Autocomplete,
   FormControl,
@@ -408,10 +425,20 @@ function all_activities() {
   if (!calls.data) return lead.data.activities
   console.log(lead.data.activities[0].creation)
   console.log(calls.data[0].creation)
-  return [
+  return [...lead.data.activities, ...calls.data].sort(
-    ...lead.data.activities,
+    (a, b) => new Date(b.creation) - new Date(a.creation)
-    ...calls.data,
+  )
-  ].sort((a, b) => new Date(b.creation) - new Date(a.creation))
+}
+
+function changeLeadImage(file) {
+  uLead.setValue.submit({ image: file.file_url })
+}
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return 'Only PNG and JPG images are allowed'
+  }
 }
 
 const tabRef = ref([])
@@ -634,7 +661,8 @@ const calls = createListResource({
   auto: true,
   transform: (docs) => {
     docs.forEach((doc) => {
-      doc.activity_type = doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
+      doc.activity_type =
+        doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
       doc.duration = secondsToDuration(doc.duration)
       if (doc.type === 'Incoming') {
         doc.caller = {