Skip to content

Commit b5b0414

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 80c4a17 commit b5b0414

File tree

10 files changed

+326
-2
lines changed

10 files changed

+326
-2
lines changed

‎README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# Importing-and-Exporting-Rules-in-the-Vue-Query-Builder
2-
A Vue quick start project that shows how to import and export rules in the Syncfusion Vue Query Builder component. This project contains simple code to export rules to JSON and SQL. The code includes Inline, Parameter, and Named Parameters SQL query handling.
1+
# Importing and Exporting Rules in the Vue Query Builder
2+
3+
A Vue quick start project that shows how to import and export rules in the Syncfusion [Vue Query Builder](https://www.syncfusion.com/vue-components/vue-query-builder?utm_source=github&utm_medium=listing&utm_campaign=tutorial-videos-vue-query-builder-importexportrules-sample) component. This project contains simple code to export rules to JSON and SQL. The code includes Inline, Parameter, and Named Parameters SQL query handling.
4+
5+
Watch the video: Coming soon…
6+
7+
Refer to the documentation to learn about the Vue Query Builder component: https://ej2.syncfusion.com/vue/documentation/query-builder/import-export
8+
9+
Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/mongo-sql.html
10+
11+
Before working on this project, make sure your machine has the latest versions of Node.js and Visual Studio Code.
12+
13+
## How to run this application
14+
To run this application, you need to clone the `Importing-and-Exporting-Rules-in-the-Vue-Query-Builder` repository and open it in Visual Studio Code. Then, install all the necessary Vue packages in your project using the `npm install` command and run your project using the `npm run dev` command.
15+

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-buttons": "^26.2.10",
13+
"@syncfusion/ej2-vue-querybuilder": "^26.2.10",
14+
"vue": "^3.4.31"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.0.5",
18+
"vite": "^5.3.4"
19+
}
20+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<div class="container">
3+
<div>
4+
<ejs-button cssClass="button" @click="importRules">Import Rules</ejs-button>
5+
<ejs-button cssClass="button" @click="exportRules">Export Rules</ejs-button>
6+
</div>
7+
<ejs-querybuilder :dataSource="dataSource" ref="querybuilder" />
8+
</div>
9+
</template>
10+
<script>
11+
import { QueryBuilderComponent, QueryLibrary, QueryBuilder } from "@syncfusion/ej2-vue-querybuilder";
12+
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
13+
QueryBuilder.Inject(QueryLibrary);
14+
15+
// #region hardwareData
16+
var hardwareData = [{
17+
'TaskID': 1,
18+
'Name': 'Lenovo Yoga',
19+
'Category': 'Laptop',
20+
'SerialNo': 'CB27932009',
21+
'InvoiceNo': 'INV-2878',
22+
'Status': 'Assigned'
23+
},
24+
{
25+
'TaskID': 2,
26+
'Name': 'Acer Aspire',
27+
'Category': 'Others',
28+
'SerialNo': 'CB35728290',
29+
'InvoiceNo': 'INV-3456',
30+
'Status': 'In-repair'
31+
},
32+
{
33+
'TaskID': 3,
34+
'Name': 'Apple MacBook',
35+
'Category': 'Laptop',
36+
'SerialNo': 'CB35628728',
37+
'InvoiceNo': 'INV-2763',
38+
'Status': 'In-repair'
39+
}];
40+
// #endregion
41+
42+
export default {
43+
components: {
44+
"ejs-querybuilder": QueryBuilderComponent,
45+
"ejs-button": ButtonComponent
46+
},
47+
data() {
48+
return {
49+
dataSource: hardwareData,
50+
rule: {
51+
'condition': 'or',
52+
'rules': [{
53+
'label': 'Category',
54+
'field': 'Category',
55+
'operator': 'equal',
56+
'value': 'Laptop'
57+
},
58+
{
59+
'condition': 'and',
60+
'rules': [{
61+
'label': 'Status',
62+
'field': 'Status',
63+
'operator': 'notequal',
64+
'value': 'Pending'
65+
},
66+
{
67+
'label': 'Task ID',
68+
'field': 'TaskID',
69+
'operator': 'equal',
70+
'value': 5675
71+
}]
72+
}]
73+
}
74+
};
75+
},
76+
methods: {
77+
importRules() {
78+
this.$refs.querybuilder.ej2Instances.setRules(this.rule);
79+
80+
/* this.$refs.querybuilder.ej2Instances.setRulesFromSql(
81+
"TaskID = 1 and Status LIKE ('Assigned%')"
82+
); */
83+
84+
/* this.$refs.querybuilder.ej2Instances.setParameterizedSql(
85+
{
86+
sql: '(Category IN (?,?) OR TaskID IN (?,?))',
87+
params: ['Laptop', 'Others', 1, 2]
88+
}); */
89+
/* this.$refs.querybuilder.ej2Instances.setParameterizedNamedSql(
90+
{
91+
sql: '(Category IN (:Category_1,:Category_2) OR TaskID IN (:TaskID_1,:TaskID_2))',
92+
params: { "Category_1": "Laptop", "Category_2": "Others", "TaskID_1": 1, "TaskID_2": 2 }
93+
}
94+
); */
95+
},
96+
exportRules() {
97+
console.log(
98+
99+
this.$refs.querybuilder.ej2Instances.getValidRules()
100+
101+
/* this.$refs.querybuilder.ej2Instances.getSqlFromRules(
102+
this.$refs.querybuilder.ej2Instances.getValidRules()) */
103+
104+
/* this.$refs.querybuilder.ej2Instances.getParameterizedSql(
105+
this.$refs.querybuilder.ej2Instances.getValidRules()) */
106+
107+
/* this.$refs.querybuilder.ej2Instances.getParameterizedNamedSql(
108+
this.$refs.querybuilder.ej2Instances.getValidRules()) */
109+
);
110+
}
111+
}
112+
};
113+
</script>
114+
115+
<style>
116+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
117+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
118+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
119+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
120+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
121+
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
122+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
123+
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
124+
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
125+
126+
.container {
127+
display: flex;
128+
flex-direction: column;
129+
align-items: center;
130+
width: 95%;
131+
margin: 0 auto;
132+
position: absolute;
133+
top: 20px;
134+
left: 50%;
135+
transform: translateX(-50%);
136+
}
137+
138+
.button {
139+
margin: 20px;
140+
}
141+
</style>

