@humandialog/forms.svelte 0.5.4 → 0.5.6

package/components/kanban/kanban.svelte

@@ -1,156 +1,491 @@
-<script>import { setContext, getContext, afterUpdate } from "svelte";
-import { rKanban_definition } from "./Kanban";
-import { parseWidthDirective, clearActiveItem } from "../../utils";
-import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
+<script>import { setContext, getContext, afterUpdate, tick } from "svelte";
+import { KanbanColumnBottom, KanbanColumnTop, rKanban_definition } from "./Kanban";
+import { parseWidthDirective, clearActiveItem, getPrev, getNext, remove, insertAt, insertAfter, swapElements, getActive } from "../../utils";
+import { contextItemsStore, contextTypesStore, data_tick_store } from "../../stores";
 import Column from "./internal/kanban.column.svelte";
+import { informModification, pushChanges } from "../../updates";
 export let title = "";
-export let self = void 0;
-export let context = "";
-export let typename = "";
 export let c = "";
-export let key = "";
+export const CLEAR_SELECTION = 0;
+export const KEEP_SELECTION = -1;
+export const SELECT_PREVIOUS = -2;
+export const SELECT_NEXT = -3;
+export const KEEP_OR_SELECT_NEXT = -4;
 let user_class = $$props.class ?? "";
 let definition = new rKanban_definition();
 setContext("rKanban-definition", definition);
 setContext("rIs-table-component", true);
-let item = null;
-let ctx = context ? context : getContext("ctx");
 let cs = c ? parseWidthDirective(c) : "w-full min-w-full";
 clearActiveItem("props");
-let last_tick = -1;
 $:
-  setup($data_tick_store, $contextItemsStore);
+  setup();
 function setup(...args) {
-  last_tick = $data_tick_store;
-  if (self && ctx)
-    $contextItemsStore[ctx] = self;
-  if (!typename)
-    typename = $contextTypesStore[ctx];
 }
