@itfin/components 1.2.103 → 1.2.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.103",
+  "version": "1.2.105",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/kanban/Board.vue

@@ -2,7 +2,7 @@
   <div class="itf-board">
 
     <div ref="container" class="itf-board-titles">
-      <div v-for="(column, index) of columns"
+      <div v-for="(column, index) of orderColumnsInBoard"
            :data-column="index"
            @mouseover="columnHighlight(index, 'enter')"
            @mouseout="columnHighlight(index, 'leave')"
@@ -18,6 +18,7 @@
           accept-group="board-columns"
           @enter="columnHighlight(index, 'enter')"
           @leave="columnHighlight(index, 'leave')"
+          @click="$emit('update:columnSettings', column)"
           v-dropzone="{ payload: { index, column } }"
           class="d-flex align-items-center">
           <div
@@ -25,8 +26,8 @@
             @drop="reorderColumns"
             v-draggable="{ handle: true, payload: { index, column }, mirror: { yAxis:false } }"
             class="flex-grow-1 d-flex align-items-center itf-board-column__header justify-content-between">
-              <div><slot name="header" :column="column">{{ column[columnNameKey] }}</slot></div>
-              <div class="text-muted me-1"><slot name="header-addon" :column="column">{{ (groupedItems[column.Id] || []).length }}</slot></div>
+            <div><slot name="header" :column="column">{{ column[columnNameKey] }}</slot></div>
+            <div class="text-muted me-1"><slot name="header-addon" :column="column">{{ (groupedItems[column.Id] || []).length }}</slot></div>
           </div>
         </itf-edit-button>
         <div v-if="index === columns.length - 1"
@@ -39,7 +40,7 @@
         </div>
       </div>
       <div class="align-items-end d-flex pb-1">
-        <slot name="add-column">
+        <slot name="add-column" @click="$emit('addColumn')">
           <itf-button icon small>
             <itf-icon name="plus" />
           </itf-button>
@@ -48,7 +49,7 @@
     </div>
 
     <div class="itf-board-columns flex-grow-1">
-      <div v-for="(column, index) of columns"
+      <div v-for="(column, index) of orderColumnsInBoard"
            :key="`column-${index}`"
            :data-column="index"
            class="itf-board-column px-2 pb-2 pt-2" :class="{'empty': !groupedItems[column.Id]}">
@@ -66,6 +67,7 @@ import loading from '../../directives/loading';
 import itfForm from '../form/Form';
 import itfEditButton from '../editable/EditButton.vue';
 import createDraggable from '../sortable/draggable';
+import { debounce } from '../../helpers/debounce';
 
 const { Node, ...draggableDirectives } = createDraggable();
 
