Merge pull request #9 from GiorgiB97/contacts

Contacts

src/app/index.module.js

@@ -12,7 +12,8 @@
       'app.dashboard',
       'app.calendar',
       'app.fileManager',
-      'app.chat'
+      'app.chat',
+      'app.contacts'
     ]);
 
 })();

src/app/main/apps/contacts/contacts.controller.js

@@ -0,0 +1,89 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.contacts')
+    .controller('ContactsController', ContactsControllerFn);
+
+  /** @ngInject */
+  function ContactsControllerFn($scope, $http, Contacts, $timeout) {
+    var vm = this;
+
+    // Data
+    vm.contacts = Contacts.data;
+    vm.searchContactsResult = angular.copy(vm.contacts);
+    vm.chunkedContacts = null;
+    vm.alphabet = "#ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    vm.filterBy = '#';
+
+    // Methods
+    vm.chunkArray = chunkArray;
+    vm.searchContacts = searchContacts;
+    vm.deleteContact = deleteContact;
+
+
+    init();
+
+    ///////////
+
+    function init() {
+      vm.chunkedContacts = vm.chunkArray(vm.contacts, 4);
+
+      /*$scope.$watch("vm.contacts", function (newValue) {
+        vm.chunkedContacts = vm.chunkArray(newValue, 4);
+      });*/
+
+      /* $scope.$watch('chunkedData', function(val) {
+       $scope.data = [].concat.apply([], val);
+       }, true); // watch on contact add or remove */
+    }
+
+    function chunkArray(arr, len) {
+      var result = [];
+      for (var i = 0; i < arr.length; i += len) {
+        result.push(arr.slice(i, i + len));
+      }
+      return result;
+    }
+
+    function searchContacts(by) {
+      vm.filterBy = by;
+      vm.searchContactsResult = [];
+      for (var i = 0; i < vm.contacts.length; i++) {
+        if (vm.contacts[i].name[0] == by || vm.contacts[i].name[vm.contacts[i].name.indexOf(' ') + 1] == by) {
+
+          console.log(vm.contacts[i].name[0], vm.contacts[i].name[vm.contacts[i].name.indexOf(' ') + 1], vm.contacts[i]);
+
+          vm.searchContactsResult.push(vm.contacts[i]);
+        }
+      }
+    }
+
+    function deleteContact(id) {
+      var conId = -1;
+      for(var i = 0; i < vm.contacts.length; i++){
+        if(vm.contacts[i].id == id) conId = i;
+      }
+
+      var del = Lobibox.confirm({
+        title: "Delete Contact ?",
+        msg: "Delete '"+vm.contacts[conId].name+"' (id: " + vm.contacts[conId].id + ") ?",
+        callback: function ($this, type, ev) {
+          if(type == "yes"){
+            if(conId > -1) {
+              angular.element("."+id).addClass('shrinkToZero');
+              $timeout(function () {
+                vm.contacts.splice(conId, 1);
+                vm.chunkedContacts = vm.chunkArray(vm.contacts, 4);
+                vm.searchContacts(vm.filterBy);
+                console.log(vm.contacts, vm.chunkedContacts);
+                $scope.$apply();
+              },1000);
+            }
+          }
+        }
+      });
+      del.show();
+    }
+  }
+})();

src/app/main/apps/contacts/contacts.html

@@ -0,0 +1,41 @@
+<div id="contacts">
+    <div class="top-menu">
+        <div class="menu-left text-center">
+            <span class="contacts-title">Contacts</span>
+        </div>
+        <div class="menu-right text-right">
+            <i class="fa fa-search" aria-hidden="true"></i>
+        </div>
+    </div>
+
+    <div class="main clearfix">
+
+        <div class="alphabet-filter" ng-include="'app/main/apps/contacts/view/alphabet-filter.html'"></div>
+
+        <div class="contact-grid">
+
+            <div ng-if="vm.filterBy == '#'" class="row" ng-repeat="contactRow in vm.chunkedContacts">
+
+                <div class="col-sm-3" ng-repeat="contact in contactRow">
+
+                    <div class="contact-card {{contact.id}}" ng-include="'app/main/apps/contacts/view/contact.html'"></div>
+
+                </div>
+
+            </div>
+
+            <div ng-if="vm.filterBy != '#'" class="row">
+
+                <div  class="col-sm-3" ng-repeat="contact in vm.searchContactsResult | filter: {name : vm.filterBy}">
+
+                    <div class="contact-card {{contact.id}}" ng-include="'app/main/apps/contacts/view/contact.html'"></div>
+
+                </div>
+
+                <div ng-if="vm.searchContactsResult[0] == undefined" class="text-center"> <span class="label label-danger"> No results found ! </span></div>
+
+            </div>
+
+        </div>
+    </div>
+</div>

