copy column names #1119

packages/web/src/elements/ObjectListControl.svelte

@@ -14,10 +14,16 @@
   export let clickable = false;
   export let onAddNew = null;
   export let displayNameFieldName = null;
+  export let multipleItemsActions = null;
 
   export let filters = writable({});
 
   let collapsed = false;
+  let activeMultipleSelection;
+
+  function handleChangeMultipleSelection(list) {
+    activeMultipleSelection = list;
+  }
 </script>
 
 {#if collection?.length > 0 || showIfEmpty || emptyMessage}
@@ -35,6 +41,16 @@
       {#if onAddNew}
         <Link onClick={onAddNew}><FontIcon icon="icon add" /> Add new</Link>
       {/if}
+      {#if multipleItemsActions && activeMultipleSelection && activeMultipleSelection?.length > 0}
+        {#each multipleItemsActions as item}
+          <span class="ml-2">
+            <Link onClick={() => item.onClick(activeMultipleSelection)}>
+              <FontIcon icon={item.icon} />
+              {item.text} ({activeMultipleSelection.length})
+            </Link>
+          </span>
+        {/each}
+      {/if}
     </div>
     {#if (collection?.length || 0) == 0 && emptyMessage}
       <div class="body">
@@ -45,6 +61,7 @@
       <div class="body">
         <TableControl
           rows={collection || []}
+          allowMultiSelect={!!multipleItemsActions}
           columns={_.compact([
             !hideDisplayName && {
               fieldName: displayNameFieldName || 'displayName',
@@ -58,6 +75,7 @@
           {clickable}
           {filters}
           on:clickrow
+          onChangeMultipleSelection={handleChangeMultipleSelection}
         >
           <svelte:fragment slot="-1" let:row let:col>
             <slot name="name" {row} {col} />

packages/web/src/elements/TableControl.svelte

@@ -39,6 +39,9 @@
   export let disableFocusOutline = false;
   export let emptyMessage = null;
   export let noCellPadding = false;
+  export let allowMultiSelect = false;
+  export let selectedIndexes = [];
+  export let onChangeMultipleSelection = null;
 
   export let domTable = undefined;
   export let stickyHeader = false;
@@ -53,6 +56,9 @@
 
   const dispatch = createEventDispatcher();
 
+  let dragStartIndex = null;
+  let dragCurrentIndex = null;
+
   $: columnList = _.compact(_.flatten(columns));
 
   onMount(() => {
@@ -174,6 +180,15 @@
   $: checkableFlatRowsShown = flatRowsShown.filter(x => itemSupportsCheckbox(x));
 
   // $: groupedRows = computeGroupedRows(sortedRows);
+
+  $: if (onChangeMultipleSelection && flatRowsShown) {
+    onChangeMultipleSelection(selectedIndexes.map(index => flatRowsShown[index]));
+  }
+
+  $: if (flatRowsShown) {
+    // reset selection on items changed
+    selectedIndexes = [];
+  }
 </script>
 
 <table
@@ -270,8 +285,9 @@
         {#each gitem.rows as row}
           {@const index = _.indexOf(flatRowsShown, row)}
           <tr
-            class:selected={selectable &&
-              (selectionMode == 'index' ? selectedIndex == index : selectedKey == extractTableItemKey(row))}
+            class:selected={(selectable &&
+              (selectionMode == 'index' ? selectedIndex == index : selectedKey == extractTableItemKey(row))) ||
+              (allowMultiSelect && selectedIndexes.includes(index))}
             class:clickable
             bind:this={domRows[index]}
             on:click={() => {
@@ -287,6 +303,30 @@
                 dispatch('clickrow', row);
               }
             }}
+            on:mousedown={event => {
+              if (allowMultiSelect && !event.ctrlKey && !event.metaKey) {
+                selectedIndexes = [];
+                dragStartIndex = index;
+              }
+            }}
+            on:mousemove={() => {
+              if (dragStartIndex != null && allowMultiSelect) {
+                dragCurrentIndex = index;
+                if (dragCurrentIndex != dragStartIndex || selectedIndexes.length > 0) {
+                  if (dragCurrentIndex < dragStartIndex) {
+                    selectedIndexes = _.range(dragCurrentIndex, dragStartIndex + 1);
+                  } else {
+                    selectedIndexes = _.range(dragStartIndex, dragCurrentIndex + 1);
+                  }
+                } else if (selectedIndexes.length > 0) {
+                  selectedIndexes = [dragCurrentIndex];
+                }
+              }
+            }}
+            on:mouseup={event => {
+              dragCurrentIndex = null;
+              dragStartIndex = null;
+            }}
             data-testid={`TableControl_row_${index}`}
           >
             {#if checkedKeys}