@itfin/components 1.3.33 → 1.3.35

package/src/components/table/Table2.vue

@@ -1,34 +1,38 @@
 <template>
 
-  <div class="scrollable scrollable-x big-scrollbar">
-    <template v-for="(group, index) in groups">
-      <div class="table-view-body">
-        <itf-table-group
-          :key="index"
-          :style="`--table-row-height: ${rowHeight}px`"
-          :columns="columns"
-          @update:columns="onColumnsUpdate"
-          :rows="group.rows"
-          :title="group.name"
-          :add-new-rows="addNewRows"
-          :column-sorting="columnSorting"
-          :column-resizing="columnResizing"
-          :show-grouping="showGrouping"
-          :show-summary="showSummary"
-          :show-add-column="showAddColumn"
-          :row-height="rowHeight"
-          :show-header="index === 0"
-          @add-column="$emit('add-column', $event)"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}" />
-          </template>
-          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData || {}" />
-          </template>
-        </itf-table-group>
-      </div>
-    </template>
+  <div class="scrollable scrollable-x big-scrollbar" :class="{'permanent-checkboxes': selectedIds.length}">
+    <itf-checkbox-group v-model="selectedIds">
+      <template v-for="(group, index) in groups">
+        <div class="table-view-body">
+          <itf-table-group
+            :key="index"
+            :id-property="idProperty"
+            :columns="columns"
+            @update:columns="onColumnsUpdate"
+            :rows="group.rows"
+            :title="group.name"
+            :selected-ids.sync="selectedIds"
+            :add-new-rows="addNewRows"
+            :column-sorting="columnSorting"
+            :column-resizing="columnResizing"
+            :show-grouping="showGrouping"
+            :show-summary="showSummary"
+            :show-add-column="showAddColumn"
+            :show-header="!noHeader"
+            :schema="schema"
+            @new="$emit('new', $event)"
+            @add-column="$emit('add-column', $event)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}" />
+            </template>
+            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}" />
+            </template>
+          </itf-table-group>
+        </div>
+      </template>
+    </itf-checkbox-group>
   </div>
 
 </template>
