feat: Edit schedule entries from activity view

common/locales/de.json

@@ -196,6 +196,7 @@
         "endDate": "Enddatum",
         "endDatetime": "Endzeit",
         "nr": "Nr.",
+        "start": "Start",
         "time": "Zeitpunkt",
         "startDate": "Startdatum",
         "startDatetime": "Startzeit"

frontend/src/components/activity/ScheduleEntry.vue

@@ -164,7 +164,7 @@ Displays a single scheduleEntry
       <template v-else>
         <!-- Header -->
         <v-row dense class="activity-header">
-          <v-col class="col col-sm-6 col-12 px-0 pt-0">
+          <v-col class="col col-sm-6 col-12 px-0 pt-0 d-flex flex-wrap gap-x-4">
             <table>
               <thead>
                 <tr>
@@ -201,6 +201,16 @@ Displays a single scheduleEntry
                 </tr>
               </tbody>
             </table>
+            <DialogActivityEdit
+              v-if="activity && isContributor"
+              :schedule-entry="scheduleEntry()"
+              hide-header-fields
+              @activityUpdated="activity.$reload()"
+            >
+              <template #activator="{ on }">
+                <ButtonEdit text small class="v-btn--has-bg" v-on="on" />
+              </template>
+            </DialogActivityEdit>
           </v-col>
           <v-col class="col col-sm-6 col-12 px-0">
             <api-form :entity="activity" name="activity">
@@ -264,12 +274,16 @@ import DialogEntityDelete from '@/components/dialog/DialogEntityDelete.vue'
 import TogglePaperSize from '@/components/activity/TogglePaperSize.vue'
 import ApiForm from '@/components/form/api/ApiForm.vue'
 import ApiSelect from '@/components/form/api/ApiSelect.vue'
