From 40d370bedc1dea3450c4e4202a929850b8a00a6e Mon Sep 17 00:00:00 2001
From: vr10t <ai6@tuta.io>
Date: Sun, 19 Feb 2023 14:55:36 +0000
Subject: [PATCH] make import and export modal components

---
 src/components/ExportHistoryModal.vue         | 142 +++++++++++++++++
 src/components/HistoryPage.vue                | 150 ++----------------
 ...HistoryPage.vue => ImportHistoryModal.vue} |  60 +++----
 src/router/router.js                          |   5 -
 4 files changed, 189 insertions(+), 168 deletions(-)
 create mode 100644 src/components/ExportHistoryModal.vue
 rename src/components/{ImportHistoryPage.vue => ImportHistoryModal.vue} (64%)

diff --git a/src/components/ExportHistoryModal.vue b/src/components/ExportHistoryModal.vue
new file mode 100644
index 00000000..30746cda
--- /dev/null
+++ b/src/components/ExportHistoryModal.vue
@@ -0,0 +1,142 @@
+<template>
+    <ModalComponent>
+        <div class="min-w-max flex flex-col">
+            <h2 class="text-xl font-bold mb-4 text-center">Export History</h2>
+            <form>
+                <div>
+                    <label class="mr-2" for="export-format">Export as:</label>
+                    <select class="select" id="export-format" v-model="exportAs">
+                        <option
+                            v-for="option in exportOptions"
+                            :key="option"
+                            :value="option"
+                            v-text="formatField(option)"
+                        />
+                    </select>
+                </div>
+                <div v-if="exportAs === 'history'">
+                    <label v-for="field in fields" :key="field" class="flex gap-2 items-center">
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            :value="field"
+                            v-model="selectedFields"
+                            :disabled="field === 'videoId'"
+                        />
+                        <span v-text="formatField(field)" />
+                    </label>
+                </div>
+            </form>
+            <button class="btn mt-4" @click="handleExport">Export</button>
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    components: {
+        ModalComponent,
+    },
+    data() {
+        return {
+            exportOptions: ["playlist", "history"],
+            exportAs: "playlist",
+            fields: [
+                "videoId",
+                "title",
+                "uploaderName",
+                "uploaderUrl",
+                "duration",
+                "thumbnail",
+                "watchedAt",
+                "currentTime",
+            ],
+            selectedFields: [
+                "videoId",
+                "title",
+                "uploaderName",
+                "uploaderUrl",
+                "duration",
+                "thumbnail",
+                "watchedAt",
+                "currentTime",
+            ],
+        };
+    },
+    methods: {
+        async fetchAllVideos() {
+            if (window.db) {
+                var tx = window.db.transaction("watch_history", "readonly");
+                var store = tx.objectStore("watch_history");
+                const request = store.getAll();
+                return new Promise((resolve, reject) => {
+                    (request.onsuccess = e => {
+                        const videos = e.target.result;
+                        this.exportVideos = videos;
+                        resolve();
+                    }),
+                        (request.onerror = e => {
+                            reject(e);
+                        });
+                });
+            }
+        },
+        handleExport() {
+            if (this.exportAs === "playlist") {
+                this.fetchAllVideos()
+                    .then(() => {
+                        this.exportAsPlaylist();
+                    })
+                    .catch(e => {
+                        console.error(e);
+                    });
+            } else if (this.exportAs === "history") {
+                this.fetchAllVideos()
+                    .then(() => {
+                        this.exportAsHistory();
+                    })
+                    .catch(e => {
+                        console.error(e);
+                    });
+            }
+        },
+        exportAsPlaylist() {
+            const dateStr = new Date().toISOString().split(".")[0];
+            let json = {
+                format: "Piped",
+                version: 1,
+                playlists: [
+                    {
+                        name: `Piped History ${dateStr}`,
+                        type: "history",
+                        visibility: "private",
+                        videos: this.exportVideos.map(video => "https://youtube.com" + video.url),
+                    },
+                ],
+            };
+            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
+        },
+        exportAsHistory() {
+            const dateStr = new Date().toISOString().split(".")[0];
+            let json = {
+                format: "Piped",
+                version: 1,
+                watchHistory: this.exportVideos.map(video => {
+                    let obj = {};
+                    this.selectedFields.forEach(field => {
+                        obj[field] = video[field];
+                    });
+                    return obj;
+                }),
+            };
+            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
+        },
+        formatField(field) {
+            // camelCase to Title Case
+            return field.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase());
+        },
+    },
+};
+</script>
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 5b827d8a..89095abc 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -1,16 +1,16 @@
 <template>
