Angehörigendialog

This project started as an analogue questionnaire which was designed to help social workers from Volkshilfe to conduct professional conversations with people who take care of a family member with dementia at home. Our task was to digitise this questionnaire and to redesign the visualisations of the evaluation.

Project structure

data

This folder contains the data which is used to configure the questionnaire and the visualisations.

The sequence of the sections is defined in _inhaltsverzeichnis.yml. Each section corresponds to a .yml-file which contains information about the section and its fields.

The file visualisation.yml defines properties for the visualisations.

mail.yml contains the text for the prefilled mail.

_converter.js is the script which compiles the data and saves it to src/data.

public

Contains static files such as favicons or the index.html.

src

• assets: Assets are resources passed through Webpack
  • fonts: Open Sans Regular (400) + Bold (700)
  • icons: miscellaneous vector graphics for form / visualisations
  • images: images in the assets folder are passed through Webpack as opposed to the public folder
  • styles:
    • _variables.scss defines SCSS variables which are available in the style-tags of the Single File Components. Includes predefined colors and media queries.
    • The styles of base.scss are available on all views.
    • _grid.scss generates grid helper classes which are imported to the base.scss
• components: Vue components used by the views
  • AnField.vue: Wrapper component for the fields-components
  • fields: Components which represent the field types of the questionnaire data
  • note: Notepad and notepad open button
  • ui: UI elements
  • visualisations: Components of the visualisations
• data: receives the compiled data files from the folder data in the build process
• helpers: contains helper functions which are used by various components
• mixins: contains the files field.js and visualisation.js which defines shared logic for the fields and the visualisations respectively
• router: defines the routes which are supplied to vue-router
• store: configures the Vuex store which holds and manages the user inputs and shared variables
• views: views for the routes
• App.vue and main.js: are the entry point for the application
• registerServiceWorker.js: registers service worker for offline usage, comes from vue-cli

Different files

• .editorconfig: defines settings for code editors — official docs
• jsconfig.json: editors might need this file for code navigation (looking at you VSCode)
• vue.config.js: configuration of the Vue Cli Tools
  • webpack: svgs can be imported like vue components using the ?inline suffix
  • css: source maps generation for css gets enabled and _variables.scss will be prepended on each component
  • pwa: as the web app has offline capabilities, name, icon and colors need to be configured here — official docs
• package.json:
  • scripts: See Development lifecycle
  • eslintConfig (+ prettier) — official docs
    • components inside of vue template tags have to be PascalCase
    • props have to be kebab-case
    • objects don't have a trailing comma after the last value
    • single quotes get replaced with double quotes when possible
    • and much more ... (component order, max line length)
  • browserlist: only the last two versions for browsers which have a market share higher then 1% are supported — list of browsers

Development lifecycle

• install the dependencies

  npm install

• starts the project in development mode

  npm run serve

• creates production build in dist folder for deployment

  npm run build

• calls data converter → see data

  npm run data

• calls data converter before each build to ensure correct data

  npm run prebuild
  npm run preserve

• shows / fixes eslint error → see different files

  npm run lint
  npm run lintfix

Continous Deploment

When the develop branch updates, a new build will be automatically generated and deployed from Netlify.

Demo

For previewing the capabilities of the app visit the route /demo. It will prefill the questionnaire. This can be also used for faster development to skip the step of filling out all the fields.

Demo data can be found in src/demo.json and is simply a 1:1 copy from LocalStorage.