Skip to content

Commit 4f7ddd7

Browse files
mrin9mrin9
committed
Added support for dynamic query params
1 parent acd7bd5 commit 4f7ddd7

File tree

6 files changed

+129
-35
lines changed

6 files changed

+129
-35
lines changed

‎.eslintrc‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
"no-continue": 0,
2121
"no-restricted-syntax" :0,
2222
"guard-for-in": 0,
23-
"no-loop-func": 0,
2423
"consistent-return": 0,
2524
"array-callback-return": 0,
2625
"prefer-destructuring": 0,

‎dist/eslint_report.html‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -88,35 +88,26 @@
8888
</style>
8989
</head>
9090
<body>
91-
<div id="overview" class="bg-1">
91+
<div id="overview" class="bg-2">
9292
<h1>ESLint Report</h1>
9393
<div>
94-
<span>2 problems (0 errors, 2 warnings)</span> - Generated on Sun Oct 20 2019 16:13:20 GMT-0700 (Pacific Daylight Time)
94+
<span>1 problem (1 error, 0 warnings)</span> - Generated on Mon Oct 21 2019 00:24:36 GMT-0700 (Pacific Daylight Time)
9595
</div>
9696
</div>
9797
<table>
9898
<tbody>
99-
<tr class="bg-1" data-group="f-0">
99+
<tr class="bg-2" data-group="f-0">
100100
<th colspan="4">
101-
[+] /Users/mrin/work/webpack-lit-openapi/src/rapidoc.js
102-
<span>2 problems (0 errors, 2 warnings)</span>
101+
[+] /Users/mrin/work/webpack-lit-openapi/src/components/api-request.js
102+
<span>1 problem (1 error, 0 warnings)</span>
103103
</th>
104104
</tr>
105105
<tr style="display:none" class="f-0">
106-
<td>802:7</td>
107-
<td class="clr-1">Warning</td>
108-
<td>Unexpected console statement.</td>
106+
<td>536:11</td>
107+
<td class="clr-2">Error</td>
108+
<td>&#39;queryParamObjTypeEls&#39; is assigned a value but never used.</td>
109109
<td>
110-
<a href="" target="_blank" rel="noopener noreferrer">no-console</a>
111-
</td>
112-
</tr>
113-
114-
<tr style="display:none" class="f-0">
115-
<td>815:11</td>
116-
<td class="clr-1">Warning</td>
117-
<td>Unexpected console statement.</td>
118-
<td>
119-
<a href="" target="_blank" rel="noopener noreferrer">no-console</a>
110+
<a href="" target="_blank" rel="noopener noreferrer">no-unused-vars</a>
120111
</td>
121112
</tr>
122113

