1111 </div >
1212
1313 <div class =" field mt-5" >
14- <!-- Label/toggle -->
15- <div class =" flex justify-content-between" >
16- <div class =" flex justify-content-start" >
17- <label for =" credentialValuesEdit" >
18- <strong >{{ $t('issue.credentialFieldValues') }}</strong >
19- </label >
20- </div >
21- <div class =" flex justify-content-end" >
22- {{ $t('common.json') }}
23- <InputSwitch v-model =" showRawJson" class =" ml-1" @input =" toggleJson" />
24- </div >
25- </div >
26-
27- <!-- Raw JSON input mode -->
28- <div v-show =" showRawJson" >
29- <Textarea
30- id =" credentialValuesEdit"
31- v-model =" credentialValuesJson"
32- :auto-resize =" true"
33- rows =" 20"
34- cols =" 60"
35- class =" w-full mt-1"
36- />
37-
38- <div class =" flex justify-content-end" >
39- <small >
40- <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
41- {{ $t('issue.schema') }}: {{ schemaForSelectedCred.schema.name }}
42- <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
43- {{ $t('issue.version') }}:
44- {{ schemaForSelectedCred.schema.version }}
45- </small >
46- </div >
47- </div >
48-
49- <!-- Dynamic Attribute field list -->
50- <div v-show =" !showRawJson" >
14+ <ToggleJson
15+ ref =" jsonVal"
16+ :to-json =" credentialValueToJson"
17+ :from-json =" jsonToCredentialValue"
18+ generic =" CredentialValue[]"
19+ >
20+ <!-- Dynamic Attribute field list -->
5121 <div
5222 v-for =" (item, index) in credentialValuesRaw"
5323 :key =" item.name"
6232 class =" w-full"
6333 />
6434 </div >
35+ </ToggleJson >
36+ <div class =" flex justify-content-end" >
37+ <small >
38+ <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
39+ {{ $t('issue.schema') }}: {{ schemaForSelectedCred.schema.name }}
40+ <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
41+ {{ $t('issue.version') }}:
42+ {{ schemaForSelectedCred.schema.version }}
43+ </small >
6544 </div >
66-
6745 <Button label =" Save" class =" mt-5 w-full" @click =" saveCredValues" />
6846 </div >
6947</template >
7351import { onMounted , ref } from ' vue' ;
7452// PrimeVue / Validation
7553import Button from ' primevue/button' ;
76- import InputSwitch from ' primevue/inputswitch' ;
7754import InputText from ' primevue/inputtext' ;
78- import Textarea from ' primevue/textarea' ;
7955import { useToast } from ' vue-toastification' ;
56+ import { tryParseJson } from ' @/helpers/jsonParsing' ;
57+ import ToggleJson from ' @/components/common/ToggleJson.vue' ;
8058
8159const toast = useToast ();
8260
8361// Props
62+ interface CredentialValue {
63+ name: string ;
64+ value: string ;
65+ }
8466interface Props {
85- existingCredentialValues? : { name : string ; value : string } [];
67+ existingCredentialValues? : CredentialValue [];
8668 header: String ;
8769 schemaForSelectedCred: any ;
8870}
@@ -91,58 +73,43 @@ const props = defineProps<Props>();
9173const emit = defineEmits ([' back' , ' save' ]);
9274
9375// Fields
94- const credentialValuesJson = ref (' ' );
95- const credentialValuesRaw = ref ([] as { name: string ; value: string }[]);
96-
97- const showRawJson = ref (false );
76+ const credentialValuesRaw = ref <CredentialValue []>([]);
9877
99- // TODO: util function file
100- function _tryParseJson(jsonString : string ) {
101- try {
102- const o = JSON .parse (jsonString );
103- if (o && typeof o === ' object' ) {
104- return o ;
105- }
106- return false ;
107- } catch (e ) {
108- return false ;
109- }
110- }
78+ const jsonVal = ref <{ showRawJson: boolean ; valuesJson: string }>({
79+ showRawJson: false ,
80+ valuesJson: ' ' ,
81+ });
11182
112- function _jsonToCredRaw() {
113- const parsed = _tryParseJson (credentialValuesJson .value );
83+ function jsonToCredentialValue(
84+ jsonString : string
85+ ): CredentialValue [] | undefined {
86+ const parsed = tryParseJson <CredentialValue []>(jsonString );
11487 if (parsed ) {
115- credentialValuesRaw .value = JSON .parse (credentialValuesJson .value );
88+ credentialValuesRaw .value = parsed ;
89+ return parsed ;
11690 } else {
11791 toast .warning (' The JSON you inputted has invalid syntax' );
92+ return undefined ;
11893 }
11994}
12095
121- const toggleJson = () => {
122- if (showRawJson .value ) {
123- // Convert over to the json from what was entered on the fields
124- credentialValuesJson .value = JSON .stringify (
125- credentialValuesRaw .value ,
126- undefined ,
127- 2
128- );
129- } else {
130- // Parse the entered JSON into fields, or ignore and warn if invalid syntax
131- _jsonToCredRaw ();
132- }
133- };
96+ function credentialValueToJson(): string | undefined {
97+ // Convert over to the json from what was entered on the fields
98+ const j = JSON .stringify (credentialValuesRaw .value , undefined , 2 );
99+ return j ;
100+ }
134101
135102const saveCredValues = () => {
136- if (showRawJson .value ) {
137- _jsonToCredRaw ( );
103+ if (jsonVal .value . showRawJson ) {
104+ jsonToCredentialValue ( jsonVal . value . valuesJson );
138105 }
139106 emit (' save' , credentialValuesRaw .value );
140107};
141108
142- // Whnen the component is intialized set up the fields and raw JSON based
109+ // When the component is initialized set up the fields and raw JSON based
143110// on the supplied schema and if there is existing values already
144111onMounted (() => {
145- // Popuplate cred editor if it's not already been edited
112+ // Populate cred editor if it's not already been edited
146113 if (! props .existingCredentialValues ?.length ) {
147114 const schemaFillIn = props .schemaForSelectedCred .schema .attrNames .map (
148115 (a : string ) => {
@@ -158,10 +125,5 @@ onMounted(() => {
158125 } else {
159126 credentialValuesRaw .value = props .existingCredentialValues ;
160127 }
161- credentialValuesJson .value = JSON .stringify (
162- credentialValuesRaw .value ,
163- undefined ,
164- 2
165- );
166128});
167129 </script >
0 commit comments