feat(core): Refactored plugin and request handling to use idpInterfaces

ts_web/elements/account/navigation.ts

@@ -7,11 +7,14 @@ import {
   unsafeCSS,
   css,
   type TemplateResult,
-  subscribe
+  subscribe,
 } from '@design.estate/dees-element';
 
 import * as plugins from '../../plugins.js';
 import * as states from '../../states/accountstate.js';
+import { IdpState } from '../../states/idp.state.js';
+
+import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -22,22 +25,22 @@ declare global {
 @customElement('lele-accountnavigation')
 export class LeleAccountNavigation extends DeesElement {
   @property()
-  public options: {text: string; id: string}[] = [
+  public options: { text: string; id: string }[] = [
     {
       id: '1',
-      text: 'Properties'
+      text: 'Properties',
     },
     {
       id: '2',
-      text: 'Users'
+      text: 'Users',
     },
     {
       id: '3',
-      text: 'Activity'
+      text: 'Activity',
     },
     {
       id: '4',
-      text: 'Billing & Subscription'
+      text: 'Billing & Subscription',
     },
   ];
 
@@ -60,6 +63,19 @@ export class LeleAccountNavigation extends DeesElement {
         display: none;
       }
 
+      .commitinfo {
+        text-align: center;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        width: 100%;
+        font-size: 12px;
+        padding: 8px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#181818')};
+        border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+      }
+
       .navigationGroupLabel {
         width: min-content;
         white-space: nowrap;
@@ -97,21 +113,46 @@ export class LeleAccountNavigation extends DeesElement {
   public render(): TemplateResult {
     return html`
       <style></style>
+      <div class="commitinfo">idp.global v${commitinfo.version}</div>
+      <div class="navigationGroupLabel">Account Settings</div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+          const idpState = await IdpState.getSingletonInstance();
+          idpState.domtools.router.pushUrl('/logout');
+        }}
+      >
+        logout
+      </div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+          
+        }}
+      >
+        manage roles
+      </div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+        }}
+      >
+        create an org
+      </div>
       <div class="navigationGroupLabel">Organization Settings</div>
-      <dees-input-dropdown .label=${'choose org:'}
+      <dees-input-dropdown
+        .label=${'choose org:'}
         @selectedOption=${(eventArg: CustomEvent) => {
-          const currentState = states.accountState.getState()
-          states.accountState.dispatchAction(states.setSelectedOrg, currentState.organizations.find(org => org.data.slug === eventArg.detail.payload));
+          const currentState = states.accountState.getState();
+          states.accountState.dispatchAction(
+            states.setSelectedOrg,
+            currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
+          );
         }}
       ></dees-input-dropdown>
-      ${this.options.map(option => {
-        return html`
-          <div class="navigationOption">
-            ${option.text}
-          </div>
-        `;
+      ${this.options.map((option) => {
+        return html` <div class="navigationOption">${option.text}</div> `;
       })}
-      <div class="navigationGroupLabel">Account Settings</div>
     `;
   }
 
@@ -125,19 +166,23 @@ export class LeleAccountNavigation extends DeesElement {
         option: orgArg.data.name,
         key: orgArg.data.slug,
         payload: orgArg.data.slug,
-      }
-    }
-    states.accountState.select(stateArg => stateArg.organizations).pipe(
-      plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgArrayArg => {
-        return orgArrayArg.map(orgToMenuEntry)
-      })
-    ).subscribe(menuEntries => {
-      deesInputDropdown.options = menuEntries;
-    });
-    states.accountState.select(stateArg => stateArg.selectedOrg).pipe(
-      plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgToMenuEntry)
-    ).subscribe(selectedOrgArg => {
-      deesInputDropdown.selectedOption = selectedOrgArg;
-    })
+      };
+    };
+    states.accountState
+      .select((stateArg) => stateArg.organizations)
+      .pipe(
+        plugins.deesDomtools.plugins.smartrx.rxjs.ops.map((orgArrayArg) => {
+          return orgArrayArg.map(orgToMenuEntry);
+        })
+      )
+      .subscribe((menuEntries) => {
+        deesInputDropdown.options = menuEntries;
+      });
+    states.accountState
+      .select((stateArg) => stateArg.selectedOrg)
+      .pipe(plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgToMenuEntry))
+      .subscribe((selectedOrgArg) => {
+        deesInputDropdown.selectedOption = selectedOrgArg;
+      });
   }
 }