arrmatura 5.0.4 → 5.2.0

package/commons/forms/fields.xml

@@ -6,22 +6,35 @@
 
 <component id="TextField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <input class="form-input" type="text" disabled="{disabled}" placeholder="{placeholder}" value="{value}" change="{onChange}" />
+    <input class="form-input" name="{id}" type="text" disabled="{disabled}" placeholder="{placeholder}" value="{value}" change="{onChange}" />
+  </FieldItem>
+</component>
+
+<component id="PasswordField">
+  <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
+    <input class="form-input" name="{id}" type="password" disabled="{disabled}" placeholder="{placeholder|or:password}" value="{value}" change="{onChange}" />
+  </FieldItem>
+</component>
+
+<component id="EmailField">
+  <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
+    <input class="form-input" type="email" disabled="{disabled}" placeholder="{placeholder|or:password}" value="{value}" change="{onChange}" />
   </FieldItem>
 </component>
 
 <component id="UrlField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <div class="input-group has-icon-right">
+    <div class="input-group has-icon-right" style="height:2rem;">
       <ui:fragment ui:if="{editing}">
         <ui:then>
-          <input class="form-input border-0" disabled="{disabled}" type="url" blur="-> editing|not" placeholder="{caption}" value="{value}" change="{onChange}" />
+          <input class="form-input border-0" disabled="{disabled}" type="url" blur="-> editing|not" placeholder="{placeholder}" value="{value}" change="{onChange}" />
           <button class="btn btn-primary input-group-btn" click="-> editing|not">
             <i class="icon icon-check"/>
           </button>
         </ui:then>
         <ui:else>
-          <a class="form-input text-ellipsis" href="{value}" target="{id}">{value}</a>
+          <a class="form-input text-ellipsis" href="{value}" target="{id}" ui:if="value">🔗 {value}</a>
+          <a class="form-input text-ellipsis" ui:if="value|not">{placeholder|or:-}</a>
           <i class="form-icon icon icon-edit c-hand" click="->editing" ui:if="disabled|not"/>
         </ui:else>
       </ui:fragment>
@@ -31,20 +44,20 @@
 
 <component id="EmailField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <input class="form-input" disabled="{disabled}" type="email" placeholder="{caption}" value="{value}" change="{onChange}" />
+    <input class="form-input" disabled="{disabled}" type="email" placeholder="{placeholder}" value="{value}" change="{onChange}" />
   </FieldItem>
 </component>
 
 <component id="DateField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <input class="form-input" disabled="{disabled}" type="date" placeholder="{caption}" value="{value}" change="{onChange}" />
+    <input class="form-input" disabled="{disabled}" type="date" placeholder="{placeholder}" value="{value}" change="{onChange}" />
   </FieldItem>
 </component>
 
 <component id="DateAndWorkingHoursField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <div class="flexoid">
-      <input class="form-input" disabled="{disabled}" type="date" placeholder="{caption}" value="{value}" change="{onChange}" />
+    <div class="d-flex">
+      <input class="form-input" disabled="{disabled}" type="date" placeholder="{placeholder}" value="{value}" change="{onChange}" />
       <Select class="form-select ml-2" disabled="{disabled}" change="{onChange|assignFirstArgKeyValue:key:@typeSpec}" emptyCaption="-" value="{data|dot:@typeSpec}" options=":enums.workingHours" />
     </div>
   </FieldItem>
@@ -53,8 +66,8 @@
 
 <component id="DateAndTimeField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <div class="flexoid">
-      <input class="form-input flex-1" disabled="{disabled}" type="date" placeholder="{caption}" value="{value}" change="{onChange}" />
+    <div class="d-flex">
+      <input class="form-input flex-1" disabled="{disabled}" type="date" placeholder="{placeholder}" value="{value}" change="{onChange}" />
       <input class="form-input flex-1 ml-2" disabled="{value|not|or:@disabled}" type="text" value="{data|dot:@typeSpec}" change="{onChange|assignFirstArgKeyValue:key:@typeSpec}" />
     </div>
   </FieldItem>