@@ -87,6 +89,7 @@ export default @Component({
 class Board extends Vue {
   @Prop(Array) columns;
   @Prop(Array) items;
+  @Prop(Array) boardColumnsOrder
   @Prop(Array) columnOrders;
   @Prop({ type: Function, default: (item) => item.Status?.Id }) groupFunc;
   @Prop({ type: Function, default: (item, value) => { item.Status = value; } }) updateFunc;
@@ -100,6 +103,7 @@ class Board extends Vue {
   }
 
   mounted() {
+    this.itemStatusChanged = debounce(this.emitItemStatusChanged, 10);
     if (this.columnSorting) {
       Node.addContainer(this.$refs.container);
     }
@@ -113,12 +117,21 @@ class Board extends Vue {
     return grouped;
   }
 
+  get orderColumnsInBoard() {
+    return this.sortByOrdering(this.columns, this.boardColumnsOrder || []);
+  }
+
   orderItemsInColumn(column) {
-    const columnOrdering = this.columnOrders.find((c) => c.Id === column.Id) || { ItemIds: [] };
+    const columnOrdering = (this.columnOrders.find((c) => c.Id === column.Id) || { ItemIds: [] }).ItemIds;
     let items = this.items.filter((item) => column.Id === this.groupFunc(item));
-    items = items.sort((a, b) => {
-      const aIndex = columnOrdering.ItemIds.findIndex((c) => c === a.Id);
-      const bIndex = columnOrdering.ItemIds.findIndex((c) => c === b.Id);
+    return this.sortByOrdering(items, columnOrdering);
+  }
+
+  sortByOrdering (arr, ordering) {
+    const arrCopy = arr.slice();
+    return arrCopy.sort((a, b) => {
+      const aIndex = ordering.findIndex((id) => id === a.Id);
+      const bIndex = ordering.findIndex((id) => id === b.Id);
       if (aIndex === -1 && bIndex === -1) {
         return 0;
       }
@@ -130,7 +143,6 @@ class Board extends Vue {
       }
       return aIndex - bIndex;
     });
-    return items;
   }
 
   columnHighlight(index, state, className = 'over') {
@@ -153,7 +165,7 @@ class Board extends Vue {
   reorderColumns({ detail }) {
     const { index: fromIndex } = detail.draggablePayload;
     const { index: toIndex, last } = detail.dropzonePayload;
-    const newValue = [...this.columns];
+    const newValue = [...this.orderColumnsInBoard];
     const [removed] = newValue.splice(fromIndex, 1);
 
     if (last) {
@@ -186,36 +198,41 @@ class Board extends Vue {
 
     items[itemIndex] = newItem;
 
-    const newOrders = [...this.columnOrders];
-
-    let sorting = newOrders.find((c) => c.Id === column.Id);
-    if (!sorting) {
-      sorting = { Id: column.Id, ItemIds: [] };
-      newOrders.push(sorting)
-    }
-    let fromSorting = newOrders.find((c) => c.Id === fromColumn.Id);
-    if (!fromSorting) {
-      fromSorting = { Id: fromColumn.Id, ItemIds: [] };
-      newOrders.push(fromSorting)
-    }
-    // update from
-    fromSorting.ItemIds = this.groupedItems[fromColumn.Id].map((i) => i.Id).filter((t) => t !== newItem.Id);
-
-    // update to
-    const columnItems = [...this.groupedItems[column.Id]];
-    let placeIndex = last ? columnItems.length : toIndex;
-    if (typeof placeIndex === 'undefined') { // ідекса може не бути, якщо на колонку переносять, тоді в кінець
-      placeIndex = columnItems.length;
-    }
-    const itemsInColumn = columnItems.map((t) => t.Id).filter((t) => t !== newItem.Id);
-    itemsInColumn.splice(placeIndex, 0, newItem.Id);
+    this.lastUpdatedIndex = typeof this.lastUpdatedIndex === 'undefined' ? toIndex : this.lastUpdatedIndex; // запамятовуємо індекс, бо виклики може бути два, коли колонка і карточка обробляє
+    this.itemStatusChanged(items[itemIndex], column, items, () => {
+      const toIndex = this.lastUpdatedIndex; // беремо індекс з пам'яті, бо викликів може бути два, але індекс тільки в картці, якщо нема, то це колонка
+      this.lastUpdatedIndex = undefined; // обнуляємо, щоб при наступному перетягувані вже не брало його
+      const newOrders = [...this.columnOrders];
+      let sorting = newOrders.find((c) => c.Id === column.Id);
+      if (!sorting) {
+        sorting = { Id: column.Id, ItemIds: [] };
+        newOrders.push(sorting)
+      }
+      let fromSorting = newOrders.find((c) => c.Id === fromColumn.Id);
+      if (!fromSorting) {
+        fromSorting = { Id: fromColumn.Id, ItemIds: [] };
+        newOrders.push(fromSorting)
+      }
+      // update from
+      fromSorting.ItemIds = this.groupedItems[fromColumn.Id].map((i) => i.Id).filter((t) => t !== newItem.Id);
+      // update to
+      const items = [...this.groupedItems[column.Id]];
+      let placeIndex = last ? items.length : toIndex;
+      if (typeof placeIndex === 'undefined') { // ідекса може не бути, якщо на колонку переносять, тоді в кінець
+        placeIndex = items.length;
+      }
+      const itemsInColumn = items.map((t) => t.Id).filter((t) => t !== newItem.Id);
+      itemsInColumn.splice(placeIndex, 0, newItem.Id);
+      sorting.ItemIds = itemsInColumn;
+      this.$emit('update:columnOrders', newOrders);
+    });
+  }
 
-    sorting.ItemIds = itemsInColumn;
+  emitItemStatusChanged(item, column, items, updateOrder) {
+    updateOrder();
 
     this.$emit('update:item', [item, column]);
     this.$emit('update:items', items);
-
-    this.$emit('update:columnOrders', newOrders);
   }
 }
 </script>

package/src/components/kanban/BoardCard.vue

@@ -1,19 +1,21 @@
 <template>
-  <div class="itf-board-card shadow-sm">
+  <div class="itf-board-card shadow-sm" @click="$emit('click')" tabindex="0">
     <slot name="header"></slot>
 
     <div class="itf-board-card-inner d-flex">
-      <div class="flex-grow-1">
+      <div class="flex-grow-1 itf-board-card-inner-content">
         <slot>{{text}}</slot>
       </div>
-      <div>
-        <itf-button icon small>
+      <div v-if="dropdown">
+        <itf-button icon small @click.prevent.stop="">
           <itf-icon name="menu_horizontal" />
         </itf-button>
       </div>
     </div>
 
-    <slot name="footer"></slot>
+    <div class="itf-board-card-footer pt-1 d-flex">
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>
 <script>
@@ -37,5 +39,6 @@ export default @Component({
 })
 class BoardColumn extends Vue {
   @Prop() text;
+  @Prop(Boolean) dropdown;
 }
 </script>

package/src/components/kanban/styles.scss

@@ -5,18 +5,17 @@
   --itf-board-placeholder-border-color: #0567eb;
   --itf-board-placeholder-bg-color: #ebeffe;
   --itf-board-card-bg-color: #fff;
+  --itf-board-card-hover-color: rgba(0, 0, 0, .05);
+  --itf-board-card-border-color: #ccc;
 }
 
 [data-theme="dark"] {
-  --itf-board-column-hover-color: #494646;
+  --itf-board-column-hover-color: rgba(255, 255, 255, .05);
   --itf-board-placeholder-color: #FFCC00;
   --itf-board-placeholder-border-color: #FFCC00;
   --itf-board-placeholder-bg-color: #383b41;
   --itf-board-card-bg-color: #313337;
-
-  .itf-board {
-    --bs-border-color: #424448;
-  }
+  --itf-board-card-border-color: #424448;
 }
 
 .itf-board {
@@ -108,7 +107,6 @@
   .itf-board-column {
     position: relative;
     width: var(--itf-board-column-width);
-    min-width: var(--itf-board-column-width);
     border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
 
     &__title {
@@ -152,7 +150,7 @@
 }
 
 .itf-board-titles {
-  border-bottom: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--itf-board-card-border-color);
 }
 
 .itf-board-columns {
@@ -212,18 +210,32 @@
 .itf-board-card {
   background-color: var(--itf-board-card-bg-color);
   border-radius: var(--bs-border-radius);
-  border: 1px solid var(--bs-border-color);
+  border: 1px solid var(--itf-board-card-border-color);
   margin-bottom: .75rem;
   overflow: hidden;
   user-select: none;
+  padding: .5rem;
+  cursor: pointer;
+
+  &:hover, &:focus {
+    background-color: var(--itf-board-card-hover-bg-color);
+  }
 
   .itf-board-card-inner {
-    padding: .5rem;
     font-size: .875rem;
     word-wrap: break-word;
     -webkit-line-clamp: unset;
-    overflow-x: unset;
+    overflow: hidden;
     word-break: break-word;
+
+    .itf-board-card-inner-content {
+      padding-right: 0.2rem;
+      overflow-x: hidden;
+    }
+  }
+
+  .itf-board-card-footer {
+    overflow-x: hidden;
   }
 }
 
@@ -232,6 +244,7 @@
   flex-direction: column;
   max-height: 100%;
   flex-grow: 1;
+  max-width: 100%;
 }
 
 .itf-board-cards-wrapper {
@@ -243,7 +256,7 @@
   .draggable-source--is-dragging {
     position: relative !important;
     .itf-board-card {
-      background-color: var(--bs-border-color);
+      background-color: var(--itf-board-card-border-color);
 
       & > div {
         opacity: 0;