Frontend checklist implementation

.github/workflows/reusable-dev-deployment.yml

@@ -130,6 +130,7 @@ jobs:
             --set recaptcha.secret='${{ secrets.RECAPTCHA_SECRET }}' \
             --set frontend.loginInfoTextKey=${{ vars.LOGIN_INFO_TEXT_KEY }} \
             --set featureToggle.developer=true
+            --set featureToggle.checklist=true
 
       - name: Finish the GitHub deployment
         uses: bobheadxi/[email protected]

.helm/deploy-to-cluster.sh

@@ -64,6 +64,7 @@ for i in 1; do
   values="$values --set deploymentTime=$(date -u +%s)"
   values="$values --set deployedVersion=\"$(git rev-parse --short HEAD)\""
   values="$values --set featureToggle.developer=true"
+  values="$values --set featureToggle.checklist=true"
 
   if [ -n "$BACKUP_SCHEDULE" ]; then
     values="$values --set postgresql.backup.schedule=$BACKUP_SCHEDULE"

.helm/ecamp3/templates/frontend_configmap.yaml

@@ -29,6 +29,7 @@ data:
       RECAPTCHA_SITE_KEY: null,
     {{- end }}
       FEATURE_DEVELOPER: {{ .Values.featureToggle.developer | default false }},
+      FEATURE_CHECKLIST: {{ .Values.featureToggle.checklist | default false }},
       LOGIN_INFO_TEXT_KEY: '{{ .Values.frontend.loginInfoTextKey }}',
     }
   deployedVersion: {{ .Values.deployedVersion | quote }}

.helm/ecamp3/values.yaml

@@ -15,6 +15,7 @@ helpLink: # 'https://ecamp3.ch/faq'
 # enable/disable feature across the complete deployment
 featureToggle:
   developer: false # enables various tools/features foreseen for development deployments (language switcher, form controls view, performance measurement view, etc.)
+  checklist: false # enables checklist feature in frontend
 
 api:
   subpath: "/api"
@@ -251,7 +252,7 @@ apiCache:
       requests:
         cpu: 10m
         memory: 20Mi
-  
+
 autoscaling:
   enabled: false
   minReplicas: 1

common/locales/de.json

@@ -7,6 +7,10 @@
     }
   },
   "contentNode": {
+    "checklist": {
+      "icon": "mdi-clipboard-list-outline",
+      "name": "Checkliste"
+    },
     "columnLayout": {
       "entity": {
         "column": {
@@ -169,6 +173,18 @@
         "-": "keine Nummerierung"
       }
     },
+    "checklist": {
+      "fields": {
+        "name": "Name"
+      },
+      "name": "Checkliste | Checklisten"
+    },
+    "checklistItem": {
+      "fields": {
+        "text": "Text"
+      },
+      "name": "Checklisteneintrag"
+    },
     "contentType": {
       "name": "Inhalttyp | Inhalttypen"
     },

common/locales/en.json

@@ -176,6 +176,18 @@
         "-": "no numbering"
       }
     },
+    "checklist": {
+      "fields": {
+        "name": "Name"
+      },
+      "name": "Checklist | Checklists"
+    },
+    "checklistItem": {
+      "fields": {
+        "text": "Text"
+      },
+      "name": "Checklist entry"
+    },
     "contentType": {
       "name": "Contenttype | Contenttypes"
     },

common/locales/fr.json

@@ -157,6 +157,17 @@
         "i": "i, ii, iii - chiffres romains minuscules"
       }
     },
+    "checklist": {
+      "fields": {
+        "name": "Nom"
+      },
+      "name": "Check-list | Check-lists"
+    },
+    "checklistItem": {
+      "fields": {
+        "text": "Text"
+      }
+    },
     "contentType": {
       "name": "Type de contenu | Types de contenu"
     },

frontend/src/components/activity/ButtonNestedContentNodeAdd.vue

@@ -60,6 +60,7 @@
 <script>
 import { camelCase } from 'lodash'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
+import { getEnv } from '@/environment.js'
 
 export default {
   name: 'ButtonNestedContentNodeAdd',
@@ -82,7 +83,7 @@ export default {
         return []
       }
       return this.preferredContentTypes()
-        .items.filter((ct) => this.showResponsiveLayout(ct))
+        .items.filter(this.filterContentType)
         .sort(this.sortContentTypeByTranslatedName)
     },
     nonpreferredContentTypesItems() {
@@ -94,7 +95,7 @@ export default {
         .contentTypes()
         .items.filter(
           (ct) =>
-            this.showResponsiveLayout(ct) &&
+            this.filterContentType(ct) &&
             !this.preferredContentTypes()
               .items.map((ct) => ct.id)
               .includes(ct.id)
@@ -104,6 +105,9 @@ export default {
     contentTypesLoading() {
       return this.api.get().contentTypes()._meta.loading
     },
+    featureChecklistEnabled() {
+      return getEnv().FEATURE_CHECKLIST ?? false
+    },
   },
   methods: {
     contentTypeNameKey(contentType) {
@@ -112,10 +116,15 @@ export default {
     contentTypeIconKey(contentType) {
       return 'contentNode.' + camelCase(contentType.name) + '.icon'
     },
-    showResponsiveLayout(contentType) {
-      return (
-        contentType.name !== 'ResponsiveLayout' || this.parentContentNode.parent === null
-      )
+    filterContentType(contentType) {
+      switch (contentType.name) {
+        case 'ResponsiveLayout':
+          return this.parentContentNode.parent === null
+        case 'Checklist':
+          return this.featureChecklistEnabled
+        default:
+          return true
+      }
     },
     sortContentTypeByTranslatedName(ct1, ct2) {
       const ct1name = this.$i18n.tc(this.contentTypeNameKey(ct1))

frontend/src/components/activity/ContentNode.vue

@@ -23,6 +23,7 @@
 import SafetyConsiderations from './content/SafetyConsiderations.vue'
 import Storyboard from './content/Storyboard.vue'
 import Storycontext from './content/Storycontext.vue'
+import Checklist from './content/Checklist.vue'
 
 const contentNodeComponents = {
   ColumnLayout,
@@ -35,6 +36,7 @@
   SafetyConsiderations,
   Storyboard,
   Storycontext,
+  Checklist,
 }
 
 export default {
@@ -49,7 +51,7 @@
 }
 </script>
 
 <style lang="scss">
 .draggable {
   cursor: move;
   transition: background-color 0.3s 25ms ease;