‎docs/examples/dynamic-query-params.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<head>
3+
<!-- Global site tag (gtag.js) - Google Analytics -->
4+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
5+
<script>
6+
window.dataLayer = window.dataLayer || [];
7+
function gtag(){dataLayer.push(arguments);}
8+
gtag('js', new Date());
9+
10+
gtag('config', 'UA-132775238-1');
11+
</script>
12+
13+
<meta charset="utf-8">
14+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
15+
<script type="text/javascript" src="../rapidoc-min.js"></script>
16+
<style>
17+
rapi-doc{
18+
width:100%;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<rapi-doc spec-url="../specs/dynamic-query-params.yaml" style="min-width:460px"> </rapi-doc>
24+
</body>
25+
</html>

‎docs/list.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,10 @@
190190
<tr> <td class="mono-bold">
191191
<a href="./examples/xml.html"> XML response </a>
192192
</td></tr>
193-
193+
<tr> <td class="mono-bold">
194+
<a href="./examples/dynamic-query-params.html"> Dynamic Query Params </a>
195+
</td></tr>
196+
194197
</table>
195198
</div>
196199

‎docs/specs/dynamic-query-params.yaml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
openapi: 3.0.0
2+
info:
3+
title: Dynamic Query Params
4+
version: 1.0.0
5+
paths:
6+
/dynamic-query-params:
7+
get:
8+
summary: Responses and example as XML
9+
parameters:
10+
- name: full-name
11+
in: query
12+
description: Name of a person
13+
required: true
14+
schema:
15+
type: string
16+
minimum: 3
17+
- in: query
18+
name: params
19+
schema:
20+
type: object
21+
# If the parameter values are of specific type, e.g. string:
22+
additionalProperties:
23+
type: string
24+
# If the parameter values can be of different types
25+
# (e.g. string, number, boolean, ...)
26+
# additionalProperties: true
27+
28+
# `style: form` and `explode: true` is the default serialization method
29+
# for query parameters, so these keywords can be omitted
30+
style: form
31+
explode: true
32+
responses:
33+
'200':
34+
description: successful operation
35+
content:
36+
application/json:
37+
schema:
38+
type: object
39+
properties:
40+
age:
41+
description: Person's Age
42+
type: integer
43+
fullName:
44+
description: Person's name
45+
type: string

‎src/components/api-request.js‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -176,24 +176,34 @@ export default class ApiRequest extends LitElement {
176176
}
177177
</div>
178178
</td>
179-
<td style="width:160px; min-width:100px;">
179+
<td style="width:${paramSchema.type === 'array' || paramSchema.type === 'object' ? '220px' : '160px'}; min-width:100px;">
180180
${paramSchema.type === 'array'
181181
? html`
182182
<tag-input class="request-param"
183183
style = "width:160px; background:var(--input-bg);line-height:13px;"
184-
data-ptype = "${paramType}"
184+
data-ptype = "${paramType}"
185185
data-pname = "${param.name}"
186186
data-array = "true"
187187
placeholder= "add-multiple\u23ce"
188188
>
189189
</tag-input>`
190-
: html`
191-
<input type="text" spellcheck="false" style="width:100%" class="request-param"
192-
data-pname="${param.name}"
193-
data-ptype="${paramType}"
194-
data-array="false"
195-
value="${inputVal}"
196-
/>`
190+
: paramSchema.type === 'object'
191+
? html`
192+
<textarea
193+
class = "mono request-param"
194+
data-ptype = "${paramType}-object"
195+
data-pname = "${param.name}"
196+
spellcheck = "false"
197+
style = "resize:vertical; width:100%; height:120px;"
198+
></textarea>
199+
`
200+
: html`
201+
<input type="text" spellcheck="false" style="width:100%" class="request-param"
202+
data-pname="${param.name}"
203+
data-ptype="${paramType}"
204+
data-array="false"
205+
value="${inputVal}"
206+
/>`
197207
}
198208
</td>
199209
<td>
@@ -499,7 +509,7 @@ export default class ApiRequest extends LitElement {
499509
}
500510
/* eslint-enable indent */
501511

502-
onMimeTypeChange(e) {
512+
static onMimeTypeChange(e) {
503513
const textareaEls = e.target.closest('.tab-panel').querySelectorAll('textarea.request-body-param');
504514
const schemaTreeEls = e.target.closest('.tab-panel').querySelectorAll('schema-tree');
505515
[...textareaEls].map((el) => {
@@ -523,6 +533,7 @@ export default class ApiRequest extends LitElement {
523533
const requestPanelEl = e.target.closest('.request-panel');
524534
const pathParamEls = [...requestPanelEl.querySelectorAll(".request-param[data-ptype='path']")];
525535
const queryParamEls = [...requestPanelEl.querySelectorAll(".request-param[data-ptype='query']")];
536+
const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll(".request-param[data-ptype='query-object']")];
526537
const headerParamEls = [...requestPanelEl.querySelectorAll(".request-param[data-ptype='header']")];
527538
const formParamEls = [...requestPanelEl.querySelectorAll('.request-form-param')];
528539
const bodyParamEls = [...requestPanelEl.querySelectorAll('.request-body-param')];
@@ -538,24 +549,44 @@ export default class ApiRequest extends LitElement {
538549
fetchUrl = fetchUrl.replace(`{${el.dataset.pname}}`, el.value);
539550
});
540551

541-
// Submit Query Params
552+
// Collect Query Params
553+
const urlQueryParam = new URLSearchParams('');
542554
if (queryParamEls.length > 0) {
543-
const queryParam = new URLSearchParams('');
544555
queryParamEls.map((el) => {
545556
if (el.dataset.array === 'false') {
546557
if (el.value !== '') {
547-
queryParam.append(el.dataset.pname, el.value);
558+
urlQueryParam.append(el.dataset.pname, el.value);
548559
}
549560
} else {
550561
const vals = el.getValues();
551562
for (const v of vals) {
552-
queryParam.append(el.dataset.pname, v);
563+
urlQueryParam.append(el.dataset.pname, v);
553564
}
554565
}
555566
});
556-
fetchUrl = `${fetchUrl}?${queryParam.toString()}`;
557567
}
558568

569+
// Collect Query Params from Object
570+
if (queryParamObjTypeEls.length > 0) {
571+
let queryParamObj = {};
572+
queryParamObjTypeEls.map((el) => {
573+
try {
574+
queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\s+/g, ' ')));
575+
} catch (err) {
576+
console.log('unable to parse %s into object', el.value); // eslint-disable-line no-console
577+
}
578+
});
579+
if (Object.keys(queryParamObj).length > 0) {
580+
for (const key in queryParamObj) {
581+
urlQueryParam.append(key, queryParamObj[key]);
582+
}
583+
}
584+
}
585+
if (urlQueryParam.toString().trim()) {
586+
fetchUrl = `${fetchUrl}?${urlQueryParam.toString()}`;
587+
}
588+
589+
559590
// Add authentication Query-Param if provided
560591
if (this.apiKeyValue && this.apiKeyName && this.apiKeyLocation === 'query') {
561592
fetchUrl = `${fetchUrl}${fetchUrl.includes('?') ? '&' : '?'}${this.apiKeyName}=${encodeURIComponent(this.apiKeyValue)}`;

0 commit comments

Comments
 (0)