Add edit schedule entries ability to activity

(cherry picked from commit c9cfe13)
ecamp · Dec 25, 2024 · e493e2f · e493e2f
1 parent bee21a3
commit e493e2f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 10 deletions.
diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/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"
+              :period="scheduleEntry().period"
+              :activity="activity"
+              hide-header-fields
+            >
+              <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,10 +274,14 @@ 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/program/DialogActivityEdit.vue'
 
 export default {
   name: 'ScheduleEntry',
   components: {
+    DialogActivityEdit,
+    ButtonEdit,
     ApiForm,
     ApiSelect,
     TogglePaperSize,

diff --git a/frontend/src/components/program/DialogActivityEdit.vue b/frontend/src/components/program/DialogActivityEdit.vue
@@ -14,7 +14,7 @@
     <template #activator="scope">
       <slot name="activator" v-bind="scope" />
     </template>
-    <template #moreActions>
+    <template v-if="scheduleEntry" #moreActions>
       <v-btn
         v-if="!scheduleEntry.tmpEvent"
         color="primary"
@@ -23,7 +23,11 @@
         {{ $tc('global.button.open') }}
       </v-btn>
     </template>
-    <dialog-activity-form :activity="entityData" :period="scheduleEntry.period()" />
+    <DialogActivityForm
+      :activity="entityData"
+      :period="currentPeriod"
+      :hide-location="hideHeaderFields"
+    />
   </dialog-form>
 </template>
 
@@ -38,7 +42,13 @@ export default {
   components: { DialogForm, DialogActivityForm },
   extends: DialogBase,
   props: {
-    scheduleEntry: { type: Object, required: true },
+    scheduleEntry: { type: Object, required: false, default: null },
+    activity: { type: Object, required: false, default: null },
+    period: { type: Function, required: false, default: null },
+    hideHeaderFields: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -48,16 +58,19 @@ export default {
   },
   computed: {
     scheduleEntries() {
-      return this.activity.scheduleEntries()
+      return this.currentActivity.scheduleEntries()
+    },
+    currentPeriod() {
+      return this.period || this.scheduleEntry.period
     },
-    activity() {
-      return this.scheduleEntry.activity()
+    currentActivity() {
+      return this.activity || this.scheduleEntry.activity()
     },
   },
   watch: {
     showDialog: async function (showDialog) {
       if (showDialog) {
-        this.loadEntityData(this.activity._meta.self)
+        this.loadEntityData(this.currentActivity._meta.self)
 
         const scheduleEntries = await this.scheduleEntries.$loadItems()
         this.$set(
@@ -107,12 +120,15 @@ export default {
           period: entry.period()._meta.self,
           start: entry.start,
           end: entry.end,
-          activity: this.activity._meta.self,
+          activity: this.currentActivity._meta.self,
         })
       })
 
       // patch activity entity
       const activityPayload = { ...this.entityData }
+      if (this.hideHeaderFields) {
+        delete activityPayload.location
+      }
       delete activityPayload.scheduleEntries
       promises.push(this.api.patch(this.entityUri, activityPayload))
 

diff --git a/frontend/src/components/program/DialogActivityForm.vue b/frontend/src/components/program/DialogActivityForm.vue
@@ -36,7 +36,7 @@
       </template>
     </e-select>
 
-    <e-text-field v-model="localActivity.location" path="location" />
+    <e-text-fieldv-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 {

diff --git a/frontend/src/scss/tailwind.scss b/frontend/src/scss/tailwind.scss
@@ -24,6 +24,10 @@
   gap: 16px;
 }
 
+.gap-x-4 {
+  column-gap: 16px;
+}
+
 .flex-wrap-reverse {
   flex-wrap: wrap-reverse;
 }