Como pongo en el título de la entrada, este artículo es provisional pues quiero detallaros cómo he hecho el ejemplo, qué aspectos hay que tener en cuenta y lo que me ha ayudado las IA’s, en concreto Copilot (muy poco).

El resultado es bastante bueno y cuando entiendes, cómo están construidos los componentes de SVAR, todo empieza a clarificarse a verse «relativamente» sencillo.

Objetivo

Mostrar un CRUD de un tabla con campos de texto, numérico, fecha , combos t especial (estrellas).

Demo: https://fhumanes.com/my-svar-app/

Es la misma base de datos del ejemplo este ejemplo

Solución Técnica

Quiero explicaros con mucho detalle tanto el ejemplo del Front-End (Svelte 5 con componentes de SVAR) como el de Back-End (PHP Slim 4). Este ejemplo de Server es el modelo que voy a utilizar y está bastante más claro y sencillo que el del caso S002.

Durante unos días voy a estar ocupado y no voy a poderlo publicar completamente, pero he pensado que lo mismo aprovecháis tiempo de vacaciones para revisar código y he creído que os podría interesar.

Código del Front-End:

<script>
  import { onMount } from 'svelte';
  import { ModalArea } from "wx-svelte-core"; // Ventana de Confirmación
  import { Grid } from 'wx-svelte-grid';
  import { Button, Willow, Locale } from 'wx-svelte-core';
  import { Editor } from 'wx-svelte-editor';
  import { ContextMenu } from 'wx-svelte-menu'; 
  import { registerEditorItem } from "wx-svelte-editor";
  import { Text, Select, DatePicker, RichSelect } from "wx-svelte-core";
  import { es as coreEs } from "wx-core-locales";
  import { default as gridEs} from "../locales/esGrid.js";
  import { default as editorEs } from "../locales/esEditor.js";


  import Toasts from "../notification/Toasts.svelte";
  import { addToast } from "../notification/store";

  import StarCell from './StarCell.svelte';
  import api from '../lib/api.js';

  // let lang = "es";
  // locale(lang);
  let gridRef = $state();
  let selected = $state([]);
  // --- DATOS DEL BACKEND ---
  let movies = $state([]); // Aquí se cargarán las películas de la API
  let themes = $state([]); // Aquí se cargarán los temas de la API
  let supports = $state([]); // Aquí se cargarán los soportes de la API
  
  let loading = $state(true);
  
  let menuRef = $state();

  let showEditor = $state(false);
  let editorValues = $state({});
  let editorMode = $state("add");

  // Registros necesarios para el Editor
  registerEditorItem("text", Text);
  registerEditorItem("number", Text);
  registerEditorItem("select", RichSelect);
  registerEditorItem("datepicker", DatePicker);

  // Ventana Modal de Confirmación
  let showDeleteConfirm = $state(false);
  let movieToDelete = $state(null);

