arrmatura 5.0.4 → 5.2.0

package/commons/forms/FormController.ts

@@ -1,13 +1,21 @@
-import { arrayGroupBy } from 'arrayGroupBy';
-import { getPredicat } from 'predicat';
-import { strFormat } from '../../lib';
+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 };
@@ -15,14 +23,14 @@ export class FormController extends Service {
   }
 
   get fieldsGroups(): Obj[] {
-    return Object.values(arrayGroupBy(this.fieldProps, 'group'));
+    return getFieldsGroups(this.fieldProps, this.groups);
   }
 
   get tabsInfo() {
     const tabs = Object.values(arrayGroupBy(this.fieldProps, ({ tab = 'tab' }) => tab)).map(({ id, items }) => ({
       id,
-      name: id,
-      items: Object.values(arrayGroupBy(items, 'group')),
+      name: this.tabs?.[id] || id,
+      items: getFieldsGroups(items, this.groups),
     }));
     return { enabled: tabs.length > 1, initialTab: tabs?.[0]?.id, tabs };
   }
@@ -35,39 +43,45 @@ export class FormController extends Service {
         .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 (this.res('enums.' + key) || []).find(({ id }) => id === subid)?.[subKey] || [];
+      return enumItems.find(({ id }) => id === subid)?.[subKey] || [];
     }
-    return this.res('enums.' + key) || [];
+    return enumItems;
   }
 
   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);
-        },
-      };
-    });
+    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,68 +1,132 @@
-import { arraySortBy } from 'arraySortBy';
+import { arraySortBy } from '../../lib';
 
-export const analyzeDataByTags = (data: Item[], selection: Hash<boolean>, initials = '') => {
+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 };
+    }
 
-  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] });
+    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++;
         }
       });
-      return r;
-    }, {});
-    return { actualData, tags: Object.values(tagsHash) };
+    });
+
+    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 {
-    const tags = initials.split(',').map((id) => ({ id, name: id, count: 0, selected: false }));
+    tags.push(...initials.split(',').map((id) => ({ id, name: id, count: 0, selected: false })));
     data.forEach((e: Item) => {
       tags.forEach((tag) => {
-        if (e.$tags.has(tag.id)) {
+        if (e.getLabels().has(tag.id)) {
           tag.count++;
         }
       });
     });
-    return { actualData: data, tags };
+    return data;
   }
 };
 
 export const getSuggestions = (data: Item[], kluq: string) => {
   if (!kluq) return null;
 
-  const words = {};
+  const words: Hash = {};
   data.forEach((e) =>
-    e.$searchData.replace(/\w{3,}/g, (w) => {
+    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.includes(kluq))
+      .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 {
-  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)));
+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);
   }
-  get title() {
-    return this.$title || (this.$title = this.name || this.subject || this.topic || this.id);
+  getLabels(): Set<string> {
+    const key = 'labels';
+    return (
+      this.$[key] ||
+      (this.$[key] = new Set(
+        String(this[key] || this.labels)
+          .split(',')
+          .filter(Boolean)
+      ))
+    );
   }
   get $searchData() {
-    return this.$$searchData || (this.$$searchData = (this.subject + ' ' + this.notes).toLowerCase());
+    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

@@ -0,0 +1,113 @@
+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,21 +1,20 @@
 import { Service } from '../services/Service';
 import { Item } from './Item';
-import { getPredicat } from 'predicat';
+import { getPredicat } from '../../lib';
 
+const CHANGES: Hash<Hash> = {};
 export class ItemController extends Service {
   all?: Hash<Hash>;
-  delta?: 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 initial = this.all?.[this.itemId];
-    if (!initial?.id) {
-      return null;
-    }
-    const { $row, ...d } = initial;
-    return d;
+    const e = this.initialElement;
+    return !e?.id ? null : e.$dataset;
   }
 
   get actualData() {
@@ -23,10 +22,10 @@ export class ItemController extends Service {
     if (!initial) {
       return null;
     }
-    const data = { ...this.context, ...initial, ...this.delta };
+    const data = { ...this.context, ...initial, ...CHANGES[this.itemId] };
     this.meta?.map((field: { [k: string]: string }) => {
       const { id, visible } = field;
-      const isVisible = getPredicat(visible || 'true')(data);
+      const isVisible = !visible || getPredicat(visible)(data);
       if (!isVisible && data[id]) {
         data[id] = '';
       }
@@ -38,25 +37,55 @@ export class ItemController extends Service {
     return new Item(this.actualData || {});
   }
 
-  upsert(data?: Hash) {
+  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);
   }
 
-  onReset = () => ({ delta: {} });
+  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,
+    };
+  }
 
-  onChange = (delta: Hash) => ({ delta: { ...this.delta, ...delta } });
+  // event handlers:
+  onChange = (delta: Hash) => {
+    CHANGES[this.itemId] = { ...CHANGES[this.itemId], ...delta };
+    return {
+      counter: NaN,
+    };
+  };
 
   onSave() {
-    const data = this.actualData;
-    if (data) {
-      this.upsert(data);
-    }
+    return this.submitData(this.actualData);
   }
 
   onDelete() {
-    const id = this.initialData?.id;
-    if (id) {
-      this.upsert({ id, status: 'deleted' });
-    }
+    const { id } = this.initialElement?.id;
+    if (!id) return null;
+
+    return this.submitData({ id, status: 'deleted' });
   }
 }

package/commons/forms/NewItemController.ts

@@ -0,0 +1,46 @@
+import { Service } from '../services/Service';
+
+export class NewItemController extends Service {
+  data: any;
+  info: any;
+
+  upsert(_data: any) {
+    throw new Error('Method not implemented.');
+  }
+  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;
+    }
+
+    this.toast({ message: 'Added successfully. ', timeout: 5000, link: '#/task?itemId=' + lastUpdatedItemId });
+    return {
+      info: { open: false, data: {} },
+    };
+  }
+  // event handlers:
+
+  onOpenAddNew() {
+    return {
+      info: {
+        data: this.data,
+        open: true,
+      },
+    };
+  }
+
+  onCancel() {
+    return {
+      info: { open: false },
+    };
+  }
+
+  onSubmit(data: Delta) {
+    return this.submitData(data);
+  }
+}

