TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement WP edit form directive

Browse Source
pull/4338/head
Alex Dik 9 years ago
parent f8ff997e4c
commit 13f5fa1f7c
7 changed files with 128 additions and 212 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      frontend/app/angular-modules.ts
  2. 115
      frontend/app/components/routing/wp-show/wp-show.controller.js
  3. 55
      frontend/app/components/routing/wp-show/wp.show.html
  4. 54
      frontend/app/components/work-packages/wp-edit-form/wp-edit-form.directive.html
  5. 49
      frontend/app/components/work-packages/wp-edit-form/wp-edit-form.directive.ts
  6. 57
      frontend/app/components/wp-panels/overview-panel/overview-panel.directive.html
  7. 8
      frontend/app/components/wp-panels/overview-panel/overview-panel.directive.ts

2
frontend/app/angular-modules.ts
Unescape View File

@ -78,7 +78,7 @@ angular.module('openproject.timelines.directives', [
]);
// work packages
angular.module('openproject.workPackages', [
export const opWorkPackagesModule = angular.module('openproject.workPackages', [
'openproject.workPackages.activities',
'openproject.workPackages.controllers',
'openproject.workPackages.filters',

115
frontend/app/components/routing/wp-show/wp-show.controller.js
Unescape View File

@ -26,17 +26,28 @@
// See doc/COPYRIGHT.rdoc for more details.
// ++
angular
.module('openproject.workPackages.controllers')
.controller('WorkPackageShowController', WorkPackageShowController);
function WorkPackageShowController($scope, $rootScope, $state, workPackage, I18n,
RELATION_TYPES, RELATION_IDENTIFIERS, $q, WorkPackagesHelper, PathHelper, UsersHelper,
WorkPackageService, CommonRelationsHandler,
ChildrenRelationsHandler, ParentRelationsHandler, WorkPackagesOverviewService,
WorkPackageFieldService, EditableFieldsState, WorkPackagesDisplayHelper, NotificationsService,
WorkPackageAuthorization, PERMITTED_MORE_MENU_ACTIONS, HookService, $window,
WorkPackageAttachmentsService, AuthorisationService, inplaceEditAll) {
function WorkPackageShowController($scope,
$rootScope,
$state,
$window,
$q,
PERMITTED_MORE_MENU_ACTIONS,
RELATION_TYPES,
RELATION_IDENTIFIERS,
workPackage,
I18n,
WorkPackagesHelper,
PathHelper,
UsersHelper,
WorkPackageService,
CommonRelationsHandler,
ChildrenRelationsHandler,
ParentRelationsHandler,
EditableFieldsState,
WorkPackageAuthorization,
HookService,
AuthorisationService,
inplaceEditAll) {
$scope.editAll = inplaceEditAll;
$scope.canEdit = EditableFieldsState.canEdit;
@ -116,7 +127,7 @@ function WorkPackageShowController($scope, $rootScope, $state, workPackage, I18n
};
var authorization = new WorkPackageAuthorization($scope.workPackage);
$scope.permittedActions = angular.extend(getPermittedActions(authorization, PERMITTED_MORE_MENU_ACTIONS),
getPermittedPluginActions(authorization));
getPermittedPluginActions(authorization));
$scope.actionsAvailable = Object.keys($scope.permittedActions).length > 0;
// END stuff copied from details toolbar directive...
@ -154,7 +165,7 @@ function WorkPackageShowController($scope, $rootScope, $state, workPackage, I18n
$scope.workPackage = workPackage;
$scope.isWatched = workPackage.links.hasOwnProperty('unwatch');
$scope.displayWatchButton = workPackage.links.hasOwnProperty('unwatch') ||
workPackage.links.hasOwnProperty('watch');
workPackage.links.hasOwnProperty('watch');
// watchers
if(workPackage.links.watchers) {
@ -191,8 +202,8 @@ function WorkPackageShowController($scope, $rootScope, $state, workPackage, I18n
RELATION_TYPES[key])
).then(function(relations) {
var relationsHandler = new CommonRelationsHandler(workPackage,
relations,
RELATION_IDENTIFIERS[key]);
relations,
RELATION_IDENTIFIERS[key]);
$scope[key] = relationsHandler;
});
}
@ -208,7 +219,7 @@ function WorkPackageShowController($scope, $rootScope, $state, workPackage, I18n
// Toggle early to avoid delay.
$scope.isWatched = !$scope.isWatched;
WorkPackageService.toggleWatch($scope.workPackage)
.then(function() { refreshWorkPackage() }, outputError);
.then(function() { refreshWorkPackage() }, outputError);
};
$scope.canViewWorkPackageWatchers = function() {
@ -224,11 +235,11 @@ function WorkPackageShowController($scope, $rootScope, $state, workPackage, I18n
function getFocusAnchorLabel(tab, workPackage) {
var tabLabel = I18n.t('js.work_packages.tabs.' + tab),
params = {
tab: tabLabel,
type: workPackage.props.type,
subject: workPackage.props.subject
};
params = {
tab: tabLabel,
type: workPackage.props.type,
subject: workPackage.props.subject
};
return I18n.t('js.label_work_package_details_you_are_here', params);
}
@ -237,62 +248,8 @@ function WorkPackageShowController($scope, $rootScope, $state, workPackage, I18n
$state.current.url.replace(/\//, ''),
$scope.workPackage
);
// Stuff copied from DetailsTabOverviewController
var vm = this;
vm.groupedFields = [];
vm.hideEmptyFields = true;
vm.workPackage = $scope.workPackage;
vm.shouldHideGroup = function(group) {
return WorkPackagesDisplayHelper.shouldHideGroup(vm.hideEmptyFields,
vm.groupedFields,
group,
vm.workPackage);
};
vm.isFieldHideable = WorkPackagesDisplayHelper.isFieldHideable;
vm.getLabel = WorkPackagesDisplayHelper.getLabel;
vm.isSpecified = WorkPackagesDisplayHelper.isSpecified;
vm.hasNiceStar = WorkPackagesDisplayHelper.hasNiceStar;
vm.showToggleButton = WorkPackagesDisplayHelper.showToggleButton;
vm.filesExist = false;
activate();
WorkPackageAttachmentsService.hasAttachments(vm.workPackage).then(function(bool) {
vm.filesExist = bool;
});
function activate() {
$scope.$watch('workPackage.schema', function(schema) {
if (schema) {
WorkPackagesDisplayHelper.setFocus();
vm.workPackage = $scope.workPackage;
}
});
vm.groupedFields = WorkPackagesOverviewService.getGroupedWorkPackageOverviewAttributes();
$scope.$watchCollection('vm.workPackage.form', function() {
var schema = WorkPackageFieldService.getSchema(vm.workPackage);
var otherGroup = _.find(vm.groupedFields, {groupName: 'other'});
otherGroup.attributes = [];
_.forEach(schema.props, function(prop, propName) {
if (propName.match(/^customField/)) {
otherGroup.attributes.push(propName);
}
});
otherGroup.attributes.sort(function(a, b) {
var getLabel = function(field) {
return vm.getLabel(vm.workPackage, field);
};
var left = getLabel(a).toLowerCase(),
right = getLabel(b).toLowerCase();
return left.localeCompare(right);
});
});
$scope.$on('workPackageUpdatedInEditor', function() {
NotificationsService.addSuccess(I18n.t('js.notice_successful_update'));
});
}
}
angular
.module('openproject.workPackages.controllers')
.controller('WorkPackageShowController', WorkPackageShowController);

55
frontend/app/components/routing/wp-show/wp.show.html
Unescape View File

@ -59,60 +59,7 @@
<div class="work-packages--split-view">
<div class="work-packages--left-panel">
<div class="work-packages--panel-inner">
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">
<!-- {{ I18n.t('js.label_description') }} -->
{{type.props.name}} #{{workPackage.props.id}}
</h3>
</div>
</div>
<div class="single-attribute wiki">
<wp-field field-name="'description'"></wp-field>
</div>
</div>
<div ng-repeat="group in vm.groupedFields" ng-hide="vm.shouldHideGroup(group.groupName)" class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text"
ng-bind="I18n.t('js.work_packages.property_groups.' + group.groupName)"></h3>
</div>
<div class="attributes-group--header-toggle">
<panel-expander tabindex="-1" ng-if="vm.showToggleButton() && $first"
collapsed="vm.hideEmptyFields"
expand-text="{{ I18n.t('js.label_show_attributes') }}"
collapse-text="{{ I18n.t('js.label_hide_attributes') }}">
</panel-expander>
</div>
</div>
<div class="attributes-key-value">
<div
ng-hide="vm.hideEmptyFields && vm.isFieldHideable(vm.workPackage, field)"
ng-if="vm.isSpecified(vm.workPackage, field)"
ng-repeat-start="field in group.attributes"
class="attributes-key-value--key"
id="attributes-key-value--key-{{field}}">
{{vm.getLabel(vm.workPackage, field)}}
<span class="required" ng-if="vm.hasNiceStar(vm.workPackage, field)"> *</span>
</div>
<div
ng-hide="vm.hideEmptyFields && vm.isFieldHideable(vm.workPackage, field)"
ng-if="vm.isSpecified(vm.workPackage, field)"
ng-repeat-end
class="attributes-key-value--value-container">
<wp-field field-name="field"></wp-field>
</div>
</div>
</div>
<work-package-attachments edit data-ng-show="!vm.hideEmptyFields || vm.filesExist" work-package="vm.workPackage"></work-package-attachments>
<wp-edit-form work-package="workPackage"></wp-edit-form>
<edit-actions-bar></edit-actions-bar>
</div>

54
frontend/app/components/work-packages/wp-edit-form/wp-edit-form.directive.html
Unescape View File

@ -0,0 +1,54 @@
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">
{{ $ctrl.workPackage.embedded.type.props.name }} #{{ $ctrl.workPackage.props.id }}
</h3>
</div>
<div class="attributes-group--header-container-right">
<span ng-bind="$ctrl.I18n.t('js.label_last_updated_on')"/>
<op-date date-value="$ctrl.workPackage.props.updatedAt"></op-date>
</div>
</div>
<div class="single-attribute wiki">
<wp-field field-name="'description'"></wp-field>
</div>
</div>
<div ng-repeat="group in $ctrl.groupedFields" ng-hide="$ctrl.shouldHideGroup(group.groupName)" class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text"
ng-bind="$ctrl.I18n.t('js.work_packages.property_groups.' + group.groupName)"></h3>
</div>
<div class="attributes-group--header-toggle">
<panel-expander tabindex="-1" ng-if="$ctrl.WorkPackagesDisplayHelper.showToggleButton() && $first"
collapsed="$ctrl.hideEmptyFields"
expand-text="{{ $ctrl.I18n.t('js.label_show_attributes') }}"
collapse-text="{{ $ctrl.I18n.t('js.label_hide_attributes') }}">
</panel-expander>
</div>
</div>
<div class="attributes-key-value">
<div
ng-hide="$ctrl.hideEmptyFields && $ctrl.WorkPackagesDisplayHelper.isFieldHideable($ctrl.workPackage, field)"
ng-if="$ctrl.WorkPackagesDisplayHelper.isSpecified($ctrl.workPackage, field)"
ng-repeat-start="field in group.attributes" class="attributes-key-value--key">
{{$ctrl.WorkPackagesDisplayHelper.getLabel($ctrl.workPackage, field)}}
<span class="required" ng-if="$ctrl.WorkPackagesDisplayHelper.hasNiceStar($ctrl.workPackage, field)"> *</span>
</div>
<div
ng-hide="$ctrl.hideEmptyFields && $ctrl.WorkPackagesDisplayHelper.isFieldHideable($ctrl.workPackage, field)"
ng-if="$ctrl.WorkPackagesDisplayHelper.isSpecified($ctrl.workPackage, field)"
ng-repeat-end
class="attributes-key-value--value-container">
<wp-field field-name="field"></wp-field>
</div>
</div>
</div>
<work-package-attachments edit work-package="$ctrl.workPackage" data-ng-show="!$ctrl.hideEmptyFields || $ctrl.filesExist"></work-package-attachments>

49
frontend/app/components/wp-panels/overview-panel/overview-panel.controller.ts → frontend/app/components/work-packages/wp-edit-form/wp-edit-form.directive.ts
Unescape View File

@ -1,4 +1,4 @@
//-- copyright
// -- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
@ -24,49 +24,50 @@
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
//++
// ++
import {wpControllersModule} from "../../../angular-modules";
import {opWorkPackagesModule} from "../../../angular-modules";
export default class OverviewPanelController {
class WorkPackageEditFormController {
public workPackage;
public groupedFields:any[] = [];
public hideEmptyFields:boolean = true;
public filesExist:boolean = false;
constructor(protected $scope,
public WorkPackagesDisplayHelper,
protected I18n,
protected NotificationsService,
protected WorkPackagesOverviewService,
protected WorkPackageFieldService,
protected inplaceEditAll,
protected NotificationsService,
protected WorkPackageAttachmentsService) {
this.groupedFields = WorkPackagesOverviewService.getGroupedWorkPackageOverviewAttributes();
WorkPackageAttachmentsService.hasAttachments(this.workPackage).then(function (bool) {
WorkPackageAttachmentsService.hasAttachments(this.workPackage).then(bool => {
this.filesExist = bool;
});
$scope.$watch('vm.workPackage.schema', function (schema) {
$scope.$watch('vm.workPackage.schema', schema => {
if (schema) {
WorkPackagesDisplayHelper.setFocus();
this.workPackage = $scope.workPackage;
}
});
$scope.$watchCollection('vm.workPackage.form', function () {
$scope.$watchCollection('vm.workPackage.form', () => {
var schema = WorkPackageFieldService.getSchema(this.workPackage);
var otherGroup:any = _.find(this.groupedFields, {groupName: 'other'});
otherGroup.attributes = [];
schema.props.forEach(function (prop, propName) {
angular.forEach(schema.props, (prop, propName) => {
if (propName.match(/^customField/)) {
otherGroup.attributes.push(propName);
}
});
otherGroup.attributes.sort(function (a, b) {
otherGroup.attributes.sort((a, b) => {
var getLabel = field => this.WorkPackagesDisplayHelper.getLabel(this.workPackage, field);
var left = getLabel(a).toLowerCase();
var right = getLabel(b).toLowerCase();
@ -74,10 +75,10 @@ export default class OverviewPanelController {
return left.localeCompare(right);
});
});
$scope.$on('workPackageUpdatedInEditor', function () {
$scope.$on('workPackageUpdatedInEditor', () => {
NotificationsService.addSuccess(I18n.t('js.notice_successful_update'));
});
});
}
public shouldHideGroup(group) {
@ -86,5 +87,23 @@ export default class OverviewPanelController {
}
}
wpControllersModule.controller('OverviewPanelController', OverviewPanelController);
function wpEditFormDirective() {
return {
restrict: 'E',
templateUrl: '/components/work-packages/wp-edit-form/wp-edit-form.directive.html',
scope: {
workPackage: '='
},
bindToController: true,
controller: WorkPackageEditFormController,
controllerAs: '$ctrl'
};
}
opWorkPackagesModule.directive('wpEditForm', wpEditFormDirective);

57
frontend/app/components/wp-panels/overview-panel/overview-panel.directive.html
Unescape View File

@ -1,57 +1,4 @@
<div class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text">
{{ vm.workPackage.embedded.type.props.name }} #{{ vm.workPackage.props.id }}
</h3>
</div>
<div class="attributes-group--header-container-right">
<span ng-bind="vm.I18n.t('js.label_last_updated_on')"/>
<op-date date-value="vm.workPackage.props.updatedAt"></op-date>
</div>
</div>
<div class="single-attribute wiki">
<wp-field field-name="'description'"></wp-field>
</div>
</div>
<div ng-repeat="group in vm.groupedFields" ng-hide="vm.shouldHideGroup(group.groupName)" class="attributes-group">
<div class="attributes-group--header">
<div class="attributes-group--header-container">
<h3 class="attributes-group--header-text"
ng-bind="vm.I18n.t('js.work_packages.property_groups.' + group.groupName)"></h3>
</div>
<div class="attributes-group--header-toggle">
<panel-expander tabindex="-1" ng-if="vm.WorkPackagesDisplayHelper.showToggleButton() && $first"
collapsed="vm.hideEmptyFields"
expand-text="{{ vm.I18n.t('js.label_show_attributes') }}"
collapse-text="{{ vm.I18n.t('js.label_hide_attributes') }}">
</panel-expander>
</div>
</div>
<div class="attributes-key-value">
<div
ng-hide="vm.hideEmptyFields && vm.WorkPackagesDisplayHelper.isFieldHideable(vm.workPackage, field)"
ng-if="vm.WorkPackagesDisplayHelper.isSpecified(vm.workPackage, field)"
ng-repeat-start="field in group.attributes" class="attributes-key-value--key">
{{vm.WorkPackagesDisplayHelper.getLabel(vm.workPackage, field)}}
<span class="required" ng-if="vm.WorkPackagesDisplayHelper.hasNiceStar(vm.workPackage, field)"> *</span>
</div>
<div
ng-hide="vm.hideEmptyFields && vm.WorkPackagesDisplayHelper.isFieldHideable(vm.workPackage, field)"
ng-if="vm.WorkPackagesDisplayHelper.isSpecified(vm.workPackage, field)"
ng-repeat-end
class="attributes-key-value--value-container">
<wp-field field-name="field"></wp-field>
</div>
</div>
</div>
<work-package-attachments edit work-package="vm.workPackage" data-ng-show="!vm.hideEmptyFields || vm.filesExist"></work-package-attachments>
<wp-edit-form work-package="workPackage"></wp-edit-form>
<div class="attributes-group">
<div class="attributes-group--header">
@ -60,5 +7,5 @@
</div>
</div>
<activity-panel template="overview" work-package="vm.workPackage"></activity-panel>
<activity-panel template="overview" work-package="workPackage"></activity-panel>
</div>

8
frontend/app/components/wp-panels/overview-panel/overview-panel.directive.ts
Unescape View File

@ -32,14 +32,6 @@ function overviewPanel(){
return {
restrict: 'E',
templateUrl: '/components/wp-panels/overview-panel/overview-panel.directive.html',
scope: {
workPackage: '='
},
bindToController: true,
controller: 'OverviewPanelController',
controllerAs: 'vm'
};
}

Write Preview
Loading…
Cancel
Save