Feature: Section lib (#678)

create section lib

src/Umbraco.Web.UI.Client/libs/section/index.ts

@@ -0,0 +1,2 @@
+export * from './sidebar/section-sidebar.context';
+export * from './section.context';

src/Umbraco.Web.UI.Client/libs/section/section.context.ts

@@ -0,0 +1,27 @@
+import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
+import type { Entity } from '@umbraco-cms/backoffice/models';
+import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export type ActiveTreeItemType = Entity | undefined;
+
+export class UmbSectionContext {
+	#manifestAlias = new UmbStringState<string | undefined>(undefined);
+	#manifestPathname = new UmbStringState<string | undefined>(undefined);
+	#manifestLabel = new UmbStringState<string | undefined>(undefined);
+	public readonly alias = this.#manifestAlias.asObservable();
+	public readonly pathname = this.#manifestPathname.asObservable();
+	public readonly label = this.#manifestLabel.asObservable();
+
+	constructor(manifest: ManifestSection) {
+		this.setManifest(manifest);
+	}
+
+	public setManifest(manifest?: ManifestSection) {
+		this.#manifestAlias.next(manifest?.alias);
+		this.#manifestPathname.next(manifest?.meta?.pathname);
+		this.#manifestLabel.next(manifest ? manifest.meta?.label || manifest.name : undefined);
+	}
+}
+
+export const UMB_SECTION_CONTEXT_TOKEN = new UmbContextToken<UmbSectionContext>('UmbSectionContext');

src/Umbraco.Web.UI.Client/libs/section/sidebar/section-sidebar.context.ts

@@ -0,0 +1,47 @@
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
+import { UmbStringState, UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+
+export class UmbSectionSidebarContext {
+	#host: UmbControllerHostElement;
+	#contextMenuIsOpen = new UmbBooleanState(false);
+	contextMenuIsOpen = this.#contextMenuIsOpen.asObservable();
+
+	#entityType = new UmbStringState<undefined>(undefined);
+	entityType = this.#entityType.asObservable();
+
+	#unique = new UmbStringState<null | undefined>(undefined);
+	unique = this.#unique.asObservable();
+
+	#headline = new UmbStringState<undefined>(undefined);
+	headline = this.#headline.asObservable();
+
+	constructor(host: UmbControllerHostElement) {
+		this.#host = host;
+	}
+
+	toggleContextMenu(entityType: string, unique: string | null | undefined, headline: string) {
+		console.log('open for ', entityType, unique, headline);
+		this.openContextMenu(entityType, unique, headline);
+	}
+
+	// TODO: we wont get notified about tree item name changes because we don't have a subscription
+	// we need to figure out how we best can handle this when we only know the entity and unique id
+	openContextMenu(entityType: string, unique: string | null | undefined, headline: string) {
+		this.#entityType.next(entityType);
+		this.#unique.next(unique);
+		this.#headline.next(headline);
+		this.#contextMenuIsOpen.next(true);
+	}
+
+	closeContextMenu() {
+		this.#contextMenuIsOpen.next(false);
+		this.#entityType.next(undefined);
+		this.#unique.next(undefined);
+		this.#headline.next(undefined);
+	}
+}
+
+export const UMB_SECTION_SIDEBAR_CONTEXT_TOKEN = new UmbContextToken<UmbSectionSidebarContext>(
+	'UmbSectionSidebarContext'
+);