Skip to content

Commit 1d2b6e3

Browse files
VengateshManirajVengateshManiraj
authored
Merge pull request #3 from SivakumarM-04/Update-Code-SF5297
Versions Updated
2 parents c312314 + 4004aee commit 1d2b6e3

9 files changed

Lines changed: 192 additions & 107 deletions

File tree

‎GraphQl/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313
"graphpack": "^1.0.9"
1414
},
1515
"dependencies": {
16-
"@syncfusion/ej2-data": "^19.2.55"
16+
"@syncfusion/ej2-data": "^32.1.19"
1717
}
1818
}

‎GraphQl/src/db.js‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,110 +3,110 @@ export let eventsData = [
33
{
44
Id: 1,
55
Subject: 'Server Maintenance',
6-
StartTime: new Date(2021, 1, 11, 10, 0).toISOString(),
7-
EndTime: new Date(2021, 1, 11, 11, 30).toISOString(),
6+
StartTime: new Date(2026, 1, 11, 10, 0).toISOString(),
7+
EndTime: new Date(2026, 1, 11, 11, 30).toISOString(),
88
Location: 'Seattle'
99
}, {
1010
Id: 2,
1111
Subject: 'Art & Painting Gallery',
12-
StartTime: new Date(2021, 1, 12, 12, 0).toISOString(),
13-
EndTime: new Date(2021, 1, 12, 14, 0).toISOString(),
12+
StartTime: new Date(2026, 1, 12, 12, 0).toISOString(),
13+
EndTime: new Date(2026, 1, 12, 14, 0).toISOString(),
1414
Location: 'Costa Rica'
1515
}, {
1616
Id: 3,
1717
Subject: 'Dany Birthday Celebration',
18-
StartTime: new Date(2021, 1, 13, 10, 0).toISOString(),
19-
EndTime: new Date(2021, 1, 13, 11, 30).toISOString(),
18+
StartTime: new Date(2026, 1, 13, 10, 0).toISOString(),
19+
EndTime: new Date(2026, 1, 13, 11, 30).toISOString(),
2020
Location: 'Kirkland'
2121
}, {
2222
Id: 4,
2323
Subject: 'John Wedding Anniversary',
24-
StartTime: new Date(2021, 1, 14, 9, 0).toISOString(),
25-
EndTime: new Date(2021, 1, 14, 10, 0).toISOString(),
24+
StartTime: new Date(2026, 1, 14, 9, 0).toISOString(),
25+
EndTime: new Date(2026, 1, 14, 10, 0).toISOString(),
2626
Location: 'Redmond'
2727
}, {
2828
Id: 5,
2929
Subject: 'ISA Annual Conference',
30-
StartTime: new Date(2021, 1, 15, 10, 0).toISOString(),
31-
EndTime: new Date(2021, 1, 15, 11, 30).toISOString(),
30+
StartTime: new Date(2026, 1, 15, 10, 0).toISOString(),
31+
EndTime: new Date(2026, 1, 15, 11, 30).toISOString(),
3232
Location: 'USA'
3333
}, {
3434
Id: 6,
3535
Subject: 'Equipment Maintenance',
36-
StartTime: new Date(2021, 1, 16, 12, 0).toISOString(),
37-
EndTime: new Date(2021, 1, 16, 14, 0).toISOString(),
36+
StartTime: new Date(2026, 1, 16, 12, 0).toISOString(),
37+
EndTime: new Date(2026, 1, 16, 14, 0).toISOString(),
3838
Location: 'Seattle',
3939
}, {
4040
Id: 7,
4141
Subject: 'Aircraft Maintenance',
42-
StartTime: new Date(2021, 1, 17, 10, 0).toISOString(),
43-
EndTime: new Date(2021, 1, 17, 11, 30).toISOString(),
42+
StartTime: new Date(2026, 1, 17, 10, 0).toISOString(),
43+
EndTime: new Date(2026, 1, 17, 11, 30).toISOString(),
4444
Location: 'Seattle'
4545
}, {
4646
Id: 8,
4747
Subject: 'Facilities Maintenance',
48-
StartTime: new Date(2021, 1, 19, 9, 30).toISOString(),
49-
EndTime: new Date(2021, 1, 19, 11, 0).toISOString(),
48+
StartTime: new Date(2026, 1, 19, 9, 30).toISOString(),
49+
EndTime: new Date(2026, 1, 19, 11, 0).toISOString(),
5050
Location: 'Seattle'
5151
}, {
5252
Id: 9,
5353
Subject: 'Britto Birthday Celebration',
54-
StartTime: new Date(2021, 1, 21, 11, 0).toISOString(),
55-
EndTime: new Date(2021, 1, 21, 13, 0).toISOString(),
54+
StartTime: new Date(2026, 1, 21, 11, 0).toISOString(),
55+
EndTime: new Date(2026, 1, 21, 13, 0).toISOString(),
5656
Location: 'Greenland'
5757
}, {
5858
Id: 10,
5959
Subject: 'Justin Wedding Anniversary',
60-
StartTime: new Date(2021, 1, 22, 9, 30).toISOString(),
61-
EndTime: new Date(2021, 1, 22, 11, 0).toISOString(),
60+
StartTime: new Date(2026, 1, 22, 9, 30).toISOString(),
61+
EndTime: new Date(2026, 1, 22, 11, 0).toISOString(),
6262
Location: 'Finland'
6363
}, {
6464
Id: 11,
6565
Subject: 'AIEA Annual Meet',
66-
StartTime: new Date(2021, 1, 9, 10, 0).toISOString(),
67-
EndTime: new Date(2021, 1, 9, 11, 30).toISOString(),
66+
StartTime: new Date(2026, 1, 9, 10, 0).toISOString(),
67+
EndTime: new Date(2026, 1, 9, 11, 30).toISOString(),
6868
Location: 'USA'
6969
}, {
7070
Id: 12,
7171
Subject: 'AAN Conference',
72-
StartTime: new Date(2021, 1, 7, 10, 30).toISOString(),
73-
EndTime: new Date(2021, 1, 7, 12, 30).toISOString(),
72+
StartTime: new Date(2026, 1, 7, 10, 30).toISOString(),
73+
EndTime: new Date(2026, 1, 7, 12, 30).toISOString(),
7474
Location: 'USA'
7575
}, {
7676
Id: 13,
7777
Subject: 'Photography Gallery',
78-
StartTime: new Date(2021, 1, 5, 10, 0).toISOString(),
79-
EndTime: new Date(2021, 1, 5, 11, 30).toISOString(),
78+
StartTime: new Date(2026, 1, 5, 10, 0).toISOString(),
79+
EndTime: new Date(2026, 1, 5, 11, 30).toISOString(),
8080
Location: 'Chennai'
8181
}, {
8282
Id: 14,
8383
Subject: 'Beach Clean-up',
84-
StartTime: new Date(2021, 1, 14, 12, 0).toISOString(),
85-
EndTime: new Date(2021, 1, 14, 14, 0).toISOString(),
84+
StartTime: new Date(2026, 1, 14, 12, 0).toISOString(),
85+
EndTime: new Date(2026, 1, 14, 14, 0).toISOString(),
8686
Location: 'Mumbai'
8787
}, {
8888
Id: 15,
8989
Subject: 'Turtle Walk',
90-
StartTime: new Date(2021, 1, 19, 13, 0).toISOString(),
91-
EndTime: new Date(2021, 1, 19, 14, 30).toISOString(),
90+
StartTime: new Date(2026, 1, 19, 13, 0).toISOString(),
91+
EndTime: new Date(2026, 1, 19, 14, 30).toISOString(),
9292
Location: 'Costa Rica'
9393
}, {
9494
Id: 16,
9595
Subject: 'Silent Walk for Cancer day',
96-
StartTime: new Date(2021, 1, 22, 13, 0).toISOString(),
97-
EndTime: new Date(2021, 1, 22, 14, 30).toISOString(),
96+
StartTime: new Date(2026, 1, 22, 13, 0).toISOString(),
97+
EndTime: new Date(2026, 1, 22, 14, 30).toISOString(),
9898
Location: 'Chennai'
9999
}, {
100100
Id: 17,
101101
Subject: 'Beach Clean-up',
102-
StartTime: new Date(2021, 1, 13, 14, 0).toISOString(),
103-
EndTime: new Date(2021, 1, 13, 16, 0).toISOString(),
102+
StartTime: new Date(2026, 1, 13, 14, 0).toISOString(),
103+
EndTime: new Date(2026, 1, 13, 16, 0).toISOString(),
104104
Location: 'Mumbai'
105105
}, {
106106
Id: 18,
107107
Subject: 'Photography Gallery',
108-
StartTime: new Date(2021, 1, 15, 14, 0).toISOString(),
109-
EndTime: new Date(2021, 1, 15, 16, 0).toISOString(),
108+
StartTime: new Date(2026, 1, 15, 14, 0).toISOString(),
109+
EndTime: new Date(2026, 1, 15, 16, 0).toISOString(),
110110
Location: 'Chennai'
111111
}
112112
];

