arrmatura 5.0.4 → 5.2.0

package/commons/auth/AuthService.ts

@@ -0,0 +1,111 @@
+import { Service } from '../services/Service';
+import { Storage } from '../services/Storage';
+
+export class AuthService extends Service {
+  authUrl: string = '';
+  local?: Storage;
+  initialToken: any;
+  $info: unknown;
+  afterSignedOut?: Procedure;
+  persistence: 'local' | 'session' | 'transient' = 'transient';
+
+  init() {
+    this.local = new Storage(this.persistence);
+
+    return !this.initialToken
+      ? null
+      : {
+          token: this.initialToken,
+        };
+  }
+
+  get token() {
+    return this.initialToken || this.local?.get('$auth_token');
+  }
+
+  set token(token: string | null) {
+    this.local?.set('$auth_token', token);
+  }
+
+  get isSignedIn() {
+    return !!this.token;
+  }
+
+  get canSignOut() {
+    return !this.initialToken;
+  }
+
+  signOut() {
+    new Storage('local').clear();
+    new Storage('session').clear();
+    this.initialToken = null;
+    this.token = null;
+    window.location.reload();
+    return null;
+  }
+
+  signIn(creds: any) {
+    const { username, password } = creds || {};
+    return fetch(this.authUrl + '?action=signin', {
+      method: 'POST',
+      mode: 'cors',
+      redirect: 'follow',
+      body: JSON.stringify({ creds: username + ':' + password }),
+    })
+      .then((res) => res.json())
+      .then(({ error, ...rest }) => {
+        if (error) {
+          throw new Error('Invalid credentials');
+        }
+        return rest;
+      });
+  }
+
+  signUp(data: any) {
+    return fetch(this.authUrl + '?action=signup', {
+      method: 'POST',
+      mode: 'cors',
+      redirect: 'follow',
+      body: JSON.stringify({ data }),
+    })
+      .then((res) => res.json())
+      .then(({ error, ...rest }) => {
+        if (error) {
+          throw error;
+        }
+        return rest;
+      });
+  }
+
+  onInvalidateToken() {
+    return this.signOut();
+  }
+
+  onSignIn(creds: Hash) {
+    return {
+      busy: true,
+      '*': this.signIn(creds)
+        .catch((error) => {
+          this.toast('error: ' + error.message);
+          return null;
+        })
+        .then((info) => ({ busy: false, ...info })),
+    };
+  }
+  onSignUp(creds: Hash) {
+    return {
+      busy: true,
+      '*': this.signUp(creds)
+        .catch((error) => {
+          this.toast('error: ' + error.message);
+          return null;
+        })
+        .then((info) => ({ busy: false, ...info })),
+    };
+  }
+
+  onSignOut() {
+    this.signOut();
+    this.afterSignedOut?.();
+  }
+}

package/commons/auth/UserService.ts

@@ -1,96 +1,52 @@
 import { Service } from '../services/Service';
