Skip to content

Commit 7522bab

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
Adding samples for adaptors in vue platform
1 parent e2a73ad commit 7522bab

File tree

198 files changed

+8790
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

198 files changed

+8790
-0
lines changed

‎GraphQLAdaptor/GraphQLServer/build/index.js

+2,132
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎GraphQLAdaptor/GraphQLServer/build/index.map

+1
Large diffs are not rendered by default.

‎GraphQLAdaptor/GraphQLServer/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "graphql-server",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "graphpack --port 4200",
8+
"build": "graphpack build"
9+
},
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"graphpack": "^1.0.9"
14+
},
15+
"dependencies": {
16+
"@syncfusion/ej2-data": "21.2.3"
17+
}
18+
}

‎GraphQLAdaptor/GraphQLServer/src/db.js

+612
Large diffs are not rendered by default.

‎GraphQLAdaptor/GraphQLServer/src/resolvers.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { OrderData } from "./db";
2+
import { DataUtil, Query, DataManager } from "@syncfusion/ej2-data";
3+
4+
DataUtil.serverTimezoneOffset = 0;
5+
6+
const resolvers = {
7+
Query: {
8+
getOrders: (parent, { datamanager }, context, info) => {
9+
console.log(datamanager);
10+
let orders = [...OrderData];
11+
const query = new Query();
12+
13+
const performFiltering = (filterString) => {
14+
const filter = JSON.parse(filterString);
15+
// Iterating over each predicate
16+
filter[0].predicates.forEach(predicate => {
17+
const field = predicate.field;
18+
const operator = predicate.operator;
19+
const value = predicate.value;
20+
query.where(field, operator, value);
21+
});
22+
}
23+
const performSearching = (searchParam) => {
24+
const { fields, key } = JSON.parse(searchParam)[0];
25+
query.search(key, fields);
26+
}
27+
const performSorting = (sorted) => {
28+
for (let i = 0; i < sorted.length; i++) {
29+
const { name, direction } = sorted[i];
30+
query.sortBy(name, direction);
31+
}
32+
}
33+
34+
// Perform filtering
35+
if (datamanager.where) {
36+
performFiltering(datamanager.where);
37+
}
38+
39+
// Perform Searching
40+
if (datamanager.search) {
41+
performSearching(datamanager.search);
42+
}
43+
44+
// Perform sorting
45+
if (datamanager.sorted) {
46+
performSorting(datamanager.sorted);
47+
}
48+
49+
orders = new DataManager(orders).executeLocal(query);
50+
var count = orders.length;
51+
52+
// Perform paging
53+
if (datamanager.skip && datamanager.take) {
54+
const pageSkip = datamanager.skip / datamanager.take + 1;
55+
const pageTake = datamanager.take;
56+
query.page(pageSkip, pageTake);
57+
} else if (datamanager.skip === 0 && datamanager.take) {
58+
query.page(1, datamanager.take);
59+
}
60+
61+
const currentResult = new DataManager(orders).executeLocal(query);
62+
return { result: currentResult, count: count }; // Return result and count separately
63+
},
64+
},
65+
Mutation: {
66+
createOrder: (parent, { value }, context, info) => {
67+
const newOrder = value;
68+
OrderData.push(newOrder);
69+
return newOrder;
70+
},
71+
updateOrder: (parent, { key, keyColumn, value }, context, info) => {
72+
let updatedOrder = OrderData.find(order => order.OrderID === parseInt(key));
73+
updatedOrder.CustomerID = value.CustomerID;
74+
updatedOrder.EmployeeID = value.EmployeeID;
75+
updatedOrder.Freight = value.Freight;
76+
updatedOrder.ShipCity = value.ShipCity;
77+
updatedOrder.ShipCountry = value.ShipCountry;
78+
return updatedOrder; // Make sure to return the updated order.
79+
},
80+
deleteOrder: (parent, { key, keyColumn, value }, context, info) => {
81+
const orderIndex = OrderData.findIndex(order => order.OrderID === parseInt(key));
82+
if (orderIndex === -1) throw new Error("Order not found." + value);
83+
const deletedOrders = OrderData.splice(orderIndex, 1);
84+
return deletedOrders[0];
85+
}
86+
}
87+
88+
};
89+
90+
export default resolvers;

