arrmatura 4.2.2 → 5.0.2

package/commons/components/table.xml

@@ -0,0 +1,120 @@
+<component id="LoadingIndicator">
+  <div class="loading {large|then:loading-lg} {class}" />
+</component>
+
+<component id="EmptyData">
+  <div class="empty w100 {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="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="py-2" style="z-index: 2;{style}">
+    <div class="ui mini labels">
+      <span class="chip c-hand {tag.selected|then:bg-success:bg-secondary} {tag.count|then:badge}" data-badge="{tag.count}" style="padding:1rem" data-id="{tag.id}" click="{click}" ui:for="tag of data">
+        <span>
+          <span>{tag.name}</span>
+        </span>
+      </span>
+      <span ui:if="data|findByKey:selected:true|truthy" 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

@@ -0,0 +1,13 @@
+<component id="ToastList">
+  <div style="position:absolute;top:1.5rem;right:1rem;left:1rem;z-index:3;{style}">
+    <Toast ui:props={toast} ui:for="toast of <-toasters.items"/>
+  </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>{message}</p>
+  </div>
+</component>
+

package/commons/components/viewport.xml

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,73 @@
+import { arrayGroupBy } from 'arrayGroupBy';
+import { getPredicat } from 'predicat';
+import { strFormat } from '../../lib';
+import { Service } from '../services/Service';
+
+export class FormController extends Service {
+  data: { [k: string]: unknown } = {};
+  meta: any;
+  error: any;
+  change: any;
+
+  setData(d: Data) {
+    const data = { ...d };
+    this.data = data;
+  }
+
+  get fieldsGroups(): Obj[] {
+    return Object.values(arrayGroupBy(this.fieldProps, 'group'));
+  }
+
+  get tabsInfo() {
+    const tabs = Object.values(arrayGroupBy(this.fieldProps, ({ tab = 'tab' }) => tab)).map(({ id, items }) => ({
+      id,
+      name: id,
+      items: Object.values(arrayGroupBy(items, 'group')),
+    }));
+    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 }));
+    }
+    const [key, subid, subKey] = strFormat(typeSpec, data).split('.');
+    if (subKey) {
+      return (this.res('enums.' + key) || []).find(({ id }) => id === subid)?.[subKey] || [];
+    }
+    return this.res('enums.' + key) || [];
+  }
+
+  get fieldProps() {
+    return this.meta?.map((field: { [k: string]: string }) => {
+      const { id, visible, disabled = false, caption, name, type, 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

@@ -0,0 +1,68 @@
+import { arraySortBy } from 'arraySortBy';
+
+export const analyzeDataByTags = (data: Item[], selection: Hash<boolean>, initials = '') => {
+  const sel = Object.entries(selection)
+    .filter(([_, val]) => val)
+    .map(([key]) => key);
+
+  if (sel.length || !initials) {
+    const actualData = data.filter((e) => sel.reduce((r, s) => r && e.$tags.has(s), true));
+    const tagsHash = actualData.reduce((r, e) => {
+      e.$tags.forEach((id: string) => {
+        const tag = r[id] || (r[id] = { id, name: id, count: 0, selected: selection[id] });
+        if (!tag.selected) {
+          tag.count++;
+        }
+      });
+      return r;
+    }, {});
+    return { actualData, tags: Object.values(tagsHash) };
+  } else {
+    const tags = initials.split(',').map((id) => ({ id, name: id, count: 0, selected: false }));
+    data.forEach((e: Item) => {
+      tags.forEach((tag) => {
+        if (e.$tags.has(tag.id)) {
+          tag.count++;
+        }
+      });
+    });
+    return { actualData: data, tags };
+  }
+};
+
+export const getSuggestions = (data: Item[], kluq: string) => {
+  if (!kluq) return null;
+
+  const words = {};
+  data.forEach((e) =>
+    e.$searchData.replace(/\w{3,}/g, (w) => {
+      words[w] = 1;
+      return '';
+    })
+  );
+  return arraySortBy(
+    Object.keys(words)
+      .filter((e) => e.includes(kluq))
+      .map((s) => ({ name: s, id: s })),
+    'name'
+  );
+};
+
+export class Item {
+  constructor(opts = {}, opts2 = {}) {
+    Object.assign(this, opts, opts2);
+  }
+  get ts() {
+    return this.$ts || (this.$ts = this.modified_at || this.created_at || -1);
+  }
+  set ts(_) {}
+  get $tags() {
+    return this.$$tags || (this.$$tags = new Set((this.status + ',' + this.type || '').split(',').filter(Boolean)));
+  }
+  get title() {
+    return this.$title || (this.$title = this.name || this.subject || this.topic || this.id);
+  }
+  get $searchData() {
+    return this.$$searchData || (this.$$searchData = (this.subject + ' ' + this.notes).toLowerCase());
+  }
+}

package/commons/forms/ItemCollection.ts

@@ -0,0 +1,152 @@
+import { Service } from '../services/Service';
+import { analyzeDataByTags, getSuggestions, Item } from './Item';
+import { arraySortBy } from 'arraySortBy';
+
+export class ItemCollection extends Service {
+  selection: Hash = {};
+  shownLimit = 50;
+  sortBy = '-ts';
+  kluqPoshuku = '';
+  data?: Item[];
+  inputKluqPoshuku: any;
+  newEntry: any;
+  entry: any;
+  initials = '';
+
+  setData(data: Hash[]) {
+    this.data = !data ? [] : data.filter((e) => e.status !== 'deleted').map((e) => new Item(e));
+  }
+
+  getInfo() {
+    if (!this.data) {
+      return {};
+    }
+    const searchedData = !this.kluqPoshuku
+      ? this.data
+      : this.data.filter((e) => e.$searchData.includes(this.kluqPoshuku));
+    const { actualData, tags } = analyzeDataByTags(searchedData, this.selection, this.initials);
+    const sortedData = arraySortBy(actualData, this.sortBy);
+    return {
+      tags: tags.sort((a, b) => (a.selected === b.selected ? (a.id > b.id ? 1 : -1) : !a.selected ? 1 : -1)),
+      data: sortedData.slice(0, this.shownLimit),
+      openEntry: ({ id }) =>
+        this.emit(
+          'this.openEntry',
+          this.data?.find((e) => e.id === id)
+        ),
+      counts: {
+        total: this.data.length,
+        actual: actualData.length,
+        hasMore: this.shownLimit < actualData.length,
+      },
+      search: {
+        kluq: this.kluqPoshuku,
+        value: this.inputKluqPoshuku,
+        suggestions:
+          this.kluqPoshuku === this.inputKluqPoshuku ? null : getSuggestions(this.data, this.inputKluqPoshuku),
+        input: (data) => this.emit('this.inputKluq', data),
+        enter: (data) => this.emit('this.znajdzPoKluqu', data),
+      },
+    };
+  }
+
+  onTag({ id }, { selection }: this) {
+    return {
+      selection: !id
+        ? {}
+        : {
+            ...selection,
+            [id]: !selection[id],
+          },
+    };
+  }
+
+  onZnajdzPoKluqu({ value }) {
+    return {
+      inputKluqPoshuku: value || '',
+      kluqPoshuku: value || '',
+    };
+  }
+  onInputKluq({ value }) {
+    return {
+      inputKluqPoshuku: value || '',
+    };
+  }
+  onSortBy({ value }) {
+    return {
+      sortBy: value || '-ts',
+    };
+  }
+  onShowMore({ size = 50 }, { shownLimit = 50 }) {
+    return {
+      shownLimit: shownLimit + size,
+    };
+  }
+  /**
+   * New Entry
+   */
+
+  onOpenAddNew(data) {
+    return {
+      newEntry: {
+        ...data,
+        ...this.newEntry,
+        cancel: () => this.emit('this.cancelAddNew'),
+        submit: (data) => this.emit('this.saveNew', data),
+        open: true,
+      },
+    };
+  }
+
+  onCancelAddNew() {
+    return {
+      newEntry: { ...this.newEntry, open: false },
+    };
+  }
+
+  async onSaveNew(data) {
+    delete data.id;
+    await this.upsert(data);
+    return {
+      newEntry: { ...this.newEntry, data, open: false },
+    };
+  }
+  upsert(data: any) {
+    throw new Error('Method not implemented.');
+  }
+  /**
+   * Entry
+   */
+
+  onOpenEntry(data) {
+    return {
+      entry: {
+        id: data.id,
+        data: Object.entries(data).reduce((r, [k, v]) => {
+          if (k[0] !== '$') {
+            r[k] = v;
+          }
+          return r;
+        }, {}),
+        ...this.entry,
+        cancel: () => this.emit('this.cancelEntry'),
+        submit: (data) => this.emit('this.saveEntry', data),
+        delete: () => this.emit('this.deleteEntry', { id: data.id }),
+        open: true,
+      },
+    };
+  }
+
+  onCancelEntry() {
+    return { entry: { open: false } };
+  }
+
+  async onSaveEntry(data) {
+    await this.upsert(data);
+    return { entry: { open: false } };
+  }
+  async onDeleteEntry(data) {
+    await this.upsert({ ...data, status: 'deleted' });
+    return { entry: { open: false } };
+  }
+}

package/commons/forms/ItemController.ts

@@ -0,0 +1,62 @@
+import { Service } from '../services/Service';
+import { Item } from './Item';
+import { getPredicat } from 'predicat';
+
+export class ItemController extends Service {
+  all?: Hash<Hash>;
+  delta?: Hash;
+  itemId: string = '';
+  meta: any;
+  context: any;
+
+  get initialData() {
+    const initial = this.all?.[this.itemId];
+    if (!initial?.id) {
+      return null;
+    }
+    const { $row, ...d } = initial;
+    return d;
+  }
+
+  get actualData() {
+    const initial = this.initialData;
+    if (!initial) {
+      return null;
+    }
+    const data = { ...this.context, ...initial, ...this.delta };
+    this.meta?.map((field: { [k: string]: string }) => {
+      const { id, visible } = field;
+      const isVisible = getPredicat(visible || 'true')(data);
+      if (!isVisible && data[id]) {
+        data[id] = '';
+      }
+    });
+    return data;
+  }
+
+  get item() {
+    return new Item(this.actualData || {});
+  }
+
+  upsert(data?: Hash) {
+    throw new Error('upsert not defined.' + data);
+  }
+
+  onReset = () => ({ delta: {} });
+
+  onChange = (delta: Hash) => ({ delta: { ...this.delta, ...delta } });
+
+  onSave() {
+    const data = this.actualData;
+    if (data) {
+      this.upsert(data);
+    }
+  }
+
+  onDelete() {
+    const id = this.initialData?.id;
+    if (id) {
+      this.upsert({ id, status: 'deleted' });
+    }
+  }
+}

package/commons/forms/MetadataService.ts

@@ -0,0 +1,45 @@
+import { JsonpService } from '../services/JsonpService';
+import { LocalStorage } from '../services/LocalStorage';
+import { Service } from '../services/Service';
+
+export class MetadataService extends Service {
+  local = new LocalStorage('local');
+  url: string = '';
+  remote = new JsonpService();
+  version: any;
+  resources = {};
+  meta = { fields: [] };
+  kind: string = '';
+
+  init() {
+    return this.syncAll();
+  }
+
+  syncAll() {
+    const now = Date.now();
+    const skey = '$meta_' + (this.kind || encodeURIComponent(this.url));
+    const { version, ...meta } = this.local.get(skey) || {};
+    if (this.version && version >= this.version) {
+      Object.assign(this.resources, meta, { strings: { ...this.resources.strings, ...meta.strings } });
+      return { ready: true, meta };
+    }
+    return {
+      ready: false,
+      '*': fetch(this.url, { redirect: 'follow' })
+        .then((res) => res.json())
+        .then(
+          (meta) => {
+            this.log('metadata ', now, meta);
+            // this.toast('metadata loaded');
+            Object.assign(this.resources, meta, { strings: { ...this.resources.strings, ...meta.strings } });
+            this.local.set(skey, meta);
+            return { ready: true, meta };
+          },
+          (err) => {
+            this.toast('error: metadata ' + JSON.stringify(err?.message || err || 'unknown'));
+            return { ready: true, meta: {} };
+          }
+        ),
+    };
+  }
+}

package/commons/forms/MultiEnumField.xml

@@ -0,0 +1,44 @@
+<component id="MultiEnumAppender">
+  <div class="form-autocomplete" ui:if="options">
+    <div class="has-icon-right" click="{toggle}">
+      <div class="form-input text-gray">{placeholder}</div>
+      <i class="form-icon icon icon-{opened|then:arrow-up:plus} c-hand"></i>
+    </div>
+    <Modal open="{opened}" mode="sm" close="{toggle}">
+      <Modal:header>
+        <h6>{caption}</h6>
+      </Modal:header>
+      <div style="overflow-y: auto;height:15rem;margin:0;">
+        <ul class="menu2" style="min-width: 180px;list-style: none;">
+          <li class="menu-item" ui:for="option of options" click="-> ctrl.insert|assignKeyValue:value:@option.id">
+            <a>
+              <div class="tile tile-centered">
+                <div class="tile-content">🔸 {option.name|or:@option.id}</div>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <!-- <Modal:footer>
+        <Btn class="float-right" mode="primary" title="OK" action="{toggle}"/>
+      </Modal:footer> -->
+    </Modal>
+  </div>
+</component>
+
+<component id="MultiEnumField">
+  <FieldItem caption="{caption}" class={class} error="{error}" required="{required}" hint="{hint}">
+
+    <MultivalueController ui:ref="ctrl" value="{value}" options="{options}" change="{onChange}"/>
+
+    <div class="mb-1 has-icon-right" ui:for="item of <-ctrl.items">
+      <div class="form-input" style="height: auto; min-height: 1.5rem;">
+        <div class="">{item.name}</div>
+        <i class="form-icon icon icon-cross p-2 c-hand" click="-> ctrl.delete|assignKeyValue:value:@item.id" ui:if="disabled|not"></i>
+      </div>
+    </div>
+
+    <MultiEnumAppender caption="➕ {caption}" placeholder="{placeholder}" options="<-ctrl.availableOptions" opened="<-ctrl.opened" toggle="->ctrl.toggleOpened" ui:if="disabled|not"/>
+
+  </FieldItem>
+</component>