feat: Contact details screen

2024-11-04 19:46:02 +05:30
parent dd9e9286b3
commit b71a05f790
11 changed files with 461 additions and 37 deletions
@@ -1,21 +1,25 @@
 import { frontendURL } from 'dashboard/helper/URLHelper.js';

 import ContactsPageRouteView from './pages/ContactsPageRouteView.vue';
+import EditContactsPageRouteView from './pages/EditContactsPageRouteView.vue';

 const contactsRoutes = {
  routes: [
    {
      path: frontendURL('accounts/:accountId/contacts-new'),
      component: ContactsPageRouteView,
-      children: [
-        {
-          path: 'ongoing',
-          name: 'contacts_dashboard_index',
-          meta: {
-            permissions: ['administrator', 'agent', 'contact_manage'],
-          },
-        },
-      ],
+      name: 'contacts_dashboard_index',
+      meta: {
+        permissions: ['administrator', 'agent', 'contact_manage'],
+      },
+    },
+    {
+      path: frontendURL('accounts/:accountId/contacts-new/:contactId'),
+      component: EditContactsPageRouteView,
+      name: 'contacts_dashboard_edit_index',
+      meta: {
+        permissions: ['administrator', 'agent', 'contact_manage'],
+      },
    },
  ],
 };
@@ -4,6 +4,7 @@ import { useStore, useMapGetter } from 'dashboard/composables/store';

 import ContactsLayout from 'dashboard/components-next/Contacts/ContactsLayout.vue';
 import ContactsList from 'dashboard/components-next/Contacts/Pages/ContactsList.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';

 const store = useStore();

@@ -11,6 +12,8 @@ const contacts = useMapGetter('contacts/getContacts');
 const uiFlags = useMapGetter('contacts/getUIFlags');
 const meta = useMapGetter('contacts/getMeta');

+const isFetchingList = computed(() => uiFlags.value.isFetching);
+
 const currentPage = computed(() => Number(meta.value?.currentPage));
 const totalItems = computed(() => meta.value?.count);

@@ -38,7 +41,13 @@ const updateCurrentPage = page => {
      :total-items="totalItems"
      @update:current-page="updateCurrentPage"
    >
-      <ContactsList :contacts="contacts" />
+      <div
+        v-if="isFetchingList"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <ContactsList v-else :contacts="contacts" />
    </ContactsLayout>
  </div>
 </template>
@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted, computed } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'vue-router';
+
+import ContactsLayout from 'dashboard/components-next/Contacts/ContactsLayout.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ContactDetails from 'dashboard/components-next/Contacts/Pages/ContactDetails.vue';
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const contact = useMapGetter('contacts/getContact');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const isFetchingItem = computed(() => uiFlags.value.isFetchingItem);
+
+const selectedContact = computed(() => contact.value(route.params.contactId));
+
+const goToContactsList = () => {
+  router.push({
+    name: 'contacts_dashboard_index',
+  });
+};
+
+const fetchActiveContact = async () => {
+  if (route.params.contactId) {
+    store.dispatch('contacts/show', { id: route.params.contactId });
+  }
+};
+
+onMounted(() => {
+  fetchActiveContact();
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+  >
+    <ContactsLayout
+      :button-label="$t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
+      :selected-contact="selectedContact"
+      is-detail-view
+      :show-pagination-footer="false"
+      @go-to-contacts-list="goToContactsList"
+    >
+      <div
+        v-if="isFetchingItem"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <ContactDetails
+        v-else
+        :selected-contact="selectedContact"
+        @go-to-contacts-list="goToContactsList"
+      />
+    </ContactsLayout>
+  </div>
+</template>