‎GraphQLAdaptor/GraphQLServer/src/schema.graphql

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
#Grid Sort direction
2+
3+
input Sort {
4+
name: String!
5+
direction: String!
6+
}
7+
8+
#Grid aggregates type
9+
10+
input Aggregate {
11+
field: String!
12+
type: String!
13+
}
14+
15+
#Syncfusion DataManager query params
16+
17+
input DataManager {
18+
skip: Int
19+
take: Int
20+
sorted: [Sort]
21+
group: [String]
22+
table: String
23+
select: [String]
24+
where: String
25+
search: String
26+
requiresCounts: Boolean,
27+
aggregates: [Aggregate],
28+
params: String
29+
}
30+
31+
# Grid field names
32+
input OrderInput {
33+
OrderID: Int!
34+
CustomerID: String
35+
EmployeeID: Int
36+
ShipCity: String
37+
ShipCountry: String
38+
}
39+
40+
type Order {
41+
OrderID: Int!
42+
CustomerID: String
43+
EmployeeID: Int
44+
ShipCity: String
45+
ShipCountry: String
46+
}
47+
48+
# need to return type as 'result (i.e, current pager data)' and count (i.e., total number of records in your database)
49+
type ReturnType {
50+
result: [Order]
51+
count: Int
52+
aggregates: String
53+
}
54+
55+
type Query {
56+
getOrders(datamanager: DataManager): ReturnType
57+
}
58+
type Mutation {
59+
60+
createOrder(value: OrderInput): Order!
61+
updateOrder(key: Int!, keyColumn: String, value: OrderInput): Order
62+
deleteOrder(key: Int!, keyColumn: String, value: OrderInput): Order!
63+
}

‎GraphQLAdaptor/GridClient/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎GraphQLAdaptor/GridClient/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

‎GraphQLAdaptor/GridClient/index.html

+13
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>

‎GraphQLAdaptor/GridClient/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "gridclient",
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-data": "^26.1.35",
13+
"@syncfusion/ej2-vue-grids": "^26.1.39",
14+
"vue": "^3.4.29"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.0.5",
18+
"vite": "^5.3.1"
19+
}
20+
}

‎GraphQLAdaptor/GridClient/public/vite.svg

+1
Loading

‎GraphQLAdaptor/GridClient/src/App.vue

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div id="app">
3+
<ejs-grid :dataSource='data' :toolbar="toolbar" :editSettings="editSettings" :allowFiltering="true"
4+
allowSorting="true" allowPaging="true">
5+
<e-columns>
6+
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey="true"></e-column>
7+
<e-column field='CustomerID' headerText='Customer ID' width='160'></e-column>
8+
<e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
9+
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
10+
</e-columns>
11+
</ejs-grid>
12+
</div>
13+
</template>
14+
<script setup>
15+
import { provide } from "vue";
16+
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Edit, Filter, Sort, Toolbar, Page } from "@syncfusion/ej2-vue-grids";
17+
import { DataManager, GraphQLAdaptor } from "@syncfusion/ej2-data";
18+
19+
const data = new DataManager({
20+
url: "http://localhost:4200/",
21+
adaptor: new GraphQLAdaptor({
22+
response: {
23+
result: 'getOrders.result',
24+
count: 'getOrders.count',
25+
aggregates: 'getOrder.aggregates'
26+
},
27+
query: `query getOrders($datamanager: DataManager) {
28+
getOrders(datamanager: $datamanager) {
29+
count,
30+
result{
31+
OrderID, CustomerID, ShipCity, ShipCountry}
32+
}
33+
}`,
34+
// mutation for performing CRUD
35+
getMutation: function (action) {
36+
if (action === 'insert') {
37+
return `mutation CreateOrderMutation($value: OrderInput!){
38+
createOrder(value: $value){
39+
OrderID, CustomerID, ShipCity, ShipCountry
40+
}}`;
41+
}
42+
if (action === 'update') {
43+
return `mutation UpdateOrderMutation($key: Int!, $keyColumn: String,$value: OrderInput){
44+
updateOrder(key: $key, keyColumn: $keyColumn, value: $value) {
45+
OrderID, CustomerID, ShipCity, ShipCountry
46+
}
47+
}`;
48+
} else {
49+
return `mutation RemoveOrderMutation($key: Int!, $keyColumn: String, $value: OrderInput){
50+
deleteOrder(key: $key, keyColumn: $keyColumn, value: $value) {
51+
OrderID, CustomerID, ShipCity, ShipCountry
52+
}
53+
}`;
54+
}
55+
}
56+
})
57+
});
58+
const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Search'];
59+
const editSettings = { allowAdding: true, allowDeleting: true, allowEditing: true };
60+
61+
provide('grid', [Page, Edit, Sort, Toolbar, Filter]);
62+
63+
</script>
64+
<style>
65+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
66+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
67+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
68+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
69+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
70+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
71+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
72+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
73+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
74+
</style>

‎GraphQLAdaptor/GridClient/src/assets/vue.svg

+1
Loading

‎GraphQLAdaptor/GridClient/src/components/HelloWorld.vue

+43
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>

‎GraphQLAdaptor/GridClient/src/main.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

‎GraphQLAdaptor/GridClient/src/style.css

Whitespace-only changes.

‎GraphQLAdaptor/GridClient/vite.config.js

+7
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)