accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-24 15:48:25 +00:00
Code Issues Releases Activity

Merge branch 'master' of https://github.com/frappe/frappejs

Browse Source
This commit is contained in:
Faris Ansari 2018-09-14 23:16:35 +05:30
commit f1600c049f
8 changed files with 70 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
docs/app.md
View File

@ -6,31 +6,41 @@
yarn add frappejs yarn add frappejs
``` ```
FrappeJS comes with built in rollup config for your files FrappeJS comes with an Express Server on the backend, VueJS for the front-end and a CLI to run these things with built-in webpack configs.
## Build ## Config
There are 2 files that get built for the Desk single page application FrappeJS requires a file named `frappe.conf.js` to be present in the root of your directory. Minimum configuration looks like:
- `/dist/js/bundle.js` ```
- `/dist/css/style.css` module.exports = {
staticPath: './static', // uploaded files are served from this directory
distPath: './dist', // bundled assets are built and served here
dev: {
// your client side entry files
entry: {
app: './src/main.js'
},
outputDir: './dist',
assetsPublicPath: '/',
devServerPort: 8000,
env: {
PORT: process.env.PORT || 8000
}
},
node: {
paths: {
main: 'server/index.js' // your server entry file
}
},
electron: {
// wip
}
}
Your `rollup.config.js` should look like:
```js
module.exports = [
require('frappejs/config/rollup.config.style.js'),
require('frappejs/config/rollup.config.app.js')
]
``` ```
## Create a basic app You also need an `index.html` located in the `src` directory. It can look like
### index.html
The UI for the single page app (desk) will be built inside the `body` element, so you just need to have an empty body element, and link your JS bundle in `index.html`
Sample index.html
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -38,93 +48,62 @@ Sample index.html
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/dist/css/style.css" rel="stylesheet"> <title>My Awesome App</title>
</head> </head>
<body> <body>
<script src="/dist/js/socket.io.js"></script> <div id="app"></div>
<script src="js/bundle.js"></script>
</body> </body>
</html> </html>
``` ```
## For development setup
Clone frappejs in the same folder as your app, since you will be developing frappejs on the side. ### Server
### Link frappejs Assuming you have a `server/index.js` file, you can start the frappejs server in just a few lines of code.
```sh
# make frappejs linkable
cd frappejs
yarn link
yarn link frappejs
# link frappejs in all
cd ../myapp
yarn link frappejs
# install libs
yarn
```
### server.js
Create your server file `server.js`
```js ```js
const server = require('frappejs/server'); const server = require('frappejs/server');
server.start({ server.start({
backend: 'sqlite', backend: 'sqlite',
connection_params: {db_path: 'test.db'}, connection_params: {
static: './' db_path: 'test.db'
}
}); });
``` ```
### index.js ### Client
In your client file you will have to import all your controllers and init them. In your client file you will have to initialize `frappe` and `models`.
`frappejs/client` lib will initialize your server and user interface with the Desk. `frappejs/client` lib will initialize your server and user interface with the Desk.
Example starting point for a to-do app: Example starting point for an app:
```js ```js
const client = require('frappejs/client');
const todo = require('frappejs/models/doctype/todo/todo.js');
// start server import frappe from 'frappejs';
client.start({ import io from 'socket.io-client';
server: 'localhost:8000', import HTTPClient from 'frappejs/backends/http';
}).then(() => { import common from 'frappejs/common';
frappe.init_controller('todo', todo); import coreModels from 'frappejs/models';
frappe.desk.add_sidebar_item('Home', '#'); frappe.init();
frappe.desk.add_sidebar_item('New ToDo', '#new/todo'); frappe.registerLibs(common);
frappe.registerModels(coreModels);
const server = 'localhost:8000';
frappe.fetch = window.fetch.bind();
frappe.db = new HTTPClient({ server });
const socket = io.connect(`http://${server}`);
frappe.db.bindSocketClient(socket);
frappe.router.default = '/list/todo';
frappe.router.show(window.location.hash);
});
``` ```
## Start ## Start
To start the app and build webpack simultaneously you can use a `Procfile` To start the server and build webpack simultaneously you can use the cli command
```yml ```bash
server: nodemon server.js ./node_modules/.bin/frappe start
watch: node_modules/.bin/rollup -c --watch
```
You can use any procfile handler like `node-foreman` to start the processes.
```
yarn global add foreman
```
Then
```
nf start
``` ```

2
package.json
View File

@ -29,7 +29,7 @@
"express": "^4.16.2", "express": "^4.16.2",
"feather-icons": "^4.7.3", "feather-icons": "^4.7.3",
"flatpickr": "^4.3.2", "flatpickr": "^4.3.2",
"frappe-datatable": "^1.1.2", "frappe-datatable": "^1.3.1",
"friendly-errors-webpack-plugin": "^1.7.0", "friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1", "jquery": "^3.3.1",

1
server/index.js
View File

@ -41,6 +41,7 @@ module.exports = {
app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(frappe.conf.distPath)); app.use(express.static(frappe.conf.distPath));
app.use('/static', express.static(frappe.conf.staticPath)) app.use('/static', express.static(frappe.conf.staticPath))
app.use(morgan('tiny')); app.use(morgan('tiny'));

BIN
test.db-journal Normal file
View File

Binary file not shown.

1
ui/components/List/List.vue
View File

@ -93,6 +93,7 @@ export default {
}, },
async deleteCheckedItems() { async deleteCheckedItems() {
await frappe.db.deleteMany(this.doctype, this.checkList); await frappe.db.deleteMany(this.doctype, this.checkList);
this.$router.push(`/list/${this.doctype}`);
this.checkList = []; this.checkList = [];
}, },
toggleCheck(name) { toggleCheck(name) {

3
ui/components/controls/Link.vue
View File

@ -101,6 +101,9 @@ export default {
}, },
sort() { sort() {
return (a, b) => { return (a, b) => {
a = a.toLowerCase();
b = b.toLowerCase();
if (a.value === '__newItem') { if (a.value === '__newItem') {
return 1; return 1;
} }

5
ui/pages/Report/index.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="p-4"> <div class="p-4">
<h4 class="pb-2">{{ reportConfig.title }}</h4> <h4 class="pb-2">{{ reportConfig.title }}</h4>
<report-filters v-if="reportConfig.filterFields.length" :filters="reportConfig.filterFields" :filterDefaults="filters" @change="getReportData"></report-filters> <report-filters v-if="filtersExists" :filters="reportConfig.filterFields" :filterDefaults="filters" @change="getReportData"></report-filters>
<div class="pt-2" ref="datatable" v-once></div> <div class="pt-2" ref="datatable" v-once></div>
</div> </div>
<not-found v-if="!reportConfig" /> <not-found v-if="!reportConfig" />
@ -22,6 +22,9 @@ export default {
return utils.convertFieldsToDatatableColumns( return utils.convertFieldsToDatatableColumns(
this.reportConfig.getColumns() this.reportConfig.getColumns()
); );
},
filtersExists() {
return (this.reportConfig.filterFields || []).length;
} }
}, },
methods: { methods: {