Prevent field configuration changes for options that change database record values
This commit is contained in:
parent
f2b6c4a879
commit
15c2426c34
@ -16,7 +16,7 @@
|
||||
<b-form-input
|
||||
v-model="value.name"
|
||||
required
|
||||
:readonly="disabled"
|
||||
:readonly="hasData"
|
||||
:state="nameState"
|
||||
type="text"
|
||||
/>
|
||||
@ -49,19 +49,16 @@
|
||||
<b-input-group class="field-type">
|
||||
<c-input-select
|
||||
v-model="value.kind"
|
||||
v-b-tooltip.hover="{ title: hasData ? $t('field:not-configurable') : '', placement: 'left', container: '#body' }"
|
||||
:options="fieldKinds"
|
||||
:reduce="kind => kind.kind"
|
||||
:disabled="disabled"
|
||||
:disabled="hasData"
|
||||
:clearable="false"
|
||||
@input="$emit('updateKind')"
|
||||
/>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
v-b-tooltip.noninteractive.hover="{
|
||||
title: $t('tooltip.field'),
|
||||
container: '#body'
|
||||
}"
|
||||
data-test-id="button-configure-field"
|
||||
variant="extra-light"
|
||||
:disabled="isEditDisabled"
|
||||
@ -104,7 +101,7 @@
|
||||
style="min-width: 100px;"
|
||||
>
|
||||
<c-permissions-button
|
||||
v-if="canGrant && exists"
|
||||
v-if="canGrant && !isNew"
|
||||
button-variant="outline-light"
|
||||
size="sm"
|
||||
:title="value.label || value.name || value.fieldID"
|
||||
@ -170,7 +167,7 @@ export default {
|
||||
|
||||
computed: {
|
||||
nameState () {
|
||||
if (this.disabled) {
|
||||
if (this.hasData) {
|
||||
return null
|
||||
}
|
||||
|
||||
@ -181,8 +178,8 @@ export default {
|
||||
return this.value.isValid ? null : false
|
||||
},
|
||||
|
||||
disabled () {
|
||||
return this.value.fieldID !== NoID && this.hasRecords
|
||||
hasData () {
|
||||
return !this.isNew && this.hasRecords
|
||||
},
|
||||
|
||||
isNew () {
|
||||
@ -197,10 +194,6 @@ export default {
|
||||
}).sort((a, b) => a.label.localeCompare(b.label))
|
||||
},
|
||||
|
||||
exists () {
|
||||
return this.module.ID !== NoID && this.value.fieldID !== NoID
|
||||
},
|
||||
|
||||
isEditDisabled () {
|
||||
return !this.value.cap.configurable || this.nameState !== null
|
||||
},
|
||||
|
||||
@ -1,58 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-form-checkbox
|
||||
v-model="f.options.onlyDate"
|
||||
:disabled="f.options.onlyTime"
|
||||
<b-form-group
|
||||
:label="$t('kind.dateTime.type.label')"
|
||||
label-class="text-primary"
|
||||
class="w-25"
|
||||
>
|
||||
{{ $t('kind.dateTime.dateOnly') }}
|
||||
</b-form-checkbox>
|
||||
<b-form-checkbox
|
||||
v-model="f.options.onlyTime"
|
||||
:disabled="f.options.onlyDate"
|
||||
>
|
||||
{{ $t('kind.dateTime.timeOnly') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="f.options.onlyPastValues"
|
||||
:disabled="f.options.onlyFutureValues"
|
||||
>
|
||||
{{ $t('kind.dateTime.pastValuesOnly') }}
|
||||
</b-form-checkbox>
|
||||
<b-form-checkbox
|
||||
v-model="f.options.onlyFutureValues"
|
||||
:disabled="f.options.onlyPastValues"
|
||||
>
|
||||
{{ $t('kind.dateTime.futureValuesOnly') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox v-model="f.options.outputRelative">
|
||||
{{ $t('kind.dateTime.relativeOutput') }}
|
||||
</b-form-checkbox>
|
||||
<b-form-radio-group
|
||||
v-b-tooltip.hover="{ title: hasData ? $t('not-configurable') : '', placement: 'left', container: '#body' }"
|
||||
:checked="inputType"
|
||||
:options="[
|
||||
{ value: 'dateTime', text: $t('kind.dateTime.type.options.dateTime') },
|
||||
{ value: 'date', text: $t('kind.dateTime.type.options.date') },
|
||||
{ value: 'time', text: $t('kind.dateTime.type.options.time') },
|
||||
]"
|
||||
:disabled="hasData"
|
||||
stacked
|
||||
@input="onTypeChange"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
:label="$t('kind.dateTime.constraints.label')"
|
||||
label-class="text-primary"
|
||||
class="mt-2"
|
||||
>
|
||||
<b-form-radio-group
|
||||
:checked="constraintType"
|
||||
:options="[
|
||||
{ value: 'all', text: $t('kind.dateTime.constraints.options.all') },
|
||||
{ value: 'pastValuesOnly', text: $t('kind.dateTime.constraints.options.pastValuesOnly') },
|
||||
{ value: 'futureValuesOnly', text: $t('kind.dateTime.constraints.options.futureValuesOnly') },
|
||||
]"
|
||||
stacked
|
||||
@input="onConstraintChange"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
v-if="!f.options.outputRelative"
|
||||
:label="$t('kind.dateTime.outputFormat')"
|
||||
label-class="text-primary"
|
||||
class="mt-2"
|
||||
>
|
||||
<b-form-input
|
||||
v-model="f.options.format"
|
||||
plain
|
||||
placeholder="YYYY-MM-DD HH:ii"
|
||||
/>
|
||||
<b-form-checkbox
|
||||
v-model="f.options.outputRelative"
|
||||
class="mb-2"
|
||||
>
|
||||
{{ $t('kind.dateTime.relativeOutput') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<template #description>
|
||||
<i18next
|
||||
path="kind.dateTime.outputFormatFootnote"
|
||||
tag="label"
|
||||
>
|
||||
<a
|
||||
href="https://momentjs.com/docs/#/displaying/format/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Moment.js</a>
|
||||
</i18next>
|
||||
<template v-if="!f.options.outputRelative">
|
||||
<b-form-input
|
||||
v-model="f.options.format"
|
||||
plain
|
||||
placeholder="YYYY-MM-DD HH:ii"
|
||||
/>
|
||||
|
||||
<div class="small text-muted">
|
||||
<i18next
|
||||
path="kind.dateTime.outputFormatFootnote"
|
||||
tag="label"
|
||||
>
|
||||
<a
|
||||
href="https://momentjs.com/docs/#/displaying/format/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Moment.js</a>
|
||||
</i18next>
|
||||
</div>
|
||||
</template>
|
||||
</b-form-group>
|
||||
</div>
|
||||
@ -67,5 +81,33 @@ export default {
|
||||
},
|
||||
|
||||
extends: base,
|
||||
|
||||
computed: {
|
||||
inputType () {
|
||||
if (this.f.options.onlyDate) return 'date'
|
||||
if (this.f.options.onlyTime) return 'time'
|
||||
|
||||
return 'dateTime'
|
||||
},
|
||||
|
||||
constraintType () {
|
||||
if (this.f.options.onlyPastValues) return 'pastValuesOnly'
|
||||
if (this.f.options.onlyFutureValues) return 'futureValuesOnly'
|
||||
|
||||
return 'all'
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTypeChange (v) {
|
||||
this.f.options.onlyDate = v === 'date'
|
||||
this.f.options.onlyTime = v === 'time'
|
||||
},
|
||||
|
||||
onConstraintChange (v) {
|
||||
this.f.options.onlyPastValues = v === 'pastValuesOnly'
|
||||
this.f.options.onlyFutureValues = v === 'futureValuesOnly'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -23,13 +23,13 @@
|
||||
lg="6"
|
||||
>
|
||||
<b-form-group
|
||||
v-b-tooltip.hover="{ title: hasData ? $t('not-configurable') : '', container: '#body' }"
|
||||
:label="`${$t('kind.number.precisionLabel')} ${(f.options.precision)}`"
|
||||
label-class="mb-2 text-primary"
|
||||
>
|
||||
<template #label>
|
||||
{{ `${$t('kind.number.precisionLabel')} ${(f.options.precision)}` }}
|
||||
</template>
|
||||
<b-form-input
|
||||
v-model="f.options.precision"
|
||||
:disabled="hasData"
|
||||
:placeholder="$t('kind.number.precisionPlaceholder')"
|
||||
type="range"
|
||||
min="0"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { compose } from '@cortezaproject/corteza-js'
|
||||
import { compose, NoID } from '@cortezaproject/corteza-js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -17,6 +17,11 @@ export default {
|
||||
type: compose.ModuleField,
|
||||
required: true,
|
||||
},
|
||||
|
||||
hasRecords: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -29,6 +34,14 @@ export default {
|
||||
this.$emit('update:field', f)
|
||||
},
|
||||
},
|
||||
|
||||
isNew () {
|
||||
return this.module.moduleID === NoID || this.field.fieldID === NoID
|
||||
},
|
||||
|
||||
hasData () {
|
||||
return !this.isNew && this.hasRecords
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
:namespace="namespace"
|
||||
:module="module"
|
||||
:field.sync="f"
|
||||
:has-records="hasRecords"
|
||||
/>
|
||||
</b-tab>
|
||||
|
||||
|
||||
@ -403,6 +403,7 @@
|
||||
:module="module"
|
||||
:connection="connection"
|
||||
:sensitivity-levels="sensitivityLevels"
|
||||
:has-records="hasRecords"
|
||||
/>
|
||||
</b-modal>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="c-input-date-time d-flex flex-wrap w-100">
|
||||
<div class="c-input-date-time d-flex flex-wrap w-100 gap-1">
|
||||
<b-form-datepicker
|
||||
v-if="!noDate"
|
||||
v-model="date"
|
||||
|
||||
@ -3,6 +3,7 @@ selected-items: Selected fields
|
||||
defaultFieldValue: Default field value
|
||||
defaultValue: Default value
|
||||
required-field: This field is required
|
||||
not-configurable: Cannot change settings that affect data storage
|
||||
kind:
|
||||
bool:
|
||||
checkedValueLabel: Value when checked
|
||||
@ -13,14 +14,22 @@ kind:
|
||||
toggleTypeLabel: Checkbox Type
|
||||
toggleType: Display as switch
|
||||
dateTime:
|
||||
dateOnly: Date Only
|
||||
futureValuesOnly: Future Value Only
|
||||
type:
|
||||
label: Value Type
|
||||
options:
|
||||
dateTime: Date & Time
|
||||
date: Date
|
||||
time: Time
|
||||
constraints:
|
||||
label: Allowed values
|
||||
options:
|
||||
all: All values
|
||||
futureValuesOnly: Future Values Only
|
||||
pastValuesOnly: Past Values Only
|
||||
label: Date and time
|
||||
outputFormat: Output format
|
||||
outputFormatFootnote: See {{0}} for formatting options
|
||||
pastValuesOnly: Past Values Only
|
||||
relativeOutput: 'Output Relative value (eg: 3 days ago)'
|
||||
timeOnly: Time Only
|
||||
warning:
|
||||
futureValuesOnly: Only dates in the future will be saved
|
||||
pastValuesOnly: Only dates in the past will be saved
|
||||
|
||||
@ -123,7 +123,6 @@ reminder:
|
||||
count: Snooze count {{count}}
|
||||
tooltip:
|
||||
dragAndDrop: Drag and drop to change order
|
||||
field: Configure field
|
||||
fieldKinds:
|
||||
Bool:
|
||||
label: Checkbox (Y/N)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user