DEM-1193 Visuals Controller

src/scripts/controllers/visual.controller.coffee

@@ -1,114 +1,153 @@
 'use strict'
 
-SubmitWorkVisualController = ($scope, SubmitWorkAPIService, API_URL) ->
-  vm      = this
-  vm.loading = true
-  vm.workId = $scope.workId
+SubmitWorkVisualController = ($scope, $rootScope, $state, SubmitWorkService, Optimist, API_URL) ->
+  vm                          = this
+  vm.workId                   = $scope.workId
+  vm.loading                  = true
   vm.visualsUploaderUploading = null
   vm.visualsUploaderHasErrors = null
-
-  vm.work =
-    name       : null
-    requestType: null
-    summary    : null
-    features   : []
-    featuresDetails : null
-
-  vm.visualDesign = {}
-  vm.visualDesign.fonts = [
+  vm.showPaths                = true
+  vm.showChooseStylesModal    = false
+  vm.showUploadStylesModal    = false
+  vm.showUrlStylesModal       = false
+  vm.activeStyleModal         = null
+  vm.nextButtonDisabled       = false
+  vm.backButtonDisabled       = false
+  vm.styleModals              = ['fonts', 'colors', 'icons']
+
+  config = {}
+  config.fonts = [
     name: 'Serif'
-    description: 'a small line attached to the end of a stroke'
-    id: '1234'
+    description: 'Classic design, good legiblity for large and small text.'
+    id: '123'
+    selected: false
   ,
     name: 'Sans Serif'
-    description: 'does not have the small `serifs`'
-    id: '1235'
-  ,
-    name: 'Slap Serif'
-    description: 'does not have the small `serifs`'
-    id: '1236'
-  ,
-    name: 'Script'
-    description: 'does not have the small `serifs`'
-    id: '1237'
-  ,
-    name: 'Grunge'
-    description: 'does not have the small `serifs`'
-    id: '1238'
+    id: '456'
+    description: 'Modern design, good for headers and body text.'
+    selected: false
   ]
 
-  vm.visualDesign.colors = [
+  config.colors = [
     name: 'Palette 1'
     description: 'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
     id: '1234'
+    selected: false
   ,
     name: 'Palette 2'
     description: 'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
     id: '1235'
+    selected: false
+
   ,
     name: 'Palette 3'
     description: 'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
     id: '1236'
+    selected: false
+
   ,
     name: 'Palette 4'
     description: 'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
     id: '1237'
-  ,
-    name: 'Palette 5'
-    description: 'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-    id: '1238'
+    selected: false
   ]
 
-  vm.visualDesign.icons = [
-    name: 'Google'
+  config.icons = [
+    name: 'Flat Colors'
     description: 'Lorem ipsum dolor sit amet'
     id: '1234'
+    selected: false
+
   ,
-    name: 'Anamorphic'
+    name: 'Thin Line'
     description: 'Lorem ipsum dolor sit amet'
     id: '1235'
+    selected: false
+
   ,
-    name: 'iOS Style'
+    name: 'Solid Line'
     description: 'Lorem ipsum dolor sit amet'
     id: '1236'
-  ,
-    name: 'Android'
-    description: 'Lorem ipsum dolor sit amet'
-    id: '1237'
-  ,
-    name: 'Windows 8'
-    description: 'Lorem ipsum dolor sit amet'
-    id: '1238'
+    selected: false
   ]
 
-  vm.save = (onSuccess) ->
-    if vm.workId
-      params =
-        id: vm.workId
-
-      resource = SubmitWorkAPIService.put params, vm.work
-      resource.$promise.then (response) ->
-        onSuccess? response
-      resource.$promise.catch (response) ->
-        # TODO: add error handling
-
-  vm.submitVisuals = ->
-    workFonts = vm.work.visualDesign.fonts
-    workColors = vm.work.visualDesign.colors
-    workIcons = vm.work.visualDesign.icons
+  vm.showChooseStyles = ->
+    vm.showPaths = false
+    vm.showChooseStylesModal = true
+    vm.backButtonDisabled = true
+    vm.activateModal('fonts')
+
+  vm.showUploadStyles = ->
+    vm.showUploadStylesModal = true
+
+  vm.showUrlStyles = ->
+    vm.showUrlStylesModal = true
+
+  vm.activateModal = (modal) ->
+    vm.activeStyleModal = modal
+    updateButtons()
+
+  vm.viewNext = ->
+    currentIndex = vm.styleModals.indexOf vm.activeStyleModal
+    isValid = currentIndex < vm.styleModals.length - 1
+    if isValid
+      nextModal = vm.styleModals[currentIndex + 1]
+      vm.activateModal(nextModal)
+
+  vm.viewPrevious = ->
+    currentIndex = vm.styleModals.indexOf vm.activeStyleModal
+    isValid = currentIndex > 0
+    if isValid
+      previousModal = vm.styleModals[currentIndex - 1]
+      vm.activateModal(previousModal)
+
+  vm.save = ->
+    visualsValid = visualDesignValid()
+    updates = getUpdates()
+    if visualsValid
+      SubmitWorkService.save(updates).then ->
+        $state.go("submit-work-development")
+
+  visualDesignValid = ->
+    updates = getUpdates()
     uploaderValid = !vm.visualsUploaderUploading && !vm.visualsUploaderHasErrors
+    # TODO: add updates.colors check
+    hasVisualChoices = updates.font && updates.icons
+    # check if visuals are selected or entered via url
+    hasVisuals = hasVisualChoices || updates.url
+    hasVisuals
+
+  getUpdates = ->
+    updates =
+      font:  vm.work.font
+      colors: vm.work.colors
+      icons:  vm.work.icons
+      url:    null
+
+    if vm.work.url
+      updates.url = vm.visualDesign.url
+
+    updates
+
+  vm.navigateDevelopment = ->
+    visualsValid = visualsValid()
+    if visualsValid
+      $state.go("submit-work-development")
+
+  updateButtons = ->
+    currentIndex = vm.styleModals.indexOf vm.activeStyleModal
+    isFirst = currentIndex == 0
+    isLast = currentIndex == vm.styleModals.length - 1
+    if isFirst
+      vm.backButtonDisabled = true
+    else if isLast
+      vm.nextButtonDisabled = true
+      vm.showFinishDesignButton = true
+    else
+      vm.nextButtonDisabled = false
+      vm.backButtonDisabled = false
+      vm.showFinishDesignButton = false
 
-    if workFonts.length && workColors.length && workIcons.length
-      # TODO: replace with proper status
-      vm.work.status = 'visualsAdded'
-      vm.save (response) ->
-        # TODO: navigate to "development" view
-
-  mockify = (work) ->
-    work.visualDesign = {}
-    work.visualDesign.fonts = []
-    work.visualDesign.colors = []
-    work.visualDesign.icons = []
 
   configureUploader = ->
     assetType = 'specs'
@@ -123,31 +162,51 @@ SubmitWorkVisualController = ($scope, SubmitWorkAPIService, API_URL) ->
         workId: vm.workId
         assetType: assetType
 
-  activate = ->
-    configureUploader()
-    if vm.workId
-      params =
-        id: vm.workId
+  onChange = ->
+    if SubmitWorkService.work.o.hasPending
+      return false
+
+    vm.loading = false
+
+    # TODO: Remove mock data once visualDesign is in payload
+    SubmitWorkService.work.visualDesign        = {}
+    SubmitWorkService.work.visualDesign.url    = null
+    SubmitWorkService.work.visualDesign.font  =
+      id: '123'
+    SubmitWorkService.work.visualDesign.colors =
+      id: '1236'
+    SubmitWorkService.work.visualDesign.icons  =
+      id: '1234'
+    # initialize vm
+    unless vm.visualDesign
+      vm.visualDesign        = config
+      vm.visualDesign.fonts  = config.fonts
+      vm.visualDesign.colors = config.colors
+      vm.visualDesign.icons  = config.icons
+
+    vm.work = {}
+    vm.work.icons = SubmitWorkService.work.visualDesign.icons
+    vm.work.colors = SubmitWorkService.work.visualDesign.colors
+    vm.work.font = SubmitWorkService.work.visualDesign.font
+    vm.work.url = null
 
-      resource = SubmitWorkAPIService.get params
 
-      resource.$promise.then (response) ->
-        vm.work = response
-        #TODO: remove once all properties are in payload
-        mockify vm.work
+  activate = ->
+    destroyWorkListener = $rootScope.$on "SubmitWorkService.work:changed", ->
+      onChange()
 
-       resource.$promise.catch (response) ->
-         # TODO: add error handling
+    $scope.$on '$destroy', ->
+      destroyWorkListener()
 
-       resource.$promise.finally ->
-         vm.loading = false
-    else
-      vm.loading = false
+    SubmitWorkService.fetch(vm.workId)
+    configureUploader()
+    # TODO: remove once work gets fetched
+    onChange()
 
     vm
 
   activate()
 
-SubmitWorkVisualController.$inject = ['$scope', 'SubmitWorkAPIService', 'API_URL']
+SubmitWorkVisualController.$inject = ['$scope', '$rootScope', '$state', 'SubmitWorkService', 'Optimist', 'API_URL']
 
 angular.module('appirio-tech-ng-submit-work').controller 'SubmitWorkVisualController', SubmitWorkVisualController