@itfin/components 1.3.34 → 1.3.35

package/src/components/table/TableHeader.vue

@@ -1,10 +1,12 @@
 <template>
 
-  <div class="itf-table-header">
+  <div class="itf-table-header" :class="{'no-header': !visibleHeader}">
     <div ref="container" class="table-row-template">
       <div accept-group="items" class="table-view-body-space" v-dropzone="{ payload: 0 }"></div>
       <div class="shadow-area"></div>
-      <div class="table-view-header-value reserved sticky"></div>
+      <div class="table-view-header-value reserved sticky">
+        <itf-checkbox v-if="visibleHeader" ungrouped value="all" v-model="selectAll" ref="selectAll" />
+      </div>
 
       <template v-for="(column, n) in visibleAttributes">
         <div
@@ -16,36 +18,38 @@
           :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow, [`justify-content-${column.align || 'start'}`]: true}"
           class="table-view-header-value"
           :style="`width: ${column.width}px; left: ${column.left}px;`">
-          <div accept-group="tablecolumns"
+          <!-- Не треба видаляти колонки, бо вони потрібні для збереження ширини -->
+          <div v-if="visibleHeader" accept-group="tablecolumns"
                class="table-view-header-space"
                @enter="columnHighlight(n, 'enter')"
                @leave="columnHighlight(n, 'leave')"
                v-dropzone="{ payload: { index: n, attribute: column } }">
             <div class="table-view-header-dropzone"></div>
           </div>
-          <div group="tablecolumns"
+          <div v-if="visibleHeader" group="tablecolumns"
                class="table-header"
                @drop="reorderColumns"
                v-drag-handle
                v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
-            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" disabled>
+            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100">
               <template #button>
-                <span :title="column.text">
-<!--                  <itf-icon name="type_select" :size="16" />-->
-                  {{column.text}}
+                <span :title="column.title[locale] || column.title['en_US']">
+                  <span v-if="column.icon" :class="column.icon"></span>
+                  {{column.title[locale] || column.title['en_US']}}
                 </span>
+<!--                <itf-icon name="arrow_up" :size="16" class="ms-1" />-->
               </template>
 
               <div v-if="column.sortable">
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
                   <itf-icon name="arrow_up" :size="16" class="me-1" />
-                  Sort By Asc
+                  Sort ascending
                 </a>
               </div>
               <div v-if="column.sortable">
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;">
                   <itf-icon name="arrow_down" :size="16" class="me-1" />
-                  Sort By Desc
+                  Sort descending
                 </a>
               </div>
               <div v-if="column.groupable">
@@ -57,19 +61,19 @@
               <div>
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="togglePinned(n)">
                   <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
-                  <span v-if="column.pinned">Unpin Column</span>
-                  <span v-else>Pin Column</span>
+                  <span v-if="column.pinned">Unfreeze column</span>
+                  <span v-else>Freeze up to column</span>
                 </a>
               </div>
               <div>
                 <a class="dropdown-item d-flex align-items-center"  href="javascript:;" @click="hideColumn(n)">
                   <itf-icon name="eye_no" :size="16" class="me-1" />
-                  Hide
+                  Hide in view
                 </a>
               </div>
             </itf-dropdown>
           </div>
-          <div v-if="n === sortedColumns.length - 1"
+          <div v-if="visibleHeader && n === sortedColumns.length - 1"
                @enter="columnHighlightLast('enter')"
                @leave="columnHighlightLast('leave')"
                accept-group="tablecolumns"
@@ -77,13 +81,47 @@
                v-dropzone="{payload:{ last: true }}">
             <div class="table-view-header-dropzone"></div>
           </div>
-          <div v-if="columnResizing" ref="resizeHandle" class="resize-handle"></div>
+          <div v-if="visibleHeader && columnResizing" ref="resizeHandle" class="resize-handle"></div>
         </div>
       </template>
