Merge pull request #7902 from BacLuc/fix-create-camp-without-template

pmattmann · web-flow · commit af3ed5f95351 · 2025-08-03T17:32:33.000Z
Fix create camp without template
diff --git a/e2e/cypress.config.js b/e2e/cypress.config.js
@@ -11,6 +11,7 @@ module.exports = defineConfig({
   downloadsFolder: 'data/downloads',
   trashAssetsBeforeRuns: false,
   e2e: {
+    experimentalStudio: true,
     setupNodeEvents(on, config) {
       on('task', {
         deleteDownloads: () => deleteDownloads(config),
diff --git a/e2e/specs/zz-createCamp.cy.js b/e2e/specs/zz-createCamp.cy.js
@@ -0,0 +1,36 @@
+import { bipiUser } from './constants'
+
+const tomorrow = new Date()
+tomorrow.setDate(tomorrow.getDate() + 1)
+
+const in2Days = new Date()
+in2Days.setDate(in2Days.getDate() + 2)
+
+const campTitle = 'title'
+describe('create new camp', () => {
+  it('without prototype', () => {
+    cy.login(bipiUser)
+
+    cy.visit('/camps')
+
+    cy.get('[data-testid="create-camp-button"]').click()
+
+    cy.get('[data-testid="create-camp-title-input"] input').type(campTitle)
+    cy.get('[data-testid="create-camp-organizer"] input').type('org')
+    cy.get('[data-testid="create-camp-motto"] input').type('motto')
+    cy.get('[data-testid="start-date-picker"] input').type(
+      tomorrow.toLocaleDateString('de-CH')
+    )
+    cy.get('[data-testid="end-date-picker"] input').type(
+      in2Days.toLocaleDateString('de-CH')
+    )
+
+    cy.get('[data-testid="create-camp-next-step"]').click()
+    cy.get('.v-select__selections > [data-testid="prototype-select"]').click()
+    cy.contains('Keine Vorlage').click()
+    cy.get('[data-testid="create-camp-button"]').click()
+
+    cy.contains('Lagerinfos').should('be.visible')
+    cy.get('[data-testid="title"] input').should('have.value', campTitle)
+  })
+})
diff --git a/frontend/src/components/campAdmin/CampSettings.vue b/frontend/src/components/campAdmin/CampSettings.vue
@@ -10,7 +10,12 @@ Displays details on a single camp and allows to edit them.
     <v-skeleton-loader v-if="camp._meta.loading" type="article" />
     <div v-else class="mt-3">
       <api-form :entity="camp" name="camp">
-        <api-text-field path="title" vee-rules="required|max:32" :disabled="disabled" />
+        <api-text-field
+          path="title"
+          vee-rules="required|max:32"
+          :disabled="disabled"
+          data-testid="title"
+        />
 
         <api-text-field
           path="shortTitle"
diff --git a/frontend/src/components/campAdmin/CreateCampPeriods.vue b/frontend/src/components/campAdmin/CreateCampPeriods.vue
@@ -50,6 +50,7 @@
               :max="period.end"
               :my="2"
               :filled="false"
+              data-testid="start-date-picker"
               required
             />
           </v-col>
@@ -62,6 +63,7 @@
               :min="period.start"
               :my="2"
               :filled="false"
+              data-testid="end-date-picker"
               required
             />
           </v-col>
diff --git a/frontend/src/components/campCreate/CampCreateStep1.vue b/frontend/src/components/campCreate/CampCreateStep1.vue
@@ -9,10 +9,19 @@
               path="title"
               :placeholder="$tc('components.campCreate.campCreateStep1.titlePlaceholder')"
               vee-rules="required|max:32"
+              data-testid="create-camp-title-input"
               required
             />
-            <e-text-field v-model="localCamp.organizer" path="organizer" />
-            <e-text-field v-model="localCamp.motto" path="motto" />
+            <e-text-field
+              v-model="localCamp.organizer"
+              path="organizer"
+              data-testid="create-camp-organizer"
+            />
+            <e-text-field
+              v-model="localCamp.motto"
+              path="motto"
+              data-testid="create-camp-motto"
+            />
             <CreateCampPeriods
               :add-period="addPeriod"
               :periods="localCamp.periods"
@@ -24,7 +33,11 @@
           <ContentActions>
             <v-spacer />
             <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
-            <ButtonContinue v-if="valid" @click="$emit('next-step')" />
+            <ButtonContinue
+              v-if="valid"
+              data-testid="create-camp-next-step"
+              @click="$emit('next-step')"
+            />
             <v-tooltip v-else top>
               <template #activator="{ attrs, on }">
                 <v-btn
diff --git a/frontend/src/components/campCreate/CampCreateStep2.vue b/frontend/src/components/campCreate/CampCreateStep2.vue
@@ -7,17 +7,18 @@
             <server-error :server-error="serverError" />
 
             <e-select
-              v-model="localCamp.campPrototype"
+              v-model="selectedPrototypeValue"
               :vee-rules="{ required: true }"
               :skip-if-empty="false"
               :label="$tc('entity.camp.prototype')"
               :hint="prototypeHint"
               persistent-hint
               :items="campTemplates"
               :menu-props="{ offsetY: true }"
+              data-testid="prototype-select"
             />
             <div
-              v-if="localCamp.campPrototype === 'other'"
+              v-if="selectedPrototypeValue === 'other'"
               class="e-form-container d-flex gap-2"
             >
               <e-text-field
@@ -177,7 +178,12 @@
             </v-btn>
             <div class="ml-auto">
               <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
-              <ButtonAdd v-if="valid" type="submit" :loading="isSaving">
+              <ButtonAdd
+                v-if="valid"
+                type="submit"
+                :loading="isSaving"
+                data-testid="create-camp-button"
+              >
                 {{ $tc('components.campCreate.campCreateStep2.create') }}
               </ButtonAdd>
               <v-tooltip v-else top>
@@ -213,7 +219,7 @@ import ClipboardInfoDialog from '@/components/generic/ClipboardInfoDialog.vue'
 import { useClipboardEntity } from '@/components/generic/useClipboardEntity.js'
 import router from '@/router.js'
 import { apiStore as api } from '@/plugins/store/index.js'
-import { reactive, ref } from 'vue'
+import { reactive, ref, watchEffect } from 'vue'
 
 export default {
   name: 'CampCreateStep2',
@@ -237,6 +243,14 @@ export default {
   setup({ camp }) {
     const localCamp = reactive(camp)
     const copyCampUrl = ref('')
+    const selectedPrototypeValue = ref(null)
+    watchEffect(() => {
+      if (['other', 'none', null].includes(selectedPrototypeValue.value)) {
+        localCamp.campPrototype = null
+      } else {
+        localCamp.campPrototype = selectedPrototypeValue.value
+      }
+    })
 
     const clipboard = useClipboardEntity({
       fetchClipboardEntity: async (url) => {
@@ -248,11 +262,11 @@ export default {
         return await api.get().camps({ id: match.params.campId })
       },
       onEntityLoaded(entity) {
-        localCamp.campPrototype = entity._meta.self
+        selectedPrototypeValue.value = entity._meta.self
       },
       onEntityLoadFailed() {
         // If "other" is selected, leave the selection as it is, so the user can try again
-        if (localCamp.campPrototype !== 'other') localCamp.campPrototype = ''
+        if (selectedPrototypeValue.value !== 'other') selectedPrototypeValue.value = ''
       },
     })
 
@@ -266,6 +280,7 @@ export default {
       setClipboardEntityUrl,
       localCamp,
       copyCampUrl,
+      selectedPrototypeValue,
     }
   },
   computed: {
@@ -291,28 +306,28 @@ export default {
     },
     prototypeHint() {
       const campPrototypeUris = this.campPrototypes.map((prototype) => prototype.value)
-      switch (this.localCamp.campPrototype) {
+      switch (this.selectedPrototypeValue) {
         case '':
           return this.$tc('components.campCreate.campCreateStep2.prototypeHint')
         case 'none':
           return this.$tc('components.campCreate.campCreateStep2.prototypeHintEmpty')
         case 'other':
           return ''
         default:
-          if (!campPrototypeUris.includes(this.localCamp.campPrototype)) {
+          if (!campPrototypeUris.includes(this.selectedPrototypeValue)) {
             return this.$tc('components.campCreate.campCreateStep2.prototypeHintOther')
           }
           return this.$tc('components.campCreate.campCreateStep2.prototypeHintSelected')
       }
     },
     prototypePreview() {
       if (
-        this.localCamp.campPrototype === 'none' ||
-        this.localCamp.campPrototype === 'other'
+        this.selectedPrototypeValue === 'none' ||
+        this.selectedPrototypeValue === 'other'
       ) {
         return null
       }
-      if (this.localCamp.campPrototype) {
+      if (this.localCamp?.campPrototype) {
         return this.api.get(this.localCamp.campPrototype)
       }
       return null
@@ -335,7 +350,7 @@ export default {
     },
   },
   watch: {
-    'localCamp.campPrototype'(newPrototype) {
+    selectedPrototypeValue(newPrototype) {
       if (newPrototype === 'other') {
         this.$nextTick(() => {
           if (this.$refs.clipboardInfoDialog) {
diff --git a/frontend/src/views/Camps.vue b/frontend/src/views/Camps.vue
@@ -20,7 +20,11 @@
         <v-list-item>
           <v-list-item-content />
           <v-list-item-action>
-            <button-add icon="mdi-plus" :to="{ name: 'camps/create' }">
+            <button-add
+              data-testid="create-camp-button"
+              icon="mdi-plus"
+              :to="{ name: 'camps/create' }"
+            >
               {{ $tc('views.camps.create') }}
             </button-add>
           </v-list-item-action>
