chore: wip page accoutn

restorecommerce · Sep 19, 2023 · 48e6e32 · 48e6e32
1 parent 9fbadab
commit 48e6e32
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 16 deletions.
diff --git a/packages/modules/account/src/lib/components/account/account.component.ts b/packages/modules/account/src/lib/components/account/account.component.ts
@@ -1,8 +1,76 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { ROUTER } from '@console-core/config';
+import { AccountFacade } from '@console-core/state';
+
 @Component({
   selector: 'app-account',
-  template: ` <rc-page-account /> `,
+  template: `
+    <ng-container *ngIf="user$ | async as user">
+      <div class="row small-snap-vertical">
+        <rc-page-account-index>
+          <h3>
+            Personal Data [<a
+              [routerLink]="
+                ROUTER.pages.main.children.account.children.profile.path
+              "
+              >Edit</a
+            >]
+          </h3>
+          <ul>
+            <li><b>First Name</b>: {{ user.firstName }}</li>
+            <li><b>Last Name</b>: {{ user.lastName }}</li>
+          </ul>
+
+          <h3>
+            Account Data [<a
+              [routerLink]="
+                ROUTER.pages.main.children.account.children.profile.path
+              "
+              >Edit</a
+            >]
+          </h3>
+          <ul>
+            <li><b>Username</b>: {{ user.name }}</li>
+            <li><b>Email</b>: {{ user.email }}</li>
+          </ul>
+
+          <h3>
+            Account Information [<a
+              [routerLink]="
+                ROUTER.pages.main.children.account.children.preferences.path
+              "
+              >Edit</a
+            >]
+          </h3>
+          <ul>
+            <li><b>User ID</b>: {{ user.id }}</li>
+            <li><b>Status</b>: {{ user.active ? 'Active' : 'Not active' }}</li>
+            <li><b>Timezone ID:</b> {{ user.timezoneId || '-' }}</li>
+            <li><b>Locale ID</b>: {{ user.localeId || '-' }}</li>
+            <li><b>User Type</b>: {{ user.userType }}</li>
+            <li>
+              <b>Role Associations</b>:
+              <ul>
+                <li *ngFor="let association of user.roleAssociations">
+                  {{ association.role }}
+                </li>
+              </ul>
+            </li>
+            <li><b>Created</b>: {{ user.meta?.created }}</li>
+            <li><b>Updated</b>: {{ user.meta?.modified }}</li>
+          </ul>
+
+          <h3>Support</h3>
+          <p>Contact us at support@restorecommerce.io</p>
+        </rc-page-account-index>
+      </div>
+    </ng-container>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccountComponent {}
+export class AccountComponent {
+  ROUTER = ROUTER;
+  user$ = this.accountFacade.user$;
+  constructor(private readonly accountFacade: AccountFacade) {}
+}
diff --git a/packages/modules/account/src/lib/components/preferences/preferences.component.ts b/packages/modules/account/src/lib/components/preferences/preferences.component.ts
@@ -14,23 +14,23 @@ import { buildLocalizationDataSchema } from '../../jss-forms';
 @Component({
   selector: 'app-account-preferences',
   template: `
-    <rc-page-preferences>
-      <ng-container *ngIf="vm$ | async as vm">
+    <ng-container *ngIf="vm$ | async as vm">
+      <rc-page-preferences>
         <rc-account-localization-data
           [user]="vm.user"
           [isLoading]="vm.isLoading"
           [localizationFormSchema]="localizationFormSchema"
         />
-      </ng-container>
-    </rc-page-preferences>
+      </rc-page-preferences>
+    </ng-container>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PreferencesComponent implements OnInit {
   localizationFormSchema!: VCLFormFieldSchemaRoot;
 
   readonly vm$ = combineLatest({
-    user: this.accountFacade.profile$,
+    user: this.accountFacade.user$,
     isLoading: this.accountFacade.isLoading$,
     locales: this.localeFacade.allLocales$,
     timezones: this.timezoneFacade.allTimezones$,

diff --git a/packages/modules/account/src/lib/components/profile/profile.component.ts b/packages/modules/account/src/lib/components/profile/profile.component.ts
@@ -50,7 +50,7 @@ export class ProfileComponent {
   personalFormSchema!: VCLFormFieldSchemaRoot;
 
   readonly vm$ = combineLatest({
-    profile: this.accountFacade.profile$.pipe(
+    profile: this.accountFacade.user$.pipe(
       filterNullish(),
       tap((user) => {
         this.personalFormSchema = buildPersonalDataSchema({ user });

diff --git a/.../ui/src/lib/components/pages/account/page-account-index/page-account-index.component.html b/.../ui/src/lib/components/pages/account/page-account-index/page-account-index.component.html
@@ -0,0 +1 @@
+<ng-content />
diff --git a/...es/ui/src/lib/components/pages/account/page-account-index/page-account-index.component.ts b/...es/ui/src/lib/components/pages/account/page-account-index/page-account-index.component.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'rc-page-account-index',
+  templateUrl: './page-account-index.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RcPageAccountIndexComponent {}
diff --git a/packages/modules/ui/src/lib/components/pages/index.ts b/packages/modules/ui/src/lib/components/pages/index.ts
@@ -7,6 +7,7 @@ export * from './authn/page-sign-up/page-sign-up.component';
 export * from './account/page-profile/page-profile.component';
 export * from './account/page-preferences/page-preferences.component';
 export * from './account/page-account.component';
+export * from './account/page-account-index/page-account-index.component';
 export * from './page-home/page-home.component';
 export * from './page-layout/page-layout.component';
 export * from './page-overflow/page-overflow.component';
diff --git a/packages/modules/ui/src/lib/components/pages/page-layout/page-layout.component.html b/packages/modules/ui/src/lib/components/pages/page-layout/page-layout.component.html
@@ -1,5 +1,5 @@
 <div class="row grid-gutterx-3 px-2">
-  <div class="rc-flex-sidebar">
+  <div class="col rc-flex-sidebar">
     <rc-toolbar>
       Sidebar Toolbar
       <button

diff --git a/packages/modules/ui/src/lib/components/pages/page-overflow/page-overflow.component.html b/packages/modules/ui/src/lib/components/pages/page-overflow/page-overflow.component.html
@@ -1,3 +1,5 @@
-<div class="row grid-gutterx-2">
-  <ng-content />
+<div class="row grid-gutterx-3 px-2">
+  <div class="col">
+    <ng-content />
+  </div>
 </div>
diff --git a/packages/modules/ui/src/lib/components/templates/private/private-template.component.html b/packages/modules/ui/src/lib/components/templates/private/private-template.component.html
@@ -515,6 +515,13 @@
       >
         <rc-drawer-navigation-item
           icon="mdi:account"
+          [routerLink]="ROUTER.pages.main.children.account.link"
+          [routerLinkActive]="['selected']"
+          [routerLinkActiveOptions]="{ exact: true }"
+          >Account</rc-drawer-navigation-item
+        >
+        <rc-drawer-navigation-item
+          icon="mdi:account-cog"
           [routerLink]="
             ROUTER.pages.main.children.account.children.profile.link
           "
@@ -545,7 +552,9 @@
     </rc-drawer-navigation>
 
     <div class="row grid-gutterx-3 px-2">
-      <rc-page-header />
+      <div class="col">
+        <rc-page-header />
+      </div>
     </div>
 
     <ng-content />
@@ -563,9 +572,7 @@
     >
       <ul class="data-list-body no-border">
         <li
-          [routerLink]="
-            ROUTER.pages.main.children.account.children.profile.link
-          "
+          [routerLink]="ROUTER.pages.main.children.account.link"
           class="data-list-item row justify-between center"
         >
           <div class="gutter-margin flex">

diff --git a/packages/modules/ui/src/lib/components/templates/private/private-template.component.ts b/packages/modules/ui/src/lib/components/templates/private/private-template.component.ts
@@ -28,7 +28,7 @@ export class RcPrivateTemplateComponent implements OnInit, OnDestroy {
   APP = APP;
   ROUTER = ROUTER;
   readonly vm$ = combineLatest({
-    user: this.accountFacade.profile$,
+    user: this.accountFacade.user$,
   });
   currentRoute!: string;
   currentRouteTitle!: string;

diff --git a/packages/modules/ui/src/lib/modules-ui.module.ts b/packages/modules/ui/src/lib/modules-ui.module.ts
@@ -67,6 +67,7 @@ import {
   RcPageLayoutComponent,
   RcPageOverflowComponent,
   RcPageAccountComponent,
+  RcPageAccountIndexComponent,
   RcPageProfileComponent,
   RcPagePreferencesComponent,
 } from './components/pages';
@@ -125,6 +126,7 @@ const pages = [
   RcPageSignOutComponent,
   RcPagePasswordRecoveryComponent,
   RcPageAccountComponent,
+  RcPageAccountIndexComponent,
   RcPageProfileComponent,
   RcPagePreferencesComponent,
 ];