qrcode: form validation

packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue

@@ -18,7 +18,7 @@ const { fields, metaColumnById } = useViewColumns(activeView, meta, () => reload
 
 const vModel = useVModel(props, 'value', emit)
 
-const { column } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, column } = useColumnCreateStoreOrThrow()
 
 const allowedColumnTypesForQrValue = [UITypes.Formula, UITypes.SingleLineText, UITypes.LongText] as string[]
 
@@ -35,24 +35,30 @@ const columnsAllowedAsQrValue = computed<SelectProps['options']>(() => {
 
 // set default value
 vModel.value.fk_qr_value_column_id = (column?.value?.colOptions as Record<string, any>)?.fk_qr_value_column_id || ''
+
+setAdditionalValidations({
+  fk_qr_value_column_id: [{ required: true, message: 'Required' }],
+})
 </script>
 
 <template>
   <a-row>
     <a-col :span="24">
-      <div>
-        <span class="font-bold"> {{ $t('labels.chooseQrValueColumn') }}</span>
-        <a-divider class="!my-2" />
-      </div>
       <div class="nc-fields-list py-1">
         <div class="grouping-field">
-          <a-select
+          <a-form-item
-            v-model:value="vModel.fk_qr_value_column_id"
+            class="flex w-1/2 pb-2"
-            class="w-full nc-kanban-grouping-field-select"
+            :label="$t('labels.qrCodeValueColumn')"
-            :options="columnsAllowedAsQrValue"
+            v-bind="validateInfos.fk_qr_value_column_id"
-            placeholder="Select a Grouping Field"
+          >
-            @click.stop
+            <a-select
-          />
+              v-model:value="vModel.fk_qr_value_column_id"
+              class="w-full nc-kanban-grouping-field-select"
+              :options="columnsAllowedAsQrValue"
+              placeholder="Select a Grouping Field"
+              @click.stop
+            />
+          </a-form-item>
         </div>
       </div>
     </a-col>

packages/nc-gui/lang/de.json

@@ -238,7 +238,7 @@
     "created": "Erstellt",
     "sqlOutput": "SQL-Ausgabe",
     "addOption": "Option hinzufügen",
-    "chooseQrValueColumn": "Spalte für den QR-Code-Inhalt wählen",
+    "qrCodeValueColumn": "Spalte mit QR-Code-Inhalt",
     "aggregateFunction": "Globale Funktion",
     "dbCreateIfNotExists": "Datenbank: Erstellen, falls nicht vorhanden",
     "clientKey": "Client-Schlüssel",

packages/nc-gui/lang/en.json

@@ -238,7 +238,7 @@
     "created": "Created",
     "sqlOutput": "SQL Output",
     "addOption": "Add option",
-    "chooseQrValueColumn": "Column to use for the QR code value",
+    "qrCodeValueColumn": "Column with QR code value",
     "aggregateFunction": "Aggregate function",
     "dbCreateIfNotExists": "Database : create if not exists",
     "clientKey": "Client Key",