arrmatura 5.2.0 → 6.3.1

package/commons/components/table.xml

@@ -1,140 +0,0 @@
-<component id="LoadingIndicator">
-  <div class="loading {large|then:loading-lg} {class}" />
-</component>
-
-<component id="EmptyData">
-  <div class="empty w100 m-0 {class}">
-    <div class="empty-icon">
-      <Icon type="{icon|or:people}" />
-    </div>
-    <p class="empty-title h5">{title}</p>
-    <p ui:if="{subtitle}" class="empty-subtitle">{subtitle}</p>
-    <div class="empty-action">
-      <ui:slot />
-    </div>
-  </div>
-</component>
-
-<component id="AsyncLoader">
-  <ui:fragment ui:if="isLoading">
-    <ui:then>
-      <EmptyData class="h100" title="{title}" subtitle="{error|then::@subtitle}" icon="{icon|or:download}">
-        <ui:fragment ui:if="error|not">
-          <ui:then>
-            <LoadingIndicator/>
-          </ui:then>
-          <ui:else>
-            <Btn mode="error" action="{onError}" title="Error: {error}"/>
-          </ui:else>
-        </ui:fragment>
-      </EmptyData>
-    </ui:then>
-    <ui:else>
-      <ui:slot />
-    </ui:else>
-  </ui:fragment>
-</component>
-
-<component id="LoadableItems">
-  <LoadingIndicator class="empty" ui:if="data|not">
-    <ui:else>
-      <h5 class="error text-error" ui:if="data.error">{data.error.message|or:@data.error}</h5>
-      <EmptyData title="{emptyCaption|or:Empty}" ui:if="data.length|not">
-        <ui:else>
-          <div style="{style}" ui:for="item of data">
-            <ui:tag tag="{itemType}" ui:props="{item}" item="{item}" context="{context}" action="{action}" />
-          </div>
-        </ui:else>
-      </EmptyData>
-    </ui:else>
-  </LoadingIndicator>
-</component>
-
-<component id="LoadableEntity">
-  <LoadingIndicator class="empty" ui:if="data|not">
-    <ui:else>
-      <h5 class="error text-error" ui:if="data.error">
-        <span>{data.error.message|or:@data.error}</span>
-        <ui:else>
-          <EmptyData title="{emptyCaption|or:Empty}" ui:if="data.id|not">
-            <ui:else>
-              <ui:tag tag="{type}" data="{data}" context="{context}" action="{action}" />
-            </ui:else>
-          </EmptyData>
-        </ui:else>
-      </h5>
-    </ui:else>
-  </LoadingIndicator>
-</component>
-
-<component id="Cell">
-  <span class="" style="padding-left: 0px">{value}</span>
-</component>
-
-<component id="EnumCell">
-  <span class="" style="padding-left: 0px">:map.{typeSpec}.{value}</span>
-</component>
-
-<component id="DateCell">
-  <span class="" style="padding-left: 0px">{value|date}</span>
-</component>
-
-<component id="Table">
-  <table style="position: relative">
-    <thead class="table-thead">
-      <tr>
-        <th class="col-index" style="position: sticky; top: -1"></th>
-        <th class="col-index" style="position: sticky; top: -1" ui:for="item of columns">
-          <span>{item.name}</span>
-          <div class="table-column-sorter" ui:if="item.sortable">
-            <span class="table-column-sorter-up off" title="↑" data-id="-{item.id}" click="{doSort}">
-              <i class="anticon anticon-caret-up"></i
-            >            </span>
-            <span class="table-column-sorter-down off" title="↓" data-id="{item.id}" click="{doSort}">
-              <i class="anticon anticon-caret-down"></i
-            >            </span>
-          </div>
-        </th>
-      </tr>
-    </thead>
-    <TableRow ui:for="item of data" data="{item}" selected="{item.selected}" columns="{columns}" kind="{kind}" />
-  </table>
-</component>
-
-<component id="TableRow">
-  <tbody class="table-tbody">
-    <tr class="table-row table-row-level-0" style="position: sticky">
-      <td class="col-index" data-id="{data.id}" click="{doItem}">
-        <div ui:if="{expandable}" role="button" class="table-row-expand-icon table-row-expanded" aria-label="Collapse row" data-selected="false" click="->">
-          <ui:else>
-            <div role="button" class="table-row-expand-icon table-row-collapsed" aria-label="Expand row" data-selected="true" click="->"></div>
-          </ui:else>
-        </div>
-      </td>
-      <td class="col-index" ui:for="col of columns">
-        <ui:tag tag="{col.type|capitalize}Cell" ui:props="{col}" value="{col.id|propObjectValueByKey}" data="{data}" />
-      </td>
-    </tr>
-    <tr ui:if="{expanded}" class="table-expanded-row table-expanded-row-level-1">
-      <td class=""></td>
-      <td class="" colspan="100">
-        <ui:tag tag="{kind|capitalize}RowInsider" data="{data}" />
-      </td>
-    </tr>
-  </tbody>
-</component>
-
-<component id="Chips">
-  <div class="chips mx-0 py-2 px-2 {class}">
-    <div class="ui mini labels">
-      <span class="chip {tag.selected|then:bg-success:bg-secondary} {tag.nonSelectable|then::c-hand} {tag.count|then:badge}" data-badge="{tag.count}" style="padding:1.2rem" data-id="{tag.id}" click="{tag.nonSelectable|then:undefined:@click}" ui:for="tag of data">
-        <span>
-          <b>{tag.name}</b>
-        </span>
-      </span>
-      <span ui:if="data|find:true:selected" class="label py-1 px-2 s-circle c-hand" click="{click|assignFirstArgKeyValue:id:}">
-        <Icon type="cross"/>
-      </span>
-    </div>
-  </div>
-</component>