-export function refresh() {
-  setup();
+let renderToken = 0;
+export async function rerender(selectColumnIdx = -1, selectCardId = -1) {
+  definition.clear();
+  renderToken += 1;
+  await tick();
+  if (selectColumnIdx >= 0) {
+    if (selectCardId >= 0) {
+      columns[selectColumnIdx].activateByItemId(selectCardId);
+    } else {
+      columns[selectColumnIdx].activate();
+    }
+  }
 }
-export function updateSelf(_self) {
-  self = _self;
-  setup();
+export async function reload(data, selectElement = KEEP_SELECTION) {
+  let currentSelectedItem = getActive("props");
+  let selectElementId = 0;
+  let altSelectElementId = 0;
+  let selectedColumnIdx = -1;
+  const oa = definition.orderAttrib;
+  const sa = definition.stateAttrib;
+  let allItems = definition.getItems();
+  switch (selectElement) {
+    case CLEAR_SELECTION:
+      selectElementId = 0;
+      break;
+    case KEEP_SELECTION:
+      selectElementId = currentSelectedItem.Id ?? 0;
+      selectedColumnIdx = definition.columns.findIndex((c2) => c2.state == currentSelectedItem[sa]);
+      break;
+    case SELECT_PREVIOUS:
+      if (currentSelectedItem) {
+        const currentItemState = currentSelectedItem[sa];
+        selectedColumnIdx = definition.columns.findIndex((c2) => c2.state == currentItemState);
+        const columnItems = allItems.filter((e) => e[sa] == currentItemState);
+        const columnSelected = columnItems.find((e) => e.Id == currentSelectedItem.Id);
+        const prevSelected = getPrev(columnItems, columnSelected);
+        if (prevSelected)
+          selectElementId = prevSelected.Id;
+      }
+      break;
+    case SELECT_NEXT:
+      if (currentSelectedItem) {
+        const currentItemState = currentSelectedItem[sa];
+        selectedColumnIdx = definition.columns.findIndex((c2) => c2.state == currentItemState);
+        const columnItems = allItems.filter((e) => e[sa] == currentItemState);
+        const columnSelected = columnItems.find((e) => e.Id == currentSelectedItem.Id);
+        const nextSelected = getNext(columnItems, columnSelected);
+        if (nextSelected)
+          selectElementId = nextSelected.Id;
+      }
+      break;
+    case KEEP_OR_SELECT_NEXT:
+      {
+        selectElementId = currentSelectedItem.Id ?? 0;
+        if (currentSelectedItem) {
+          const currentItemState = currentSelectedItem[sa];
+          selectedColumnIdx = definition.columns.findIndex((c2) => c2.state == currentItemState);
+          const columnItems = allItems.filter((e) => e[sa] == currentItemState);
+          const columnSelected = columnItems.find((e) => e.Id == currentSelectedItem.Id);
+          const nextSelected = getNext(columnItems, columnSelected);
+          if (nextSelected)
+            altSelectElementId = nextSelected.Id;
+        }
+      }
+      break;
+    default:
+      if (typeof selectElement === "object" && !Array.isArray(selectElement) && selectElement !== null)
+        selectElementId = selectElement.Id;
+      else
+        selectElementId = selectElement;
+  }
+  if (Array.isArray(data))
+    definition.objects = data;
+  else
+    definition.self = data;
+  definition.items = null;
+  columns.forEach((c2) => c2.reload());
+  await tick();
+  allItems = definition.getItems();
+  if (selectElementId > 0) {
+    if (selectedColumnIdx < 0) {
+      let selectedElement = allItems.find((e) => e.Id == selectElementId);
+      if (selectedElement) {
+        selectedColumnIdx = getColumnIdx(selectedElement);
+        columns[selectedColumnIdx].activateByItemId(selectElementId);
+      }
+    } else {
+      const columnState = definition.columns[selectedColumnIdx].state;
+      const columnItems = allItems.filter((e) => e[sa] == columnState);
+      let selectedElement = allItems.find((e) => e.Id == selectElementId);
+      if (selectedElement == void 0) {
+        if (altSelectElementId > 0) {
+          selectedElement = columnItems.find((e) => e.Id == altSelectElementId);
+          if (selectedElement)
+            columns[selectedColumnIdx].activateByItemId(altSelectElementId);
+        }
+      } else
+        columns[selectedColumnIdx].activateByItemId(selectElementId);
+    }
+  }
+}
+export function getColumnIdx(item) {
+  return definition.columns.findIndex((c2) => c2.state == item[definition.stateAttrib]);
 }
-export function getColumnIdx(item2) {
-  for (let idx = 0; idx < columns.length; idx++) {
-    let card = columns[idx].findCardByItem(item2);
+export function edit(item, field) {
+  const columnIdx = getColumnIdx(item);
+  if (columnIdx >= 0) {
+    const column = columns[columnIdx];
+    const card = column.findCardByItem(item);
     if (card)
-      return idx;
+      card.editProperty(field);
   }
-  return -1;
 }
 let columns = [];
 afterUpdate(() => {
   for (let i = 1; i < columns.length; i++) {
     let left_column = columns[i - 1];
     let right_column = columns[i];
-    const left_column_height = left_column.getHeight();
-    const right_column_height = right_column.getHeight();
+    const left_column_height = left_column?.getHeight();
+    const right_column_height = right_column?.getHeight();
     if (left_column_height > right_column_height) {
-      left_column.setBorder(left_column.SET_RIGHT);
-      right_column.setBorder(right_column.CLEAR_LEFT);
+      left_column?.setBorder(left_column.SET_RIGHT);
+      right_column?.setBorder(right_column.CLEAR_LEFT);
     } else {
-      left_column.setBorder(left_column.CLEAR_RIGHT);
-      right_column.setBorder(right_column.SET_LEFT);
+      left_column?.setBorder(left_column.CLEAR_RIGHT);
+      right_column?.setBorder(right_column.SET_LEFT);
     }
   }
 });
-export function showMoveOperationsForItem(item2) {
-  columns.forEach((c2) => {
-    const card = c2.findCardByItem(item2);
-    if (card)
-      card.showMoveOperations();
-  });
+export function moveUp(item) {
+  const columnIdx = getColumnIdx(item);
+  let allItems = definition.getItems();
+  const oa = definition.orderAttrib;
+  const sa = definition.stateAttrib;
+  const column = columns[columnIdx];
+  const columnState = definition.columns[columnIdx].state;
+  let prev = allItems.findLast((e) => e[sa] == columnState && e[oa] < item[oa]);
+  if (!prev)
+    return;
+  swapElements(allItems, item, prev);
+  [item[oa], prev[oa]] = [prev[oa], item[oa]];
+  informModification(item, oa);
+  informModification(prev, oa);
+  pushChanges();
+  column.reload();
 }
-export function scrollViewToCard(item2) {
-  columns.forEach((c2) => {
-    const card = c2.findCardByItem(item2);
-    if (card)
-      card._scrollViewToCard();
-  });
+export function moveDown(item) {
+  const columnIdx = getColumnIdx(item);
+  let allItems = definition.getItems();
+  const oa = definition.orderAttrib;
+  const sa = definition.stateAttrib;
+  const column = columns[columnIdx];
+  const columnState = definition.columns[columnIdx].state;
+  let next = allItems.find((e) => e[sa] == columnState && e[oa] > item[oa]);
+  if (!next)
+    return;
+  swapElements(allItems, item, next);
+  [item[oa], next[oa]] = [next[oa], item[oa]];
+  informModification(item, oa);
+  informModification(next, oa);
+  pushChanges();
+  column.reload();
 }
-</script>
-
-<slot/> <!-- Launch definition settings -->
-
-
-<section class="h-full mt-5 flex flex-row no-wrap  sm:justify-center  overflow-x-auto {user_class}">
-    {#each definition.columns as column, idx (column.id)}
-        <Column title={column.title}
-                width={column.width}
-                self={column.self}
-                a={column.a}
-                objects={column.objects}
-                context={column.context}
-                key={key}
-                currentColumnIdx={idx}
-                {showMoveOperationsForItem}
-                {scrollViewToCard}
-                bind:this={columns[idx]}>
-
-            
-            <svelte:fragment slot="kanbanCardTopProps" let:element>
-                <slot name="kanbanCardTopProps" {element}/>
-            </svelte:fragment>
-        
-            <svelte:fragment slot="kanbanCardMiddleProps" let:element>
-                <slot name="kanbanCardMiddleProps" {element}/>
-            </svelte:fragment>
-        
-            <svelte:fragment slot="kanbanCardBottomProps" let:element>
-                <slot name="kanbanCardBottomProps" {element}/>
-            </svelte:fragment>
-            
-        </Column>
-    {/each}
-</section>
-
-<style>
-    .grid-1
-    {
-        display: grid;
-        grid-template-columns: 100%;
-    }
-
-    .grid-2
-    {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
-
-    .grid-3
-    {
-        display: grid;
-        grid-template-columns: 33% 33% 33%;
-    }
-
-    .grid-4
-    {
-        display: grid;
-        grid-template-columns: 25% 25% 25% 25%;
-    }
-    .grid-5
-    {
-        display: grid;
-        grid-template-columns: 20% 20% 20% 20% 20%;
-    }
-    .grid-6
-    {
-        display: grid;
-        grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6;
+const ORDER_STEP = 64;
+const MIN_ORDER = 0;
+function reorderElements(items, from = null) {
+  const oa = definition.orderAttrib;
+  let fromIdx;
+  let fromOrder;
+  if (from) {
+    fromOrder = from[oa];
+    fromIdx = items.findIndex((e) => e == from);
+  } else {
+    fromOrder = MIN_ORDER;
+    fromIdx = 0;
+  }
+  let order = fromOrder;
+  for (let i = fromIdx; i < items.length; i++) {
+    let el = items[i];
+    el[oa] = order;
+    informModification(el, oa);
+    order += ORDER_STEP;
+  }
+  pushChanges();
+}
+export function replace(item, toColumnIdx, afterElement) {
+  const fromColumnIdx = getColumnIdx(item);
+  let allItems = definition.getItems();
+  const oa = definition.orderAttrib;
+  const sa = definition.stateAttrib;
+  const toColumnState = definition.columns[toColumnIdx].state;
+  const toListTop = allItems.find((e) => e[sa] == toColumnState);
+  const toListBottom = allItems.findLast((e) => e[sa] == toColumnState);
+  const fromColumn = columns[fromColumnIdx];
+  const toColumn = columns[toColumnIdx];
+  switch (afterElement) {
+    case KanbanColumnTop:
+      if (!toListTop || toListTop[oa] > item[oa]) {
+        item[sa] = toColumnState;
+        informModification(item, sa);
+      } else {
+        const prevItem = getPrev(allItems, toListTop);
+        if (!prevItem) {
+          item[sa] = toColumnState;
+          item[oa] = toListTop[oa] - ORDER_STEP;
+          informModification(item, sa);
+          informModification(item, oa);
+          remove(allItems, item);
+          insertAt(allItems, 0, item);
+        } else {
+          let prevOrder = prevItem[oa];
+          let nextOrder = toListTop[oa];
+          let orderSpace = nextOrder - prevOrder;
+          if (orderSpace < 2) {
+            reorderElements(allItems, prevItem);
+            prevOrder = prevItem[oa];
+            nextOrder = toListTop[oa];
+            orderSpace = nextOrder - prevOrder;
+          }
+          item[sa] = toColumnState;
+          item[oa] = prevOrder + Math.floor(orderSpace / 2);
+          informModification(item, sa);
+          informModification(item, oa);
+          remove(allItems, item);
+          insertAfter(allItems, prevItem, item);
+        }
+      }
+      pushChanges();
+      fromColumn.reload();
+      toColumn.reload();
+      return;
+    case KanbanColumnBottom:
+    default:
+      if (!toListBottom || item[oa] > toListBottom[oa]) {
+        item[sa] = toColumnState;
+        informModification(item, sa);
+      } else {
+        const nextItem = getNext(allItems, toListBottom);
+        if (!nextItem) {
+          item[sa] = toColumnState;
+          item[oa] = toListBottom[oa] + ORDER_STEP;
+          informModification(item, sa);
+          informModification(item, oa);
+          remove(allItems, item);
+          insertAfter(allItems, toListBottom, item);
+        } else {
+          let nextOrder = nextItem[oa];
+          let prevOrder = toListBottom[oa];
+          let orderSpace = nextOrder - prevOrder;
+          if (orderSpace < 2) {
+            reorderElements(allItems, toListBottom);
+            prevOrder = toListBottom[oa];
+            nextOrder = nextItem[oa];
+            orderSpace = nextOrder - prevOrder;
+          }
+          item[sa] = toColumnState;
+          item[oa] = prevOrder + Math.floor(orderSpace / 2);
+          informModification(item, sa);
+          informModification(item, oa);
+          remove(allItems, item);
+          insertAfter(allItems, toListBottom, item);
+        }
+      }
+      pushChanges();
+      fromColumn.reload();
+      toColumn.reload();
+      return;
+  }
+}
+async function onInsert(columnIdx, title2, afterId) {
+  const columnState = definition.columns[columnIdx].state;
+  const oa = definition.orderAttrib;
+  const sa = definition.stateAttrib;
+  const allItems = definition.getItems();
+  const columnTop = allItems.find((e) => e[sa] == columnState);
+  const columnBottom = allItems.findLast((e) => e[sa] == columnState);
+  let newElement = {
+    [definition.titleAttrib]: title2,
+    [sa]: columnState
+  };
+  if (afterId == KanbanColumnTop) {
+    if (!columnTop) {
+      let maxOrder = 0;
+      if (allItems.length > 0) {
+        const lastItem = allItems[allItems.length - 1];
+        maxOrder = lastItem[oa];
+      }
+      newElement[oa] = maxOrder + ORDER_STEP;
+    } else {
+      const prevItem = getPrev(allItems, columnTop);
+      if (prevItem) {
+        let prevOrder = prevItem[oa];
+        let nextOrder = columnTop[oa];
+        let orderSpace = nextOrder - prevOrder;
+        if (orderSpace < 2) {
+          reorderElements(allItems, prevItem);
+          prevOrder = prevItem[oa];
+          nextOrder = columnTop[oa];
+          orderSpace = nextOrder - prevOrder;
+        }
+        const newOrder = prevOrder + Math.floor(orderSpace / 2);
+        newElement[oa] = newOrder;
+      } else {
+        newElement[oa] = columnTop[oa] - ORDER_STEP;
+      }
     }
-    .grid-7
-    {
-        display: grid;
-        grid-template-columns: 14.3% 14.3% 14.3% 14.3% 14.3% 14.3% 14.3%;
+  } else if (afterId == KanbanColumnBottom) {
+    if (!columnBottom) {
+      let maxOrder = 0;
+      if (allItems.length > 0) {
+        const lastItem = allItems[allItems.length - 1];
+        maxOrder = lastItem[oa];
+      }
+      newElement[oa] = maxOrder + ORDER_STEP;
+    } else {
+      const nextItem = getNext(allItems, columnBottom);
+      if (nextItem) {
+        let nextOrder = nextItem[oa];
+        let prevOrder = columnBottom[oa];
+        let orderSpace = nextOrder - prevOrder;
+        if (orderSpace < 2) {
+          reorderElements(allItems, columnBottom);
+          nextOrder = nextItem[oa];
+          prevOrder = columnBottom[oa];
+          orderSpace = nextOrder - prevOrder;
+        }
+        const newOrder = prevOrder + Math.floor(orderSpace / 2);
+        newElement[oa] = newOrder;
+      } else {
+        newElement[oa] = columnBottom[oa] + ORDER_STEP;
+      }
     }
-    .grid-8
-    {
-        display: grid;
-        grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
+  } else {
+    const prevItem = allItems.find((e) => e.Id == afterId);
+    if (!prevItem) {
+      let maxOrder = 0;
+      if (allItems.length > 0) {
+        const lastItem = allItems[allItems.length - 1];
+        maxOrder = lastItem[oa];
+      }
+      newElement[oa] = maxOrder + ORDER_STEP;
+    } else {
+      const nextItem = getNext(allItems, prevItem);
+      if (nextItem) {
+        let nextOrder = nextItem[oa];
+        let prevOrder = prevItem[oa];
+        let orderSpace = nextOrder - prevOrder;
+        if (orderSpace < 2) {
+          reorderElements(allItems, prevItem);
+          nextOrder = nextItem[oa];
+          prevOrder = prevItem[oa];
+          orderSpace = nextOrder - prevOrder;
+        }
+        const newOrder = prevOrder + Math.floor(orderSpace / 2);
+        newElement[oa] = newOrder;
+      } else {
+        newElement[oa] = prevItem[oa] + ORDER_STEP;
+      }
     }
-
-</style>
+  }
+  if (definition.onAdd)
+    await definition.onAdd(newElement);
+}
+export function activateColumn(columnIdx) {
+  columns[columnIdx].activate();
+}
+export function editColumnName(columnIdx, onFinish = void 0) {
+  columns[columnIdx].editName(onFinish);
+}
+export function moveCardsTo(items, toColumnIdx) {
+  items.forEach(
+    (item) => replace(item, toColumnIdx, KanbanColumnBottom)
+  );
+}
+export function setCardsState(items, state) {
+  const sa = definition.stateAttrib;
+  items.forEach((item) => {
+    item[sa] = state;
+    informModification(item, sa);
+  });
+  pushChanges();
+}
+export function add(item) {
+  const fromColumnIdx = getColumnIdx(item);
+  columns[fromColumnIdx].add(item);
+}
+</script>
+
+{#key renderToken}
+<slot/> <!-- Launch definition settings -->
+
+{#if title}
+    <p class="hidden sm:block mt-3 ml-3 pb-5 text-lg text-left">{title}</p>
+    <!--hr class="hidden sm:block w-full"-->
+{/if}
+
+<section class="h-full mt-5 flex flex-row no-wrap  sm:justify-center 
+                overflow-x-auto snap-x snap-mandatory sm:snap-none
+                {user_class}">
+    {#each definition.columns as column, idx (column.id)}
+        <Column currentColumnIdx={idx}
+                {onInsert}
+                bind:this={columns[idx]}>
+
+            
+            <svelte:fragment slot="kanbanCardTopProps" let:element>
+                <slot name="kanbanCardTopProps" {element}/>
+            </svelte:fragment>
+        
+            <svelte:fragment slot="kanbanCardMiddleProps" let:element>
+                <slot name="kanbanCardMiddleProps" {element}/>
+            </svelte:fragment>
+        
+            <svelte:fragment slot="kanbanCardBottomProps" let:element>
+                <slot name="kanbanCardBottomProps" {element}/>
+            </svelte:fragment>
+            
+        </Column>
+    {/each}
+</section>
+{/key}
+
+<style>
+    .grid-1
+    {
+        display: grid;
+        grid-template-columns: 100%;
+    }
+
+    .grid-2
+    {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    .grid-3
+    {
+        display: grid;
+        grid-template-columns: 33% 33% 33%;
+    }
+
+    .grid-4
+    {
+        display: grid;
+        grid-template-columns: 25% 25% 25% 25%;
+    }
+    .grid-5
+    {
+        display: grid;
+        grid-template-columns: 20% 20% 20% 20% 20%;
+    }
+    .grid-6
+    {
+        display: grid;
+        grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6;
+    }
+    .grid-7
+    {
+        display: grid;
+        grid-template-columns: 14.3% 14.3% 14.3% 14.3% 14.3% 14.3% 14.3%;
+    }
+    .grid-8
+    {
+        display: grid;
+        grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
+    }
+
+</style>