@itfin/components 1.3.99 → 1.4.0

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/helpers/tree/cdbl.js

@@ -0,0 +1,32 @@
+import toFinite from 'lodash/toFinite'
+import isnum from './isnum.js'
+
+
+/**
+ * 數字或字串轉浮點數
+ * 若輸入非數字則回傳0
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/cdbl.test.js Github}
+ * @memberOf wsemi
+ * @param {Number|String} v 輸入數字或字串
+ * @returns {Number} 回傳數字
+ * @example
+ *
+ * console.log(cdbl('25'))
+ * // => 25
+ *
+ */
+function cdbl(v) {
+
+  //check
+  if (!isnum(v)) {
+    return 0
+  }
+
+  let r = toFinite(v)
+
+  return r
+}
+
+
+export default cdbl

package/src/helpers/tree/cint.js

@@ -0,0 +1,43 @@
+import round from 'lodash/round'
+import isnum from './isnum.js'
+import cdbl from './cdbl.js'
+
+
+/**
+ * 數字或字串四捨五入轉整數
+ * 若輸入非數字則回傳0
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/cint.test.js Github}
+ * @memberOf wsemi
+ * @param {Number|String} v 輸入數字或字串
+ * @returns {Integer} 回傳四捨五入後整數
+ * @example
+ *
+ * console.log(cint('1.5'))
+ * // => 2
+ *
+ * console.log(cint('-1.5'))
+ * // => -1
+ *
+ */
+function cint(v) {
+
+  //check
+  if (!isnum(v)) {
+    return 0
+  }
+
+  v = cdbl(v)
+
+  let r = round(v)
+
+  //check -0
+  if (String(r) === '0') {
+    return 0
+  }
+
+  return r
+}
+
+
+export default cint