package/commons/components/toasts.xml

@@ -1,18 +0,0 @@
-<component id="ToastList">
-  <div style="position:absolute;top:2.5rem;right:1rem;left:1rem;z-index:500;{style}">
-    <div style="max-width: 600px;margin: auto;">
-      <Toast ui:props={toast} ui:for="toast of <-toasters.items"/>
-    </div>
-  </div>
-</component>
-
-<component id="Toast">
-  <div class="toast mt-1 toast-{mode|or:@mode|or:primary}">
-    <button class="btn btn-clear float-right" click="{close}"></button>
-    <p>
-      <b ui:if="counter" class="mr-1">[x{counter}]</b>
-      <span> {message}</span>
-      <a class="mx-1" href="{link}" ui:if="link">link</a>
-    </p>
-  </div>
-</component>

package/commons/components/viewport.xml

@@ -1,48 +0,0 @@
-<component id="ViewPort">
-  <ui:fragment ui:if="slot(aside)">
-    <Sidebar caption="{caption}" size="{sidebarWidth}">
-      <Sidebar:aside>
-        <ui:slot id="aside" />
-      </Sidebar:aside>
-      <main>
-        <ui:slot />
-      </main>
-    </Sidebar>
-    <ui:else>
-      <main>
-        <ui:slot />
-      </main>
-    </ui:else>
-  </ui:fragment>
-</component>
-
-<component id="Sidebar">
-  <div class="off-canvas off-canvas-sidebar-show">
-    <a class="off-canvas-toggle btn btn-primary btn-action show-lg" href="#sidebar">
-      <Icon type="menu" />
-    </a>
-    <div id="sidebar" class="off-canvas-sidebar">
-      <Aside caption="{caption}">
-        <ui:slot id="aside" />
-      </Aside>
-    </div>
-    <a class="off-canvas-overlay" href="#"></a>
-    <div class="off-canvas-content">
-      <ui:slot />
-    </div>
-  </div>
-</component>
-
-<component id="Aside">
-  <aside style="display:flex; flex-direction: column; height: 100vh; width:{size|or:300}px">
-    <div class="text-center" ui:if="{caption}">
-      <a href="#/main">
-        <h5 class="p-2">{caption}</h5>
-      </a>
-    </div>
-    <div class="m-2" style="flex: 1; overflow-y: auto">
-      <ui:slot />
-    </div>
-  </aside>
-</component>
-

package/commons/forms/FieldItem.xml

@@ -1,20 +0,0 @@
-<component id="FieldItem">
-  <div class="form-group {error|then:has-error} {class}">
-    <div class="col-4 col-sm-12">
-      <label class="form-label d-flex" for="input-example-1" ui:if="{caption}">
-        <div class="text-ellipsis" title="{caption}">{caption}</div>
-        <div ui:if="{required}" class="text-error text-tiny ml-1">✱</div>
-        <div class="border-1 text-secondary s-circle centroid mx-1 px-2" style="height:1.3rem;width:1.3rem;" data-value="{showHint|not}" click="->showHint|dot:value" ui:if="{hint}">
-          <span>?</span>
-        </div>
-      </label>
-    </div>
-    <div class="col-8 col-sm-12">
-      <ui:slot />
-    </div>
-    <div class="col-12">
-      <p class="form-input-hint mb-1" ui:if="{showHint}">{hint}</p>
-      <p class="form-input-hint mb-1" ui:if="{error}">{error}</p>
-    </div>
-  </div>
-</component>

