ddf417a16a
Before we used native method from electron for updating and notifying (`checkForUpdatesAndNotify`). It simply checked if there's an update, downloaded it, applied in the background and showed OS notification. The flow is now updated. Updates will be checked, user will be asked to confirm about whether to download and apply the updates, then a UI with progress bar will be shown and user will be asked to restart the application. This commit also moves electron related logic to `/electron/` folder (as there are now multiple files) to keep them structured. Also the electon entrypoint `background.ts` is renamed to `main.ts`. The reason it was named `background.ts` by vue-cli-plugin-electron-builder was to remove the confusion between `main.ts` of Vue itself. However, as they are kept in different folders, but this is not the case for us. Better than `checkForUpdatesAndNotify`. Organizes electron desktop app logic in same folder to allow using multiple files in a structured manner.
3.7 KiB
3.7 KiB
Presentation layer
- Consists of Vue.js components and other UI-related code.
- Desktop application is created using Electron.
- Event driven as in components simply listens to events from the state and act accordingly.
Structure
/src/presentation/: Contains all presentation related code including Vue and Electron configurationsbootstrapping/: Registers Vue global objects including components and plugins.components/: Contains all Vue components and their helper classes.Shared/: Contains Vue components and component helpers that are shared across other components.
styles/: Contains shared styles used throughout different components.main.ts: Application entry point that mounts and starts Vue application.electron/: Electron configuration for the desktop application.main.ts: Main process of Electron, started as first thing when app starts.
/public/: Contains static assets that will simply be copied and not go through webpack./vue.config.js: Global Vue CLI configurations loaded by@vue/cli-service/postcss.config.js: PostCSS configurations that are used by Vue CLI internally/babel.config.js: Babel configurations for polyfills used by@vue/cli-plugin-babel
Application data
- Components and should use ApplicationFactory singleton to reach the application domain.
- Application.ts domain model is the stateless application representation including
- available scripts, collections as defined in collection files
- package information as defined in
package.json
- 📖 See Application data | Application layer where application data is parsed and compiled.
Application state
- Stateful components mutate or/and react to state changes in ApplicationContext.
- Stateless components that does not handle state extends
Vue - Stateful components that depends on the collection state such as user selection, search queries and more extends
StatefulVue - The single source of truth is a singleton of the state created and made available to presentation layer by
StatefulVue StatefulVueincludes abstracthandleCollectionStatethat is fired once the component is loaded and also each time collection is changed.- Do not forget to subscribe from events when component is destroyed or if needed collection is changed.
- 💡
eventsin base classStatefulVuemakes lifecycling easier
- 💡
- 📖 See Application state | Application layer where the state is implemented using using state pattern.
Modals
-
Dialog.vue is a shared component that can be used to show modal windows
-
Simply wrap the content inside of its slot and call
.show()method on its reference. -
Example:
<Dialog ref="testDialog"> <div>Hello world</div> </Dialog> <div @click="$refs.testDialog.show()">Show dialog</div>