feat(com-pwa): admin order list page

.gitignore

@@ -41,3 +41,4 @@ package-lock.json
 temp
 _data
 db
+chrome-profile

uniquely/com-api/src/lib/config.ts

@@ -18,7 +18,7 @@ export const config = {
   storageClient: {
     host: process.env.STORAGE_HOST ?? '127.0.0.1',
     port: process.env.STORAGE_PORT != null ? +process.env.STORAGE_PORT : 9000,
-    token: process.env.STORAGE_TOKEN ?? 'YOUR_SECRET',
+    token: process.env.STORAGE_TOKEN ?? 'YOUR_SECRET_TOKEN',
   },
 
   token: {

uniquely/com-pwa/src/config.ts

@@ -30,7 +30,7 @@ export const config = {
     newOrder: apiBaseUrl + 'order',
 
     // admin access
-    userList: apiBaseUrl + 'user-list',
+    adminUserListIncOrder: apiBaseUrl + 'admin/user-list-inc-order',
   },
 
   fetchContextOptions: <Partial<FetchOptions>>{

uniquely/com-pwa/src/content/l18e-fa.json

@@ -44,7 +44,17 @@
     "page_order_order_not_valid_message": "لطفا مقادیر سفارش رو بازبینی و اصلاح کنید.",
     "order_summary_palette_price": "هزینه پالت (${paletteCount} عدد)",
 
-    "page_order_tracking_headline": "پیگیری سفارش",
+    "page_admin_order_list_headline": "لیست سفارشات کاربران",
+    "page_admin_order_list_phone_number": "شماره تلفن",
+    "page_admin_order_list_province": "استان",
+    "page_admin_order_list_city": "شهر",
+    "page_admin_order_list_order_id": "کد سفارش",
+    "page_admin_order_list_order_list": "لیست سفارشات",
+    "page_admin_order_list_order_status": "وضعیت سفارش",
+    "page_admin_order_list_order_date": "تاریخ ثبت سفارش",
+    "page_admin_order_list_empty_order_list": "سفارشی ثبت نشده است.",
+
+    "page_admin_order_list_reloading_failed": "بارگذاری با خطا روبرو شد، لطفا مجدد تلاش کنید.",
 
     "page_sign_in_headline": "مدیریت سفارشات سافیت",
     "page_sign_sign_in_failed": "ورود با خطا روبرو شد! لطفا دوباره امتحان کنید.",

uniquely/com-pwa/src/manager/buttons.ts

@@ -24,6 +24,11 @@ export const buttons = {
     icon: 'reload-outline',
   },
 
+  reloadAdminOrderListStorage: {
+    icon: 'reload-outline',
+    flipRtl: true,
+    clickSignalId: 'reload_admin_order_list_storage',
+  },
   reloadOrderStorage: {
     icon: 'reload-outline',
     flipRtl: true,

uniquely/com-pwa/src/manager/context-provider/user-list-storage.ts

@@ -3,19 +3,20 @@ import {serverContextConsumer} from '@alwatr/context';
 import {userProfileContextConsumer} from './user.js';
 import {config} from '../../config.js';
 
-import type {AlwatrDocumentStorage} from '@alwatr/type';
-import type {ComUser} from '@alwatr/type/customer-order-management.js';
+import type {AlwatrServiceResponseSuccessWithMeta} from '@alwatr/type';
+import type {ComUserIncOrder} from '@alwatr/type/customer-order-management.js';
 
-export const userListStorageContextConsumer = serverContextConsumer<AlwatrDocumentStorage<ComUser>>(
-    'user_list_storage_context',
-    {
-      ...config.fetchContextOptions,
-      url: config.serverContext.userList,
-    },
-);
+export const userListIncOrderStorageContextConsumer =
+  serverContextConsumer<AlwatrServiceResponseSuccessWithMeta<Record<string, ComUserIncOrder>>>(
+      'admin_order_list_storage_context',
+      {
+        ...config.fetchContextOptions,
+        url: config.serverContext.adminUserListIncOrder,
+      },
+  );
 
 userProfileContextConsumer.subscribe((userProfile) => {
-  userListStorageContextConsumer.request({
+  userListIncOrderStorageContextConsumer.request({
     userAuth: {
       id: userProfile.id,
       token: userProfile.token!,

uniquely/com-pwa/src/ui/alwatr-pwa.ts

@@ -33,7 +33,8 @@ class AlwatrPwa extends AlwatrPwaElement {
       'home': this._renderPageHome,
       '_404': this._renderPage404,
       'order-list': this._renderPageOrderList,
-      'user-list': this._renderPageUserList,
+      'admin-order-list': this._renderPageAdminOrderList,
+      'admin-order': this._renderPageAdminOrder,
       'order': this._renderPageOrder,
       'sign-in': this._renderPageSignIn,
       's': this._saveLinkPass,
@@ -61,10 +62,21 @@ class AlwatrPwa extends AlwatrPwaElement {
     return html`<alwatr-page-order-list unresolved>...</alwatr-page-order-list>`;
   }
 
-  protected _renderPageUserList(): unknown {
-    import('./page/user-list.js');
+  protected _renderPageAdminOrderList(): unknown {
+    import('./page/admin-order-list.js');
     topAppBarContextProvider.setValue({headlineKey: 'loading'});
-    return html`<alwatr-page-user-list unresolved>...</alwatr-page-user-list>`;
+    return html`<alwatr-page-admin-order-list unresolved>...</alwatr-page-admin-order-list>`;
+  }
+
+  protected _renderPageAdminOrder(routeContext: RouteContext): unknown {
+    import('./page/admin-order.js');
+    topAppBarContextProvider.setValue({headlineKey: 'loading'});
+    return html`<alwatr-page-admin-order
+      .userId=${routeContext.sectionList[1]}
+      .orderId=${routeContext.sectionList[2]}
+      unresolved
+      >...</alwatr-page-admin-order
+    >`;
   }
 
   protected _renderPageOrder(routeContext: RouteContext): unknown {
@@ -101,11 +113,7 @@ class AlwatrPwa extends AlwatrPwaElement {
       return;
     }
     // else
-    if (
-      routeId !== 'sign-in' &&
-      routeId !== 's' &&
-      routeId !== ''
-    ) {
+    if (routeId !== 'sign-in' && routeId !== 's' && routeId !== '') {
       redirect({sectionList: ['sign-in']});
     }
   }

uniquely/com-pwa/src/ui/page/admin-order-list.ts

@@ -0,0 +1,171 @@
+import {
+  customElement,
+  css,
+  html,
+  LocalizeMixin,
+  SignalMixin,
+  AlwatrBaseElement,
+  UnresolvedMixin,
+  state,
+  ScheduleUpdateToFrameMixin,
+  when,
+  mapObject,
+  type PropertyValues,
+} from '@alwatr/element';
+import {message} from '@alwatr/i18n';
+import {eventListener} from '@alwatr/signal';
+import '@alwatr/ui-kit/button/button.js';
+import '@alwatr/ui-kit/card/icon-box.js';
+import '@alwatr/ui-kit/card/surface.js';
+
+import {buttons} from '../../manager/buttons.js';
+import {userListIncOrderStorageContextConsumer} from '../../manager/context-provider/user-list-storage.js';
+import {topAppBarContextProvider} from '../../manager/context.js';
+import '../stuff/user-inc-order-box.js';
+
+import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-admin-order-list': AlwatrPageAdminOrderList;
+  }
+}
+
+/**
+ * List of all users.
+ */
+@customElement('alwatr-page-admin-order-list')
+export class AlwatrPageAdminOrderList extends ScheduleUpdateToFrameMixin(
+    UnresolvedMixin(LocalizeMixin(SignalMixin(AlwatrBaseElement))),
+) {
+  static override styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      padding: calc(2 * var(--sys-spacing-track));
+      box-sizing: border-box;
+      min-height: 100%;
+      gap: var(--sys-spacing-track);
+      transform: opacity var(--sys-motion-duration-small);
+    }
+
+    :host([state='reloading']) {
+      opacity: var(--sys-surface-reloading-opacity);
+    }
+
+    .reloading-failed {
+      margin-bottom: var(--sys-spacing-track);
+    }
+  `;
+
+  @state()
+    gotState = userListIncOrderStorageContextConsumer.getState().target;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this._addSignalListeners(userListIncOrderStorageContextConsumer.subscribe(() => {
+      this.gotState = userListIncOrderStorageContextConsumer.getState().target;
+    }, {receivePrevious: 'NextCycle'}));
+
+    this._addSignalListeners(eventListener.subscribe(buttons.retry.clickSignalId, () => {
+      userListIncOrderStorageContextConsumer.request();
+    }));
+    this._addSignalListeners(eventListener.subscribe(buttons.reloadAdminOrderListStorage.clickSignalId, () => {
+      userListIncOrderStorageContextConsumer.request();
+    }));
+  }
+
+  protected override update(changedProperties: PropertyValues<this>): void {
+    super.update(changedProperties);
+    if (changedProperties.has('gotState')) {
+      this.setAttribute('state', this.gotState);
+    }
+  }
+
+  override render(): unknown {
+    this._logger.logMethod?.('render');
+    return userListIncOrderStorageContextConsumer.fsm.render({
+      initial: 'onlineLoading',
+      offlineLoading: 'onlineLoading',
+      onlineLoading: this._renderStateLoading,
+      loadingFailed: this._renderStateLoadingFailed,
+      reloadingFailed: 'complete',
+      reloading: 'complete',
+      complete: this._renderStateComplete,
+    }, this);
+  }
+
+  protected _renderStateLoading(): unknown {
+    this._logger.logMethod?.('_renderStateLoading');
+
+    topAppBarContextProvider.setValue({
+      headlineKey: 'loading',
+      startIcon: buttons.backToHome,
+    });
+    const content: IconBoxContent = {
+      tinted: 1,
+      icon: 'cloud-download-outline',
+      headline: message('loading'),
+    };
+    return html`<alwatr-icon-box .content=${content}></alwatr-icon-box>`;
+  }
+
+  protected _renderStateLoadingFailed(): unknown {
+    this._logger.logMethod?.('_renderStateLoadingFailed');
+
+    topAppBarContextProvider.setValue({
+      headlineKey: 'page_order_list_headline',
+      startIcon: buttons.backToHome,
+      endIconList: [buttons.reloadOrderStorage],
+    });
+    const content: IconBoxContent = {
+      icon: 'cloud-offline-outline',
+      tinted: 1,
+      headline: message('fetch_failed_headline'),
+      description: message('fetch_failed_description'),
+    };
+    return html`
+      <alwatr-icon-box .content=${content}></alwatr-icon-box>
+      <div>
+        <alwatr-button .content=${buttons.retry}></alwatr-button>
+      </div>
+    `;
+  }
+
+  protected _renderStateComplete(): unknown {
+    this._logger.logMethod?.('_renderStateComplete');
+
+    topAppBarContextProvider.setValue({
+      headlineKey: 'page_admin_order_list_headline',
+      startIcon: buttons.backToHome,
+      endIconList: [
+        buttons.newOrder, {...buttons.reloadAdminOrderListStorage, disabled: this.gotState === 'reloading'},
+      ],
+    });
+    return html`
+      ${when(this.gotState === 'reloadingFailed', this._render_reloadingFailed)}
+      ${this._render_usersList()}
+    `;
+  }
+
+  private _render_usersList(): unknown {
+    const userStorage = userListIncOrderStorageContextConsumer.getResponse();
+    this._logger.logMethodArgs?.('renderUsersList', {userStorage});
+
+    return mapObject(
+        this,
+        userStorage?.data,
+        (userIncOrder) => {
+          if (userIncOrder.fullName === 'Alwatr Admin') return;
+          return html`<alwatr-user-inc-order-box .userIncOrder=${userIncOrder}></alwatr-user-inc-order-box>`;
+        },
+    );
+  }
+
+  private _render_reloadingFailed(): unknown {
+    return html`<alwatr-surface tinted class="reloading-failed">
+      ${message('page_admin_order_list_reloading_failed')}
+    </alwatr-surface>`;
+  }
+}