package/commons/forms/FormController.ts

@@ -1,87 +0,0 @@
-import { arrayGroupBy } from '../../lib';
-import { strFormat, getPredicat } from '../../lib';
-import { Service } from '../services/Service';
-
-const getFieldsGroups = (fieldProps: Hash[], names?: StringHash): Obj[] => {
-  return Object.values(arrayGroupBy(fieldProps, 'group')).map((e) => ({
-    name: names?.[e.id] || e.id,
-    ...e,
-  }));
-};
-
-export class FormController extends Service {
-  data: { [k: string]: unknown } = {};
-  meta: any;
-  error: any;
-  change: any;
-  tabs?: StringHash;
-  groups?: StringHash;
-
-  setData(d: Data) {
-    const data = { ...d };
-    this.data = data;
-  }
-
-  get fieldsGroups(): Obj[] {
-    return getFieldsGroups(this.fieldProps, this.groups);
-  }
-
-  get tabsInfo() {
-    const tabs = Object.values(arrayGroupBy(this.fieldProps, ({ tab = 'tab' }) => tab)).map(({ id, items }) => ({
-      id,
-      name: this.tabs?.[id] || id,
-      items: getFieldsGroups(items, this.groups),
-    }));
-    return { enabled: tabs.length > 1, initialTab: tabs?.[0]?.id, tabs };
-  }
-
-  resolveEnum(typeSpec: string = '', data: Hash) {
-    if (typeSpec[0] === '[') {
-      return typeSpec
-        .slice(1, typeSpec.length - 1)
-        .split(',')
-        .map((s) => s.trim().split('='))
-        .map(([id, name = id]) => ({ id, name }));
-    }
-
-    if (!typeSpec.includes('.')) return this.res('enums.' + typeSpec) || [];
-
-    const [key, subid, subKey] = strFormat(typeSpec, data).split('.');
-    const enumItems = this.res('enums.' + key) || [];
-    if (subKey) {
-      return enumItems.find(({ id }) => id === subid)?.[subKey] || [];
-    }
-    return enumItems;
-  }
-
-  get fieldProps() {
-    return (
-      this.meta?.map?.((field: { [k: string]: string }) => {
-        const { id, visible, disabled = false, caption, name, typeSpec } = field;
-        const form = this;
-        const data = this.data;
-        const value = data[id];
-        return {
-          ...field,
-          error: (form.error && form.error.fields && form.error.fields[id]) || null,
-          get disabled(): boolean {
-            return getPredicat(disabled)(data);
-          },
-          get visible(): boolean {
-            return getPredicat(visible || 'true')(data);
-          },
-          get options(): Data[] | Data | null {
-            return form.resolveEnum(typeSpec, data);
-          },
-          value: value === undefined ? null : value,
-          caption: caption || name,
-          data,
-          onChange: ({ value, key }: { value: unknown; key?: string }) => {
-            this.data = { ...this.data, [key || id]: value };
-            this.change?.(this.data);
-          },
-        };
-      }) || []
-    );
-  }
-}

package/commons/forms/Item.ts

