125 lines
3.3 KiB
TypeScript
125 lines
3.3 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
state,
|
|
css,
|
|
cssManager,
|
|
} from '@design.estate/dees-element';
|
|
import type { DeesAppuiBase } from '@design.estate/dees-catalog';
|
|
|
|
// View lifecycle interfaces (defined locally as they're not exported from dees-catalog)
|
|
interface IViewActivationContext {
|
|
appui: DeesAppuiBase;
|
|
viewId: string;
|
|
params?: Record<string, string>;
|
|
}
|
|
|
|
interface IViewLifecycle {
|
|
onActivate?: (context: IViewActivationContext) => void | Promise<void>;
|
|
onDeactivate?: () => void | Promise<void>;
|
|
}
|
|
import { adminState } from '../../services/admin-state.js';
|
|
import '../../elements/upladmin-statuspage-config/upladmin-statuspage-config.js';
|
|
|
|
type TConfigSection = 'branding' | 'urls' | 'behavior' | 'advanced';
|
|
|
|
@customElement('upladmin-config-view')
|
|
export class UpladminConfigView extends DeesElement implements IViewLifecycle {
|
|
@state()
|
|
accessor activeSection: TConfigSection = 'branding';
|
|
|
|
@state()
|
|
accessor loading: boolean = false;
|
|
|
|
private appuiRef: DeesAppuiBase | null = null;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
`,
|
|
];
|
|
|
|
async onActivate(context: IViewActivationContext): Promise<void> {
|
|
this.appuiRef = context.appui;
|
|
|
|
// Check route params for section
|
|
if (context.params?.section) {
|
|
const section = context.params.section as TConfigSection;
|
|
if (['branding', 'urls', 'behavior', 'advanced'].includes(section)) {
|
|
this.activeSection = section;
|
|
}
|
|
}
|
|
|
|
// Set secondary menu for configuration sections
|
|
this.updateSecondaryMenu();
|
|
|
|
// No content tabs for config
|
|
context.appui.setContentTabs([]);
|
|
}
|
|
|
|
private updateSecondaryMenu(): void {
|
|
if (!this.appuiRef) return;
|
|
|
|
this.appuiRef.setSecondaryMenu({
|
|
heading: 'Configuration',
|
|
groups: [
|
|
{
|
|
name: 'Settings',
|
|
iconName: 'lucide:settings',
|
|
items: [
|
|
{
|
|
key: 'branding',
|
|
iconName: 'lucide:palette',
|
|
action: () => this.setSection('branding'),
|
|
},
|
|
{
|
|
key: 'urls',
|
|
iconName: 'lucide:link',
|
|
action: () => this.setSection('urls'),
|
|
},
|
|
{
|
|
key: 'behavior',
|
|
iconName: 'lucide:sliders',
|
|
action: () => this.setSection('behavior'),
|
|
},
|
|
{
|
|
key: 'advanced',
|
|
iconName: 'lucide:wrench',
|
|
action: () => this.setSection('advanced'),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
|
|
// Select current section
|
|
this.appuiRef.setSecondaryMenuSelection(this.activeSection);
|
|
}
|
|
|
|
private setSection(section: TConfigSection): void {
|
|
this.activeSection = section;
|
|
this.appuiRef?.setSecondaryMenuSelection(section);
|
|
}
|
|
|
|
private handleConfigSave = (e: CustomEvent): void => {
|
|
console.log('Config saved:', e.detail);
|
|
// In a real implementation, this would save to the backend
|
|
};
|
|
|
|
render() {
|
|
return html`
|
|
<upladmin-statuspage-config
|
|
.config=${adminState.config || {}}
|
|
.activeSection=${this.activeSection}
|
|
.loading=${this.loading}
|
|
@configSave=${this.handleConfigSave}
|
|
></upladmin-statuspage-config>
|
|
`;
|
|
}
|
|
}
|