Form settings: Add webforms enabler checkbox

getodk · Jan 15, 2025 · 59c9477 · 59c9477
1 parent 022276f
commit 59c9477
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/src/components/form/settings.vue b/src/components/form/settings.vue
@@ -27,6 +27,31 @@ except according to the terms contained in the LICENSE file.
         </div>
       </div>
       <div class="col-xs-6">
+        <div class="panel panel-simple">
+          <div class="panel-heading">
+            <h1 class="panel-title">{{ $t('formSetting.formTech') }}</h1>
+          </div>
+          <div class="panel-body">
+            <div class="checkbox">
+              <label>
+                <input
+                  v-model="form.webformsEnabled"
+                  type="checkbox"
+                  :aria-disabled="form.awaitingResponse"
+                  :disabled="form.awaitingResponse"
+                  @change="setWebformsEnabled">
+                  <spinner :state="form.awaitingResponse"/>
+                  {{ $t('formSetting.enableWebForms') }}
+                </label>
+            </div>
+              <p>
+                {{ $t('formSetting.enableWebFormsExplanation') }}
+              </p>
+              <p>
+                <a href="https://getodk.org/webforms#TODO-REPLACE-THIS_URL">{{ $t('formSetting.enableWebFormsExplanationLinktext') }}</a>
+              </p>
+          </div>
+        </div>
         <div class="panel panel-simple-danger">
           <div class="panel-heading">
             <h1 class="panel-title">{{ $t('common.dangerZone') }}</h1>
@@ -49,14 +74,17 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import FormDelete from './delete.vue';
+import Spinner from '../spinner.vue';
 
 import useRoutes from '../../composables/routes';
 import { modalData } from '../../util/reactivity';
 import { useRequestData } from '../../request-data';
+import { apiPaths } from '../../util/request';
+import { noop } from '../../util/util';
 
 export default {
   name: 'FormSettings',
-  components: { FormDelete },
+  components: { FormDelete, Spinner },
   inject: ['alert'],
   setup() {
     const { form } = useRequestData();
@@ -68,6 +96,20 @@ export default {
       const message = this.$t('alert.delete', { name: this.form.nameOrId });
       this.$router.push(this.projectPath())
         .then(() => { this.alert.success(message); });
+    },
+    setWebformsEnabled() {
+      this.form.request({
+        method: 'PATCH',
+        url: apiPaths.form(this.form.projectId, this.form.xmlFormId),
+        data: { webformsEnabled: this.form.webformsEnabled },
+        patch: ({ data }) => {
+          this.form.updatedAt = data.updatedAt;
+        }
+      })
+        .catch(err => {
+          this.form.webformsEnabled = !this.form.webformsEnabled;
+          throw err;
+        });
     }
   }
 };

diff --git a/src/locales/en.json5 b/src/locales/en.json5
@@ -506,5 +506,11 @@
   },
   "router": {
     "unsavedChanges": "Are you sure you want to leave this page? Your changes might not be saved."
+  },
+  "formSetting": {
+    "formTech": "Web based form technology",
+    "enableWebForms": "Use WebForms instead of Enketo",
+    "enableWebFormsExplanation": "When users fill out forms via the web (not via ODK Collect), we use Enketo by default. Its successor is \"WebForms\", which is a work in progress that you can already test.",
+    "enableWebFormsExplanationLinktext": "Before enabling this, read up on WebForms and which form features it currently supports!"
   }
 }
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
@@ -1035,6 +1035,20 @@
       "string": "Are you sure you want to leave this page? Your changes might not be saved."
     }
   },
+  "formSetting": {
+    "formTech": {
+      "string": "Web based form technology"
+    },
+    "enableWebForms": {
+      "string": "Use WebForms instead of Enketo"
+    },
+    "enableWebFormsExplanation": {
+      "string": "When users fill out forms via the web (not via ODK Collect), we use Enketo by default. Its successor is \"WebForms\", which is a work in progress that you can already test."
+    },
+    "enableWebFormsExplanationLinktext": {
+      "string": "Before enabling this, read up on WebForms and which form features it currently supports!"
+    }
+  },
   "component": {
     "AccountClaim": {
       "action": {