Terms
- The expected time to complete is under 2 hours
- You will be given access to an existing repo of an admin template will all the necessary UI elements already provided
- You are expected to implement the feature using the already provided UI elements/kit from the admin template repo
GitHub Repo: https://github.com/iamport-intl/admin-template
Problem statement
- Build frontend in Vue.js for the requirement
- Use the Vuejs Admin template that we provide
- Implement the feature and raise pull request (PR) against the above repo
- We will review the PR and get back to you
Basic CRUD page - High-Level Requirements
-
A CRUD page to create payment links - Refer to the screenshot
- CRUD page will have a table - the table will show a list of created payment links
- A 'Create' Action on the top right
- Create Action will open a modal for payment link creation
- Templates to use
- Table templates demo - https://coreui.io/vue/demo/free/3.1.1/#/base/tables
- Screenshot
-
Modal for payment link creation - Refer to the screenshot
- Amount field - validation with only positive decimal numbers - required field
- Currency drop-down - required fields
- Customer name, email, and phone fields with email and phone validations - optional fields
- Ignore other fields in the Screenshot - need not implement those
- After creation, the payment link should be added to the table
- Only update the vuex store
- Need not use any backend
- Payment links are only created. No need to provide an update or delete operations
- Templates to use
- Form samples - https://coreui.io/vue/demo/free/3.1.1/#/base/forms
- Modal dialogs - https://coreui.io/vue/demo/free/3.1.1/#/notifications/modals
- Screenshot
Why we decided to create CoreUI? Please read this article: Jack of all trades, master of none. Why Boostrap Admin Templates suck.
This is not just another Admin Template. It goes way beyond hitherto admin templates thanks to:
- Wonderful styling delivered by bootstrap compatible css library CoreUI,
- Dedicated component library,
- Dedicated vue tooling libraries (coreui-vue-chartjs, coreui-icons-vue),
- Over 500 free svg icons consistent with our styling,
- Transparent code and file structure
- Possibility of extension to pro version which offers even more!
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
NOTE: Please remember to star this project to get new versions updates of this template.
A fully functional demo is available at CoreUI
# clone the repo
$ git clone https://github.com/coreui/coreui-free-vue-admin-template.git CoreUI-Vue
# go into app's directory
$ cd CoreUI-Vue
# install app's dependencies
$ npm install# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run build
# run linter
npm run lint
# run unit tests
npm run test:unit
# run e2e tests
npm run test:e2e
For a detailed explanation on how things work, check out the Vue CLI Guide.
CoreUI tools documentation:
- Components documentation: CoreUI Vue library
- Styles documentation: CoreUI styles
- Icons documentation: CoreUI Icons
Copyright 2020 creativeLabs Łukasz Holeczek. Code released under the MIT license.
There is only one limitation - you cannot re-distribute the CoreUI as stock nor if you modify the CoreUI. In the past we faced some problems with persons who tried to sell CoreUI based templates.