[WW-2029] Fix boolean inputs and default values in database actions

.github/workflows/tests.yml

@@ -0,0 +1,17 @@
+name: Tests
+on:
+  pull_request:
+  push:
+    branches: [main]
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      # Unit tests use Vue directly; the legacy CLI node-sass install is not needed.
+      - run: npm ci --ignore-scripts
+      - run: npm test

package.json

@@ -8,7 +8,8 @@
     "license": "MIT",
     "scripts": {
         "build": "weweb build",
-        "serve": "weweb serve"
+        "serve": "weweb serve",
+        "test": "node --test tests/*.test.mjs"
     },
     "dependencies": {
         "@supabase/supabase-js": "2.50.3"
@@ -19,6 +20,7 @@
         "eslint": "^7.7.0",
         "eslint-plugin-prettier": "^3.1.4",
         "eslint-plugin-vue": "7.0.0-beta.4",
-        "prettier": "^2.1.2"
+        "prettier": "^2.1.2",
+        "vue": "^3.5.31"
     }
-}
+}

src/components/Functions/Database/DatabaseField.vue

@@ -0,0 +1,43 @@
+<template>
+    <wwEditorInputRow
+        :label="property.name"
+        :placeholder="property.default !== undefined ? 'Default: ' + property.default : 'Enter a value'"
+        :type="property.type === 'onoff' ? 'radio' : property.type"
+        :choices="booleanChoices"
+        :required="property.required"
+        :model-value="inputValue"
+        @update:modelValue="setValue"
+        bindable
+    />
+</template>
+
+<script>
+// A distinct UI value keeps an omitted boolean separate from explicit false/null.
+const UNSET = '__ww_supabase_unset__';
+
+export default {
+    props: {
+        property: { type: Object, required: true },
+        modelValue: { default: undefined },
+    },
+    emits: ['update:modelValue'],
+    computed: {
+        inputValue() {
+            return this.property.type === 'onoff' && this.modelValue === undefined ? UNSET : this.modelValue;
+        },
+        booleanChoices() {
+            return [
+                { label: 'Not set', value: UNSET },
+                { label: 'On', value: true },
+                { label: 'Off', value: false },
+                ...(this.property.isPrimary ? [] : [{ label: 'Null', value: null }]),
+            ];
+        },
+    },
+    methods: {
+        setValue(value) {
+            this.$emit('update:modelValue', this.property.type === 'onoff' && value === UNSET ? undefined : value);
+        },
+    },
+};
+</script>

src/components/Functions/Database/Delete.vue

@@ -32,16 +32,12 @@
             @update:modelValue="setArgs({ filters: $event })"
         />
         <div v-else class="flex flex-col ww-box mb-2 pt-2 pl-2 pr-2 pb-0" style="box-shadow: unset">
-            <wwEditorInputRow
+            <DatabaseField
                 v-for="property of primaryProperties"
                 :key="property.name"
-                :label="property.name"
-                placeholder="Enter a value"
-                :type="property.type"
-                :required="property.required"
+                :property="property"
                 :model-value="primaryData[property.name]"
                 @update:modelValue="setPrimaryData({ ...primaryData, [property.name]: $event })"
-                bindable
             />
         </div>
     </template>
@@ -79,12 +75,13 @@
 </template>
 
 <script>
+import DatabaseField from './DatabaseField.vue';
 import Expandable from '../../Utils/Expandable.vue';
 import QueryModifiers from '../../Utils/QueryModifiers.vue';
 import QueryFilters from '../../Utils/QueryFilters.vue';
 
 export default {
-    components: { Expandable, QueryModifiers, QueryFilters },
+    components: { DatabaseField, Expandable, QueryModifiers, QueryFilters },
     props: {
         plugin: { type: Object, required: true },
         args: { type: Object, default: () => {} },
@@ -172,7 +169,7 @@ export default {
                 }
             }
             for (const field of this.primaryProperties) {
-                if (!primaryData[field.name]) delete primaryData[field.name];
+                if (!primaryData[field.name] && primaryData[field.name] !== false) delete primaryData[field.name];
             }
             this.$emit('update:args', { ...this.args, primaryData });
         },

src/components/Functions/Database/Insert.vue

@@ -72,16 +72,12 @@
                 placeholder="All fields"
                 @update:modelValue="setDataFields"
             />
-            <wwEditorInputRow
+            <DatabaseField
                 v-for="property of tablePropertiesFiltered"
                 :key="property.name"
-                :label="property.name"
-                :placeholder="`${property.default ? `Default: ${property.default}` : 'Enter a value '}`"
-                :type="property.type"
-                :required="property.required"
+                :property="property"
                 :model-value="data[property.name]"
                 @update:modelValue="setData({ ...data, [property.name]: $event })"
-                bindable
             />
         </template>
     </template>
@@ -131,11 +127,12 @@
 </template>
 
 <script>
