feat: implement useUrlState hook for managing URL-based state in admin pages

- Refactor multiple admin pages (BlogsPage, ClinicsPage, DoctorsPage, etc.) to utilize the new useUrlState hook for managing pagination, search, and filter states via URL. - Ensure that the state persists in the URL, allowing users to return to the same state when navigating back from detail pages. - Update relevant components to handle state changes appropriately and maintain clean URLs by removing default values. - Add SlotPicker component for selecting appointment slots based on availability. - Create tests for useUrlState to validate its functionality and ensure correct behavior when interacting with the URL. - Update API documentation to reflect changes in appointment creation and slot selection processes.
2026-07-29 21:04:40 +03:30
parent e0e8fbd1e4
commit 684cf1f783
20 changed files with 668 additions and 79 deletions
@@ -18,10 +18,35 @@ beforeEach(() => {
  get.mockReset();
  post.mockReset();
  useAuthStore.setState({ primaryRole: 'doctor', dbUuid: 'doc1' } as any);
-  get.mockResolvedValue({ success: true, data: [] });
+  get.mockImplementation((url: string) => (
+    url.startsWith('/api/v1/appointment-slots')
+      ? Promise.resolve(SLOTS_RESPONSE)
+      : Promise.resolve({ success: true, data: [] })
+  ));
  post.mockResolvedValue({ success: true, data: { uuid: 'new1' } });
 });

+
+/** اسلات‌های واقعیِ برنامهٔ پزشک — حالت اسلاتی دیگر ساعت دستی نمی‌گیرد. */
+const SLOTS_RESPONSE = {
+  success: true,
+  data: {
+    sessions: [{
+      start_time: '15:00', end_time: '16:00',
+      slots: [
+        { start: 1754000000, end: 1754001800, start_time: '15:00', end_time: '15:30', is_available: true },
+        { start: 1754001800, end: 1754003600, start_time: '15:30', end_time: '16:00', is_available: false },
+      ],
+    }],
+    empty_reason: null,
+  },
+};
+
+/** انتخاب اولین اسلات آزاد (حالت اسلاتی). */
+async function pickSlot() {
+  fireEvent.click(await screen.findByRole('button', { name: '15:00' }));
+}
+
 describe('AppointmentCreatePage — افزودن نوبت', () => {
  it('posts a new appointment with the entered patient (happy path)', async () => {
    renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
@@ -31,6 +56,7 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
    fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '1234567891' } });

+    await pickSlot();
    fireEvent.click(screen.getByText('ثبت اطلاعات'));

    await waitFor(() => expect(post).toHaveBeenCalled());
@@ -45,6 +71,7 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
        return Promise.resolve({ success: true, data: { booking_mode: 'service', buffer_minutes: 5, services: [{ uuid: 'sv1', name: 'عصب‌کشی', duration_minutes: 30, price_rials: 500000, service_section: { uuid: 'sec1', name: 'دندان' } }] } });
      if (url.startsWith('/api/v1/appointment-service-slots'))
        return Promise.resolve({ success: true, data: { total_duration_minutes: 30, buffer_minutes: 5, start_times: [{ start: 1754000000, end: 1754001800, start_time: '15:00' }] } });
+      if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
      return Promise.resolve({ success: true, data: [] });
    });

@@ -55,8 +82,10 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
    fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '1234567891' } });

+    // صبر تا حالت سرویسی واقعاً رندر شود (پیش از آن، حالت اسلاتی است).
+    await waitFor(() => expect(document.getElementById('service-mode-section-select')).not.toBeNull());
    // حالت سرویس: ورودی ساعت شروع نباید باشد
-    await waitFor(() => expect(screen.queryByLabelText('ساعت شروع')).toBeNull());
+    expect(screen.queryByLabelText('ساعت شروع')).toBeNull();

    // حالت سرویسی هم «بخش → سرویس» است: ابتدا بخش، سپس سرویس
    const secInput = document.getElementById('service-mode-section-select') as HTMLInputElement;
@@ -72,6 +101,48 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    expect(body).toMatchObject({ doctor_uuid: 'doc1', slot_start: 1754000000, slot_end: 1754001800, service_item_uuids: ['sv1'] });
  });

