sidebar component

Author: Ferie

app/common/sidebar/riccardo-sidebar-component.js

@@ -0,0 +1,74 @@
+/**
+ * Sidebar Component
+ * 
+ * @memberOf riccardo
+ * @description
+ * Sidebar component.
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('riccardo').component('riccardoSidebar', {
+        bindings: {},
+        controller: SidebarCmptCtrl,
+        templateUrl: 'app/common/sidebar/riccardo-sidebar.html'
+    });
+
+    SidebarCmptCtrl.$inject = ['$rootScope', '$state', 'peopleService'];
+
+    /**
+     * @name SidebarCmptCtrl
+     * @function SidebarCmptCtrl
+     * @memberOf riccardo.SidebarCmptCtrl
+     * @param $rootScope
+     * @param $state
+     * @description
+     * Sidebar component controller.
+     */
+    function SidebarCmptCtrl($rootScope, $state, peopleService) {
+        var $ctrl = this;
+        $ctrl.open = true;
+
+        $rootScope.overlay = true;
+
+        // Get the people from the service
+        peopleService.getPeople()
+        // Supply the success and failure response
+        .then(successRequest, failureRequest);
+
+        /**
+         * @name successRequest
+         * @function successRequest
+         * @memberOf riccardo.PersonDetailsCmptCtrl
+         * @param response
+         * @description
+         * HTTP success response.
+         */
+        function successRequest(response) {
+            if (!!response.data.People) {
+                $ctrl.people = response.data.People;
+                // Hide loader
+                $rootScope.overlay = false;
+            } else {
+                console.error('Http request error in retrieving the information from the server');
+                // Hide loader
+                $rootScope.overlay = false;
+            }
+        }
+
+        /**
+         * @name failureRequest
+         * @function failureRequest
+         * @memberOf riccardo.PersonDetailsCmptCtrl
+         * @param reason
+         * @description
+         * HTTP failure reason.
+         */
+        function failureRequest(reason) {
+            console.error('Error in sending the request to the server: ', reason.data);
+            // Hide loader
+            $rootScope.overlay = false;
+        }
+    }
+}());

app/common/sidebar/riccardo-sidebar.html

@@ -0,0 +1,43 @@
+<a
+    class="link hamburgerMenu"
+    title="Riccardo Menu"
+    ng-click="$ctrl.open = true"
+></a>
+
+<aside ng-class="{ 'sidebar': true, 'open': $ctrl.open, 'close': !$ctrl.open }">
+    <div class="transparentOverlay" ng-click="$ctrl.open = false"></div>
+    <a aria-label="Dismiss" class="closeSidebar" ng-click="$ctrl.open = false"></a>
+
+    <div class="sidebarScroller">
+        <div class="sidebarLogoContainer">
+            <a ui-sref="riccardo-exercise">
+                <img class="logo" src="assets/images/riccardo-logo.png" alt="Riccardo Logo">
+            </a>
+        </div>
+
+        <div class="sidebarActionContainer">
+            Search: <input type="text" ng-model="$ctrl.search" />
+        </div>
+
+        <div class="sidebarActionContainer">
+            Sort by:
+            <select ng-model="$ctrl.order">
+                <option value="name">Alphabetical</option>
+                <option value="rating">Rating</option>
+            </select>
+        </div>
+
+        <div
+            ng-repeat="person in $ctrl.people | filter: $ctrl.search | orderBy: $ctrl.order"
+            class="sidebarElement"
+        >
+            <a
+                class="sidebarMenuItem link"
+                ui-sref="person-details({ id: person.id, name: person.name, person: person })"
+                ui-sref-active="active"
+            >
+                <span class="sidebarMenuItemLabel">{{ person.name }}</span>
+            </a>
+        </div>
+    </div>
+</aside>