privacy.sexy/docs/presentation.md

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 configurations
  • bootstrapping/: 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.
  • background.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
• StatefulVue includes abstract handleCollectionState that 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.
  • 💡 events in base class StatefulVue makes 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>