@@ -62,8 +75,8 @@
 
 <component id="DatePeriodField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <div class="flexoid">
-      <input class="form-input flex-1" disabled="{disabled}" type="date" placeholder="{caption}" value="{value}" change="{onChange}" />
+    <div class="d-flex">
+      <input class="form-input flex-1" disabled="{disabled}" type="date" placeholder="{placeholder}" value="{value}" change="{onChange}" />
       <input class="form-input flex-1 ml-2" style="min-width: 6rem;" disabled="{value|not|or:@disabled}" type="date" value="{data|dot:@typeSpec}" change="{onChange|assignFirstArgKeyValue:key:@typeSpec}" />
     </div>
   </FieldItem>
@@ -71,13 +84,13 @@
 
 <component id="DateTimeField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <input class="form-input" disabled="{disabled}" type="datetime-local" placeholder="{caption}" value="{value|dateFormat:yyyy-mm-ddTt}" change="{onChange}" />
+    <input class="form-input" disabled="{disabled}" type="datetime-local" placeholder="{placeholder}" value="{value|dateFormat:yyyy-mm-ddTt}" change="{onChange}" />
   </FieldItem>
 </component>
 
 <component id="TimeField">
   <FieldItem caption="{caption}" error="{error}" required="{required}" hint="{hint}">
-    <input class="form-input" disabled="{disabled}" type="text" placeholder="{caption}" value="{value|dateFormat:t}" change="{onChange}" />
+    <input class="form-input" disabled="{disabled}" type="text" placeholder="{placeholder}" value="{value|dateFormat:t}" change="{onChange}" />
   </FieldItem>
 </component>
 
@@ -95,7 +108,7 @@
 
 <component id="BooleanField">
   <div class="form-group">
-    <div class="col-sm-12 flexoid">
+    <div class="col-sm-12 d-flex">
       <label class="form-switch">
         <span>{caption}</span>
         <input type="checkbox" toggle="{onChange}" checked="{value|truthy}" />

package/commons/forms/form.xml

@@ -7,14 +7,14 @@
 
 <component id="GroupForma">
   <div autocomplete="off" class="form-horizontal px-2">
-    <FormController ui:ref="formController" data="{data}" meta="{meta}" change="{change}" />
+    <FormController ui:ref="formController" data="{data}" meta="{meta}" change="{change}" groups="{groups}" />
     <FieldGroup ui:props="{group}" ui:for="group of <-formController.fieldsGroups" />
   </div>
 </component>
 
 <component id="TabbedForma">
   <div autocomplete="off" class="form-horizontal px-2">
-    <FormController ui:ref="formController" data="{data}" meta="{meta}" change="{change}" />
+    <FormController ui:ref="formController" data="{data}" meta="{meta}" change="{change}" tabs="{tabs}" groups="{groups}" />
     <TabbedFormaContent ui:props="<-formController.tabsInfo" />
   </div>
 </component>
@@ -27,7 +27,7 @@
 </component>
 
 <component id="FieldGroup">
-  <h6 class="mt-2 pt-2 px-2 text-gray">{id}</h6>
+  <h6 class="mt-2 pt-2 px-2 text-gray">{name|or:id}</h6>
   <div class="panel">
     <div class="p-2">
       <ui:tag tag="{field.type|capitalize}Field" ui:props="{field}" ui:if="field.visible" ui:for="field of items" />

package/commons/forms/index.ts

@@ -1,7 +1,7 @@
 import { FormController } from './FormController';
-import { ItemCollection } from './ItemCollection';
+import { ItemCollectionController } from './ItemCollectionController';
+import { NewItemController } from './NewItemController';
 import { ItemController } from './ItemController';
