Refactor of sorting/grouping logic

.vscode/settings.json

@@ -124,6 +124,7 @@
     "slovenčina",
     "slovenščina",
     "snnw",
+    "sortablejs",
     "sqlite",
     "suomi",
     "Svenska",

README.md

@@ -61,7 +61,6 @@ In addition, M³ itself has been translated into several languages by many volun
 <!-- prettier-ignore-start -->
 <!-- CROWDIN-TRANSLATIONS-PROGRESS-ACTION-START -->
 
-
 #### Available
 
 <table><tr><td align="center" valign="top"><img width="30px" height="30px" title="Chinese Simplified" alt="Chinese Simplified" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/zh-CN.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Dutch" alt="Dutch" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/nl.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Estonian" alt="Estonian" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/et.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="French" alt="French" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/fr.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Italian" alt="Italian" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/it.png"></div><div align="center" valign="top">100%</td></tr><tr><td align="center" valign="top"><img width="30px" height="30px" title="Portuguese" alt="Portuguese" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/pt-PT.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Portuguese, Brazilian" alt="Portuguese, Brazilian" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/pt-BR.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Russian" alt="Russian" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/ru.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Slovenian" alt="Slovenian" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/sl.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Spanish" alt="Spanish" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/es-ES.png"></div><div align="center" valign="top">100%</td></tr><tr><td align="center" valign="top"><img width="30px" height="30px" title="Swedish" alt="Swedish" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/sv-SE.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="Ukrainian" alt="Ukrainian" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/uk.png"></div><div align="center" valign="top">100%</td><td align="center" valign="top"><img width="30px" height="30px" title="German" alt="German" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/de.png"></div><div align="center" valign="top">99%</td><td align="center" valign="top"><img width="30px" height="30px" title="Hungarian" alt="Hungarian" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/hu.png"></div><div align="center" valign="top">95%</td><td align="center" valign="top"><img width="30px" height="30px" title="Swahili" alt="Swahili" src="https://raw.githubusercontent.com/benjaminjonard/crowdin-translations-progress-action/1.0/flags/sw.png"></div><div align="center" valign="top">95%</td></tr></table>

package.json

