introduce login subscription

src/assets/js/__message-util.ts

@@ -93,6 +93,25 @@ export function getSubPropertyChangeMessage(ucpId: string) {
   }, ucpId);
 }
 
+export function getSubLoginMessage(ucpId: string) {
+  return getMessage({
+    messageType: AppMessageType.Subscription,
+    messageName: "subscribe_property_change",
+    subscription: Subscription.General,
+    data: {
+      action: 'subscribe',
+      query: {
+        Events: {
+          __args: {
+            where: { messageName: 'Success Login' },
+          },
+          notification: true,
+        },
+      }
+    },
+  }, ucpId);
+}
+
 export function getNewUserProfile(ucpId: string) {
   return getMessage({
     "messageType": "Command",

src/components/AdminCommands.vue

@@ -19,6 +19,7 @@ import * as io from 'socket.io-client';
 export default class AdminCommands extends Vue {
   @Prop() public connection;
   @Prop() public session;
+  @Prop() public url;
   idToken: string = ''
 
   requestCmds = [
@@ -31,7 +32,7 @@ export default class AdminCommands extends Vue {
   
   socket = null
   responses = []
-  url = 'http://localhost:3011'
+  // url = 'http://localhost:3011'
   // url = 'http://swopt.com:3011'
   cnt = 0
 

src/components/Subscription.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h3>SUBSCRIPTION</h3>
+    <div v-if="subscription.subId">
+      SubscriptionId: {{ subscription.subId }}
+      <!-- <button
+          :disabled="session.ucpId == null || subscription.subId == null"
+          @click="endSubscribePropertyChange"
+        >Unsubscribe</button> -->
+    </div>
+    <div class="buttons" v-else>
+      <button :disabled="session.ucpId == null"  @click="subPropertyChange">Sub Property Change </button>
+      <button :disabled="session.ucpId == null"  @click="subLogin">Sub Login </button>
+    </div>
+    <div>
+      <div v-for="message in messages" :key="message.id"  style="font-size: small">
+        <a href="#" @click.prevent="showModal(message.detail)">more</a>
+        {{ message.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+import {
+  getSubPropertyChangeMessage,
+  getSubLoginMessage,
+} from "../assets/js/__message-util";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class Subscription extends Vue {
+  @Prop() public subscription;
+  @Prop() public session;
+  @Prop() private msg!: string;
+  @Prop() private messages;
+
+  showModal(data) {
+    this.$emit('modal', data)
+  }
+  subPropertyChange() {
+    this.$emit('subscribe', {
+      request: getSubPropertyChangeMessage(this.session.ucpId),
+      title: 'property change',
+    })
+  }
+  subLogin() {
+    this.$emit('subscribe', {
+      request: getSubLoginMessage(this.session.ucpId),
+      title: 'login event',
+    })
+  }
+}
+</script>

src/components/UIClient.vue

@@ -15,10 +15,8 @@
     </div>
 
   <div class="cards">
-    <admin-commands class="card"></admin-commands>
-    <google-login class="card" :session="session" :connection="connection" @loginAction="loginAction">
-
-    </google-login>
+    <admin-commands class="card" :url="url"></admin-commands>
+    <google-login class="card" :session="session" :connection="connection" @loginAction="loginAction" />
     <div class="card">
       <h3>Websocket</h3>
       <div v-if="connection.socketId" >
@@ -45,28 +43,7 @@
       </div>
     </div>
 
-    <transition>
-    <div class="card">
-      <h3>SUBSCRIPTION</h3>
-      <div v-if="subscription.subId">SubscriptionId: {{ subscription.subId }}</div>
-      <div class="buttons">
-        <button 
-          :disabled="session.ucpId == null || subscription.subId != null"
-          @click="startSubscribePropertyChange"
-        >Property Change</button>
-        <!-- <button
-          :disabled="session.ucpId == null || subscription.subId == null"
-          @click="endSubscribePropertyChange"
-        >Unsubscribe</button> -->
-      </div>
-      <div>
-        <div v-for="message in subscription.messages" :key="message.id" style="font-size: small">
-          <a href="#" @click.prevent="showModal(message.detail)">more</a>
-          {{ message.text }}
-        </div>
-      </div>
-    </div>
-    </transition>
+    <subscribe class="card" :session="session" :subscription="subscription" :messages="subMessages" @subscribe="subscribe" @modal="showModal"/>
 
     <transition>
     <div class="card">
@@ -150,6 +127,7 @@ import { TestSocketIoClient } from "../assets/js/__transport.socketio"
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import GoogleLogin from './GoogleLogin.vue'
 import AdminCommands from './AdminCommands.vue'
+import Subscribe from './Subscription.vue'
 
 type Session = {
   ucpId: string,
@@ -175,7 +153,7 @@ type Subscription = {
 }
 @Component({
   components: {
-    GoogleLogin, AdminCommands
+    GoogleLogin, AdminCommands, Subscribe
   }
 })
 export default class UiClient extends Vue {
@@ -190,9 +168,10 @@ export default class UiClient extends Vue {
     userName: null,
     cancelRequest: null,
   }
-  url = 'http://localhost:3011';
-  // url = 'http://swopt.com:3011';
+  // url = 'http://localhost:3011';
+  url = 'http://swopt.com:3011';
   messages: Message[] = [];
+  subMessages: Message[] = [];
   loading: boolean = false
   modal: boolean = false
   modelValue: string = ''
@@ -344,6 +323,54 @@ export default class UiClient extends Vue {
     )
   }
 
+  async subscribe(param): Promise<void> {
+    this.loading = true
+    this.addMessage('subscribing to ' + param.title)
+
+    let listening = false
+
+    const subject = this.client.getStreamOfResponsesFromRequest(param.request)
+
+    try {
+      
+      this.subscription.subId = await new Promise((resolved, reject) => {
+        subject.subscribe({
+          next: (data) => {
+  
+            // when listening display all results 
+            if( listening ) {
+              console.log({ sub: data })
+              this.subMessages.push({
+                id: Symbol(),
+                text: data?.header?.messageName,
+                detail: JSON.stringify(data, null, 3)
+              })  
+            } else {
+              // detect exception
+              if ( data?.header?.messageType == 'ResponseException') {
+                reject(data?.data)
+              }
+              // detect success subscription
+              const subId = data?.data?.subscriptionId
+              if ( subId ) {
+                listening = true;
+                resolved(subId)
+              }
+            }
+   
+            console.info(data)
+          },
+          complete: () => this.subscription.subId = null
+        })
+      })
+      this.addMessage('subscribe to ' + param.title + ' success.')
+
+    } catch (error) {
+      this.addMessage('subscribe to ' + param.title + ' fail : ' + error)
+    }
+
+    this.loading = false
+  }
   async startSubscribePropertyChange(): Promise<void> {
     this.loading = true
     this.addMessage('subscribing to property change ...')
@@ -362,7 +389,7 @@ export default class UiClient extends Vue {
             // when listening display all results 
             if( listening ) {
               console.log({ sub: data })
-              this.subscription.messages.push({
+              this.subMessages.push({
                 id: Symbol(),
                 text: data?.header?.messageName,
                 detail: JSON.stringify(data, null, 3)
@@ -442,87 +469,9 @@ export default class UiClient extends Vue {
     )
   }
 
-  /*
-  async newRequisition(ucpId: string) {
-    this.purchaseRequisition = {
-      loading: true,
-      docDt: "2021-01-10Z",
-      message: 'request new purchase requisition ...',
-    }
-    const results = await this.connection.getAllResponsesFromRequest(getNewPurchaseRequisition(ucpId))
-    const response = results.find( (r: any) => r?.header?.messageType == 'Response' )
-
-    this.purchaseRequisition = {
-      loading: false,
-      docDt: "2021-01-10Z",
-      message: 'new purchase requisition' + ( response ? 'success' : 'fail' )
-    }
-  }
-
-  updateRequisitionDocDt() {
-    // send message
-    // show sending
-    // show sent when success
-    // show error when fail
-  }
-  closeRequisition(){
-    // send message
-    // show loading
-    // close window if success
-    this.purchaseRequisition = null;
-    // show error when fail
-  }
-
-
-
-
-  async subscribeToChange(ucpId: string): Promise<void> {
-    const request = getSubPropertyChangeMessage(ucpId)
-    const subject = this.connection.getStreamOfResponsesFromRequest(request)
-    const responses = []
-    subject.subscribe({
-      next: (data) => {
-        let text = data?.header?.messageName
-        if ( data?.data?.subscriptionId ) {
-          text = data?.header?.messageName + ', subId:' + data?.data?.subscriptionId
-        }
-        console.info(data)
-        responses.push(text)
-        // responses.push(JSON.stringify(data))
-      }
-    })
-    this.requests.push({
-      id: Symbol(),
-      // request: JSON.stringify(request),
-      request: request?.header?.messageName,
-      responses
-    })
-  }
-
-  async newUserProfileMessage(ucpId: string): Promise<void> {
-    const request = getNewUserProfileMessage(ucpId)
-    const subject = this.connection.getStreamOfResponsesFromRequest(request)
-    const responses = []
-    subject.subscribe({
-      next: (data) => {
-        let text = data?.header?.messageName
-        console.info(data)
-        responses.push(text)
-        // responses.push(JSON.stringify(data))
-      }
-    })
-    this.requests.push({
-      id: Symbol(),
-      // request: JSON.stringify(request),
-      request: request?.header?.messageName,
-      responses
-    })
-  }
-  */
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h3 {
   margin: 0;