‎src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Learn more about IDE Support for Vue in the
30+
<a
31+
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
32+
target="_blank"
33+
>Vue Docs Scaling up Guide</a
34+
>.
35+
</p>
36+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
37+
</template>
38+
39+
<style scoped>
40+
.read-the-docs {
41+
color: #888;
42+
}
43+
</style>

‎src/main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import { registerLicense } from '@syncfusion/ej2-base'
5+
registerLicense('Ngo9BigBOggjHTQxAR8/V1NCaF5cXmpCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXlcd3RVQ2FfUUJwVkM=')
6+
createApp(App).mount('#app')

‎src/style.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
31+
}
32+
33+
h1 {
34+
font-size: 3.2em;
35+
line-height: 1.1;
36+
}
37+
38+
button {
39+
border-radius: 8px;
40+
border: 1px solid transparent;
41+
padding: 0.6em 1.2em;
42+
font-size: 1em;
43+
font-weight: 500;
44+
font-family: inherit;
45+
background-color: #1a1a1a;
46+
cursor: pointer;
47+
transition: border-color 0.25s;
48+
}
49+
button:hover {
50+
border-color: #646cff;
51+
}
52+
button:focus,
53+
button:focus-visible {
54+
outline: 4px auto -webkit-focus-ring-color;
55+
}
56+
57+
.card {
58+
padding: 2em;
59+
}
60+
61+
#app {
62+
max-width: 1280px;
63+
margin: 0 auto;
64+
padding: 2rem;
65+
/* text-align: center; */
66+
}
67+
68+
@media (prefers-color-scheme: light) {
69+
:root {
70+
color: #213547;
71+
background-color: #ffffff;
72+
}
73+
a:hover {
74+
color: #747bff;
75+
}
76+
button {
77+
background-color: #f9f9f9;
78+
}
79+
}

‎vite.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)