Remember open week

ajuvonen · Jan 24, 2024 · bfd2df2 · bfd2df2
1 parent 07734ad
commit bfd2df2
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap b/src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ScheduleView > mounts 1`] = `
-"<div class="v-card v-theme--light v-card--density-default v-card--rounded v-card--variant-elevated mb-4" style="background-color: rgba(255, 255, 255, 0.9);">
+"<div data-v-eb553fec="" class="v-card v-theme--light v-card--density-default v-card--rounded v-card--variant-elevated mb-4" style="background-color: rgba(255, 255, 255, 0.9);">
   <!---->
   <div class="v-card__loader">
     <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -21,11 +21,15 @@ exports[`ScheduleView > mounts 1`] = `
   <div class="v-card-title d-print-none">
     <h1 class="text-h4">Edit Schedule</h1>
   </div>
-  <div class="v-card-text"></div>
-  <div class="v-card-actions"><button type="button" class="v-btn v-btn--slim v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" data-test-id="schedule-add-week-button"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-plus mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Add Week</span>
+  <div class="v-card-text">
+    <div data-v-eb553fec="" class="v-expansion-panels v-theme--light v-expansion-panels--variant-accordion">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="v-card-actions"><button data-v-eb553fec="" type="button" class="v-btn v-btn--slim v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" data-test-id="schedule-add-week-button"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-plus mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Add Week</span>
       <!---->
       <!---->
-    </button><button type="button" class="v-btn v-btn--slim v-theme--light text-error v-btn--density-default v-btn--size-default v-btn--variant-outlined" data-test-id="schedule-reset-button"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-trash-can-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Reset</span>
+    </button><button data-v-eb553fec="" type="button" class="v-btn v-btn--slim v-theme--light text-error v-btn--density-default v-btn--size-default v-btn--variant-outlined" data-test-id="schedule-reset-button"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-trash-can-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Reset</span>
       <!---->
       <!---->
     </button></div>

diff --git a/src/stores/appState.ts b/src/stores/appState.ts
@@ -19,6 +19,8 @@ export const useAppStateStore = defineStore('appState', () => {
 
   const trainingData = ref({} as Training);
 
+  const openWeek = ref<number | null>(0);
+
   // Actions
   const openConfirmDialog = (text: string, action: () => void) => {
     confirmText.value = text;
@@ -56,12 +58,17 @@ export const useAppStateStore = defineStore('appState', () => {
   const $reset = () => {
     trainingDialogOpen.value = false;
     trainingData.value = {} as Training;
+    confirmDialogOpen.value = false;
+    confirmText.value = '';
+    confirmAction.value = () => {};
+    openWeek.value = null;
   };
 
   return {
     confirmDialogOpen,
     confirmText,
     confirmAction,
+    openWeek,
     trainingDialogOpen,
     trainingData,
     openConfirmDialog,

diff --git a/src/views/ScheduleView.vue b/src/views/ScheduleView.vue
@@ -2,6 +2,7 @@
 import {storeToRefs} from 'pinia';
 import DraggableList from 'vuedraggable';
 import {useScheduleStore} from '@/stores/schedule';
+import {useAppStateStore} from '@/stores/appState';
 import useReset from '@/hooks/reset';
 import WeekCalendar from '@/components/WeekCalendar.vue';
 import EditTrainingDialog from '@/components/EditTrainingDialog.vue';
@@ -11,28 +12,36 @@ const scheduleStore = useScheduleStore();
 const {weeks} = storeToRefs(scheduleStore);
 const {addWeek} = scheduleStore;
 
+const {openWeek} = storeToRefs(useAppStateStore());
+
 const reset = useReset();
+
+const addAndOpenWeek = () => {
+  addWeek();
+  openWeek.value = weeks.value.length - 1;
+};
 </script>
 
 <template>
   <BaseView :title="$t('schedule.title')">
     <template #content>
-      <draggable-list
-        v-if="weeks.length"
-        v-model="weeks"
-        :componentData="{variant: 'accordion', color: 'transparent'}"
-        tag="v-expansion-panels"
-        item-key="id"
-        handle=".week-calendar__drag-handle"
-        data-test-id="schedule"
-      >
-        <template #item="{element, index}">
-          <week-calendar :week="element" :weekIndex="index" :data-test-id="`week-${index}`" />
-        </template>
-      </draggable-list>
+      <v-expansion-panels v-model="openWeek" variant="accordion" color="transparent">
+        <draggable-list
+          v-if="weeks.length"
+          v-model="weeks"
+          item-key="id"
+          handle=".week-calendar__drag-handle"
+          class="schedule__draggable-list"
+          data-test-id="schedule"
+        >
+          <template #item="{element, index}">
+            <week-calendar :week="element" :weekIndex="index" :data-test-id="`week-${index}`" />
+          </template>
+        </draggable-list>
+      </v-expansion-panels>
     </template>
     <template #actions>
-      <v-btn prepend-icon="mdi-plus" data-test-id="schedule-add-week-button" @click="addWeek">{{
+      <v-btn prepend-icon="mdi-plus" data-test-id="schedule-add-week-button" @click="addAndOpenWeek">{{
         $t('schedule.addWeek')
       }}</v-btn>
       <v-btn
@@ -47,3 +56,21 @@ const reset = useReset();
   </BaseView>
   <edit-training-dialog />
 </template>
+<style lang="scss" scoped>
+.schedule__draggable-list {
+  width: 100%;
+}
+
+.v-expansion-panel {
+  margin-top: 0.1rem;
+  border-radius: 0;
+  &:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+}
+</style>