11<template >
2- <div class =" sr-rec-req-display-panel" >
3- <Button
4- icon =" pi pi-eye"
5- :label =" props.label"
6- class =" sr-glow-button"
7- @click =" openParmsDialog(reqParms)"
8- @mouseover =" tooltipRef?.showTooltip($event, props.tooltipText)"
9- @mouseleave =" tooltipRef?.hideTooltip"
10- variant =" text"
11- rounded
12- :disabled =" props.insensitive"
13- ></Button >
14- <SrCustomTooltip ref =" tooltipRef" id =" recIdDisplayTooltip" />
15- <SrJsonDisplayDialog
16- v-model:visible =" showParmsDialog"
17- :json-data =" reqParms"
18- :title =" `endpoint = ${curAPI}`"
19- width =" 50vw"
20- />
21- </div >
22- </template >
23-
24- <script setup lang="ts">
25- import { ref ,onMounted } from " vue" ;
26- import Button from " primevue/button" ;
27- import { db } from " @/db/SlideRuleDb" ;
28- import SrJsonDisplayDialog from " ./SrJsonDisplayDialog.vue" ;
29- import SrCustomTooltip from " ./SrCustomTooltip.vue" ;
30- import { createLogger } from ' @/utils/logger' ;
2+ <div class =" sr-rec-req-display-panel" >
3+ <Button
4+ icon =" pi pi-eye"
5+ :label =" props.label"
6+ class =" sr-glow-button"
7+ @click =" openParmsDialog(reqParms)"
8+ @mouseover =" tooltipRef?.showTooltip($event, props.tooltipText)"
9+ @mouseleave =" tooltipRef?.hideTooltip"
10+ variant =" text"
11+ rounded
12+ :disabled =" props.insensitive"
13+ ></Button >
14+ <SrCustomTooltip ref =" tooltipRef" id =" recIdDisplayTooltip" />
15+ <SrReqParmsDisplayDlg
16+ v-model:visible =" showParmsDialog"
17+ :json-data =" reqParms"
18+ :title =" `endpoint = ${curAPI}`"
19+ :endpoint =" curAPI"
20+ width =" 80vw"
21+ />
22+ </div >
23+ </template >
3124
32- const logger = createLogger (' SrRecIdReqDisplay' );
25+ <script setup lang="ts">
26+ import { ref , onMounted } from ' vue'
27+ import Button from ' primevue/button'
28+ import { db } from ' @/db/SlideRuleDb'
29+ import SrReqParmsDisplayDlg from ' ./SrReqParmsDisplayDlg.vue'
30+ import SrCustomTooltip from ' ./SrCustomTooltip.vue'
31+ import { createLogger } from ' @/utils/logger'
3332
34- const props = withDefaults (
35- defineProps <{
36- reqId: number ;
37- label: string ;
38- insensitive? : boolean ;
39- tooltipText? : string ;
40- }>(),
41- {
42- reqId: 0 ,
43- label: ' Show Req Parameters' ,
44- insensitive: false ,
45- tooltipText: ' click to show request parameters for current record' ,
46- tooltipUrl: ' ' ,
47- labelFontSize: ' small' ,
48- labelOnRight: false
49- }
50- );
33+ const logger = createLogger (' SrRecIdReqDisplay' )
5134
52- const showParmsDialog = ref (false );
53- const reqParms = ref <string >(' ' );
54- const curAPI = ref <string >(' ' );
55- const tooltipRef = ref ();
35+ const props = withDefaults (
36+ defineProps <{
37+ reqId: number
38+ label: string
39+ insensitive? : boolean
40+ tooltipText? : string
41+ }>(),
42+ {
43+ reqId: 0 ,
44+ label: ' Show Req Parameters' ,
45+ insensitive: false ,
46+ tooltipText: ' click to show request parameters for current record' ,
47+ tooltipUrl: ' ' ,
48+ labelFontSize: ' small' ,
49+ labelOnRight: false
50+ }
51+ )
5652
57- onMounted (async () => {
58- if (props .reqId ) {
59- curAPI .value = await db .getFunc (props .reqId );
60- const p = await db .getReqParams (props .reqId );
61- reqParms .value = JSON .stringify (p , null , 2 );
62- } else {
63- logger .debug (' onMounted: no reqId' );
64- }
65- });
66- // Open the Parms dialog
67- function openParmsDialog(params : string | object ) {
68- if (typeof params === ' object' ) {
69- reqParms .value = JSON .stringify (params , null , 2 );
70- } else {
71- reqParms .value = params ;
72- }
73- showParmsDialog .value = true ;
74- }
53+ const showParmsDialog = ref (false )
54+ const reqParms = ref <string >(' ' )
55+ const curAPI = ref <string >(' ' )
56+ const tooltipRef = ref ()
7557
76- </script >
77-
78- <style scoped>
79- /* Style your button and component here */
80- .sr-rec-req-display-panel {
58+ onMounted (async () => {
59+ if (props .reqId ) {
60+ curAPI .value = await db .getFunc (props .reqId )
61+ const p = await db .getReqParams (props .reqId )
62+ reqParms .value = JSON .stringify (p , null , 2 )
63+ } else {
64+ logger .debug (' onMounted: no reqId' )
8165 }
82-
83- .sr-rec-req-display-parms {
84- position : relative ;
85- margin-top : 0rem ;
86- display : flex ;
87- justify-content : column ;
88- max-height : 15rem ;
89- max-width : 15rem ;
90- min-height : 10rem ;
91- overflow-y : auto ;
92- overflow-x : auto ;
93- width : 100% ;
94- text-overflow : clip ;
95- scrollbar-width : none ; /* Firefox */
96- -ms-overflow-style : none ; /* Internet Explorer 10+ */
66+ })
67+ // Open the Parms dialog
68+ function openParmsDialog(params : string | object ) {
69+ if (typeof params === ' object' ) {
70+ reqParms .value = JSON .stringify (params , null , 2 )
71+ } else {
72+ reqParms .value = params
73+ }
74+ showParmsDialog .value = true
9775}
76+ </script >
9877
78+ <style scoped>
79+ /* Style your button and component here */
80+ .sr-rec-req-display-panel {
81+ }
9982
100-
83+ .sr-rec-req-display-parms {
84+ position : relative ;
85+ margin-top : 0rem ;
86+ display : flex ;
87+ justify-content : column ;
88+ max-height : 15rem ;
89+ max-width : 15rem ;
90+ min-height : 10rem ;
91+ overflow-y : auto ;
92+ overflow-x : auto ;
93+ width : 100% ;
94+ text-overflow : clip ;
95+ scrollbar-width : none ; /* Firefox */
96+ -ms-overflow-style : none ; /* Internet Explorer 10+ */
97+ }
10198 </style >
102-
0 commit comments