Modal component and sweet alerts (#41)

* Added ui modal component

* Added sweet alert

angular/app/components/nav-sidebar/nav-sidebar.component.html

@@ -86,7 +86,7 @@
           <li><a ui-sref="app.uibuttons"><i class="fa fa-circle-o"></i> Buttons</a></li>
           <li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Sliders</a></li>
           <li><a ui-sref="app.uitimeline"><i class="fa fa-circle-o"></i> Timeline</a></li>
-          <li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Modals</a></li>
+          <li><a ui-sref="app.uimodal"><i class="fa fa-circle-o"></i> Modals</a></li>
         </ul>
       </li>
       <li class="treeview">

angular/app/components/ui-modal/ui-modal.component.html

@@ -0,0 +1,60 @@
+<script type="text/ng-template" id="myModalContent.html">
+  <div class="modal-header">
+    <h3 class="modal-title">I'm a modal!</h3>
+  </div>
+  <div class="modal-body">
+    <ul>
+      <li ng-repeat="item in mvm.items">
+        <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
+      </li>
+    </ul>
+    <h4>Selected: <small><code>{{ selected.item }}</code></small></h4>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-primary" type="button" ng-click="mvm.ok()">OK</button>
+    <button class="btn btn-warning" type="button" ng-click="mvm.cancel()">Cancel</button>
+  </div>
+</script>
+<section class="content-header">
+  <h1>
+    Modals
+    <small>new</small>
+  </h1>
+  <ol class="breadcrumb">
+    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
+    <li><a href="#">UI</a></li>
+    <li class="active">Modals</li>
+  </ol>
+</section>
+<section class="content">
+  <div class="box box-default">
+    <div class="box-header with-border">
+      <i class="fa fa-clone"></i>
+      <h3 class="box-title">Modals</h3>
+    </div>
+    <div class="box-body">
+      <button type="button" class="btn btn-default" ng-click="vm.modalOpen()">Open me!</button>
+      <button type="button" class="btn btn-default" ng-click="vm.modalOpen('lg')">Large modal</button>
+      <button type="button" class="btn btn-default" ng-click="vm.modalOpen('sm')">Small modal</button>
+      <button type="button" class="btn btn-default" ng-click="vm.toggleModalAnimation()">Toggle Animation ({{ vm.animationsEnabled }})</button>
+      <div ng-show="selected"><h4>Selection from a modal: <small><code>{{ selected }}</code></small></h4></div>
+    </div>
+  </div>
+  <div class="box box-default">
+    <div class="box-header with-border">
+      <i class="fa fa-info-circle"></i>
+      <h3 class="box-title">Sweet Alerts</h3>
+    </div>
+    <div class="box-body">
+      <button type="button" class="btn btn-default" ng-click="vm.swalBasic()">Basic</button>
+      <button type="button" class="btn btn-success" ng-click="vm.swalSuccess()">Success Message</button>
+      <button type="button" class="btn btn-danger" ng-click="vm.swalConfirm()">Confirm</button>
+      <button type="button" class="btn btn-primary" ng-click="vm.swalAjax()">AJAX</button>
+      <button type="button" class="btn btn-info" ng-click="vm.swalDecide()">Decision</button>
+      <button type="button" class="btn btn-info" ng-click="vm.swalImage()">Custom Image</button>
+      <button type="button" class="btn btn-info" ng-click="vm.swalHtmlMessage()">HTML Message</button>
+      <button type="button" class="btn btn-info" ng-click="vm.swalAutoClose()">Auto Close</button>
+      <button type="button" class="btn btn-info" ng-click="vm.swalPrompt()">Prompt</button>
+    </div>
+  </div>
+</section>

angular/app/components/ui-modal/ui-modal.component.js

@@ -0,0 +1,173 @@
+class UiModalController {
+  constructor ($scope, $uibModal, $log, API) {
+    'ngInject'
+
+    this.API = API
+    this.$uibModal = $uibModal
+    this.$log = $log
+    this.$scope = $scope
+    this.items = ['item1', 'item2', 'item3']
+    this.animationsEnabled = true
+  }
+
+  modalOpen (size) {
+    let $uibModal = this.$uibModal
+    let $scope = this.$scope
+    let $log = this.$log
+    let items = this.items
+
+    var modalInstance = $uibModal.open({
+      animation: this.animationsEnabled,
+      templateUrl: 'myModalContent.html',
+      controller: this.modalcontroller,
+      controllerAs: 'mvm',
+      size: size,
+      resolve: {
+        items: function () {
+          return items
+        }
+      }
+    })
+
+    modalInstance.result.then(function (selectedItem) {
+      $scope.selected = selectedItem
+    }, function () {
+      $log.info('Modal dismissed at: ' + new Date())
+    })
+  }
+
+  modalcontroller ($scope, $uibModalInstance, items) {
+    this.items = items
+
+    $scope.selected = {
+      item: items[0]
+    }
+
+    this.ok = function () {
+      $uibModalInstance.close($scope.selected.item)
+    }
+
+    this.cancel = function () {
+      $uibModalInstance.dismiss('cancel')
+    }
+  }
+
+  toggleModalAnimation () {
+    this.animationsEnabled = !this.animationsEnabled
+  }
+
+  swalConfirm () {
+    swal({
+      title: 'Are you sure?',
+      text: 'You will not be able to recover this imaginary file!',
+      type: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#DD6B55',
+      confirmButtonText: 'Yes, delete it!',
+      closeOnConfirm: false
+    }, function () {
+      swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
+    })
+  }
+
+  swalBasic () {
+    swal("Here's a message!", "It's pretty, isn't it?")
+  }
+
+  swalSuccess () {
+    swal('Good job!', 'You clicked the button!', 'success')
+  }
+
+  swalDecide () {
+    swal({
+      title: 'Are you sure?',
+      text: 'You will not be able to recover this imaginary file!',
+      type: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#DD6B55',
+      confirmButtonText: 'Yes, delete it!',
+      cancelButtonText: 'No, cancel plx!',
+      closeOnConfirm: false,
+      closeOnCancel: false
+    }, function (isConfirm) {
+      if (isConfirm) {
+        swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
+      } else {
+        swal('Cancelled', 'Your imaginary file is safe :)', 'error')
+      }
+    })
+  }
+
+  swalImage () {
+    swal({
+      title: 'Sweet!',
+      text: "Here's a custom image.",
+      imageUrl: '/img/avatar5.png'
+    })
+  }
+
+  swalHtmlMessage () {
+    swal({
+      title: 'HTML <small>Title</small>!',
+      text: 'A custom <span style="color:#F8BB86">html<span> message.',
+      html: true
+    })
+  }
+
+  swalAutoClose () {
+    swal({
+      title: 'Auto close alert!',
+      text: 'I will close in 2 seconds.',
+      timer: 2000,
+      showConfirmButton: false
+    })
+  }
+
+  swalPrompt () {
+    swal({
+      title: 'An input!',
+      text: 'Write something interesting:',
+      type: 'input',
+      showCancelButton: true,
+      closeOnConfirm: false,
+      animation: 'slide-from-top',
+      inputPlaceholder: 'Write something'
+    }, function (inputValue) {
+      if (inputValue === false)
+        return false
+      if (inputValue === '') {
+        swal.showInputError('You need to write something!')
+        return false
+      }
+      swal('Nice!', 'You wrote: ' + inputValue, 'success')
+    })
+  }
+
+  swalAjax () {
+    let API = this.API
+
+    swal({
+      title: 'Ajax request example',
+      text: 'Submit to run ajax request',
+      type: 'info',
+      showCancelButton: true,
+      closeOnConfirm: false,
+      showLoaderOnConfirm: true
+    }, function () {
+      let UserData = API.service('me', API.all('users'))
+
+      UserData.one().get()
+        .then((response) => {
+          let userdata = response.plain()
+          swal('Your Name is: ' + userdata.data.name)
+        })
+    })
+  }
+}
+
+export const UiModalComponent = {
+  templateUrl: './views/app/components/ui-modal/ui-modal.component.html',
+  controller: UiModalController,
+  controllerAs: 'vm',
+  bindings: {}
+}

angular/config/routes.config.js

@@ -52,6 +52,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
         }
       }
     })
