Controllers

Read more about the article Ember Controller for Badge Generation In Badgeyay

Ember Controller for Badge Generation In Badgeyay

Badgeyay is an open source project developed by FOSSASIA Community. This project aims towards giving a platform for badge generation using several customizations options. Current structure of project is in two parts to maintain modularity, which are namely backend, developed in flask, and frontend, developed in ember.

After refactoring the frontend and backend API we need to create a controller for the badge generation in frontend. Controller will help the components to send and receive data from them and prepare the logic for sending request to API so that badges can be generated and can receive the result as response from the server. Particularly we need to create the controller for badge generation route, create-badges.

As there are many customizations option presented to user, we need to chain the requests so that they sync with each other and the logic should not break for the badge generation.

Procedure

  1. Creating the controller from the ember-cli
ember g controller create-badge

 

  1. After the component generation, we need to create actions that can be passed to components. Let’s build action to submit form and then chain the different actions together for the badge generation.
submitForm() {
   const _this = this;
   const user = _this.get(‘store’).peekAll(‘user’);
   let uid;
   user.forEach(user_ => {
     uid = user_.get(‘id’);
   });
   if (uid !== undefined && uid !== ”) {
     _this.set(‘uid’, uid);
   }

   let badgeData = {
     uid     : _this.uid,
     badge_size : ‘A3’
   };

   if (_this.csvEnable) {
     badgeData.csv = _this.csvFile;
   }
   if (_this.defFontColor !== ” && _this.defFontColor !== undefined) {
     badgeData.font_color = ‘#’ + _this.defFontColor;
   }
   if (_this.defFontSize !== ” && _this.defFontSize !== undefined) {
     badgeData.font_size = _this.defFontSize.toString();
   }
   if (_this.defFont !== ” && _this.defFont !== undefined) {
     badgeData.font_type = _this.defFont;
   }

   _this.send(‘sendManualData’, badgeData);

 },

 

  1. As we can see in the above code snippet that _this.send(action_name, arguments) is calling another action sendManualData. This action then sends a network request to the backend if the Manual data is selected as input source otherwise will go with the CSV upload. If no option is chosen then it will show an error on the user screen, notifying him to select one input source.
sendManualData(badgeData) {
     const _this = this;
     if (_this.manualEnable) {
       let textEntry = _this.get(‘store’).createRecord(‘text-data’, {
         uid   : _this.uid,
         manual_data : _this.get(‘textData’),
         time   : new Date()
       });
       textEntry.save().then(record => {
         _this.set(‘csvFile’, record.filename);
         badgeData.csv = _this.csvFile;
         _this.send(‘sendDefaultImg’, badgeData);
         _this.get(‘notify’).success(‘Text saved Successfully’);
       }).catch(err => {
         let userErrors = textEntry.get(‘errors.user’);
         if (userErrors !== undefined) {
           _this.set(‘userError’, userErrors);
         }
       });
     } else if (_this.csvEnable) {
       if (_this.csvFile !== undefined && _this.csvFile !== ”) {
         badgeData.csv = _this.csvFile;
         _this.send(‘sendDefaultImg’, badgeData);
       }
     } else {
       // No Input Source specified Error
     }
   },

 

The above code will choose the manual data if the manual data boolean flag is set else not, and then does a network request and wait for the promise to be resolved. As soon as the promise is resolved it calls another action to for the default image.

  1. After selecting the input source, now the background for the badge has to be selected. It will look for the boolean flags of the defaultImage, backgroundColorImage, customImage and will make the network request accordingly.