@@ -65,7 +69,8 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import itfCheckboxGroup from '../checkbox/CheckboxGroup.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
@@ -73,7 +78,11 @@ import itfTableHeader from './TableHeader.vue';
 
 export default @Component({
   name: 'itfTable2',
+  provide() {
+    return { tableEl: this }; // do not use Provide from vue-property-decorator
+  },
   components: {
+    itfCheckboxGroup,
     itfTableHeader,
     itfButton,
     itfIcon,
@@ -81,16 +90,72 @@ export default @Component({
   }
 })
 class itfTable2 extends Vue {
-  @Prop({ required: true, type: Array }) columns;
+  // @Prop({ required: true, type: Array }) columns;
   @Prop({ required: true, type: Array }) rows;
-  @Prop({ type: Number, default: 40 }) rowHeight;
   @Prop({ type: String, default: null }) groupBy;
+  @Prop({ type: String, default: 'Id' }) idProperty;
+  @Prop({ type: String, default: null }) stateName; // save state to storage
+  @Prop({ type: Object, default: () => ({}) }) schema;
   @Prop(Boolean) addNewRows;
   @Prop(Boolean) columnSorting;
   @Prop(Boolean) columnResizing;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showGrouping;
   @Prop(Boolean) showSummary;
+  @Prop(Boolean) noHeader;
+
+  state = {
+    selectedIds: [],
+    columns: []
+  };
+  selectedIds = [];
+
+  getTableState() {
+    const list = this.schema?.properties || [];
+    let state = this.stateName ? JSON.parse(localStorage.getItem(this.stateKey) || 'null') : null;
+    if (!state) {
+      state = {
+        selectedIds: [],
+        columns: [...list]
+      };
+    }
+    state.selectedIds = [];
+    for (const column of list) {
+      const stateColumn = state.columns.find(i => i.property === column.property);
+      if (stateColumn) {
+        Object.assign(stateColumn, column);
+      } else {
+        state.columns.push(column);
+      }
+    }
+    for (const column of state.columns) {
+      const originColumn = list.find(i => i.property === column.property);
+      if (!originColumn) {
+        state.columns = state.columns.filter(i => i.property !== column.property);
+      }
+    }
+    return state;
+  }
+
+  get stateKey() {
+    return this.stateName ? `itf-table-${this.stateName}` : null;
+  }
+
+  saveTableState() {
+    if (!this.stateName) {
+      return;
+    }
+    localStorage.setItem(this.stateKey, JSON.stringify(this.state));
+  }
+
+  mounted() {
+    this.state = this.getTableState();
+    this.selectedIds = this.state.selectedIds;
+  }
+
+  get columns() {
+    return this.state?.columns || [];
+  }
 
   get groups() {
     const { groupBy, rows } = this;
@@ -108,8 +173,18 @@ class itfTable2 extends Vue {
     return Object.entries(groups).map(([name, rows]) => ({ name, rows }));
   }
 
+  @Watch('selectedIds')
+  onSelectedIdsUpdate(selectedIds) {
+    this.state.selectedIds = selectedIds;
+    this.saveTableState();
+  }
+
   onColumnsUpdate(columns) {
-    this.$emit('update:columns', columns);
+    const pinned = [...columns.filter(i => i.pinned)];
+    const unpinned = [...columns.filter(i => !i.pinned)];
+    this.state.columns = [...pinned, ...unpinned].map((item, key) => ({ ...item, index: key }));
+    this.$emit('update:columns', this.state.columns);
+    this.saveTableState();
   }
 }
 </script>

package/src/components/table/TableBody.vue

@@ -1,15 +1,10 @@
 <template>
 
-  <recycle-scroller
-    class="scroller"
-    page-mode
-    :items="rows"
-    :item-size="rowHeight"
-    key-field="Id"
-    v-slot="{ item }"
-    direction="vertical"
-  >
-    <div group="items" data-test="table-item" class="table-view-item grouped draggable-item">
+  <div class="scroller">
+    <div
+      v-for="(item, n) in rows"
+      :key="n"
+      group="items" data-test="table-item" class="table-view-item grouped draggable-item">
       <div class="table-row-template">
         <div accept-group="items" class="table-view-body-space"></div>
         <div class="shadow-area">
@@ -24,17 +19,10 @@
         </div>
         <div class="indicator sticky">
           <div class="fill on-rest table-view-row-count">
-            <span>{{ item.Id }}</span>
+<!--            <span>{{ item[idProperty] }}</span>-->
           </div>
           <div class="fill on-hover">
-            <a href="" data-test="table-item-expand">
-              <i class="ic-expand"></i>
-            </a>
-            <div class="">
-              <a data-test="table-row-generator" href="">
-                <i class="ic-plus"></i>
-              </a>
-            </div>
+            <itf-checkbox :value="item[idProperty]" />
           </div>
         </div>
         <div accept-group="items" class="table-item-inner">
@@ -44,12 +32,18 @@
               :data-column="n"
               :style="`width: ${column.width}px; left: ${column.left}px;`"
               :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex, 'flex-grow-1': column.grow}"
-              class="table-view-item-value d-flex h-100 align-items-stretch px-2">
+              class="table-view-item-value d-flex h-100 align-items-stretch">
               <slot :name="`column.${column.name}`" :item="item" :column="column">
-                <template v-if="editTypes[column.Type]">
-                  <property-inline-edit :value="item[column.field]" :field="column" editable focused />
+                <template v-if="column.editable">
+                  <slot :name="`edit.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
+                    <div class="px-1 py-1 w-100"><itf-text-field :value="getValue(item, column)" /></div>
+                  </slot>
+                </template>
+                <template v-else>
+                  <slot :name="`format.${column.type}`" :value="getValue(item, column)" :item="item" :column="column">
+                    <div class="px-2 w-100">{{getValue(item, column)}}</div>
+                  </slot>
                 </template>
-                <div v-else v-text="item.Name" />
               </slot>
             </div>
           </template>
@@ -61,7 +55,7 @@
         </div>
       </div>
     </div>
-  </recycle-scroller>
+  </div>
 </template>
 <style lang="scss">
 .table-row-template {
@@ -70,7 +64,6 @@
   align-items: stretch;
 }
 .table-item-inner {
-  height: 100%;
   flex-grow: 1;
   position: relative;
   display: flex;
@@ -83,7 +76,6 @@
   border-right: 1px solid var(--bs-border-color);
   border-bottom: 1px solid var(--bs-border-color);
   align-items: stretch;
-  height: 100%;
   display: flex;
   position: relative;
   line-height: var(--itf-table-line-height);
@@ -108,7 +100,7 @@
     }
   }
   &:hover {
-    background-color: var(--itf-table-hover-bg);
+    background-color: var(--bs-tertiary-bg);
   }
 
   &.sticky {
@@ -119,20 +111,19 @@
 }
 
 .table-item-inner .extra {
-  height: 100%;
   flex-grow: 1;
   border-color: var(--bs-border-color);
 }
 
 .indicator {
-  height: 100%;
+  //height: 100%;
   left: var(--shadow-area-width);
   width: var(--indicator-area-width);
   z-index: 4;
   position: -webkit-sticky;
   position: sticky;
   background-color: var(--bs-body-bg);
-  border-right: 1px solid var(--bs-border-color);
+  //border-right: 1px solid var(--bs-border-color);
   border-bottom: 1px solid var(--bs-border-color);
   display: flex;
   align-items: center;
@@ -140,6 +131,31 @@
   min-width: var(--itf-table-min-width);
 }
 
+.table-row-template, .table-view-header-value {
+  .form-check {
+    padding: 0;
+    margin-bottom: 0;
+
+    .form-check-input {
+      margin-left: 0;
+    }
+  }
+}
+.table-row-template {
+  .on-hover {
+    display: none;
+  }
+  &:hover, .permanent-checkboxes & {
+    .on-rest {
+      display: none;
+    }
+
+    .on-hover {
+      display: block;
+    }
+  }
+}
+
 .table-item-inner .boundary {
   z-index: 3;
   position: absolute;
@@ -172,7 +188,7 @@
   bottom: 0;
 }
 .table-small-row .table-view-item {
-  height: var(--table-row-height);
+  // height: var(--table-row-height);
 }
 .resize-observer {
   position: absolute;
@@ -191,27 +207,33 @@
 </style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
+import get from 'lodash/get';
 import { RecycleScroller } from 'vue-virtual-scroller'
-import sortBy from 'lodash/sortBy';
-import PropertyInlineEdit from '../customize/PropertyInlineEdit.vue';
+import itfCheckbox from '../checkbox/Checkbox.vue';
+import itfTextField from '../text-field/TextField.vue';
 import { INLINE_TYPES } from '../customize/constants';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
   name: 'itfTableBody',
   components: {
-    RecycleScroller,
-    PropertyInlineEdit
+    itfCheckbox,
+    itfTextField,
+    RecycleScroller
   }
 })
 class itfTableBody extends Vue {
   @Prop() columns;
   @Prop() rows;
+  @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
-  @Prop({ type: Number, default: 40 }) rowHeight;
 
   editTypes = {};
 
+  getValue(item, column) {
+    return get(item, column.property);
+  }
+
   get visibleAttributes() {
     return this.columns;
   }