-import { urlAppendParams } from 'urls';
-import { LocalStorage } from '../services/LocalStorage';
+import { Storage } from '../services/Storage';
 
 export class UserService extends Service {
   url: string = '';
   kind: string = '$user';
-  local: LocalStorage = new LocalStorage('local');
-  token: any;
-  $info: unknown;
-
-  init() {
-    return this.syncUserInfo();
-  }
-
-  syncUserInfo() {
-    const token = this.token || this.local?.get('$token');
-
-    return !token
-      ? null
-      : {
-          isLoading: true,
-          '*': fetch(urlAppendParams(this.url, { action: 'user', token }), { redirect: 'follow' })
-            .then((res) => res.json())
-            .then(({ info, error }) => {
-              if (error) throw error;
-              this.log('sync' + this.kind, info);
-              this.local?.set('$token', token);
-              return { info, isLoading: false };
-            })
-            .catch((err) => {
-              this.toast({ mode: 'error', message: 'Ошибка: ' + JSON.stringify(err?.message || err || 'unknown') });
-              return { info: null, isLoading: false };
-            }),
-        };
-  }
+  local?: Storage;
+  persistence: 'local' | 'session' | 'transient' = 'transient';
 
   set info(info: unknown) {
-    this.$info = info;
     this.local?.set(this.kind, info);
   }
 
-  get info() {
-    const info = this.$info || this.local?.get(this.kind);
-    return info;
+  get info(): Delta {
+    return this.local?.get(this.kind);
   }
 
-  get isSignedIn() {
-    return this.info?.id;
-  }
+  init() {
+    this.local = new Storage(this.persistence);
 
-  async update(delta: Delta) {
-    const now = Date.now();
-    const { since, items: items0 = [] } = this.local?.get(this.kind) || { since: 0, items: {} };
+    return this.sync();
+  }
 
-    this.log('update', delta);
+  submit(_data: any): Promise<any> {
+    throw new Error('Method not implemented.');
+  }
 
-    return {
-      busy: true,
-      '*': fetch(this.url, {
-        method: 'POST',
-        mode: 'cors',
-        redirect: 'follow',
-        body: JSON.stringify({ action: 'upsert', delta }),
+  sync(delta?: Delta) {
+    const promise = this.submit({ path: `?action=user`, body: { delta } })
+      .then(({ user }) => {
+        this.log('sync ' + this.kind, user);
+        return { isLoading: false, info: user };
       })
-        .then((res) => res.json())
-        .then(({ id, error }) => {
-          if (error) throw error;
-          // items: items1 }
-          this.log('update sync' + this.kind, now, id);
-          // const items = { ...items0, ...arrayToObject(items1) };
-          this.toast('Сохранено успешно');
+      .catch((error) => {
+        const message = error?.message || error || 'unknown';
+        this.toast({ id: message, mode: 'error', message: 'Ошибка: ' + message });
+        return { isLoading: false, error: message };
+      });
 
-          // this.local?.set(this.kind, { since: now, items });
-          return { busy: false }; //items,
-        })
-        .catch((err) => {
-          this.toast({ mode: 'error', message: 'Ошибка: update ' + JSON.stringify(err?.message || err || 'unknown') });
-          return { busy: false };
-        }),
-    };
-  }
-
-  onUpdate(data, { info }) {
     return {
-      info: { ...info, ...data },
+      isLoading: true,
+      info: { ...this.info, ...delta },
+      error: null,
+      '*': promise,
     };
   }
 
-  onLogin() {
-    return {
-      info: { id: 1, name: 'Me' },
-    };
+  onSave(delta: Delta) {
+    return this.sync(delta);
   }
 
   onShowProfile(showProfile = false) {
@@ -98,10 +54,4 @@ export class UserService extends Service {
       showProfile,
     };
   }
-
-  onLogout() {
-    return {
-      info: { id: 0, name: 'Me222' },
-    };
-  }
 }

package/commons/auth/index.ts

@@ -1,4 +1,5 @@
-import user from './user.xml';
-import { UserService } from './UserService';
+import userXml from './user.xml';
+export * from './AuthService';
+export * from './UserService';
 
-export default [user, UserService];
+export const userTemplates = userXml;

package/commons/auth/user.xml

@@ -1,14 +1,14 @@
 <component id="UserBar">
-  <div class="float-right">
-    <UserLoading ui:if="<-user.isLoading">
+  <div class="float-right" style="width: 1.5rem;">
+    <NoUserPanel ui:if="<-auth.isSignedIn|not">
       <ui:else>
-        <NoUserPanel ui:if="<-user.isSignedIn|not">
+        <UserLoading ui:if="<-user.isLoading">
           <ui:else>
-            <UserPanel ui:props="<-user.info" defaultImage="assets/img/avatar-1.png"/>
+            <UserPanel ui:props="<-user.info" defaultImage="assets/person1.png"/>
           </ui:else>
-        </NoUserPanel>
+        </UserLoading>
       </ui:else>
-    </UserLoading>
+    </NoUserPanel>
   </div>
 </component>
 
@@ -26,21 +26,19 @@
 
 <component id="UserPanel">
   <div class="tile tile-centered">
-    <div class="tile-icon">
-      <div class="example-tile-icon c-hand" click="-> user.showProfile|truthy">
-        <figure class="avatar">
-          <img src="{image|or:@defaultImage}" alt="{name}" />
-        </figure>
-      </div>
-    </div>
     <div class="tile-action">
       <div class="dropdown dropdown-right">
-        <a class="btn btn-link dropdown-toggle" tabindex="0">
-          <i class="icon icon-more-vert"></i >
+        <a class="btn btn-link dropdown-toggle p-0" tabindex="0">
+          <figure class="avatar">
+            <img src="{image|or:@defaultImage}" alt="{name}" />
+          </figure>
         </a>
         <ul class="menu">
           <li class="menu-item">
-            <a click="-> user.logout">⏹️Vyxod</a>
+            <a click="-> user.showProfile|truthy">Profile</a>
+          </li>
+          <li class="menu-item" ui:if="<- auth.canSignOut">
+            <a click="-> auth.signOut">Exit</a>
           </li>
         </ul>
       </div>
@@ -51,13 +49,13 @@
 <component id="NoUserPanel">
   <div class="tile tile-centered">
     <div class="tile-action">
+      <a class="btn btn-link dropdown-toggle" click="-> auth.signIn">
+        <Icon type="people"/>
+      </a>
       <div class="dropdown dropdown-right">
-        <a class="btn btn-link dropdown-toggle" tabindex="0">
-          <i class="icon icon-more-vert"></i >
-        </a>
         <ul class="menu">
           <li class="menu-item">
-            <a click="-> user.login">▶️Vxod</a>
+            <a>▶️Vxod</a>
           </li>
         </ul>
       </div>

package/commons/components/buttons.xml

@@ -8,16 +8,18 @@
       {link|then:btn-link}
       c-hand
     " style="{style}" data={data} click="{action}">
-    <span ui:if="{busy}" class="mx-2">
+    <span ui:if="{busy}" class="mx-2" style="width:18px;">
       <i class="loading"></i>
     </span>
-    <Icon ui:if="{icon}" bundle="{iconBundle}" type="{icon}" class="mr-2" />
+    <Icon ui:if="busy|not|and:@icon" bundle="{iconBundle}" type="{icon}" class="mr-2"/>
     <span ui:if="{title}" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{title}</span>
   </button>
 </component>
 
 <component id="FAB">
-  <button class="btn {tooltip|then:tooltip} tooltip-left fixed bg-error s-circle centroid c-hand {class} {disabled|or:@busy|then:disabled}  {busy|then:loading}" style="position: fixed; border: none; right: 1.5rem; bottom: 1.5rem; width: 2.5rem; height: 2.5rem;" data="{data}" data-tooltip="{tooltip|or:}" click="{action}">
-    <Icon type="{icon|or:plus}" />
+  <button class="btn {tooltip|then:tooltip} tooltip-left p-0 fixed s-circle bg-error c-hand {class} {disabled|or:@busy|then:disabled}  {busy|then:loading}" style="position: fixed; border: none; right: 1.5rem; bottom: 1.5rem; width: 2.5rem; height: 2.5rem;" data-tooltip="{tooltip|or:}">
+    <div class="centroid  s-circle" style="width: 2.5rem; height: 2.5rem;" data="{data}" click="{action}">
+      <Icon type="{icon|or:plus}" />
+    </div>
   </button>
 </component>

package/commons/components/layouts.xml

@@ -1,10 +1,3 @@
-<component id="Container">
-  <div class="container {class}" style="max-width: 720px;">
-    <a name="top"></a>
-    <ui:slot />
-  </div>
-</component>
-
 <component id="Panel">
   <h6 class="mt-2 pt-2 px-2 text-gray" ui:if="caption">{caption}</h6>
   <div class="panel {class}" style="{style}">
@@ -60,7 +53,7 @@
     <div class="card-body">
       <ui:slot />
     </div>
-    <div class="card-footer">
+    <div class="card-footer" ui:if="slot(footer)">
       <ui:slot id="footer" />
     </div>
   </div>
@@ -75,3 +68,10 @@
 </component>
 
 
+<component id="FixedPanel">
+  <div style="position: fixed; right: 0; {bottom|then:bottom:top}: 0; left: 0; z-index:3;">
+    <div class="{class}" style="max-width: 720px; margin: auto; display: flex; {style}">
+      <ui:slot />
+    </div>
+  </div>
+</component>

package/commons/components/modal.xml

@@ -15,11 +15,11 @@
     - mode: lg|sm
 
   -->
-  <div class="modal modal-{mode} {open|then:active}">
-    <a class="modal-overlay" aria-label="Close" click="{close}"></a>
+  <div class="modal modal-{mode} {open|then:active}" style="padding:0;">
+    <a class="modal-overlay" aria-label="Close" click="{close}" ui:if="mode|equals:lg|not"></a>
     <div class="modal-container" style="padding:0;max-height: {mode|equals:lg|then:100:70}vh">
-      <div class="modal-header" style="padding-bottom:0;">
-        <a class="btn btn-clear float-right" aria-label=":close" click="{close}"></a>
+      <div class="modal-header  bg-secondary" style="margin:0">
+        <a class="btn btn-lg btn-clear float-right" aria-label=":close" click="{close}"></a>
         <div class="modal-title h5" ui:if="{title}">{title}</div>
         <ui:slot id="header" />
       </div>

package/commons/components/navigation.xml

@@ -16,16 +16,15 @@
 </component>
 
 <component id="Navbar">
-  <header class="navbar sticky {class} bg-secondary" style="min-height: 48px;flex-wrap: nowrap;margin:0;">
-    <section class="navbar-section">
-      <div class="m-2 flexoid items-center">
+  <header class="navbar sticky {class} bg-secondary" style="height: 48px;flex-wrap: nowrap;margin:0;">
+    <section class="navbar-section" style="max-width:100%;">
+      <div class="m-2 d-flex items-center flex-1">
         <ui:slot id="left" />
-        <h5 class="m-1 text-dark {badge|then:badge}" style="vertical-align: middle" data-badge="{badge}" ui:if="{caption}">{caption}</h5>
+        <div style="flex:1; min-height:1.7rem;display:flex;align-items: center;">
+          <h4 class="text-dark text-ellipsis {badge|then:badge}" style="margin-bottom:0; flex:1;max-width:640px;" data-badge="{badge}" ui:if="{caption}">{caption}</h4>
+        </div>
       </div>
     </section>
-    <section class="navbar-center" ui:if="{logo}">
-      <img src="{logo}" style="max-height: 44px" />
-    </section>
     <section class="navbar-section flex-0 mx-2" ui:if="slot(right)">
       <ui:slot id="right" />
     </section>
@@ -57,3 +56,18 @@
     <ui:slot />
   </a>
 </component>
+
+<component id="NavListCursor">
+  <div class="d-flex {class}" style="min-width: 6rem;align-items: center;" ui:if="total">
+    <span class="p-2" ui:if="prev.id|not">
+      <Icon type="arrow-left"/>
+    </span>
+    <a class="p-2" href="#/task?itemId={prev.id}" ui:if="prev.id">
+      <Icon type="arrow-left"/>
+    </a>
+    <span class="text-dark text-ellipsis text-bold">{index|plus:1} / {total}</span>
+    <a class="p-2" href="#/task?itemId={next.id}" ui:if="next.id">
+      <Icon type="arrow-right"/>
+    </a>
+  </div>
+</component>

package/commons/components/searchbar.xml

@@ -8,33 +8,47 @@
 </component>
 
 <component id="SearchBarWithSuggestions">
-  <ui:fragment ui:if="opened.value">
-    <ui:then>
-      <div class="form-autocomplete mx-2">
-        <!-- autocomplete input container -->
-        <div class="form-autocomplete-input form-input input-sm">
-          <div class="input-group input-inline">
-            <input class="form-input" type="search" autofocus placeholder=":kluq_poshuku" keypress="{input}" value="{value}" style="max-width:120px;width:inherit" />
-            <i class="icon icon-cross m-2 c-hand" data-value="" click="{enter}" ui:if="value"></i>
-            <i class="icon icon-search m-2 c-hand" click="->opened|assignKeyValue:value:false" ui:if="value|not"></i>
-          </div>
-        </div>
-        <ul class="menu" style="min-width: 120px;max-height:7rem;overflow-y:auto;" ui:if="{suggestions}">
-          <li class="menu-item" ui:for="item of suggestions" data-value="{item.id}" click="{enter}">
-            <a>
+  <!-- <ui:fragment ui:if="opened.value|or:@value">
+    <ui:then> -->
+  <div class="form-autocomplete mx-2">
+    <!-- autocomplete input container -->
+    <div class="form-autocomplete-input form-input input-sm">
+      <div class="input-group input-inline">
+        <input class="form-input" type="search" placeholder=":kluq_poshuku" keypress="{input}" value="{value}" focus="->opened|assignKeyValue:value:true" style="width:inherit" />
+        <i class="icon icon-cross m-2 c-hand" data-value="" click="{enter}" click2="->opened|assignKeyValue:value:false" ui:if="value"></i>
+        <i class="icon icon-search m-2 c-hand" click="->opened|assignKeyValue:value:false" ui:if="value|not"></i>
+      </div>
+    </div>
+    <ui:fragment ui:if="opened.value|then:@suggestions">
+      <div style="position:fixed; right:0; top:0; left:0; bottom:0;" click="->opened|assignKeyValue:value:false"></div>
+      <ul class="menu" style="min-width: 140px;max-height:16rem;overflow-y:auto;">
+        <ui:fragment ui:if="suggestions.length">
+          <ui:then>
+            <li class="menu-item c-hand" ui:for="item of suggestions" data-value="{item.id}" click="{enter}">
+              <a>
+                <div class="tile tile-centered">
+                  <div class="tile-content">{item.name}</div>
+                </div>
+              </a>
+            </li>
+          </ui:then>
+          <ui:else>
+            <li class="menu-item">
               <div class="tile tile-centered">
-                <div class="tile-content">{item.name}</div>
+                <div class="tile-content text-gray">:strings.no_findings|or:no findings</div>
               </div>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </ui:then>
+            </li>
+          </ui:else>
+        </ui:fragment>
+      </ul>
+    </ui:fragment>
+  </div>
+  <!-- </ui:then>
     <ui:else>
-      <div class="mx-2" click="{open|bindArgs:true}">
+      <div class="mx-2" click="{open|fnBindArgs:true}">
         <i class="icon icon-search m-2 c-hand" click="->opened|assignKeyValue:value:true"></i>
       </div>
     </ui:else>
-  </ui:fragment>
+  </ui:fragment> -->
 
 </component>

package/commons/components/table.xml

@@ -3,7 +3,7 @@
 </component>
 
 <component id="EmptyData">
-  <div class="empty w100 {class}">
+  <div class="empty w100 m-0 {class}">
     <div class="empty-icon">
       <Icon type="{icon|or:people}" />
     </div>
@@ -15,6 +15,26 @@
   </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>
@@ -105,14 +125,14 @@
 </component>
 
 <component id="Chips">
-  <div class="py-2" style="z-index: 2;{style}">
+  <div class="chips mx-0 py-2 px-2 {class}">
     <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 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>
-          <span>{tag.name}</span>
+          <b>{tag.name}</b>
         </span>
       </span>
-      <span ui:if="data|findByKey:selected:true|truthy" class="label py-1 px-2 s-circle c-hand" click="{click|assignFirstArgKeyValue:id:}">
+      <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>

package/commons/components/toasts.xml

@@ -1,13 +1,18 @@
 <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 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>{message}</p>
+    <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>
-
+</component>