Add possibility to copy and move to new week

cypress/e2e/schedule.cy.ts

@@ -17,6 +17,7 @@ describe('Schedule tests', () => {
     cy.getByTestId('week-1-day-1').find('.training-card').should('exist');
     cy.getByTestId('week-0').click();
     cy.getByTestId('week-0-delete-button').click();
+    cy.getByTestId('week-0').click();
     cy.getByTestId('week-0-delete-button').click();
     cy.getByTestId('confirm-dialog-confirm-button').click();
     cy.getByTestId('schedule').should('not.exist');
@@ -25,17 +26,25 @@ describe('Schedule tests', () => {
   it('copies and moves trainings', () => {
     cy.addTraining();
     cy.get('.training-card__action-button').click();
-    cy.get('.training-card__copy-button').click();
-    cy.get('.training-card__copy-button + .v-list-group__items').click();
-    cy.get('.training-card__copy-button + .v-list-group__items .v-list-item').eq(2).click();
-    cy.get('.training-card__move-button').click();
-    cy.get('.training-card__move-button + .v-list-group__items').click();
-    cy.get('.training-card__move-button + .v-list-group__items .v-list-item').eq(3).click();
+    cy.get('.training-card-actions__copy').contains('Copy').click();
+    cy.get('.training-card-actions__copy').contains('Week 1').click();
+    cy.get('.training-card-actions__copy').contains('Tuesday').click();
+    cy.get('.training-card-actions__move').contains('Move').click();
+    cy.get('.training-card-actions__move').contains('Week 1').click();
+    cy.get('.training-card-actions__move').contains('Wednesday').click();
     cy.get('.training-card').should('not.exist');
     cy.getByTestId('week-0-calendar-tab-1').click();
     cy.get('.training-card').should('exist');
     cy.getByTestId('week-0-calendar-tab-2').click();
     cy.get('.training-card').should('exist');
+    cy.get('.training-card__action-button:visible').click();
+    cy.get('.training-card-actions__copy').contains('Copy').click();
+    cy.get('.training-card-actions__copy').contains('New Week').click();
+    cy.get('.training-card-actions__copy .v-list-item:visible').contains('Monday').click();
+    cy.getByTestId('week-1').should('exist');
+    cy.getByTestId('schedule').contains('Week 2').click({force: true});
+    cy.getByTestId('week-1-calendar-tab-0').click();
+    cy.getByTestId('week-1-day-0').find('.training-card').should('exist');
   });
 
   it('resets schedule', () => {
@@ -51,7 +60,7 @@ describe('Schedule tests', () => {
     cy.getByTestId('week-0').should('not.exist');
   });
 
-  it.only('completes and rates trainings', () => {
+  it('completes and rates trainings', () => {
     cy.addTraining();
     cy.get('.training-card__action-button').click();
     cy.get('.training-card__complete-button').click();

cypress/support/commands.ts

@@ -20,6 +20,7 @@ Cypress.Commands.add('addTraining', (addWeek = true) => {
   if (addWeek) {
     cy.toRoute('schedule');
     cy.getByTestId('schedule-add-week-button').click();
+    cy.getByTestId('week-0').click();
   }
   cy.getByTestId('week-0-add-training-button').click();
   cy.getByTestId('edit-training-activity').click();

src/components/TrainingCardActionsMenuGroup.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import {storeToRefs} from 'pinia';
-import type {Training} from '@/types';
+import {v4 as uuid} from 'uuid';
+import type {Training, Week} from '@/types';
 import useWeekDays from '@/hooks/weekdays';
 import {useScheduleStore} from '@/stores/schedule';
+import {computed} from 'vue';
 
 const props = defineProps<{
   action: 'move' | 'copy';
@@ -11,15 +13,30 @@ const props = defineProps<{
 
 const scheduleStore = useScheduleStore();
 const {settings, weeks} = storeToRefs(scheduleStore);
-const {moveTraining, copyTraining} = scheduleStore;
+const {moveTraining, copyTraining, addWeek} = scheduleStore;
 
 const {getDisplayWeekNumber, getShortDate, weekdays} = useWeekDays();
 
 const menuAction = props.action === 'move' ? moveTraining : copyTraining;
 const menuIcon = props.action === 'move' ? '$arrowAll' : '$contentCopy';
+
+const listWeeks = computed<Week[]>(() => [
+  ...weeks.value,
+  {
+    id: '',
+    trainings: [],
+  },
+]);
+
+const doMenuAction = (training: Training, weekId = uuid(), dayIndex: number) => {
+  if (!weeks.value.some(({id}) => id === weekId)) {
+    addWeek(weekId);
+  }
+  menuAction(training, weekId, dayIndex);
+};
 </script>
 <template>
-  <v-list-group>
+  <v-list-group :class="`training-card-actions__${action}`">
     <template v-slot:activator="{props}">
       <v-list-item
         v-bind="props"
@@ -28,19 +45,23 @@ const menuIcon = props.action === 'move' ? '$arrowAll' : '$contentCopy';
         :class="`training-card__${action}-button`"
       />
     </template>
-    <v-list-group v-for="(week, weekIndex) in weeks" :key="week.id">
+    <v-list-group v-for="(week, weekIndex) in listWeeks" :key="week.id">
       <template v-slot:activator="{props}">
         <v-list-item
           v-bind="props"
-          :title="$t('weekCalendar.weekTitle', [getDisplayWeekNumber(weekIndex)])"
+          :title="
+            week.id
+              ? $t('weekCalendar.weekTitle', [getDisplayWeekNumber(weekIndex)])
+              : $t('weekCalendar.newWeek')
+          "
         />
       </template>
       <v-list-item
         v-for="(day, dayIndex) in weekdays"
         :disabled="week.id === training.weekId && dayIndex === training.dayIndex"
         :key="day"
         :title="day"
-        @click="menuAction(training, week.id, dayIndex)"
+        @click="doMenuAction(training, week.id || undefined, dayIndex)"
       >
         <template v-if="settings.startDate" #append>
           <span class="ml-4">{{ getShortDate(weekIndex, dayIndex) }}</span>

src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap

@@ -27,7 +27,7 @@ exports[`ScheduleView > mounts 1`] = `
       </svg></i> Add weeks to your schedule from the bottom of the screen. Then, add trainings to desired days in the week view. You can move, copy, and drag trainings or weeks to reorder them.</div>
   <div data-v-ff4a98e6="" class="v-card-text">
     <div data-v-eb553fec="" class="v-expansion-panels v-theme--customLight v-expansion-panels--variant-accordion">
-      <ul data-v-eb553fec="" class="schedule__draggable-list">
+      <ul data-v-eb553fec="" data-test-id="schedule" class="schedule__draggable-list">
         <li data-v-295747d4="" data-v-eb553fec="" class="v-expansion-panel v-expansion-panel--rounded" data-test-id="week-0">
           <div class="v-expansion-panel__shadow elevation-0"></div>
           <!---->

src/components/__tests__/scheduleStore.spec.ts

@@ -26,6 +26,21 @@ describe('scheduleStore', () => {
     expect(scheduleStore.weeks.length).toBe(2);
   });
 
+  it('adds a week with specific ID', () => {
+    const weekId = uuid();
+    scheduleStore.addWeek(weekId);
+    expect(scheduleStore.weeks.length).toBe(1);
+    expect(scheduleStore.weeks[0].id).toBe(weekId);
+  });
+
+  it('will not add duplicate IDs', () => {
+    const weekId = uuid();
+    scheduleStore.addWeek(weekId);
+    scheduleStore.addWeek(weekId);
+    expect(scheduleStore.weeks.length).toBe(1);
+    expect(scheduleStore.weeks[0].id).toBe(weekId);
+  });
+
   it('gets target week and training', () => {
     const weekId = uuid();
     const trainingId = uuid();

src/i18n/en.json

@@ -169,6 +169,7 @@
     "dayChipTitle": "Total trainings: {0}. Maximum intensity: {1}.",
     "deleteWeek": "Delete Week {0}",
     "deleteWeekConfirm": "This action will also delete trainings for this week. Are you sure?",
+    "newWeek": "New Week",
     "noTrainings": "No trainings",
     "weekChipTitle": "{0} trainings: {1}",
     "weekTitle": "Week {0}"

src/i18n/fi.json

@@ -169,6 +169,7 @@
     "dayChipTitle": "Harjoituksia: {0}. Enimmäisvaativuus: {1}.",
     "deleteWeek": "Poista viikko {0}",
     "deleteWeekConfirm": "Tämä toiminto poistaa myös viikolle kirjatut harjoitukset. Haluatko jatkaa?",
+    "newWeek": "Uusi viikko",
     "noTrainings": "Ei harjoituksia",
     "weekChipTitle": "{0} harjoitus: {1}",
     "weekTitle": "Viikko {0}"

src/stores/schedule.ts

@@ -50,9 +50,12 @@ export const useScheduleStore = defineStore('schedule', () => {
   );
 
   // Actions
-  const addWeek = () => {
+  const addWeek = (newWeekId = uuid()) => {
+    if (weeks.value.some(({id}) => id === newWeekId)) {
+      return;
+    }
     weeks.value.push({
-      id: uuid(),
+      id: newWeekId,
       trainings: [],
     });
   };

src/views/ScheduleView.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import {watch} from 'vue';
 import {storeToRefs} from 'pinia';
 import {UseSortable} from '@vueuse/integrations/useSortable/component';
-import {last} from 'remeda';
 import {useScheduleStore} from '@/stores/schedule';
 import {useAppStateStore} from '@/stores/appState';
 import useReset from '@/hooks/reset';
@@ -17,13 +15,6 @@ const {addWeek} = scheduleStore;
 const {openWeek} = storeToRefs(useAppStateStore());
 
 const reset = useReset();
-
-watch(
-  () => weeks.value.length,
-  () => {
-    openWeek.value = last(weeks.value)?.id;
-  },
-);
 </script>
 
 <template>
@@ -35,6 +26,7 @@ watch(
           v-model="weeks"
           :options="{handle: '.week-calendar__drag-handle'}"
           tag="ul"
+          data-test-id="schedule"
           class="schedule__draggable-list"
         >
           <week-calendar
@@ -48,7 +40,7 @@ watch(
       </v-expansion-panels>
     </template>
     <template #actions>
-      <v-btn prepend-icon="$plus" data-test-id="schedule-add-week-button" @click="addWeek">{{
+      <v-btn prepend-icon="$plus" data-test-id="schedule-add-week-button" @click="addWeek()">{{
         $t('schedule.addWeek')
       }}</v-btn>
       <v-btn