+import DatabaseField from './DatabaseField.vue';
 import Expandable from '../../Utils/Expandable.vue';
 import QueryModifiers from '../../Utils/QueryModifiers.vue';
 
 export default {
-    components: { Expandable, QueryModifiers },
+    components: { DatabaseField, Expandable, QueryModifiers },
     props: {
         plugin: { type: Object, required: true },
         args: { type: Object, default: () => {} },
@@ -188,6 +185,8 @@ export default {
             if (!this.definitions[this.table]) return [];
             return Object.keys(this.definitions[this.table].properties).map(propertyName => ({
                 name: propertyName,
+                isPrimary:
+                    this.definitions[this.table].properties[propertyName].description?.includes('<pk/>') || false,
                 type: this.plugin.types[this.definitions[this.table].properties[propertyName].type] || 'object',
                 required:
                     this.definitions[this.table].required &&
@@ -237,7 +236,12 @@ export default {
                     }
                 }
                 for (const field of this.tablePropertiesFiltered) {
-                    if (!data[field.name]) delete data[field.name];
+                    if (
+                        !data[field.name] &&
+                        data[field.name] !== false &&
+                        !(field.type === 'onoff' && !field.isPrimary && data[field.name] === null)
+                    )
+                        delete data[field.name];
                 }
             }
             this.$emit('update:args', { ...this.args, data });

src/components/Functions/Database/Update.vue

@@ -32,16 +32,12 @@
             @update:modelValue="setArgs({ filters: $event })"
         />
         <div v-else class="flex flex-col ww-box mb-2 pt-2 pl-2 pr-2 pb-0" style="box-shadow: unset">
-            <wwEditorInputRow
+            <DatabaseField
                 v-for="property of primaryProperties"
                 :key="property.name"
-                :label="property.name"
-                placeholder="Enter a value"
-                :type="property.type"
-                :required="property.required"
+                :property="property"
                 :model-value="primaryData[property.name]"
                 @update:modelValue="setPrimaryData({ ...primaryData, [property.name]: $event })"
-                bindable
             />
         </div>
         <wwEditorInputRow
@@ -54,16 +50,12 @@
             placeholder="All fields"
             @update:modelValue="setDataFields"
         />
-        <wwEditorInputRow
+        <DatabaseField
             v-for="property of tablePropertiesFiltered"
             :key="property.name"
-            :label="property.name"
-            :placeholder="`${property.default ? `Default: ${property.default}` : 'Enter a value '}`"
-            :type="property.type"
-            :required="property.required"
+            :property="property"
             :model-value="data[property.name]"
             @update:modelValue="setData({ ...data, [property.name]: $event })"
-            bindable
         />
     </template>
     <Expandable :active="isAdvancedOpen" @toggle="isAdvancedOpen = !isAdvancedOpen">
@@ -100,12 +92,13 @@
 </template>
 
 <script>
+import DatabaseField from './DatabaseField.vue';
 import Expandable from '../../Utils/Expandable.vue';
 import QueryModifiers from '../../Utils/QueryModifiers.vue';
 import QueryFilters from '../../Utils/QueryFilters.vue';
 
 export default {
-    components: { Expandable, QueryModifiers, QueryFilters },
+    components: { DatabaseField, Expandable, QueryModifiers, QueryFilters },
     props: {
         plugin: { type: Object, required: true },
         args: { type: Object, default: () => {} },
@@ -213,7 +206,7 @@ export default {
                 }
             }
             for (const field of this.primaryProperties) {
-                if (!primaryData[field.name]) delete primaryData[field.name];
+                if (!primaryData[field.name] && primaryData[field.name] !== false) delete primaryData[field.name];
             }
             this.$emit('update:args', { ...this.args, primaryData });
         },
@@ -228,7 +221,8 @@ export default {
                 }
             }
             for (const field of this.tablePropertiesFiltered) {
-                if (!data[field.name] && data[field.name] !== null) delete data[field.name]; // TODO LOGIC ISSUE HERE
+                if (!data[field.name] && data[field.name] !== null && data[field.name] !== false)
+                    delete data[field.name]; // TODO LOGIC ISSUE HERE
             }
             this.$emit('update:args', { ...this.args, data });
         },

src/components/Functions/Database/Upsert.vue

@@ -73,16 +73,12 @@
                 placeholder="All fields"
                 @update:modelValue="setDataFields"
             />
-            <wwEditorInputRow
+            <DatabaseField
                 v-for="property of tablePropertiesFiltered"
                 :key="property.name"
-                :label="property.name"
-                :placeholder="`${property.default ? `Default: ${property.default}` : 'Enter a value '}`"
-                :type="property.type"
-                :required="property.required"
+                :property="property"
                 :model-value="data[property.name]"
                 @update:modelValue="setData({ ...data, [property.name]: $event })"
-                bindable
             />
         </template>
     </template>
@@ -161,11 +157,12 @@
 </template>
 
 <script>
+import DatabaseField from './DatabaseField.vue';
 import Expandable from '../../Utils/Expandable.vue';
 import QueryModifiers from '../../Utils/QueryModifiers.vue';
 
 export default {
-    components: { Expandable, QueryModifiers },
+    components: { DatabaseField, Expandable, QueryModifiers },
     props: {
         plugin: { type: Object, required: true },
         args: { type: Object, default: () => {} },
@@ -224,6 +221,8 @@ export default {
             if (!this.definitions[this.table]) return [];
             return Object.keys(this.definitions[this.table].properties).map(propertyName => ({
                 name: propertyName,
+                isPrimary:
+                    this.definitions[this.table].properties[propertyName].description?.includes('<pk/>') || false,
                 type: this.plugin.types[this.definitions[this.table].properties[propertyName].type] || 'object',
                 required:
                     this.definitions[this.table].required &&
@@ -273,7 +272,12 @@ export default {
                     }
                 }
                 for (const field of this.tablePropertiesFiltered) {
-                    if (!data[field.name]) delete data[field.name];
+                    if (
+                        !data[field.name] &&
+                        data[field.name] !== false &&
+                        !(field.type === 'onoff' && !field.isPrimary && data[field.name] === null)
+                    )
+                        delete data[field.name];
                 }
             }
             this.$emit('update:args', { ...this.args, data });

src/wwPlugin.js

@@ -902,6 +902,7 @@ export default {
     types: {
         integer: 'number',
         string: 'query',
+        boolean: 'onoff',
     },
 };