From 217adf185dcc8f73a40b2d4f4f4799f9750755db Mon Sep 17 00:00:00 2001 From: Kailash Nadh Date: Sun, 5 Jul 2020 14:33:17 +0530 Subject: [PATCH] Add frontend README --- frontend/README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/README.md b/frontend/README.md index bf32538..1ca20fe 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,6 +1,20 @@ # listmonk frontend (Vue + Buefy) -It's best if the `listmonk/frontend` editor is opened in an IDE as a separate project where the frontend directory is the rool of the project. +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`) and `$utils` (util functions from `util.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