feat: ui
This commit is contained in:
Vlad Stan
+260
-104
@@ -613,6 +613,32 @@
|
|||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.test-mock-item-top-row {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-mock-item-skip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 46px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-mock-item-columns {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-mock-item-column {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
.test-mock-item-json {
|
.test-mock-item-json {
|
||||||
min-height: 160px;
|
min-height: 160px;
|
||||||
}
|
}
|
||||||
@@ -1189,6 +1215,8 @@
|
|||||||
.mock-source-grid,
|
.mock-source-grid,
|
||||||
.test-detail-grid,
|
.test-detail-grid,
|
||||||
.test-mock-item-grid,
|
.test-mock-item-grid,
|
||||||
|
.test-mock-item-top-row,
|
||||||
|
.test-mock-item-columns,
|
||||||
.settings-row-grid,
|
.settings-row-grid,
|
||||||
.settings-table-grid {
|
.settings-table-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -1546,110 +1574,206 @@
|
|||||||
></q-btn>
|
></q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="testMockItemHasSkip(item)" class="q-mb-md">
|
<template v-if="activeTestMockBindingMode(mockSet) === 'rest'">
|
||||||
<q-checkbox
|
<div class="test-mock-item-top-row">
|
||||||
:model-value="testMockItemSkip(item)"
|
<div>
|
||||||
dense
|
<label
|
||||||
color="warning"
|
class="field-label"
|
||||||
keep-color
|
:for="`test-mock-item-description-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
label="Skip this mock definition"
|
>
|
||||||
@update:model-value="setTestMockItemSkip(testEntry, mockSet, item, $event)"
|
Description
|
||||||
></q-checkbox>
|
</label>
|
||||||
</div>
|
<input
|
||||||
|
:id="`test-mock-item-description-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
v-model="item.descriptionText"
|
||||||
|
class="native-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="Optional label"
|
||||||
|
spellcheck="false"
|
||||||
|
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="test-mock-item-grid">
|
<div class="test-mock-item-skip">
|
||||||
<div>
|
<q-checkbox
|
||||||
<label
|
:model-value="testMockItemSkip(item)"
|
||||||
class="field-label"
|
dense
|
||||||
:for="`test-mock-item-description-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
color="warning"
|
||||||
>
|
keep-color
|
||||||
Description
|
label="Skip this mock definition"
|
||||||
</label>
|
@update:model-value="setTestMockItemSkip(testEntry, mockSet, item, $event)"
|
||||||
<input
|
></q-checkbox>
|
||||||
:id="`test-mock-item-description-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
|
||||||
v-model="item.descriptionText"
|
|
||||||
class="native-input"
|
|
||||||
type="text"
|
|
||||||
placeholder="Optional label"
|
|
||||||
spellcheck="false"
|
|
||||||
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="activeTestMockBindingMode(mockSet) === 'rest'">
|
|
||||||
<label
|
|
||||||
class="field-label"
|
|
||||||
:for="`test-mock-item-request-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
|
||||||
>
|
|
||||||
Request Type
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
:id="`test-mock-item-request-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
|
||||||
v-model="item.requestType"
|
|
||||||
class="native-input"
|
|
||||||
type="text"
|
|
||||||
placeholder="json"
|
|
||||||
spellcheck="false"
|
|
||||||
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="activeTestMockBindingMode(mockSet) === 'rest'">
|
|
||||||
<label
|
|
||||||
class="field-label"
|
|
||||||
:for="`test-mock-item-request-body-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
|
||||||
>
|
|
||||||
Request Body
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
:id="`test-mock-item-request-body-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
|
||||||
v-model="item.requestBodyText"
|
|
||||||
class="native-textarea test-mock-item-json"
|
|
||||||
spellcheck="false"
|
|
||||||
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
|
||||||
></textarea>
|
|
||||||
<div v-if="item.requestBodyError" class="settings-error q-mt-sm">
|
|
||||||
{{ item.requestBodyError }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="test-mock-item-columns q-mt-md">
|
||||||
<label
|
<div class="test-mock-item-column">
|
||||||
class="field-label"
|
<div>
|
||||||
:for="`test-mock-item-response-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
<label
|
||||||
>
|
class="field-label"
|
||||||
Response Type
|
:for="`test-mock-item-request-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
</label>
|
>
|
||||||
<input
|
Request Type
|
||||||
:id="`test-mock-item-response-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
</label>
|
||||||
v-model="item.responseType"
|
<q-select
|
||||||
class="native-input"
|
:id="`test-mock-item-request-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
type="text"
|
v-model="item.requestType"
|
||||||
placeholder="json"
|
:options="restTestMockRequestTypeOptions"
|
||||||
spellcheck="false"
|
emit-value
|
||||||
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
map-options
|
||||||
/>
|
outlined
|
||||||
</div>
|
dense
|
||||||
|
options-dense
|
||||||
|
behavior="menu"
|
||||||
|
hide-dropdown-icon
|
||||||
|
class="fixture-select"
|
||||||
|
@update:model-value="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<span class="fixture-select-icon" aria-hidden="true">expand_more</span>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="test-mock-item-full">
|
<div>
|
||||||
<label
|
<label
|
||||||
class="field-label"
|
class="field-label"
|
||||||
:for="`test-mock-item-response-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
:for="`test-mock-item-request-body-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
>
|
>
|
||||||
Response
|
Request Body
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
:id="`test-mock-item-response-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
:id="`test-mock-item-request-body-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
v-model="item.responseText"
|
v-model="item.requestBodyText"
|
||||||
class="native-textarea test-mock-item-json"
|
class="native-textarea test-mock-item-json"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
></textarea>
|
></textarea>
|
||||||
<div v-if="item.responseError" class="settings-error q-mt-sm">
|
<div v-if="item.requestBodyError" class="settings-error q-mt-sm">
|
||||||
{{ item.responseError }}
|
{{ item.requestBodyError }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-mock-item-column">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="field-label"
|
||||||
|
:for="`test-mock-item-response-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
>
|
||||||
|
Response Type
|
||||||
|
</label>
|
||||||
|
<q-select
|
||||||
|
:id="`test-mock-item-response-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
v-model="item.responseType"
|
||||||
|
:options="restTestMockResponseTypeOptions"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
options-dense
|
||||||
|
behavior="menu"
|
||||||
|
hide-dropdown-icon
|
||||||
|
class="fixture-select"
|
||||||
|
@update:model-value="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<span class="fixture-select-icon" aria-hidden="true">expand_more</span>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="field-label"
|
||||||
|
:for="`test-mock-item-response-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
>
|
||||||
|
Response
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
:id="`test-mock-item-response-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
v-model="item.responseText"
|
||||||
|
class="native-textarea test-mock-item-json"
|
||||||
|
spellcheck="false"
|
||||||
|
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
|
></textarea>
|
||||||
|
<div v-if="item.responseError" class="settings-error q-mt-sm">
|
||||||
|
{{ item.responseError }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<div v-if="testMockItemHasSkip(item)" class="q-mb-md">
|
||||||
|
<q-checkbox
|
||||||
|
:model-value="testMockItemSkip(item)"
|
||||||
|
dense
|
||||||
|
color="warning"
|
||||||
|
keep-color
|
||||||
|
label="Skip this mock definition"
|
||||||
|
@update:model-value="setTestMockItemSkip(testEntry, mockSet, item, $event)"
|
||||||
|
></q-checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-mock-item-grid">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="field-label"
|
||||||
|
:for="`test-mock-item-description-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
>
|
||||||
|
Description
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
:id="`test-mock-item-description-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
v-model="item.descriptionText"
|
||||||
|
class="native-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="Optional label"
|
||||||
|
spellcheck="false"
|
||||||
|
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="field-label"
|
||||||
|
:for="`test-mock-item-response-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
>
|
||||||
|
Response Type
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
:id="`test-mock-item-response-type-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
v-model="item.responseType"
|
||||||
|
class="native-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="json"
|
||||||
|
spellcheck="false"
|
||||||
|
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="test-mock-item-full">
|
||||||
|
<label
|
||||||
|
class="field-label"
|
||||||
|
:for="`test-mock-item-response-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
>
|
||||||
|
Response
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
:id="`test-mock-item-response-${group.key}-${testEntry.index}-${mockSetIndex}-${activeTestMockBindingName(mockSet)}-${itemIndex}`"
|
||||||
|
v-model="item.responseText"
|
||||||
|
class="native-textarea test-mock-item-json"
|
||||||
|
spellcheck="false"
|
||||||
|
@input="persistTestMockSet(testEntry, mockSet, { silent: true })"
|
||||||
|
></textarea>
|
||||||
|
<div v-if="item.responseError" class="settings-error q-mt-sm">
|
||||||
|
{{ item.responseError }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<div v-if="item.error" class="settings-error q-mt-sm">
|
<div v-if="item.error" class="settings-error q-mt-sm">
|
||||||
{{ item.error }}
|
{{ item.error }}
|
||||||
@@ -2067,15 +2191,24 @@
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="function-mock-cell-stack">
|
<div class="function-mock-cell-stack">
|
||||||
<div class="function-mock-subfield">
|
<div class="function-mock-subfield">
|
||||||
<input
|
<q-select
|
||||||
:id="`function-mock-response-type-${mockRow.id}`"
|
:id="`function-mock-response-type-${mockRow.id}`"
|
||||||
v-model="mockRow.responseType"
|
v-model="mockRow.responseType"
|
||||||
class="native-input"
|
:options="functionMockRpcResponseTypeOptions"
|
||||||
type="text"
|
emit-value
|
||||||
placeholder="data"
|
map-options
|
||||||
spellcheck="false"
|
outlined
|
||||||
@input="persistFunctionMocks({ silent: true })"
|
dense
|
||||||
/>
|
options-dense
|
||||||
|
behavior="menu"
|
||||||
|
hide-dropdown-icon
|
||||||
|
class="fixture-select"
|
||||||
|
@update:model-value="persistFunctionMocks({ silent: true })"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<span class="fixture-select-icon" aria-hidden="true">expand_more</span>
|
||||||
|
</template>
|
||||||
|
</q-select>
|
||||||
<div class="settings-hint">
|
<div class="settings-hint">
|
||||||
Response Type: Optional RPC return mode such as
|
Response Type: Optional RPC return mode such as
|
||||||
<code>data</code>,
|
<code>data</code>,
|
||||||
@@ -2783,6 +2916,29 @@
|
|||||||
{ label: 'RPC', value: 'function' }
|
{ label: 'RPC', value: 'function' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
functionMockRpcResponseTypeOptions() {
|
||||||
|
return [
|
||||||
|
{ label: 'data', value: 'data' },
|
||||||
|
{ label: 'function', value: 'function' },
|
||||||
|
{ label: 'async-function', value: 'async-function' },
|
||||||
|
{ label: 'json', value: 'json' },
|
||||||
|
{ label: 'exception', value: 'exception' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
restTestMockRequestTypeOptions() {
|
||||||
|
return [
|
||||||
|
{ label: 'data', value: 'data' },
|
||||||
|
{ label: 'json', value: 'json' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
restTestMockResponseTypeOptions() {
|
||||||
|
return [
|
||||||
|
{ label: 'json', value: 'json' },
|
||||||
|
{ label: 'data', value: 'data' },
|
||||||
|
{ label: 'response', value: 'response' },
|
||||||
|
{ label: 'stream', value: 'stream' }
|
||||||
|
]
|
||||||
|
},
|
||||||
currentFundingSourceName() {
|
currentFundingSourceName() {
|
||||||
return this.selectedFundingSourceByDataset[this.selectedDatasetKey] || ''
|
return this.selectedFundingSourceByDataset[this.selectedDatasetKey] || ''
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user