-      <div v-if="showAddColumn" class="table-view-header-value">
-        <span class="table-header table-header-add-column" data-test="table-header-add-column" @click.prevent="$emit('add-column')">
-          <itf-icon name="plus" />
-        </span>
+      <div v-if="showAddColumn" class="table-view-header-value flex-grow-1 justify-content-start">
+        <itf-dropdown v-if="visibleHeader" ref="newDd" text append-to-body shadow autoclose="outside" class="table-header table-header-add-column" data-test="table-header-add-column">
+          <template #button>
+            <span class="nom-layout-three-columns"></span>
+          </template>
+
+          <itf-sortable :value="sortedColumns" @input="onSortColumns">
+            <template v-for="(column, k) in sortedColumns">
+              <div :key="`column${k}`" class="d-flex align-items-center justify-content-between px-2 py-1">
+                <template v-if="column.visible !== false">
+                  <div class="d-flex justify-content-between flex-grow-1">
+                    <div>
+                      <span class="nom-grip-vertical"></span>
+                      <span v-if="column.icon" :class="column.icon"></span>
+                      {{column.title[locale] || column.title['en_US']}}
+                    </div>
+                    <span v-if="column.pinned" class="nom-pin-fill"></span>
+                  </div>
+                  <a sortable-skip href="" class="text-decoration-none" @click.prevent="hideColumn(k)">
+                    <span class="nom-trash"></span>
+                  </a>
+                </template>
+              </div>
+            </template>
+          </itf-sortable>
+
+          <div v-if="invisibleColumns.length">
+            <div class="dropdown-header">Add column</div>
+            <template v-for="(column, k) in invisibleColumns">
+              <a href="" @click.prevent="addColumn(column)" :key="`inv-column${k}`" class="dropdown-item d-flex align-items-center justify-content-between px-2 py-1">
+                <div>
+                  <span class="nom-plus"></span>
+                  {{column.title[locale] || column.title['en_US']}}
+                </div>
+              </a>
+            </template>
+          </div>
+        </itf-dropdown>
       </div>
     </div>
   </div>
@@ -95,6 +133,15 @@
   top: 0;
   z-index: calc(var(--row-count) + 1);
 