+  it('حالت اسلاتی: اسلات پرشده قابل انتخاب نیست', async () => {
+    renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
+
+    const taken = await screen.findByRole('button', { name: '15:30' });
+    expect(taken).toBeDisabled();
+    expect(await screen.findByRole('button', { name: '15:00' })).not.toBeDisabled();
+  });
+
+  it('نوبتِ ساخته‌شده بلافاصله قطعی می‌شود', async () => {
+    renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
+
+    fireEvent.click(screen.getByText('مراجعه کننده جدید'));
+    fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده'), { target: { value: 'علی محمدی' } });
+    fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
+    fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '1234567891' } });
+    await pickSlot();
+    fireEvent.click(screen.getByText('ثبت اطلاعات'));
+
+    await waitFor(() => expect(post).toHaveBeenCalledWith('/api/v1/appointment/new1/confirm', { payments: [] }));
+  });
+
+  it('ورود از پروندهٔ بیمار: مراجعه‌کننده پیش‌پر می‌شود و جستجو نمایش داده نمی‌شود', async () => {
+    get.mockImplementation((url: string) => {
+      if (url === '/api/v1/patient/rec7')
+        return Promise.resolve({ success: true, data: { uuid: 'rec7', user_name: 'مریم خلیلی', user_mobile: '09136549874', user_national_code: '0012345675' } });
+      if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
+      return Promise.resolve({ success: true, data: [] });
+    });
+
+    renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new?record=rec7' });
+
+    expect(await screen.findByText('مریم خلیلی')).toBeInTheDocument();
+    expect(screen.queryByPlaceholderText('جستجوی نام، شماره تماس، شماره پرونده...')).toBeNull();
+    expect(screen.queryByText('مراجعه کننده جدید')).toBeNull();
+
+    await pickSlot();
+    fireEvent.click(screen.getByText('ثبت اطلاعات'));
+    await waitFor(() => expect(post).toHaveBeenCalled());
+    const [, body] = post.mock.calls[0];
+    expect(body).toMatchObject({ patient_name: 'مریم خلیلی', patient_mobile: '09136549874', patient_national_code: '0012345675' });
+  });
+
  it('keeps the submit button disabled until a valid patient is entered (boundary)', () => {
    renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
    const btn = screen.getByText('ثبت اطلاعات') as HTMLButtonElement;
@@ -96,6 +167,7 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    get.mockImplementation((url: string) => {
      if (url.startsWith('/api/v1/patients?'))
        return Promise.resolve({ success: true, data: [{ uuid: 'rec1', user_name: 'حامد حسینی', user_mobile: '09210671745', user_national_code: '0012345675' }] });
+      if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
      return Promise.resolve({ success: true, data: [] });
    });

@@ -104,6 +176,7 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    fireEvent.change(screen.getByPlaceholderText('جستجوی نام، شماره تماس، شماره پرونده...'), { target: { value: 'حامد' } });
    fireEvent.click(await screen.findByText(/حامد حسینی/));

+    await pickSlot();
    const btn = screen.getByText('ثبت اطلاعات') as HTMLButtonElement;
    await waitFor(() => expect(btn).not.toBeDisabled());

@@ -121,6 +194,7 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
        return Promise.resolve({ success: true, data: [{ uuid: 'i1', name: 'لیزر' }, { uuid: 'i2', name: 'ماساژ' }] });
      if (url === '/api/v1/service-items/sec2')
        return Promise.resolve({ success: true, data: [{ uuid: 'i3', name: 'پاکسازی' }] });
+      if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
      return Promise.resolve({ success: true, data: [] });
    });

@@ -153,6 +227,7 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    fireEvent.click(screen.getByLabelText('حذف ماساژ'));
    expect(screen.getByText('سرویس‌های انتخاب‌شده (2)')).toBeInTheDocument();

+    await pickSlot();
    fireEvent.click(screen.getByText('ثبت اطلاعات'));
    await waitFor(() => expect(post).toHaveBeenCalled());
    const [, body] = post.mock.calls[0];
@@ -164,6 +239,7 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    get.mockImplementation((url: string) => {
      if (url.startsWith('/api/v1/patients?'))
        return Promise.resolve({ success: true, data: [{ uuid: 'rec2', user_name: 'حامد حسینی', user_mobile: '09210671745', user_national_code: null }] });
+      if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
      return Promise.resolve({ success: true, data: [] });
    });

@@ -175,8 +251,9 @@ describe('AppointmentCreatePage — افزودن نوبت', () => {
    const btn = screen.getByText('ثبت اطلاعات') as HTMLButtonElement;
    expect(btn).toBeDisabled();

-    // کد ملیِ خالیِ رکورد را دستی وارد کن → فعال می‌شود
+    // کد ملیِ خالیِ رکورد را دستی وارد کن + انتخاب اسلات → فعال می‌شود
    fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '0012345675' } });
+    await pickSlot();
    await waitFor(() => expect(btn).not.toBeDisabled());
  });
 });