Dragging rows between grids

import { createGrid, type GridApi, type Row } from '@freegridjs/core';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  ctx.host.style.display = 'grid';
  ctx.host.style.gridTemplateColumns = 'repeat(auto-fit, minmax(300px, 1fr))';
  ctx.host.style.gap = '16px';
  ctx.host.style.gridAutoRows = '100%';
  const left = document.createElement('div');
  const right = document.createElement('div');
  for (const el of [left, right]) el.style.cssText = 'height: 100%; min-height: 0';
  ctx.host.append(left, right);

  const names = h('Keyboard,Mouse,Monitor,Laptop stand,USB-C hub,Webcam,Headset,Desk lamp,Chair,Notebook', '키보드,마우스,모니터,노트북 거치대,USB-C 허브,웹캠,헤드셋,스탠드,의자,노트').split(',');
  const catalogue: Row[] = names.map((name, i) => ({ id: `p${i + 1}`, name, price: 19000 + i * 7000 }));
  let next = 1;
  const products = createGrid(left, {
    columns: [{ field: 'name', header: h('Products (copied out)', '상품 (복사됨)'), flex: 1 }, { field: 'price', header: h('Price', '가격'), type: 'number', format: '#,##0', width: 100 }],
    data: catalogue, locale: ctx.lang, getRowId: r => String(r.id),
    rowDrag: {
      group: 'order',
      copy: true,
      // the order line gets its own id and a quantity
      copyRow: p => ({ id: `line${next++}`, productId: p.id, name: p.name, price: p.price, qty: 1 }),
    },
  });
  // canDrop reads this grid, so its type is written out
  const order: GridApi = createGrid(right, {
    columns: [
      { field: 'name', header: h('Order', '주문'), flex: 1 },
      { field: 'qty', header: h('Qty', '수량'), type: 'number', width: 70, editable: true },
      { id: 'amount', header: h('Amount', '금액'), type: 'number', format: '#,##0', width: 100, valueGetter: r => r.price * r.qty },
    ],
    data: [], locale: ctx.lang, getRowId: r => String(r.id),
    rowDrag: {
      group: 'order',
      // a product goes in once; moving lines inside the order is fine
      canDrop: p => !p.fromOtherGrid || !order.getData().some(r => r.productId === p.row.id),
    },
    noRowsOverlay: h('Drag products here', '상품을 여기로 끌어 오세요'),
  });
  order.on('rowDrop', e => ctx.log(e.fromOtherGrid ? `${e.copy ? h('copied', '복사') : h('moved', '이동')}: ${e.row.name}` : `${h('reordered', '순서 변경')}: ${e.row.name}`));
  text(ctx, h('Drag a product by its handle into the order: it is copied, and the same product is refused a second time. Drag order lines to reorder them.',
    '손잡이로 상품을 주문에 끌어 놓으면 복사되고, 같은 상품은 두 번 들어가지 않습니다. 주문 줄은 끌어서 순서를 바꿉니다.'));
  separator(ctx);
  button(ctx, h('Order total', '주문 합계'), () => ctx.log(`${order.getData().reduce((s, r) => s + r.price * r.qty, 0).toLocaleString()}`));
  button(ctx, h('Undo in order', '주문에서 실행 취소'), () => order.undo());
  return products;
}