From 5aeccc2d2c422d266c0c343dc326d5bbd2422195 Mon Sep 17 00:00:00 2001 From: Alex Dik Date: Thu, 22 Oct 2015 16:07:59 +0200 Subject: [PATCH] Reduce fieldController redundancies [ci skip] --- .../display-pane/display-pane.directive.js | 38 +++++-------- .../edit-pane/edit-pane.directive.js | 54 +++++++++---------- .../display-spent-time.directive.html | 6 +-- .../display-spent-time.directive.js | 17 +++--- .../display-user/display-user.directive.html | 10 ++-- .../display-user/display-user.directive.js | 11 ++-- .../display-version.directive.html | 12 ++--- .../display-version.directive.js | 12 ++--- .../edit-date-range.directive.js | 16 +++--- .../edit-date/edit-date.directive.html | 14 ++--- .../edit-date/edit-date.directive.js | 13 +++-- .../edit-drop-down.directive.html | 2 +- .../edit-drop-down.directive.js | 8 +-- .../edit-duration.directive.html | 2 +- .../edit-duration/edit-duration.directive.js | 28 ++++------ .../edit-wiki-textarea.directive.html | 2 +- .../edit-wiki-textarea.directive.js | 7 +-- .../main-pane/main-pane.directive.js | 16 +----- .../work-package-field.directive.js | 15 ++---- .../services/inplace-edit-field.service.js | 17 ++++-- .../services/work-package-field.service.js | 5 +- .../inplace-edit/display/fields/boolean.html | 2 +- .../display/fields/date-range.html | 2 +- .../inplace-edit/display/fields/date.html | 2 +- .../inplace-edit/display/fields/embedded.html | 2 +- .../inplace-edit/display/fields/text.html | 4 +- .../display/fields/wiki-textarea.html | 2 +- .../inplace-edit/edit/fields/boolean.html | 2 +- .../inplace-edit/edit/fields/float.html | 2 +- .../inplace-edit/edit/fields/integer.html | 2 +- .../inplace-edit/edit/fields/text.html | 2 +- .../inplace-edit/edit/fields/textarea.html | 2 +- .../work-package-comment-directive.js | 4 ++ .../services/editable-fields-state.js | 10 ---- .../edit-drop-down.directive.test.js | 8 +-- .../services/editable-fields-state-test.js | 17 ------ 36 files changed, 149 insertions(+), 219 deletions(-) diff --git a/frontend/app/components/inplace-edit/directives/display-pane/display-pane.directive.js b/frontend/app/components/inplace-edit/directives/display-pane/display-pane.directive.js index 36118ad536..aa1a16e68c 100644 --- a/frontend/app/components/inplace-edit/directives/display-pane/display-pane.directive.js +++ b/frontend/app/components/inplace-edit/directives/display-pane/display-pane.directive.js @@ -40,11 +40,13 @@ function inplaceEditorDisplayPane(EditableFieldsState, $timeout, I18n) { controllerAs: 'displayPaneController', link: function(scope, element, attrs, fieldController) { + var field = scope.field; + scope.fieldController = fieldController; scope.editableFieldsState = EditableFieldsState; scope.$watchCollection('editableFieldsState.workPackage.form', function() { - var strategy = scope.field.getInplaceDisplayStrategy(); + var strategy = field.getInplaceDisplayStrategy(); if (strategy !== scope.displayStrategy) { scope.displayStrategy = strategy; @@ -53,15 +55,13 @@ function inplaceEditorDisplayPane(EditableFieldsState, $timeout, I18n) { }); // TODO: extract this when more placeholders come - if (scope.field.name === 'description') { + if (field.name === 'description') { scope.displayPaneController.placeholder = I18n.t('js.label_click_to_enter_description'); } scope.$watch('editableFieldsState.errors', function(errors) { - if (errors) { - if (errors[scope.scope.field.name]) { - scope.displayPaneController.startEditing(); - } + if (errors && errors[field.name]) { + scope.displayPaneController.startEditing(); } }, true); @@ -86,36 +86,24 @@ function inplaceEditorDisplayPane(EditableFieldsState, $timeout, I18n) { inplaceEditorDisplayPane.$inject = ['EditableFieldsState', '$timeout', 'I18n']; -function InplaceEditorDisplayPaneController($scope, EditableFieldsState, HookService) { +function InplaceEditorDisplayPaneController($scope, HookService) { + var field = $scope.field; - this.placeholder = $scope.field.defaultPlaceholder; + this.placeholder = field.defaultPlaceholder; this.startEditing = function() { var fieldController = $scope.fieldController; fieldController.isEditing = true; }; - this.isReadValueEmpty = function() { - return $scope.field.isEmpty(); - }; - - this.getReadValue = function() { - return $scope.field.format(); - }; - // for dynamic type that is set by plugins // refactor to a service method the whole extraction this.getDynamicDirectiveName = function() { return HookService.call('workPackageOverviewAttributes', { - type: EditableFieldsState.workPackage.schema.props[$scope.field.name].type, - field: $scope.field.name, - workPackage: EditableFieldsState.workPackage + type: field.resource.schema.props[field.name].type, + field: field.name, + workPackage: field.resource })[0]; }; - - // expose work package to the dynamic directive - this.getWorkPackage = function() { - return EditableFieldsState.workPackage; - }; } -InplaceEditorDisplayPaneController.$inject = ['$scope', 'EditableFieldsState', 'HookService']; +InplaceEditorDisplayPaneController.$inject = ['$scope', 'HookService']; diff --git a/frontend/app/components/inplace-edit/directives/edit-pane/edit-pane.directive.js b/frontend/app/components/inplace-edit/directives/edit-pane/edit-pane.directive.js index c73a8e2427..0b5dde1c3b 100644 --- a/frontend/app/components/inplace-edit/directives/edit-pane/edit-pane.directive.js +++ b/frontend/app/components/inplace-edit/directives/edit-pane/edit-pane.directive.js @@ -30,9 +30,7 @@ angular .module('openproject.inplace-edit') .directive('inplaceEditorEditPane', inplaceEditorEditPane); -function inplaceEditorEditPane(WorkPackageFieldService, EditableFieldsState, FocusHelper, - $timeout) { - +function inplaceEditorEditPane(EditableFieldsState, FocusHelper, $timeout) { return { transclude: true, replace: true, @@ -41,31 +39,29 @@ function inplaceEditorEditPane(WorkPackageFieldService, EditableFieldsState, Foc controllerAs: 'editPaneController', controller: InplaceEditorEditPaneController, link: function(scope, element, attrs, fieldController) { + var field = scope.field; + scope.fieldController = fieldController; scope.editableFieldsState = EditableFieldsState; scope.editPaneController.isRequired = function() { - return WorkPackageFieldService.isRequired( - EditableFieldsState.workPackage, - this.field - ); + return field.isRequired(); }; scope.$watchCollection('editableFieldsState.workPackage.form', function(form) { - var strategy = scope.field.getInplaceEditStrategy(); + var strategy = field.getInplaceEditStrategy(); - if (scope.field.name === 'date' && strategy === 'date') { + if (field.name === 'date' && strategy === 'date') { form.pendingChanges = EditableFieldsState.getPendingFormChanges(); form.pendingChanges['startDate'] = form.pendingChanges['dueDate'] = - fieldController.writeValue ? fieldController.writeValue['dueDate'] : null; + field.value ? field.value['dueDate'] : null; } if (strategy !== scope.strategy) { scope.strategy = strategy; scope.templateUrl = '/templates/inplace-edit/edit/fields/' + scope.strategy + '.html'; - fieldController.updateWriteValue(); } }); @@ -94,10 +90,10 @@ function inplaceEditorEditPane(WorkPackageFieldService, EditableFieldsState, Foc }); } - scope.$watch('fieldController.writeValue', function(writeValue) { + scope.$watch('field.value', function(value) { if (scope.fieldController.isEditing) { var pendingChanges = EditableFieldsState.getPendingFormChanges(); - pendingChanges[scope.field.name] = writeValue; + pendingChanges[field.name] = value; } }, true); scope.$on('workPackageRefreshed', function() { @@ -105,12 +101,12 @@ function inplaceEditorEditPane(WorkPackageFieldService, EditableFieldsState, Foc }); scope.$watch('fieldController.isEditing', function(isEditing) { - var efs = EditableFieldsState, field = scope.field.name; + var efs = EditableFieldsState; if (isEditing && !efs.editAll.state && !efs.forcedEditState) { scope.focusInput(); - } else if (efs.editAll.state && efs.editAll.isFocusField(field)) { + } else if (efs.editAll.state && efs.editAll.isFocusField(field.name)) { $timeout(function () { var focusElement = element.find('.focus-input'); focusElement.length && focusElement.focus()[0].select(); @@ -120,8 +116,7 @@ function inplaceEditorEditPane(WorkPackageFieldService, EditableFieldsState, Foc } }; } -inplaceEditorEditPane.$inject = ['WorkPackageFieldService', 'EditableFieldsState', 'FocusHelper', - '$timeout']; +inplaceEditorEditPane.$inject = ['EditableFieldsState', 'FocusHelper', '$timeout']; function InplaceEditorEditPaneController($scope, $element, $location, $timeout, $q, $rootScope, @@ -137,6 +132,7 @@ function InplaceEditorEditPaneController($scope, $element, $location, $timeout, }; var vm = this; + var field = $scope.field; // go full retard var uploadPendingAttachments = function(wp) { @@ -166,13 +162,13 @@ function InplaceEditorEditPaneController($scope, $element, $location, $timeout, submit.reject(e); }; - pendingFormChanges[$scope.field.name] = fieldController.writeValue; + pendingFormChanges[field.name] = field.value; if (vm.editForm.$invalid) { var acknowledgedValidationErrors = Object.keys(vm.editForm.$error); acknowledgedValidationErrors.forEach(function(error) { if (vm.editForm.$error[error]) { detectedViolations.push(I18n.t('js.inplace.errors.' + error, { - field: fieldController.getLabel() + field: field.getLabel() })); } }); @@ -180,7 +176,7 @@ function InplaceEditorEditPaneController($scope, $element, $location, $timeout, } if (detectedViolations.length) { EditableFieldsState.errors = EditableFieldsState.errors || {}; - EditableFieldsState.errors[$scope.field.name] = detectedViolations.join(' '); + EditableFieldsState.errors[field.name] = detectedViolations.join(' '); showErrors(); submit.reject(); } else { @@ -195,11 +191,12 @@ function InplaceEditorEditPaneController($scope, $element, $location, $timeout, ); result.then(angular.bind(this, function(updatedWorkPackage) { submit.resolve(); + field.resource = _.extend(field.resource, updatedWorkPackage); + $scope.$emit('workPackageUpdatedInEditor', updatedWorkPackage); $scope.$on('workPackageRefreshed', function() { fieldController.state.isBusy = false; fieldController.isEditing = false; - fieldController.updateWriteValue(); }); uploadPendingAttachments(updatedWorkPackage); })).catch(handleFailure); @@ -224,27 +221,26 @@ function InplaceEditorEditPaneController($scope, $element, $location, $timeout, this.discardEditing = function() { $scope.fieldController.isEditing = false; delete EditableFieldsState.submissionPromises['work_package']; - delete EditableFieldsState.getPendingFormChanges()[$scope.field.name]; - $scope.fieldController.updateWriteValue(); + delete EditableFieldsState.getPendingFormChanges()[field.name]; if ( EditableFieldsState.errors && - EditableFieldsState.errors.hasOwnProperty($scope.field.name) + EditableFieldsState.errors.hasOwnProperty(field.name) ) { - delete EditableFieldsState.errors[$scope.field.name]; + delete EditableFieldsState.errors[field.name]; } }; this.isActive = function() { - return EditableFieldsState.isActiveField($scope.field.name); + return EditableFieldsState.isActiveField(field.name); }; this.markActive = function() { EditableFieldsState.submissionPromises['work_package'] = { - field: $scope.field.name, + field: field.name, thePromise: this.submitField, prepend: true }; - EditableFieldsState.currentField = $scope.field.name; + EditableFieldsState.currentField = field.name; }; function afterError() { @@ -262,8 +258,6 @@ function InplaceEditorEditPaneController($scope, $element, $location, $timeout, $scope.$watch('editableFieldsState.editAll.state', function(state) { $scope.fieldController.isEditing = state; $scope.fieldController.lockFocus = true; - - !state && $scope.fieldController.updateWriteValue(); }); } InplaceEditorEditPaneController.$inject = ['$scope', '$element', '$location', '$timeout', '$q', diff --git a/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.html b/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.html index 7ae43add14..9e5517f2cd 100644 --- a/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.html +++ b/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.html @@ -1,13 +1,13 @@
- {{ displayPaneController.placeholder }} + {{ field.defaultPlaceholder }} - {{ displayPaneController.getReadValue() }} + {{ field.text }} - {{ displayPaneController.getReadValue() }} + {{ field.text }}
diff --git a/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.js b/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.js index 6e9e330f7e..90101d4494 100644 --- a/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.js +++ b/frontend/app/components/inplace-edit/directives/field-display/display-spent-time/display-spent-time.directive.js @@ -35,26 +35,23 @@ function inplaceDisplaySpentTime() { restrict: 'E', transclude: true, replace: true, - require: '^inplaceEditorDisplayPane', templateUrl: '/components/inplace-edit/directives/field-display/display-spent-time/' + 'display-spent-time.directive.html', controller: InplaceDisplaySpentTimeController, - controllerAs: 'customEditorController', - - link: function(scope, element, attrs, controllers) { - scope.displayPaneController = controllers[0]; - } + controllerAs: 'customEditorController' }; } -function InplaceDisplaySpentTimeController(EditableFieldsState) { +function InplaceDisplaySpentTimeController($scope) { + var field = $scope.field; + this.isLinkViewable = function() { - return EditableFieldsState.workPackage.links.timeEntries; + return field.resource.links.timeEntries; }; this.getPath = function() { - return EditableFieldsState.workPackage.links.timeEntries.href; + return field.resource.links.timeEntries.href; }; } -InplaceDisplaySpentTimeController.$inject = ['EditableFieldsState']; +InplaceDisplaySpentTimeController.$inject = ['$scope']; diff --git a/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.html b/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.html index be3ad8bf11..9108aae8f2 100644 --- a/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.html +++ b/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.html @@ -1,14 +1,14 @@ Avatar + ng-if="customEditorController.getUserName() && customEditorController.user.props.avatar" + ng-src="{{customEditorController.user.props.avatar}}" alt="Avatar" title="{{customEditorController.getUserName()}}" /> - - + - - + diff --git a/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.js b/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.js index 5184310b00..6b78819e1e 100644 --- a/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.js +++ b/frontend/app/components/inplace-edit/directives/field-display/display-user/display-user.directive.js @@ -49,16 +49,17 @@ function inplaceDisplayUser() { } function InplaceDisplayUserController($scope, PathHelper) { + var field = $scope.field; + this.userPath = PathHelper.staticUserPath; - this.getUser = function() { - return $scope.inplaceEditorDisplayPane.getReadValue(); - }; + this.user = field.text; + this.getUserName = function() { - var user = this.getUser(); + var user = this.user; + if (user && user.props && (user.props.firstName || user.props.lastName)) { return user.props.firstName + ' ' + user.props.lastName; } - return null; }; } InplaceDisplayUserController.$inject = ['$scope', 'PathHelper']; diff --git a/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.html b/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.html index 01f8eb7242..ac59aa6fae 100644 --- a/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.html +++ b/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.html @@ -1,11 +1,11 @@
- - - - - {{displayPaneController.getReadValue().props.name}} + - + + + {{field.text.props.name}} - - {{displayPaneController.getReadValue().props.name}} + + {{field.text.props.name}}
diff --git a/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.js b/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.js index eac2dee34b..1dfcdef956 100644 --- a/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.js +++ b/frontend/app/components/inplace-edit/directives/field-display/display-version/display-version.directive.js @@ -35,23 +35,21 @@ function inplaceDisplayVersion() { restrict: 'E', transclude: true, replace: true, - require: '^inplaceEditorDisplayPane', templateUrl: '/components/inplace-edit/directives/field-display/display-version/' + 'display-version.directive.html', controller: InplaceDisplayVersionController, - controllerAs: 'customEditorController', + controllerAs: 'customEditorController' - link: function(scope, element, attrs, displayPaneController) { - scope.displayPaneController = displayPaneController; - } }; } function InplaceDisplayVersionController($scope, PathHelper) { - this.pathHelper = PathHelper; + var field = $scope.field; + + this.versionLink = field.text && PathHelper.staticVersionPath(field.text.props.id); this.isVersionLinkViewable = function() { - var version = $scope.displayPaneController.getReadValue(); + var version = field.text; return version.links.definingProject && version.links.definingProject.href; } } diff --git a/frontend/app/components/inplace-edit/directives/field-edit/edit-date-range/edit-date-range.directive.js b/frontend/app/components/inplace-edit/directives/field-edit/edit-date-range/edit-date-range.directive.js index 67de863e28..db85237727 100644 --- a/frontend/app/components/inplace-edit/directives/field-edit/edit-date-range/edit-date-range.directive.js +++ b/frontend/app/components/inplace-edit/directives/field-edit/edit-date-range/edit-date-range.directive.js @@ -37,14 +37,14 @@ function inplaceEditorDateRange(TimezoneService, I18n, $timeout, WorkPackageFiel restrict: 'E', transclude: true, replace: true, - require: '^workPackageField', templateUrl: '/components/inplace-edit/directives/field-edit/edit-date-range/' + 'edit-date-range.directive.html', controller: function() {}, controllerAs: 'customEditorController', - link: function(scope, element, attrs, fieldController) { + link: function(scope, element) { + var field = scope.field; var customDateFormat = 'YYYY-MM-DD'; function getTitle(labelName) { @@ -56,8 +56,8 @@ function inplaceEditorDateRange(TimezoneService, I18n, $timeout, WorkPackageFiel }); } - scope.startDate = fieldController.writeValue.startDate; - scope.endDate = fieldController.writeValue.dueDate; + scope.startDate = field.value.startDate; + scope.endDate = field.value.dueDate; var form = element.parents('.inplace-edit--form'), inputStart = element.find('.inplace-edit--date-range-start-date'), inputEnd = element.find('.inplace-edit--date-range-end-date'), @@ -81,10 +81,10 @@ function inplaceEditorDateRange(TimezoneService, I18n, $timeout, WorkPackageFiel startDatepicker = new Datepicker(divStart, inputStart, scope.startDate); endDatepicker = new Datepicker(divEnd, inputEnd, scope.endDate); startDatepicker.onChange = function(date) { - scope.startDate = fieldController.writeValue.startDate = date; + scope.startDate = field.value.startDate = date; if (startDatepicker.prevDate.isAfter(endDatepicker.prevDate)) { scope.startDateIsChanged = true; - scope.endDate = fieldController.writeValue.dueDate = scope.startDate; + scope.endDate = field.value.dueDate = scope.startDate; endDatepicker.setDate(scope.endDate); } }; @@ -93,10 +93,10 @@ function inplaceEditorDateRange(TimezoneService, I18n, $timeout, WorkPackageFiel startDatepicker.onEdit(); }; endDatepicker.onChange = function(date) { - scope.endDate = fieldController.writeValue.dueDate = date; + scope.endDate = field.value.dueDate = date; if (endDatepicker.prevDate.isBefore(startDatepicker.prevDate)) { scope.endDateIsChanged = true; - scope.startDate = fieldController.writeValue.startDate = scope.endDate; + scope.startDate = field.value.startDate = scope.endDate; startDatepicker.setDate(scope.startDate); } }; diff --git a/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.html b/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.html index b6183cb354..ad7305a445 100644 --- a/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.html +++ b/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.html @@ -1,9 +1,9 @@
- -
+ +
diff --git a/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.js b/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.js index 102d44bd3f..18d00537b0 100644 --- a/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.js +++ b/frontend/app/components/inplace-edit/directives/field-edit/edit-date/edit-date.directive.js @@ -48,8 +48,9 @@ function inplaceEditorDate(EditableFieldsState, TimezoneService, $timeout, Datep controller: function() {}, controllerAs: 'customEditorController', - link: function(scope, element, attrs, fieldController) { - scope.fieldController = fieldController; + link: function(scope, element) { + var field = scope.field; + var form = element.parents('.inplace-edit--form'), input = element.find('.inplace-edit--date'), datepickerContainer = element.find('.inplace-edit--date-picker'), @@ -59,13 +60,11 @@ function inplaceEditorDate(EditableFieldsState, TimezoneService, $timeout, Datep form.scope().editPaneController.submit(false); }; - if(scope.fieldController.writeValue) { - scope.fieldController.writeValue = customFormattedDate(scope.fieldController.writeValue); - } + field.value = field.value && customFormattedDate(field.value); - datepicker = new Datepicker(datepickerContainer, input, scope.fieldController.writeValue); + datepicker = new Datepicker(datepickerContainer, input, field.value); datepicker.onChange = function(date) { - scope.fieldController.writeValue = date; + field.value = date; }; scope.onEdit = function() { datepicker.onEdit(); diff --git a/frontend/app/components/inplace-edit/directives/field-edit/edit-drop-down/edit-drop-down.directive.html b/frontend/app/components/inplace-edit/directives/field-edit/edit-drop-down/edit-drop-down.directive.html index 5f70bd4833..fadb6f2bd0 100644 --- a/frontend/app/components/inplace-edit/directives/field-edit/edit-drop-down/edit-drop-down.directive.html +++ b/frontend/app/components/inplace-edit/directives/field-edit/edit-drop-down/edit-drop-down.directive.html @@ -1,7 +1,7 @@