@itfin/components 1.3.96 → 2.0.1

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>`,
+  }))

package/src/helpers/formatters.js

@@ -36,6 +36,19 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
   return isNegative * seconds;
 }
 
+export function formatFinanceMoney (val, symbol = '', digits = 2, showNegative = true) {
+  if (isNaN(val) || val === null || val === undefined) {
+    return '—';
+  }
+  if (typeof symbol !== 'string' && symbol !== null && typeof symbol !== 'undefined') {
+    if (symbol.IsCryptoCurrency && digits === 2 && Math.abs(val) < 0.01) {
+      digits = 6;
+    }
+    symbol = symbol.Symbol; // in case of passing object of currency
+  }
+  const isNegative = showNegative && (val < 0);
+  return (isNegative ? '(' : '') + formatMoney(Math.abs(val), symbol, digits) + (isNegative ? ')' : '');
+}
 
 // https://stptrans.com/wp-content/uploads/2020/02/Working-with-currency-number-and-date-formats.pdf
 export function formatMoney (val, symbol = '', digits = null) {
@@ -43,7 +56,7 @@ export function formatMoney (val, symbol = '', digits = null) {
   const thousandSeparator = ITFSettings.moneyThousandSeparator || ',';
   const decimalSeparator = ITFSettings.moneyDecimalSeparator || '.';
 
-  if (Number.isNaN(val) || val === null) {
+  if (Number.isNaN(val) || val === null || val === undefined) {
     return '—';
   }
   let symbolStr = symbol?.currencySymbol ?? symbol?.symbol ?? symbol?.Symbol ?? '';

package/src/locales/en.js

@@ -103,6 +103,8 @@ module.exports = {
     sortAscending: 'Sort ascending',
     sortDescending: 'Sort descending',
     groupBy: 'Group by',
+    sorting: 'Sorting',
+    actions: 'Actions',
     hideColumn: 'Hide in view',
     freezeColumn: 'Freeze up to column',
     unfreezeColumn: 'Unfreeze column',
@@ -120,6 +122,11 @@ module.exports = {
     calculateCountNotEmpty: 'Count not empty',
     calculatePercentEmpty: 'Percent empty',
     calculatePercentNotEmpty: 'Percent not empty',
+    filter: 'Filter',
+    moveRight: 'Move right',
+    moveLeft: 'Move left',
+    columns: 'Columns',
+    resetTableSettings: 'Reset table settings',
   },
   pagination: {
     itemsPerPage: 'Items per page',
@@ -135,5 +142,11 @@ module.exports = {
     noResults: 'No results',
     showMore: 'show all ({count})',
     hideMore: 'hide',
+    exact: 'Exact',
+    range: 'Range',
+    filterBy: 'Filter',
+    from: 'From',
+    to: 'To',
+    value: 'Value',
   }
 };

package/src/locales/uk.js

@@ -108,6 +108,8 @@ module.exports = {
     sortAscending: 'Сортувати за зростанням',
     sortDescending: 'Сортувати за спаданням',
     groupBy: 'Групувати',
+    sorting: 'Сортування',
+    actions: 'Дії',
     hideColumn: 'Приховати колонку',
     freezeColumn: 'Закріпити колонку',
     unfreezeColumn: 'Відкріпити колонку',
@@ -125,6 +127,11 @@ module.exports = {
     calculateCountNotEmpty: 'Кількість не порожніх',
     calculatePercentEmpty: 'Відсоток порожніх',
     calculatePercentNotEmpty: 'Відсоток не порожніх',
+    filter: 'Фільтрувати',
+    moveRight: 'Посунути вправо',
+    moveLeft: 'Посунути вліво',
+    columns: 'Колонки',
+    resetTableSettings: 'Скинути налаштування таблиці',
   },
   filter: {
     search: 'Пошук',
@@ -135,5 +142,9 @@ module.exports = {
     noResults: 'Немає результатів',
     showMore: 'показати всі ({count})',
     hideMore: 'сховати',
+    filterBy: 'Фільтрувати за',
+    from: 'Від',
+    to: 'До',
+    value: 'Значення',
   }
 };