Add about dialog

mmghv · Jun 9, 2023 · 59ee713 · 59ee713
1 parent 79ea556
commit 59ee713
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 9 deletions.
diff --git a/.github/screenshot.png b/.github/screenshot.png
diff --git a/app.go b/app.go
@@ -3,8 +3,15 @@ package main
 import (
 	"context"
 	"fmt"
+
+	_ "embed"
+
+	"github.com/tidwall/gjson"
 )
 
+//go:embed wails.json
+var wailsJSON string
+
 // App struct
 type App struct {
 	ctx context.Context
@@ -26,6 +33,12 @@ func (a *App) startup(ctx context.Context) {
 	a.ctx = ctx
 }
 
+// Get app version from wails.json file
+func (a *App) GetAppVersion() string {
+	version := gjson.Get(wailsJSON, "info.productVersion")
+	return version.String()
+}
+
 // Greet returns a greeting for the given name
 func (a *App) Greet(name string) string {
 	return fmt.Sprintf("Hello %s, It's show time!", name)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "primeflex": "^3.3.1",
     "primevue": "^3.29.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-router": "^4.2.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-41391e4c668f7e67e1ca13f5caa35a4d
+c30a4857bfd7a5273b3ada5264097de0
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { computed, nextTick, reactive, ref } from 'vue';
 import { FilterMatchMode } from 'primevue/api';
-import { MssqlQuery } from '../wailsjs/go/main/App'
+import { GetAppVersion, MssqlQuery } from '../wailsjs/go/main/App'
+import AppIcon from './assets/images/appicon.png'
 
 const data = reactive({
+  appVersion: '',
   server: '(local)\\SQLEXPRESS',
   dbs: [],
   db: '',
@@ -20,8 +22,11 @@ const data = reactive({
   ready: false,
   ms: 0,
   requestId: 0,
+  about: false,
 })
 
+GetAppVersion().then(v => data.appVersion = v);
+
 const filters = computed({
   get() {
     return data.filtersEnabled ? data.filters : null;
@@ -138,6 +143,15 @@ const copyRows = async () => {
 <template>
   <div class="top" @keydown="(e) => (e.code == 'F5') && execute()">
     <div class="flex">
+      <Button icon="mdi mdi-dots-vertical" iconClass="text-xl" class="mr-2 w-2rem" @click="(e) => $refs.menu.toggle(e)" />
+      <Menu
+        :model="[
+          {label: 'About', icon: 'mdi mdi-information', command: () => data.about = true},
+        ]"
+        popup
+        ref="menu"
+      />
+
       <InputText v-model="data.server" class="flex-1 min-w-0" title="server\instance,port" @change="get_dbs" />
       <InputText v-model="data.username" class="flex-1 min-w-0 max-w-6rem" title="user" @change="get_dbs" />
       <Password v-model="data.password" toggleMask :feedback="false" class="flex-1" inputClass="w-full" title="password" :pt="{input: {onchange: get_dbs}}" />
@@ -202,6 +216,17 @@ const copyRows = async () => {
       </Column>
     </DataTable>
   </div>
+
+  <Dialog v-model:visible="data.about" modal header="About">
+    <div class="text-center">
+      <img :src="AppIcon" />
+      <h2 class="mt-0 m-0">QuickQuery <span class="text-xs">v{{ data.appVersion }}</span></h2>
+      <p>A simple SQL database query tool</p>
+      <p>© 2023 <a href="https://github.com/mmghv">Mohamed Gharib</a></p>
+      <p>Open-source (MIT)</p>
+      <p><a href="https://github.com/mmghv/QuickQuery">View on github <i class="mdi mdi-github text-xl"></i></a></p>
+    </div>
+  </Dialog>
 </template>
 
 <!-- ============================================================================= -->

diff --git a/frontend/src/assets/images/appicon.png b/frontend/src/assets/images/appicon.png
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -1,4 +1,5 @@
-import {createApp} from 'vue'
+import { createApp } from 'vue'
+import { RouterLink } from 'vue-router';
 import PrimeVue from 'primevue/config';
 import App from './App.vue'
 
@@ -11,6 +12,23 @@ import "./assets/primevue/theme.css";
 import "./assets/mdi-icons-v7/css/materialdesignicons.min.css"
 
 const app = createApp(App);
-app.use(PrimeVue, { ripple: true });
+app
+  .use(PrimeVue, { ripple: true })
+  // register router-link so Primevue doesn't complain
+  .component('router-link', RouterLink)
+  .mount('#app')
 
-app.mount('#app')
+// Open all links externally
+document.body.addEventListener('click', function(e) {
+  if (e.target && e.target.nodeName == 'A' && e.target.href) {
+    const url = e.target.href;
+    if (
+      !url.startsWith('http://#') &&
+      !url.startsWith('file://') &&
+      !url.startsWith('http://wails.localhost:')
+    ) {
+      e.preventDefault();
+      window.runtime.BrowserOpenURL(url);
+    }
+  }
+});
diff --git a/frontend/src/style.css b/frontend/src/style.css
@@ -15,3 +15,15 @@ body {
 .p-datatable .p-sortable-column.p-highlight {
     color: #007bff !important;
 }
+
+.p-menu, .p-tieredmenu {
+    padding: 0.3rem 0 !important;
+}
+
+a {
+    color: var(--primary-color);
+}
+
+a:hover {
+    color: #16e1b8;
+}
diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
@@ -2,6 +2,8 @@
 // This file is automatically generated. DO NOT EDIT
 import {main} from '../models';
 
+export function GetAppVersion():Promise<string>;
+
 export function Greet(arg1:string):Promise<string>;
 
 export function MssqlQuery(arg1:string,arg2:string,arg3:string,arg4:string,arg5:string):Promise<main.QueryResult>;
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetAppVersion() {
+  return window['go']['main']['App']['GetAppVersion']();
+}
+
 export function Greet(arg1) {
   return window['go']['main']['App']['Greet'](arg1);
 }

diff --git a/go.mod b/go.mod
@@ -4,6 +4,7 @@ go 1.18
 
 require (
 	github.com/microsoft/go-mssqldb v1.0.0
+	github.com/tidwall/gjson v1.9.3
 	github.com/wailsapp/wails/v2 v2.5.1
 )
 
@@ -24,6 +25,8 @@ require (
 	github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/samber/lo v1.27.1 // indirect
+	github.com/tidwall/match v1.1.1 // indirect
+	github.com/tidwall/pretty v1.2.0 // indirect
 	github.com/tkrajina/go-reflector v0.5.5 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.1 // indirect

diff --git a/go.sum b/go.sum
@@ -69,6 +69,12 @@ github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0 h1:pSgiaMZlXftHpm5L7V1+rVB+AZJydKsMxsQBIJw4PKk=
 github.com/thoas/go-funk v0.9.1 h1:O549iLZqPpTUQ10ykd26sZhzD+rmR5pWhuElrhbC20M=
+github.com/tidwall/gjson v1.9.3 h1:hqzS9wAHMO+KVBBkLxYdkEeeFHuqr95GfClRLKlgK0E=
+github.com/tidwall/gjson v1.9.3/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
+github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
+github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
+github.com/tidwall/pretty v1.2.0 h1:RWIZEg2iJ8/g6fDDYzMpobmaoGh5OLl4AXtGUGPcqCs=
+github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
 github.com/tkrajina/go-reflector v0.5.5 h1:gwoQFNye30Kk7NrExj8zm3zFtrGPqOkzFMLuQZg1DtQ=
 github.com/tkrajina/go-reflector v0.5.5/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=

diff --git a/wails.json b/wails.json
@@ -4,9 +4,9 @@
   "outputfilename": "QuickQuery",
   "info": {
     "companyName": "mmghv",
-    "productVersion": "0.1.0",
+    "productVersion": "0.1.1",
     "copyright": "Copyright © 2023 github.com/mmghv",
-    "comments": "SQL Database query tool, built using Wails (Go & Vue.js)"
+    "comments": "Simple SQL database query tool, built using Wails (Go & Vue.js)"
   },
   "frontend:install": "npm install",
   "frontend:build": "npm run build",
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		41391e4c668f7e67e1ca13f5caa35a4d
		c30a4857bfd7a5273b3ada5264097de0