Merge pull request #1602 from slntopp/dev

dev

admin-ui/src/App.vue

@@ -169,7 +169,7 @@
 
           <v-subheader>SYSTEM</v-subheader>
 
-          <v-list-item v-bind="listItemBind" :to="{ name: 'Chats' }">
+          <v-list-item v-bind="listItemBind" :to="{ name: 'Chats' }" @click="chatClick">
             <v-list-item-icon>
               <v-icon>mdi-chat</v-icon>
             </v-list-item-icon>
@@ -357,14 +357,16 @@
 </template>
 
 <script>
+import { reactive, ref } from "vue";
+import { mapGetters } from "vuex";
+import useLoginClient from "@/hooks/useLoginInClient.js"
 import api from "@/api.js";
 import config from "@/config.js";
 import balance from "@/components/balance.vue";
 import languages from "@/components/languages.vue";
 import appSearch from "@/components/search/search.vue";
 import AppSnackbar from "@/components/snackbar.vue";
 import instancesTableModal from "@/components/instances_table_modal.vue";
-import { mapGetters } from "vuex";
 import Themes from "@/components/themes.vue";
 
 export default {
@@ -377,22 +379,27 @@ export default {
     languages,
     instancesTableModal,
   },
-  data: () => ({
-    isMenuMinimize: true,
-    isMouseOnMenu: false,
-    easterEgg: false,
-    config,
-    navTitles: config.navTitles ?? {},
-    overlay: {
-      timeoutId: null,
-      isVisible: false,
-      buttonTitle: "",
-      uuid: "",
-      x: 0,
-      y: 0,
-    },
-    unreadChatsCount: 0,
-  }),
+  setup() {
+    const { loginHandler } = useLoginClient()
+
+    return {
+      isMenuMinimize: ref(true),
+      isMouseOnMenu: ref(false),
+      easterEgg: ref(false),
+      config,
+      navTitles: ref(config.navTitles ?? {}),
+      overlay: reactive({
+        timeoutId: null,
+        isVisible: false,
+        buttonTitle: "",
+        uuid: "",
+        x: 0,
+        y: 0,
+      }),
+      unreadChatsCount: ref(0),
+      loginHandler
+    }
+  },
   methods: {
     logoutHandler() {
       this.$store.dispatch("auth/logout");
@@ -444,6 +451,9 @@ export default {
         this.overlay.isVisible = false;
       }, 100);
     },
+    chatClick() {
+      this.$store.commit("app/setChatClicks", 1)
+    },
   },
   computed: {
     ...mapGetters("app", ["theme"]),
@@ -510,6 +520,10 @@ export default {
         window.open(`/admin/accounts/${data.value.uuid}`, "_blank");
         return;
       }
+      if (data.type === "open-chat") {
+        this.loginHandler({ accountUuid: this.userdata.uuid, chatId: data.value.uuid });
+        return;
+      }
       if (data.type === "get-theme") {
         source.postMessage({ theme: this.theme }, "*");
         return;

admin-ui/src/hooks/useLoginInClient.js

@@ -3,16 +3,15 @@ import { useStore } from "@/store";
 const useLoginInClient = () => {
   const store = useStore();
 
-  const loginHandler = ({ accountUuid, instanceId, type }) => {
-      console.log(accountUuid,instanceId,type)
-    store
-      .dispatch("auth/loginToApp", { uuid: accountUuid, type: "whmcs" })
+  const loginHandler = ({ accountUuid, instanceId, chatId, type }) => {
+    console.log(accountUuid,instanceId,type);
+    store.dispatch("auth/loginToApp", { uuid: accountUuid, type: "whmcs" })
       .then(({ token }) => {
         store.dispatch("auth/getAppURL").then((res) => {
           const win = window.open(JSON.parse(res.app).url);
 
           window.addEventListener("message", () => {
-            win.postMessage({ token, uuid: instanceId, type: type }, "*");
+            win.postMessage({ token, uuid: instanceId, chatId, type }, "*");
           });
         });
       })
@@ -26,4 +25,4 @@ const useLoginInClient = () => {
   return { loginHandler };
 };
 
-export default useLoginInClient
+export default useLoginInClient;

admin-ui/src/store/app.js

@@ -5,16 +5,19 @@ export default {
   namespaced: true,
   state: {
     theme: "dark",
+    chatClicks: 0
   },
   mutations: {
     setTheme(state, theme = "dark") {
       state.theme = theme;
     },
+    setChatClicks(state, value) {
+      state.chatClicks += value;
+    }
   },
   getters: {
-    theme(state) {
-      return state.theme;
-    },
+    theme: (state) => state.theme,
+    chatClicks: (state) => state.chatClicks,
     transport(state, getters, rootState, rootGetters) {
       const transport = createConnectTransport({
         baseUrl: window.location.origin,

admin-ui/src/views/PluginPage.vue

@@ -1,30 +1,40 @@
 <template>
   <div class="pa-4 h-100 w-100">
     <plugin-iframe
-      :redirect="redirect"
-      class="h-100 w-100"
       v-if="$route.query.url"
+      ref="plugin"
+      class="h-100 w-100"
+      :redirect="redirect"
       :url="url"
       :params="params"
     />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router/composables";
+import { useStore } from "@/store";
 import PluginIframe from "@/components/plugin/iframe.vue";
 
-export default {
-  name: "plugin-view",
-  components: { PluginIframe },
-  computed: {
-    url() {
-      return this.$route.params.url || this.$route.query.url;
-    },
-    params() {
-      return this.$route.params.params;
-    },
-  },
-};
+const route = useRoute()
+const store = useStore()
+
+const plugin = ref()
+const url = computed(() =>
+  route.params.url || route.query.url
+)
+const params = computed(() =>
+  route.params.params
+)
+
+watch(() => store.getters["app/chatClicks"], () => {
+  plugin.value.$el.contentWindow.postMessage({ type: "start-page" }, "*");
+})
+</script>
+
+<script>
+export default { name: "plugin-view" }
 </script>
 
 <style>