More fine-grained loading spinners

This commit is contained in:
Shane Kilkelly 2018-05-16 11:49:10 +01:00
parent e3bc6cac9e
commit 7292602167
2 changed files with 23 additions and 12 deletions

View file

@ -349,17 +349,20 @@ script(type='text/ng-template', id='projectLinkedFileModalTemplate')
.modal-body
div
div.alert.alert-danger(ng-if="state.error") Error
div.alert.alert-danger(ng-if="state.error") Error, something went wrong!
div
form
.form-controls
label(for="project-select") Select a Project
span(ng-show="state.inFlight.projects")
|  
i.fa.fa-spinner.fa-spin
select.form-control(
name="project-select"
ng-model="data.selectedProject"
ng-disabled="!shouldEnableProjectSelect()"
)
option(value="") No Project Selected
option(value="") - No Project Selected
option(
ng-repeat="project in data.projects"
value="{{ project._id }}"
@ -368,12 +371,15 @@ script(type='text/ng-template', id='projectLinkedFileModalTemplate')
br
.form-controls
label(for="project-entity-select") Select a File
span(ng-show="state.inFlight.entities")
|  
i.fa.fa-spinner.fa-spin
select.form-control(
name="project-entity-select"
ng-model="data.selectedProjectEntity"
ng-disabled="!shouldEnableProjectEntitySelect()"
)
option(value="") No File Selected
option(value="") - No File Selected
option(
ng-repeat="projectEntity in data.projectEntities"
value="{{ projectEntity.path }}"
@ -392,7 +398,7 @@ script(type='text/ng-template', id='projectLinkedFileModalTemplate')
br
.modal-footer
span(ng-show="state.inFlight")
span(ng-show="state.inFlight.create")
i.fa.fa-spinner.fa-spin
|  
button.btn.btn-default(

View file

@ -224,7 +224,10 @@ define [
selectedProjectEntity: null
name: null
$scope.state =
inFlight: false
inFlight:
projects: false
entities: false
create: false
error: false
$scope.$watch 'data.selectedProject', (newVal, oldVal) ->
@ -241,23 +244,25 @@ define [
$scope._resetAfterResponse = (opts) ->
isError = opts.err == true
$scope.state.inFlight = false
inFlight = $scope.state.inFlight
inFlight.projects = inFlight.entities = inFlight.create = false
$scope.state.error = isError
$scope.shouldEnableProjectSelect = () ->
state = $scope.state
data = $scope.data
return !state.inFlight && data.projects
return !state.inFlight.projects && data.projects
$scope.shouldEnableProjectEntitySelect = () ->
state = $scope.state
data = $scope.data
return !state.inFlight && data.projects && data.selectedProject
return !state.inFlight.projects && !state.inFlight.entities && data.projects && data.selectedProject
$scope.shouldEnableCreateButton = () ->
state = $scope.state
data = $scope.data
return !state.inFlight &&
return !state.inFlight.projects &&
!state.inFlight.entities &&
data.projects &&
data.selectedProject &&
data.projectEntities &&
@ -265,7 +270,7 @@ define [
data.name
$scope.getUserProjects = () ->
$scope.state.inFlight = true
$scope.state.inFlight.projects = true
ide.$http.get("/user/projects", {
_csrf: window.csrfToken
})
@ -278,7 +283,7 @@ define [
$scope._resetAfterResponse(err: true)
$scope.getProjectEntities = (project_id) =>
$scope.state.inFlight = true
$scope.state.inFlight.entities = true
ide.$http.get("/project/#{project_id}/entities", {
_csrf: window.csrfToken
})
@ -300,7 +305,7 @@ define [
project = $scope.data.selectedProject
path = $scope.data.selectedProjectEntity
name = $scope.data.name
$scope.state.inFlight = true
$scope.state.inFlight.create = true
ide.fileTreeManager
.createLinkedFile(name, parent_folder, 'project_file', {
source_project_id: project,