-import { MetadataService } from './MetadataService';
 import { MultivalueController } from './MultivalueController';
 import { SuggestionController } from './SuggestionController';
 
@@ -21,9 +21,9 @@ export default [
   FieldItem,
   MultiEnumField,
   FormController,
-  ItemCollection,
+  ItemCollectionController,
+  NewItemController,
   ItemController,
-  MetadataService,
   MultivalueController,
   SuggestionController,
 ];

package/commons/index.ts

@@ -1,6 +1,6 @@
 import components from './components';
 import * as services from './services';
 import forms from './forms';
-import auth from './auth';
+import * as auth from './auth';
 
-export default [...components, ...forms, ...auth, ...Object.values(services)];
+export default [...components, ...forms, ...Object.values(auth), ...Object.values(services)];

package/commons/services/ApiClientService.ts

@@ -0,0 +1,32 @@
+import { urlAppendParams } from '../../lib';
+import { Service } from './Service';
+
+export class ApiClientService extends Service {
+  baseUrl: string = '';
+  token: string = '';
+  onTokenExpired?: Procedure;
+
+  post(path: string = '', data: any, options: object) {
+    return fetch(urlAppendParams(this.baseUrl + path), {
+      method: 'POST',
+      mode: 'cors',
+      redirect: 'follow',
+      ...options,
+      body: JSON.stringify({ token: this.token, data }),
+    })
+      .then((res) => res.json())
+      .then(({ error, ...rest }) => {
+        if (error) {
+          if (error.code === '401') {
+            this.onTokenExpired?.();
+          }
+          throw error;
+        }
+        return rest;
+      });
+  }
+
+  onPost({ path, body, options }: { path: string; body: any; options: object }) {
+    return this.post(path, body, options);
+  }
+}

package/commons/services/GSheetsService.ts

@@ -1,92 +1,120 @@
-import { arrayToObject } from 'arrayToObject';
-import { urlAppendParams } from 'urls';
+import { arrayToObject } from '../../lib';
 import { JsonpService } from './JsonpService';
