notifications work

zero.Backoffice.UI/app/app.vue

@@ -6,6 +6,7 @@
       <div class="app-main">
         <router-view></router-view>
       </div>
+      <app-notifications />
     </template>
   </div>
 </template>
@@ -15,6 +16,7 @@
   import './styles/styles';
   import AppLogin from './account/login.vue';
   import AppNavigation from './ui/app-navigation.vue';
+  import AppNotifications from './ui/app-notifications.vue';
   import { useAccountStore } from './account/store';
   import { useUiStore } from './ui/store';
   import { useTranslationStore } from './stores/translations';
@@ -24,7 +26,7 @@
   export default defineComponent({
     name: 'app',
 
-    components: { AppLogin, AppNavigation },
+    components: { AppLogin, AppNavigation, AppNotifications },
 
     data: () => ({
       initialized: false,

zero.Backoffice.UI/app/components/index.ts

@@ -19,6 +19,7 @@ import uiDropdownButton from './ui-dropdown-button.vue';
 import uiDropdown from './ui-dropdown.vue';
 import uiHeaderBar from './ui-header-bar.vue';
 import uiCalendar from './ui-calendar.vue';
+import uiTree from './ui-tree.vue';
 
 export {
   uiIcon,
@@ -41,5 +42,6 @@ export {
   uiDropdownButton,
   uiDropdown,
   uiHeaderBar,
-  uiCalendar
+  uiCalendar,
+  uiTree
 };

zero.Backoffice.UI/app/components/ui-tree-item.vue

@@ -22,10 +22,10 @@
 </template>
 
 
-<script>
-  import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
+<script lang="ts">
+  import { defineComponent } from 'vue';
 
-  export default {
+  export default defineComponent({
     name: 'uiTreeItem',
 
     props: {
@@ -114,7 +114,7 @@
       // get all classes for a tree item
       getClasses(item)
       {
-        return { 
+        return {
           'has-icon': !!item.icon,
           'has-children': item.hasChildren,
           'is-inactive': item.isInactive,
@@ -149,7 +149,7 @@
         }
       }
     }
-  }
+  })
 </script>
 
 

zero.Backoffice.UI/app/components/ui-tree.vue

@@ -23,12 +23,15 @@
 </template>
 
 
-<script>
-  import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import UiTreeItem from './ui-tree-item.vue';
 
-  export default {
+  export default defineComponent({
     name: 'uiTree',
 
+    components: { UiTreeItem },
+
     props: {
       depth: {
         type: Number,
@@ -235,7 +238,7 @@
       }
 
     }
-  }
+  })
 </script>
 
 

zero.Backoffice.UI/app/core/types/zeroPluginOptions.ts

@@ -1,7 +1,7 @@
 
 import { RouteRecordRaw } from 'vue-router';
 import { App } from 'vue';
-import { ZeroSchemaProp } from 'zero/schemas';
+import { ZeroSchemaProp } from '../zero';
 
 export interface ZeroPluginOptions
 {

zero.Backoffice.UI/app/core/zero.d.ts

@@ -1,3 +1,4 @@
+import { ZeroSchema } from "zero/schemas";
 import { Zero } from "./types/zero";
 
 declare module '@vue/runtime-core'
@@ -9,4 +10,7 @@ declare module '@vue/runtime-core'
       */
     zero: Zero
   }
-}
+}
+
+declare type Lazy<T> = () => Promise<T>;
+declare type ZeroSchemaProp = ZeroSchema | Lazy<ZeroSchema>;

zero.Backoffice.UI/app/core/zeroRuntime.ts

@@ -9,7 +9,8 @@ import registerComponents from '../components/register';
 import registerFormComponents from '../forms/register';
 import { getRouterConfig, appendRouterGuards } from './router/routerConfig';
 import { countryPlugin, applicationPlugin, settingsPlugin } from '../modules';
-import { ZeroSchema, ZeroSchemaProp } from 'zero/schemas';
+import { ZeroSchema } from 'zero/schemas';
+import { ZeroSchemaProp } from './zero';
 
 export class ZeroRuntime implements Zero
 {
@@ -90,7 +91,7 @@ export class ZeroRuntime implements Zero
    **/
   async getSchema(alias: string): Promise<ZeroSchema | null>
   {
-    const schema = this._schemas[alias];
+    const schema: ZeroSchemaProp = this._schemas[alias];
 
     if (!schema)
     {

zero.Backoffice.UI/app/modules/countries/countries.vue

@@ -3,7 +3,7 @@
     <ui-header-bar title="@country.list" :count="count" :back-button="true">
       <ui-table-filter :attach="$refs.table" />
       <ui-add-button :route="createRoute" blueprint-alias="country" />
-      <ui-button type="accent" @click="loadData()" label="load" />
+      <ui-button type="accent" @click="showNotification()" label="load" />
     </ui-header-bar>
     <div class="ui-blank-box">
       <!--<ui-table ref="table" config="countries" @count="count = $event" />-->
@@ -14,6 +14,7 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue';
+  import * as notifications from '../../services/notification';
 
   export default defineComponent({
     data: () => ({
@@ -22,6 +23,11 @@
     }),
 
     methods: {
+      showNotification()
+      {
+        notifications.error("Erfolgreich", "Super, du hast deine erste Mitteilung veröffentlicht", { duration: 6000 });
+      },
+
       async loadData()
       {
         var schema = await this.zero.getSchema('country');

zero.Backoffice.UI/app/modules/countries/plugin.ts

@@ -11,7 +11,5 @@ export default {
 
     app.schema('countries', () => import('./list'));
     app.schema('country', () => import('./editor'));
-    //app.editor('country', null);
-    //app.editorField('')
   }
 } as ZeroPlugin;

zero.Backoffice.UI/app/schemas/schemas.d.ts

@@ -1,3 +1,4 @@
+
 declare module 'zero/schemas'
 {
   export interface ZeroSchema
@@ -15,6 +16,4 @@ declare module 'zero/schemas'
   {
 
   }
-
-  declare type ZeroSchemaProp = ZeroSchema | Promise<ZeroSchema>;
 }

zero.Backoffice.UI/app/services/notification.ts

@@ -11,8 +11,8 @@ export type NotificationType = 'default' | 'success' | 'error' | 'warning';
 
 export interface NotificationOptions
 {
-  type: NotificationType,
-  label: string,
+  type?: NotificationType,
+  label?: string,
   text?: string,
   persistent?: boolean,
   duration?: number

zero.Backoffice.UI/app/ui/app-notifications.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="app-notifications" :class="{ 'has-multiple': instances.length > 1 }">
+    <transition-group name="app-notifications" :duration="400">
+      <div class="app-notification" v-for="instance in instances" :key="instance.id" :type="instance.type">
+        <p class="-text">
+          <b v-localize="instance.label"></b>
+          <span v-if="instance.text" v-localize="instance.text"></span>
+        </p>
+        <ui-icon-button @click="remove(instance)" type="action small" icon="fth-x" title="@ui.close" />
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+
+<script>
+  import emitter from '../services/eventhub';
+  import { event_showNotification, event_hideNotifications } from '../services/notification';
+  import { arrayRemove } from '../utils/arrays';
+
+  export default {
+    name: 'app-notifications',
+
+    data: () => ({
+      instances: []
+    }),
+
+    created()
+    {
+      emitter.on(event_showNotification, notification => this.add(notification));
+      emitter.on(event_hideNotifications, () => this.instances = []);
+    },
+
+    methods: {
+
+      add(instance)
+      {
+        this.instances.push(instance);
+
+        if (!instance.persistent)
+        {
+          setTimeout(() => this.remove(instance), instance.duration);
+        }
+      },
+
+      remove(instance)
+      {
+        arrayRemove(this.instances, instance);
+      }
+    }
+  }
+</script>
+
+
+<style lang="scss">
+  .app-notifications
+  {
+    position: fixed;
+    right: var(--padding);
+    bottom: var(--padding);
+    width: 420px;
+    max-width: 100%;
+    z-index: 6;
+  }
+
+  .app-notification
+  {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 20px;
+    align-items: center;
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+    border-radius: var(--radius);
+    padding: 10px 12px;
+    font-size: var(--font-size);
+    transition: transform .3s ease, opacity .3s ease;
+
+    .-text
+    {
+      margin: 0;
+
+      span
+      {
+        font-size: var(--font-size-s);
+        line-height: 1.3;
+      }
+
+      b
+      {
+        display: block;
+        margin: 3px 0;
+      }
+    }
+
+    .ui-icon-button
+    {
+      background: none;
+      margin-right: -5px;
+    }
+
+    .ui-button-icon
+    {
+      color: var(--color-primary-text);
+    }
+
+    & + .app-notification
+    {
+      margin-top: 10px;
+    }
+
+    &[type="success"], &[type="primary"]
+    {
+      background: var(--color-primary);
+      color: var(--color-primary-text);
+
+      .ui-button-icon
+      {
+        color: var(--color-primary-text);
+      }
+    }
+
+    &[type="error"]
+    {
+      background: var(--color-accent-error);
+      color: white;
+
+      .ui-button-icon
+      {
+        color: white;
+      }
+    }
+  }
+
+  .app-notification.app-notifications-enter,
+  .app-notification.app-notifications-leave-to
+  {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+</style>