src/app/main/apps/contacts/contacts.less

@@ -0,0 +1,136 @@
+#contacts {
+  height: 100%;
+  position: relative;
+  .top-menu {
+    height: 50px;
+    line-height: 42px;
+    width: 100%;
+    background-color: @brand-primary;
+    .menu {
+      display: table;
+      &-left {
+        width: 250px;
+        border-right: 1px solid rgba(0, 0, 0, 0.2);
+        float: left;
+        color: white;
+        display: table-cell;
+        vertical-align: middle;
+        .contacts-title {
+          line-height: 47px;
+          font-size: 27px;
+        }
+        > div {
+          display: inline-block;
+        }
+      }
+      &-right {
+        width: calc(%(~"100% - %s", 250px));
+        float: right;
+        color: white;
+        display: table-cell;
+        vertical-align: middle;
+        line-height: 50px;
+        > div {
+          display: inline-block;
+        }
+        > i {
+          line-height: 40px;
+          font-size: 20px;
+          margin: 5px;
+          color: white;
+          padding-right: 15px;
+        }
+      }
+    }
+  }
+  .main {
+    width: 100%;
+    height: calc(%(~"100% - %s", 54px));
+    .alphabet-filter{
+      background-color: @gray-lighter;
+      border-bottom: 1px solid darken(@gray-lighter,5%);
+      .ul-wrapper{
+        padding:10px 25px;
+        background-color: transparent;
+        .alphabet{
+          margin:0;
+          padding:0;
+          .char{
+            height:25px;
+            width:50px;
+            margin: 2px;
+            text-align: center;
+            line-height: 14px;
+            padding:4px;
+            border: 1px solid @gray-lighter;
+            border-radius: 2px;
+            background-color: white;
+          }
+        }
+      }
+    }
+    .contact-grid {
+      padding: 25px;
+      background-color: @gray-lighter;
+      .contact-card {
+        width: 100%;
+        height: 360px;
+        margin-bottom: 15px;
+        border: 1px solid rgba(0,0,0,.06);
+        border-radius: 3px;
+        background-color: white;
+        box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24),
+        inset 0 -10px 10px -7px rgba(215, 215, 215, 0.7), inset 0 10px 10px -7px rgba(215, 215, 215, 0.7);
+        &:hover{
+          box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23),
+          inset 0 -5px 10px -7px rgba(215, 215, 215, 0.7), inset 0 5px 10px -7px rgba(215, 215, 215, 0.7);
+        }
+        &.shrinkToZero{
+          opacity:0;
+          transform: scale(0) rotate(720deg);
+          transition: 1s;
+        }
+        .contact-options{
+          position: absolute;
+          font-size: 22px;
+          right:15px;
+          top:0;
+          cursor: pointer;
+        }
+        .contact-container {
+          padding: 5px;
+          &.contact-header {
+            border-bottom: 1px solid rgba(0,0,0,.12);
+            .contact-thumb {
+              height: 80px;
+              width: 80px;
+              border-radius: 50%;
+              margin: 10px 0;
+            }
+            .contact-name {
+              font-size: 18px;
+              font-weight: bold;
+            }
+            .contact-company{
+              font-size: 15px;
+            }
+          }
+          .contact-inner-element{
+            width:90%;
+            margin-left: 5%;
+            margin-right: 5%;
+            padding: 5px 5px 10px 5px;
+            overflow: hidden;
+            border-bottom: 1px solid rgba(0,0,0,.12);
+          }
+          &:last-child{
+            .contact-inner-element {
+              border-bottom: none;
+              height:60px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/app/main/apps/contacts/contacts.module.js

@@ -0,0 +1,41 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.contacts', [])
+    .config(Config);
+
+  /** @ngInject */
+  function Config($stateProvider, lobiNavigationServiceProvider) {
+
+    $stateProvider
+      .state('app.contacts', {
+        url: '/contacts',
+        views: {
+          'content@app': {
+            templateUrl: 'app/main/apps/contacts/contacts.html',
+            controller: 'ContactsController as vm',
+            resolve: {
+              Contacts: function ($http) {
+                return $http.get('app/main/apps/contacts/data/contacts.json')
+                  .then(function (response) {
+                    return response.data;
+                  }, function (error) {
+                    return 'There was an error getting data' + error;
+                  });
+              }
+            }
+          }
+        },
+        bodyClass: 'app-contacts'
+      })
+    ;
+
+    lobiNavigationServiceProvider.saveItem('app.contacts', {
+      text: 'Contacts',
+      state: 'app.contacts',
+      weight: 1,
+      icon: 'fa fa-address-card'
+    });
+  }
+})();