clqms-fe1/src/lib/components/TestModal.svelte

<script>
  import Modal from '$lib/components/Modal.svelte';
  import BasicInfoForm from '$lib/components/test-modal/BasicInfoForm.svelte';
  import ReferenceRangeSection from '$lib/components/test-modal/ReferenceRangeSection.svelte';

  /**
   * @typedef {Object} Props
   * @property {boolean} open - Whether modal is open
   * @property {string} mode - 'create' or 'edit'
   * @property {Object} formData - Form data object
   * @property {boolean} canHaveRefRange - Whether test can have reference ranges
   * @property {boolean} canHaveFormula - Whether test can have a formula
   * @property {boolean} canHaveUnit - Whether test can have a unit
   * @property {Array<{value: string, label: string}>} disciplineOptions - Discipline dropdown options
   * @property {Array<{value: string, label: string}>} departmentOptions - Department dropdown options
   * @property {boolean} [saving] - Whether save is in progress
   */

  /** @type {Props & { onsave?: () => void, oncancel?: () => void, onupdateFormData?: (formData: Object) => void }} */
  let {
    open = $bindable(false),
    mode = 'create',
    formData = $bindable({}),
    canHaveRefRange = false,
    canHaveFormula = false,
    canHaveUnit = false,
    disciplineOptions = [],
    departmentOptions = [],
    saving = false,
    onsave = () => {},
    oncancel = () => {},
    onupdateFormData = () => {}
  } = $props();

  // Local state
  let activeTab = $state('basic');

  function handleCancel() {
    activeTab = 'basic';
    oncancel();
  }

  function handleSave() {
    onsave();
  }

  // Reactive update when modal opens
  $effect(() => {
    if (open) {
      activeTab = 'basic';
    }
  });
</script>

<Modal bind:open title={mode === 'create' ? 'Add Test' : 'Edit Test'} size="xl">
  <!-- Tabs -->
  <div class="tabs tabs-bordered mb-4">
    <button
      type="button"
      class="tab tab-lg {activeTab === 'basic' ? 'tab-active' : ''}"
      onclick={() => activeTab = 'basic'}
    >
      Basic Information
    </button>
    {#if canHaveRefRange}
      <button
        type="button"
        class="tab tab-lg {activeTab === 'refrange' ? 'tab-active' : ''}"
        onclick={() => activeTab = 'refrange'}
      >
        Reference Range
        {#if formData.refnum?.length > 0 || formData.reftxt?.length > 0}
          <span class="badge badge-sm badge-primary ml-2">{(formData.refnum?.length || 0) + (formData.reftxt?.length || 0)}</span>
        {/if}
      </button>
    {/if}
  </div>

  {#if activeTab === 'basic'}
    <BasicInfoForm
      bind:formData
      {canHaveFormula}
      {canHaveUnit}
      {disciplineOptions}
      {departmentOptions}
      onsave={handleSave}
    />
  {:else if activeTab === 'refrange' && canHaveRefRange}
    <ReferenceRangeSection
      bind:formData
      {onupdateFormData}
    />
  {/if}

  {#snippet footer()}
    <button class="btn btn-ghost" onclick={handleCancel} type="button">Cancel</button>
    <button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
      {#if saving}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {saving ? 'Saving...' : 'Save'}
    </button>
  {/snippet}
</Modal>