-    <h1 class="font-bold text-center" v-t="'titles.history'" />
+    <h1 class="font-bold text-center my-2" v-t="'titles.history'" />
 
-    <div class="flex">
-        <div>
-            <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
+    <div class="flex flex-col gap-2 items-center lg:flex-row">
+        <div class="flex flex-wrap gap-2 justify-center">
+            <button class="btn w-54" v-t="'actions.clear_history'" @click="clearHistory" />
 
-            <button class="btn mx-3" v-t="'actions.export_to_json'" @click="showModal = !showModal" />
+            <button class="btn w-54" v-t="'actions.export_to_json'" @click="showExportModal = !showExportModal" />
 
-            <button class="btn" v-t="'actions.import_from_json'" @click="$router.push('/history/import')" />
+            <button class="btn w-54" v-t="'actions.import_from_json'" @click="showImportModal = !showImportModal" />
         </div>
 
-        <div class="right-1">
+        <div class="lg:right-1">
             <SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
         </div>
     </div>
@@ -22,77 +22,28 @@
     </div>
 
     <br />
-    <ModalComponent v-if="showModal" @close="showModal = !showModal">
-        <div class="min-w-max flex flex-col">
-            <h2 class="text-xl font-bold mb-4">Export History</h2>
-            <form>
-                <div>
-                    <label class="mr-2" for="export-format">Export as:</label>
-                    <select class="select" id="export-format" v-model="exportAs">
-                        <option
-                            v-for="option in exportOptions"
-                            :key="option"
-                            :value="option"
-                            v-text="formatField(option)"
-                        />
-                    </select>
-                </div>
-                <div v-if="exportAs === 'history'">
-                    <label v-for="field in fields" :key="field" class="flex gap-2 items-center">
-                        <input
-                            class="checkbox"
-                            type="checkbox"
-                            :value="field"
-                            v-model="selectedFields"
-                            :disabled="field === 'videoId'"
-                        />
-                        <span v-text="formatField(field)" />
-                    </label>
-                </div>
-            </form>
-            <button class="btn mt-4" @click="handleExport">Export</button>
-        </div>
-    </ModalComponent>
+    <ExportHistoryModal v-if="showExportModal" @close="showExportModal = false" />
+    <ImportHistoryModal v-if="showImportModal" @close="showImportModal = false" />
 </template>
 
 <script>
 import VideoItem from "./VideoItem.vue";
 import SortingSelector from "./SortingSelector.vue";
-import ModalComponent from "./ModalComponent.vue";
+import ExportHistoryModal from "./ExportHistoryModal.vue";
+import ImportHistoryModal from "./ImportHistoryModal.vue";
 
 export default {
     components: {
         VideoItem,
         SortingSelector,
-        ModalComponent,
+        ExportHistoryModal,
+        ImportHistoryModal,
     },
     data() {
         return {
             videos: [],
-            exportVideos: [],
-            showModal: false,
-            exportOptions: ["playlist", "history"],
-            exportAs: "playlist",
-            fields: [
-                "videoId",
-                "title",
-                "uploaderName",
-                "uploaderUrl",
-                "duration",
-                "thumbnail",
-                "watchedAt",
-                "currentTime",
-            ],
-            selectedFields: [
-                "videoId",
-                "title",
-                "uploaderName",
-                "uploaderUrl",
-                "duration",
-                "thumbnail",
-                "watchedAt",
-                "currentTime",
-            ],
+            showExportModal: false,
+            showImportModal: false,
         };
     },
     mounted() {
@@ -132,77 +83,6 @@ export default {
             }
             this.videos = [];
         },
-        async fetchAllVideos() {
-            if (window.db) {
-                var tx = window.db.transaction("watch_history", "readonly");
-                var store = tx.objectStore("watch_history");
-                const request = store.getAll();
-                return new Promise((resolve, reject) => {
-                    (request.onsuccess = e => {
-                        const videos = e.target.result;
-                        this.exportVideos = videos;
-                        resolve();
-                    }),
-                        (request.onerror = e => {
-                            reject(e);
-                        });
-                });
-            }
-        },
-        handleExport() {
-            if (this.exportAs === "playlist") {
-                this.fetchAllVideos()
-                    .then(() => {
-                        this.exportAsPlaylist();
-                    })
-                    .catch(e => {
-                        console.error(e);
-                    });
-            } else if (this.exportAs === "history") {
-                this.fetchAllVideos()
-                    .then(() => {
-                        this.exportAsHistory();
-                    })
-                    .catch(e => {
-                        console.error(e);
-                    });
-            }
-        },
-        exportAsPlaylist() {
-            const dateStr = new Date().toISOString().split(".")[0];
-            let json = {
-                format: "Piped",
-                version: 1,
-                playlists: [
-                    {
-                        name: `Piped History ${dateStr}`,
-                        type: "history",
-                        visibility: "private",
-                        videos: this.exportVideos.map(video => "https://youtube.com" + video.url),
-                    },
-                ],
-            };
-            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
-        },
-        exportAsHistory() {
-            const dateStr = new Date().toISOString().split(".")[0];
-            let json = {
-                format: "Piped",
-                version: 1,
-                watchHistory: this.exportVideos.map(video => {
-                    let obj = {};
-                    this.selectedFields.forEach(field => {
-                        obj[field] = video[field];
-                    });
-                    return obj;
-                }),
-            };
-            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
-        },
-        formatField(field) {
-            // camelCase to Title Case
-            return field.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase());
-        },
     },
 };
 </script>
