feat: in-app last release changelog

package.json

@@ -74,6 +74,7 @@
     "electron-updater": "^4.3.5",
     "faker": "^5.3.1",
     "keytar": "^7.3.0",
+    "marked": "^2.0.2",
     "moment": "^2.29.1",
     "mssql": "^6.2.3",
     "mysql2": "^2.2.5",

src/renderer/App.vue

@@ -58,6 +58,7 @@ export default {
    },
    mounted () {
       ipcRenderer.send('check-for-updates');
+      this.checkVersionUpdate();
 
       const Menu = remote.Menu;
 
@@ -100,7 +101,8 @@ export default {
    },
    methods: {
       ...mapActions({
-         showNewConnModal: 'application/showNewConnModal'
+         showNewConnModal: 'application/showNewConnModal',
+         checkVersionUpdate: 'application/checkVersionUpdate'
       })
    }
 };

src/renderer/components/ModalSettings.vue

@@ -37,6 +37,14 @@
                      >
                         <a class="c-hand" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
                      </li>
+                     <li
+                        v-if="updateStatus !== 'disabled'"
+                        class="tab-item"
+                        :class="{'active': selectedTab === 'changelog'}"
+                        @click="selectTab('changelog')"
+                     >
+                        <a class="c-hand">{{ $t('word.changelog') }}</a>
+                     </li>
                      <li
                         class="tab-item"
                         :class="{'active': selectedTab === 'about'}"
@@ -210,6 +218,9 @@
                <div v-if="selectedTab === 'update'" class="panel-body py-4">
                   <ModalSettingsUpdate />
                </div>
+               <div v-if="selectedTab === 'changelog'" class="panel-body py-4">
+                  <ModalSettingsChangelog />
+               </div>
 
                <div v-if="selectedTab === 'about'" class="panel-body py-4">
                   <div class="text-center">
@@ -233,13 +244,15 @@
 import { mapActions, mapGetters } from 'vuex';
 import localesNames from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
+import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
 import BaseTextEditor from '@/components/BaseTextEditor';
 const { shell } = require('electron');
 
 export default {
    name: 'ModalSettings',
    components: {
       ModalSettingsUpdate,
+      ModalSettingsChangelog,
       BaseTextEditor
    },
    data () {
@@ -394,53 +407,58 @@ ORDER BY
 
 <style lang="scss">
 #settings {
-  .modal-body {
-    overflow: hidden;
+  .modal-container {
+    position: absolute;
+    top: 17.5vh;
+
+    .modal-body {
+      overflow: hidden;
 
-    .panel-body {
-      height: calc(70vh - 70px);
-      overflow: auto;
+      .panel-body {
+        min-height: calc(25vh - 70px);
+        overflow: auto;
 
-      .theme-block {
-        position: relative;
-        text-align: center;
+        .theme-block {
+          position: relative;
+          text-align: center;
 
-        &.selected {
-          img {
-            box-shadow: 0 0 0 3px $primary-color;
+          &.selected {
+            img {
+              box-shadow: 0 0 0 3px $primary-color;
+            }
           }
-        }
 
-        &.disabled {
-          cursor: not-allowed;
-          opacity: 0.5;
-        }
+          &.disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
 
-        .theme-name {
-          position: absolute;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          top: 0;
-          height: 100%;
-          width: 100%;
+          .theme-name {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            top: 0;
+            height: 100%;
+            width: 100%;
+          }
         }
       }
-    }
 
-    .badge::after {
-      background: #32b643;
-    }
+      .badge::after {
+        background: #32b643;
+      }
 
-    .badge-update::after {
-      bottom: initial;
-      background: $primary-color;
-    }
+      .badge-update::after {
+        bottom: initial;
+        background: $primary-color;
+      }
 
-    .form-label {
-      display: flex;
-      align-items: center;
+      .form-label {
+        display: flex;
+        align-items: center;
+      }
     }
   }
 }

src/renderer/components/ModalSettingsChangelog.vue

@@ -0,0 +1,78 @@
+<template>
+   <div class="p-relative">
+      <BaseLoader v-if="isLoading" />
+      <div
+         id="changelog"
+         class="container"
+         v-html="changelog"
+      />
+      <div v-if="isError" class="empty">
+         <div class="empty-icon">
+            <i class="mdi mdi-48px mdi-alert-outline" />
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import marked from 'marked';
+import BaseLoader from '@/components/BaseLoader';
+
+export default {
+   name: 'ModalSettingsChangelog',
+   components: {
+      BaseLoader
+   },
+   data () {
+      return {
+         changelog: '',
+         isLoading: true,
+         error: '',
+         isError: false
+      };
+   },
+   created () {
+      this.getChangelog();
+   },
+   methods: {
+      async getChangelog () {
+         try {
+            const apiRes = await fetch('https://api.github.com/repos/Fabio286/antares/releases/latest', {
+               method: 'GET'
+            });
+
+            const { body } = await apiRes.json();
+            const markdown = body.substr(0, body.indexOf('### Download'));
+            const renderer = {
+               link (href, title, text) {
+                  return text;
+               },
+               listitem (text) {
+                  return `<li>${text.replace(/ *\([^)]*\) */g, '')}</li>`;
+               }
+            };
+
+            marked.use({ renderer });
+
+            this.changelog = marked(markdown);
+         }
+         catch (err) {
+            this.error = err.message;
+            this.isError = true;
+         }
+         this.isLoading = false;
+      }
+   }
+};
+</script>
+<style lang="scss">
+#changelog {
+  h3 {
+    font-size: 1rem;
+  }
+
+  li {
+    margin-top: 0;
+  }
+}
+</style>

src/renderer/i18n/en-US.js

@@ -103,7 +103,8 @@ module.exports = {
       processes: 'Processes',
       database: 'Database',
       scratchpad: 'Scratchpad',
-      array: 'Array'
+      array: 'Array',
+      changelog: 'Changelog'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',

src/renderer/store/modules/application.store.js

@@ -1,10 +1,14 @@
 'use strict';
+import Store from 'electron-store';
+const persistentStore = new Store({ name: 'settings' });
+
 export default {
    namespaced: true,
    strict: true,
    state: {
       app_name: 'Antares - SQL Client',
       app_version: process.env.PACKAGE_VERSION || 0,
+      cached_version: persistentStore.get('cached_version', 0),
       is_loading: false,
       is_new_modal: false,
       is_setting_modal: false,
@@ -19,6 +23,7 @@ export default {
       isLoading: state => state.is_loading,
       appName: state => state.app_name,
       appVersion: state => state.app_version,
+      cachedVersion: state => state.cached_version,
       getBaseCompleter: state => state.base_completer,
       getSelectedConnection: state => state.selected_conection,
       isNewModal: state => state.is_new_modal,
@@ -54,6 +59,10 @@ export default {
       HIDE_SCRATCHPAD (state) {
          state.is_scratchpad = false;
       },
+      CHANGE_CACHED_VERSION (state) {
+         state.cached_version = state.app_version;
+         persistentStore.set('cached_version', state.cached_version);
+      },
       CHANGE_UPDATE_STATUS (state, status) {
          state.update_status = status;
       },
@@ -62,6 +71,12 @@ export default {
       }
    },
    actions: {
+      checkVersionUpdate ({ getters, commit, dispatch }) {
+         if (getters.appVersion !== getters.cachedVersion) {
+            dispatch('showSettingModal', 'changelog');
+            commit('CHANGE_CACHED_VERSION');
+         }
+      },
       setLoadingStatus ({ commit }, payload) {
          commit('SET_LOADING_STATUS', payload);
       },