Patch 1 - Eduardo Kandalski

README.md

@@ -1,26 +1,7 @@
-Teste para processo seletivo para desenvolvedor front-end da Editora Positivo.
+A solução se baseia em gerenciar o 'body' do documento HTML com a diretiva do AngularJS. Dentro do arquivo app.js existe o controller 'heroListCtrl' que controla os bindings, os filtros, a renderização dos componentes dinâmicos e chamada à API da MARVEL.
 
-Teste Front-End - Editora Positivo
-Usando a API da Marvel (https://developer.marvel.com), crie uma Single Page Application mostrando uma listagem dos personagens para o usuário consultar. O usuário tem que poder filtrar os personagens com base no nome, inicial ou data de modificação (ano), sendo que a seleção de um filtro afeta o outro. A aplicação tem que ser feita em AngularJS e fazer uso de pelo menos uma das diretivas padrão do framework. O layout (cores, ícones, imagens) fica a seu cargo.
+Foi usada a biblioteca Materialize para aplicar estilos. Como não a mesma não foi extendida, não foi usado SASS, somente a inclusão da biblioteca CSS e JS via CDN.
 
-Observação: No arquivo README do projeto explique o funcionamento e a solução adotada na sua implementação do desafio.
+Para completo funcionamento, no arquivo app.js é necesário informar as chaves pública e privada da API, basta colocar os valores nas variáveis $scope.pukey (Pública) e $scope.prkey (Privada).
 
-Frameworks/Bibliotecas:
-
-* AngularJS
-* SASS ou LESS
-* Material Design
-
-Diferenciais:
-
-* Responsividade
-* Componentização
-* Orientação a objeto
- Critérios:
-
-* Performance
-* Usabilidade
-* Criatividade
-* Clean code (código limpo e organizado)
-* Semântica do HTML
-* Estruturação do CSS
+A chamada da API solicita os primeiros 50 heróis da lista. Por única chamada o limite é 100, mas para fins de melhor performance foi restringido à 50. E sobre essa lista os filtros por nome e ano de modificação podem ser feitos. A lista informa um avatar com a imagem do herói, o nome e a data da ultima modificação.

app.js

@@ -0,0 +1,34 @@
+angular.
+    module('app', ['angular-md5'])
+    .controller('heroListCtrl',
+        function ($scope, $http, md5) {
+            $scope.pukey = ''; //INFORM HERE THE PUBLIC API KEY
+            $scope.prkey = ''; //INFORM HERE THE PRIVATE API KEY
+            $scope.ts = new Date().getTime();
+            $scope.hash = md5.createHash(`${$scope.ts}${$scope.prkey}${$scope.pukey}`);
+            $scope.url = `http://gateway.marvel.com/v1/public/characters?limit=50&ts=${$scope.ts}&apikey=${$scope.pukey}&hash=${$scope.hash}`;
+            $scope.years = [
+                '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010',
+                '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000',
+                '1999', '1998', '1997', '1996', '1995', '1994', '1993', '1992', '1991', '1990',
+                '1989', '1988', '1987', '1986', '1985', '1984', '1983', '1982', '1981', '1980',
+                '1979', '1978', '1977', '1976', '1975', '1974', '1973', '1972', '1971', '1970',
+                '1969', '1968', '1967', '1966', '1965', '1964', '1963', '1962', '1961', '1960',
+                '1959', '1958', '1957', '1956', '1955', '1954', '1953', '1952', '1951', '1950',
+                '1949', '1948', '1947', '1946', '1945', '1944', '1943', '1942', '1941', '1940'
+            ];
+            $scope.dateFilter = function (hero) {
+                if ($scope.yearF !== undefined && $scope.yearF !== null) {
+                    let date1 = new Date(`${$scope.yearF}-01-01T00:00:00-0400`).getTime();
+                    let date2 = new Date(`${$scope.yearF}-12-31T23:59:59-0400`).getTime();
+                    let compD = new Date(hero.modified).getTime();                        
+                    return ( compD >= date1 && compD <= date2 );	
+                } else {
+                    return true;
+                }
+            }
+
+            $http.get($scope.url).then(function(response){
+                $scope.resp = response.data;
+            });
+    });

index.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
+    <title>Marvel Heroes</title>        
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
+</head>
+
+
+<body ng-app="app" ng-controller="heroListCtrl" class="container">
+
+    <div class = "card-panel red lighten-1 white-text"><h3>MARVEL's Hero List</h3></div>
+
+    <div class="row">
+        <form class="col s12">
+            <div class="row">
+                <div class="input-field col s4">
+                    <input placeholder="Enter a name to filter" id="name" type="text" ng-model="nameF">
+                    <label for="name">Name</label>
+                </div>
+                <div class="input-field col s2">
+                    <select ng-model="yearF" ng-options="y for y in years">
+                        <option value="">-- choose a year to filter --</option>                     
+                    </select>
+                    <label>Year of change</label>
+                </div>
+            </div>
+        </form>
+    </div>
+    <ul class="collection">
+        <li class="collection-item avatar" ng-repeat="hero in resp.data.results | filter: {name: nameF} | filter: dateFilter" >
+            <img src="{{hero.thumbnail.path}}.{{hero.thumbnail.extension}}" alt="{{hero.id}}" class="circle">                    
+            <span class="title">{{hero.name}}</span>
+            <p>Last change: {{hero.modified}}</p>
+        </li>
+    </ul>
+
+    <footer class="page-footer red">
+        <div class="footer-copyright red lighten-1">
+            <div class="container">
+                <a class="grey-text text-lighten-4" href="http://marvel.com\" target="_blank">Data provided by Marvel. © 2019 MARVEL</a>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-md5/0.1.10/angular-md5.min.js"></script>
+    <script src="app.js"></script>
+    <script>
+        $(document).ready(function() {
+            $('select').material_select();
+        });
+    </script>
+</body>
+
+</html>