Skip to content
This repository was archived by the owner on Nov 27, 2023. It is now read-only.

Commit 5467f60

Browse files
soulsam480soulsam480
committed
tested print page, models api beta
1 parent 03098ef commit 5467f60

File tree

9 files changed

+11547
-11426
lines changed

9 files changed

+11547
-11426
lines changed

‎COPYING.txt‎

Lines changed: 673 additions & 673 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
"name": "elec-sqlite-vue",
33
"version": "0.1.0",
44
"private": true,
5-
"license": "GNU General Public License",
6-
"author": "sSoulsam480 <soulsam480@hotmail.com> ",
5+
"author": "soulsam480 <soulsam480@hotmail.com> ",
76
"scripts": {
87
"serve": "vue-cli-service serve",
98
"build": "vue-cli-service build",
@@ -40,5 +39,6 @@
4039
"sass-loader": "^8.0.2",
4140
"typescript": "~3.9.3",
4241
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4"
43-
}
42+
},
43+
"license": "GNU General Public License"
4444
}

‎src/background.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
import { app, protocol, BrowserWindow } from 'electron'
88
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
9-
// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
10-
const isDevelopment = process.env.NODE_ENV !== 'production'
9+
/* import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
10+
*/const isDevelopment = process.env.NODE_ENV !== 'production'
1111