-import { LocalStorage } from './LocalStorage';
+import { Storage } from './Storage';
 import { Service } from './Service';
 
 export class GSheetsService extends Service {
   url: string = '';
-  kind: string = 'sheet';
+  token: string = '';
+  kind: string = 'items';
   remote = new JsonpService();
-  persistence: 'local' | 'transient' = 'transient';
-  local?: LocalStorage;
+  persistence: 'local' | 'session' | 'transient' = 'transient';
+  local?: Storage;
 
-  init() {
-    this.local = new LocalStorage(this.persistence);
-    return this.syncAll();
+  get items() {
+    return this.local?.get(this.kind) || null;
+  }
+
+  set items(items) {
+    this.local?.set(this.kind, !items ? null : items.filter((e) => !e.deleted && e.status !== 'deleted'));
   }
 
-  syncAll() {
-    const now = Date.now();
-    const { since, items: items0 = {} } = this.local?.get(this.kind) || { since: 0, items: {} };
-    return !this.url
-      ? null
-      : {
-          isLoading: true,
-          '*': fetch(urlAppendParams(this.url, { since }), { redirect: 'follow' })
-            .then((res) => res.json())
-            .then(({ items: items1, error }) => {
-              if (error) throw error;
-
-              this.log('sync' + this.kind, now, items1);
-              const items = { ...items0, ...arrayToObject(items1) };
-              this.local?.set(this.kind, { since: now, items });
-              return { items, isLoading: false };
-            })
-            .catch((err) => {
-              this.toast({ mode: 'error', message: 'Ошибка: ' + JSON.stringify(err?.message || err || 'unknown') });
-              return { isLoading: false };
-            }),
-        };
+  get since() {
+    return +this.local?.get(this.kind + '_since') || 0;
   }
 
-  getAll() {
-    const { items } = this.local?.get(this.kind) || {};
-    return items;
+  set since(s) {
+    this.local?.set(this.kind + '_since', s || 0);
   }
 
-  getItems() {
-    let items = this.getAll();
-    return Object.values(items || {});
+  init() {
+    this.local = new Storage(this.persistence);
+    return this.sync();
   }
 
-  async update(delta: Delta) {
-    const now = Date.now();
-    const { since, items: items0 = [] } = this.local?.get(this.kind) || { since: 0, items: {} };
+  submit(_data: any): Promise<any> {
+    throw new Error('Method not implemented.');
+  }
 
-    this.log('update', delta);
+  sync() {
+    const promise = this.submit({ path: `?action=items&kind=${this.kind}`, body: { since: String(this.since || 0) } })
+      .then(({ items, reset, timestamp }) => {
+        this.log('sync ' + this.kind, timestamp, items?.length);
+        if (items?.length || !this.since) {
+          if (!reset) {
+            const items0 = this.items || [];
+            items = Object.values({ ...arrayToObject(items0), ...arrayToObject(items) });
+          }
+          return { items, isLoading: false, since: timestamp };
+        }
+        return { isLoading: false };
+      })
+      .catch((error) => {
+        const message = error?.message || error || 'unknown';
+        this.toast({ id: message, mode: 'error', message: 'Ошибка: ' + message });
+        return { isLoading: false, error: message };
+      });
 
+    return {
+      isLoading: true,
+      error: null,
+      '*items': promise,
+    };
+  }
+
+  submitData(data: Delta) {
     return {
       busy: true,
-      '*': fetch(this.url, {
-        method: 'POST',
-        mode: 'cors',
-        redirect: 'follow',
-        body: JSON.stringify({ action: 'upsert', delta }),
-      })
-        .then((res) => res.json())
-        .then(({ error, ...item }) => {
-          if (error) throw error;
-          // items: items1 }
-          this.log('update sync' + this.kind, now, item.id);
-          const items = { ...items0, [item.id]: item };
-          this.toast('Сохранено успешно');
-
-          this.local?.set(this.kind, { since, items });
-          return { busy: false }; //items,
+      error: null,
+      '*upsert': this.submit({ path: `?action=upsert&kind=${this.kind}`, body: data })
+        .then(({ item }) => {
+          this.log('update sync' + this.kind, item.id);
+          return {
+            busy: false,
+            lastUpdatedItemId: item.id,
+            items: [item, ...this.items?.filter((e: Hash) => e.id != item.id)],
+          };
         })
-        .catch((err) => {
-          this.toast({ mode: 'error', message: 'Ошибка: update ' + JSON.stringify(err?.message || err || 'unknown') });
-          return { busy: false };
+        .catch((error) => {
+          return { busy: false, error };
         }),
     };
   }
 
-  async onUpsert(data) {
-    return this.update(data);
+  syncItem(data: Delta) {
+    return {
+      isItemLoading: true,
+      error: null,
+      '*item': this.submit({ path: `?action=item&kind=${this.kind}`, body: data })
+        .then(({ item }) => {
+          this.log('sync item' + this.kind, item.id, item);
+          return {
+            isItemLoading: false,
+            lastUpdatedItemId: item.id,
+            items: [item, ...this.items?.filter((e: Hash) => e.id != item.id)],
+          };
+        })
+        .catch((error) => {
+          return { isItemLoading: false, error: error };
+        }),
+    };
+  }
+
+  // event handlers:
+
+  onReload() {
+    return this.sync();
+  }
+
+  onUpsert(data: Delta) {
+    return this.submitData(data);
+  }
+
+  onItem(data: Delta) {
+    return this.syncItem(data);
   }
 
-  async onDelete({ id }) {
-    return this.update({ [id]: { status: 'deleted' } });
+  onDelete({ id }: Delta) {
+    return this.submitData({ [String(id)]: { status: 'deleted' } });
   }
 }

package/commons/services/Invoke.ts

@@ -1,13 +1,29 @@
 export class Invoke {
+  action?: (d?: Delta) => void;
+  data?: Delta;
+  delay = 0;
+  hot = false;
+  trigger?: any;
+
+  setTrigger(val: any) {
+    this.trigger = val;
+    if (val) {
+      this.reload();
+    }
+  }
+
   init() {
-    if (this.delay) {
-      setTimeout(() => {
-        if (!this.isDone) {
-          this.action(this.data);
-        }
-      }, this.delay * 1000);
-    } else {
-      this.action(this.data);
+    if (this.hot) {
+      this.reload();
     }
   }
+
+  reload() {
+    setTimeout(() => {
+      if (!this.isDone) {
+        console.log(this.data);
+        this.action?.(this.data);
+      }
+    }, (this.delay || 0) * 1000);
+  }
 }

package/commons/services/JsonpService.ts

@@ -1,4 +1,4 @@
-import { urlAppendParams } from 'urls';
+import { urlAppendParams } from '../../lib';
 
 let count = 0;
 

package/commons/services/MetadataService.ts

@@ -0,0 +1,50 @@
+import { Storage } from './Storage';
+import { Service } from './Service';
+
+const mergeMeta = (meta: Hash<any>, target: Hash<any>) =>
+  Object.entries(meta).reduce((res, [key, val]) => {
+    res[key] = typeof res[key] === 'object' && !Array.isArray(res[key]) ? { ...res[key], ...val } : val;
+    return res;
+  }, target);
+
+const load = (url: string, version: string) =>
+  fetch(url, {
+    method: 'POST',
+    mode: 'cors',
+    redirect: 'follow',
+    body: JSON.stringify({ data: { version } }),
+  }).then((res) => res.json());
+
+export class MetadataService extends Service {
+  url: string = '';
+  version: string = '';
+  ttl = 24 * 3600000;
+
+  init() {
+    const local = new Storage('local', this.url.replace(/\//g, '_'));
+    const meta0 = local.get('$meta') || {};
+    if (+(meta0?.timestamp || 0) + this.ttl > Date.now()) {
+      mergeMeta(meta0, this.res(''));
+      return { ready: true, meta: meta0 };
+    }
+    return {
+      ready: false,
+      meta: meta0,
+      error: null,
+      '*': load(this.url, meta0?.version).then(
+        (meta2) => {
+          const isUpdated = meta0?.version !== meta2?.version;
+          const meta = !isUpdated ? { ...meta0 } : meta2;
+          meta.timestamp = Date.now();
+          mergeMeta(meta, this.res(''));
+          local.set('$meta', meta);
+          return { ready: true, isUpdated, meta };
+        },
+        (error) => {
+          const message = error?.message || error || 'unknown';
+          return { ready: true, error: message };
+        }
+      ),
+    };
+  }
+}

package/commons/services/NavigationService.ts

@@ -1,4 +1,4 @@
-import { urlParse, urlStringify } from 'urls';
+import { urlParse, urlStringify } from '../../lib';
 import { Service } from './Service';
 
 export class NavigationService extends Service {
@@ -27,6 +27,10 @@ export class NavigationService extends Service {
     window.removeEventListener('hashchange', this.hashchange);
   }
 
+  setTitle(d: string) {
+    window.document.title = d;
+  }
+
   setHash(d) {
     const { host, path = ['*'], params } = urlParse('/' + d);
     const state = {
@@ -46,6 +50,21 @@ export class NavigationService extends Service {
     };
   }
 
+  onReload() {
+    window.location.reload();
+  }
+
+  onCopyToClipboard({ value }) {
+    navigator.clipboard.writeText(value).then(
+      () => {
+        this.toast('Copied to clipboard');
+      },
+      (err) => {
+        this.toast('Could not copy to clipboard: ' + err.message);
+      }
+    );
+  }
+
   onHash({ value }) {
     this.setHash('/' + value);
   }

package/commons/services/Service.ts

@@ -2,38 +2,43 @@ import { Component } from '../../core/Component';
 import { Toast } from './ToastService';
 
 export class Service {
-  $: Component;
-  constructor(state, $: Component) {
+  #$: Component;
+  state: any;
+
+  constructor(state: unknown, $: Component) {
     this.state = state;
-    this.$ = $;
+    this.#$ = $;
   }
 
   /**
    * Framework
    */
   lookupService(ref: string) {
-    return this.$.getByRef(ref);
+    return this.#$.getByRef(ref);
+  }
+
+  up(d: Delta) {
+    return this.#$.up(d);
   }
 
-  up(...args) {
-    return this.$.up(...args);
+  defer(fn: ComponentProcedure) {
+    return this.#$.defer(fn);
   }
 
-  defer(...args) {
-    return this.$.defer(...args);
+  emit(key: string, data: Delta) {
+    return this.#$?.emit(key, data);
   }
 
-  emit(...args) {
-    return this.$.emit(...args);
+  createEmitter(key: string) {
+    return (data: Delta) => this.emit(key, data);
   }
 
-  res(...args) {
-    return this.$.res(...args);
+  res(key: string) {
+    return this.#$.res(key);
   }
 
-  log(...args) {
-    console.log(this.$.ref + ': ', ...args);
-    return args[0];
+  log(val: any, ...args: unknown[]) {
+    return this.#$.log(val, ...args);
   }
 
   /**
@@ -44,9 +49,9 @@ export class Service {
     // may  overriden from props
     const handler = this.lookupService('errorHandler');
     if (handler) {
-      handler.handleError({ message, code, source: this.$ });
+      handler.handleError({ message, code, source: this.#$ });
     } else {
-      console.error(this.$.ref + ': ERROR: ', message, code);
+      console.error(this.#$.ref + ': ERROR: ', message, code);
     }
   }
 
@@ -54,15 +59,4 @@ export class Service {
     // may  overriden from props
     this.emit('toasters.send', typeof message === 'string' ? { message } : message);
   }
-
-  safe(p, def) {
-    return p.catch((error) => {
-      this.handleError(error);
-      return def ? def(error) : { error };
-    });
-  }
-
-  onClearError() {
-    return { error: null };
-  }
 }

package/commons/services/Storage.ts

@@ -0,0 +1,55 @@
+const parse = (s: string | null) => (s ? JSON.parse(s) : undefined);
+
+class MemoryStore {
+  #map = new Map<string, string>();
+
+  clear() {
+    return this.#map.clear();
+  }
+  getItem(key: string) {
+    return this.#map.get(key) || null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.#map.set(key, value);
+  }
+  removeItem(key: string): void {
+    this.#map.delete(key);
+  }
+}
+
+export class Storage {
+  cache: Hash = {};
+  storage: Omit<MemoryStore, 'prototype'>;
+
+  constructor(mode?: 'local' | 'transient' | 'session', readonly ns = '') {
+    this.storage =
+      mode === 'local' ? window.localStorage : mode === 'session' ? window.sessionStorage : new MemoryStore();
+  }
+
+  clear() {
+    this.cache = {};
+    return this.storage.clear();
+  }
+
+  get(key: string) {
+    return this.cache[key] || (this.cache[key] = parse(this.storage.getItem(key + this.ns)));
+  }
+
+  set(key: string, val: unknown) {
+    this.cache[key] = val;
+    if (val) {
+      this.storage.setItem(key + this.ns, JSON.stringify(val));
+    } else {
+      this.storage.removeItem(key + this.ns);
+    }
+  }
+
+  assign(delta: Delta) {
+    Object.entries(delta).forEach(([key, val = null]) => this.set(key, val));
+  }
+
+  transform(key: string, fn: Pipe) {
+    return this.set(key, fn(this.get(key)));
+  }
+}