+    .state('app.uimodal', {
+      url: '/ui-modal',
+      data: {
+        auth: true
+      },
+      views: {
+        'main@app': {
+          template: '<ui-modal></ui-modal>'
+        }
+      }
+    })
     .state('app.uitimeline', {
       url: '/ui-timeline',
       data: {

angular/index.components.js

@@ -1,3 +1,4 @@
+import { UiModalComponent } from './app/components/ui-modal/ui-modal.component'
 import { UiTimelineComponent } from './app/components/ui-timeline/ui-timeline.component'
 import { UiButtonsComponent } from './app/components/ui-buttons/ui-buttons.component'
 import { UiIconsComponent } from './app/components/ui-icons/ui-icons.component'
@@ -26,6 +27,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
 import { RegisterFormComponent } from './app/components/register-form/register-form.component'
 
 angular.module('app.components')
+  .component('uiModal', UiModalComponent)
   .component('uiTimeline', UiTimelineComponent)
   .component('uiButtons', UiButtonsComponent)
   .component('uiIcons', UiIconsComponent)

tests/angular/app/components/ui-modal.component.spec.js

@@ -0,0 +1,10 @@
+ngDescribe({
+  name: 'Test ui-modal component',
+  modules: 'app',
+  element: '<ui-modal></ui-modal>',
+  tests: function (deps) {
+    it('basic test', () => {
+      //
+    })
+  }
+})