Merge pull request #42 from shariquerik/empty-state

fix: Added empty states
This commit is contained in:
Shariq Ansari 2023-12-24 12:27:25 +05:30 committed by GitHub
commit ad505c414c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 83 additions and 21 deletions

View File

@ -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()"
/>

View File

@ -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()

View File

@ -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>

View File

@ -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'

View File

@ -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'

View File

@ -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'

View File

@ -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

View File

@ -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>

View File

@ -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'