sendDefaultImg(badgeData) {
     const _this = this;
     if (_this.defImage) {
       let imageRecord = _this.get(‘store’).createRecord(‘def-image-upload’, {
         uid    : _this.uid,
         defaultImage : _this.defImageName
       });
       imageRecord.save()
         .then(record => {
           _this.set(‘custImgFile’, record.filename);
           badgeData.image = _this.custImgFile;
           _this.send(‘sendBadge’, badgeData);
         })
         .catch(error => {
           let userErrors = imageRecord.get(‘errors.user’);
           if (userErrors !== undefined) {
             _this.set(‘userError’, userErrors);
           }
         });
     } else if (_this.custImage) {
       if (_this.custImgFile !== undefined && _this.custImgFile !== ”) {
         badgeData.image = _this.custImgFile;
         _this.send(‘sendBadge’, badgeData);
       }
     } else if (_this.colorImage && _this.defColor !== undefined && _this.defColor !== ”) {
       console.log(_this.defColor);
       let imageRecord = _this.get(‘store’).createRecord(‘bg-color’, {
         uid : _this.uid,
         bg_color : _this.defColor
       });
       imageRecord.save()
         .then(record => {
           badgeData.image = record.filename;
           _this.send(‘sendBadge’, badgeData);
         })
         .catch(error => {
           let userErrors = imageRecord.get(‘errors.user’);
           if (userErrors !== undefined) {
             _this.set(‘userError’, userErrors);
           }
         });
     } else {
       // Inflate error for No Image source.
     }
   },

 

After the promise resolvement, the final action is called to send badge data payload to backend api for badge generation.

  1. After the complete preparation of the payload, now it’s time to send the payload to the backend api for the badge generation and after the promise resolvement showing the respective downloadable link in the frontend.
sendBadge(badgeData) {
     const _this = this;
     let badgeRecord = _this.get(‘store’).createRecord(‘badge’, badgeData);
     badgeRecord.save()
       .then(record => {
         _this.set(‘badgeGenerated’, true);
         _this.set(‘genBadge’, record.id);
         _this.get(‘notify’).success(‘Badge generated Successfully’);
       })
       .catch(err => {
         console.error(err.message);
       });
   },

 

Now after the promise resolvement the local variable badgGenerated is set to true so that the success message can be shown in the frontend for successful badge generation along with the link.

Link to respective PR – Link

Topics Involved

  • Chaining of actions and requests
  • Manipulating DOM on the conditional statements
  • Component bindings
  • Ember data
  • Promise resolvement

Resources

  • Link to ember data for the API requests and promise resolvement – Link
  • Implementing Controllers in Ember – Link
  • Chaining actions together in ember – Link
Continue ReadingEmber Controller for Badge Generation In Badgeyay

Enhancing pagination in Badgeyay

A Badge generator like Badgeyay must be able to generate, store and export the user data as and when needed. This blog post covers the enhancement of pagination in the frontend of badgeyay project. There are small “next” and “previous” links to toggle between pages..

Enhancing the current way of links

The problem with the pagination links was that in case of no more badges/users etc, the links would always appear on the bottom right of the table. The previous link must not appear when no previous page is there and vice versa for the next link.

Step 1 : Adding the package to package.json

Image link is the link to the user’s uploaded image on remote firebase server.

