Implement release notes card

unipept · Aug 9, 2023 · 24f23c5 · 24f23c5
1 parent a18d739
commit 24f23c5
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/src/renderer/components/pages/HomePage.vue b/src/renderer/components/pages/HomePage.vue
@@ -39,7 +39,7 @@
                     </div>
                 </div>
                 <!-- Release notes (display changes compared previous version of the application) -->
-                <!-- <release-notes-card class="mt-12 mx-12"></release-notes-card> -->
+                <release-notes-card class="mt-12 mx-12" />
             </v-col>
         </v-row>
     </v-container>
@@ -51,6 +51,7 @@ import { ref } from 'vue';
 import GithubCommunicator from "@renderer/logic/communication/github/GithubCommunicator";
 import ComparatorUtils from "@renderer/logic/utils/ComparatorUtils";
 import UpdateNotesDialog from "@renderer/components/releases/UpdateNotesDialog.vue";
+import ReleaseNotesCard from "@renderer/components/releases/ReleaseNotesCard.vue";
 
 const appVersion = ref(await window.api.app.versions.app);
 const chromeVersion = ref(await window.api.app.versions.chrome);

diff --git a/src/renderer/components/releases/ReleaseNotesCard.vue b/src/renderer/components/releases/ReleaseNotesCard.vue
@@ -0,0 +1,60 @@
+<template>
+    <v-card>
+        <v-card-title>
+            Unipept Desktop v{{ appVersion }} - release notes
+        </v-card-title>
+        <v-card-text>
+            <div
+                v-if="isLoading"
+                class="text-center"
+            >
+                <v-progress-circular
+                    indeterminate
+                    color="primary"
+                />
+            </div>
+            <div v-else>
+                <div v-html="releaseContent" />
+                <div class="mt-4">
+                    Check our
+                    <a @click="openInBrowser(`https://github.com/unipept/unipept-desktop/releases/tag/v${appVersion}`)">
+                        release page
+                    </a> on GitHub for more information.
+                </div>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { openInBrowser } from "@renderer/logic/utils/BrowserUtils";
+import { marked } from "marked";
+import GitHubCommunicator from "@renderer/logic/communication/github/GithubCommunicator";
+
+const isLoading = ref(true);
+
+const releaseContent = ref("");
+const appVersion = ref("");
+
+const retrieveReleaseNotes = async function() {
+    isLoading.value = true;
+    try {
+        appVersion.value = await window.api.app.versions.app;
+
+        const communicator = new GitHubCommunicator();
+        const releaseNotes = await communicator.getReleaseNotes(appVersion.value);
+        releaseContent.value = marked(releaseNotes);
+    } catch (e) {
+        releaseContent.value = "Could not load release notes. Make sure you're connected to the internet."
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+retrieveReleaseNotes();
+</script>
+
+<style scoped>
+
+</style>