feat(account): Refactor account UI: migrate modals to promise-based show() API and improve navigation URL tracking
This commit is contained in:
@@ -1,318 +1,209 @@
|
||||
import * as plugins from '../../plugins.js';
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
cssManager,
|
||||
css,
|
||||
state,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { accountDesignTokens } from './sharedstyles.js';
|
||||
import * as accountStateModule from '../../states/accountstate.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'idp-org-select-modal': OrgSelectModal;
|
||||
}
|
||||
export interface IOrgSelectResult {
|
||||
org: plugins.idpInterfaces.data.IOrganization;
|
||||
path: string;
|
||||
}
|
||||
|
||||
@customElement('idp-org-select-modal')
|
||||
export class OrgSelectModal extends DeesElement {
|
||||
@state()
|
||||
accessor visible: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor organizations: plugins.idpInterfaces.data.IOrganization[] = [];
|
||||
|
||||
@state()
|
||||
accessor targetPath: string = '';
|
||||
|
||||
@state()
|
||||
accessor title: string = 'Select Organization';
|
||||
|
||||
@state()
|
||||
accessor description: string = 'Choose an organization to continue.';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
accountDesignTokens,
|
||||
css`
|
||||
:host {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([visible]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #18181b;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
animation: slideIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 4px 0;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
font-size: 14px;
|
||||
color: #71717a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.org-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.org-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 24px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.org-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.org-item:hover {
|
||||
background: #27272a;
|
||||
}
|
||||
|
||||
.org-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: #27272a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.org-item:hover .org-icon {
|
||||
background: #3f3f46;
|
||||
}
|
||||
|
||||
.org-icon dees-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.org-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.org-slug {
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
.org-arrow {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
.empty-state dees-icon {
|
||||
font-size: 40px;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #27272a;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.visible) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="overlay" @click=${this.handleOverlayClick}>
|
||||
<div class="modal" @click=${(e: Event) => e.stopPropagation()}>
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">${this.title}</h2>
|
||||
<p class="modal-description">${this.description}</p>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
${this.organizations.length === 0
|
||||
? this.renderEmptyState()
|
||||
: this.renderOrgList()}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<dees-button type="secondary" @clicked=${this.handleCancel}>
|
||||
Cancel
|
||||
</dees-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const modalStyles = css`
|
||||
.org-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
private renderOrgList(): TemplateResult {
|
||||
return html`
|
||||
<div class="org-list">
|
||||
${this.organizations.map((org) => html`
|
||||
<div class="org-item" @click=${() => this.handleSelectOrg(org)}>
|
||||
<div class="org-icon">
|
||||
<dees-icon .icon=${'lucide:building2'}></dees-icon>
|
||||
</div>
|
||||
<div class="org-info">
|
||||
<div class="org-name">${org.data.name}</div>
|
||||
<div class="org-slug">${org.data.slug}</div>
|
||||
</div>
|
||||
<dees-icon class="org-arrow" .icon=${'lucide:chevron-right'}></dees-icon>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
`;
|
||||
.org-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--dees-color-line);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
private renderEmptyState(): TemplateResult {
|
||||
return html`
|
||||
<div class="empty-state">
|
||||
<dees-icon .icon=${'lucide:building2'}></dees-icon>
|
||||
<p>You don't have any organizations yet.</p>
|
||||
<dees-button @clicked=${this.handleCreateOrg}>
|
||||
<dees-icon .icon=${'lucide:plus'} slot="iconLeft"></dees-icon>
|
||||
Create Organization
|
||||
</dees-button>
|
||||
</div>
|
||||
`;
|
||||
.org-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
public show(options: {
|
||||
.org-item:hover {
|
||||
background: var(--dees-color-softBackground);
|
||||
}
|
||||
|
||||
.org-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: var(--dees-color-softBackground);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.org-item:hover .org-icon {
|
||||
background: var(--dees-color-line);
|
||||
}
|
||||
|
||||
.org-icon dees-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.org-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
color: var(--dees-color-text);
|
||||
}
|
||||
|
||||
.org-slug {
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-muted);
|
||||
}
|
||||
|
||||
.org-arrow {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
color: var(--dees-color-muted);
|
||||
}
|
||||
|
||||
.empty-state dees-icon {
|
||||
font-size: 40px;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--dees-color-muted);
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export class OrgSelectModal {
|
||||
public static async show(options: {
|
||||
targetPath: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
}) {
|
||||
this.targetPath = options.targetPath;
|
||||
this.title = options.title || 'Select Organization';
|
||||
this.description = options.description || 'Choose an organization to continue.';
|
||||
}): Promise<IOrgSelectResult | null> {
|
||||
const title = options.title || 'Select Organization';
|
||||
const description = options.description || 'Choose an organization to continue.';
|
||||
|
||||
// Load organizations from state
|
||||
const state = accountStateModule.accountState.getState();
|
||||
this.organizations = state.organizations;
|
||||
const organizations = state.organizations;
|
||||
|
||||
this.visible = true;
|
||||
this.setAttribute('visible', '');
|
||||
}
|
||||
return new Promise<IOrgSelectResult | null>((resolve) => {
|
||||
let modal: plugins.deesCatalog.DeesModal | null = null;
|
||||
let resolved = false;
|
||||
|
||||
public hide() {
|
||||
this.visible = false;
|
||||
this.removeAttribute('visible');
|
||||
}
|
||||
const handleSelectOrg = (org: plugins.idpInterfaces.data.IOrganization) => {
|
||||
if (resolved) return;
|
||||
resolved = true;
|
||||
|
||||
private handleOverlayClick(e: Event) {
|
||||
if ((e.target as HTMLElement).classList.contains('overlay')) {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
accountStateModule.accountState.dispatchAction(accountStateModule.setSelectedOrg, org);
|
||||
const path = options.targetPath.replace(':orgName', org.data.slug);
|
||||
|
||||
private handleCancel() {
|
||||
this.hide();
|
||||
}
|
||||
modal?.destroy();
|
||||
resolve({ org, path });
|
||||
};
|
||||
|
||||
private handleSelectOrg(org: plugins.idpInterfaces.data.IOrganization) {
|
||||
accountStateModule.accountState.dispatchAction(accountStateModule.setSelectedOrg, org);
|
||||
const handleCreateOrg = async () => {
|
||||
if (resolved) return;
|
||||
resolved = true;
|
||||
modal?.destroy();
|
||||
|
||||
// Replace :orgName placeholder with actual slug
|
||||
const path = this.targetPath.replace(':orgName', org.data.slug);
|
||||
// Import dynamically to avoid circular dependency
|
||||
const { CreateOrgModal } = await import('./create-org-modal.js');
|
||||
const createdOrg = await CreateOrgModal.show();
|
||||
|
||||
this.dispatchEvent(new CustomEvent('org-selected', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: { org, path },
|
||||
}));
|
||||
if (createdOrg) {
|
||||
const path = options.targetPath.replace(':orgName', createdOrg.data.slug);
|
||||
resolve({ org: createdOrg, path });
|
||||
} else {
|
||||
resolve(null);
|
||||
}
|
||||
};
|
||||
|
||||
this.hide();
|
||||
}
|
||||
const renderOrgList = (): TemplateResult => {
|
||||
return html`
|
||||
<style>${modalStyles}</style>
|
||||
<div class="description">${description}</div>
|
||||
<div class="org-list">
|
||||
${organizations.map((org) => html`
|
||||
<div class="org-item" @click=${() => handleSelectOrg(org)}>
|
||||
<div class="org-icon">
|
||||
<dees-icon .icon=${'lucide:building2'}></dees-icon>
|
||||
</div>
|
||||
<div class="org-info">
|
||||
<div class="org-name">${org.data.name}</div>
|
||||
<div class="org-slug">${org.data.slug}</div>
|
||||
</div>
|
||||
<dees-icon class="org-arrow" .icon=${'lucide:chevron-right'}></dees-icon>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
private handleCreateOrg() {
|
||||
this.hide();
|
||||
this.dispatchEvent(new CustomEvent('open-create-org-modal', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
const renderEmptyState = (): TemplateResult => {
|
||||
return html`
|
||||
<style>${modalStyles}</style>
|
||||
<div class="empty-state">
|
||||
<dees-icon .icon=${'lucide:building2'}></dees-icon>
|
||||
<p>You don't have any organizations yet.</p>
|
||||
<dees-button @clicked=${handleCreateOrg}>
|
||||
<dees-icon .icon=${'lucide:plus'} slot="iconLeft"></dees-icon>
|
||||
Create Organization
|
||||
</dees-button>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const content = organizations.length === 0 ? renderEmptyState() : renderOrgList();
|
||||
|
||||
plugins.deesCatalog.DeesModal.createAndShow({
|
||||
heading: title,
|
||||
content,
|
||||
menuOptions: [
|
||||
{
|
||||
name: 'Cancel',
|
||||
action: async (modalRef) => {
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
resolve(null);
|
||||
}
|
||||
modalRef.destroy();
|
||||
},
|
||||
},
|
||||
],
|
||||
width: 420,
|
||||
}).then((m) => {
|
||||
modal = m;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user