How to add 'createdBy' field in appointments?

[Youssef Lakdime]

I am implementing the Syncfusion Scheduler into my MEAN-app. (I am using this code https://www.syncfusion.com/forums/143958/data-binding-issue )

Everything works well, however i want to add a custom field, 'createdBy' that assigns the logged in users' email address, so I can only show the appointments of that user, and not all the appointments in the database. Below is the code to add appointments.

app.post("/BatchData", (req, res) => {
    console.log(req.body);
    var eventData = [];
    if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) {
        (req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added;
        for (var i = 0; i < eventData.length; i++) {
            var sdate = new Date(eventData[i].StartTime);
            var edate = new Date(eventData[i].EndTime);
            eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));
            eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));
            eventData[i].CreatedBy =  //here i want to add the users emailadress from the token;
            dbo.collection('ScheduleData').insertOne(eventData[i]);
        }
    }

I tried to add the token middleware to the function, like this:

app.post("/BatchData", authRequired, (req, res) => {

but as soon i add that extra argument, it stops retrieving the appointments, without any error message.  This is my authRequired function:

const User = require('../models/user');
const jwt = require('jsonwebtoken');
const config = require('../config/database')

function authRequired(req, res, next) {
    const token = req.get("authorization");
    if (!token) {
        res.json({ success: false, message: "No token provided" });
    } else {
        jwt.verify(token, config.secret, (err, decoded) => {
            if (err) {
                res.json({ success: false, message: "Token is invalid" + err });
            } else {
                req.decoded = decoded;
                next();
            }
        });
    }
}

module.exports = {
    authRequired: authRequired
};

Another option would be to send the emailaddress via the frontend. How do I add a custom field 'createdBy' (without any graphical input elements) to send a value from my component along with the appointment data in the Mongo collection? Do I add that in the onPopUpOpen() function?

Can you maybe help me on how to put users emailadres there at the 'createdBy' field? I retrieve the users info by this code:

ngOnInit() {
  this.auth.getProfile().subscribe((profile : any) => {
    this.userName = profile.user.username;
    this.email = profile.user.email;
    console.log(profile.user.email)
  })
 }

If you need any more info, please let me know

Thanks in advance

[Vinitha Devi Murugan]

Hi Youssef, 

 

Greetings from Sycfusion Support. 

 

Based on the your requirement, we have prepared a sample to add ‘CreatedBy’ custom field in event window by making use of popupOpen event of scheduler and the same can be downloaded from the following link, 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149221/ze/sample134868933 

 

  onPopupOpen(args: PopupOpenEventArgs): void { 

    if (args.type === 'Editor') { 

      // Create required custom elements in initial time 

      if (!args.element.querySelector('.custom-field-row1')) { 

        let row: HTMLElement = createElement('div', { className: 'custom-field-row1' }); 

        let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 

        formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 

        let container: HTMLElement = createElement('div', { className: 'custom-field-container1' }); 

        let inputEle: HTMLInputElement = createElement('input', { 

          className: 'e-field', attrs: { name: 'CreatedBy' } 

        }) as HTMLInputElement; 

        container.appendChild(inputEle); 

        row.appendChild(container); 

        let inputobj: TextBox = new TextBox({ 

          placeholder: 'CreatedBy', 

        }); 

        inputobj.appendTo(inputEle); 

        inputEle.setAttribute('name', 'CreatedBy'); 

      } 

    } 

  } 

 

Please refer below UG for addition additional fields in default window. 

 

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/?no-cache=1#add-additional-fields-to-the-default-editor 

 

 

Serve Image with additional field: 

 

 

 

Network tab image: 

 

 

 

 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

 

Regards, 

M.Vinitha devi 

[Youssef Lakdime]

Hello Vinitha,

Thank you for your reply. However, i think I did not make my purpose clear, because I dont want another textbox of 'createdBy'. I want the 'createdBy' value to be added automatically from the authenticationService, which grabs the logged in Users' email address.  Like so:

export class ScheduleComponent implements OnInit {

  userName;
  email;

ngOnInit() {
  this.auth.getProfile().subscribe((profile : any) => {
    this.userName = profile.user.username;
    this.email = profile.user.email;
    console.log(profile.user.email)
  })
 }

I hope i made my point clearer now :). I want to put that email variable into 'createdBy' but that should not be entered in the onPopUpOpen event

[Vinitha Devi Murugan]

Hi Youssef, 

 

Thanks for your update. 

 

We have achieved your requirement by making use of actionBegin event of our scheduler and for the same we have modified our previously shared sample and the same can be available in below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149221/ze/sample-1742206081 

 

  onActionBegin(args: ActionEventArgs): void { 

    if (args.requestType === "eventCreate") { 

      args.data[0].CreateBy = this.email; 

      args.data[0].UserName = this.userName; 

    } 

  } 

 

Server side image: 

 

 

Network tab image: 

 

 

Kindly try with the above sample and let us know, if you need any further assistance on this. 

 

Regards, 

M. Vinitha devi 

[Youssef Lakdime]

Thank you Vinitha for your reply. I got it working now. However, How do I query the appointments to only show the events of the logged in user?

Like this:

app.post("/GetData", (req, res) => {
    debugger;
       dbo.collection('ScheduleData').find({'CreatedBy':'testUser'}).toArray((err, cus) => {
        res.send(cus);
        
    });
});

But not static 'testUser' but the username that is stored in the a token in localstorage called 'User' . 

I have another method for getting the logged in users profile like this:

router.get('/profile', authRequired, (req, res) => {
       User.findOne({_id: req.decoded.userId}).select('username email').exec((err, user) =>{
          if(err){
              res.json({success: false, message: err});
          } else {
              if(!user){
                  res.json({success: false, message: 'Not found'});
              } else {
                  res.json({success: true, user: user})
                  }
          }
       });
    });

However, if I add the middleware 'authRequired' into the '/getData' endpoint, it stops working. 
How can I retrieve the logged in users email in order to assign that to the find({}) query?

[Vinitha Devi Murugan]

 

Hi Youssef, 

 

Thanks for your update. 

 

We suspect that your query is wrong, we have modified our previously shared sample to filter and show the particular logged user’s event by using below code.  

 

https://www.syncfusion.com/downloads/support/forum/149221/ze/sample-1608226337 

 

app.post("/GetData", (req, res) => { 

  var query = { CreateBy: /^[e-mail]/ }; 

  dbo.collection('ScheduleData').find(query).toArray((err, cus) => { 

  res.send(cus); 

  }); 

  } 

 

Kindly try the above solution and let us know, if you need further assistance on this. 

 

Regards, 

M.Vinitha devi 

[Youssef Lakdime]

Hi Vinitha, thank you for your update.

However, your code implies that only the events of [e-mail] (static) will get retrieved, no matter which user is logged in. That was not what I meant. My purpose was to assign the getData query to load all the events of the current logged in users' username.

I have this code in my app.component.ts that loads the username from the auth token:

ngOnInit() {
  this.userName = JSON.parse(localStorage.getItem("user"));
  console.log(this.userName.username)
 this.userName = this.userName.username
}

So how can I query so that 'createdBy' equals this.userName ?

 I hope I made it clearer. Thanks in advance.

[Vinitha Devi Murugan]

Hi Youssef, 

 

Thanks for your update. 

 

To send an additional custom parameter to the server-side post, you need to make use of the addParams method of query. Now, assign this query object with additional parameters to the query property of Scheduler. We have prepared a below sample to pass tokens as an additional parameter to the scheduler and same can be available in below link.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/149221/ze/sample-1441288288  

 

App.component.ts file: 

  ngOnInit(): void { 

    this.selectedDate = new Date(2018, 1, 14); 

    this.email = "[e-mail]"; // Here we used static email address for your reference. Kindly map your currently logined user email to achieve your scenario. 

    this.userName = "usename"; // Here we used static user name for your reference. Kindly map your currently logined username to achieve your scenario. 

    this.data =  { Name: this.userName, Email: this.email }; 

    this.dataQuery = new Query().addParams('tokens', this.data as any); 

    this.eventSettings = { dataSource: this.dataManager, query: this.dataQuery }; 

  } 

Server.js file: 

    app.post("/GetData", (req, res) => { 

        var query = { CreateBy: req.body.params.tokens.Email }; 

        dbo.collection('ScheduleData').find(query).toArray((err, cus) => { 

            res.send(cus); 

        }); 

    }); 

 

Network tab Image: 

 

 

 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

 

Regards, 

M.Vinitha devi