clqms-fe1/src/lib/components/test-modal/TextRefRange.svelte

<script>
  import { PlusCircle, FileText, X } from 'lucide-svelte';
  import { sexOptions } from './refRangeConstants.js';

  /**
   * @typedef {Object} Props
   * @property {Array} reftxt - Text reference ranges array
   * @property {(reftxt: Array) => void} onupdateReftxt - Update handler
   */

  /** @type {Props} */
  let {
    reftxt = [],
    onupdateReftxt = () => {}
  } = $props();

  function addRefRange() {
    const newRef = {
      Sex: '2',
      AgeStart: 0,
      AgeEnd: 120,
      RefTxt: '',
      Flag: 'N'
    };
    onupdateReftxt([...reftxt, newRef]);
  }

  function removeRefRange(index) {
    onupdateReftxt(reftxt.filter((_, i) => i !== index));
  }
</script>

<div class="space-y-4">
  <div class="flex justify-between items-center">
    <div class="flex items-center gap-2">
      <FileText class="w-5 h-5 text-primary" />
      <h3 class="font-semibold">Text Reference Ranges</h3>
    </div>
    <button type="button" class="btn btn-sm btn-primary" onclick={addRefRange}>
      <PlusCircle class="w-4 h-4 mr-1" />
      Add Range
    </button>
  </div>

  {#if reftxt?.length === 0}
    <div class="text-center py-8 bg-base-200 rounded-lg border-2 border-dashed border-base-300">
      <FileText class="w-12 h-12 mx-auto text-gray-400 mb-2" />
      <p class="text-gray-500">No text ranges defined</p>
      <button type="button" class="btn btn-sm btn-outline mt-2" onclick={addRefRange}>
        <PlusCircle class="w-4 h-4 mr-1" />
        Add First Range
      </button>
    </div>
  {/if}

  {#each reftxt || [] as ref, index (index)}
    <div class="card bg-base-100 border-2 border-base-200 hover:border-primary/50 transition-colors">
      <div class="card-body p-4">
        <div class="flex justify-between items-center mb-4 pb-3 border-b border-base-200">
          <span class="badge badge-primary badge-lg">Range {index + 1}</span>
          <button type="button" class="btn btn-sm btn-ghost text-error" onclick={() => removeRefRange(index)}>
            <X class="w-4 h-4" />
            Remove
          </button>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          <div class="form-control">
            <span class="label-text text-xs mb-1">Sex</span>
            <select class="select select-sm select-bordered w-full" bind:value={ref.Sex}>
              {#each sexOptions as option (option.value)}
                <option value={option.value}>{option.label}</option>
              {/each}
            </select>
          </div>

          <div class="form-control">
            <span class="label-text text-xs mb-1">Age From</span>
            <input type="number" min="0" max="120" class="input input-sm input-bordered w-full" bind:value={ref.AgeStart} placeholder="0" />
          </div>

          <div class="form-control">
            <span class="label-text text-xs mb-1">Age To</span>
            <input type="number" min="0" max="120" class="input input-sm input-bordered w-full" bind:value={ref.AgeEnd} placeholder="120" />
          </div>

          <div class="form-control">
            <span class="label-text text-xs mb-1">Flag</span>
            <select class="select select-sm select-bordered w-full" bind:value={ref.Flag}>
              <option value="N">N - Normal</option>
              <option value="A">A - Abnormal</option>
            </select>
          </div>
        </div>

        <div class="form-control mt-3">
          <span class="label-text text-xs mb-1">Reference Text</span>
          <textarea class="textarea textarea-bordered w-full" rows="2" bind:value={ref.RefTxt} placeholder="e.g., Negative for glucose"></textarea>
        </div>
      </div>
    </div>
  {/each}
</div>