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 Creating the controller from the ember-cli ember g controller create-badge   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); },   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…

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 The Pull Request for the same : https://github.com/fossasia/badgeyay/pull/1415 The Issue for the same : https://github.com/fossasia/badgeyay/issues/1402 Read about Ember data : https://www.emberjs.com/api/data/classes/DS.Model.html Read about Handlebars :   https://guides.emberjs.com/release/templates/handlebars-basics/  

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…

Continue ReadingStructure of Open Event Frontend