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:
vchikalkin 2025-09-08 18:35:52 +03:00
parent 92035a4ff8
commit de7cdefcd5
3 changed files with 16 additions and 5 deletions

View File

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

View File

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

View File

@ -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');
// }}