@@ -1,132 +0,0 @@
-import { arraySortBy } from '../../lib';
-
-export const analyzeDataByTags = (
-  data: Item[],
-  selection: Hash<boolean>,
-  initials = '',
-  tags: Tag[] = [],
-  labelsFields: string
-) => {
-  const sel = Object.entries(selection)
-    .filter(([_, val]) => val)
-    .map(([key]) => key);
-  const level = sel.length;
-  if (labelsFields) {
-    const lFields = labelsFields.split(',');
-    const fields = lFields.slice(0, level);
-    const actualData = !level ? data : data.filter((e) => !fields.find((field, index) => e[field] != sel[index]));
-    const tagsHash: Hash<Tag> = {};
-    if (level) {
-      tagsHash['*'] = { id: sel[level - 1], name: sel.join(' ➡ '), count: 0, selected: level > 0 };
-    }
-
-    actualData.forEach((e) => {
-      const id = String(e[lFields[level]] || '');
-      if (!id) return;
-      const tag = tagsHash[id] || (tagsHash[id] = { id, name: id, count: 0, selected: selection[id] });
-      if (!tag.selected) {
-        tag.count++;
-      }
-    });
-
-    tags.push(...Object.values(tagsHash));
-    // tags.sort((a, b) => (a.selected === b.selected ? (a.id > b.id ? 1 : -1) : !a.selected ? 1 : -1));
-    return actualData;
-  }
-  if (level || !initials) {
-    const actualData = data.filter((e) => sel.reduce((r, s) => r && e.getLabels().has(s), true));
-    const tagsHash: Hash<Tag> = {};
-    sel.forEach((id) => {
-      tagsHash[id] = { id, name: id, count: 0, selected: true };
-    });
-    actualData.forEach((e) => {
-      e.getLabels().forEach((id: string) => {
-        const tag =
-          tagsHash[id] || (tagsHash[id] = { id, name: id, count: 0, selected: selection[id], nonSelectable: true });
-        if (!tag.selected) {
-          tag.nonSelectable = false;
-          tag.count++;
-        }
-      });
-    });
-
-    tags.push(...Object.values(tagsHash));
-    tags.sort((a, b) => (a.selected === b.selected ? (a.id > b.id ? 1 : -1) : !a.selected ? 1 : -1));
-    return actualData;
-  } else {
-    tags.push(...initials.split(',').map((id) => ({ id, name: id, count: 0, selected: false })));
-    data.forEach((e: Item) => {
-      tags.forEach((tag) => {
-        if (e.getLabels().has(tag.id)) {
-          tag.count++;
-        }
-      });
-    });
-    return data;
-  }
-};
-
-export const getSuggestions = (data: Item[], kluq: string) => {
-  if (!kluq) return null;
-
-  const words: Hash = {};
-  data.forEach((e) =>
-    e.$searchData.replace(/[a-z0-9а-яёўі]{3,}/g, (w) => {
-      words[w] = 1;
-      return '';
-    })
-  );
-  const lokey = kluq.toLowerCase();
-  return arraySortBy(
-    Object.keys(words)
-      .filter((e) => e.startsWith(lokey))
-      .map((s) => ({ name: s, id: s })),
-    'name'
-  );
-};
-export const applyNavInfo = (data: Item[]) => {
-  let prev: Item | null = null;
-  return !data
-    ? null
-    : data.map((item: Item, index) => {
-        item.$navInfo = { prev, index, total: data.length };
-        if (prev?.$navInfo) {
-          prev.$navInfo.next = item;
-        }
-        prev = item;
-        return item;
-      });
-};
-
-export class Item implements Delta {
-  id?: string;
-  $row?: string;
-  $: Hash<any> = {};
-  $navInfo?: { index: number; total: number; prev?: Item | null; next?: Item };
-  [key: string]: unknown;
-
-  constructor({ $, ...opts }: Delta = {}) {
-    Object.assign(this, opts);
-  }
-  getLabels(): Set<string> {
-    const key = 'labels';
-    return (
-      this.$[key] ||
-      (this.$[key] = new Set(
-        String(this[key] || this.labels)
-          .split(',')
-          .filter(Boolean)
-      ))
-    );
-  }
-  get $searchData() {
-    if (!('searchData' in this.$)) {
-      this.$.searchData = String(this.searchData || this.name).toLowerCase();
-    }
-    return this.$.searchData;
-  }
-  get $dataset() {
-    const { $row, $navInfo, $, ...d } = this;
-    return d;
-  }
-}

package/commons/forms/ItemCollectionController.ts

