feat(contacts): add DataNotFound component for empty states in contacts and services grids
- Integrated DataNotFound component to display a message when no contacts or services are found in the respective grids. - Enhanced loading state handling in ServicesSelect and ScheduleCalendar components to improve user experience during data fetching.
This commit is contained in:
parent
92035a4ff8
commit
de7cdefcd5
@ -1,6 +1,7 @@
|
||||
/* eslint-disable canonical/id-match */
|
||||
'use client';
|
||||
|
||||
import { DataNotFound } from '@/components/shared/alert';
|
||||
import { CardSectionHeader } from '@/components/ui';
|
||||
import { ContactsContextProvider } from '@/context/contacts';
|
||||
import { useCustomerContacts } from '@/hooks/api/contacts';
|
||||
@ -104,11 +105,15 @@ export const MastersGrid = withContext(ContactsContextProvider)(function () {
|
||||
|
||||
if (isLoading) return <LoadingSpinner />;
|
||||
|
||||
const mastersContacts = (customer ? [{ ...customer, name: 'Я' }] : []).concat(
|
||||
contacts.filter((contact) => contact.role === Enum_Customer_Role.Master),
|
||||
);
|
||||
|
||||
if (!mastersContacts.length) return <DataNotFound title="Контакты не найдены" />;
|
||||
|
||||
return (
|
||||
<ContactsGridBase
|
||||
contacts={(customer ? [{ ...customer, name: 'Я' }] : []).concat(
|
||||
contacts.filter((contact) => contact.role === Enum_Customer_Role.Master),
|
||||
)}
|
||||
contacts={mastersContacts}
|
||||
onSelect={(contactId) => setMasterId(contactId)}
|
||||
selected={masterId}
|
||||
title="Выбор мастера"
|
||||
@ -127,6 +132,8 @@ export const ClientsGrid = withContext(ContactsContextProvider)(function () {
|
||||
|
||||
if (isLoading) return <LoadingSpinner />;
|
||||
|
||||
if (!contacts.length) return <DataNotFound title="Контакты не найдены" />;
|
||||
|
||||
return (
|
||||
<ContactsGridBase
|
||||
contacts={contacts}
|
||||
|
||||
@ -6,12 +6,13 @@ import { ServiceCard } from '@/components/shared/service-card';
|
||||
import { useServicesQuery } from '@/hooks/api/services';
|
||||
import { useOrderStore } from '@/stores/order';
|
||||
import { type ServiceFieldsFragment } from '@repo/graphql/types';
|
||||
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
|
||||
import { cn } from '@repo/ui/lib/utils';
|
||||
|
||||
export function ServicesSelect() {
|
||||
const masterId = useOrderStore((store) => store.masterId);
|
||||
|
||||
const { data: { services } = {} } = useServicesQuery({
|
||||
const { data: { services } = {}, isLoading } = useServicesQuery({
|
||||
filters: {
|
||||
active: {
|
||||
eq: true,
|
||||
@ -24,6 +25,8 @@ export function ServicesSelect() {
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) return <LoadingSpinner />;
|
||||
|
||||
if (!services?.length) return <DataNotFound title="Услуги не найдены" />;
|
||||
|
||||
return (
|
||||
|
||||
@ -24,7 +24,7 @@ export function ScheduleCalendar() {
|
||||
|
||||
const { endOfMonth, startOfMonth } = getDateUTCRange(currentMonthDate).month();
|
||||
|
||||
const { data: { slots } = {} } = useSlotsQuery({
|
||||
const { data: { slots } = {}, isLoading } = useSlotsQuery({
|
||||
filters: {
|
||||
datetime_start: {
|
||||
gte: startOfMonth,
|
||||
@ -41,6 +41,7 @@ export function ScheduleCalendar() {
|
||||
return (
|
||||
<Calendar
|
||||
className="bg-background"
|
||||
disabled={isLoading}
|
||||
// disabled={(date) => {
|
||||
// return dayjs().isAfter(dayjs(date), 'day');
|
||||
// }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user