<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="vlocityTest" ng-controller="baseCtrl">
<div class="card">
<div class="card-block">
<top-header></top-header>
{{searchQuery}}
<div ng-controller="PeopleController">
<div class="row">
<div class="col-md-4">
<people-list></people-list>
</div>
<div class="col-md-8">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
(function(angular) {
'use strict';
var app = angular.module('vlocityTest', ['ngRoute']);
app.controller('baseCtrl', function($scope) {
});
function TopHeaderController($scope) {
}
app.component('topHeader', {
templateUrl: 'topHeader.html',
controller: TopHeaderController
});
app.service('peopleSvc', function($http) {
var person;
this.getPeople = function() {
return $http.get('people.json');
};
this.setPerson = function(person) {
this.person = person;
}
this.getPerson = function() {
return this.person;
}
});
function PeopleListController($scope, $location, peopleSvc) {
var vm = this;
peopleSvc.getPeople().then(function(response) {
vm.people = response.data.People;
});
$scope.viewPerson = function(person) {
peopleSvc.setPerson(person);
$scope.person = person;
$location.path('/person/' + person.name);
};
}
app.component('peopleList', {
templateUrl: 'peopleList.html',
controller: PeopleListController,
controllerAs: 'vm'
});
app.controller('PeopleController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
});
app.controller('PersonDetailController', function($scope, $routeParams, peopleSvc) {
$scope.name = 'PersonDetailController';
$scope.params = $routeParams;
$scope.person = peopleSvc.getPerson();
$scope.messages = new Array();
$scope.fullHearts = $scope.person.rating;
$scope.emptyHearts = 5 - parseInt($scope.fullHearts);
$scope.likesNum = $scope.person.Likes.length;
$scope.dislikesNum = $scope.person.Dislikes.length;
$scope.totalRows = ($scope.likesNum >= $scope.dislikesNum)?$scope.likesNum:$scope.dislikesNum;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.sendMessage = function() {
var retVal = prompt("Enter your message : ", "");
if(retVal){
$scope.messages.push(retVal);
}
}
});
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/person/:person', {
templateUrl: 'personDetail.html',
controller: 'PersonDetailController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
})(window.angular);
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
/* Styles go here */
body{
font-family: 'Open Sans', sans-serif;
}
.top-header{
margin-top:15px;
.user-menu{
margin-left:10px;
}
}
.navbar-nav{
margin:0px;
}
.search-input{
height:40px;
}
.user-menu{
float:right;
text-align:right;
a{
color:#3E3F3A;
padding:5px !important;
&:hover, &:focus{
background:white !important;
}
span:first-child{
margin-right:5px;
}
.glyphicon.glyphicon-user{
font-size:22px;
}
}
}
.card{
margin:15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.card .card-block{
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1em;
}
.btn-grey{
background:#3E3F3A;
color:white;
&:hover, &:focus{
color:white;
}
}
.rating{
margin-top:10px;
span{
font-size:22px;
}
}
.description-container{
margin:15px 0px;
border-left:5px solid #DFD7CB;
padding-left:10px;
}
.mb-1{
margin-bottom:10px;
}
Your task is to implement the following UI using Angular 1.6.x, JavaScript, CSS and HTML5.
Mockup image: https://www.dropbox.com/s/21r6c10bpr0naud/vlocity-code-challenge-screenshot.PNG?dl=0
Please make a Public Fork of this plunkr and share with us once you're done!
The UI consists of:
- A top bar which consists of a search box to search for a contact,
the login user and profile photo.
- The left side bar which consists of a list of full names of contacts.
- The right main panel which consists of the details about the selected contact.
The details include the selected contact photo, a button to send a message,
rating (number of hearts with a max of 5), a description of the contact.
A table of likes and dislikes.
Requirements:
- Each component(sidebar, center panel, header, etc) should be a directive with its own template.
- Fetch the people inside of a Service.
- Make sure the search works, filtering out the people on the list.
Considerations:
- The mockup is just a guideline, you can use any CSS library out there and make it look great (extra points)
- You can use CSS inside the style.scss
Extra points:
- Using SCSS
- Making the UI Reponsive
- Implementing the messaging feature
{
"People": [
{
"name": "Andrew Amernante",
"rating": 3,
"img": "http://www.fillmurray.com/200/200",
"Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes": [
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
},
{
"name": "Frank Wang",
"rating": 5,
"img": "http://www.fillmurray.com/200/201",
"Description": "Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
"Likes": [
"Frank",
"Manchester United",
"Football",
"Programming"
],
"Dislikes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
]
},
{
"name": "Sissi Chen",
"rating": 5,
"img": "http://www.fillmurray.com/200/202",
"Description": "Aaah! Natural light! Get it off me! Get it off me! Oh, loneliness and cheeseburgers are a dangerous mix. D'oh. Here's to alcohol, the cause of all life's problems.",
"Likes": [
"Cats",
"the beach",
"Chopin",
"Blue things"
],
"Dislikes": [
"Birds"
]
},
{
"name": "Diego Garcia",
"rating": 2,
"img": "http://www.fillmurray.com/200/204",
"Description": "Facts are meaningless. You could use facts to prove anything that's even remotely true! I prefer a vehicle that doesn't hurt Mother Earth. It's a gocart, powered by my ownsense of selfsatisfaction. You don't win friends with salad.",
"Likes": [
"Talking Spanish",
"Spanish food",
"Spanish things",
"Football"
],
"Dislikes": [
"Not talking spanish",
"Chopin"
]
},
{
"name": "Fuad Rashid",
"rating": 4,
"img": "http://www.fillmurray.com/200/206",
"Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes": [
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
}
]
}
<div class="box-menu">
<ul class="list-group">
<li class="list-group-item" ng-repeat="p in vm.people | filter:$parent.searchQuery" ng-click="viewPerson(p)">
{{p.name}}<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</li>
</ul>
</div>
<div class="row mb-1">
<div class="col-md-6 col-sm-6 col-xs-7">
<div class="input-group">
<span class="input-group-addon search-input"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="text" class="form-control search-input" ng-model="$parent.searchQuery" placeholder="Search" />
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-5">
<ul class="nav navbar-nav navbar-right user-menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>Andres </span><span class="glyphicon glyphicon-user"></span> <span class="caret"></span></a>
<ul class="dropdown-menu" id="dropdown">
<li><a href="#">Profile</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Log out</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3"><div class="img-box"><img src="{{person.img}}" class="img-rounded" width="100%" border="0"></div></div>
<div class="col-md-9 col-sm-9 col-xs-9">
<button class="btn btn-grey" ng-click="sendMessage()">SEND MESSAGE!</button>
<div class="clear"></div>
<div class="rating"><span ng-repeat="i in getNumber(fullHearts) track by $index" class="glyphicon glyphicon-heart"></span><span ng-repeat="i in getNumber(emptyHearts) track by $index" class="glyphicon glyphicon-heart-empty"></span></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="description-container">
<p>{{person.Description}}</p>
</div>
</div>
<div class="col-md-12">
<table class="table table-bordered table-striped">
<tr><th>Likes</th><th>Dislikes</th></tr>
<tr ng-repeat="i in getNumber(totalRows) track by $index">
<td>{{person.Likes[$index]}}</td>
<td>{{person.Dislikes[$index]}}</td>
</tr>
</table>
</div>
<div class="col-md-12" ng-if="messages.length > 0">
<h3>Messages</h3>
<ul class="list-group">
<li class="list-group-item" ng-repeat="m in messages">{{m}}</li>
</ul>
</div>
</div>