Add participant types for activities

.sentryclirc

@@ -0,0 +1,4 @@
+[defaults]
+url = https://sentry.io/
+org = karrot-dev
+project = karrot

.storybook/preview.js

@@ -43,6 +43,9 @@ setupMockBackend()
 
 // Storybook config
 import { create } from '@storybook/theming'
+import { faker } from '@faker-js/faker'
+
+faker.seed(500)
 
 export const parameters = {
   options: {

package.json

@@ -70,6 +70,7 @@
     "mitt": "^3.0.0",
     "quasar": "^2.7.5",
     "reconnecting-websocket": "^4.4.0",
+    "rrule": "^2.7.0",
     "twemoji": "^14.0.2",
     "v-tooltip": "^2.1.3",
     "vue": "^3.2.37",

src/AppTests/givingFeedback.spec.js

@@ -18,6 +18,7 @@ import {
   createActivityType,
   createPlaceType,
 } from '>/mockBackend'
+import { joinActivity } from '>/mockBackend/activities'
 import { addUserToGroup } from '>/mockBackend/groups'
 
 useMockBackend()
@@ -32,7 +33,7 @@ test('give activity feedback', async () => {
 
   createPlaceType({ group: group.id })
 
-  createActivity({
+  const activity = createActivity({
     place: createPlace({ group: group.id }).id,
     activityType: createActivityType({
       group: group.id,
@@ -43,6 +44,8 @@ test('give activity feedback', async () => {
     startDate: subDays(new Date(), 5),
   })
 
+  joinActivity(activity, user)
+
   user.currentGroup = group.id
   loginAs(user)
 

src/activities/api/activities.js

@@ -58,8 +58,13 @@ export default {
     return convert((await axios.patch(`/api/activities/${activity.id}/`, convertDateToRange(activity))).data)
   },
 
-  async join (activityId) {
-    return convert((await axios.post(`/api/activities/${activityId}/add/`, {})).data)
+  async checkSave (activity) {
+    const { id } = activity
+    return (await axios.patch(`/api/activities/${id}/check/`, convertDateToRange(activity))).data
+  },
+
+  async join ({ activityId, participantTypeId }) {
+    return convert((await axios.post(`/api/activities/${activityId}/add/`, { participantType: participantTypeId })).data)
   },
 
   async leave (activityId) {

src/activities/api/activitySeries.js

@@ -19,6 +19,11 @@ export default {
     return convert((await axios.patch(`/api/activity-series/${id}/`, serialize(series))).data)
   },
 
+  async checkSave (series) {
+    const { id } = series
+    return (await axios.patch(`/api/activity-series/${id}/check/`, serialize(series))).data
+  },
+
   delete (seriesId) {
     return axios.delete(`/api/activity-series/${seriesId}/`)
   },

src/activities/components/ActivityEdit.vue

@@ -33,6 +33,7 @@
             :error="hasError('date')"
             size="9"
             hide-bottom-space
+            outlined
             class="q-mr-sm"
             @focus="$refs.qStartDateProxy.show()"
           >
@@ -63,6 +64,7 @@
             size="3"
             :error="hasError('date')"
             hide-bottom-space
+            outlined
             @focus="$refs.qStartTimeProxy.show()"
           >
             <Component
@@ -105,6 +107,7 @@
               size="3"
               :error="hasError('date')"
               hide-bottom-space
+              outlined
               @focus="$refs.qEndTimeProxy.show()"
             >
               <Component
@@ -151,85 +154,58 @@
         </div>
       </template>
 
-      <div>
-        <QInput
-          v-model.number="edit.maxParticipants"
-          type="number"
-          stack-label
-          :label="$t('CREATEACTIVITY.MAX_PARTICIPANTS')"
-          :hint="$t('CREATEACTIVITY.MAX_PARTICIPANTS_HELPER')"
-          :placeholder="$t('CREATEACTIVITY.UNLIMITED')"
-          :error="hasError('maxParticipants')"
-          :error-message="firstError('maxParticipants')"
-          :input-style="{ maxWidth: '100px' }"
-        >
-          <template #before>
-            <QIcon name="group" />
-          </template>
-          <QSlider
-            v-if="edit.maxParticipants > 0 && edit.maxParticipants <= 10"
-            v-model="edit.maxParticipants"
-            :min="1"
-            :max="10"
-            label
-            markers
-            class="q-mx-sm self-end"
-            style="min-width: 60px"
+      <MarkdownInput
+        v-model="edit.description"
+        :error="hasError('description')"
+        :error-message="firstError('description')"
+        :label="$t('CREATEACTIVITY.COMMENT')"
+        :hint="$t('CREATEACTIVITY.COMMENT_HELPER')"
+        icon="info"
+        maxlength="500"
+        :input-style="{ minHeight: 'auto' }"
+        mentions
+        outlined
+        :bg-color="series && series.description !== edit.description ? 'orange-1' : null"
+        @keyup.ctrl.enter="maybeSave"
+      >
+        <template #after>
+          <QBtn
+            v-if="series ? series.description !== edit.description : false"
+            icon="undo"
+            unelevated
+            dense
+            @click="edit.description = series.description"
           />
-          <template #after>
-            <QIcon
-              v-if="series ? series.maxParticipants !== edit.maxParticipants : false"
-              name="undo"
-              @click="edit.maxParticipants = series.maxParticipants"
-            />
-          </template>
-        </QInput>
-        <div
-          v-if="seriesMeta.isMaxParticipantsChanged"
-          class="q-ml-lg col-12 q-field__bottom text-warning"
-        >
-          <QIcon name="warning" />
-          {{ $t('CREATEACTIVITY.DIFFERS_WARNING') }}
-        </div>
+        </template>
+      </MarkdownInput>
+      <div
+        v-if="series && series.description !== edit.description"
+        class="q-ml-lg col-12 q-field__bottom text-warning"
+      >
+        <QIcon name="warning" />
+        {{ $t('CREATEACTIVITY.DIFFERS_WARNING') }}
       </div>
 
-      <div>
-        <MarkdownInput
-          v-model="edit.description"
-          :error="hasError('description')"
-          :error-message="firstError('description')"
-          :label="$t('CREATEACTIVITY.COMMENT')"
-          :hint="$t('CREATEACTIVITY.COMMENT_HELPER')"
-          icon="info"
-          mentions
-          maxlength="500"
-          @keyup.ctrl.enter="maybeSave"
-        >
-          <template #after>
-            <QIcon
-              v-if="series ? series.description !== edit.description : false"
-              name="undo"
-              @click="edit.description = series.description"
-            />
-          </template>
-        </MarkdownInput>
-
-        <div
-          v-if="seriesMeta.isDescriptionChanged"
-          class="q-ml-lg col-12 q-field__bottom text-warning"
-        >
-          <QIcon name="warning" />
-          {{ $t('CREATEACTIVITY.DIFFERS_WARNING') }}
-        </div>
-      </div>
+      <ParticipantTypesEdit
+        v-model="edit.participantTypes"
+        :series="series"
+        :participants="value.participants"
+        @maybe-save="maybeSave"
+      />
 
       <div
         v-if="hasNonFieldError"
         class="text-negative"
       >
         {{ firstNonFieldError }}
       </div>
+
       <div class="row justify-end q-gutter-sm q-mt-lg">
+        <QToggle
+          v-model="showPreview"
+          :label="$t('BUTTON.PREVIEW')"
+        />
+        <QSpace />
         <QBtn
           v-if="isNew"
           type="button"
@@ -274,6 +250,13 @@
           {{ $t(isNew ? 'BUTTON.CREATE' : 'BUTTON.SAVE_CHANGES') }}
         </QBtn>
       </div>
+
+      <div v-if="showPreview">
+        <ActivityItem
+          preview
+          :activity="previewActivity"
+        />
+      </div>
     </form>
   </div>
 </template>
@@ -283,6 +266,9 @@ import addDays from 'date-fns/addDays'
 import addSeconds from 'date-fns/addSeconds'
 import differenceInSeconds from 'date-fns/differenceInSeconds'
 import {
+  QCard,
+  QCardSection,
+  QCardActions,
   QDate,
   QTime,
   QSlider,
@@ -291,23 +277,36 @@ import {
   QIcon,
   QMenu,
   QDialog,
+  QToggle,
+  QSelect,
+  QSpace,
   Dialog,
   date,
+  QItem,
+  QItemSection,
+  QItemLabel,
 } from 'quasar'
 
-import { useActivityTypeHelpers } from '@/activities/helpers'
+import activityAPI from '@/activities/api/activities'
+import { useActivityHelpers, useActivityTypeHelpers } from '@/activities/helpers'
+import { useActivityTypeService } from '@/activities/services'
 import { defaultDuration } from '@/activities/settings'
 import { formatSeconds } from '@/activities/utils'
 import editMixin from '@/utils/mixins/editMixin'
 import statusMixin from '@/utils/mixins/statusMixin'
 import reactiveNow from '@/utils/reactiveNow'
 import { objectDiff } from '@/utils/utils'
 
+import ActivityItem from '@/activities/components/ActivityItem'
+import ConfirmChangesDialog from '@/activities/components/ConfirmChangesDialog'
+import ParticipantTypesEdit from '@/activities/components/ParticipantTypesEdit'
 import MarkdownInput from '@/utils/components/MarkdownInput'
 
 export default {
   name: 'ActivityEdit',
   components: {
+    ParticipantTypesEdit,
+    ActivityItem,
     QDate,
     QTime,
     QSlider,
@@ -316,7 +315,16 @@ export default {
     QIcon,
     QMenu,
     QDialog,
+    QToggle,
+    QSelect,
+    QCard,
+    QCardSection,
+    QCardActions,
+    QSpace,
     MarkdownInput,
+    QItem,
+    QItemSection,
+    QItemLabel,
   },
   mixins: [editMixin, statusMixin],
   props: {
@@ -330,12 +338,29 @@ export default {
     'save',
   ],
   setup () {
+    const { roleOptions } = useActivityHelpers()
+    const { getActivityTypeById } = useActivityTypeService()
     const { getIconProps } = useActivityTypeHelpers()
-    return { getIconProps }
+    return {
+      roleOptions,
+      getActivityTypeById,
+      getIconProps,
+    }
+  },
+  data () {
+    return {
+      showPreview: false,
+    }
   },
   computed: {
+    previewActivity () {
+      return {
+        ...this.edit,
+        participants: [],
+      }
+    },
     activityType () {
-      return this.value && this.value.activityType
+      return this.value && this.getActivityTypeById(this.value.activityType)
     },
     activityTypeIconProps () {
       return this.activityType ? this.getIconProps(this.activityType) : {}
@@ -353,10 +378,6 @@ export default {
       if (this.edit.series) return false
       return true
     },
-    seriesMeta () {
-      if (!this.edit.seriesMeta) return {}
-      return this.edit.seriesMeta
-    },
     date: {
       get () {
         return this.edit.date
@@ -430,29 +451,34 @@ export default {
       return this.$q.screen.width < 450 || this.$q.screen.height < 450
     },
   },
-  watch: {
-    'edit.maxParticipants' (val) {
-      if (val === '') {
-        // if we have 'unlimited' participants, val gets parsed to empty string, but the server expects null
-        this.edit.maxParticipants = null
-      }
-    },
-  },
   methods: {
     futureDates (dateString) {
       return date.extractDate(`${dateString} 23:59`, 'YYYY/MM/DD HH:mm') > this.now
     },
     toggleDuration () {
       this.hasDuration = !this.hasDuration
     },
-    maybeSave () {
+    async maybeSave () {
       if (!this.canSave) return
-      this.save()
-    },
-    getCreateData () {
-      return {
-        ...this.edit,
-        activityType: this.activityType.id,
+      if (this.isNew) {
+        this.save()
+      }
+      else {
+        const { users } = await activityAPI.checkSave({ ...this.getPatchData(), id: this.value.id })
+        Dialog.create({
+          component: ConfirmChangesDialog,
+          componentProps: {
+            users,
+          },
+        })
+          .onOk(({ updatedMessage }) => {
+            if (updatedMessage) {
+              this.save({ updatedMessage })
+            }
+            else {
+              this.save()
+            }
+          })
       }
     },
     // Overrides mixin method to always provide start date if we have modified end date