app/ts_web/elements/account/views/baseview.ts

import * as plugins from '../../../plugins.js';
import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  render,
  directives,
} from '@design.estate/dees-element';

import sharedStyles from '../sharedstyles.js';

declare global {
  interface HTMLElementTagNameMap {
    'lele-accountview-baseview': BaseView;
  }
}

import * as state from '../../../states/accountstate.js';

@customElement('lele-accountview-baseview')
export class BaseView extends DeesElement {
  @property({
    type: Array,
  })
  accessor subscriptions: any[] = [
    {
      organization: 'org1',
      'subscription type': 'workspace.global SaaS',
      price: '4€',
      userFactor: 4,
      total: '16.00€',
    },
    {
      organization: 'org1',
      'subscription type': 'workspace.global IaaS Base Access',
      price: '0€',
      userFactor: 4,
      total: '0€',
    },
    {
      organization: 'org1',
      'subscription type': 'workspace.global SLA Senior',
      price: '2000€',
      userFactor: 'none',
      total: '2000.00€',
    },
  ];

  public static styles = [
    cssManager.defaultStyles,
    sharedStyles,
    css`
      :host {
        display: block;
        max-width: 900px;
        margin: auto;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }
      .slug {
        color: orange;
      }

      .orgGrid {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: ${cssManager.cssGridColumns(2, 16)};
      }

      .org {
        padding: 16px;
        border-top: 1px solid #444;
        background: ${cssManager.bdTheme('#ccc', '#222')};
        border-radius: 16px;
      }

      .org:hover {
        cursor: default;
        background: ${cssManager.bdTheme('#CCC', '#333')};
      }
    `,
  ];

  public render() {
    return html`
    <div class="viewHost">

    </div> `;
  }

  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
    const viewHost: HTMLDivElement = this.shadowRoot.querySelector('.viewHost');
    await state.accountState.dispatchAction(state.getOrganizationsAction, null);
    console.log('got orgs');
    if (state.accountState.getState().organizations.length === 0) {
      render(
        html`
          <h1>Setup Your Account</h1>
          <p>
            There are no organizations for your account. Please create one now. Alternatively you
            can ask an admin of an existing organization to invite you.
          </p>
          <dees-form>
            <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
          </dees-form>
          <p>
            The organization slug corresponds to the organization name:<br />
            <span class="slug"
              >${directives.subscribe(
                state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
              )}</span
            >
          </p>
          <span class="hint"></span>
          <dees-button .disabled=${true}>Create the Organization</dees-button>
        `,
        viewHost
      );
      const subscriptions: plugins.deesDomtools.plugins.smartrx.rxjs.Subscription[] = [];
      const form = this.shadowRoot.querySelector('dees-form');
      const orgInput = this.shadowRoot.querySelector('dees-input-text');
      const hint = this.shadowRoot.querySelector('.hint');
      const button = this.shadowRoot.querySelector('dees-button');
      const newOrgSubscription = state.accountState
        .select((stateArg) => stateArg.newOrg)
        .subscribe((data) => {
          if (data.chosenSlug) {
            hint.innerHTML = 'Waiting: Validating...';
          } else {
            hint.innerHTML = 'Hint: Enter a valid organization name.';
          }
          if (data.validated && data.validationOk) {
            hint.innerHTML =
              'Success: Name is available. Please click the button to create the organization.';
            button.disabled = false;
          } else if (!data.validated || !data.validationOk) {
            hint.innerHTML = `Info: Name not available. Please choose another one.`;
            button.disabled = true;
          }
        });
      subscriptions.push(newOrgSubscription);

      const formSubscription = form.changeSubject.subscribe(async (dataArg: any) => {
        await state.accountState.dispatchAction(state.setNewOrgName, dataArg.orgName);
      });
      subscriptions.push(formSubscription);
      button.addEventListener('clicked', async () => {
        orgInput.disabled = true;
        button.text = 'creating org...';
        button.status = 'pending';
        hint.innerHTML = 'Waiting for creation of the organization...';
        await state.accountState.dispatchAction(state.manifestNewOrgName, null);
        hint.innerHTML = `The Organization with name ${
          state.accountState.getState().organizations[0].data.name
        } has been created!`;
        button.text = 'created!';
        button.status = 'success';
        const parentElement = (this.getRootNode() as any).host;
        parentElement.subrouter.pushUrl(
          `/org/${state.accountState.getState().organizations[0].data.slug}/billing`
        );
      });
    } else {
      render(
        html`
          <h1>Select An Organization</h1>
          <div class="orgGrid">
            ${state.accountState.getState().organizations.map((orgArg) => {
              return html`
                <div
                  class="org"
                  @click=${() => {
                    state.accountState.dispatchAction(state.setSelectedOrg, orgArg);
                    const parentElement = (this.getRootNode() as any).host;
                    parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
                  }}
                >
                  <dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
                </div>
              `;
            })}
          </div>
        `,
        viewHost
      );
    }
  }
}