@@ -1,113 +0,0 @@
-import { Service } from '../services/Service';
-import { analyzeDataByTags, getSuggestions, applyNavInfo, Item } from './Item';
-import { arraySortBy } from '../../lib';
-import { Storage } from '../services/Storage';
-
-export class ItemCollectionController extends Service {
-  selection: Hash<boolean> = {};
-  shownLimit = 40;
-  sortBy = 'title';
-  kluqPoshuku = '';
-  data?: Item[] | null;
-  inputKluqPoshuku = '';
-  newEntry: any;
-  entry: any;
-  initials = '';
-  tags: Tag[] = [];
-
-  local = new Storage('local');
-
-  get searchHistory(): string[] {
-    const str = this.local?.get('searchHistory');
-    return str ? str.split(',') : null;
-  }
-
-  get searchSuggestion() {
-    if (this.kluqPoshuku === this.inputKluqPoshuku) {
-      if (this.kluqPoshuku) return null;
-      return this.searchHistory?.map((s: string) => ({ name: s, id: s }));
-    }
-    return this.data ? getSuggestions(this.data, this.inputKluqPoshuku) : null;
-  }
-
-  set searchHistory(arr) {
-    this.local?.set('searchHistory', (arr || []).join(','));
-  }
-  addHistoryItem(value: string) {
-    if (value) {
-      this.searchHistory = [value, ...(this.searchHistory || []).filter((s) => s != value)].slice(0, 20);
-    }
-  }
-  setData(data: Hash[]) {
-    this.data = !data ? null : data.map((e) => new Item(e));
-  }
-
-  get sortedData() {
-    const data = this.data;
-    if (!data) return null;
-
-    const searchedData = !this.kluqPoshuku ? data : data.filter((e) => e.$searchData.startsWith(this.kluqPoshuku));
-    this.tags = [];
-    const actualData = analyzeDataByTags(searchedData, this.selection, this.initials, this.tags, this.labelsFields);
-    return applyNavInfo(arraySortBy(actualData, this.sortBy) as unknown as Item[]);
-  }
-
-  getInfo() {
-    const data = this.sortedData;
-    if (!data) {
-      return {};
-    }
-    return {
-      tags: this.tags,
-      data: this.sortedData?.slice(0, this.shownLimit),
-      counts: {
-        total: data.length,
-        actual: data.length,
-        hasMore: this.shownLimit < data.length,
-      },
-      search: {
-        kluq: this.kluqPoshuku,
-        value: this.inputKluqPoshuku,
-        suggestions: this.searchSuggestion,
-        input: this.createEmitter('this.inputKluq'),
-        enter: this.createEmitter('this.znajdzPoKluqu'),
-      },
-    };
-  }
-
-  // event handlers:
-
-  onTag({ id }: Tag, { selection }: this) {
-    return {
-      selection: !id
-        ? {}
-        : {
-            ...selection,
-            [id]: !selection[id],
-          },
-    };
-  }
-  onZnajdzPoKluqu({ value }: StringHash) {
-    this.addHistoryItem(value);
-
-    return {
-      inputKluqPoshuku: value || '',
-      kluqPoshuku: value || '',
-    };
-  }
-  onInputKluq({ value }: Delta) {
-    return {
-      inputKluqPoshuku: value || '',
-    };
-  }
-  onSortBy({ value }: Delta) {
-    return {
-      sortBy: value || '-title',
-    };
-  }
-  onShowMore({ size = 50 }, { shownLimit }: this) {
-    return {
-      shownLimit: shownLimit + size,
-    };
-  }
-}

package/commons/forms/ItemController.ts

@@ -1,91 +0,0 @@
-import { Service } from '../services/Service';
-import { Item } from './Item';
-import { getPredicat } from '../../lib';
-
-const CHANGES: Hash<Hash> = {};
-export class ItemController extends Service {
-  all?: Hash<Hash>;
-  itemId: string = '';
-  meta: any;
-  context: any;
-
-  get initialElement() {
-    return Array.isArray(this.all) ? this.all.find((e) => e.id == this.itemId) : this.all?.[this.itemId];
-  }
-  get initialData() {
-    const e = this.initialElement;
-    return !e?.id ? null : e.$dataset;
-  }
-
-  get actualData() {
-    const initial = this.initialData;
-    if (!initial) {
-      return null;
-    }
-    const data = { ...this.context, ...initial, ...CHANGES[this.itemId] };
-    this.meta?.map((field: { [k: string]: string }) => {
-      const { id, visible } = field;
-      const isVisible = !visible || getPredicat(visible)(data);
-      if (!isVisible && data[id]) {
-        data[id] = '';
-      }
-    });
-    return data;
-  }
-
-  get item() {
-    return new Item(this.actualData || {});
-  }
-
-  get itemNavInfo() {
-    return { prev: null, next: null, ...this.initialElement?.$navInfo };
-  }
-
-  get itemTitle() {
-    return this.initialElement?.title;
-  }
-
-  get touched() {
-    return !!CHANGES[this.itemId];
-  }
-
-  upsert(data?: Hash): Hash {
-    throw new Error('upsert not defined.' + data);
-  }
-
-  async submitData(data: Delta) {
-    if (!data) return null;
-
-    const { error, lastUpdatedItemId, ...rest } = await this.upsert(data);
-    console.log(error, rest);
-    if (error) {
-      const msg = (error as Error)?.message;
-      this.toast({ id: msg, mode: 'error', message: 'Error: ' + msg });
-      return null;
-    }
-    delete CHANGES[this.itemId];
-    this.toast({ message: 'Saved successfully.', timeout: 5000, link: '#/task?itemId=' + lastUpdatedItemId });
-    return {
-      counter: NaN,
-    };
-  }
-
-  // event handlers:
-  onChange = (delta: Hash) => {
-    CHANGES[this.itemId] = { ...CHANGES[this.itemId], ...delta };
-    return {
-      counter: NaN,
-    };
-  };
-
-  onSave() {
-    return this.submitData(this.actualData);
-  }
-
-  onDelete() {
-    const { id } = this.initialElement?.id;
-    if (!id) return null;
-
-    return this.submitData({ id, status: 'deleted' });
-  }
-}