// Definición de columnas para el Editor
 let editorItems = $derived([
  { key: "name", label: "Nombre", comp: "text", required: true, maxLength: 40 },
  { key: "price", label: "Precio", comp: "number", required: true, 
       validation: val => {
          const regEx = /^\d{1,5}(\.\d{1,2})?$/; // Se puede consultar a cualquier IA
          return val && regEx.test(val); // && val.length <= 40;
        },
        validationMessage: "Introduce un número válido (máx. 5 enteros y 2 decimales)" },
  { key: "startDate", label: "Fecha", comp: "datepicker", required: true },
  {
    key: "rating",
    label: "Valoración",
    comp: "select",
    options: [1, 2, 3, 4, 5].map(n => ({ id: n, label: `${n} estrellas` })),
    required: true
  },
  {
    key: "theme_id",
    label: "Tema",
    comp: "select",
    options: themes.map(t => ({ // cambio de los nomb res de los campos
            id: t.id_theme,
            label: t.theme
          })),
    required: true
  },
  {
    key: "support_id",
    label: "Soporte",
    comp: "select",
    options: supports.map(s => ({ // Cambio de los nombres de los campos
            id: s.id_support,
            label: s.support
          })),
    required: true
  }
]);
  // Menú de contexto para el GRID
  const contextOptions = [
    { id: "add", text: "Agregar", icon: "wxi-plus" },
    { id: "edit", text: "Editar", icon: "wxi-edit" },
    { id: "view", text: "Ver", icon: "wxi-eye" },
    { id: "delete", text: "Eliminar", icon: "wxi-delete-outline" }
  ];
  // Gestión de las Acciones de contexto del menú del GRID
  function handleContext(ev) {
      const id = gridRef.getState().selectedRows[0];
      const row = id ? gridRef.getRow(id) : null;
      if (!Array.isArray(editorItems)) {
        console.warn("editorItems no es un array:", editorItems);
      }

      switch (ev.action?.id) {
        case "add":
          editorMode = "add";
          editorValues = {};
          showEditor = true;
          break;
        case "edit":
          if (row) {
            editorMode = "edit";
            editorValues = { ...row };
            showEditor = true;
          }
          break;
        case "view":
          if (row) {
            editorMode = "view";
            editorValues = { ...row };
            // Formateamos la fecha al formato que deseemos
            editorValues = {
              ...row,
              startDate: row.startDateText // Tomamos el campo formateado para mostrarlo en View
            };
            showEditor = true;
          }
          break;
        case "delete":
          if (id) {
            const movie = movies.find(m => m.id === id);
            if (movie) {
              movieToDelete = movie;
              showDeleteConfirm = true;
            }
          }
          break;
        default:
          console.warn("Acción no reconocida:", ev.action);
          break;

      }
    }
  // Formateado de fechas para la Base de datos
  function toValidAPIDate(input) {
    const date = (input instanceof Date) ? input : new Date(input);
    return formatDateToAPI(date);
  }
  function formatDateToAPI(dateObj) {
    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, "0");
    const day = String(dateObj.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }
  // Formar el Json de los campos que requiere el API
  function transformMoviePayload(values) {
  // Solo los campos que la API necesita
  const { name, price, startDate, rating, theme_id, support_id } = values;
  // Formatear fecha de "aaaa-mm-dd" → "aaaamm-dd"
  const formattedDate =toValidAPIDate(startDate);
  return {
    name, price, 
    startDate: formattedDate, // Formateamos la fecha
    rating, theme_id, support_id
  };
}
  // Manejo de la acción del Editor
  // Aquí se maneja tanto el "add" como el "edit"
  async function handleEditorAction({ item, values }) {
    // loading = true;
    // Solo los campos que la API necesita
    const payload = transformMoviePayload(values);
    console.log("Payload para API:", payload);
    try {
      if (item.id === "save") {
        if (editorMode === "add") {
          // 🔄 Envío a la API para añadir
          const res = await api.post("/movies",payload);
          values.id = res.data.id_movie ?? Date.now(); // En caso de que la API devuelva el ID
          // movies.push(values);
          addToast({
            message:'Película añadida correctamente' , 
            type: 'success', // ["success", "error", "info"]
            dismissible: true, 
            timeout: 2000
          });
          fetchAllData(); // Recargar datos después de la operación
        } else 
        if (editorMode === "edit") {
          await api.put(`/movies/${values.id}`, payload);
          // movies = movies.map(m => (m.id === values.id ? values : m));
          addToast({
            message:'Película actualizada correctamente' , 
            type: 'success', 
            dismissible: true, 
            timeout: 2000
          });
          fetchAllData(); // Recargar datos después de la operación
        }
        showEditor = false;
      } else 
      if (item.id === "close" || item.id === "cancel") {
        showEditor = false;
      }

    } catch (err) {
      console.error("Error en operación de editor:", err);
      addToast({ // Notificación
        message: "No se pudo completar la operación.", 
        type: 'error', // ["success", "error", "info"]
        dismissible: true, 
        timeout: 0
      })
    } finally {
      // fetchAllData(); // Recargar datos después de la operación
      // loading = false;
    }
  }
  // Para la Acción de Delete
  function confirmDelete(movie) {
    movieToDelete = movie;
    showDeleteConfirm = true;
  }
  async function proceedDelete() {
    // loading = true;
    try {
      // Llamada al backend para borrar la película
      await api.delete(`/movies/${movieToDelete.id}`);
      
      // Eliminar del frontend
      movies = movies.filter(m => m.id !== movieToDelete.id);

      // Mostrar notificación
      addToast({ // Notificación
        message:'Película eliminada correctamente' , 
        type: 'success', // ["success", "error", "info"]
        dismissible: true, 
        timeout: 2000
      });
    } catch (err) {
      console.error("Error al eliminar película:", err);
      addToast({ // Notificación
        message: "No se pudo eliminar la película.", 
        type: 'error', // ["success", "error", "info"]
        dismissible: true, 
        timeout: 0
      });
    } finally {
      showDeleteConfirm = false;
      movieToDelete = null;
      // loading = false;
    }
  }
  function cancelDelete() {
    showDeleteConfirm = false;
    movieToDelete = null;
  }
  // Para acceder al registro seleccionado del GRID
  function resolver(id) {
    if (id) gridRef.exec("select-row", { id });
    return id;
  }
  // --- Función para cargar todos los datos de la API ---
  async function fetchAllData() {
      // loading = true;

      try {
          const [resMovies, resThemes, resSupports] = await Promise.all([
              api.get('/movies'),
              api.get('/themes'),
              api.get('/supports')
          ]);
          // Mapear datos de películas para coincidir con tu estructura de frontend
          // Asumimos que theme_id y support_id vienen como números de la API,
          // y que los nombres de theme/support están en propiedades 'theme' y 'support' dentro del objeto movie
          movies = resMovies.data.map(m => {
            const dateObj = new Date(m.startDate); // Para adapatr al GRID
            return {
              id: m.id_movie,
              name: m.name,
              price: parseFloat(m.price),
              startDate: dateObj,                                   // 🔄 convierte string a Date
              startDateText: dateObj.toLocaleDateString("es-ES", {  // Para Utilizar en los filros del GRID
                day: "2-digit",
                month: "2-digit",
                year: "numeric"
              }),
              rating: m.rating,
              theme: m.theme,           // se usa para mostrar en el GRID
              support: m.support,       // idem
              theme_id: m.theme_id,     // se usa para editar en el formulario
              support_id: m.support_id
            };
          });

          // Para el Select
          themes= resThemes.data;
          console.log("Themes:", themes);
          /*
          themes = resThemes.data.map(t => ({ // Para cambiar losnombres de los campos
            id: t.id_theme,
            label: t.theme
          }));
          */
         supports = resSupports.data;

      } catch (err) {
          console.error('Error al cargar datos:', err);
          addToast({ // Notificación
            message: 'No se pudieron cargar los datos. Por favor, intente de nuevo más tarde.', 
            type: 'error', // ["success", "error", "info"]
            dismissible: true, 
            timeout: 0
          });
      } finally {
          loading = false;
      }
  }
    // Cargar datos al iniciar el componente
    onMount(fetchAllData);
  function clearFilters() {
    gridRef.exec("filter-rows", {});
  }
  function updateSelected() {
    selected = gridRef.getState().selectedRows;
    // console.log("Selected rows:", selected);
  }
  // Estilo de columna para alinear texto en el GRID
  const columnStyle = col => {
    if (col.id === "id") return "text-right";
    if (col.id === "price") return "text-right";
    if (col.id === "startDateText") return "text-center";
    return "";
  };
  // Definición de columnas del Grid
  const columns = $derived([
    { id: "id", header: "ID", width: 60, sort: true, resize: true },
    {
      id: "name",
      header: [
        "Nombre",
        {
          filter: {
            type: "text",
            config: { icon: "wxi-search", clear: true }
          }
        }
      ],
      flexgrow: 1,
      sort: true,
      resize: true
    },
    {
      id: "price",
      header: [
        "Precio",
        {
          filter: {
            type: "text",
            config: {
              icon: "wxi-search",
              clear: true,
              handler: (value, filter) => { // Filtro personalizado
                if (filter === "") return true;
                const num = parseFloat(filter);
                if (isNaN(num)) return false;
                return value >= num;
              }
            }
          }
        }
      ],
      type: "number",
      sort: true,
      width: 120,
      resize: true,
      template: value =>
        new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "EUR",
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(value)
    },
    {
      id: "startDateText",
      header: [
        "Fecha",
        {
          filter: {
            type: "text",
            config: { icon: "wxi-search", clear: true }
          }
        }
      ],
      width: 120,
      sort: true,
      resize: true,
      type: "text",
      /*
      template: value =>
        new Date(value).toLocaleDateString("es-ES", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric"
        })
      */
    },
    {
      id: "rating",
      header: [
        "Rating",
        {
          filter: {
            type: "richselect",
            config: {
              options: [1, 2, 3, 4, 5].map(n => ({ id: n, label: `${n} estrellas` }))
            }
          }
        }
      ],
      width: 130,
      sort: true,
      resize: true,
      cell: StarCell
    },
    {
      id: "theme",
      type: "text",
      header: [
        "Tema",
        {
          filter: {
            type: "richselect",  // Type of filter (rich select dropdown)
            config: {
              options: themes.map(t => ({ id: t.theme, label: t.theme})),  // Array of options for the dropdown (e.g., country list)
              // Los COMBOS, obligatoriamente, son "id" y "label"
            },
          },
        },
      ],
      // options: themes,
      flexgrow: 1,
      sort: true,
      resize: true
    },
    {
      id: "support_id",
       type: "combo",
      header: [
        "Soporte",
        {
          filter: {
            type: "richselect",  // Type of filter (rich select dropdown)
            config: {
              options: supports.map(s => ({ id: s.id_support, label: s.support})),  // Array of options for the dropdown (e.g., country list)
              template: opt => `${opt.id}. ${opt.label}`,  // Custom template for displaying options
            },
          },
        },
      ],
      options: supports.map(s => ({ id: s.id_support, label: s.support})),
      flexgrow: 1,
      sort: true,
      resize: true
    }
  ]);
