Merge pull request #21 from unparallel-innovation/main

Embed jBPM iframe
eclipse-opensmartclide · Nov 2, 2022 · e45aa05 · e45aa05
2 parents bd6e29b + 007ebd1
commit e45aa05
Showing 1 changed file with 73 additions and 2 deletions.
diff --git a/imports/ui/components/Home/Workflows.vue b/imports/ui/components/Home/Workflows.vue
@@ -9,16 +9,87 @@
  -------------------------------------------------------------------------------->
 
 <template>
-  <div>
-    Coming soon: Workflows...
+  <div class="d-flex flex-column h-100">
+    <div class="d-flex h-100">
+      <iframe id="jbpm-iframe" src="https://jbpm.dev.smartclide.eu/business-central/kie-wb.jsp"/>
+    </div>
   </div>
 </template>
 
 <script>
+  import {messageTypes, buildMessage} from "@unparallel/smartclide-frontend-comm";
+
   export default {
     name: "Workflows",
     mounted(){
       this.$store.state.context = 'home';
+      this.setupIframeCommunication();
+    },
+    data(){
+      return{
+        placeholder: null
+      }
+    },
+    beforeRouteLeave(to, from, next){
+      this.cancelIframeCommunication();
+      next();
+    },
+    methods:{
+      sendMessageToIframe(messageType){
+        const iframe = document.getElementById("jbpm-iframe");
+
+        try {
+          let message;
+
+          switch (messageType){
+            case messageTypes.TOKEN_INFO:
+              const keycloak = this.$store.state.keycloak;
+              message = buildMessage(messageType, keycloak.token);
+              break;
+            case messageTypes.TOKEN_REVOKE:
+              message = buildMessage(messageType);
+              break;
+            default:
+          }
+
+          iframe.contentWindow.postMessage(message, "*");
+          console.log("SENT", JSON.stringify(message, undefined, 4));
+        }catch(error) {
+          console.log(error);
+        }
+      },
+      onReceiveMessage({data}){
+        switch(data.type){
+          case messageTypes.COMPONENT_HELLO:
+            console.log("RECEIVED", JSON.stringify(data, undefined, 4));
+            this.sendMessageToIframe(messageTypes.TOKEN_INFO);
+            break;
+          default:
+            break;
+        }
+      },
+      setupIframeCommunication(){
+        window.addEventListener("message", this.onReceiveMessage);
+
+        this.$store.state.keycloak.onAuthRefreshSuccess = () => {
+          this.sendMessageToIframe(messageTypes.TOKEN_INFO);
+        };
+      },
+      cancelIframeCommunication(){
+        this.sendMessageToIframe(messageTypes.TOKEN_REVOKE)
+
+        window.removeEventListener("message", this.onReceiveMessage);
+
+        this.$store.state.keycloak.onAuthRefreshSuccess = null;
+      }
     }
   }
 </script>
+
+<style scoped>
+  #jbpm-iframe{
+    border: 0;
+    height: 100%;
+    width: 100%;
+  }
+</style>