Prevent field configuration changes for options that change database record values

client/web/compose/src/components/Admin/Module/FieldRowEdit.vue

@@ -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 () {
+    hasData () {
-      return this.value.fieldID !== NoID && this.hasRecords
+      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
     },

client/web/compose/src/components/ModuleFields/Configurator/DateTime.vue

@@ -1,58 +1,72 @@
 <template>
   <div>
-    <b-form-checkbox
+    <b-form-group
-      v-model="f.options.onlyDate"
+      :label="$t('kind.dateTime.type.label')"
-      :disabled="f.options.onlyTime"
+      label-class="text-primary"
+      class="w-25"
     >
-      {{ $t('kind.dateTime.dateOnly') }}
+      <b-form-radio-group
-    </b-form-checkbox>
+        v-b-tooltip.hover="{ title: hasData ? $t('not-configurable') : '', placement: 'left', container: '#body' }"
-    <b-form-checkbox
+        :checked="inputType"
-      v-model="f.options.onlyTime"
+        :options="[
-      :disabled="f.options.onlyDate"
+          { value: 'dateTime', text: $t('kind.dateTime.type.options.dateTime') },
-    >
+          { value: 'date', text: $t('kind.dateTime.type.options.date') },
-      {{ $t('kind.dateTime.timeOnly') }}
+          { value: 'time', text: $t('kind.dateTime.type.options.time') },
-    </b-form-checkbox>
+        ]"
-
+        :disabled="hasData"
-    <b-form-checkbox
+        stacked
-      v-model="f.options.onlyPastValues"
+        @input="onTypeChange"
-      :disabled="f.options.onlyFutureValues"
+      />
-    >
+    </b-form-group>
-      {{ $t('kind.dateTime.pastValuesOnly') }}
+
-    </b-form-checkbox>
+    <b-form-group
-    <b-form-checkbox
+      :label="$t('kind.dateTime.constraints.label')"
-      v-model="f.options.onlyFutureValues"
+      label-class="text-primary"
-      :disabled="f.options.onlyPastValues"
+      class="mt-2"
-    >
+    >
-      {{ $t('kind.dateTime.futureValuesOnly') }}
+      <b-form-radio-group
-    </b-form-checkbox>
+        :checked="constraintType"
-
+        :options="[
-    <b-form-checkbox v-model="f.options.outputRelative">
+          { value: 'all', text: $t('kind.dateTime.constraints.options.all') },
-      {{ $t('kind.dateTime.relativeOutput') }}
+          { value: 'pastValuesOnly', text: $t('kind.dateTime.constraints.options.pastValuesOnly') },
-    </b-form-checkbox>
+          { 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
+      <b-form-checkbox
-        v-model="f.options.format"
+        v-model="f.options.outputRelative"
-        plain
+        class="mb-2"
-        placeholder="YYYY-MM-DD HH:ii"
+      >
-      />
+        {{ $t('kind.dateTime.relativeOutput') }}
+      </b-form-checkbox>
 
-      <template #description>
+      <template v-if="!f.options.outputRelative">
-        <i18next
+        <b-form-input
-          path="kind.dateTime.outputFormatFootnote"
+          v-model="f.options.format"
-          tag="label"
+          plain
-        >
+          placeholder="YYYY-MM-DD HH:ii"
-          <a
+        />
-            href="https://momentjs.com/docs/#/displaying/format/"
+
-            target="_blank"
+        <div class="small text-muted">
-            rel="noopener noreferrer"
+          <i18next
-          >Moment.js</a>
+            path="kind.dateTime.outputFormatFootnote"
-        </i18next>
+            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>

client/web/compose/src/components/ModuleFields/Configurator/Number.vue

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

client/web/compose/src/components/ModuleFields/Configurator/base.vue

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

client/web/compose/src/components/ModuleFields/Configurator/index.vue

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

client/web/compose/src/views/Admin/Modules/Edit.vue

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

lib/vue/src/components/input/CInputDateTime/index.vue

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

locale/en/corteza-webapp-compose/field.yaml

@@ -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
+    type:
-    futureValuesOnly: Future Value Only
+      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

locale/en/corteza-webapp-compose/general.yaml

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