package/commons/forms/SmartareaField.xml

@@ -6,14 +6,14 @@
         <div class="form-input" style="height: auto;min-height:1.5rem;">{value}</div>
       </ui:then>
       <ui:else>
-        <div class="has-icon-right" click="{open|bindArgs:true}">
+        <div class="has-icon-right" click="{open|fnBindArgs:true}">
           <div class="form-input text-{value|then::gray}" style="height: auto;min-height:1.5rem;">{value|or:@placeholder}</div>
           <i class="form-icon icon icon-edit c-hand"></i>
         </div>
       </ui:else>
     </ui:fragment>
 
-    <Modal open="{opened}" mode="sm" ui:if="{opened}" close="{open|bindArgs:false}">
+    <Modal open="{opened}" mode="sm" ui:if="{opened}" close="{open|fnBindArgs:false}">
       <Modal:header>
         <h6>{caption}</h6>
       </Modal:header>
@@ -37,7 +37,7 @@
       </div>
 
       <Modal:footer>
-        <Btn class="float-right" mode="primary" title="OK" action="{open|bindArgs:false}"/>
+        <Btn class="float-right" mode="primary" title="OK" action="{open|fnBindArgs:false}"/>
       </Modal:footer>
     </Modal>
   </div>

package/commons/forms/SuggestionField.xml

@@ -1,11 +1,11 @@
 <component id="SuggestionInput">
   <div class="form-autocomplete">
     <div class="has-icon-right">
-      <input class="form-input" type="text" disabled="{disabled}" placeholder="{placeholder}" focus="{open|bindArgs:true}" blur2="{open|bindArgs:false|nextTick:200}" keypress="{change}" value="{value}" />
+      <input class="form-input" type="text" disabled="{disabled}" placeholder="{placeholder}" focus="{open|fnBindArgs:true}" blur2="{open|fnBindArgs:false|fnTick:200}" keypress="{change}" value="{value}" />
       <i class="form-icon icon icon-{value|then:cross:arrow-down} c-hand" style="margin-right:{options.length|then:1.5:0.25}rem;" click="{reset}" ui:if="disabled|not|and:@value"></i>
       <ui:fragment ui:if="options|and:@options.length">
-        <i class="form-icon icon icon-arrow-up c-hand" click="{open|bindArgs:false}" ui:if="opened"></i>
-        <i class="form-icon icon icon-arrow-down c-hand" click="{open|bindArgs:true}" ui:if="opened|not"></i>
+        <i class="form-icon icon icon-arrow-up c-hand" click="{open|fnBindArgs:false}" ui:if="opened"></i>
+        <i class="form-icon icon icon-arrow-down c-hand" click="{open|fnBindArgs:true}" ui:if="opened|not"></i>
       </ui:fragment>
     </div>
     <ul class="menu" style="position2: relative; min-width: 180px;max-height:7rem;overflow-y:auto;" ui:if="{options|and:@options.length|and:@opened}">