942eb7c3d8
This is a major breaking change that moves away from having the entire app configuration in external TOML files to settings being in the database with a UI to update them dynamically. The app loads all config into memory (app settings, SMTP conf) on boot. "Hot" replacing them is complex and it's a fair tradeoff to instead just restart the application as it is practically instant. A new `settings` table stores arbitrary string keys with a JSONB value field which happens to support arbitrary types. After every settings update, the app gracefully releases all resources (HTTP server, DB pool, SMTP pool etc.) and restarts itself, occupying the same PID. If there are any running campaigns, the auto-restart doesn't happen and the user is prompted to invoke it manually with a one-click button once all running campaigns have been paused. |
||
---|---|---|
.. | ||
fontello | ||
public | ||
src | ||
.browserslistrc | ||
.editorconfig | ||
.eslintrc.js | ||
.gitignore | ||
README.md | ||
babel.config.js | ||
package.json | ||
vue.config.js | ||
yarn.lock |
README.md
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
main.js
is where Buefy is injected globally into Vue. In addition two controllers, $api
(collection of API calls from api/index.js
), $utils
(util functions from util.js
), $serverConfig
(loaded form /api/config.js) are also attached globaly to Vue. They are accessible within Vue as this.$api
and this.$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.
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
Custom
section) - Download the Fontello pack and from the ZIP:
- Copy and overwrite
config.json
tofrontend/fontello
- Copy
fontello.woff2
tofrontend/src/assets/icons
. - Open
css/fontello.css
and copy the individual icon definitions and overwrite the ones infrontend/src/assets/icons/fontello.css
- Copy and overwrite