Streamline UI for creating activities

src/__snapshots__/storyshots.spec.js.snap

@@ -799,6 +799,7 @@ exports[`Storyshots activities/components/ActivityItem Normal 1`] = `
     <div class="content-inner">
       <div class="row no-wrap items-start justify-between">
         <div><strong class="featured-text">10:00 AM <!--v-if--></strong>Monday, December 25, 2017</div>
+        <!--v-if-->
       </div>
       <!--v-if-->
       <!--v-if-->

src/activities/components/ActivityCreateButton.spec.js

@@ -0,0 +1,66 @@
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+import { render } from '@testing-library/vue'
+import { times } from 'lodash'
+
+import { resetServices } from '@/utils/datastore/helpers'
+
+import { withDefaults } from '>/helpers'
+import {
+  db,
+  useMockBackend,
+  createUser,
+  createGroup,
+  loginAs,
+  setPageSize,
+  createPlace,
+  createPlaceType,
+  createActivityType,
+} from '>/mockBackend'
+import { addUserToGroup } from '>/mockBackend/groups'
+import '>/routerMocks'
+
+import ActivityCreateButton from './ActivityCreateButton'
+
+describe('ActivityCreateButton', () => {
+  let activityType
+  let places
+  useMockBackend()
+
+  beforeEach(() => {
+    jest.resetModules()
+    resetServices()
+  })
+
+  beforeEach(() => {
+    const user = createUser()
+    const group = createGroup()
+    addUserToGroup(user, group)
+    user.currentGroup = group.id
+    setPageSize(3) // make it have to do pagination stuff too...
+    createPlaceType({ group: group.id })
+    places = times(3, () => createPlace({ group: group.id }))
+    activityType = createActivityType({ group: group.id })
+    loginAs(user)
+  })
+
+  it('creates a new activity', async () => {
+    const { click } = userEvent.setup()
+
+    const { findByRole, getByRole, getAllByRole } = render(ActivityCreateButton, withDefaults())
+
+    await click(getByRole('button', { title: /create/i }))
+    await click(getAllByRole('button', { name: activityType.name })[0])
+
+    await click(getByRole('combobox', { name: 'Choose a place' }))
+    await click(await findByRole('option', { name: places[0].name }))
+    await click(await findByRole('option', { name: places[0].name }))
+
+    expect(db.activities.length).toEqual(0)
+    await click(getByRole('button', { name: /create/i }))
+
+    expect(db.activities.length).toEqual(1)
+    expect(db.activities[0].place).toEqual(places[0].id)
+    expect(db.activities[0].activityType).toEqual(activityType.id)
+  })
+})

src/activities/components/ActivityCreateButton.vue

@@ -0,0 +1,238 @@
+<template>
+  <QFab
+    class="fab-top-fix"
+    vertical-actions-align="right"
+    size="sm"
+    color="secondary"
+    icon="fas fa-plus"
+    direction="down"
+    unelevated
+    padding="0px 13px"
+    :title="$t('BUTTON.CREATE')"
+  >
+    <QFabAction
+      v-for="activityType in activityTypes"
+      :key="activityType.id"
+      class="fab-action-fix"
+      label-position="left"
+      v-bind="getIconProps(activityType)"
+      @click="selectActivityTypeAndOpen(activityType)"
+    />
+    <QFabAction
+      class="fab-action-fix bg-white"
+      :label="$t('ACTIVITY_TYPES.MANAGE_TYPES')"
+      outline
+      :to="{ name: 'groupEditActivityTypes' }"
+    />
+  </QFab>
+  <QDialog
+    v-model="isOpen"
+  >
+    <div
+      class="bg-white"
+      style="width: 700px; overflow-x: hidden"
+    >
+      <Component
+        :is="isSeries ? ActivitySeriesEdit : ActivityEdit"
+        :value="isSeries ? newSeries : newActivity"
+        :status="isSeries ? createSeriesStatus : createActivityStatus"
+        can-cancel
+        @save="data => isSeries ? saveNewSeries(data) : saveNewActivity(data)"
+        @cancel="isOpen = false"
+        @reset="() => isSeries ? resetNewSeries() : resetNewSeries()"
+      >
+        <QSelect
+          v-model="placeId"
+          :options="places.map(({ name, id, placeType }) => ({ label: name, value: id, icon: getPlaceTypeById(placeType).icon }))"
+          :label="$t('CREATEACTIVITY.PLACE')"
+          emit-value
+          map-options
+        >
+          <template #option="scope">
+            <QItem
+              :key="scope.index"
+              dense
+              v-bind="scope.itemProps"
+            >
+              <QItemSection side>
+                <QIcon
+                  :name="scope.opt.icon"
+                  size="1.1em"
+                  color="positive"
+                />
+              </QItemSection>
+              <QItemSection>
+                <QItemLabel>{{ scope.opt.label }}</QItemLabel>
+              </QItemSection>
+            </QItem>
+          </template>
+          <template #selected-item="scope">
+            <div class="row no-wrap ellipsis">
+              <QIcon
+                :name="scope.opt.icon"
+                size="1.1em"
+                class="on-left q-ml-xs"
+                color="positive"
+              />
+              <div class="ellipsis">
+                {{ scope.opt.label }}
+              </div>
+            </div>
+          </template>
+        </QSelect>
+        <QOptionGroup
+          v-model="isSeries"
+          :options="[
+            { label: $t('CREATEACTIVITY.ONE_TIME_ACTIVITY'), value: false },
+            { label: $t('ACTIVITYMANAGE.SERIES'), value: true },
+          ]"
+          color="primary"
+          inline
+          class="q-mb-md"
+        />
+      </Component>
+    </div>
+  </QDialog>
+</template>
+
+<script setup>
+import addHours from 'date-fns/addHours'
+import addSeconds from 'date-fns/addSeconds'
+import startOfTomorrow from 'date-fns/startOfTomorrow'
+import {
+  QItem,
+  QItemSection,
+  QItemLabel,
+  QIcon,
+  QFab,
+  QFabAction,
+  QDialog,
+  QSelect,
+  QOptionGroup,
+} from 'quasar'
+import { ref, computed, watch, unref, defineAsyncComponent } from 'vue'
+
+import { useActivityTypeHelpers } from '@/activities/helpers'
+import { useCreateActivityMutation, useCreateActivitySeriesMutation } from '@/activities/mutations'
+import { useActivityTypeService } from '@/activities/services'
+import { defaultDuration } from '@/activities/settings'
+import { useCurrentGroupService } from '@/group/services'
+import { usePlaceService, usePlaceTypeService } from '@/places/services'
+
+const ActivityEdit = defineAsyncComponent(() => import('./ActivityEdit.vue'))
+const ActivitySeriesEdit = defineAsyncComponent(() => import('./ActivitySeriesEdit.vue'))
+
+const isOpen = ref(false)
+const placeId = ref(null)
+const isSeries = ref(false)
+
+const newActivity = ref({})
+const newSeries = ref({})
+
+const {
+  groupId,
+} = useCurrentGroupService()
+
+const {
+  getPlacesByGroup,
+} = usePlaceService()
+
+const {
+  getPlaceTypeById,
+} = usePlaceTypeService()
+
+const places = computed(() => getPlacesByGroup(groupId).filter(place => place.status === 'active'))
+
+const {
+  mutate: saveNewActivity,
+  status: createActivityStatus,
+  reset: resetNewActivity,
+} = useCreateActivityMutation({
+  onSuccess () {
+    isOpen.value = false
+  },
+})
+
+const {
+  mutate: saveNewSeries,
+  reset: resetNewSeries,
+  status: createSeriesStatus,
+} = useCreateActivitySeriesMutation({
+  onSuccess () {
+    isOpen.value = false
+  },
+})
+
+const {
+  getIconProps,
+} = useActivityTypeHelpers()
+
+const {
+  getActivityTypesByGroup,
+} = useActivityTypeService()
+
+const activityTypes = computed(() => getActivityTypesByGroup(groupId, { status: 'active' }))
+
+watch(placeId, id => {
+  // replace object to trigger 'value' watcher in editMixin
+  newActivity.value = {
+    ...newActivity.value,
+    place: unref(id),
+  }
+  newSeries.value = {
+    ...newSeries.value,
+    place: unref(id),
+  }
+})
+
+function selectActivityTypeAndOpen (activityType) {
+  createNewActivity(activityType.id)
+  createNewSeries(activityType.id)
+  resetNewSeries()
+  resetNewActivity()
+  isOpen.value = true
+}
+
+function createNewActivity (activityType) {
+  const date = addHours(startOfTomorrow(), 10) // default to 10am tomorrow
+  newActivity.value = {
+    activityType,
+    participantTypes: [
+      {
+        role: 'member',
+        maxParticipants: 2,
+        description: '',
+      },
+    ],
+    maxParticipants: 2,
+    description: '',
+    place: unref(placeId),
+    date,
+    dateEnd: addSeconds(date, defaultDuration),
+    hasDuration: false,
+  }
+}
+
+function createNewSeries (activityType) {
+  newSeries.value = {
+    activityType,
+    participantTypes: [
+      {
+        role: 'member',
+        maxParticipants: 2,
+        description: '',
+      },
+    ],
+    maxParticipants: 2,
+    description: '',
+    startDate: addHours(startOfTomorrow(), 10),
+    duration: null,
+    place: unref(placeId),
+    rule: {
+      isCustom: false,
+      byDay: ['MO'],
+      freq: 'WEEKLY',
+    },
+  }
+}
+</script>

src/activities/components/ActivityEdit.vue

@@ -24,6 +24,7 @@
         />
         {{ activityTypeIconProps.title }}
       </h3>
+      <slot />
       <template v-if="canEditDate">
         <div class="row q-mt-xs">
           <QInput
@@ -207,7 +208,7 @@
         />
         <QSpace />
         <QBtn
-          v-if="isNew"
+          v-if="canCancel"
           type="button"
           @click="$emit('cancel')"
         >
@@ -286,6 +287,7 @@ import {
   QItemSection,
   QItemLabel,
 } from 'quasar'
+import { defineAsyncComponent } from 'vue'
 
 import activityAPI from '@/activities/api/activities'
 import { useActivityHelpers, useActivityTypeHelpers } from '@/activities/helpers'
@@ -297,11 +299,12 @@ 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'
 
+const ActivityItem = defineAsyncComponent(() => import('@/activities/components/ActivityItem'))
+
 export default {
   name: 'ActivityEdit',
   components: {
@@ -332,6 +335,10 @@ export default {
       type: Object,
       default: null,
     },
+    canCancel: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     'cancel',