Add Update Available component

package.json

@@ -1,6 +1,6 @@
 {
     "name": "laradumps",
-    "version": "3.0.3",
+    "version": "3.0.2",
     "private": false,
     "description": "LaraDumps a friendly app designed to boost your PHP coding and debugging experience. https://github.com/laradumps/app",
     "author": "Luan Freitas <[email protected]>",
@@ -68,7 +68,7 @@
         "@vitejs/plugin-vue": "5.0.4",
         "@vue/compiler-sfc": "3.4.21",
         "daisyui": "^4.9.0",
-        "electron": "^30.0.0-beta.2",
+        "electron": "^30.0.0-beta.8",
         "electron-builder": "24.13.3",
         "esbuild": "0.20.2",
         "eslint": "^8.57.0",

src/main/main.ts

@@ -28,6 +28,7 @@ let coffeeWindow: BrowserWindow;
 let savedDumpWindow: BrowserWindow;
 let tray: Electron.Tray;
 let isQuiting: boolean;
+let globalUpdateInfo: UpdateInfo;
 
 const minPackageVersion = "2000";
 
@@ -123,54 +124,8 @@ function createWindow(): BrowserWindow {
         autoUpdater.autoDownload = false;
 
         autoUpdater.on("update-available", async (updateInfo: UpdateInfo): Promise<void> => {
-            setTimeout(async (): Promise<void> => {
-                if (process.platform === "darwin") {
-                    const downloadPath: string = app.getPath("downloads");
-
-                    const files: UpdateFileInfo[] = updateInfo.files;
-                    const filteredFiles: UpdateFileInfo = files.filter((file: UpdateFileInfo) => file.url.includes("dmg"))[0];
-                    const fileName: string = filteredFiles.url;
-
-                    const downloadedFile = `${downloadPath}/${fileName}`;
-
-                    if (fs.existsSync(downloadedFile)) {
-                        const result = await dialog.showMessageBox({
-                            type: "info",
-                            title: "LaraDumps update downloaded!",
-                            message: "Download has already been done, do you want to open it?",
-                            buttons: ["Yes", "No"]
-                        });
-
-                        if (result.response === 0) {
-                            await shell.openPath(downloadedFile);
-
-                            isQuiting = true;
-                            app.quit();
-                        }
-                    } else {
-                        await dialog.showMessageBox({
-                            type: "info",
-                            title: "LaraDumps update available!",
-                            message: "There are updates available for LaraDumps App.",
-                            buttons: ["Ok"]
-                        });
-
-                        mainWindow.webContents.send("autoUpdater:update-info", updateInfo);
-                    }
-                } else {
-                    const result = await dialog.showMessageBox({
-                        type: "info",
-                        title: "LaraDumps update available!",
-                        message: "There are updates available for LaraDumps App. Would you like to update it now?",
-                        buttons: ["Yes", "No"]
-                    });
-
-                    if (result.response === 0) {
-                        mainWindow.webContents.send("update-info", updateInfo);
-                        await autoUpdater.downloadUpdate();
-                    }
-                }
-            }, 3000);
+            globalUpdateInfo = updateInfo
+            mainWindow.webContents.send("update-available", updateInfo);
         });
 
         autoUpdater.on("update-downloaded", async (): Promise<void> => {
@@ -470,6 +425,32 @@ ipcMain.on("main:download-complete", async (event, args) => {
     }
 });
 
+ipcMain.on("main:download-update", (): void => {
+    setTimeout(async (): Promise<void> => {
+        if (process.platform === "darwin") {
+            const downloadPath: string = app.getPath("downloads");
+
+            const files: UpdateFileInfo[] = globalUpdateInfo.files;
+            const filteredFiles: UpdateFileInfo = files.filter((file: UpdateFileInfo) => file.url.includes("dmg"))[0];
+            const fileName: string = filteredFiles.url;
+
+            const downloadedFile = `${downloadPath}/${fileName}`;
+
+            if (fs.existsSync(downloadedFile)) {
+                await shell.openPath(downloadedFile);
+
+                isQuiting = true;
+                app.quit();
+            } else {
+                mainWindow.webContents.send("autoUpdater:update-info", globalUpdateInfo);
+            }
+        } else {
+            mainWindow.webContents.send("update-info", globalUpdateInfo);
+            await autoUpdater.downloadUpdate();
+        }
+    }, 3000);
+});
+
 ipcMain.on("native-theme", () => {
     if (nativeTheme.shouldUseDarkColors) {
         mainWindow.webContents.send("app:theme-dark");

src/renderer/App.vue

@@ -19,11 +19,11 @@ import TheNavBar from "@/components/TheNavBar.vue";
 import AppSetting from "@/components/AppSetting.vue";
 import DumpItem from "@/components/DumpItem.vue";
 import WelcomePage from "@/components/WelcomePage.vue";
-import AutoUpdater from "@/components/AutoUpdater.vue";
 import HeaderQueryRequests from "@/components/HeaderQueryRequests.vue";
 import { useIDEHandlerStore } from "@/store/ide-handler";
 import DumpScreens from "@/components/DumpScreens.vue";
 import QueriesControl from "@/components/QueriesControl.vue";
+import TheAppUpdateInfo from "@/components/TheAppUpdateInfo.vue";
 
 markRaw(ThePackageUpdateInfo);
 markRaw(TheUpdateModalInfo);
@@ -582,6 +582,8 @@ function registerDefaultLocalShortcuts() {
             <div>
                 <ThePackageUpdateInfo />
 
+                <TheAppUpdateInfo />
+
                 <TheNavBar
                     v-if="!settingStore.setting"
                     v-model:in-saved-dumps-window="inSavedDumpsWindow"
@@ -607,8 +609,6 @@ function registerDefaultLocalShortcuts() {
                             <AppSetting :local-shortcut-list="localShortcutList" />
                         </div>
 
-                        <AutoUpdater />
-
                         <!-- screen buttons -->
                         <div
                             v-if="screens.length > 1 && !settingStore.setting"
@@ -658,7 +658,7 @@ function registerDefaultLocalShortcuts() {
                                 <div
                                     class="mb-[60px] w-full"
                                     :class="{
-                                        'flex flex-col-reverse': reorderStore.reverse && screenStore.screen !== 'Queries',
+                                        'flex flex-col-reverse': reorderStore.reverse && screenStore.screen !== 'Queries'
                                     }"
                                     v-if="payload.length > 0 && !settingStore.setting"
                                 >

src/renderer/components/Icons/IconDownload.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-6 h-6"
+    >
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+        />
+    </svg>
+</template>

src/renderer/components/TheAppUpdateInfo.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { UpdateInfo } from "electron-updater";
+import { CompletedInfo, DownloadInfo } from "@/types/Updater";
+import moment from "moment";
+import IconDownload from "@/components/Icons/IconDownload.vue";
+
+const updateInfo = ref({});
+const modal = ref(null);
+const progress = ref(0);
+const loading = ref(false);
+const downloading = ref(false)
+
+const install = () => {
+    downloading.value = true
+    window.ipcRenderer.send("main:download-update");
+};
+
+const progressPercentage = computed(() => Math.round(progress.value * 100));
+
+window.ipcRenderer.on("update-available", (event, arg) => {
+    modal.value.showModal()
+    updateInfo.value = arg;
+    console.log(arg)
+});
+
+window.ipcRenderer.on("autoUpdater:update-info", (event, args: UpdateInfo) => {
+    localStorage.updateAvailable = "true";
+    if (localStorage.autoUpdate === "manual_download" || localStorage.autoUpdate === undefined) {
+        return;
+    }
+
+    const baseURL = "https://github.com/laradumps/app/releases/download/";
+
+    const tag = args.tag;
+
+    const files = args.files;
+    const filteredFiles = files.filter((file: any) => file.url.includes("dmg"));
+    const fileName = filteredFiles[0].url;
+
+    const downloadURL = `${baseURL}${tag}/${fileName}`;
+
+    loading.value = true;
+    window.ipcRenderer.send("main:download-progress-info", downloadURL);
+});
+
+window.ipcRenderer.on("autoUpdater:download-progress", (event, args: DownloadInfo) => {
+    progress.value = args.percent;
+});
+
+window.ipcRenderer.on("autoUpdater:download-complete", (event, args: CompletedInfo) => {
+    window.ipcRenderer.send("main:download-complete", args.path);
+    loading.value = false;
+});
+</script>
+
+<template>
+    <div class="text-sm space-y-3 text-base-content">
+        <dialog
+            ref="modal"
+            class="modal"
+        >
+            <div class="modal-box w-11/12 max-w-5xl">
+                <div class="font-bold text-lg text-center">✨ {{ $t('app_update_info.update_available') }}</div>
+                <div class="mt-2 space-y-3">
+                    <div class="card card-side bg-neutral shadow-xl">
+                        <div class="select-none space-y-3 card-body text-neutral-content/80">
+                            <div class="flex justify-between">
+                                <div>
+                                    <h2 class="card-title">{{ $t('app_update_info.version') }}</h2>
+                                    <p>{{ updateInfo.version }}</p>
+                                </div>
+                                <div>
+                                    <h2 class="card-title">{{ $t('app_update_info.release_date') }}</h2>
+                                    <p>{{ moment(updateInfo.releaseDate).format("MMM Do YY") }}</p>
+                                </div>
+                            </div>
+
+                            <div id="releaseNotes" v-html="updateInfo.releaseNotes"></div>
+                        </div>
+                    </div>
+
+                    <div class="h-[8px]">
+                        <div
+                            v-show="loading"
+                            class="bg-accent progress rounded-full"
+                            :style="{ width: progressPercentage + '%' }"
+                        ></div>
+                    </div>
+                </div>
+                <div class="modal-action">
+                    <form method="dialog">
+                        <button
+                            class="btn btn-secondary"
+                            :disabled="downloading"
+                        >
+                            {{ $t('app_update_info.not_now')}}
+                        </button>
+                    </form>
+                    <button
+                        class="btn btn-primary"
+                        :disabled="downloading"
+                        @click="install"
+                    >
+                        <IconDownload class="w-5" />
+                        {{ $t('app_update_info.install') }}
+                    </button>
+                </div>
+            </div>
+        </dialog>
+    </div>
+</template>
+<style>
+#releaseNotes h2 {
+    font-size: 1.125rem !important;
+    line-height: 1.75rem !important;
+    font-weight: 600 !important;
+}
+
+#releaseNotes ul {
+    list-style: disc !important;
+    margin-left: 36px !important;;
+    padding: 4px;
+}
+</style>