+import ButtonEdit from '@/components/buttons/ButtonEdit.vue'
+import DialogActivityEdit from '@/components/activity/dialog/DialogActivityEdit.vue'
 
 export default {
   name: 'ScheduleEntry',
   components: {
     ApiForm,
     ApiSelect,
+    DialogActivityEdit,
+    ButtonEdit,
     TogglePaperSize,
     DialogEntityDelete,
     ContentCard,

frontend/src/components/program/DialogActivityEdit.vue → frontend/src/components/activity/dialog/DialogActivityEdit.vue

@@ -1,6 +1,7 @@
 <template>
   <dialog-form
     v-model="showDialog"
+    :title="$tc('components.activity.dialog.dialogActivityEdit.title')"
     :loading="loading"
     :error="error"
     icon="mdi-calendar-plus"
@@ -14,30 +15,31 @@
       <slot name="activator" v-bind="scope" />
     </template>
     <template #moreActions>
-      <v-btn
-        v-if="!scheduleEntry.tmpEvent"
-        color="primary"
-        :to="scheduleEntryRoute(scheduleEntry)"
-      >
-        {{ $tc('global.button.open') }}
-      </v-btn>
+      <slot name="moreActions" />
     </template>
-    <dialog-activity-form :activity="entityData" :period="scheduleEntry.period" />
+    <DialogActivityForm
+      :activity="entityData"
+      :period="scheduleEntry.period"
+      :hide-location="hideHeaderFields"
+    />
   </dialog-form>
 </template>
 
 <script>
 import DialogForm from '@/components/dialog/DialogForm.vue'
 import DialogBase from '@/components/dialog/DialogBase.vue'
 import DialogActivityForm from './DialogActivityForm.vue'
-import { scheduleEntryRoute } from '@/router.js'
 
 export default {
   name: 'DialogActivityEdit',
   components: { DialogForm, DialogActivityForm },
   extends: DialogBase,
   props: {
     scheduleEntry: { type: Object, required: true },
+    hideHeaderFields: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -46,12 +48,12 @@ export default {
     }
   },
   computed: {
-    scheduleEntries() {
-      return this.activity.scheduleEntries()
-    },
     activity() {
       return this.scheduleEntry.activity()
     },
+    scheduleEntries() {
+      return this.activity.scheduleEntries()
+    },
   },
   watch: {
     showDialog: async function (showDialog) {
@@ -112,6 +114,9 @@ export default {
 
       // patch activity entity
       const activityPayload = { ...this.entityData }
+      if (this.hideHeaderFields) {
+        delete activityPayload.location
+      }
       delete activityPayload.scheduleEntries
       promises.push(this.api.patch(this.entityUri, activityPayload))
 
@@ -127,7 +132,6 @@ export default {
       this.close()
       this.$emit('activityUpdated', data)
     },
-    scheduleEntryRoute,
   },
 }
 </script>

frontend/src/components/program/DialogActivityForm.vue → frontend/src/components/activity/dialog/DialogActivityForm.vue

@@ -36,7 +36,7 @@
       </template>
     </e-select>
 
-    <e-text-field v-model="localActivity.location" path="location" />
+    <e-text-field v-if="!hideLocation" v-model="localActivity.location" path="location" />
 
     <FormScheduleEntryList
       v-if="activity.scheduleEntries"
@@ -73,6 +73,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideLocation: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

frontend/src/components/program/FormScheduleEntryList.vue → frontend/src/components/activity/dialog/FormScheduleEntryList.vue

@@ -4,7 +4,7 @@
       <v-row no-gutters>
         <v-col class="header mb-3">
           <legend class="pa-2 float-left">
-            {{ $tc('components.program.formScheduleEntryList.name') }}
+            {{ $tc('components.activity.dialog.formScheduleEntryList.name') }}
           </legend>
 
           <button-add

frontend/src/components/generic/DetailPane.vue

@@ -33,7 +33,7 @@ import DialogBottomSheet from '@/components/dialog/DialogBottomSheet.vue'
 import DialogUiBase from '@/components/dialog/DialogUiBase.vue'
 
 export default {
-  name: 'DetailEdit',
+  name: 'DetailPane',
   components: { DialogBottomSheet, DialogForm },
   extends: DialogUiBase,
 }

frontend/src/components/program/DialogActivityCreate.vue

@@ -106,7 +106,7 @@
 <script>
 import DialogForm from '@/components/dialog/DialogForm.vue'
 import DialogBase from '@/components/dialog/DialogBase.vue'
-import DialogActivityForm from './DialogActivityForm.vue'
+import DialogActivityForm from '@/components/activity/dialog/DialogActivityForm.vue'
 import CopyActivityInfoDialog from '@/components/activity/CopyActivityInfoDialog.vue'
 import PopoverPrompt from '@/components/prompt/PopoverPrompt.vue'
 import { uniqueId } from 'lodash'
@@ -125,9 +125,6 @@ export default {
   extends: DialogBase,
   props: {
     scheduleEntry: { type: Object, required: true },
-
-    // currently visible period
-    period: { type: Function, required: true },
   },
   data() {
     return {
@@ -145,6 +142,9 @@ export default {
     camp() {
       return this.period().camp()
     },
+    period() {
+      return this.scheduleEntry.period
+    },
     clipboardAccessDenied() {
       return (
         this.clipboardPermission === 'unaccessable' ||

frontend/src/components/program/ScheduleEntries.vue

@@ -6,9 +6,8 @@
       :reload-entries="reloadScheduleEntries"
       :on="eventHandlers"
     />
-    <dialog-activity-create
+    <DialogActivityCreate
       ref="dialogActivityCreate"
-      :period="period"
       :schedule-entry="newScheduleEntry"
       @activityCreated="afterCreateActivity($event)"
     />
@@ -32,7 +31,7 @@
 </template>
 
 <script>
-import DialogActivityCreate from './DialogActivityCreate.vue'
+import DialogActivityCreate from '@/components/program/DialogActivityCreate.vue'
 
 export default {
   name: 'ScheduleEntries',

frontend/src/components/program/picasso/PicassoEntry.vue

@@ -48,6 +48,11 @@
           <v-icon x-small color="white">mdi-pencil</v-icon>
         </v-btn>
       </template>
+      <template #moreActions>
+        <v-btn color="primary" :to="scheduleEntryRoute">
+          {{ $tc('global.button.open') }}
+        </v-btn>
+      </template>
     </DialogActivityEdit>
 
     <h4 class="e-picasso-entry__title">
@@ -129,7 +134,7 @@
 </template>
 <script>
 import { ref, toRefs, computed } from 'vue'
-import DialogActivityEdit from '../DialogActivityEdit.vue'
+import DialogActivityEdit from '@/components/activity/dialog/DialogActivityEdit.vue'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import { timestampToUtcString } from './dateHelperVCalendar.js'
 import { dateHelperUTCFormatted } from '@/mixins/dateHelperUTCFormatted.js'

frontend/src/locales/de.json

@@ -27,6 +27,14 @@
         "granted": "Du kannst nun kopierte Aktivitäten einfügen.",
         "title": "Aktivität kopieren & einfügen"
       },
+      "dialog": {
+        "dialogActivityEdit": {
+          "title": "Aktivität bearbeiten"
+        },
+        "formScheduleEntryList": {
+          "name": "Geplante Termine"
+        }
+      },
       "menuCardlessContentNode": {
         "deletingDisabled": "Muss leer sein zum Löschen"
       },
@@ -381,13 +389,6 @@
         "copySourceInfo": "Hier kannst du die URL einer Aktivität einfügen, um dessen Inhalte zu kopieren.",
         "pasteActivity": "Kopierte Aktivität einfügen"
       },
-      "formScheduleEntryItem": {
-        "end": "Ende",
-        "start": "Start"
-      },
-      "formScheduleEntryList": {
-        "name": "Geplante Termine"
-      },
       "periodSwitcher": {
         "title": "Lagerabschnitt wählen"
       },

frontend/src/locales/en.json

@@ -27,6 +27,14 @@
         "granted": "You can now paste copied activities.",
         "title": "Copy & paste activity"
       },
+      "dialog": {
+        "dialogActivityEdit": {
+          "title": "Edit activity"
+        },
+        "formScheduleEntryList": {
+          "name": "Scheduled"
+        }
+      },
       "menuCardlessContentNode": {
         "deletingDisabled": "Must be empty to delete"
       },
@@ -381,13 +389,6 @@
         "copySourceInfo": "Here you can paste the URL of an activity to copy its contents.",
         "pasteActivity": "paste activity"
       },
-      "formScheduleEntryItem": {
-        "end": "End",
-        "start": "Start"
-      },
-      "formScheduleEntryList": {
-        "name": "Scheduled"
-      },
       "periodSwitcher": {
         "title": "Choose period"
       },

frontend/src/locales/fr.json

@@ -27,6 +27,14 @@
         "granted": "Vous pouvez maintenant coller les activités copiées.",
         "title": "Copier et coller une activité"
       },
+      "dialog": {
+        "dialogActivityEdit": {
+          "title": "Modifier l'activité"
+        },
+        "formScheduleEntryList": {
+          "name": "Dates planifiées"
+        }
+      },
       "menuCardlessContentNode": {
         "deletingDisabled": "Doit être vide pour être supprimé"
       },

frontend/src/locales/it.json

@@ -20,6 +20,14 @@
           }
         }
       },
+      "dialog": {
+        "dialogActivityEdit": {
+          "title": "Modificare l'actività"
+        },
+        "formScheduleEntryList": {
+          "name": "Programmato"
+        }
+      },
       "menuCardlessContentNode": {
         "deletingDisabled": "Deve essere vuoto per essere eliminato"
       },
@@ -347,13 +355,6 @@
       }
     },
     "program": {
-      "formScheduleEntryItem": {
-        "end": "Fine",
-        "start": "Inizio"
-      },
-      "formScheduleEntryList": {
-        "name": "Programmato"
-      },
       "periodSwitcher": {
         "title": "Scegli il periodo"
       },

frontend/src/locales/rm.json

@@ -17,6 +17,14 @@
           "title": "Propi stizzar?"
         }
       },
+      "dialog": {
+        "dialogActivityEdit": {
+          "title": "Modifitgar l'activitad"
+        },
+        "formScheduleEntryList": {
+          "name": "Termins planisads"
+        }
+      },
       "menuCardlessContentNode": {
         "deletingDisabled": "Sto esser vid per stizzar"
       },
@@ -312,13 +320,6 @@
       }
     },
     "program": {
-      "formScheduleEntryItem": {
-        "end": "Fin",
-        "start": "Entschatta"
-      },
-      "formScheduleEntryList": {
-        "name": "Termins planisads"
-      },
       "periodSwitcher": {
         "title": "Tscherner ina part dal champ"
       },

frontend/src/scss/global.scss

@@ -241,6 +241,10 @@ body {
   gap: 16px;
 }
 
+.gap-x-4 {
+  column-gap: 16px;
+}
+
 .relative {
   position: relative;
 }