// $inspect(gridRef).with(console.trace); // Para inspeccionar variables reactivas, aparece siempre que cambie valor
</script>
<Toasts />
<Willow>
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2>🎬 Películas con Filtros y Ordenación</h2>
    <div class="d-flex gap-2">
      <Button type="primary" text="🧹 Borrar filtros" onclick={clearFilters} />
      <Button type="primary" text="➕ Agregar película" onclick={() => {
        editorMode = "add";
        editorValues = {};
        showEditor = true;
      }} />
    </div>
    <div>Para el acceso a las acciones CRUD, botón derecho en el Grid</div>
  </div>
  {#if loading}
          <p class="text-center">Cargando películas...</p>
      {:else}
    <ContextMenu
      options={contextOptions}
      onclick={handleContext}
      at="point"
      resolver={resolver}
      api={gridRef}
    >   
      <Locale words={{ ...gridEs, ...coreEs }}>
        <Grid
          bind:this={gridRef}
          data={movies}
          {columns}
          {columnStyle}
          pager={false}
          onselectrow={updateSelected}
        />
      </Locale>
    </ContextMenu>
    {/if}
    {#if showEditor}
    <div class="variations">
      <div>
        <!-- <h3>Cabecera del editor</h3> --> <!-- Sólo tiene sentido en {placement="inline"}  -->
        <div class="bg">        
          <Locale words={{ ...editorEs, ...coreEs }}>  
            <Editor
              header={true}
              placement="sidebar"
              layout="default"
              autoSave={false}
              readonly={editorMode === "view"}
              items={editorItems}
              values={editorValues}
              onaction={handleEditorAction}
            />
          </Locale>
        </div>
      </div>
    </div>
    {/if}
    <!-- Modal de confirmación Borrado -->
    {#if showDeleteConfirm}
      <ModalArea> 
        <div class="modal-content">
          <h3>¿Eliminar esta película?</h3>
          <p>Nombre: <b>{movieToDelete?.name}</b></p>
          <p>Fecha: {movieToDelete?.startDateText}</p>
          <div class="actions">
            <Button  type="danger" onclick={proceedDelete}>Confirmar</Button>
            <Button onclick={cancelDelete} color="secondary">Cancelar</Button>
          </div>
        </div>
      </ModalArea>
    {/if}
</Willow>
<style>
  .modal-content {
    padding: 30px;
    text-align: center;
    background-color: #f1f5f9;          /* gris claro elegante */
    border: 2px solid #f97316;          /* borde naranja suave */
    border-radius: 0px;                /* esquinas redondeadas */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);  /* sombra profunda */
    font-family: "Segoe UI", "Roboto", sans-serif;
    max-width: 400px;
    margin: 0 auto;
  }
  .modal-content h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #1e293b;                     /* texto oscuro elegante */
  }
  .modal-content p {
    margin: 10px 0;
    font-size: 1rem;
    color: #334155;
  }
  .actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  :global(.wx-toast) {
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    font-family: "Segoe UI", sans-serif;
    padding: 10px 20px;
  }
  :global(.wx-cell.text-right) {
    text-align: right;
  }
  :global(.wx-cell.text-center) {
    text-align: center;
  }
  .variations {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .variations > div {
    margin: 0 20px 60px 20px;
    width: 400px;
  }
  .bg {
    border-top: 1px solid #ccc;
    padding: 10px;
    height: 100%;
    width: 300px;
  }
  :global(.wx-sidearea) { /* Cambio del tamaño de área de edición */
    width: 300px;
  }
  :global(.wx-willow-theme) {
    --wx-table-select-background: #eaedf5;
    --wx-table-select-color: var(--wx-color-font);
    --wx-table-border: 1px solid #e6e6e6;
    --wx-table-select-border: inset 3px 0 var(--wx-color-primary);
    --wx-table-header-border: var(--wx-table-border);
    --wx-table-header-cell-border: var(--wx-table-border);
    --wx-table-footer-cell-border: var(--wx-table-border);
    --wx-table-cell-border: var(--wx-table-border);
    --wx-header-font-weight: 600;
    --wx-table-header-background: #f2f3f7;
    --wx-table-fixed-column-border: 3px solid #e6e6e6;
    --wx-table-editor-dropdown-border: var(--wx-table-border);
    --wx-table-editor-dropdown-shadow: 0px 4px 20px rgba(44, 47, 60, 0.12);
    --wx-table-drag-over-background: var(--wx-background-alt);
    --wx-table-drag-zone-shadow: var(--wx-box-shadow);
  }
</style>

Os dejo los fuentes, tanto del Front-end, como del Back-end