Standardize list inputs
***Refactor field row view component in module*** ***Add small responsive design to unique values table*** ***Update system fields table in module edit view
This commit is contained in:
Emmy Leke
Jože Fortun
@@ -63,41 +63,38 @@
|
||||
:label="$t('redirectURI')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-button
|
||||
data-test-id="button-add-redirect-uris"
|
||||
variant="light"
|
||||
class="align-top"
|
||||
@click="redirectURI.push('')"
|
||||
<c-form-table-wrapper
|
||||
:labels="{ addButton: $t('general:label.add') }"
|
||||
test-id="button-add-redirect-uris"
|
||||
add-button-class="mt-2"
|
||||
@add-item="redirectURI.push('')"
|
||||
>
|
||||
+ {{ $t('add') }}
|
||||
</b-button>
|
||||
|
||||
<div
|
||||
v-if="redirectURI.length"
|
||||
>
|
||||
<b-input-group
|
||||
v-for="(value, index) in redirectURI"
|
||||
:key="index"
|
||||
class="mt-2"
|
||||
<div
|
||||
v-if="redirectURI.length"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="redirectURI[index]"
|
||||
data-test-id="input-uri"
|
||||
:placeholder="$t('uri')"
|
||||
/>
|
||||
|
||||
<b-button
|
||||
data-test-id="button-remove-uri"
|
||||
class="ml-1 text-danger"
|
||||
variant="link"
|
||||
@click="redirectURI.splice(index, 1)"
|
||||
<b-input-group
|
||||
v-for="(value, index) in redirectURI"
|
||||
:key="index"
|
||||
class="mt-2"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'times']"
|
||||
<b-form-input
|
||||
v-model="redirectURI[index]"
|
||||
data-test-id="input-uri"
|
||||
:placeholder="$t('uri')"
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group>
|
||||
</div>
|
||||
<b-button
|
||||
data-test-id="button-remove-uri"
|
||||
class="ml-1 text-danger"
|
||||
variant="link"
|
||||
@click="redirectURI.splice(index, 1)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'times']"
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
|
||||
<div>
|
||||
<hr>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
@@ -62,53 +63,52 @@
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label-class="pb-1 text-primary"
|
||||
:label="$t('links.title')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<template #label>
|
||||
{{ $t('links.title') }}
|
||||
<b-button
|
||||
variant="link"
|
||||
class="text-decoration-none"
|
||||
@click="topbarSettings.helpLinks.push({ handle: '', url: '', newTab: true })"
|
||||
>
|
||||
{{ $t('general:label.plus-add') }}
|
||||
</b-button>
|
||||
</template>
|
||||
<b-table
|
||||
:fields="links.fields"
|
||||
:items="topbarSettings.helpLinks"
|
||||
head-variant="light"
|
||||
responsive="sm"
|
||||
small
|
||||
class="mb-0"
|
||||
<c-form-table-wrapper
|
||||
:labels="{ addButton: $t('general:label.add') }"
|
||||
@add-item="topbarSettings.helpLinks.push({ handle: '', url: '', newTab: true })"
|
||||
>
|
||||
<template #cell(handle)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.handle"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(url)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.url"
|
||||
type="url"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(newTab)="data">
|
||||
<b-form-checkbox
|
||||
v-model="data.item.newTab"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(actions)="data">
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="topbarSettings.helpLinks.splice(data.index, 1)"
|
||||
/>
|
||||
</template>
|
||||
</b-table>
|
||||
<b-table
|
||||
:fields="links.fields"
|
||||
:items="topbarSettings.helpLinks"
|
||||
thead-tr-class="text-primary"
|
||||
responsive="sm"
|
||||
small
|
||||
>
|
||||
<template #cell(handle)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.handle"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell(url)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.url"
|
||||
type="url"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell(newTab)="data">
|
||||
<b-form-checkbox
|
||||
v-model="data.item.newTab"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell(actions)="data">
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="topbarSettings.helpLinks.splice(data.index, 1)"
|
||||
/>
|
||||
</template>
|
||||
</b-table>
|
||||
</c-form-table-wrapper>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@@ -116,12 +116,14 @@
|
||||
|
||||
<div>
|
||||
<hr>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
cols="12"
|
||||
lg="3"
|
||||
>
|
||||
<h5>{{ $t('profile.title') }}</h5>
|
||||
|
||||
<b-form-group>
|
||||
<b-form-checkbox
|
||||
v-model="topbarSettings.hideProfileLink"
|
||||
@@ -142,53 +144,52 @@
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
|
||||
<b-col>
|
||||
<b-form-group
|
||||
label-class="pb-1 text-primary"
|
||||
:label="$t('links.title')"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<template #label>
|
||||
{{ $t('links.title') }}
|
||||
<b-button
|
||||
variant="link"
|
||||
class="text-decoration-none"
|
||||
@click="topbarSettings.profileLinks.push({ handle: '', url: '', newTab: true })"
|
||||
>
|
||||
{{ $t('general:label.plus-add') }}
|
||||
</b-button>
|
||||
</template>
|
||||
<b-table
|
||||
:fields="links.fields"
|
||||
:items="topbarSettings.profileLinks"
|
||||
head-variant="light"
|
||||
responsive="sm"
|
||||
small
|
||||
class="mb-0"
|
||||
<c-form-table-wrapper
|
||||
:labels="{ addButton: $t('general:label.add') }"
|
||||
@add-item="topbarSettings.profileLinks.push({ handle: '', url: '', newTab: true })"
|
||||
>
|
||||
<template #cell(handle)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.handle"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(url)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.url"
|
||||
type="url"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(newTab)="data">
|
||||
<b-form-checkbox
|
||||
v-model="data.item.newTab"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(actions)="data">
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="topbarSettings.profileLinks.splice(data.index, 1)"
|
||||
/>
|
||||
</template>
|
||||
</b-table>
|
||||
<b-table
|
||||
:fields="links.fields"
|
||||
:items="topbarSettings.profileLinks"
|
||||
thead-tr-class="text-primary"
|
||||
responsive="sm"
|
||||
small
|
||||
>
|
||||
<template #cell(handle)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.handle"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell(url)="data">
|
||||
<b-form-input
|
||||
v-model="data.item.url"
|
||||
type="url"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell(newTab)="data">
|
||||
<b-form-checkbox
|
||||
v-model="data.item.newTab"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell(actions)="data">
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="topbarSettings.profileLinks.splice(data.index, 1)"
|
||||
/>
|
||||
</template>
|
||||
</b-table>
|
||||
</c-form-table-wrapper>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
TooltipComponent,
|
||||
} from 'echarts/components'
|
||||
|
||||
const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect } = components
|
||||
const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect, CFormTableWrapper } = components
|
||||
|
||||
Vue.use(PortalVue)
|
||||
Vue.component('c-corredor-manual-buttons', CCorredorManualButtons)
|
||||
@@ -36,6 +36,7 @@ Vue.component('c-button-submit', CButtonSubmit)
|
||||
Vue.component('c-input-checkbox', CInputCheckbox)
|
||||
Vue.component('c-system-fields', CSystemFields)
|
||||
Vue.component('c-input-select', CInputSelect)
|
||||
Vue.component('c-form-table-wrapper', CFormTableWrapper)
|
||||
|
||||
use([
|
||||
LineChart,
|
||||
|
||||
@@ -97,8 +97,8 @@
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-right align-middle pr-2"
|
||||
style="min-width: 100px;"
|
||||
class="text-right align-middle"
|
||||
style="min-width: 110px;"
|
||||
>
|
||||
<c-permissions-button
|
||||
v-if="canGrant && !isNew"
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td />
|
||||
<td class="pl-3">
|
||||
<td class="pr-2" />
|
||||
|
||||
<td style="width: 250px;">
|
||||
{{ field.name }}
|
||||
<b-badge
|
||||
v-if="field.omit"
|
||||
@@ -11,10 +12,12 @@
|
||||
{{ $t('unavailable') }}
|
||||
</b-badge>
|
||||
</td>
|
||||
<td class="pl-3">
|
||||
|
||||
<td style="width: 250px;">
|
||||
{{ field.label }}
|
||||
</td>
|
||||
<td class="pl-3">
|
||||
|
||||
<td>
|
||||
{{ field.kind }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -59,12 +59,14 @@
|
||||
</b-form-group>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<c-form-table-wrapper
|
||||
v-if="rule.constraints && rule.constraints.length > 0"
|
||||
class="list-background rounded border border-light p-1"
|
||||
hide-add-button
|
||||
>
|
||||
<b-table-simple
|
||||
borderless
|
||||
small
|
||||
responsive
|
||||
class="mb-0"
|
||||
>
|
||||
<thead>
|
||||
@@ -84,6 +86,7 @@
|
||||
<th style="width: 150px;" />
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody v-if="rule.constraints">
|
||||
<tr
|
||||
v-for="(constraint, consIndex) in rule.constraints"
|
||||
@@ -119,7 +122,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</b-table-simple>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
@@ -135,90 +135,81 @@
|
||||
</b-button>
|
||||
</h5>
|
||||
|
||||
<b-table-simple
|
||||
borderless
|
||||
small
|
||||
responsive="lg"
|
||||
<c-form-table-wrapper
|
||||
:labels="{
|
||||
addButton: $t('general:label.add')
|
||||
}"
|
||||
:disable-add-button="addRuleDisabled"
|
||||
@add-item="addRule"
|
||||
>
|
||||
<b-thead>
|
||||
<b-tr>
|
||||
<b-th
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('record.fieldConditions.field') }}
|
||||
</b-th>
|
||||
|
||||
<b-th
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('record.fieldConditions.condition') }}
|
||||
</b-th>
|
||||
|
||||
<b-th />
|
||||
</b-tr>
|
||||
</b-thead>
|
||||
|
||||
<b-tbody>
|
||||
<b-tr
|
||||
v-for="(condition, i) in block.options.fieldConditions"
|
||||
:key="i"
|
||||
>
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="width: 33%; min-width: 250px;"
|
||||
>
|
||||
<c-input-select
|
||||
v-model="condition.field"
|
||||
:options="block.options.fields"
|
||||
:placeholder="$t('record.fieldConditions.selectPlaceholder')"
|
||||
:selectable="option => isSelectable(option)"
|
||||
:get-option-label="getOptionLabel"
|
||||
:get-option-key="getOptionKey"
|
||||
:reduce="option => option.isSystem ? option.name : option.fieldID"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="min-width: 300px;"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-button variant="extra-light">
|
||||
ƒ
|
||||
</b-button>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
v-model="condition.condition"
|
||||
:placeholder="$t('record.fieldConditions.placeholder')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-td>
|
||||
|
||||
<b-td
|
||||
class="text-center align-middle pr-2"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="deleteRule(i)"
|
||||
/>
|
||||
</b-td>
|
||||
</b-tr>
|
||||
|
||||
<b-tr>
|
||||
<b-td>
|
||||
<b-button
|
||||
variant="primary"
|
||||
:disabled="addRuleDisabled"
|
||||
@click="addRule"
|
||||
<b-table-simple
|
||||
borderless
|
||||
small
|
||||
responsive="lg"
|
||||
>
|
||||
<b-thead>
|
||||
<b-tr>
|
||||
<b-th
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('record.fieldConditions.action') }}
|
||||
</b-button>
|
||||
</b-td>
|
||||
</b-tr>
|
||||
</b-tbody>
|
||||
</b-table-simple>
|
||||
{{ $t('record.fieldConditions.field') }}
|
||||
</b-th>
|
||||
<b-th
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('record.fieldConditions.condition') }}
|
||||
</b-th>
|
||||
<b-th />
|
||||
</b-tr>
|
||||
</b-thead>
|
||||
<b-tbody>
|
||||
<b-tr
|
||||
v-for="(condition, i) in block.options.fieldConditions"
|
||||
:key="i"
|
||||
>
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="width: 33%; min-width: 250px;"
|
||||
>
|
||||
<c-input-select
|
||||
v-model="condition.field"
|
||||
:options="block.options.fields"
|
||||
:placeholder="$t('record.fieldConditions.selectPlaceholder')"
|
||||
:selectable="option => isSelectable(option)"
|
||||
:get-option-label="getOptionLabel"
|
||||
:get-option-key="getOptionKey"
|
||||
:reduce="option => option.isSystem ? option.name : option.fieldID"
|
||||
/>
|
||||
</b-td>
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="min-width: 300px;"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-button variant="extra-light">
|
||||
ƒ
|
||||
</b-button>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
v-model="condition.condition"
|
||||
:placeholder="$t('record.fieldConditions.placeholder')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-td>
|
||||
<b-td
|
||||
class="text-center align-middle pr-2"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="deleteRule(i)"
|
||||
/>
|
||||
</b-td>
|
||||
</b-tr>
|
||||
</b-tbody>
|
||||
</b-table-simple>
|
||||
</c-form-table-wrapper>
|
||||
</div>
|
||||
</b-tab>
|
||||
</template>
|
||||
|
||||
@@ -308,17 +308,20 @@
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="list-background rounded border border-light p-3">
|
||||
<b-form-group
|
||||
:label="$t('recordList.filter.presets')"
|
||||
label-class="text-primary"
|
||||
class="mb-0"
|
||||
<b-form-group
|
||||
:label="$t('recordList.filter.presets')"
|
||||
label-class="text-primary mb-1"
|
||||
>
|
||||
<c-form-table-wrapper
|
||||
:labels="{
|
||||
addButton: $t('general:label.add')
|
||||
}"
|
||||
@add-item="addFilterPreset"
|
||||
>
|
||||
<b-spinner v-if="fetchingRoles" />
|
||||
|
||||
<template v-else>
|
||||
<b-table-simple
|
||||
v-if="recordListModule"
|
||||
borderless
|
||||
small
|
||||
responsive="lg"
|
||||
@@ -411,8 +414,8 @@
|
||||
{{ $t('general:label.add') }}
|
||||
</b-button>
|
||||
</template>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
@@ -444,28 +447,21 @@
|
||||
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="list-background rounded border border-light p-3">
|
||||
<b-form-group
|
||||
:label="$t('recordList.record.presortInputLabel')"
|
||||
label-class="text-primary"
|
||||
class="mb-0"
|
||||
>
|
||||
<c-input-presort
|
||||
v-model="options.presort"
|
||||
:fields="recordListModuleFields"
|
||||
:labels="{
|
||||
add: $t('general:label.add'),
|
||||
ascending: $t('general:label.ascending'),
|
||||
descending: $t('general:label.descending'),
|
||||
none: $t('general:label.none'),
|
||||
placeholder: $t('recordList.record.presortPlaceholder'),
|
||||
footnote: $t('recordList.record.presortFootnote'),
|
||||
toggleInput: $t('recordList.record.presortToggleInput'),
|
||||
}"
|
||||
allow-text-input
|
||||
/>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<c-input-presort
|
||||
v-model="options.presort"
|
||||
:fields="recordListModuleFields"
|
||||
:labels="{
|
||||
ascending: $t('general:label.ascending'),
|
||||
descending: $t('general:label.descending'),
|
||||
none: $t('general:label.none'),
|
||||
placeholder: $t('recordList.record.presortPlaceholder'),
|
||||
footnote: $t('recordList.record.presortFootnote'),
|
||||
toggleInput: $t('recordList.record.presortToggleInput'),
|
||||
addButton: $t('general:label.add'),
|
||||
title: $t('recordList.record.presortInputLabel')
|
||||
}"
|
||||
allow-text-input
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
@@ -109,136 +109,126 @@
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<b-table-simple
|
||||
v-if="block.options.tabs.length"
|
||||
responsive="lg"
|
||||
borderless
|
||||
small
|
||||
<c-form-table-wrapper
|
||||
:labels="{
|
||||
addButton: $t('general:label.add')
|
||||
}"
|
||||
@add-item="addTab"
|
||||
>
|
||||
<b-thead>
|
||||
<tr>
|
||||
<th />
|
||||
|
||||
<th class="d-flex align-items-center text-primary">
|
||||
{{ $t('tabs.table.columns.title.label') }}
|
||||
<c-hint
|
||||
:tooltip="$t('interpolationFootnote', ['${record.values.fieldName}', '${recordID}', '${ownerID}', '${userID}'])"
|
||||
class="d-block"
|
||||
/>
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('tabs.table.columns.block.label') }}
|
||||
</th>
|
||||
|
||||
<th />
|
||||
</tr>
|
||||
</b-thead>
|
||||
|
||||
<draggable
|
||||
v-model="block.options.tabs"
|
||||
handle=".handle"
|
||||
tag="b-tbody"
|
||||
<b-table-simple
|
||||
responsive="lg"
|
||||
borderless
|
||||
small
|
||||
>
|
||||
<tr
|
||||
v-for="(tab, index) in block.options.tabs"
|
||||
:key="index"
|
||||
>
|
||||
<b-td class="handle align-middle pr-2">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars']"
|
||||
class="grab m-0 text-secondary p-0"
|
||||
/>
|
||||
</b-td>
|
||||
<b-thead>
|
||||
<tr>
|
||||
<th />
|
||||
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="width: 50%; min-width: 200px;"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="tab.title"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="width: 50%; min-width: 200px;"
|
||||
>
|
||||
<b-input-group class="d-flex flex-nowrap w-100">
|
||||
<c-input-select
|
||||
v-model="tab.blockID"
|
||||
:options="blockOptions"
|
||||
:placeholder="$t('tabs.placeholder.block')"
|
||||
:get-option-label="getBlockLabel"
|
||||
:get-option-key="getOptionKey"
|
||||
:selectable="option => isSelectable(option)"
|
||||
:reduce="option => option.value"
|
||||
<th class="d-flex align-items-center text-primary">
|
||||
{{ $t('tabs.table.columns.title.label') }}
|
||||
<c-hint
|
||||
:tooltip="$t('interpolationFootnote', ['${record.values.fieldName}', '${recordID}', '${ownerID}', '${userID}'])"
|
||||
class="d-block"
|
||||
/>
|
||||
</th>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
v-if="tab.blockID"
|
||||
id="popover-edit"
|
||||
v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.edit'), container: '#body' }"
|
||||
size="sm"
|
||||
variant="extra-light"
|
||||
class="d-flex align-items-center justify-content-center"
|
||||
style="width: 40px;"
|
||||
@click="editBlock(tab.blockID)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['far', 'edit']"
|
||||
/>
|
||||
</b-button>
|
||||
<b-button
|
||||
v-else
|
||||
v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.addBlock'), container: '#body' }"
|
||||
size="sm"
|
||||
variant="extra-light"
|
||||
class="d-flex align-items-center justify-content-center"
|
||||
style="width: 40px;"
|
||||
@click="showBlockSelector(index)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-td>
|
||||
<th
|
||||
class="text-primary"
|
||||
>
|
||||
{{ $t('tabs.table.columns.block.label') }}
|
||||
</th>
|
||||
|
||||
<td
|
||||
class="text-center align-middle"
|
||||
style="min-width: 80px;"
|
||||
<th />
|
||||
</tr>
|
||||
</b-thead>
|
||||
|
||||
<draggable
|
||||
v-model="block.options.tabs"
|
||||
handle=".handle"
|
||||
tag="b-tbody"
|
||||
>
|
||||
<tr
|
||||
v-for="(tab, index) in block.options.tabs"
|
||||
:key="index"
|
||||
>
|
||||
<c-input-confirm
|
||||
:tooltip="$t('tabs.tooltip.delete')"
|
||||
show-icon
|
||||
@confirmed="deleteTab(index)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
</b-table-simple>
|
||||
<b-td class="handle align-middle pr-2">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars']"
|
||||
class="grab m-0 text-secondary p-0"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="text-center my-4"
|
||||
>
|
||||
<p>
|
||||
{{ $t('tabs.noTabs') }}
|
||||
</p>
|
||||
</div>
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="width: 50%; min-width: 200px;"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="tab.title"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="text-decoration-none"
|
||||
@click="addTab"
|
||||
>
|
||||
{{ $t('tabs.addTab') }}
|
||||
</b-button>
|
||||
<b-td
|
||||
class="align-middle"
|
||||
style="width: 50%; min-width: 200px;"
|
||||
>
|
||||
<b-input-group class="d-flex flex-nowrap w-100">
|
||||
<c-input-select
|
||||
v-model="tab.blockID"
|
||||
:options="blockOptions"
|
||||
:placeholder="$t('tabs.placeholder.block')"
|
||||
:get-option-label="getBlockLabel"
|
||||
:get-option-key="getOptionKey"
|
||||
:selectable="option => isSelectable(option)"
|
||||
:reduce="option => option.value"
|
||||
/>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
v-if="tab.blockID"
|
||||
id="popover-edit"
|
||||
v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.edit'), container: '#body' }"
|
||||
size="sm"
|
||||
variant="extra-light"
|
||||
class="d-flex align-items-center justify-content-center"
|
||||
style="width: 40px;"
|
||||
@click="editBlock(tab.blockID)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['far', 'edit']"
|
||||
/>
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-else
|
||||
v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.addBlock'), container: '#body' }"
|
||||
size="sm"
|
||||
variant="extra-light"
|
||||
class="d-flex align-items-center justify-content-center"
|
||||
style="width: 40px;"
|
||||
@click="showBlockSelector(index)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-td>
|
||||
|
||||
<td
|
||||
class="text-center align-middle"
|
||||
style="min-width: 80px;"
|
||||
>
|
||||
<c-input-confirm
|
||||
:tooltip="$t('tabs.tooltip.delete')"
|
||||
show-icon
|
||||
@confirmed="deleteTab(index)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
</b-table-simple>
|
||||
</c-form-table-wrapper>
|
||||
|
||||
<b-modal
|
||||
id="createBlockSelectorTab"
|
||||
|
||||
@@ -60,3 +60,4 @@ Vue.component('c-input-checkbox', components.CInputCheckbox)
|
||||
Vue.component('c-button-submit', components.CButtonSubmit)
|
||||
Vue.component('c-hint', components.CHint)
|
||||
Vue.component('c-input-select', components.CInputSelect)
|
||||
Vue.component('c-form-table-wrapper', components.CFormTableWrapper)
|
||||
|
||||
@@ -37,9 +37,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value-only {
|
||||
.col-form-label {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,7 +215,11 @@
|
||||
</h5>
|
||||
|
||||
<b-row no-gutters>
|
||||
<b-form-group class="w-100">
|
||||
<c-form-table-wrapper
|
||||
:labels="{ addButton: $t('edit.newField') }"
|
||||
class="mb-2"
|
||||
@add-item="handleNewField"
|
||||
>
|
||||
<b-table-simple
|
||||
data-test-id="table-module-fields"
|
||||
borderless
|
||||
@@ -225,7 +229,6 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
|
||||
<th
|
||||
class="text-primary"
|
||||
>
|
||||
@@ -238,7 +241,6 @@
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-primary"
|
||||
>
|
||||
@@ -289,37 +291,62 @@
|
||||
@updateKind="handleFieldKindUpdate(index)"
|
||||
/>
|
||||
</draggable>
|
||||
|
||||
<tr>
|
||||
<td colspan="1" />
|
||||
<td colspan="7">
|
||||
<b-button
|
||||
data-test-id="button-field-add"
|
||||
class="mb-5"
|
||||
variant="primary"
|
||||
@click="handleNewField"
|
||||
>
|
||||
+ {{ $t('edit.newField') }}
|
||||
</b-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
colspan="7"
|
||||
class="text-primary font-weight-bold"
|
||||
>
|
||||
{{ $t('edit.systemFields') }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<field-row-view
|
||||
v-for="(field, index) in systemFields"
|
||||
:key="index"
|
||||
:field="field"
|
||||
class="mt-4"
|
||||
/>
|
||||
</b-table-simple>
|
||||
</b-form-group>
|
||||
</c-form-table-wrapper>
|
||||
</b-row>
|
||||
|
||||
<hr>
|
||||
|
||||
<h5 class="mb-3">
|
||||
{{ $t('edit.systemFields') }}
|
||||
</h5>
|
||||
|
||||
<b-row
|
||||
no-gutters
|
||||
>
|
||||
<c-form-table-wrapper hide-add-button>
|
||||
<b-table-simple
|
||||
borderless
|
||||
responsive
|
||||
small
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
|
||||
<th
|
||||
class="text-primary"
|
||||
style="min-width: 250px;"
|
||||
>
|
||||
{{ $t('general:label.name') }}
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-primary"
|
||||
style="min-width: 250px;"
|
||||
>
|
||||
{{ $t('general.label.title') }}
|
||||
</th>
|
||||
|
||||
<th
|
||||
colspan="5"
|
||||
class="text-primary"
|
||||
style="min-width: 250px;"
|
||||
>
|
||||
{{ $t('general:label.type') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<b-tbody>
|
||||
<field-row-view
|
||||
v-for="(field, index) in systemFields"
|
||||
:key="index"
|
||||
:field="field"
|
||||
/>
|
||||
</b-tbody>
|
||||
</b-table-simple>
|
||||
</c-form-table-wrapper>
|
||||
</b-row>
|
||||
</b-tab>
|
||||
|
||||
|
||||
@@ -232,11 +232,15 @@
|
||||
cols="12"
|
||||
>
|
||||
<hr>
|
||||
<div class="list-background rounded border border-light p-3">
|
||||
<b-form-group
|
||||
:label="$t('page-layout.layouts')"
|
||||
label-class="text-primary"
|
||||
class="mb-0"
|
||||
|
||||
<b-form-group
|
||||
:label="$t('page-layout.layouts')"
|
||||
label-class="text-primary"
|
||||
class="mb-0"
|
||||
>
|
||||
<c-form-table-wrapper
|
||||
:labels="{ addButton: $t('general:label.add') }"
|
||||
@add-item="addLayout"
|
||||
>
|
||||
<b-table-simple
|
||||
v-if="layouts.length > 0"
|
||||
@@ -247,21 +251,18 @@
|
||||
<b-thead>
|
||||
<tr>
|
||||
<th style="width: 40px;" />
|
||||
|
||||
<th
|
||||
class="text-primary"
|
||||
style="min-width: 300px;"
|
||||
>
|
||||
{{ $t('page-layout.title') }}
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-primary"
|
||||
style="min-width: 300px;"
|
||||
>
|
||||
{{ $t('page-layout.handle') }}
|
||||
</th>
|
||||
|
||||
<th style="min-width: 100px;" />
|
||||
</tr>
|
||||
</b-thead>
|
||||
@@ -284,7 +285,6 @@
|
||||
class="text-secondary"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td
|
||||
class="align-middle"
|
||||
>
|
||||
@@ -294,7 +294,6 @@
|
||||
:state="layoutTitleState(layout.meta.title)"
|
||||
@input="layout.meta.updated = true"
|
||||
/>
|
||||
|
||||
<b-input-group-append>
|
||||
<page-layout-translator
|
||||
:page-layout="layout"
|
||||
@@ -304,7 +303,6 @@
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-td>
|
||||
|
||||
<b-td
|
||||
class="align-middle"
|
||||
>
|
||||
@@ -314,7 +312,6 @@
|
||||
:state="layoutHandleState(layout.handle)"
|
||||
@input="layout.meta.updated = true"
|
||||
/>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
v-b-tooltip.noninteractive.hover="{ title: $t('page-layout.tooltip.configure'), container: '#body' }"
|
||||
@@ -326,7 +323,6 @@
|
||||
:icon="['fas', 'wrench']"
|
||||
/>
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-b-tooltip.noninteractive.hover="{ title: $t('page-layout.tooltip.builder'), container: '#body' }"
|
||||
variant="primary"
|
||||
@@ -341,7 +337,6 @@
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-td>
|
||||
|
||||
<td
|
||||
class="text-right align-middle"
|
||||
style="min-width: 100px;"
|
||||
@@ -356,7 +351,6 @@
|
||||
:resource="`corteza::compose:page-layout/${layout.namespaceID}/${layout.pageID}/${layout.pageLayoutID}`"
|
||||
class="text-dark border-0 mr-2"
|
||||
/>
|
||||
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="removeLayout(index)"
|
||||
@@ -365,21 +359,8 @@
|
||||
</tr>
|
||||
</draggable>
|
||||
</b-table-simple>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
class="mt-1"
|
||||
@click="addLayout"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
class="mr-1"
|
||||
/>
|
||||
{{ $t('general:label.add') }}
|
||||
</b-button>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
@@ -598,11 +579,14 @@
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
|
||||
<div class="list-background rounded border border-light p-3">
|
||||
<b-form-group
|
||||
:label="$t('page-layout.recordToolbar.actions.label')"
|
||||
label-class="text-primary"
|
||||
class="mb-0"
|
||||
<b-form-group
|
||||
:label="$t('page-layout.recordToolbar.actions.label')"
|
||||
label-class="text-primary"
|
||||
class="mb-0"
|
||||
>
|
||||
<c-form-table-wrapper
|
||||
:labels="{ addButton: $t('general:label.add') }"
|
||||
@add-item="addLayoutAction"
|
||||
>
|
||||
<b-table-simple
|
||||
v-if="layoutEditor.layout.config.actions.length > 0"
|
||||
@@ -633,7 +617,6 @@
|
||||
/>
|
||||
</div>
|
||||
</b-td>
|
||||
|
||||
<b-td style="min-width: 250px;">
|
||||
<b-form-group
|
||||
:label="$t('page-layout.recordToolbar.actions.buttonLabel')"
|
||||
@@ -645,7 +628,6 @@
|
||||
class="mb-1"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
v-if="action.kind === 'toLayout'"
|
||||
:label="$t('page-layout.recordToolbar.actions.toLayout.label')"
|
||||
@@ -659,7 +641,6 @@
|
||||
text-field="label"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
v-if="action.kind === 'toURL'"
|
||||
:label="$t('page-layout.recordToolbar.actions.toURL.label')"
|
||||
@@ -673,7 +654,6 @@
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-td>
|
||||
|
||||
<b-td style="min-width: 250px;">
|
||||
<b-form-group
|
||||
:label="$t('page-layout.recordToolbar.actions.kind.label')"
|
||||
@@ -687,7 +667,6 @@
|
||||
@change="onActionKindChange(action)"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
v-if="action.kind === 'toURL'"
|
||||
:label="$t('page-layout.recordToolbar.actions.openIn.label')"
|
||||
@@ -700,7 +679,6 @@
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-td>
|
||||
|
||||
<b-td style="min-width: 150px;">
|
||||
<b-form-group
|
||||
:label="$t('page-layout.recordToolbar.actions.variant')"
|
||||
@@ -712,7 +690,6 @@
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-td>
|
||||
|
||||
<b-td style="min-width: 100px;">
|
||||
<b-form-group
|
||||
:label="$t('page-layout.recordToolbar.actions.placement.label')"
|
||||
@@ -724,7 +701,6 @@
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-td>
|
||||
|
||||
<b-td style="min-width: 80px;">
|
||||
<b-form-group
|
||||
:label="$t('page-layout.recordToolbar.actions.visible')"
|
||||
@@ -741,7 +717,6 @@
|
||||
</div>
|
||||
</b-form-group>
|
||||
</b-td>
|
||||
|
||||
<b-td style="min-width: 80px;">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-end"
|
||||
@@ -757,21 +732,8 @@
|
||||
</tr>
|
||||
</draggable>
|
||||
</b-table-simple>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
class="mt-1"
|
||||
@click="addLayoutAction"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
class="mr-1"
|
||||
/>
|
||||
{{ $t('general:label.add') }}
|
||||
</b-button>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</b-form-group>
|
||||
</template>
|
||||
</b-modal>
|
||||
|
||||
@@ -1507,7 +1469,6 @@ export default {
|
||||
this.resolvedRoles = {}
|
||||
this.removedLayouts.clear()
|
||||
this.checkboxLabel = {}
|
||||
this.abortableRequests = []
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="prefilter">
|
||||
<c-form-table-wrapper hide-add-button>
|
||||
<b-table-simple
|
||||
v-if="render && filter.ref"
|
||||
responsive
|
||||
@@ -23,6 +23,7 @@
|
||||
class="w-auto"
|
||||
@change="reRender()"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="px-3"
|
||||
@@ -31,6 +32,7 @@
|
||||
{{ argIndex === 0 ? 'Where' : `${group.args[0].ref[0].toUpperCase() + group.args[0].ref.slice(1).toLowerCase()}` }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<template v-if="Object.keys(arg).includes('raw')">
|
||||
<td>
|
||||
<b-input-group>
|
||||
@@ -54,6 +56,7 @@
|
||||
</b-input-group>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-else-if="group">
|
||||
<td>
|
||||
<b-input-group>
|
||||
@@ -110,6 +113,7 @@
|
||||
</b-input-group>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<td
|
||||
class="fit text-center align-middle pl-2 pr-0"
|
||||
>
|
||||
@@ -119,6 +123,7 @@
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr
|
||||
:key="`${groupIndex}-add`"
|
||||
>
|
||||
@@ -127,8 +132,9 @@
|
||||
:class="{ 'text-center': group.args[0].args && group.args[0].args.length }"
|
||||
>
|
||||
<b-button
|
||||
variant="link text-decoration-none"
|
||||
class="px-0"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
class="mt-1"
|
||||
@click="addFilter(groupIndex)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -178,8 +184,8 @@
|
||||
v-else
|
||||
>
|
||||
<b-button
|
||||
variant="link text-decoration-none"
|
||||
class="px-0"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
@click="initFilter()"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -190,7 +196,7 @@
|
||||
{{ $t('general:label.add') }}
|
||||
</b-button>
|
||||
</tr>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
ascending: $t('general:label.ascending'),
|
||||
descending: $t('general:label.descending'),
|
||||
none: $t('general:label.none'),
|
||||
addButton: $t('general:label.add'),
|
||||
}"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<c-form-table-wrapper
|
||||
:labels="{
|
||||
addButton: $t('general:label.add')
|
||||
}"
|
||||
@add-item="addColumn"
|
||||
>
|
||||
<b-table-simple
|
||||
v-if="columns.length"
|
||||
responsive
|
||||
borderless
|
||||
small
|
||||
class="mb-0"
|
||||
>
|
||||
<b-thead>
|
||||
<b-tr>
|
||||
@@ -14,11 +18,13 @@
|
||||
>
|
||||
{{ $t('datasources:name') }}
|
||||
</b-th>
|
||||
|
||||
<b-th
|
||||
class="w-25"
|
||||
>
|
||||
{{ $t('datasources:label') }}
|
||||
</b-th>
|
||||
|
||||
<b-th
|
||||
class="w-50"
|
||||
>
|
||||
@@ -38,18 +44,21 @@
|
||||
:placeholder="$t('datasources:new.name')"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td>
|
||||
<b-form-input
|
||||
v-model="column.label"
|
||||
:placeholder="$t('datasources:new.label')"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td>
|
||||
<b-form-input
|
||||
v-model="column.def.raw"
|
||||
:placeholder="$t('datasources:expression')"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td class="align-middle">
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@@ -59,20 +68,7 @@
|
||||
</b-tr>
|
||||
</b-tbody>
|
||||
</b-table-simple>
|
||||
|
||||
<b-button
|
||||
variant="link text-decoration-none"
|
||||
class="px-0"
|
||||
@click="addColumn()"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
size="sm"
|
||||
class="mr-1"
|
||||
/>
|
||||
{{ $t('datasources:add') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -84,11 +80,6 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
columns: {
|
||||
get () {
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<c-form-table-wrapper
|
||||
:labels="{
|
||||
addButton: $t('general:label.add')
|
||||
}"
|
||||
@add-item="addParam"
|
||||
>
|
||||
<b-table-simple
|
||||
v-if="groups.length"
|
||||
responsive
|
||||
borderless
|
||||
small
|
||||
class="mb-0"
|
||||
>
|
||||
<b-thead>
|
||||
<b-tr>
|
||||
@@ -14,11 +18,13 @@
|
||||
>
|
||||
{{ $t('datasources:name') }}
|
||||
</b-th>
|
||||
|
||||
<b-th
|
||||
class="w-25"
|
||||
>
|
||||
{{ $t('datasources:label') }}
|
||||
</b-th>
|
||||
|
||||
<b-th
|
||||
class="w-50"
|
||||
>
|
||||
@@ -38,18 +44,21 @@
|
||||
:placeholder="$t('datasources:new.name')"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td>
|
||||
<b-form-input
|
||||
v-model="group.label"
|
||||
:placeholder="$t('datasources:new.label')"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td>
|
||||
<b-form-input
|
||||
v-model="group.def.raw"
|
||||
:placeholder="$t('datasources:expression')"
|
||||
/>
|
||||
</b-td>
|
||||
|
||||
<b-td class="align-middle">
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@@ -59,20 +68,7 @@
|
||||
</b-tr>
|
||||
</b-tbody>
|
||||
</b-table-simple>
|
||||
|
||||
<b-button
|
||||
variant="link text-decoration-none"
|
||||
class="px-0"
|
||||
@click="addParam()"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
size="sm"
|
||||
class="mr-1"
|
||||
/>
|
||||
{{ $t('datasources:add') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -94,4 +94,8 @@ export {
|
||||
CMap,
|
||||
} from './map'
|
||||
|
||||
export {
|
||||
CFormTableWrapper,
|
||||
} from './wrapper'
|
||||
|
||||
export { default as C3 } from './c3'
|
||||
|
||||
@@ -1,70 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-table-simple
|
||||
<c-form-table-wrapper
|
||||
:labels="{ addButton: labels.addButton }"
|
||||
:hide-add-button="textInput"
|
||||
@add-item="items.push({ field: undefined, descending: false })"
|
||||
>
|
||||
<b-form-group
|
||||
v-if="!textInput"
|
||||
borderless
|
||||
small
|
||||
responsive="lg"
|
||||
class="mb-0"
|
||||
:label="labels.title"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<draggable
|
||||
:list.sync="items"
|
||||
group="sort"
|
||||
handle=".grab"
|
||||
tag="tbody"
|
||||
<b-table-simple
|
||||
borderless
|
||||
small
|
||||
responsive="lg"
|
||||
class="mb-0"
|
||||
>
|
||||
<tr
|
||||
v-for="(column, index) in items"
|
||||
:key="index"
|
||||
<draggable
|
||||
:list.sync="items"
|
||||
group="sort"
|
||||
handle=".grab"
|
||||
tag="tbody"
|
||||
>
|
||||
<td
|
||||
class="grab text-center align-middle"
|
||||
style="width: 40px;"
|
||||
<tr
|
||||
v-for="(column, index) in items"
|
||||
:key="index"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars']"
|
||||
class="text-secondary"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="align-middle"
|
||||
style="min-width: 250px;"
|
||||
>
|
||||
<c-input-select
|
||||
v-model="column.field"
|
||||
:options="availableFields"
|
||||
:reduce="o => o.name"
|
||||
:placeholder="labels.none"
|
||||
class="rounded"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="text-center align-middle"
|
||||
style="min-width: 200px;"
|
||||
>
|
||||
<b-form-radio-group
|
||||
v-model="column.descending"
|
||||
:options="sortDirections"
|
||||
buttons
|
||||
button-variant="outline-primary"
|
||||
class="bg-white"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="align-middle text-right"
|
||||
style="min-width: 80px; width: 80px;"
|
||||
>
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="items.splice(index, 1)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
</b-table-simple>
|
||||
<td
|
||||
class="grab text-center align-middle"
|
||||
style="width: 40px;"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'bars']"
|
||||
class="text-secondary"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="align-middle"
|
||||
style="min-width: 250px;"
|
||||
>
|
||||
<c-input-select
|
||||
v-model="column.field"
|
||||
:options="availableFields"
|
||||
:reduce="o => o.name"
|
||||
:placeholder="labels.none"
|
||||
class="rounded"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="text-center align-middle"
|
||||
style="min-width: 200px;"
|
||||
>
|
||||
<b-form-radio-group
|
||||
v-model="column.descending"
|
||||
:options="sortDirections"
|
||||
buttons
|
||||
button-variant="outline-primary"
|
||||
class="bg-white"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="align-middle text-right"
|
||||
style="min-width: 80px; width: 80px;"
|
||||
>
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
@confirmed="items.splice(index, 1)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</draggable>
|
||||
</b-table-simple>
|
||||
</b-form-group>
|
||||
|
||||
<div
|
||||
v-else
|
||||
@@ -79,23 +85,10 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="allowTextInput"
|
||||
class="d-flex align-items-center mt-1"
|
||||
>
|
||||
<b-button
|
||||
v-if="!textInput"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
@click="items.push({ field: undefined, descending: false })"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
class="mr-1"
|
||||
/>
|
||||
{{ labels.add }}
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-if="allowTextInput"
|
||||
variant="link"
|
||||
size="sm"
|
||||
class="text-decoration-none ml-auto"
|
||||
@@ -104,17 +97,19 @@
|
||||
{{ labels.toggleInput }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</c-form-table-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Draggable from 'vuedraggable'
|
||||
import CInputSelect from './CInputSelect.vue'
|
||||
import CFormTableWrapper from '../wrapper/CFormTableWrapper.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Draggable,
|
||||
CInputSelect,
|
||||
CFormTableWrapper,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
||||
61
lib/vue/src/components/wrapper/CFormTableWrapper.vue
Normal file
61
lib/vue/src/components/wrapper/CFormTableWrapper.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="list-background w-100 p-3 rounded border border-light">
|
||||
<slot></slot>
|
||||
|
||||
<b-button
|
||||
v-if="!hideAddButton"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
:data-test-id="testID"
|
||||
:class="addButtonClass"
|
||||
:disabled="disableAddButton"
|
||||
@click="$emit('add-item')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'plus']"
|
||||
class="mr-1"
|
||||
/>
|
||||
|
||||
{{ labels.addButton || '' }}
|
||||
</b-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CFormTableWrapper',
|
||||
|
||||
props: {
|
||||
labels: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
|
||||
hideAddButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
disableAddButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
addButtonClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
buttonTestId : {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-background {
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
</style>
|
||||
1
lib/vue/src/components/wrapper/index.ts
Normal file
1
lib/vue/src/components/wrapper/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as CFormTableWrapper } from './CFormTableWrapper.vue'
|
||||
@@ -1,4 +1,5 @@
|
||||
label:
|
||||
add: Add
|
||||
general:
|
||||
yes: Yes
|
||||
no: No
|
||||
|
||||
@@ -843,7 +843,6 @@ tabs:
|
||||
label: Tabs
|
||||
alertTitle: Set a title for your block
|
||||
title: Tabs
|
||||
addTab: + Add
|
||||
tab: Tab
|
||||
selectBlock: Choose a block
|
||||
noTabs: No tabs configured
|
||||
|
||||
@@ -71,7 +71,7 @@ edit:
|
||||
steps:
|
||||
recordList: Page with record list
|
||||
recordPage: Record page
|
||||
systemFields: 'System fields:'
|
||||
systemFields: 'System fields'
|
||||
tooltip:
|
||||
attributes: Select if the field can hold multiple values, if it's required field or if contains sensitive data
|
||||
name: Should be at least 2 characters long. Can contain only letters, numbers, underscores and dashes. Must end with letter or number.
|
||||
|
||||
Reference in New Issue
Block a user