Make req Parms in the records view consistent with the Request view

Fixes #882

Author: cugarteblair

web-client/src/components/SrParmsFormatTabs.vue

@@ -26,11 +26,24 @@ hljs.registerLanguage('json', json)
 hljs.registerLanguage('python', python)
 hljs.registerLanguage('lua', lua)
 
-const props = defineProps<{
-  rcvdParms: object | string | null
-  sentParms?: object | string | null
-  endpoint?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    rcvdParms: object | string | null
+    sentParms?: object | string | null
+    endpoint?: string
+    mode?: 'received' | 'sending'
+  }>(),
+  {
+    mode: 'received'
+  }
+)
+
+// Tooltip text based on mode
+const tooltipPrefix = computed(() =>
+  props.mode === 'sending'
+    ? 'Request parameters that will be sent to server formatted in'
+    : 'Request parameters used by the server to create this record formatted in'
+)
 
 const activeTab = ref('0')
 
@@ -377,9 +390,9 @@ watch(parsedData, () => {
 <template>
   <Tabs v-model:value="activeTab">
     <TabList>
-      <Tab value="0" title="Request parameters used by the server formatted in JSON">JSON</Tab>
-      <Tab value="1" title="Request parameters used by the server formatted in Python">Python</Tab>
-      <Tab value="2" title="Request parameters used by the server formatted in Lua">Lua</Tab>
+      <Tab value="0" :title="`${tooltipPrefix} JSON`">JSON</Tab>
+      <Tab value="1" :title="`${tooltipPrefix} Python`">Python</Tab>
+      <Tab value="2" :title="`${tooltipPrefix} Lua`">Lua</Tab>
       <Tab value="3" title="Request parameters used in a python code example">Python Code</Tab>
       <Tab v-if="hasDiff" value="4" title="The exact parameters sent by this web client">Sent</Tab>
       <Tab
@@ -406,7 +419,7 @@ watch(parsedData, () => {
         <div class="tab-content">
           <div class="button-row">
             <Button
-              label="Copy"
+              label="Copy Python"
               size="small"
               icon="pi pi-copy"
               @click="copyPythonSnippetToClipboard"

web-client/src/components/SrRecIdReqDisplay.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import Button from 'primevue/button'
 import { db } from '@/db/SlideRuleDb'
 import SrReqParmsDisplayDlg from './SrReqParmsDisplayDlg.vue'
@@ -55,15 +55,31 @@ const reqParms = ref<string>('')
 const curAPI = ref<string>('')
 const tooltipRef = ref()
 
-onMounted(async () => {
-  if (props.reqId) {
-    curAPI.value = await db.getFunc(props.reqId)
-    const p = await db.getReqParams(props.reqId)
+async function loadReqParams(reqId: number) {
+  if (reqId) {
+    curAPI.value = await db.getFunc(reqId)
+    // Get the full request record to access rcvd_parms
+    const request = await db.table('requests').get(reqId)
+    // Use rcvd_parms (what server used) if available, fall back to parameters (what was sent)
+    const p = request?.rcvd_parms || request?.parameters || {}
     reqParms.value = JSON.stringify(p, null, 2)
   } else {
-    logger.debug('onMounted: no reqId')
+    logger.debug('loadReqParams: no reqId')
+    reqParms.value = ''
+    curAPI.value = ''
   }
+}
+
+onMounted(() => {
+  void loadReqParams(props.reqId)
 })
+
+watch(
+  () => props.reqId,
+  (newReqId) => {
+    void loadReqParams(newReqId)
+  }
+)
 // Open the Parms dialog
 function openParmsDialog(params: string | object) {
   if (typeof params === 'object') {

web-client/src/components/SrReqDisplay.vue

@@ -18,6 +18,7 @@
       :title="`endpoint = ${curAPI}`"
       :endpoint="curAPI"
       width="80vw"
+      mode="sending"
     />
   </div>
 </template>

web-client/src/components/SrReqParmsDisplayDlg.vue

@@ -2,12 +2,18 @@
 import Dialog from 'primevue/dialog'
 import SrParmsFormatTabs from './SrParmsFormatTabs.vue'
 
-const props = defineProps<{
-  rcvdParms: object | string | null
-  width?: string
-  title?: string
-  endpoint?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    rcvdParms: object | string | null
+    width?: string
+    title?: string
+    endpoint?: string
+    mode?: 'received' | 'sending'
+  }>(),
+  {
+    mode: 'received'
+  }
+)
 
 const modelValue = defineModel<boolean>({ default: false })
 </script>
@@ -25,7 +31,7 @@ const modelValue = defineModel<boolean>({ default: false })
       </div>
     </template>
 
-    <SrParmsFormatTabs :rcvdParms="props.rcvdParms" :endpoint="props.endpoint" />
+    <SrParmsFormatTabs :rcvdParms="props.rcvdParms" :endpoint="props.endpoint" :mode="props.mode" />
   </Dialog>
 </template>