Merge pull request #84 from devforth/add-every-page-injection

feat: add option to inject custom component on every page

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -430,4 +430,48 @@ function openCustomPage() {
 Also there are:
 
 * `config.customization.globalInjections.header`
-* `config.customization.globalInjections.sidebar`
+* `config.customization.globalInjections.sidebar`
+* `config.customization.globalInjections.everyPageBottom`
+
+Unlike `userMenu`, `header` and `sidebar` injections, `everyPageBottom` will be added to the bottom of every page even when user is not logged in.
+You can use it to execute some piece of code when any page is loaded. For example, you can add welcoming pop up when user visits a page.
+
+```ts title="/index.ts"
+{
+  ...
+  customization: {
+    globalInjections: {
+      userMenu: [
+        '@@/CustomUserMenuItem.vue',
+//diff-remove
+      ]
+//diff-add
+      ],
+//diff-add
+      everyPageBottom: [
+//diff-add
+        '@@/AnyPageWelcome.vue',
+//diff-add
+      ]
+    }
+  }
+  ...
+}
+```
+
+Now create file `AnyPageWelcome.vue` in the `custom` folder of your project:
+
+```html title="./custom/AnyPageWelcome.vue"
+<template></template>
+
+<script setup>
+import { onMounted } from 'vue';
+import adminforth from '@/adminforth';
+onMounted(() => {
+  adminforth.alert({
+    message: 'Welcome!',
+    variant: 'success',
+  });
+});
+</script>
+```

adminforth/modules/configValidator.ts

@@ -131,10 +131,11 @@ export default class ConfigValidator implements IConfigValidator {
       userMenu: [],
       header: [],
       sidebar: [],
+      everyPageBottom: [],
     };
 
     if (this.inputConfig.customization?.globalInjections) {
-      const ALLOWED_GLOBAL_INJECTIONS = ['userMenu', 'header', 'sidebar']
+      const ALLOWED_GLOBAL_INJECTIONS = ['userMenu', 'header', 'sidebar', 'everyPageBottom'];
       Object.keys(this.inputConfig.customization.globalInjections).forEach((injection) => {
         if (ALLOWED_GLOBAL_INJECTIONS.includes(injection)) {
           globalInjections[injection] = this.validateAndListifyInjectionNew(this.inputConfig.customization.globalInjections, injection, errors);

adminforth/modules/restApi.ts

@@ -220,6 +220,9 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           demoCredentials: this.adminforth.config.auth.demoCredentials,
           loginPromptHTML: await tr(this.adminforth.config.auth.loginPromptHTML, 'system.loginPromptHTML'),
           loginPageInjections: this.adminforth.config.customization.loginPageInjections,
+          globalInjections: {
+            everyPageBottom: this.adminforth.config.customization.globalInjections.everyPageBottom,
+          },
           rememberMeDays: this.adminforth.config.auth.rememberMeDays,
         };
       },

adminforth/spa/src/App.vue

@@ -209,9 +209,12 @@
          drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-20">
     </div>
 
-
+    <component
+      v-for="c in coreStore?.config?.globalInjections?.everyPageBottom || []"
+      :is="getCustomComponent(c)"
+      :meta="c.meta"
+    />
   </div>
-
 </template>
 
 <style lang="scss" scoped>

adminforth/types/Back.ts

@@ -708,6 +708,7 @@ interface AdminForthInputConfigCustomization {
     userMenu?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     header?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    everyPageBottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 }
 
@@ -984,6 +985,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     userMenu: Array<AdminForthComponentDeclarationFull>,
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
+    everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   },
 }
 

adminforth/types/Common.ts

@@ -966,6 +966,7 @@ export interface AdminForthConfigForFrontend {
     userMenu: Array<AdminForthComponentDeclarationFull>,
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
+    everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   }
 }