2614b072f2
The analytics page showed non-unique counts for views and clicks which was misleading and source of confusion: #522, #561, #571, #676, #680 This commit changes this behaviour to pull unique views and clicks when individual subscriber tracking is turned on in settings, and non-unique counts when it is turned off (as `subscriber_id` in `campaign_views` and `link_clicks` will be NULL, rendering unique queries dysfunctional). This commit changes the stats SQL queries to use string interpolation to either to SELECT `*` or `DISTINCT subscriber_id` on app boot based on the setting in the DB. This involves significant changes to how queries are read and prepared on init. - Refactor `initQueries()` to `readQueries()` and `prepareQueries()`. - Read queries first before preparing. - Load settings from the DB using the read settings query. - Prepare queries next. Use the privacy setting from the DB to apply string interpolation to the analytics queries to pull unique/non-unique before preparing the queries. On the UI: - Show a note on the analytics page about unique/non-unique counts. - Hide the % donut charts on the analytics page in non-unique mode. Closes #676, closes #680 |
||
|---|---|---|
| .. | ||
| cypress | ||
| fontello | ||
| public | ||
| src | ||
| .browserslistrc | ||
| .editorconfig | ||
| .env.sample | ||
| .eslintrc.js | ||
| .gitignore | ||
| babel.config.js | ||
| cypress.json | ||
| package.json | ||
| README.md | ||
| vue.config.js | ||
| yarn.lock | ||
listmonk frontend (Vue + Buefy)
It's best if the listmonk/frontend directory is opened in an IDE as a separate project where the frontend directory is the root of the project.
For developer setup instructions, refer to the main project's README.
Globals
In main.js, Buefy and vue-i18n are attached globally. In addition:
$api(collection of API calls fromapi/index.js)$utils(util functions fromutil.js). They are accessible within Vue asthis.$apiandthis.$utils.
Some constants are defined in constants.js.
APIs and states
The project uses a global vuex state to centrally store the responses to pretty much all APIs (eg: fetch lists, campaigns etc.) except for a few exceptions. These are called models and have been defined in constants.js. The definitions are in store/index.js.
There is a global state loading (eg: loading.campaigns, loading.lists) that indicates whether an API call for that particular "model" is running. This can be used anywhere in the project to show loading spinners for instance. All the API definitions are in api/index.js. It also describes how each API call sets the global loading status alongside storing the API responses.
IMPORTANT: All JSON field names in GET API responses are automatically camel-cased when they're pulled for the sake of consistentcy in the frontend code and for complying with the linter spec in the project (Vue/AirBnB schema). For example, content_type becomes contentType. When sending responses to the backend, however, they should be snake-cased manually. This is overridden for certain calls such as /api/config and /api/settings using the preserveCase: true param in api/index.js.
Icon pack
Buefy by default uses Material Design Icons (MDI) with icon classes prefixed by mdi-.
listmonk uses only a handful of icons from the massive MDI set packed as web font, using Fontello. To add more icons to the set using fontello:
- Go to Fontello and drag and drop
frontend/fontello/config.json(This is the full MDI set converted from TTF to SVG icons to work with Fontello). - Use the UI to search for icons and add them to the selection (add icons from under the
Customsection) - Download the Fontello pack and from the ZIP:
- Copy and overwrite
config.jsontofrontend/fontello - Copy
fontello.woff2tofrontend/src/assets/icons. - Open
css/fontello.cssand copy the individual icon definitions and overwrite the ones infrontend/src/assets/icons/fontello.css
- Copy and overwrite