@itfin/components 1.3.95 → 2.0.1

package/src/components/view/View.vue

@@ -0,0 +1,119 @@
+<template>
+
+  <div v-loading="loading" class="flex-grow-1 w-100 d-flex flex-column">
+    {{filter}}
+    <itf-filter-panel
+      search-placeholder="Search by text"
+      search
+      class="py-2 px-3"
+      :static-filters="filters"
+      v-model="filter"
+      @input="$emit('load')"
+    >
+      <template #after-filter-btn>
+        <itf-dropdown v-if="$refs.table" 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" />
+              {{property.title.en_US}}
+            </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 "@/components/table/TableBody.vue";
+import itfIcon from "@/components/icon/Icon.vue";
+import itfDropdown from "@/components/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, required: true }) items;
+  @Prop({ type: Array }) filters;
+  @Prop({ type: Object, required: true }) schema;
+  @Prop({ default: 20 }) size;
+  @Prop({ default: 100 }) total;
+  @Prop({ default: 1 }) page;
+
+  filter = {};
+
+  get countPages() {
+    return Math.ceil(this.total / this.size);
+  }
+}
+</script>

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

@@ -0,0 +1,588 @@
+import { storiesOf } from '@storybook/vue';
+import itfApp from '../app/App.vue';
+import itfView from './View.vue';
+import itfIcon from '../icon/Icon.vue';
+
+storiesOf('Common', module)
+  .add('View', () => ({
+    components: {
+      itfApp,
+      itfIcon,
+      itfView
+    },
+    data() {
+      return {
+        selectedIds: [],
+        sorting: 'Description',
+        list: Array.from({length: 20}).map((_, i) => ({
+          Id: i,
+          text: `Рахунок ✅`,
+          Name: `Item #${i}`
+        })).concat(Array.from({length: 20}).map((_, i) => ({
+          Id: i,
+          text: `Рахунок ❌`,
+          Name: `Item #${i}`
+        }))),
+        columns2: [
+          {
+            text: 'Рахунок',
+            name: 'Account',
+            width: 200,
+            min: 250,
+            max: 250
+          },
+          {
+            text: 'Рахунок',
+            name: 'Account',
+            width: 200,
+            min: 250,
+            max: 250
+          }
+        ],
+        page: 1,
+        list2: [
+          {
+            Id: 1,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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
+          },
+          {
+            Id: 2,
+            summary: true,
+            Description: 'Total asd asd dad ad ada dadad a',
+            EmployeeId: 1,
+            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": true,
+              "filtrable": true,
+              icon: 'money',
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "EmployeeId",
+              "title": { "en_US": "Employee full name", "uk_UA": "Імʼя" },
+              prefix: 'USD',
+              "type": "employee",
+              "copy": true,
+              "editable": true,
+              "sortable": false,
+              icon: 'card',
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "Rate",
+              "title": { "en_US": "Rate", "uk_UA": "Прізвище" },
+              "type": "money",
+              "editable": true,
+              "sortable": false,
+              icon: 'calendar',
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "Time",
+              "title": { "en_US": "Time", "uk_UA": "Прізвище" },
+              "type": "time",
+              "editable": true,
+              "sortable": false,
+              icon: 'person',
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            },
+            {
+              "property": "Amount",
+              "title": { "en_US": "Amount", "uk_UA": "Прізвище" },
+              "type": "money",
+              icon: 'text',
+              "sortable": false,
+              width: 200,
+              minWidth: 100,
+              maxWidth: 300
+            }
+          ]
+        },
+        filters: [
+          {
+            "name": "period",
+            "type": "period",
+            icon: 'calendar',
+            "options": {
+              "defaultValue": {
+                "label": "Весь час",
+                "value": null
+              }
+            }
+          },
+          {
+            "name": "amount",
+            "type": "amount",
+            icon: 'money',
+            "options": {
+              "min": 0.05,
+              "max": 116907,
+              "histogram": [
+                164,
+                10,
+                4,
+                4,
+                2,
+                3,
+                1,
+                4,
+                1,
+                0,
+                1,
+                1,
+                0,
+                0,
+                0,
+                2,
+                1,
+                0,
+                0,
+                0,
+                1,
+                1
+              ],
+              "defaultValue": {
+                "value": [
+                  0.05,
+                  116907
+                ],
+                "label": "Будь-яка сума"
+              }
+            }
+          },
+          {
+            "name": "type",
+            "type": "list",
+            icon: 'arrows',
+            "options": {
+              "items": [
+                {
+                  "value": "income",
+                  "label": "Тільки доходи",
+                  "text": "Дохідні"
+                },
+                {
+                  "value": "outcome",
+                  "label": "Тільки витрати",
+                  "text": "Витратні"
+                },
+                {
+                  "value": "transfer",
+                  "label": "Перекази",
+                  "text": "Перекази"
+                },
+                {
+                  "value": "all",
+                  "label": "Всі операції",
+                  "text": "Всі"
+                }
+              ],
+              "defaultValue": {
+                "value": "all",
+                "label": "Всі операції",
+                "text": "Всі"
+              }
+            }
+          },
+          {
+            "name": "accountId",
+            "type": "facets-list",
+            "options": {
+              "multiple": true,
+              "title": "Рахунки",
+              "items": [
+                {
+                  "value": "wk571",
+                  "label": "Cash test",
+                  "count": "8"
+                },
+                {
+                  "value": "wrDM1",
+                  "label": "Ceska",
+                  "count": "31"
+                },
+                {
+                  "value": "e8bEZ",
+                  "label": "test Account",
+                  "count": "1"
+                },
+                {
+                  "value": "eYvmw",
+                  "label": "Test2",
+                  "count": "1"
+                },
+                {
+                  "value": "wD54Z",
+                  "label": "Wise",
+                  "count": "108"
+                },
+                {
+                  "value": "ezJXe",
+                  "label": "Ukrsib UAH",
+                  "count": "13"
+                },
+                {
+                  "value": "eqxL1",
+                  "label": "Raiffeisen",
+                  "count": "10"
+                },
+                {
+                  "value": "12gbe",
+                  "label": "Virtual wallet for refill",
+                  "count": "3"
+                },
+                {
+                  "value": "wOPxZ",
+                  "label": "Upwork",
+                  "count": "21"
+                },
+                {
+                  "value": "wj58e",
+                  "label": "Польський банк",
+                  "count": "3"
+                },
+                {
+                  "value": "e47n1",
+                  "label": "czech account test",
+                  "count": "1"
+                }
+              ],
+              "total": 200,
+              "defaultValue": {
+                "label": "Усі рахунки",
+                "value": []
+              }
+            }
+          },
+          {
+            "name": "businessUnitId",
+            "type": "facets-list",
+            "options": {
+              "multiple": true,
+              "title": "Бізнес юніти",
+              "items": [
+                {
+                  "value": "null",
+                  "label": "No business unit",
+                  "count": "39"
+                },
+                {
+                  "value": "18edR",
+                  "label": "BU Main",
+                  "count": "161"
+                }
+              ],
+              "total": 200,
+              "defaultValue": {
+                "label": "Усі бізнес юніти",
+                "value": []
+              }
+            }
+          }
+        ]
+      }
+    },
+    methods: {
+      onAdd(title) {
+        this.list2.push({ Id: Math.random() });
+      }
+    },
+    template: `<div>
+
+      <h3>Example</h3>
+
+      <itf-app>
+      <itf-view
+        style="height: 500px;"
+        add-new-rows
+        striped
+        @new="onAdd"
+        state-name="test"
+        :page.sync="page"
+        :schema="schema"
+        :filters="filters"
+        :items="list2"
+        v-model="selectedIds"
+        show-summary
+        id-property="Id"
+        :sorting.sync="sorting"
+        column-sorting column-resizing show-add-column show-grouping @add-column="onAdd">
+        <template #pagination-center>
+          <div class="text-muted small d-flex align-items-center">
+            <itf-icon name="arrow-up" new />
+            123
+          </div>
+        </template>
+        <template #format.employee="{ item }">
+          {{item.EmployeeId}}
+        </template>
+        <template #edit.employee="{ item }">
+          <itf-select
+            class="w-100"
+            v-model="item.EmployeeId"
+            :reduce="item => item.Id"
+            :get-option-label="item => item.Name"
+            :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
+        </template>
+      </itf-view>
+      </itf-app>
+
+    </div>`,
+  }))