Added openFile example

src/main/IPCs.ts

@@ -1,4 +1,4 @@
-import { ipcMain, shell, IpcMainEvent } from 'electron'
+import { ipcMain, shell, IpcMainEvent, dialog } from 'electron'
 import Constants from './utils/Constants'
 
 /*
@@ -15,5 +15,21 @@ export default class IPCs {
     ipcMain.on('msgOpenExternalLink', async (event: IpcMainEvent, url: string) => {
       await shell.openExternal(url)
     })
+
+    // Open file
+    ipcMain.handle('msgOpenFile', async (event, filter: string) => {
+      const filters = []
+      if (filter === 'text') {
+        filters.push({ name: 'Text', extensions: ['txt', 'json'] })
+      }
+      if (filter === 'zip') {
+        filters.push({ name: 'Zip', extensions: ['zip'] })
+      }
+      const dialogResult = await dialog.showOpenDialog({
+        properties: ['openFile'],
+        filters
+      })
+      return dialogResult
+    })
   }
 }

src/preload/index.ts

@@ -1,7 +1,7 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron'
 
 // Whitelist of valid channels used for IPC communication (Send message from Renderer to Main)
-const mainAvailChannels: string[] = ['msgRequestGetVersion', 'msgOpenExternalLink']
+const mainAvailChannels: string[] = ['msgRequestGetVersion', 'msgOpenExternalLink', 'msgOpenFile']
 const rendererAvailChannels: string[] = []
 
 contextBridge.exposeInMainWorld('mainApi', {

src/renderer/locales/en.json

@@ -2,7 +2,8 @@
   "desc": {
     "welcome-title": "Hello Vutron! Everything is ready.",
     "welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code.",
-    "second-desc": "You have moved to the second screen! There is nothing here!"
+    "second-desc": "You have moved to the second screen! There is nothing here!",
+    "selected-file": "Selected file: {filePath}."
   },
   "title": {
     "main": "Main Screen",
@@ -14,6 +15,7 @@
     "change-language": "Change Language",
     "increase-count": "Count 1 increment",
     "documentation": "Documentation",
-    "github": "Source Code"
+    "github": "Source Code",
+    "open-file": "Open a text file"
   }
 }

src/renderer/locales/nl.json

@@ -2,7 +2,8 @@
   "desc": {
     "welcome-title": "Hallo Vutron! Alles is klaar.",
     "welcome-desc": "U kunt nu platformonafhankelijke webapplicaties schrijven. Bekijk wijzigingen in realtime en bouw met één opdracht naar meerdere platforms. Als u hiermee nog niet bekend bent, kunt u hulp krijgen via de onderstaande documentatiepagina, of een vooraf geschreven voorbeeldcode uitvoeren.",
-    "second-desc": "U bent naar het tweede scherm gegaan! Hier is niks!"
+    "second-desc": "U bent naar het tweede scherm gegaan! Hier is niks!",
+    "selected-file": "Geselecteerde bestand: {filePath}."
   },
   "title": {
     "main": "Hoofdscherm",
@@ -14,6 +15,7 @@
     "change-language": "Taal wijzigen",
     "increase-count": "Één stap optellen",
     "documentation": "Documentatie",
-    "github": "Broncode"
+    "github": "Broncode",
+    "open-file": "Open een bestand"
   }
 }

src/renderer/screens/MainScreen.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
-import { openExternal } from '@/renderer/utils'
+import { openExternal, openFile } from '@/renderer/utils'
 import { useCounterStore } from '@/renderer/store/counter'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
@@ -12,6 +12,7 @@ const { counter } = storeToRefs(useCounterStore())
 const theme = useTheme()
 const languages = ref(['en'])
 const appVersion = ref('Unknown')
+const selectedFile = ref('')
 
 onMounted((): void => {
   languages.value = availableLocales
@@ -43,6 +44,13 @@ const handleOpenGitHub = async (): Promise<void> => {
 const handleCountIncrease = (): void => {
   counterIncrease(1)
 }
+
+const handleOpenFile = async () => {
+  const dialogResult = await openFile('text')
+  if (!dialogResult.canceled) {
+    selectedFile.value = dialogResult.filePaths[0]
+  }
+}
 </script>
 
 <template>
@@ -63,8 +71,13 @@ const handleCountIncrease = (): void => {
         <p class="my-4">
           App Version: <strong>{{ appVersion }}</strong>
         </p>
+          <p v-if="selectedFile !== ''">{{
+                  $t('desc.selected-file', {
+                    filePath: selectedFile
+                  })
+                }}</p>
         <v-row class="my-4">
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleChangeTheme">
               <v-icon icon="mdi-brightness-6" />
               <v-tooltip activator="parent" location="bottom">
@@ -72,7 +85,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-badge data-testid="counter-badge" color="blue" :content="counter">
               <v-btn data-testid="btn-counter" icon color="primary" @click="handleCountIncrease">
                 <v-icon icon="mdi-plus-circle" />
@@ -82,7 +95,7 @@ const handleCountIncrease = (): void => {
               </v-btn>
             </v-badge>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenDocument">
               <v-icon icon="mdi-file-document" />
               <v-tooltip activator="parent" location="bottom">
@@ -90,7 +103,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenGitHub">
               <v-icon icon="mdi-github" />
               <v-tooltip activator="parent" location="bottom">
@@ -98,9 +111,17 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
+          <v-col>
+            <v-btn icon color="primary" @click="handleOpenFile">
+              <v-icon icon="mdi-folder-open" />
+              <v-tooltip activator="parent" location="bottom">
+                {{ $t('menu.open-file') }}
+              </v-tooltip>
+            </v-btn>
+          </v-col>
           <v-col cols="12">
             <v-select
-              data-testid="select-language"
+data-testid="select-language"
               :model-value="locale"
               density="compact"
               :label="$t('menu.change-language')"

src/renderer/utils/index.ts

@@ -6,6 +6,10 @@ export default class Utils {
   static async openExternal(url: string): Promise<void> {
     await window.mainApi.send('msgOpenExternalLink', url)
   }
+
+  static async openFile(type: string): Promise<any> {
+    return window.mainApi.invoke('msgOpenFile', type)
+  }
 }
 
-export const { getCurrentLocale, openExternal } = Utils
+export const { getCurrentLocale, openExternal, openFile } = Utils