added TM

src/assets/js/__message-util.ts

@@ -78,7 +78,7 @@ export function getSubPropertyChangeMessage(ucpId: string) {
   }, ucpId);
 }
 
-export function getNewUserProfileMessage(ucpId: string) {
+export function getNewUserProfile(ucpId: string) {
   return getMessage({
     "messageType": "Command",
     "messageName": "New User Profile (cmd)",
@@ -118,6 +118,35 @@ export function getSetPurchaseRequisitionDocDt(ucpId: string, value: string = "2
   }, ucpId)
 }
 
+export function getSetUserProfileUserName(ucpId: string, value: string = "abcxyyz") {
+  return getMessage({
+      "messageType": "Command",
+      "messageName": "Set User name (cmd)",
+      "command": "SetItem",
+      "data": {
+          "serviceId": "User Profile",
+          "alias": "header",
+          "notifyChanged": true,
+          "column": {
+            "row": 1,
+            "name": "user_name",
+            "value": value,
+          }
+      }
+  }, ucpId)
+}
+
+export function getCancelUserProfile(ucpId: string ) {
+  return getMessage({
+      "messageType": "Command",
+      "messageName": "Cancel User Profile.",
+      "command": "CancelChanges",
+      "data": {
+          "serviceId": "User Profile",
+      }
+  }, ucpId)
+}
+
 export function getCancelPurchaseRequisition(ucpId: string ) {
   return getMessage({
       "messageType": "Command",

src/assets/js/__transport.socketio.js

@@ -48,6 +48,7 @@ export class TestSocketIoClient {
     })
   }
 
+  
   getStreamOfResponsesFromRequest(request) {
     const subject = new Subject();
     

src/components/UIClient.vue

@@ -36,9 +36,19 @@
     <transition>
     <div class="card">
       <h3>SUBSCRIPTION</h3>
+      <div v-if="subscription.subId">SubscriptionId: {{ subscription.subId }}</div>
       <div class="buttons">
-        <button :disabled="session.ucpId == null" >Property Change</button>
-        <button>Unsubscribe</button>
+        <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">{{ message.text }}</div>
       </div>
     </div>
     </transition>
@@ -46,17 +56,34 @@
     <transition>
     <div class="card">
       <h3>FORM</h3>
+      <div v-if="form.type=='productrequisition'">
+        <h3>Product Requisition</h3>
+        <div>
+          <label >Doc Date<input v-model="form.docDt"></label>
+        </div>
+      </div>
+      <div v-if="form.type=='userprofile'">
+        <h3>User Profile</h3>
+        <div>
+          <label >User Name<input v-model="form.userName"></label>
+        </div>
+      </div>
       <div class="buttons">
-        <button>New Product Requisition</button>
-        <button>New User Profile</button>
-        <button>Cancel Changes</button>
+        <button
+          :disabled="session.ucpId == null || form.type != null"
+          @click="startRequisition"
+        >New Product Requisition</button>
+        <button
+          :disabled="session.ucpId == null || form.type != null"
+          @click="startUserProfile"
+        >New User Profile</button>
+        <button
+          :disabled="form.type == null"
+          @click="cancelForm"
+        >Cancel Changes</button>
       </div>
     </div>
     </transition>
-
-    <div>
-      <button @click="startConnection">connection</button><input type="text" v-model="url">
-    </div>
     <!-- Websocket connection
       - button disconnect (when connection is up)
     -->
@@ -87,14 +114,14 @@
 import Trottle from 'lodash/throttle'
 import {
   getLoginMessage,
-  // getLogoutMessage,
   // getMessage,
   getSubPropertyChangeMessage,
-  getNewUserProfileMessage,
+  getNewUserProfile,
   getLogoutMessage,
   getNewPurchaseRequisition,
   // getSetPurchaseRequisitionDocDt,
-  // getCancelPurchaseRequisition
+  getCancelPurchaseRequisition,
+  getCancelUserProfile,
 } from '../assets/js/__message-util';
 import { TestSocketIoClient } from "../assets/js/__transport.socketio"
 import { Component, Prop, Vue } from 'vue-property-decorator'
@@ -106,15 +133,21 @@ type Session = {
 
 type Form = {
   type: string,
-  docDt?: string, // "2021-01-10Z"
+  docDt: string, // "2021-01-10Z"
+  userName: string, //abcxyz
+  cancelRequest: any,
 }
 type WsConnection = {
   socketId
 }
-type Messages = {
+type Message = {
   id: symbol,
   text: string,
 }
+type Subscription = {
+  subId: string,
+  messages: Message[],
+}
 @Component
 export default class UiClient extends Vue {
   @Prop() private msg!: string;
@@ -122,18 +155,37 @@ export default class UiClient extends Vue {
   client: TestSocketIoClient = new TestSocketIoClient();
   connection: WsConnection = { socketId: null }
   session: Session = { ucpId: null }
-  form: Form = { type: null }
+  form: Form = {
+    type: null,
+    docDt: null,
+    userName: null,
+    cancelRequest: null,
+  }
   url = 'http://swopt.com:3011';
-  messages: Messages[] = [];
+  messages: Message[] = [];
   loading: boolean = false
+  subscription: Subscription = {
+    subId: null,
+    messages: [],
+  }
 
   dosomething = Trottle(() => {
       const zz = 'ssss';
       console.log('done ' + zz)
   },1000, { trailing: false })
   
+  startLoading() {
+    this.loading = true
+  }
+  endLoading() {
+    this.loading = false
+  }
+  async getResponses(request){
+    return await this.client.getAllResponsesFromRequest(request)
+  }
   addMessage(text:string) {
-    this.messages.unshift({ id: Symbol(),text })
+    // this.messages.unshift({ id: Symbol(),text })
+    this.messages.push({ id: Symbol(), text })
   }
 
   async stopConnection() {
@@ -144,7 +196,7 @@ export default class UiClient extends Vue {
 
   async startConnection() {
     this.addMessage('connecting websocket..')
-    this.loading = true
+    this.startLoading()
 
     try {
       this.connection.socketId = await this.client.connect(this.url, {
@@ -157,28 +209,137 @@ export default class UiClient extends Vue {
       this.addMessage('websocket connection fail ' + error)
     }
 
-    this.loading = false
+    this.endLoading()
   }
 
-  async startSession(): Promise<void> {
+  getResponse = Trottle(async (request, operation: string, getReturnData: (response) => any ) => {
+    this.startLoading()
+    this.addMessage(operation + ' ...')
+    let returnData = null
+    try {
+      const results = await this.getResponses(request)
+      // look for error
+      const responseException = results.find( (r: any) => r?.header?.messageType == 'ResponseException' )
+
+      if( responseException != null ){
+        throw Error(responseException?.data)
+      }
+      // look for response
+      const response = results.find( (r: any) => {
+        const messageType = r?.header?.messageType
+        return ['FisResponse','Response'].indexOf(messageType) > -1
+      })
+      if(response == null){
+        throw Error('fail to get success response')
+      }
+
+      // try extract data
+      returnData = getReturnData(response)
+
+      this.addMessage(operation + ' success.')
+    } catch (error) {
+      this.addMessage(operation + ' fail :' + error)
+    }
+    this.endLoading()
+
+    console.log('results', returnData)
+    return returnData;
+  })
+
+  async startSession() {
+    this.session.ucpId = await this.getResponse( getLoginMessage(10000), 'signin', (response) => {
+      console.log('response2', response)
+      const ucpId = response?.data?.ucpId
+      if( ucpId == null) throw Error('missing ucpId')
+      console.log('ucpId', ucpId)
+      return ucpId
+    })
+  }
+
+  async endSession() {
+    this.session.ucpId = await this.getResponse(
+      getLogoutMessage(this.session.ucpId),
+      'signout',
+      _ => null
+    )
+  }
+
+  async startRequisition() {
+    this.form.type = await this.getResponse(
+      getNewPurchaseRequisition(this.session.ucpId),
+      'new product requisition',
+      _ => 'productrequisition',
+    )
+    this.form.docDt = "2021-01-10Z"
+    this.form.cancelRequest = getCancelPurchaseRequisition(this.session.ucpId)
+  }
+  async startUserProfile() {
+    this.form.type = await this.getResponse(
+      getNewUserProfile(this.session.ucpId),
+      'new user profile',
+      _ => 'userprofile',
+    )
+    this.form.userName = "abcxyz"
+    this.form.cancelRequest = getCancelUserProfile(this.session.ucpId)
+  }
+  async cancelForm() {
+    this.form.type = await this.getResponse(
+      this.form.cancelRequest,
+      'cancel changes',
+      _ => null,
+    )
+  }
+
+  async startSubscribePropertyChange(): Promise<void> {
     this.loading = true
-    this.addMessage('signing in ...')
+    this.addMessage('subscribing to property change ...')
+
+    let listening = false
+
+    const request = getSubPropertyChangeMessage(this.session.ucpId)
+    const subject = this.client.getStreamOfResponsesFromRequest(request)
 
     try {
-      const results = await this.client.getAllResponsesFromRequest(getLoginMessage())
-      const response = results.find( (r: any) => r?.header?.messageType == 'Response' )
-      const ucpId = response?.data?.ucpId
-      if( ucpId == null) throw Error('fail to get success response')
-      this.session.ucpId = ucpId
-      this.addMessage('login success.')
+      
+      this.subscription.subId = await new Promise((resolved, reject) => {
+        subject.subscribe({
+          next: (data) => {
+  
+            // when listening display all results 
+            if( listening ) {
+              let text = data?.header?.messageName
+              this.subscription.messages.push({
+                id: Symbol(),
+                text
+              })  
+            } 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 property change success.')
 
     } catch (error) {
-      this.addMessage('login fail :' + error)
+      this.addMessage('subscribe to property change fail : ' + error)
     }
+
     this.loading = false
   }
 
-  endSession = Trottle(async () => {
+  endSubscribePropertyChange = Trottle(async () => {
     this.loading = true
     this.addMessage('signing out...')