diff --git a/src/components/ImportHistoryPage.vue b/src/components/ImportHistoryModal.vue
similarity index 64%
rename from src/components/ImportHistoryPage.vue
rename to src/components/ImportHistoryModal.vue
index 10016468..d2ce0a52 100644
--- a/src/components/ImportHistoryPage.vue
+++ b/src/components/ImportHistoryModal.vue
@@ -1,31 +1,38 @@
 <template>
-    <div class="text-center min-h-screen">
-        <h1 class="text-center my-2">Import History</h1>
-        <form>
-            <br />
-            <div>
-                <input ref="fileSelector" type="file" @change="fileChange" />
-            </div>
-            <div>
-                <strong v-text="`Found ${itemsLength} items`" />
-            </div>
-            <div>
-                <strong>Override: <input v-model="override" class="checkbox" type="checkbox" /></strong>
-            </div>
-            <br />
-            <div>
-                <progress :value="index" :max="itemsLength" />
-                <div v-text="`Success: ${success} Error: ${error} Skipped: ${skipped}`" />
-            </div>
-            <br />
-            <div>
-                <a class="btn w-auto" @click="handleImport">Import</a>
-            </div>
-        </form>
-    </div>
+    <ModalComponent>
+        <div class="text-center">
+            <h2 class="text-xl font-bold mb-4 text-center">Import History</h2>
+            <form>
+                <br />
+                <div>
+                    <input class="btn ml-2 mb-2" ref="fileSelector" type="file" @change="fileChange" />
+                </div>
+                <div>
+                    <strong v-text="`Found ${itemsLength} items`" />
+                </div>
+                <div>
+                    <strong class="flex gap-2 justify-center items-center">
+                        Override: <input v-model="override" class="checkbox" type="checkbox" />
+                    </strong>
+                </div>
+                <br />
+                <div>
+                    <progress :value="index" :max="itemsLength" />
+                    <div v-text="`Success: ${success} Error: ${error} Skipped: ${skipped}`" />
+                </div>
+                <br />
+                <div>
+                    <a class="btn w-auto" @click="handleImport">Import</a>
+                </div>
+            </form>
+        </div>
+    </ModalComponent>
 </template>
 <script>
+import ModalComponent from "./ModalComponent.vue";
+
 export default {
+    components: { ModalComponent },
     data() {
         return {
             items: [],
@@ -41,9 +48,6 @@ export default {
             return this.items.length;
         },
     },
-    activated() {
-        document.title = "Import History - Piped";
-    },
     methods: {
         fileChange() {
             const file = this.$refs.fileSelector.files[0];
@@ -75,7 +79,7 @@ export default {
                             }
                         }
                         try {
-                            const request = store.put(JSON.parse(JSON.stringify(item)));
+                            const request = store.put(JSON.parse(JSON.stringify(item))); // prevent "Symbol could not be cloned." error
                             request.onsuccess = () => {
                                 this.index++;
                                 this.success++;
diff --git a/src/router/router.js b/src/router/router.js
index c1bf8e4a..29bb7c61 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -75,11 +75,6 @@ const routes = [
         name: "Watch History",
         component: () => import("../components/HistoryPage.vue"),
     },
-    {
-        path: "/history/import",
-        name: "Import History",
-        component: () => import("../components/ImportHistoryPage.vue"),
-    },
     {
         path: "/playlists",
         name: "Playlists",