notificationService

src/Umbraco.Web.UI.Client/src/app.ts

@@ -7,13 +7,11 @@ import { customElement } from 'lit/decorators.js';
 
 import { getInitStatus } from './core/api/fetcher';
 import { UmbContextProviderMixin } from './core/context';
-import { UmbNodeStore } from './core/stores/node.store';
-import { UmbDataTypeStore } from './core/stores/data-type.store';
 
 // Load these in the correct components
-import './editors/editor-layout.element';
-import './editors/editor-property-layout.element';
-import './editors/node-editor/node-property.element';
+import './editor/editor-layout.element';
+import './editor/editor-property-layout.element';
+import './editor/node-editor/node-property.element';
 
 const routes = [
   {
@@ -50,10 +48,6 @@ export class UmbApp extends UmbContextProviderMixin(LitElement) {
 
     const { extensionRegistry } = window.Umbraco;
     this.provideContext('umbExtensionRegistry', extensionRegistry);
-
-    // TODO: consider providing somethings for install/login and some only for 'backoffice'.
-    this.provideContext('umbNodeStore', new UmbNodeStore());
-    this.provideContext('umbDataTypeStore', new UmbDataTypeStore());
   }
 
   private _isAuthorized(): boolean {

src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts

@@ -6,8 +6,17 @@ import './backoffice-header.element';
 import '../section/section-sidebar.element';
 import './backoffice-main.element';
 
+import { UUIToastNotificationContainerElement } from '@umbraco-ui/uui';
+import { UmbContextProviderMixin } from '../core/context';
+import { UmbNodeStore } from '../core/stores/node.store';
+import { UmbDataTypeStore } from '../core/stores/data-type.store';
+import { UmbNotificationService } from '../core/service/notifications.store';
+import { Subscription } from 'rxjs';
+import { state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
 @defineElement('umb-backoffice')
-export default class UmbBackoffice extends LitElement {
+export default class UmbBackoffice extends UmbContextProviderMixin(LitElement) {
   static styles = [
     UUITextStyles,
     css`
@@ -20,13 +29,69 @@ export default class UmbBackoffice extends LitElement {
         font-size: 14px;
         box-sizing: border-box;
       }
+
+      #notifications {
+        position: absolute;
+        top:0;
+        left:0;
+        right:0;
+        height: 100vh;
+        padding: var(--uui-size-layout-1);
+      }
     `,
   ];
 
+  private _notificationService: UmbNotificationService = new UmbNotificationService();
+  private _notificationContainer: UUIToastNotificationContainerElement;
+  private _notificationSubscribtion: Subscription;
+
+  @state()
+  private _notifications:any[] = [];
+
+  constructor() {
+    super();
+
+    this.provideContext('umbNodeStore', new UmbNodeStore());
+    this.provideContext('umbDataTypeStore', new UmbDataTypeStore());
+
+    this._notificationService = new UmbNotificationService();
+    this.provideContext('umbNotificationService', this._notificationService);
+  }
+
+  protected firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+
+    this._notificationContainer = this.shadowRoot?.querySelector('uui-toast-notification-container') as UUIToastNotificationContainerElement;
+
+    this._notificationSubscribtion = this._notificationService.notifications
+    .subscribe((notifications: Array<any>) => {
+      this._notifications = notifications;
+    });
+
+    // TODO: listen to close event and remove notification from store.
+  }
+
   render() {
     return html`
       <umb-backoffice-header></umb-backoffice-header>
       <umb-backoffice-main></umb-backoffice-main>
+      <uui-toast-notification-container
+        auto-close="7000"
+        bottom-up
+        id="notifications">
+        ${
+          repeat(
+            this._notifications,
+            (notification: any) => notification.key,
+            notification => html`<uui-toast-notification color='positive'>
+            <uui-toast-notification-layout .headline=${notification.headline}>
+            </uui-toast-notification-layout>
+          </uui-toast-notification>`
+          )
+        }
+      </uui-toast-notification-container>
     `;
   }
 }

src/Umbraco.Web.UI.Client/src/core/extension/create-extension-element.function.ts

@@ -9,8 +9,6 @@ export function createExtensionElement(manifest: UmbExtensionManifest): Promise<
       return document.createElement(manifest.elementName as any);
     }
 
-    console.log(js);
-
     if (js) {
       if (js instanceof HTMLElement) {
         console.log('-- created by manifest method providing HTMLElement', js);

src/Umbraco.Web.UI.Client/src/core/service/notifications.store.ts

@@ -0,0 +1,17 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+
+type TempNotificationObject = {
+  headline:string;
+  key:string;
+}
+
+export class UmbNotificationService {
+  private _notifications: BehaviorSubject<Array<TempNotificationObject>> = new BehaviorSubject(<Array<TempNotificationObject>>[]);
+  public readonly notifications: Observable<Array<TempNotificationObject>> = this._notifications.asObservable();
+
+  // TODO: this is just a quick solution to get notifications in POC. (suppose to get much more complex data set for this, enabling description, actions and event custom elements).
+  peek(headline: string) {
+    this._notifications.next([...this._notifications.getValue(), {headline: headline, key:Date.now().toString()}]);
+  }
+
+}

src/Umbraco.Web.UI.Client/src/core/stores/node.store.ts

@@ -20,7 +20,7 @@ export class UmbNodeStore {
 
   // TODO: Use Node type, to not be specific about Document.
   // TODO: make sure UI somehow can follow the status of this action.
-  save(data: DocumentNode[]) {
+  save(data: DocumentNode[]): Promise<void> {
     // fetch from server and update store
     // TODO: use Fetcher API.
     let body: string;
@@ -29,21 +29,21 @@ export class UmbNodeStore {
       body = JSON.stringify(data);
     } catch (error) {
       console.error(error);
-      return;
+      return Promise.reject();
     }
 
     // TODO: Use node type to hit the right API, or have a general Node API?
-    fetch('/umbraco/backoffice/content/save', {
+    return fetch('/umbraco/backoffice/content/save', {
       method: 'POST',
       body: body,
       headers: {
         'Content-Type': 'application/json',
       },
     })
-      .then((res) => res.json())
-      .then((data) => {
-        this._updateStore(data);
-      });
+    .then((res) => res.json())
+    .then((data) => {
+      this._updateStore(data);
+    });
   }
 
   private _updateStore(fetchedNodes: Array<any>) {

src/Umbraco.Web.UI.Client/src/extensions/sections/content/content-editor.element.ts

@@ -5,6 +5,7 @@ import { UmbContextConsumerMixin } from '../../../core/context';
 import { UmbNodeStore } from '../../../core/stores/node.store';
 import { Subscription } from 'rxjs';
 import { DocumentNode } from '../../../mocks/data/content.data';
+import { UmbNotificationService } from '../../../core/service/notifications.store';
 
 @customElement('umb-content-editor')
 export class UmbContentEditor extends UmbContextConsumerMixin(LitElement) {
@@ -54,13 +55,19 @@ export class UmbContentEditor extends UmbContextConsumerMixin(LitElement) {
   private _nodeStore?: UmbNodeStore;
   private _nodeSubscription?: Subscription;
 
+  private _notificationService?: UmbNotificationService;
+
   constructor() {
     super();
 
-    this.consumeContext('umbNodeStore', (nodeStore: UmbNodeStore) => {
-      this._nodeStore = nodeStore;
+    this.consumeContext('umbNodeStore', (store: UmbNodeStore) => {
+      this._nodeStore = store;
       this._useNode();
     });
+
+    this.consumeContext('umbNotificationService', (service: UmbNotificationService) => {
+      this._notificationService = service;
+    });
   }
 
   // FLYT
@@ -86,18 +93,20 @@ export class UmbContentEditor extends UmbContextConsumerMixin(LitElement) {
   }
 
   private _onSaveAndPublish() {
-    console.log('Save and publish');
+    this._onSave();
   }
 
   private _onSave() {
     // TODO: What if store is not present, what if node is not loaded....
     if (this._node) {
-      this._nodeStore?.save([this._node]);
+      this._nodeStore?.save([this._node]).then(() => {
+        this._notificationService?.peek('Document saved');
+      });
     }
   }
 
   private _onSaveAndPreview() {
-    console.log('Save and preview');
+    this._onSave();
   }
 
   disconnectedCallback(): void {