+  &.no-header {
+    --table-row-height: 0px;
+    --table-small-row-size: 0px;
+
+    .table-view-header-value {
+      border-top: 0 none;
+      border-bottom: 0 none;
+    }
+  }
   .table-header.draggable-mirror{
     z-index: 100000001;
     background: rgba(235,237,239,0.75);
@@ -108,10 +155,11 @@
   .table-view-header-value {
     cursor: pointer;
     align-items: center;
+    justify-content: center;
     height: var(--table-row-height);
     white-space: nowrap;
     //border-top: 0;
-    border-top: 1px solid var(--bs-border-color);
+    border-top: 1px solid transparent;
     border-left: 0;
     border-right-width: thin;
     border-bottom-width: thin;
@@ -119,12 +167,15 @@
     position: relative;
     display: flex;
     min-width: var(--itf-table-min-width);
-    border-right-color: var(--bs-border-color);
+    border-right-color: transparent;
     border-bottom-color: var(--bs-border-color);
     background-color: var(--bs-body-bg);
     //background-color: rgb(238 238 238 / 1);
     font-weight: 500;
 
+    &.last-sticky-column {
+      border-right-color: var(--bs-border-color);
+    }
     &.reserved {
       left: var(--shadow-area-width);
       width: var(--indicator-area-width);
@@ -140,11 +191,16 @@
     overflow: hidden;
     width: 100%;
     text-overflow: ellipsis;
-    margin-right: -5px;
     padding-left: 0.75rem;
     padding-right: 0.75rem;
     gap: 0.25rem;
     align-items: center;
+    & > div {
+      min-height: var(--table-row-height);
+      align-items: center;
+      justify-content: space-between;
+      display: flex;
+    }
 
     &.table-header-add-column {
       text-overflow: clip;
@@ -220,7 +276,7 @@
     left: -50px;
   }
   .table-view-header-value:not(.reserved):hover {
-    background-color: rgb(218 218 218 / 1);
+    background-color: var(--bs-tertiary-bg);
   }
   .draggable-source--is-dragging {
     z-index: 100;
@@ -228,30 +284,82 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import {Vue, Component, Prop, PropSync, Watch, Inject} from 'vue-property-decorator';
+import itfCheckbox from '../checkbox/Checkbox.vue';
 import itfButton from '../button/Button.vue';
+import itfPopover from '../popover/Popover.vue';
 import itfIcon from '../icon/Icon.vue';
 import createDraggable from '../sortable/draggable';
 import itfDropdown from '../dropdown/Dropdown.vue';
+import itfSortable from '../sortable/Sortable.vue';
+import settings from "../../ITFSettings";
 
 const { Node, ...draggableDirectives } = createDraggable();
 
 export default @Component({
   name: 'itfTableHeader',
   components: {
+    itfSortable,
+    itfCheckbox,
     itfDropdown,
     itfButton,
+    itfPopover,
     itfIcon
   },
   directives: {
     ...draggableDirectives
   }
 })
-class itfTable extends Vue {
+class itfTableHeader extends Vue {
+  @Inject() tableEl;
+
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
+  @Prop({ type: Array, default: () => ([]) }) rows;
+  @Prop({ type: Array, default: () => ([]) }) selectedIds;
+  @Prop({ type: Object, default: () => ({}) }) schema;
   @Prop(Boolean) columnSorting;
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
+  @Prop(Boolean) visibleHeader;
+
+  @Watch('selectedIds')
+  @Watch('rows')
+  onSelectedIdChanged() {
+    if (this.$refs.selectAll && this.selectedIds.length && this.selectedIds.length < this.rows.length) {
+      this.$refs.selectAll.input.indeterminate = true;
+    } else if (this.$refs.selectAll && this.$refs.selectAll.input) {
+      this.$refs.selectAll.input.indeterminate = false;
+    }
+  }
+
+  get locale() {
+    return settings.defaultLocale;
+  }
+
+  get selectAll() {
+    return this.selectedIds.length === this.rows.length;
+  }
+
+  set selectAll(val) {
+    if (val) {
+      this.$emit('update:selectedIds', this.rows.map(r => r.Id));
+    } else {
+      this.$emit('update:selectedIds', []);
+    }
+  }
+
+  addColumn(column) {
+    const index = this.sortedColumns.findIndex((c) => c === column);
+    const newValue = [...this.sortedColumns];
+    newValue[index].visible = true;
+    this.$emit('update:columns', newValue);
+    console.info(this.$refs);
+    this.$refs.newDd.hide();
+  }
+
+  get invisibleColumns() {
+    return this.sortedColumns.filter((column) => column.visible === false);
+  }
 
   get visibleAttributes() {
     return this.sortedColumns;
@@ -261,10 +369,6 @@ class itfTable extends Vue {
     return this.sortedColumns.findIndex((column) => column.lastPinned);
   }
 
-  onSort(items) {
-    console.info(items);
-  }
-
   reorderColumns({ detail }) {
     const { index: fromIndex } = detail.draggablePayload;
     const { index: toIndex, last } = detail.dropzonePayload;
@@ -286,18 +390,16 @@ class itfTable extends Vue {
     } else {
       this.columnHighlight(toIndex, 'leave');
     }
-    for (const dropdown of this.$refs.dropdown) {
-      dropdown.hide();
-    }
   }
 
   columnHighlight(index, state) {
-    Array.from(document.querySelectorAll(`[data-column="${index}"]`)).forEach(t=>{
+    Array.from(this.tableEl.$el.querySelectorAll(`[data-column="${index}"]`)).forEach(t=>{
       state === "enter" ? t.classList.add("highlight-drop-column") : t.classList.remove("highlight-drop-column")
     });
   }
+
   columnHighlightLast(state) {
-    Array.from(document.querySelectorAll(`[data-column="${this.sortedColumns.length - 1}"]`)).forEach(t=>{
+    Array.from(this.tableEl.$el.querySelectorAll(`[data-column="${this.sortedColumns.length - 1}"]`)).forEach(t=>{
       if (state === "enter") {
         t.classList.add("highlight-drop-column");
         t.classList.add("right");
@@ -310,7 +412,14 @@ class itfTable extends Vue {
 
   initResizing() {
     const resizeHandle = this.$refs.resizeHandle;
+    if (!resizeHandle) {
+      return;
+    }
     resizeHandle.forEach((handle) => {
+      if (handle.binded) {
+        return;
+      }
+      handle.binded = true;
       handle.addEventListener('mousedown', (event) => {
         const column = event.target.closest('.table-view-header-value');
         const body = event.target.closest('.table-view-body');
@@ -348,12 +457,16 @@ class itfTable extends Vue {
       Node.addContainer(this.$refs.container);
     }
     if (this.columnResizing) {
-      this.initResizing();
+      this.onColumnsChanged();
     }
   }
 
+  @Watch('columns')
+  onColumnsChanged() {
+    this.$nextTick(() => this.initResizing());
+  }
+
   changeColumn(index, params) {
-    this.$refs.dropdown[index].hide();
     let newValue = [...this.sortedColumns];
     const newItem = { ...newValue[index] };
     Object.assign(newItem, params);
@@ -368,5 +481,9 @@ class itfTable extends Vue {
   togglePinned(index) {
     this.changeColumn(index, { pinned: !this.sortedColumns[index].pinned });
   }
+
+  onSortColumns(items) {
+    this.$emit('update:columns', items);
+  }
 }
 </script>

package/src/components/table/index.stories.js

@@ -90,6 +90,97 @@ storiesOf('Common', module)
           text: `Рахунок ❌`,
           Name: `Item #${i}`
         }))),
+        columns2: [
+          {
+            text: 'Рахунок',
+            name: 'Account',
+            width: 200,
+            min: 250,
+            max: 250
+          },
+          {
+            text: 'Рахунок',
+            name: 'Account',
+            width: 200,
+            min: 250,
+            max: 250
+          }
+        ],
+        list2: [
+          {
+            Id: 1,
+            summary: true,
+            Description: 'Total',
+            EmployeeId: 'Vitalii Savchuk',
+            Total: 100,
+            FTE: 1.0,
+            Position: { Title: 'Developer', Id: 1 },
+            MinutesInternal: '10h 20m',
+            MinutesExternal: '10h 20m',
+            AmountInternal: 1000,
+            AmountExternal: 2000,
+            AmountShare: 200,
+            Notes: 'Test',
+            Rate: '10',
+            Time: '10h 00m',
+            Amount: 2000
+          }
+        ],
+        schema: {
+          "properties": [
+            {
+              "property": "Description",
+              "title": { "en_US": "Description", "uk_UA": "Прізвище" },
+              "type": "text",
+              "editable": true,
+              "sortable": false,
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "EmployeeId",
+              "title": { "en_US": "Employee", "uk_UA": "Імʼя" },
+              "type": "employee",
+              "copy": true,
+              "editable": true,
+              "sortable": false,
+              icon: 'nom-person',
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "Rate",
+              "title": { "en_US": "Rate", "uk_UA": "Прізвище" },
+              "type": "money",
+              "editable": true,
+              "sortable": false,
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "Time",
+              "title": { "en_US": "Time", "uk_UA": "Прізвище" },
+              "type": "time",
+              "editable": true,
+              "sortable": false,
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "Amount",
+              "title": { "en_US": "Amount", "uk_UA": "Прізвище" },
+              "type": "money",
+              "sortable": false,
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            }
+          ]
+        },
         columns: [{
           text: 'Рахунок',
           name: 'Account',
@@ -184,8 +275,8 @@ storiesOf('Common', module)
       }
     },
     methods: {
-      onAdd() {
-        console.info('add')
+      onAdd(title) {
+        this.list2.push({ Id: Math.random() });
       }
     },
     template: `<div>
@@ -202,9 +293,51 @@ storiesOf('Common', module)
   &lt;/itf-table>
 </pre>
 
+      schema.json
+      <pre>
+        {
+          "properties": [
+            {
+              "property": "FirstName",
+              "title": { "en": "FirstName", "uk": "Імʼя" },
+              "type": "text",
+              "sortable": true
+            },
+            {
+              "property": "LastName",
+              "title": { "en": "LastName", "uk": "Прізвище" },
+              "type": "text",
+              "sortable": true
+            },
+            {
+              "property": "PositionId",
+              "title": { "en": "Position", "uk": "Прізвище" },
+              "type": "position",
+              "sortable": true
+            }
+          ]
+        }
+      </pre>
       <h3>Example</h3>
-
       <itf-table2
+        add-new-rows
+        @new="onAdd"
+        state-name="test"
+        :schema="schema"
+        :columns.sync="columns2" :rows="list2" column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
+        <template #format.employee="{ item }">
+          {{item.EmployeeId}}
+        </template>
+        <template #edit.employee="{ item }">
+          {{item.EmployeeId}}
+        </template>
+      </itf-table2>
+
+      <br />
+      <br />
+      <br />
+      <!--itf-table2
+        add-new-rows
         group-by="text"
         :columns.sync="columns" :rows="list" column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
         <template #column.Account="{ item }">
@@ -213,7 +346,7 @@ storiesOf('Common', module)
         <template #column.FTE="{ item }">
           {{item}}
         </template>
-      </itf-table2>
+      </itf-table2-->
 
       <!--itf-table
         :columns="columns"
@@ -301,6 +434,21 @@ storiesOf('Common', module)
           min: 80,
           max: 80
         }],
+        list2: [
+          {
+            summary: true,
+            Employee: 'Total',
+            Total: 100,
+            FTE: 1.0,
+            Position: 'Developer',
+            MinutesInternal: '10h 20m',
+            MinutesExternal: '10h 20m',
+            AmountInternal: 1000,
+            AmountExternal: 2000,
+            AmountShare: 200,
+            Notes: 'Test'
+          }
+        ],
         list: [
           {
             summary: true,