1212
// Keep a global reference of the window object, if you don't, the window will
1313
// be closed automatically when the JavaScript object is garbage collected.
@@ -75,11 +75,11 @@ app.on('ready', async () => {
7575
// If you are not using Windows 10 dark mode, you may uncomment the following lines (and the import at the top of the file)
7676
// In addition, if you upgrade to Electron ^8.2.5 or ^9.0.0 then devtools should work fine
7777

78-
// try {
79-
// await installExtension(VUEJS_DEVTOOLS)
80-
// } catch (e) {
81-
// console.error('Vue Devtools failed to install:', e.toString())
82-
// }
78+
/* try {
79+
await installExtension(VUEJS_DEVTOOLS)
80+
} catch (e) {
81+
console.error('Vue Devtools failed to install:', e.toString())
82+
} */
8383

8484
}
8585
createWindow()

‎src/getdb.ts‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,56 @@
1-
import { Sequelize, Model, DataTypes } from 'sequelize';
2-
import { remote } from "electron"
3-
import path from 'path';
4-
declare const __static: string;
5-
6-
// todo try loading db from userData
7-
8-
const univDb = path.join(remote.app.getPath("userData"), "data.db")
9-
10-
// todo the below is the path to local db under src/data.db
11-
const isBuild = process.env.NODE_ENV === 'production';
12-
const locDb = path.join(
13-
// eslint-disable-next-line
14-
isBuild ? __dirname : __static,
15-
'../src/data.db',
16-
);
17-
18-
19-
// setup the connection to make sure it works
20-
const sequelize = new Sequelize({
21-
dialect: 'sqlite',
22-
// todo change this to locDb for using db inside src/data.db
23-
storage: univDb,
24-
logging: /* true, */(process.env.NODE_ENV !== 'production') ? console.log : false,
25-
define: {
26-
timestamps: false,
27-
underscored: true,
28-
},
29-
});
30-
31-
// todo define models here, or use a separate file for defining models and import them here!!!
32-
33-
const User = sequelize.define('User', {
34-
firstName: {
35-
type: DataTypes.STRING,
36-
allowNull: false
37-
},
38-
lastName: {
39-
type: DataTypes.STRING
40-
},
41-
42-
}, {
43-
});
44-
45-
// todo use sync to create tables
46-
User.sync()
47-
48-
export { sequelize, User };
1+
import { remote } from "electron";
2+
import path from 'path';
3+
import { DataTypes, Model, Sequelize } from 'sequelize';
4+
declare const __static: string;
5+
6+
// todo try loading db from userData
7+
8+
const univDb = path.join(remote.app.getPath("userData"), "data.db")
9+
10+
// todo the below is the path to local db under src/data.db
11+
/* const isBuild = process.env.NODE_ENV === 'production';
12+
const locDb = path.join(
13+
// eslint-disable-next-line
14+
isBuild ? __dirname : __static,
15+
'../src/data.db',
16+
);
17+
*/
18+
19+
// setup the connection to make sure it works
20+
const sequelize = new Sequelize({
21+
dialect: 'sqlite',
22+
// todo change this to locDb for using db inside src/data.db
23+
storage: univDb,
24+
// ** db event logging true in dev and false in production
25+
logging: (process.env.NODE_ENV !== 'production') ? true : false,
26+
define: {
27+
timestamps: false,
28+
underscored: true,
29+
},
30+
});
31+
32+
// todo define models here, or use a separate file for defining models and import them here!!!
33+
class User extends Model {
34+
public firstName!: string | null;
35+
public lastName!: string | null;
36+
public id!: number | null
37+
}
38+
User.init({
39+
firstName: {
40+
type: DataTypes.STRING,
41+
allowNull: false
42+
},
43+
lastName: {
44+
type: DataTypes.STRING,
45+
allowNull: false
46+
},
47+
48+
}, {
49+
tableName: "users",
50+
sequelize
51+
})
52+
53+
// todo use sync to create tables
54+
User.sync()
55+
56+
export { sequelize, User };

‎src/main.ts‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
1-
/**
2-
* @author Sambit Sahoo <soulsam480@hotmail.com>
3-
* @version 0.1.0
4-
*/
5-
6-
7-
import { createApp } from 'vue'
8-
import App from './App.vue'
9-
import router from './router'
10-
import { sequelize, User } from "./getdb"
11-
12-
import 'bootstrap/dist/css/bootstrap.min.css';
13-
// todo sqlite db
14-
sequelize.authenticate().then(() => console.log("connected")
15-
).catch((err: any) => console.log(err)
16-
)
17-
const test = async () => {
18-
await User.findAll().then((res) => {
19-
console.log(res);
20-
21-
})
22-
}
23-
test()
24-
25-
createApp(App).use(router).mount('#app')
1+
/**
2+
* @author Sambit Sahoo <soulsam480@hotmail.com>
3+
* @version 0.1.0
4+
*/
5+
6+
import { createApp } from 'vue'
7+
import App from './App.vue'
8+
import router from './router'
9+
import { sequelize } from "./getdb"
10+
11+
12+
import 'bootstrap/dist/css/bootstrap.min.css';
13+
14+
15+
// todo sqlite db
16+
sequelize.authenticate().then(() => console.log("connected")
17+
).catch((err: any) => console.log(err))
18+
19+
const app = createApp(App)
20+
app.use(router).mount('#app')
21+

‎src/modelapi/user.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// todo this file provides an API to interact with the db users
2+
//todo table making it easier to work with
3+
import { User } from "../getdb"
4+
interface NewUser {
5+
firstName: string | null;
6+
lastName: string | null;
7+
id?: number | null;
8+
}
9+
/**
10+
* Returns all Users
11+
* @method getAllUsers
12+
* @returns {Array<NewUser>} All Users belonging to User Model
13+
*/
14+
const getAllUsers = async () => {
15+
const users = await User.findAll()
16+
return users
17+
}
18+
19+
/**
20+
* Returns all Users
21+
* @method createUser
22+
* @param {NewUser} user the user object
23+
* @returns {NewUser} the created User Object
24+
*/
25+
const createUser = async (user: NewUser) => {
26+
const retData = await User.create(user)
27+
const addedUser: NewUser = {
28+
firstName: retData.firstName,
29+
lastName: retData.lastName,
30+
id: retData.id
31+
}
32+
return addedUser
33+
}
34+
35+
export { getAllUsers, createUser }

‎src/views/Home.vue‎

Lines changed: 94 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="container-fluid">
33
<p>Home</p>
4+
<button class="btn btn-success" @click="printPage">Test print</button>
45
<form>
56
<div class="form-group">
67
<label for="fname">First Name</label>
@@ -26,29 +27,110 @@
2627
<button class="btn btn-primary" @click.prevent="submituser">
2728
Submit User
2829
</button>
30+
<br />
31+
<br />
32+
<table class="table">
33+
<thead>
34+
<tr>
35+
<td>firstName</td>
36+
<td>LastName</td>
37+
<td>id</td>
38+
</tr>
39+
</thead>
40+
<tbody>
41+
<tr v-for="user in allData" :key="user.id">
42+
<td>{{ user.firstName }}</td>
43+
<td>{{ user.lastName }}</td>
44+
<td>{{ user.id }}</td>
45+
</tr>
46+
</tbody>
47+
</table>
2948
</div>
3049
</template>
3150

3251
<script lang="ts">
33-
import { defineComponent, onUpdated, reactive, ref } from "vue";
34-
import { User } from "../getdb";
52+
//todo options for printing
53+
const options = {
54+
silent: false,
55+
printBackground: true,
56+
color: false,
57+
margin: {
58+
marginType: "printableArea",
59+
},
60+
landscape: true,
61+
pagesPerSheet: 1,
62+
collate: false,
63+
copies: 1,
64+
header: "Header of the Page",
65+
footer: "Footer of the Page",
66+
};
67+
// todo user model
68+
interface NewUser {
69+
firstName: string | null;
70+
lastName: string | null;
71+
id?: number | null;
72+
}
73+
74+
// ** imports
75+
import { remote } from "electron";
76+
import {
77+
defineComponent,
78+
EmitsOptions,
79+
onMounted,
80+
reactive,
81+
SetupContext,
82+
} from "vue";
83+
import { getAllUsers, createUser } from "../modelapi/user";
84+
85+
//todo component instance
3586
export default defineComponent({
3687
name: "Home",
3788
setup() {
89+
//todo the reactive state for binding to form
3890
const user = reactive({
39-
firstName: "" as string,
40-
lastName: "" as string,
91+
firstName: "",
92+
lastName: "",
4193
});
42-
const submituser = async () => {
43-
console.log(user);
44-
45-
await User.create(user).then(() => {
46-
User.findAll().then((res) => {
47-
console.log(res);
48-
});
94+
//todo reactive repo of all users
95+
const allData = reactive<NewUser[]>([]);
96+
//todo try printing
97+
const printPage = () => {
98+
const win: any = remote.BrowserWindow.getFocusedWindow();
99+
win.webContents.print(options, (success: any, failureReason: any) => {
100+
if (!success) console.log(failureReason);
101+
console.log("Print Initiated");
49102
});
50103
};
51-
return { user, submituser };
104+
//todo all user data
105+
const syncUsers = async () => {
106+
const allUsers = await getAllUsers();
107+
allUsers.forEach((el: any) => {
108+
const userFound = allData.find((e) => e.id === el.id);
109+
userFound
110+
? allData.splice(
111+
allData.findIndex((e) => e.id === el.id),
112+
1,
113+
{
114+
firstName: el.firstName,
115+
lastName: el.LastName,
116+
id: el.id,
117+
}
118+
)
119+
: allData.push({
120+
firstName: el.firstName,
121+
lastName: el.LastName,
122+
id: el.id,
123+
});
124+
});
125+
};
126+
//todo fetch all users on boot
127+
onMounted(async () => syncUsers());
128+
//todo submit user
129+
const submituser = async () => {
130+
const getUser = await createUser(user);
131+
allData.push(getUser);
132+
};
133+
return { user, submituser, allData, printPage };
52134
},
53135
});
54136
</script>

‎vue.config.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
module.exports = {
2-
configureWebpack: {
3-
externals: {
4-
sequelize: "require('sequelize')",
5-
},
6-
},
7-
pluginOptions: {
8-
electronBuilder: {
9-
externals: ["sequelize"],
10-
nodeIntegration: true,
11-
builderOptions: {
12-
extraResources: ["src/data.db"],
13-
},
14-
},
15-
},
16-
};
1+
module.exports = {
2+
configureWebpack: {
3+
externals: {
4+
sequelize: "require('sequelize')",
5+
},
6+
},
7+
pluginOptions: {
8+
electronBuilder: {
9+
externals: ["sequelize"],
10+
nodeIntegration: true,
11+
builderOptions: {
12+
extraResources: ["src/data.db"],
13+
},
14+
},
15+
},
16+
};

0 commit comments

Comments
 (0)