144 lines
3.6 KiB
TypeScript
144 lines
3.6 KiB
TypeScript
import {
|
|
customElement,
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
cssManager,
|
|
unsafeCSS,
|
|
css,
|
|
type TemplateResult,
|
|
subscribe
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as plugins from '../../plugins.js';
|
|
import * as states from '../../states/accountstate.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'lele-accountnavigation': LeleAccountNavigation;
|
|
}
|
|
}
|
|
|
|
@customElement('lele-accountnavigation')
|
|
export class LeleAccountNavigation extends DeesElement {
|
|
@property()
|
|
public options: {text: string; id: string}[] = [
|
|
{
|
|
id: '1',
|
|
text: 'Properties'
|
|
},
|
|
{
|
|
id: '2',
|
|
text: 'Users'
|
|
},
|
|
{
|
|
id: '3',
|
|
text: 'Activity'
|
|
},
|
|
{
|
|
id: '4',
|
|
text: 'Billing & Subscription'
|
|
},
|
|
];
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
padding: 10px;
|
|
padding-left: 0px;
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#111')};
|
|
border-right: ${cssManager.bdTheme('1px solid #ccc', '')};
|
|
}
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
.navigationGroupLabel {
|
|
width: min-content;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
font-weight: 300;
|
|
border-bottom: 1px dotted #666;
|
|
margin-bottom: 5px;
|
|
padding-top: 32px;
|
|
padding-left: 10px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.navigationOption {
|
|
border-top-right-radius: 30px;
|
|
border-bottom-right-radius: 30px;
|
|
font-weight: 500;
|
|
padding: 8px;
|
|
padding-left: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.navigationOption:hover {
|
|
cursor: pointer;
|
|
background: ${cssManager.bdTheme('#bbb', '#333')};
|
|
}
|
|
dees-input-dropdown {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
margin-left: 8px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<style></style>
|
|
<div class="navigationGroupLabel">Organization Settings</div>
|
|
<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));
|
|
}}
|
|
></dees-input-dropdown>
|
|
${this.options.map(option => {
|
|
return html`
|
|
<div class="navigationOption">
|
|
${option.text}
|
|
</div>
|
|
`;
|
|
})}
|
|
<div class="navigationGroupLabel">Account Settings</div>
|
|
`;
|
|
}
|
|
|
|
public firstUpdated() {
|
|
const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
|
|
const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
|
|
if (!orgArg) {
|
|
return null;
|
|
}
|
|
return {
|
|
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;
|
|
})
|
|
}
|
|
}
|