feat(vuejs): add mixin to handle title property on views

hbollon · Jul 18, 2021 · 2afcf8e · 2afcf8e
1 parent fae88b1
commit 2afcf8e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 0 deletions.
diff --git a/resources/static/vue-igopher/src/main.ts b/resources/static/vue-igopher/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import astor from "@/plugins/astilectron";
+import titleMixin from "@/mixins/titleMixin";
 
 import mitt, { Emitter } from 'mitt';
 const emitter: Emitter = mitt();
@@ -17,5 +18,6 @@ app
       debug: true,
       emitter: emitter
     })
+  .mixin(titleMixin)
   .use(router)
   .mount("#app");
diff --git a/resources/static/vue-igopher/src/mixins/titleMixin.ts b/resources/static/vue-igopher/src/mixins/titleMixin.ts
@@ -0,0 +1,17 @@
+/* Mixin used to dynamically manage page title for each vue views */
+
+function getTitle(vm: any) {
+  const title = vm.$options;
+  if (title) {
+    return typeof title === "function" ? title.call(vm) : title;
+  }
+}
+
+export default {
+  mounted() {
+    const title = getTitle(this);
+    if (title) {
+      document.title = "IGopher - " + title.title;
+    }
+  },
+};
diff --git a/resources/static/vue-igopher/src/views/DmAutomation.vue b/resources/static/vue-igopher/src/views/DmAutomation.vue
@@ -10,6 +10,7 @@ import * as config from "@/config"
 import { Astor } from "@/plugins/astilectron";
 
 @Options({
+  title: "DM Automation",
   components: {
     DmAutomationPanel,
   },

diff --git a/resources/static/vue-igopher/src/views/Logs.vue b/resources/static/vue-igopher/src/views/Logs.vue
@@ -65,6 +65,7 @@ class Pager {
 }
 
 @Options({
+  title: "Logs",
   components: {
     LogsPanel,
   },

diff --git a/resources/static/vue-igopher/src/views/Settings.vue b/resources/static/vue-igopher/src/views/Settings.vue
@@ -10,6 +10,7 @@ import * as config from "@/config"
 import { Astor } from "@/plugins/astilectron";
 
 @Options({
+  title: "Settings",
   components: {
     SettingsPanel,
   },