3
0

Prevent field configuration changes for options that change database record values

This commit is contained in:
Jože Fortun 2024-08-23 12:21:19 +02:00
parent f2b6c4a879
commit 15c2426c34
9 changed files with 127 additions and 69 deletions

View File

@ -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
},

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -24,6 +24,7 @@
:namespace="namespace"
:module="module"
:field.sync="f"
:has-records="hasRecords"
/>
</b-tab>

View File

@ -403,6 +403,7 @@
:module="module"
:connection="connection"
:sensitivity-levels="sensitivityLevels"
:has-records="hasRecords"
/>
</b-modal>

View File

@ -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"

View File

@ -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

View File

@ -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)