From b6a242bc15e5ea79b10b7db45448716ef8433dc4 Mon Sep 17 00:00:00 2001
From: ajuvonen <ajuvonen@hotmail.com>
Date: Tue, 11 Jun 2024 17:00:56 +0300
Subject: [PATCH] Add possibility to copy and move to new week

---
 cypress/e2e/schedule.cy.ts                    | 23 +++++++++----
 cypress/support/commands.ts                   |  1 +
 .../TrainingCardActionsMenuGroup.vue          | 33 +++++++++++++++----
 .../__snapshots__/ScheduleView.spec.ts.snap   |  2 +-
 .../__tests__/scheduleStore.spec.ts           | 15 +++++++++
 src/i18n/en.json                              |  1 +
 src/i18n/fi.json                              |  1 +
 src/stores/schedule.ts                        |  7 ++--
 src/views/ScheduleView.vue                    | 12 ++-----
 9 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/cypress/e2e/schedule.cy.ts b/cypress/e2e/schedule.cy.ts
index 034ad57..eae897c 100644
--- a/cypress/e2e/schedule.cy.ts
+++ b/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();
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index b215bfb..01fb1a8 100644
--- a/cypress/support/commands.ts
+++ b/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();
diff --git a/src/components/TrainingCardActionsMenuGroup.vue b/src/components/TrainingCardActionsMenuGroup.vue
index 253a33b..93659f0 100644
--- a/src/components/TrainingCardActionsMenuGroup.vue
+++ b/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,11 +45,15 @@ 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
@@ -40,7 +61,7 @@ const menuIcon = props.action === 'move' ? '$arrowAll' : '$contentCopy';
         :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>
diff --git a/src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap b/src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap
index 317e38b..49040ed 100644
--- a/src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap
+++ b/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>
           <!---->
diff --git a/src/components/__tests__/scheduleStore.spec.ts b/src/components/__tests__/scheduleStore.spec.ts
index 6c58b63..23c021a 100644
--- a/src/components/__tests__/scheduleStore.spec.ts
+++ b/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();
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0ddc16b..53fe25c 100644
--- a/src/i18n/en.json
+++ b/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}"
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index a6c2072..96e596e 100644
--- a/src/i18n/fi.json
+++ b/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}"
diff --git a/src/stores/schedule.ts b/src/stores/schedule.ts
index 70cc898..39a2360 100644
--- a/src/stores/schedule.ts
+++ b/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: [],
     });
   };
diff --git a/src/views/ScheduleView.vue b/src/views/ScheduleView.vue
index b175901..38fc249 100644
--- a/src/views/ScheduleView.vue
+++ b/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