{{#if allow}}
<tfoot>
<tr>
<th colspan=“5”>
<div class=“ui right floated pagination menu”>
{{#if allow_prev}}
<a class=“icon item” {{action ‘prevPage‘}}>
<i class=“left chevron icon”></i>
</a>
{{/if}}
{{#if allow_next}}
<a class=“icon item” {{action ‘nextPage‘}}>
<i class=“right chevron icon”></i>
</a>
{{/if}}
</div>
</th>
</tr>
</tfoot>
{{/if}}

Step 2 : Initializing the variables in setupController

Once we have added the if construct to the badgeyay frontend then we need to add the variable initialization in the setupController method in EmberJS.

setupController(controller, model) {
this._super(…arguments);
set(controller, ‘reports’, model);
if (model.length < 9) {
set(controller, ‘allow_prev’, false);
set(controller, ‘allow_next’, false);
set(controller, ‘allow’, false);
}
}

Step 3 : Implementing state changed in the controllers

Now we need to handle the situation when a user clicks the links and there are more or less links to display. This is done by checking the length of the model in the controller.

if (this.page === 1) {
this.set(‘allow_prev’, false);
} else {
this.set(‘allow_prev’, true);
}
this..set(‘allow_next’, true);

Same needs to be done for all the controllers that have pagination available.

And finally we need to pass these variables in the component template. One such example is given below.

<div class=“ui grid user-grid”>
<div class=“row”>
<div class=“sixteen wide column”>
{{badge-table badges=badges user=user session=session sendbadgeId=(action ‘deleteBadge’ badge) prevPage=(action ‘prevPage’) nextPage=(action ‘nextPage’) allow_prev=allow_prev allow_next=allow_next allow=allow}}
</div>
</div>
</div>

Finally, we have the pagination links working as desired..

Screenshot of changes

Resources

 

Continue ReadingEnhancing pagination in Badgeyay
Read more about the article Structure of Open Event Frontend

Structure of Open Event Frontend

In Open Event Frontend, new contributors always fall into a dilemma of identifying the proper files where they have to make changes if they want to contribute. The project structure is quite complex and which is obvious because it is a large project. So, in this blog, we will walk through the structure of Open Event Frontend.

Following are the different folders of the project explained:

Root:
The root of the project contains folders like app, config, kubernetes, tests, scripts. Our main project is in the app folder where all the files are present. The config folder in the root has files related to the deployment of the app in development, production, etc. It also has the environment setup such as host, api keys, etc. Other files such as package.json, bower.json, etc are basically to store the current versions of the packages and to ease the installation of the project.

App:
The app folder has all the files and is mainly classified into the following folder:
adapters
components
controllers
helpers
Initializers
mixins
models
routes
serializers
services
styles
templates
transforms
utils

The folders with their significance are listed below:

Adapters: This folder contains the files for building URLs for our endpoints. Sometimes it happens to have a somewhat customised URL for an endpoint which we pass through adapter to modify it.
Components: This folder contains different components which we reuse in our app. For example, the image uploader component can be used at multiple places in our app, so we keep such elements in our components. This folder basically contains the js files of all the components(since when we generate a component, a js file and a hbs template is generated).
Controllers: This folder contains the controller associated with each route. Since the main principle of ember js is DDAU i.e data down actions up, all the actions are written in the files of this folder.
Helpers: Many a time it happens that, we want to format date, time, encode URL etc. There are some predefined helpers but sometimes custom helpers are also needed. All of them have been written in helpers folder.
Initializers: This folder has a file for now called ‘blanket.js’ which basically injects the services into our routes, components. So if you want to write any service and want to inject it into routes/components, it should go in here.
Mixins: In EmberJS the Mixin class can create objects whose properties and functions can be shared amongst other classes and instances. This allows for an easy way to share behavior between objects as well as design objects that may need multiple inheritance. All of them used for the application are in the mixins folder.
Models: This folder contains the schema’s for our data. Since we are using ember data, we need to have proper skeleton of the data. All of this goes it this folder. Observing this folder will show you some models like user, event, etc.
Routes: This folder contains the js files of the routes created. Routes handle which template to render and what to return from the model, etc.
Serializers: We use serializers to modify the data that ember sends automatically in a request. Consider we want to get a user with the help of user model, and don’t want to get the password attribute present in it. We can thus omit that by defining it in a serializer.
Services: Services are the ember objects which are available throughout the running time of the application. These are used to perform tasks like getting current user model, making third party API calls etc. All such services go in this folder.
Styles: As the name infers, all the style sheets go in here.
Templates: A template is generated with generation of each route and component. All of them go here. Thus, the markup will be written over here.
Transforms: Ember Data has a feature called transforms that allow you to transform values before they are set on a model or sent back to the server. In our case, we have a transform called moment.
Utils: This folder contains some functions exported as modules which are reusable. There is some JSON data as well.

References: Ember JS official guide: https://guides.emberjs.com/v2.17.0/
Blog posts: https://spin.atomicobject.com/2015/09/17/ember-js-clean/
http://www.programwitherik.com/ember-pods/

Continue ReadingStructure of Open Event Frontend