‎GraphQl/src/resolvers.js‎

Lines changed: 58 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { eventsData } from "./db";
2-
2+
function sameId(a, b) {
3+
if (a === undefined || a === null || b === undefined || b === null) return false;
4+
return String(a) === String(b);
5+
}
36
const resolvers = {
47
Query: {
58
getEvents: (parent, datamanager, context, info) => {
@@ -10,40 +13,78 @@ const resolvers = {
1013
return {result: data || eventsData};
1114
}
1215
},
13-
1416
Mutation: {
1517
batchUpdate: (parent, { added, changed, deleted }, context, info) => {
1618
if (added && added.length > 0) {
1719
console.log('added: ' + added.length);
1820
added.forEach((order) => {
19-
eventsData.push(order);
21+
let existingIndex = -1;
22+
for (let i = 0; i < eventsData.length; i++) {
23+
if (sameId(eventsData[i].Id, order && order.Id)) {
24+
existingIndex = i;
25+
break;
26+
}
27+
}
28+
if (existingIndex >= 0) {
29+
const target = eventsData[existingIndex];
30+
if ('Id' in order) target.Id = order.Id;
31+
if ('Subject' in order) target.Subject = order.Subject;
32+
if ('StartTime' in order) target.StartTime = order.StartTime;
33+
if ('EndTime' in order) target.EndTime = order.EndTime;
34+
if ('Location' in order) target.Location = order.Location;
35+
if ('IsAllDay' in order) target.IsAllDay = order.IsAllDay;
36+
if ('RecurrenceRule' in order) target.RecurrenceRule = order.RecurrenceRule;
37+
if ('StartTimezone' in order) target.StartTimezone = order.StartTimezone;
38+
if ('EndTimezone' in order) target.EndTimezone = order.EndTimezone;
39+
} else {
40+
eventsData.push(order);
41+
}
2042
});
2143
}
2244
if (changed && changed.length > 0) {
2345
console.log('changed: ' + changed.length);
2446
changed.forEach((order) => {
25-
let newOrder = eventsData.find(app => app.Id === order.Id);
26-
newOrder.Id = order.Id;
27-
newOrder.Subject = order.Subject;
28-
newOrder.StartTime = order.StartTime;
29-
newOrder.EndTime = order.EndTime;
30-
newOrder.Location = order.Location;
31-
newOrder.IsAllDay = order.IsAllDay;
32-
newOrder.RecurrenceRule = order.RecurrenceRule;
33-
newOrder.StartTimezone = order.StartTimezone;
34-
newOrder.EndTimezone = order.EndTimezone;
47+
let target = null;
48+
for (let i = 0; i < eventsData.length; i++) {
49+
if (sameId(eventsData[i].Id, order && order.Id)) {
50+
target = eventsData[i];
51+
break;
52+
}
53+
}
54+
if (!target) {
55+
console.log('Change skipped: app not found for Id:', order && order.Id);
56+
return;
57+
}
58+
if ('Id' in order) target.Id = order.Id;
59+
if ('Subject' in order) target.Subject = order.Subject;
60+
if ('StartTime' in order) target.StartTime = order.StartTime;
61+
if ('EndTime' in order) target.EndTime = order.EndTime;
62+
if ('Location' in order) target.Location = order.Location;
63+
if ('IsAllDay' in order) target.IsAllDay = order.IsAllDay;
64+
if ('RecurrenceRule' in order) target.RecurrenceRule = order.RecurrenceRule;
65+
if ('StartTimezone' in order) target.StartTimezone = order.StartTimezone;
66+
if ('EndTimezone' in order) target.EndTimezone = order.EndTimezone;
3567
});
3668
}
3769
if (deleted && deleted.length > 0) {
3870
console.log('deleted: ' + deleted.length);
3971
deleted.forEach((order) => {
40-
const orderIndex = eventsData.findIndex(app => app.Id === parseInt(order.Id));
41-
if (orderIndex === -1) throw new Error("app not found." + order.Id);
42-
eventsData.splice(orderIndex, 1);
72+
const eventID = (order && typeof order === 'object') ? order.Id : order;
73+
let idx = -1;
74+
for (let i = 0; i < eventsData.length; i++) {
75+
if (sameId(eventsData[i].Id, eventID)) {
76+
idx = i;
77+
break;
78+
}
79+
}
80+
if (idx === -1) {
81+
console.log("Delete skipped: app not found.", eventID);
82+
return;
83+
}
84+
eventsData.splice(idx, 1);
4385
});
4486
}
4587
}
4688
}
4789
};
48-
4990
export default resolvers;

‎Output/Frontend.png‎

66.1 KB
Loading

‎README.md‎

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,74 @@
1-
# ej2-angular-scheduler-crud-graphql-adaptor
1+
<!--
2+
howto.md
3+
A step-by-step guide to integrate EJ2 Angular Scheduler with CRUD using GraphQl Adaptor.
4+
-->
5+
# How to integrate EJ2 Angular Scheduler with CRUD using GraphQl Adaptor.
26

3-
This project is a skeleton application used to create [Syncfusion Angular Components](https://www.syncfusion.com/angular-ui-components) web application.
7+
This repository contains a sample full-stack application demonstrating how to show events in Syncfusion Angular Scheduler component using GraphQl. The Angular frontend provides a responsive UI for viewing and managing calendar events.
48

5-
## Add Syncfusion Grid component in your application
69

7-
Refer the following UG documenation for adding Syncfusion Angular component in your application
8-
* [Getting Started of Syncfusion Angular Scheduler component](https://ej2.syncfusion.com/angular/documentation/schedule/getting-started)
10+
## Prerequisites
11+
- Node.js (>= 20.19)
12+
- npm (>= 7.0)
13+
- Angular CLI (== 17.0.0)
914

10-
## GraphQL Server setup
15+
## Setup
1116

12-
You can setup GraphQL server by using `graphpack` npm package. Find the following link for getting more details for your reference.
13-
[`https://www.npmjs.com/package/graphpack`](https://www.npmjs.com/package/graphpack)
17+
### Cloning the repository
18+
19+
- Clone the repository to your local machine
1420

15-
## Run the GraphQL Server
21+
### GraphQL Server setup
1622

17-
```
18-
npm run dev
19-
```
23+
### Installation
24+
1. Open a terminal and navigate to the GraphQl folder
25+
```bash
26+
cd GraphQl
27+
```
28+
2. Install dependencies
29+
```bash
30+
npm install
31+
```
2032

21-
## Run the client Schedule application
33+
### Frontend Setup
2234

23-
```
24-
npm start
25-
```
35+
### Installation
2636

27-
## Resources
37+
1. Open another terminal and navigate to the Schedule folder
38+
```bash
39+
cd Schedule
40+
```
41+
2. Install the required packages
42+
```bash
43+
npm install
44+
```
2845

29-
You can also refer the below resources to know more details about Syncfusion Angular Scheduler components.
30-
* [Demo](https://ej2.syncfusion.com/angular/demos/#/material/schedule/default)
31-
* [Documentation](https://helpej2.syncfusion.com/angular/documentation/schedule/)
32-
* [GraphQL with Syncfusion DataManager](https://ej2.syncfusion.com/angular/documentation/data/adaptors/#graphql-adaptor)
46+
### Running the Application
47+
1. Open a terminal and navigate to GraphQl folder
48+
```bash
49+
cd GraphQl
50+
```
51+
2. Start the GraphQl server:
52+
```bash
53+
npm run dev
54+
```
55+
3. Server started running on `http://localhost:4400`
56+
4. Open another terminal and Navigate to Schedule folder
57+
```bash
58+
cd Schedule
59+
```
60+
5. Start the Schedule Frontend:
61+
```bash
62+
npm start
63+
```
64+
6. Navigate to [`http://localhost:4200`](http://localhost:4200) in your browser.
65+
66+
7. You can perform CRUD operation on the events that will be reflected in the Scheduler.
67+
68+
## Output Preview
69+
![Frontend Preview](./Output/Frontend.png)
70+
*Image illustrating the Syncfusion Angular Scheduler*
71+
72+
## Troubleshooting
73+
- **npm install stuck or fails**: Delete node_modules + package-lock.json, restart system, and reinstall using npm install.
74+
- **Karma/Jasmine version errors**: Install matched versions: karma@6.4.0, karma-jasmine@5.1.0, jasmine-core@5.1.0.

0 commit comments

Comments
 (0)