@@ -34,7 +34,6 @@
     "test:unit": "vitest --project quasar --project electron"
   },
   "dependencies": {
-    "@formkit/drag-and-drop": "^0.1.6",
     "@numairawan/video-duration": "^1.0.0",
     "@panzoom/panzoom": "^4.5.1",
     "@quasar/extras": "^1.16.15",
@@ -66,6 +65,8 @@
     "quasar": "^2.17.5",
     "sanitize-filename": "^1.6.3",
     "sanitize-html": "^2.14.0",
+    "sortablejs": "^1.15.6",
+    "sortablejs-vue3": "^1.2.11",
     "upath": "^2.0.1",
     "vue": "^3.5.13",
     "vue-i18n": "^11.0.1",
@@ -92,6 +93,8 @@
     "@types/node": "^20.17.10",
     "@types/pretty-bytes": "^5.2.0",
     "@types/sanitize-html": "^2.13.0",
+    "@types/sortablejs": "^1",
+    "@vitest/ui": "^2.0.5",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.2.0",
     "@vue/test-utils": "^2.4.6",

src-electron/preload/fs.ts

@@ -39,7 +39,7 @@ export const pathToFileURL = (path: string) => {
   return url.pathToFileURL(path).href;
 };
 
-export const fileUrlToPath = (fileurl: string) => {
+export const fileUrlToPath = (fileurl?: string) => {
   if (!fileurl) return '';
   if (!isFileUrl(fileurl)) return fileurl;
   return path.normalize(url.fileURLToPath(fileurl));

src/components/dialog/DialogBackgroundMusicPopup.vue

@@ -325,7 +325,7 @@ const getNextSong = async () => {
         const regex = /(_r\d{3,4}P)?\.\w+$/;
         const selectedDaySongs: SongItem[] = selectedDayMedia
           .map((d) =>
-            path.basename(fileUrlToPath(d.fileUrl.replace(regex, ''))),
+            path.basename(fileUrlToPath(d.fileUrl?.replace(regex, ''))),
           )
           .map((basename) => {
             const index = songList.value.findIndex(

src/components/dialog/DialogCacheClear.vue

@@ -34,7 +34,7 @@ import type { CacheFile } from 'src/types';
 import { storeToRefs } from 'pinia';
 import { updateLookupPeriod } from 'src/helpers/date';
 import { errorCatcher } from 'src/helpers/error-catcher';
-import { getAdditionalMediaPath, removeEmptyDirs } from 'src/utils/fs';
+import { removeEmptyDirs } from 'src/utils/fs';
 import { useCurrentStateStore } from 'stores/current-state';
 import { useJwStore } from 'stores/jw';
 import { ref } from 'vue';
@@ -50,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const jwStore = useJwStore();
-const { additionalMediaMaps, lookupPeriod } = storeToRefs(jwStore);
+const { lookupPeriod } = storeToRefs(jwStore);
 
 const currentState = useCurrentStateStore();
 const { currentCongregation } = storeToRefs(currentState);
@@ -78,24 +78,24 @@ const deleteCacheFiles = async (type = '') => {
     for (const filepath of filepathsToDelete) {
       try {
         window.electronApi.fs.remove(filepath);
-        if (
-          filepath.startsWith(await getAdditionalMediaPath()) ||
-          filepath.startsWith(
-            await getAdditionalMediaPath(
-              currentState.currentSettings?.cacheFolder,
-            ),
-          )
-        ) {
-          const folder = filepath.split('/').pop();
-          const date = folder
-            ? `${folder.slice(0, 4)}/${folder.slice(4, 6)}/${folder.slice(6, 8)}`
-            : '0001/01/01';
-          const cong = currentState.currentCongregation;
-          if (additionalMediaMaps.value[cong]?.[date]) {
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-            delete additionalMediaMaps.value[cong][date];
-          }
-        }
+        // if (
+        //   filepath.startsWith(await getAdditionalMediaPath()) ||
+        //   filepath.startsWith(
+        //     await getAdditionalMediaPath(
+        //       currentState.currentSettings?.cacheFolder,
+        //     ),
+        //   )
+        // ) {
+        //   const folder = filepath.split('/').pop();
+        //   const date = folder
+        //     ? `${folder.slice(0, 4)}/${folder.slice(4, 6)}/${folder.slice(6, 8)}`
+        //     : '0001/01/01';
+        //   const cong = currentState.currentCongregation;
+        //   if (additionalMediaMaps.value[cong]?.[date]) {
+        //     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        //     delete additionalMediaMaps.value[cong][date];
+        //   }
+        // }
       } catch (error) {
         errorCatcher(error);
       }

src/components/header/HeaderCalendar.vue

@@ -4,7 +4,7 @@
   <DialogRemoteVideo v-model="remoteVideoPopup" :section="section" />
   <DialogStudyBible v-model="studyBiblePopup" :section="section" />
   <DialogAudioBible v-model="audioBiblePopup" :section="section" />
-  <q-btn
+  <!-- <q-btn
     v-if="selectedDate"
     color="white-transparent"
     :disable="mediaPlaying || !mediaSortForDay"
@@ -20,7 +20,7 @@
     <q-tooltip v-if="!$q.screen.gt.sm" :delay="1000">
       {{ t('reset-sort-order') }}
     </q-tooltip>
-  </q-btn>
+  </q-btn> -->
   <q-btn
     v-if="selectedDate"
     color="white-transparent"
@@ -125,7 +125,9 @@
             </q-item-section>
           </q-item>
         </template>
-        <template v-if="additionalMediaForDay || hiddenMediaForDay">
+        <template
+          v-if="additionalMediaForSelectedDayExists || hiddenMediaForDay"
+        >
           <q-item-label header>{{ t('dangerZone') }}</q-item-label>
           <q-item
             v-if="hiddenMediaForDay"
@@ -144,7 +146,7 @@
             </q-item-section>
           </q-item>
           <q-item
-            v-if="additionalMediaForDay"
+            v-if="additionalMediaForSelectedDayExists"
             v-close-popup
             clickable
             @click="mediaDeleteAllPending = true"
@@ -246,9 +248,8 @@ import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 const jwStore = useJwStore();
-const { clearCurrentDayAdditionalMedia, resetSort, showCurrentDayHiddenMedia } =
-  jwStore;
-const { additionalMediaMaps, lookupPeriod, mediaSort } = storeToRefs(jwStore);
+const { clearCurrentDayAdditionalMedia, showCurrentDayHiddenMedia } = jwStore;
+const { lookupPeriod } = storeToRefs(jwStore);
 
 const { dateLocale } = useLocale();
 
@@ -259,7 +260,6 @@ const {
   mediaPlaying,
   online,
   selectedDate,
-  watchFolderMedia,
 } = storeToRefs(currentState);
 
 const section = ref<MediaSection | undefined>();
@@ -280,63 +280,54 @@ const openDragAndDropper = () => {
   );
 };
 
-const mediaSortForDay = computed(() => {
-  if (!selectedDate.value || !currentCongregation.value || !mediaSort.value)
-    return false;
+const additionalMediaForDay = computed(
+  () =>
+    lookupPeriod.value?.[currentCongregation.value]
+      ?.find((day) => formatDate(day.date, 'YYYY/MM/DD') === selectedDate.value)
+      ?.dynamicMedia.filter((media) => media.source === 'additional') || [],
+);
+
+const additionalMediaDates = computed(() =>
+  (
+    lookupPeriod.value?.[currentCongregation.value]?.filter((day) =>
+      day.dynamicMedia.some((media) => media.source === 'additional'),
+    ) || []
+  ).map((day) => formatDate(day.date, 'YYYY/MM/DD')),
+);
+
+const additionalMediaForDayExists = (lookupDate: string) => {
   try {
     return (
-      (mediaSort.value?.[currentCongregation.value]?.[selectedDate.value]
+      (lookupPeriod.value?.[currentCongregation.value]
+        ?.find((day) => getDateDiff(lookupDate, day.date, 'days') === 0)
+        ?.dynamicMedia.filter((media) => media.source === 'additional')
         ?.length || 0) > 0
     );
   } catch (error) {
     errorCatcher(error);
     return false;
   }
-});
+};
 
-const additionalMediaForDay = computed(
-  () =>
-    (additionalMediaMaps.value?.[currentCongregation.value]?.[
-      selectedDate.value
-    ]?.length || 0) > 0,
+const additionalMediaForSelectedDayExists = computed(
+  () => (additionalMediaForDay.value?.length || 0) > 0,
 );
-
 const hiddenMediaForDay = computed(() =>
-  (
-    lookupPeriod.value?.[currentCongregation.value]?.find(
-      (day) => formatDate(day.date, 'YYYY/MM/DD') === selectedDate.value,
-    )?.dynamicMedia || []
-  )
-    .concat(
-      additionalMediaMaps.value?.[currentCongregation.value]?.[
-        selectedDate.value
-      ] || [],
-    )
-    .concat(watchFolderMedia.value?.[selectedDate.value] || [])
-    .some((media) => media.hidden),
+  lookupPeriod.value?.[currentCongregation.value]
+    ?.find((day) => formatDate(day.date, 'YYYY/MM/DD') === selectedDate.value)
+    ?.dynamicMedia?.some((media) => media.hidden),
 );
 
 const mediaDeleteAllPending = ref(false);
 
 const getEventDates = () => {
   try {
-    if (
-      !(lookupPeriod.value || additionalMediaMaps.value) ||
-      !currentCongregation.value
-    )
-      return [];
+    if (!lookupPeriod.value || !currentCongregation.value) return [];
     const meetingDates =
       lookupPeriod.value[currentCongregation.value]
         ?.filter((day) => day.meeting)
         .map((day) => formatDate(day.date, 'YYYY/MM/DD')) || [];
-    const additionalMedia =
-      additionalMediaMaps.value[currentCongregation.value];
-    const additionalMediaDates = additionalMedia
-      ? Object.keys(additionalMedia)
-          .filter((day) => (additionalMedia[day]?.length || 0) > 0)
-          .map((day) => formatDate(day, 'YYYY/MM/DD'))
-      : [];
-    return meetingDates.concat(additionalMediaDates);
+    return meetingDates.concat(additionalMediaDates.value);
   } catch (error) {
     errorCatcher(error);
     return [];
@@ -410,15 +401,7 @@ const getEventDayColor = (eventDate: string) => {
     } else if (lookupDate?.complete) {
       return 'primary';
     }
-    const additionalDates =
-      additionalMediaMaps.value[currentCongregation.value];
-    if (additionalDates) {
-      const isAdditional = Object.keys(additionalDates)
-        .filter((day) => (additionalDates[day]?.length || 0) > 0)
-        .map((day) => formatDate(day, 'YYYY/MM/DD'))
-        .includes(eventDate);
-      if (isAdditional) return 'additional';
-    }
+    if (additionalMediaForDayExists(eventDate)) return 'additional';
   } catch (error) {
     errorCatcher(error);
     return 'negative';

src/components/header/HeaderSettings.vue

@@ -97,7 +97,7 @@ const { fs, path, pathToFileURL, readdir } = window.electronApi;
 
 const { t } = useI18n();
 const jwStore = useJwStore();
-const { additionalMediaMaps, lookupPeriod } = storeToRefs(jwStore);
+const { lookupPeriod } = storeToRefs(jwStore);
 
 const currentState = useCurrentStateStore();
 const { invalidSettings } = currentState;
@@ -265,16 +265,7 @@ const lookupPeriodsCollections = Object.values(lookupPeriod.value).flatMap(
     ),
 );
 
-const additionalMediaCollections = Object.values(
-  additionalMediaMaps.value,
-).flatMap((congregationAdditionalMediaMap) =>
-  Object.values(congregationAdditionalMediaMap || {}).flat(),
-);
-
 const mediaFileParentDirectories = new Set([
-  ...additionalMediaCollections.map((media) =>
-    media ? pathToFileURL(getParentDirectory(media.fileUrl)) : '',
-  ),
   ...lookupPeriodsCollections.map((media) =>
     media ? pathToFileURL(getParentDirectory(media.fileUrl)) : '',
   ),