Gfk 02/2019

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Gfk Excercise'
});

requirements.template.hbs

<h2>Requirements: Employees List</h2>
<div class='col-md-12 request'>

<p> This image represents the list of the employees.</p>
<img src="https://i.ibb.co/v3JZS3d/32408a5bbe054ed8b0123fc5b98e7fe2.png" alt="32408a5bbe054ed8b0123fc5b98e7fe2" border="0">
<ul class='list'>
	<li>
  	<p>You can always click New Employee button which redirects to create a new employee. </p>
  </li>
  <li>
    <p>The delete button is enabled only when there is at least one employee selected, otherwise it is disabled.
    </p>
  </li>
  <li>
    <p>When there are multiple employees selected it needs to show text "(2) Delete" that means the number of employees selected plus Delete text.</p>
  </li>
  <li>
  	<p>When Employees are deleted it should just notify us that employees were deleted successfully, or in case an error happens show the error in a friendly way.</p>
  </li>
  <li>
  	<p>
When you click on one of the employees it should redirect you to the employee detail.
</p>
  </li>
</ul>

<blockquote>
  <p>API Endpoints:</p>
  <a href='http://5c57fdfb9815f6001490359a.mockapi.io/employees' target="_blank">http://5c57fdfb9815f6001490359a.mockapi.io/employees</a>
</blockquote>

<pre>GET /employees - returns list of employees</pre>
<pre>GET /employees/{id} - returns one</pre>
</div>

<h2>Requirements: Employee Details</h2>

<div class='col-md-12 request'>

  <p> This image represents the list of the employees.</p>
<img src="https://i.ibb.co/XC2xkYD/Dd072554dab2e85d6da2972b43d550537.png" alt="Dd072554dab2e85d6da2972b43d550537" border="0">

<ul class='list'>
	<li>
  Screen is accessible when you edit an employee or create a new one.
  </li>
  <li>When you create a new one the screen is empty.</li>
  <li>When you edit an employee it contains the information of the employee.</li>
  <li>
  To create an employee the fields that are mandatory include:
*Name, Surname, Country</li>
   <li>
   If you provide the phone number which is optional it needs to validate it to contain only numbers.</li>
    <li>
    The Email address is optional but if given it needs to contain a valid email
    </li>
    <li>Save button is enabled only when all mandatory fields are filled and in case of optional fields if they are filled they need to be valid.</li>
    <li>Cancel button will take you back to the list.</li>
  </ul>
<blockquote>
  <p>API Endpoints:</p>
  <a href='http://5c57fdfb9815f6001490359a.mockapi.io/employees' target="_blank">http://5c57fdfb9815f6001490359a.mockapi.io/employees</a>
  <a href='http://5c57fdfb9815f6001490359a.mockapi.io/employees' target="_blank">http://5c57fdfb9815f6001490359a.mockapi.io/countries</a>
</blockquote>

<pre>GET /employees/{id} - returns one employee</pre>
<pre>POST /employees - saves an employee</pre>
<pre>PUT /employees/{id} - updates an employee</pre>

<pre>GET /countries - returns list of countries</pre>
<pre>GET /countries/{id} - returns one country by id</pre>


</div>

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('requirements', { path: '/' });
});

export default Router;

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.request {
	color: #131516;
  font-size: 12px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<div class="row col-md-12">
{{outlet}}
</div>
<br>

tests.helpers.destroy-app.js

import { run } from '@ember/runloop';

export default function destroyApp(application) {
  run(application, 'destroy');
}

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes.autoboot = true;
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import { assign } from '@ember/polyfills';

let attributes = assign({ rootElement: '#main' }, config.APP);
setApplication(Application.create(attributes));

start();

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "bootstrap": "https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.2"
  }
}