clqms-fe1/src/routes/(app)/master-data/tests/test-modal/BasicInfoForm.svelte

<script>
  import SelectDropdown from '$lib/components/SelectDropdown.svelte';
  import HelpTooltip from '$lib/components/HelpTooltip.svelte';

  /**
   * @typedef {Object} Props
   * @property {Object} formData - Form data object
   * @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 {() => void} onsave - Save handler
   */

  /** @type {Props} */
  let {
    formData = $bindable({}),
    canHaveFormula = false,
    canHaveUnit = false,
    disciplineOptions = [],
    departmentOptions = [],
    onsave = () => {}
  } = $props();

  function handleSubmit(e) {
    e.preventDefault();
    onsave();
  }
</script>

<form class="space-y-5" onsubmit={handleSubmit}>
  <!-- Basic Info -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="form-control">
      <label class="label" for="testCode">
        <span class="label-text font-medium">Test Code</span>
        <span class="label-text-alt text-error">*</span>
      </label>
      <input
        id="testCode"
        type="text"
        class="input input-bordered w-full"
        bind:value={formData.TestSiteCode}
        placeholder="e.g., GLU"
        required
      />
    </div>
    <div class="form-control">
      <label class="label" for="testName">
        <span class="label-text font-medium">Test Name</span>
        <span class="label-text-alt text-error">*</span>
      </label>
      <input
        id="testName"
        type="text"
        class="input input-bordered w-full"
        bind:value={formData.TestSiteName}
        placeholder="e.g., Glucose"
        required
      />
    </div>
  </div>

  <!-- Type and Sequence -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="form-control">
      <label class="label" for="testType">
        <span class="label-text font-medium">Test Type</span>
        <span class="label-text-alt text-error">*</span>
      </label>
      <select
        id="testType"
        class="select select-bordered w-full"
        bind:value={formData.TestType}
        required
      >
        <option value="TEST">Technical Test</option>
        <option value="PARAM">Parameter</option>
        <option value="CALC">Calculated</option>
        <option value="GROUP">Panel/Profile</option>
        <option value="TITLE">Section Header</option>
      </select>
    </div>
    <div class="form-control">
      <label class="label" for="seqScr">
        <span class="label-text font-medium">Screen Sequence</span>
      </label>
      <input
        id="seqScr"
        type="number"
        class="input input-bordered w-full"
        bind:value={formData.SeqScr}
        placeholder="0"
      />
    </div>
  </div>

  <!-- Discipline and Department -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <SelectDropdown
      label="Discipline"
      name="discipline"
      bind:value={formData.DisciplineID}
      options={disciplineOptions}
      placeholder="Select discipline..."
    />
    <SelectDropdown
      label="Department"
      name="department"
      bind:value={formData.DepartmentID}
      options={departmentOptions}
      placeholder="Select department..."
    />
  </div>

  <!-- Type-specific fields -->
  {#if canHaveUnit}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      {#if canHaveFormula}
        <div class="form-control">
          <label class="label" for="formula">
            <span class="label-text font-medium flex items-center gap-2">
              Formula
              <HelpTooltip
                text="Enter a mathematical formula using test codes (e.g., BUN / Creatinine). Supported operators: +, -, *, /, parentheses."
                title="Formula Help"
              />
            </span>
            <span class="label-text-alt text-error">*</span>
          </label>
          <input
            id="formula"
            type="text"
            class="input input-bordered w-full"
            bind:value={formData.Formula}
            placeholder="e.g., BUN / Creatinine"
            required={canHaveFormula}
          />
          <span class="label-text-alt text-gray-500">Use test codes with operators: +, -, *, /</span>
        </div>
      {/if}
      <div class="form-control">
        <label class="label" for="unit">
          <span class="label-text font-medium">Unit</span>
        </label>
        <input
          id="unit"
          type="text"
          class="input input-bordered w-full"
          bind:value={formData.Unit}
          placeholder="e.g., mg/dL"
        />
      </div>
    </div>
  {/if}

  <!-- Report Sequence and Visibility -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="form-control">
      <label class="label" for="seqRpt">
        <span class="label-text font-medium">Report Sequence</span>
      </label>
      <input
        id="seqRpt"
        type="number"
        class="input input-bordered w-full"
        bind:value={formData.SeqRpt}
        placeholder="0"
      />
    </div>
    <div class="form-control">
      <span class="label-text font-medium mb-2 block">Visibility</span>
      <div class="flex gap-4">
        <label class="label cursor-pointer gap-2">
          <input type="checkbox" class="checkbox" bind:checked={formData.VisibleScr} />
          <span class="label-text">Screen</span>
        </label>
        <label class="label cursor-pointer gap-2">
          <input type="checkbox" class="checkbox" bind:checked={formData.VisibleRpt} />
          <span class="label-text">Report</span>
        </label>
      </div>
    </div>
  </div>
</form>