Merge pull request #42 from shariquerik/empty-state
fix: Added empty states
This commit is contained in:
commit
ad505c414c
@ -568,25 +568,21 @@
|
||||
<span>{{ emptyText }}</span>
|
||||
<Button
|
||||
v-if="title == 'Calls'"
|
||||
variant="solid"
|
||||
label="Make a Call"
|
||||
@click="makeCall(doc.data.mobile_no)"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="title == 'Notes'"
|
||||
variant="solid"
|
||||
label="Create Note"
|
||||
@click="showNote()"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="title == 'Emails'"
|
||||
variant="solid"
|
||||
label="Send Email"
|
||||
@click="$refs.emailBox.show = true"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="title == 'Tasks'"
|
||||
variant="solid"
|
||||
label="Create Task"
|
||||
@click="showTask()"
|
||||
/>
|
||||
|
||||
@ -14,13 +14,25 @@
|
||||
</div>
|
||||
</div>
|
||||
<CallLogsListView
|
||||
v-if="callLogs.data"
|
||||
v-if="callLogs.data && rows.length"
|
||||
:rows="rows"
|
||||
:columns="callLogs.data.columns"
|
||||
/>
|
||||
<div v-else-if="callLogs.data" class="flex h-full items-center justify-center">
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
|
||||
>
|
||||
<PhoneIcon class="h-10 w-10" />
|
||||
<span>No Logs Found</span>
|
||||
<Button label="Create" @click="showNewDialog = true">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import SortBy from '@/components/SortBy.vue'
|
||||
import Filter from '@/components/Filter.vue'
|
||||
@ -37,7 +49,7 @@ import { contactsStore } from '@/stores/contacts'
|
||||
import { useOrderBy } from '@/composables/orderby'
|
||||
import { useFilter } from '@/composables/filter'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { createResource, Breadcrumbs } from 'frappe-ui'
|
||||
import { createResource, Breadcrumbs, FeatherIcon } from 'frappe-ui'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
const { getUser } = usersStore()
|
||||
|
||||
@ -186,9 +186,9 @@
|
||||
v-if="!rows.length"
|
||||
class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center space-y-2">
|
||||
<div class="flex flex-col items-center justify-center space-y-3">
|
||||
<component :is="tab.icon" class="!h-10 !w-10" />
|
||||
<div>No {{ tab.label.toLowerCase() }} found</div>
|
||||
<div>No {{ tab.label }} Found</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -34,14 +34,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<ContactsListView
|
||||
v-if="contacts.data"
|
||||
v-if="contacts.data && rows.length"
|
||||
:rows="rows"
|
||||
:columns="contacts.data.columns"
|
||||
/>
|
||||
<div v-else-if="contacts.data" class="flex h-full items-center justify-center">
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
|
||||
>
|
||||
<ContactsIcon class="h-10 w-10" />
|
||||
<span>No Contacts Found</span>
|
||||
<Button label="Create" @click="showNewDialog = true">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<ContactModal v-model="showContactModal" :contact="{}" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import ContactModal from '@/components/Modals/ContactModal.vue'
|
||||
import ContactsListView from '@/components/ListViews/ContactsListView.vue'
|
||||
|
||||
@ -33,7 +33,18 @@
|
||||
<ViewSettings doctype="CRM Deal" v-model="deals" />
|
||||
</div>
|
||||
</div>
|
||||
<DealsListView v-if="deals.data" :rows="rows" :columns="deals.data.columns" />
|
||||
<DealsListView v-if="deals.data && rows.length" :rows="rows" :columns="deals.data.columns" />
|
||||
<div v-else-if="deals.data" class="flex h-full items-center justify-center">
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
|
||||
>
|
||||
<DealsIcon class="h-10 w-10" />
|
||||
<span>No Deals Found</span>
|
||||
<Button label="Create" @click="showNewDialog = true">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
v-model="showNewDialog"
|
||||
:options="{
|
||||
@ -54,6 +65,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DealsIcon from '@/components/Icons/DealsIcon.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import DealsListView from '@/components/ListViews/DealsListView.vue'
|
||||
import NewDeal from '@/components/NewDeal.vue'
|
||||
|
||||
@ -32,7 +32,22 @@
|
||||
<ViewSettings doctype="CRM Lead" v-model="leads" />
|
||||
</div>
|
||||
</div>
|
||||
<LeadsListView v-if="leads.data" :rows="rows" :columns="leads.data.columns" />
|
||||
<LeadsListView
|
||||
v-if="leads.data && rows.length"
|
||||
:rows="rows"
|
||||
:columns="leads.data.columns"
|
||||
/>
|
||||
<div v-else-if="leads.data" class="flex h-full items-center justify-center">
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
|
||||
>
|
||||
<LeadsIcon class="h-10 w-10" />
|
||||
<span>No Leads Found</span>
|
||||
<Button label="Create" @click="showNewDialog = true">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
v-model="showNewDialog"
|
||||
:options="{
|
||||
@ -53,6 +68,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import LeadsListView from '@/components/ListViews/LeadsListView.vue'
|
||||
import NewLead from '@/components/NewLead.vue'
|
||||
|
||||
@ -61,13 +61,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-1 items-center justify-center p-5 text-xl font-medium text-gray-500"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<NoteIcon class="h-10 w-10 text-gray-500" />
|
||||
<span>No notes</span>
|
||||
<div v-else class="flex h-full items-center justify-center">
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
|
||||
>
|
||||
<NoteIcon class="h-10 w-10" />
|
||||
<span>No Notes Found</span>
|
||||
<Button label="Create" @click="createNote">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<NoteModal
|
||||
|
||||
@ -208,9 +208,9 @@
|
||||
v-if="!rows.length"
|
||||
class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center space-y-2">
|
||||
<div class="flex flex-col items-center justify-center space-y-3">
|
||||
<component :is="tab.icon" class="!h-10 !w-10" />
|
||||
<div>No {{ tab.label.toLowerCase() }} found</div>
|
||||
<div>No {{ tab.label }} Found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,13 +38,25 @@
|
||||
</div>
|
||||
</div>
|
||||
<OrganizationsListView
|
||||
v-if="organizations.data"
|
||||
v-if="organizations.data && rows.length"
|
||||
:rows="rows"
|
||||
:columns="organizations.data.columns"
|
||||
/>
|
||||
<div v-else-if="organizations.data" class="flex h-full items-center justify-center">
|
||||
<div
|
||||
class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
|
||||
>
|
||||
<OrganizationsIcon class="h-10 w-10" />
|
||||
<span>No Organizations Found</span>
|
||||
<Button label="Create" @click="showNewDialog = true">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<OrganizationModal v-model="showOrganizationModal" :organization="{}" />
|
||||
</template>
|
||||
<script setup>
|
||||
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
|
||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||
import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
|
||||
import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user