Badgeyay is a badge generator service developed by FOSSASIA community for generating badges for conferences and events. Project is separated into frontend that is designed in EmberJS and backend that is created in Flask. Now The Badges tab in admin shows the total badges that are in the system. Along with different meta attributes like Badge creator name, date and other data. The main problem is that it doesn’t provide a way to search the badges from the admin panel. In this blog post i am going to explain about integrating badge search functionality in admin.
Procedure
- Integrating form element for searching
| <form class=“ui form” {{action ‘findBadges’ on=“submit”}}> class=“field”> class=“ui action input”>
{{input type=“text” autocomplete=‘off’ value=user placeholder=“Search Badges…”}} </div> </form> |
- Main difficulty is to send the data to route components as we can’t pass the props, like we pass in components. The workaround is to send the query as route parameter.
| findBadges() { var userTerm = this.get(‘user’); this.transitionToRoute(‘admin.badges.list’, userTerm); } |
- Extracting the query parameter and making request to backend
| if (params.badge_status === ‘all’) { filter.state = ‘all’; } else if (params.badge_status === ‘created’) { filter.state = ‘created’; } else if (params.badge_status === ‘deleted’) { filter.state = ‘deleted’; } else { filter.filter = params.badge_status; } |
- Creating query in controller to fetch the data for the same.
| if ‘filter’ in args.keys(): badges = base_query.filter(User.username.contains(args[‘filter’])) badges = badges.paginate(page, app.config[‘POSTS_PER_PAGE’], False) schema = AdminBadgeSchema(many=True) return jsonify(schema.dump(badges.items).data) |