From 82a728e041f5b2591a10001d2ecbe37746ed1061 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 4 Feb 2025 12:59:31 +0530
Subject: [PATCH] fix: also fixed for mobile view

---
 frontend/src/pages/MobileDeal.vue | 220 +++++++++++++++++-------------
 1 file changed, 125 insertions(+), 95 deletions(-)

diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index 6972d0f5..0277bcd2 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -65,112 +65,141 @@
               v-model="deal.data"
               :sections="sections.data"
               doctype="CRM Deal"
-              v-slot="{ section }"
               @update="updateField"
               @reload="sections.reload"
             >
-              <div
-                v-if="section.name == 'contacts_section'"
-                class="contacts-area"
-              >
-                <div
-                  v-if="
-                    dealContacts?.loading && dealContacts?.data?.length == 0
-                  "
-                  class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
-                >
-                  <LoadingIndicator class="h-4 w-4" />
-                  <span>{{ __('Loading...') }}</span>
+              <template #actions="{ section }">
+                <div v-if="section.name == 'contacts_section'" class="pr-2">
+                  <Link
+                    value=""
+                    doctype="Contact"
+                    @change="(e) => addContact(e)"
+                    :onCreate="
+                      (value, close) => {
+                        _contact = {
+                          first_name: value,
+                          company_name: deal.data.organization,
+                        }
+                        showContactModal = true
+                        close()
+                      }
+                    "
+                  >
+                    <template #target="{ togglePopover }">
+                      <Button
+                        class="h-7 px-3"
+                        variant="ghost"
+                        icon="plus"
+                        @click="togglePopover()"
+                      />
+                    </template>
+                  </Link>
                 </div>
+              </template>
+              <template #default="{ section }">
                 <div
-                  v-else-if="section.contacts.length"
-                  v-for="(contact, i) in section.contacts"
-                  :key="contact.name"
+                  v-if="section.name == 'contacts_section'"
+                  class="contacts-area"
                 >
                   <div
-                    class="px-2 pb-2.5"
-                    :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
+                    v-if="
+                      dealContacts?.loading && dealContacts?.data?.length == 0
+                    "
+                    class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
                   >
-                    <Section :opened="contact.opened">
-                      <template #header="{ opened, toggle }">
-                        <div
-                          class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
-                        >
-                          <div
-                            class="flex h-7 items-center gap-2 truncate"
-                            @click="toggle()"
-                          >
-                            <Avatar
-                              :label="contact.full_name"
-                              :image="contact.image"
-                              size="md"
-                            />
-                            <div class="truncate">
-                              {{ contact.full_name }}
-                            </div>
-                            <Badge
-                              v-if="contact.is_primary"
-                              class="ml-2"
-                              variant="outline"
-                              :label="__('Primary')"
-                              theme="green"
-                            />
-                          </div>
-                          <div class="flex items-center">
-                            <Dropdown :options="contactOptions(contact.name)">
-                              <Button
-                                icon="more-horizontal"
-                                class="text-ink-gray-5"
-                                variant="ghost"
-                              />
-                            </Dropdown>
-                            <Button
-                              variant="ghost"
-                              @click="
-                                router.push({
-                                  name: 'Contact',
-                                  params: { contactId: contact.name },
-                                })
-                              "
-                            >
-                              <ArrowUpRightIcon class="h-4 w-4" />
-                            </Button>
-                            <Button variant="ghost" @click="toggle()">
-                              <FeatherIcon
-                                name="chevron-right"
-                                class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
-                                :class="{ 'rotate-90': opened }"
-                              />
-                            </Button>
-                          </div>
-                        </div>
-                      </template>
-                      <div
-                        class="flex flex-col gap-1.5 text-base text-ink-gray-8"
-                      >
-                        <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
-                          <Email2Icon class="h-4 w-4" />
-                          {{ contact.email }}
-                        </div>
-                        <div class="flex items-center gap-3 p-1 py-1.5">
-                          <PhoneIcon class="h-4 w-4" />
-                          {{ contact.mobile_no }}
-                        </div>
-                      </div>
-                    </Section>
+                    <LoadingIndicator class="h-4 w-4" />
+                    <span>{{ __('Loading...') }}</span>
                   </div>
                   <div
-                    v-if="i != section.contacts.length - 1"
-                    class="mx-2 h-px border-t border-outline-gray-modals"
-                  />
+                    v-else-if="section.contacts.length"
+                    v-for="(contact, i) in section.contacts"
+                    :key="contact.name"
+                  >
+                    <div
+                      class="px-2 pb-2.5"
+                      :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
+                    >
+                      <Section :opened="contact.opened">
+                        <template #header="{ opened, toggle }">
+                          <div
+                            class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
+                          >
+                            <div
+                              class="flex h-7 items-center gap-2 truncate"
+                              @click="toggle()"
+                            >
+                              <Avatar
+                                :label="contact.full_name"
+                                :image="contact.image"
+                                size="md"
+                              />
+                              <div class="truncate">
+                                {{ contact.full_name }}
+                              </div>
+                              <Badge
+                                v-if="contact.is_primary"
+                                class="ml-2"
+                                variant="outline"
+                                :label="__('Primary')"
+                                theme="green"
+                              />
+                            </div>
+                            <div class="flex items-center">
+                              <Dropdown :options="contactOptions(contact.name)">
+                                <Button
+                                  icon="more-horizontal"
+                                  class="text-ink-gray-5"
+                                  variant="ghost"
+                                />
+                              </Dropdown>
+                              <Button
+                                variant="ghost"
+                                @click="
+                                  router.push({
+                                    name: 'Contact',
+                                    params: { contactId: contact.name },
+                                  })
+                                "
+                              >
+                                <ArrowUpRightIcon class="h-4 w-4" />
+                              </Button>
+                              <Button variant="ghost" @click="toggle()">
+                                <FeatherIcon
+                                  name="chevron-right"
+                                  class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
+                                  :class="{ 'rotate-90': opened }"
+                                />
+                              </Button>
+                            </div>
+                          </div>
+                        </template>
+                        <div
+                          class="flex flex-col gap-1.5 text-base text-ink-gray-8"
+                        >
+                          <div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
+                            <Email2Icon class="h-4 w-4" />
+                            {{ contact.email }}
+                          </div>
+                          <div class="flex items-center gap-3 p-1 py-1.5">
+                            <PhoneIcon class="h-4 w-4" />
+                            {{ contact.mobile_no }}
+                          </div>
+                        </div>
+                      </Section>
+                    </div>
+                    <div
+                      v-if="i != section.contacts.length - 1"
+                      class="mx-2 h-px border-t border-outline-gray-modals"
+                    />
+                  </div>
+                  <div
+                    v-else
+                    class="flex h-20 items-center justify-center text-base text-ink-gray-5"
+                  >
+                    {{ __('No contacts added') }}
+                  </div>
                 </div>
-                <div
-                  v-else
-                  class="flex h-20 items-center justify-center text-base text-ink-gray-5"
-                >
-                  {{ __('No contacts added') }}
-                </div>
-              </div>
+              </template>
             </SidePanelLayout>
           </div>
         </div>
@@ -224,6 +253,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import AssignTo from '@/components/AssignTo.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import Section from '@/components/Section.vue'
+import Link from '@/components/Controls/Link.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'