Merge pull request #3394 from ingef/add-disclosure-field-type

Support DISCLOSURE_LIST form field
ingef · Apr 22, 2024 · 964fe09 · 964fe09
2 parents 3f8c266 + 4186ec8
commit 964fe09
Show file tree

Hide file tree

Showing 38 changed files with 1,606 additions and 658 deletions.
diff --git a/frontend/README.md b/frontend/README.md
@@ -123,7 +123,10 @@ Depending on the use-case, we're still calling the same concepts differently som
 
 ### Styles
 
-- Emotion is used for theming and styles. The plan is to migrate (back) to styled-components or to another css-in-js solution, because emotion's "styled" is less TypeScript compatible in some edge cases like generic component props (see usage of Dropzone).
+- Currently, we're mostly using Emotion for theming and styles.
+- The plan is to slowly migrate to [Tailwind CSS](https://tailwindcss.com/) and [tailwind-styled-components](https://github.com/MathiasGilson/Tailwind-Styled-Component).
+- New styles should be written using tailwind.
+- Reasoning: Theming with Emotion is verbose, Emotion's "styled" is less TypeScript compatible in some edge cases like generic component props (see usage of Dropzone). But the main reason for migrating to tailwind, of course, is that tailwind means a lot less boilerplate code. It also allows for more consistent styling and offers a great dev UX.
 
 ### State
 

diff --git a/frontend/mock-api/forms/export-form.json b/frontend/mock-api/forms/export-form.json
@@ -60,6 +60,41 @@
         },
         "validations": ["NOT_EMPTY"]
       },
+      {
+        "name": "theDisclosure",
+        "type": "DISCLOSURE_LIST",
+        "label": {
+          "de": "Datenschutz"
+        },
+        "creatable": true,
+        "tooltip": {
+          "de": "Der Datenschutz ist ein wichtiges Thema, deshalb musst du hier zustimmen."
+        },
+        "fields": [
+          {
+            "type": "HEADLINE",
+            "label": {
+              "de": "Datenschutztext"
+            }
+          },
+          {
+            "type": "CHECKBOX",
+            "name": "disclosureCheckbox",
+            "label": {
+              "de": "Ich habe den Datenschutztext gelesen und bin einverstanden."
+            }
+          },
+          {
+            "type": "NUMBER",
+            "name": "timesIlike",
+            "label": {
+              "de": "Gefällt mir SO sehr"
+            },
+            "defaultValue": 1,
+            "min": 1
+          }
+        ]
+      },
       {
         "name": "timeMode",
         "type": "TABS",

diff --git a/frontend/mock-api/mockApi.ts b/frontend/mock-api/mockApi.ts
@@ -21,9 +21,9 @@ const chance = new Chance();
 // Taken from:
 // http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
 function shuffleArray<T>(array: T[]) {
-  for (var i = array.length - 1; i > 0; i--) {
-    var j = Math.floor(Math.random() * (i + 1));
-    var temp = array[i];
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = array[i];
     array[i] = array[j];
     array[j] = temp;
   }
@@ -244,7 +244,7 @@ export default function mockApi(app: Application) {
 
       setTimeout(() => {
         const ids: unknown[] = [];
-        const possibleTagsWithProbabilities = [
+        const possibleTagsWithProbabilities: [string, number][] = [
           ["research", 0.3],
           ["fun", 0.02],
           ["test", 0.02],
@@ -257,7 +257,7 @@ export default function mockApi(app: Application) {
           ["Another very long long tagname, 2020", 0.001],
         ];
 
-        for (var i = 24700; i < 25700; i++) {
+        for (let i = 24700; i < 25700; i++) {
           const notExecuted = Math.random() < 0.1;
 
           ids.push({
@@ -548,7 +548,7 @@ export default function mockApi(app: Application) {
           "interesting",
         ];
 
-        for (var i = 84600; i < 85600; i++) {
+        for (let i = 84600; i < 85600; i++) {
           configs.push({
             id: i,
             label: "Saved Config",