@itfin/components 1.3.96 → 2.0.2

package/src/components/view/View.vue

@@ -0,0 +1,154 @@
+<template>
+
+  <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
+    <itf-filter-panel
+      search-placeholder="Search by text"
+      search
+      class="py-2 px-3"
+      :endpoint="filtersEndpoint"
+      v-model="filter"
+      @input="loadData"
+    >
+      <template #after-filter-btn>
+        <itf-dropdown v-if="$refs.table && schema" shadow :button-options="{ default: true, icon: true }" autoclose="outside">
+          <template #button>
+            <itf-icon new name="table-view" />
+          </template>
+          <div class="dropdown-header">
+            {{ $t('components.table.columns') }}
+          </div>
+          <a v-for="(property, n) of schema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
+            <div class="d-flex align-items-center gap-1">
+              <itf-icon v-if="property.icon" :size="24" new :name="property.icon" />
+              {{getTitle(property.title)}}
+            </div>
+
+            <itf-icon v-if="$refs.table.getColumnVisibility(property.property)" new :size="24" name="eye-open" />
+            <itf-icon v-else new name="eye-close" />
+          </a>
+          <div class="dropdown-header">
+            {{ $t('components.table.actions') }}
+          </div>
+          <a href="" @click.stop.prevent="$refs.table.resetSettings()" class="dropdown-item justify-content-between d-flex gap-3">
+            <div class="d-flex align-items-center gap-1">
+              <itf-icon new :size="24" name="download" />
+              {{ $t('components.table.resetTableSettings') }}
+            </div>
+          </a>
+        </itf-dropdown>
+      </template>
+    </itf-filter-panel>
+
+    <div class="flex-grow-1 px-3 d-flex flex-column">
+      <div class="position-relative flex-grow-1">
+        <itf-table
+          ref="table"
+          style="--shadow-area-width: 0px;"
+          absolute
+          striped
+          column-sorting
+          column-resizing
+          :rows="items"
+          :schema="schema"
+        >
+          <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>
+      </div>
+    </div>
+
+    <itf-pagination
+      class="my-2 px-3"
+      show-size
+      :size="size"
+      :items="items"
+      :pages="countPages"
+      :value="page"
+      @input="$emit('update:page', $event)"
+    >
+      <template #center>
+        <slot name="pagination-center" />
+      </template>
+    </itf-pagination>
+  </div>
+
+</template>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import loading from '../../directives/loading';
+import itfTable from '../table/Table2.vue';
+import itfFilterPanel from '../filter/FilterPanel.vue';
+import itfPagination from '../pagination/Pagination2.vue';
+import itfTableBody from "../table/TableBody.vue";
+import itfIcon from "../icon/Icon.vue";
+import itfDropdown from "../dropdown/Dropdown.vue";
+
+export default @Component({
+  name: 'itfView',
+  components: {
+    itfDropdown, itfIcon,
+    itfPagination,
+    itfFilterPanel,
+    itfTableBody,
+    itfTable
+  },
+  directives: {
+    loading
+  }
+})
+class itfView extends Vue {
+  @Prop({ type: Boolean }) loading;
+  @Prop({ type: Array }) filters;
+  @Prop({ type: Object, required: true }) schema;
+  @Prop({ default: 20 }) size;
+  @Prop({ default: 100 }) total;
+  @Prop({ default: 1 }) page;
+  @Prop(String) sorting;
+  @Prop(String) endpoint;
+  @Prop(String) filtersEndpoint;
+  @Prop(String) itemsKey;
+
+  items = [];
+  filter = {};
+  loadingData = false;
+
+  mounted() {
+  }
+
+  async loadData() {
+    if (!this.endpoint) {
+      return;
+    }
+    this.$emit('load', this.filter);
+    this.loadingData = true;
+    await this.$try(async () => {
+      const res = await this.$axios.$get(this.endpoint, {
+        params: {
+          ...this.filter,
+          page: this.page,
+          size: this.size,
+          sorting: this.sorting
+        }
+      });
+      this.items = res[this.itemsKey];
+    });
+    this.loadingData = false;
+    this.$emit('loaded', this.filter);
+  }
+
+  getTitle(title) {
+    if (typeof title === 'string') {
+      return title;
+    }
+    return title[this.locale] || title['en_US'];
+  }
+
+  get countPages() {
+    return Math.ceil(this.total / this.size);
+  }
+}
+</script>