Improve loading of story overview

Don't show an accordion if there is only one period
ecamp · Apr 14, 2022 · b4f1b9f · b4f1b9f
1 parent ad8ae48
commit b4f1b9f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/frontend/src/components/story/StoryDay.vue b/frontend/src/components/story/StoryDay.vue
@@ -3,7 +3,10 @@
     <h3 class="body-2 grey--text text--darken-2 e-story-day-title">
       {{ dateLong(day.start) }}
     </h3>
-    <template v-if="entriesWithStory.length">
+    <template v-if="loading">
+      <v-skeleton-loader class="mt-2 mt-sm-3" type="list-item-three-line" />
+    </template>
+    <template v-else-if="entriesWithStory.length">
       <template v-for="{ scheduleEntry, storyChapters } in entriesWithStory">
         <div v-for="chapter in storyChapters" :key="chapter._meta.uri">
           <h4 class="mt-2 mt-sm-3">
@@ -48,27 +51,36 @@ import ApiForm from '@/components/form/api/ApiForm.vue'
 import ApiTextarea from '@/components/form/api/ApiTextarea.vue'
 import TiptapEditor from '@/components/form/tiptap/TiptapEditor.vue'
 import { dateLong } from '@/common/helpers/dateHelperUTCFormatted.js'
+import CategoryChip from '@/components/story/CategoryChip.vue'
 
 export default {
   name: 'StoryDay',
-  components: { TiptapEditor, ApiForm, ApiTextarea },
+  components: {
+    CategoryChip,
+    TiptapEditor,
+    ApiForm,
+    ApiTextarea
+  },
   props: {
     day: { type: Object, required: true },
     editing: { type: Boolean, default: false }
   },
   computed: {
+    loading () {
+      return this.day.scheduleEntries()._meta.loading || this.sortedScheduleEntries.some(entry => entry.activity().contentNodes()._meta.loading)
+    },
     sortedScheduleEntries () {
       return sortBy(this.day.scheduleEntries().items, scheduleEntry => scheduleEntry.start)
     },
     entries () {
-      return this.sortedScheduleEntries.map(scheduleEntry => {
-        return {
+      return this.sortedScheduleEntries.map(scheduleEntry =>
+        ({
           scheduleEntry: scheduleEntry,
           storyChapters: (scheduleEntry.activity().contentNodes() || { items: [] })
             .items
             .filter(contentNode => contentNode.contentTypeName === 'Storycontext')
-        }
-      })
+        })
+      )
     },
     entriesWithStory () {
       return this.entries.filter(({ storyChapters }) => storyChapters.length)
@@ -92,4 +104,9 @@ export default {
   border-top: 1px solid #eee;
   padding-top: 5px;
 }
+
+::v-deep .v-skeleton-loader__list-item-three-line {
+  padding: 0;
+  height: auto;
+}
 </style>
diff --git a/frontend/src/views/camp/Story.vue b/frontend/src/views/camp/Story.vue
@@ -6,16 +6,16 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
   <content-card :title="$tc('views.camp.story.title')" toolbar>
     <template #title-actions>
       <template v-if="$vuetify.breakpoint.smAndUp">
-        <e-switch v-model="editing" :label="$tc('global.button.editable')"
+        <e-switch v-model="editing" :disabled="!isContributor"
+                  :label="$tc('global.button.editable')"
                   class="ec-story-editable ml-auto"
-                  :disabled="!isContributor"
                   @click="$event.preventDefault()" />
       </template>
       <v-menu v-else offset-y>
         <template #activator="{ on, attrs }">
           <v-btn
-            text icon
             class="ml-auto"
+            text icon
             v-bind="attrs"
             v-on="on">
             <v-icon>mdi-dots-vertical</v-icon>
@@ -38,18 +38,25 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
         </v-list>
       </v-menu>
     </template>
-    <v-expansion-panels v-model="openPeriods" multiple
-                        flat accordion>
+    <v-expansion-panels v-if="camp().periods().items.length > 1" v-model="openPeriods"
+                        accordion
+                        flat multiple>
       <story-period v-for="period in camp().periods().items"
                     :key="period._meta.self"
-                    :period="period"
-                    :editing="editing" />
+                    :editing="editing"
+                    :period="period" />
     </v-expansion-panels>
+    <div v-else-if="camp().periods().items.length === 1" class="px-4">
+      <story-day v-for="day in camp().periods().items[0].days().items" :key="day._meta.self"
+                 :day="day"
+                 :editing="editing"
+                 class="my-4" />
+    </div>
     <v-card-actions v-if="$vuetify.breakpoint.smAndUp">
       <v-btn
+        :href="previewUrl"
         class="ml-auto"
         color="primary"
-        :href="previewUrl"
         target="_blank">
         <v-icon left>mdi-printer</v-icon>
         {{ $tc('views.camp.print.title') }}
@@ -62,12 +69,14 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
 import ContentCard from '@/components/layout/ContentCard.vue'
 import StoryPeriod from '@/components/story/StoryPeriod.vue'
 import { campRoleMixin } from '@/mixins/campRoleMixin'
+import StoryDay from '@/components/story/StoryDay.vue'
 
 const PRINT_SERVER = window.environment.PRINT_SERVER
 
 export default {
   name: 'Story',
   components: {
+    StoryDay,
     StoryPeriod,
     ContentCard
   },