fix: fileuploader for lead image and deal image

frontend/src/pages/Deal.vue

@@ -87,40 +87,57 @@
         />
       </div>
       <div class="flex flex-col justify-between border-l w-[370px]">
-        <div
+        <FileUploader @success="changeDealImage" :validateFile="validateFile">
-          class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
+          <template #default="{ openFileSelector, error }">
-        >
+            <div
-          <Avatar
+              class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
-            size="3xl"
+            >
-            shape="square"
+              <Avatar
-            :label="deal.data.organization_name"
+                size="3xl"
-            :image="deal.data.organization_logo"
+                shape="square"
-          />
+                :label="deal.data.organization_name"
-          <div class="font-medium text-2xl">
+                :image="deal.data.organization_logo"
-            {{ deal.data.organization_name }}
-          </div>
-          <div class="flex gap-3">
-            <Tooltip text="Make a call...">
-              <Button
-                class="rounded-full h-8 w-8"
-                @click="() => makeCall(deal.data.mobile_no)"
-              >
-                <PhoneIcon class="h-4 w-4" />
-              </Button>
-            </Tooltip>
-            <Button class="rounded-full h-8 w-8">
-              <EmailIcon class="h-4 w-4" />
-            </Button>
-            <Tooltip text="Go to website...">
-              <Button
-                icon="link"
-                @click="openWebsite(deal.data.website)"
-                class="rounded-full h-8 w-8"
               />
-            </Tooltip>
+              <ErrorMessage :message="error" />
-            <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+              <div class="font-medium text-2xl">
-          </div>
+                {{ deal.data.organization_name }}
-        </div>
+              </div>
+              <div class="flex gap-3">
+                <Tooltip text="Make a call...">
+                  <Button
+                    class="rounded-full h-8 w-8"
+                    @click="() => makeCall(deal.data.mobile_no)"
+                  >
+                    <PhoneIcon class="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <Button class="rounded-full h-8 w-8">
+                  <EmailIcon class="h-4 w-4" />
+                </Button>
+                <Tooltip text="Go to website...">
+                  <Button
+                    icon="link"
+                    @click="openWebsite(deal.data.website)"
+                    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,37 +90,52 @@
         />
       </div>
       <div class="flex flex-col justify-between border-l w-[370px]">
-        <div
+        <FileUploader @success="changeLeadImage" :validateFile="validateFile">
-          class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
+          <template #default="{ openFileSelector, error }">
-        >
+            <div
-          <Avatar
+              class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
-            size="3xl"
+            >
-            :label="lead.data.first_name"
+              <Avatar
-            :image="lead.data.image"
+                size="3xl"
-          />
+                :label="lead.data.first_name"
-          <div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
+                :image="lead.data.image"
-          <div class="flex gap-3">
-            <Tooltip text="Make a call...">
-              <Button
-                class="rounded-full h-8 w-8"
-                @click="() => makeCall(lead.data.mobile_no)"
-              >
-                <PhoneIcon class="h-4 w-4" />
-              </Button>
-            </Tooltip>
-            <Button class="rounded-full h-8 w-8">
-              <EmailIcon class="h-4 w-4" />
-            </Button>
-            <Tooltip text="Go to website...">
-              <Button
-                icon="link"
-                @click="openWebsite(lead.data.website)"
-                class="rounded-full h-8 w-8"
               />
-            </Tooltip>
+              <ErrorMessage :message="error" />
-            <Button icon="more-horizontal" class="rounded-full h-8 w-8" />
+              <div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
-          </div>
+              <div class="flex gap-3">
-        </div>
+                <Tooltip text="Make a call...">
+                  <Button
+                    class="rounded-full h-8 w-8"
+                    @click="() => makeCall(lead.data.mobile_no)"
+                  >
+                    <PhoneIcon class="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <Button class="rounded-full h-8 w-8">
+                  <EmailIcon class="h-4 w-4" />
+                </Button>
+                <Tooltip text="Go to website...">
+                  <Button
+                    icon="link"
+                    @click="openWebsite(lead.data.website)"
+                    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 = {