ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #3800 from tsiegleauq/ms4

Browse Source 
Add create update forms
This commit is contained in:
Emanuel Schütze 2018-08-22 16:28:05 +02:00 committed by GitHub
commit ad6d05639d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 742 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/package-lock.json generated
View File

@ -4645,12 +4645,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -4665,17 +4667,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -4792,7 +4797,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -4804,6 +4810,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -4818,6 +4825,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -4825,12 +4833,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@ -4849,6 +4859,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -4929,7 +4940,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -4941,6 +4953,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -5062,6 +5075,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",

4
client/src/app/core/core.module.ts
View File

@ -7,10 +7,11 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthGuard } from './services/auth-guard.service';
import { AuthService } from './services/auth.service';
import { AutoupdateService } from './services/autoupdate.service';
import { DataStoreService } from './services/dataStore.service';
import { DataStoreService } from './services/data-store.service';
import { OperatorService } from './services/operator.service';
import { WebsocketService } from './services/websocket.service';
import { AddHeaderInterceptor } from './http-interceptor';
import { DataSendService } from './services/data-send.service';
/** Global Core Module. Contains all global (singleton) services
*
@ -23,6 +24,7 @@ import { AddHeaderInterceptor } from './http-interceptor';
AuthService,
AutoupdateService,
DataStoreService,
DataSendService,
OperatorService,
WebsocketService,
{

6
client/src/app/core/services/autoupdate.service.ts
View File

@ -68,7 +68,13 @@ export class AutoupdateService extends OpenSlidesComponent {
storeResponse(socketResponse): void {
socketResponse.forEach(jsonObj => {
const targetClass = this.getClassFromCollectionString(jsonObj.collection);
if (jsonObj.action === 'deleted') {
console.log('storeResponse detect delete');
this.DS.remove(jsonObj.collection, jsonObj.id);
} else {
this.DS.add(new targetClass().deserialize(jsonObj.data));
}
});
}

15
client/src/app/core/services/data-send.service.spec.ts Normal file
View File

@ -0,0 +1,15 @@
import { TestBed, inject } from '@angular/core/testing';
import { DataSendService } from './data-send.service';
describe('DataSendService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [DataSendService]
});
});
it('should be created', inject([DataSendService], (service: DataSendService) => {
expect(service).toBeTruthy();
}));
});

74
client/src/app/core/services/data-send.service.ts Normal file
View File

@ -0,0 +1,74 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BaseModel } from '../../shared/models/base.model';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
/**
* Send data back to server
*
* Contrast to dataStore service
*/
@Injectable({
providedIn: 'root'
})
export class DataSendService {
/**
* Construct a DataSendService
*
* @param http The HTTP Client
*/
constructor(private http: HttpClient) {}
/**
* Save motion in the server
*
* @return Observable from
*/
saveModel(model: BaseModel): Observable<BaseModel> {
if (!model.id) {
return this.http.post<BaseModel>('rest/' + model.collectionString + '/', model).pipe(
tap(
response => {
// TODO: Message, Notify, Etc
console.log('New Model added. Response : ', response);
},
error => console.log('error. ', error)
)
);
} else {
return this.http.put<BaseModel>('rest/' + model.collectionString + '/' + model.id, model).pipe(
tap(
response => {
console.log('Update model. Response : ', response);
},
error => console.log('error. ', error)
)
);
}
}
/**
* Deletes the given model on the server
*
* @param model the BaseModel that shall be removed
* @return Observable of BaseModel
*
* TODO Not tested
*/
delete(model: BaseModel): Observable<BaseModel> {
if (model.id) {
return this.http.delete<BaseModel>('rest/' + model.collectionString + '/' + model.id).pipe(
tap(
response => {
// TODO: Message, Notify, Etc
console.log('the response: ', response);
},
error => console.error('error during delete: ', error)
)
);
} else {
console.error('No model ID to delete');
}
}
}

2
client/src/app/core/services/dataStore.service.spec.ts → client/src/app/core/services/data-store.service.spec.ts
View File

@ -1,6 +1,6 @@
import { TestBed, inject } from '@angular/core/testing';
import { DataStoreService } from './dataStore.service';
import { DataStoreService } from './data-store.service';
describe('DS', () => {
beforeEach(() => {

69
client/src/app/core/services/dataStore.service.ts → client/src/app/core/services/data-store.service.ts
View File

@ -1,7 +1,5 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, of, BehaviorSubject } from 'rxjs';
import { tap, map } from 'rxjs/operators';
import { Observable, BehaviorSubject } from 'rxjs';
import { ImproperlyConfiguredError } from 'app/core/exceptions';
import { BaseModel, ModelId } from 'app/shared/models/base.model';
@ -29,6 +27,12 @@ interface Storage {
* Use this.DS in an OpenSlides Component to Access the store.
* Used by a lot of components, classes and services.
* Changes can be observed
*
* FIXME: The injector does not init the HttpClient Service.
* Either remove it from DataStore and make an own Service
* fix it somehow
* or just do-not let the OpenSlidesComponent inject DataStore to it's
* children.
*/
@Injectable({
providedIn: 'root'
@ -49,7 +53,7 @@ export class DataStoreService {
* Empty constructor for dataStore
* @param http use HttpClient to send models back to the server
*/
constructor(private http: HttpClient) {}
constructor() {}
/**
* Read one, multiple or all ID's from dataStore
@ -145,54 +149,25 @@ export class DataStoreService {
* @param ...ids An or multiple IDs or a list of IDs of BaseModels. use spread operator ("...") for arrays
* @example this.DS.remove(User, myUser.id, 3, 4)
*/
remove(Type, ...ids: ModelId[]): void {
remove(collectionType, ...ids: ModelId[]): void {
console.log('remove from DS: collection', collectionType);
console.log('remove from DS: collection', ids);
let collectionString: string;
if (typeof collectionType === 'string') {
collectionString = collectionType;
} else {
const tempObject = new collectionType();
collectionString = tempObject.collectionString;
}
ids.forEach(id => {
const tempObject = new Type();
if (DataStoreService.store[tempObject.collectionString]) {
delete DataStoreService.store[tempObject.collectionString][id];
console.log(`did remove "${id}" from Datastore "${tempObject.collectionString}"`);
if (DataStoreService.store[collectionString]) {
delete DataStoreService.store[collectionString][id];
}
});
}
/**
* Saves the given model on the server
* @param model the BaseModel that shall be removed
* @return Observable of BaseModel
*/
save(model: BaseModel): Observable<BaseModel> {
if (!model.id) {
throw new ImproperlyConfiguredError('The model must have an id!');
}
// TODO not tested
return this.http.post<BaseModel>(model.collectionString + '/', model).pipe(
tap(response => {
console.log('the response: ', response);
this.add(model);
})
);
}
/**
* Deletes the given model on the server
* @param model the BaseModel that shall be removed
* @return Observable of BaseModel
*/
delete(model: BaseModel): Observable<BaseModel> {
if (!model.id) {
throw new ImproperlyConfiguredError('The model must have an id!');
}
// TODO not tested
return this.http.post<BaseModel>(model.collectionString + '/', model).pipe(
tap(response => {
console.log('the response: ', response);
this.remove(model, model.id);
})
);
}
/**
* Observe the dataStore for changes.
* @return an observable behaviorSubject

24
client/src/app/core/services/operator.service.ts
View File

@ -4,6 +4,7 @@ import { HttpClient } from '@angular/common/http';
import { tap, catchError, share } from 'rxjs/operators';
import { OpenSlidesComponent } from 'app/openslides.component';
import { Group } from 'app/shared/models/users/group';
import { User } from '../../shared/models/users/user';
/**
* The operator represents the user who is using OpenSlides.
@ -38,6 +39,8 @@ export class OperatorService extends OpenSlidesComponent {
username: string;
logged_in: boolean;
private _user: User;
/**
* The subject that can be observed by other instances using observing functions.
*/
@ -65,7 +68,7 @@ export class OperatorService extends OpenSlidesComponent {
}
}
// observe the datastore now to avoid race conditions. Ensures to
// observe the DataStore now to avoid race conditions. Ensures to
// find the groups in time
this.observeDataStore();
}
@ -77,7 +80,7 @@ export class OperatorService extends OpenSlidesComponent {
return this.http.get<any>('/users/whoami/').pipe(
tap(whoami => {
if (whoami && whoami.user) {
this.storeUser(whoami.user);
this.storeUser(whoami.user as User);
}
}),
catchError(this.handleError())
@ -87,8 +90,11 @@ export class OperatorService extends OpenSlidesComponent {
/**
* Store the user Information in the operator, the localStorage and update the Observable
* @param user usually a http response that represents a user.
*
* Todo: Could be refractored to use the actual User Object.
* Operator is older than user, so this is still a traditional JS way
*/
public storeUser(user: any): void {
public storeUser(user: User): void {
// store in file
this.about_me = user.about_me;
this.comment = user.comment;
@ -106,6 +112,7 @@ export class OperatorService extends OpenSlidesComponent {
this.structure_level = user.structure_level;
this.title = user.title;
this.username = user.username;
// also store in localstorrage
this.updateLocalStorage();
// update mode to inform observers
@ -187,6 +194,10 @@ export class OperatorService extends OpenSlidesComponent {
if (newModel instanceof Group) {
this.addGroup(newModel);
}
if (newModel instanceof User && this.id === newModel.id) {
this._user = newModel;
}
});
}
@ -243,4 +254,11 @@ export class OperatorService extends OpenSlidesComponent {
this.setObservable(newGroup);
}
}
/**
* get the user that corresponds to operator.
*/
get user(): User {
return this._user;
}
}

3
client/src/app/openslides.component.ts
View File

@ -1,7 +1,8 @@
import { Injector } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { DataStoreService } from 'app/core/services/dataStore.service';
import { DataStoreService } from './core/services/data-store.service';
/**
* injects the {@link DataStoreService} to all its children and provides a generic function to catch errors

1
client/src/app/shared/directives/os-perms.directive.ts
View File

@ -78,7 +78,6 @@ export class OsPermsDirective extends OpenSlidesComponent {
private updateView(): void {
if (this.checkPermissions()) {
// will just render the page normally
console.log('do show: ', this.template, ' - ', this.viewContainer);
this.viewContainer.createEmbeddedView(this.template);
} else {
// will remove the content of the container

8
client/src/app/shared/models/motions/motion-version.ts
View File

@ -26,10 +26,10 @@ export class MotionVersion implements Deserializable {
this.id = id;
this.version_number = version_number;
this.creation_time = creation_time;
this.title = title;
this.text = text;
this.amendment_paragraphs = amendment_paragraphs;
this.reason = reason;
this.title = title || '';
this.text = text || '';
this.amendment_paragraphs = amendment_paragraphs || '';
this.reason = reason || '';
}
deserialize(input: any): this {

162
client/src/app/shared/models/motions/motion.ts
View File

@ -6,6 +6,7 @@ import { Config } from '../core/config';
import { Workflow } from './workflow';
import { User } from '../users/user';
import { Category } from './category';
import { WorkflowState } from './workflow-state';
/**
* Representation of Motion.
@ -36,6 +37,15 @@ export class Motion extends BaseModel {
agenda_item_id: number;
log_messages: MotionLog[];
// read from config
workflow_id: number;
// by the config above
workflow: Workflow;
// for request
title: string;
text: string;
constructor(
id?: number,
identifier?: string,
@ -60,49 +70,116 @@ export class Motion extends BaseModel {
super();
this._collectionString = 'motions/motion';
this.id = id;
this.identifier = identifier;
this.versions = versions;
this.identifier = identifier || '';
this.versions = versions || [new MotionVersion()];
this.active_version = active_version;
this.parent_id = parent_id;
this.category_id = category_id;
this.motion_block_id = motion_block_id;
this.origin = origin;
this.submitters = submitters;
this.origin = origin || '';
this.submitters = submitters || [];
this.supporters_id = supporters_id;
this.comments = comments;
this.state_id = state_id;
this.state_required_permission_to_see = state_required_permission_to_see;
this.state_required_permission_to_see = state_required_permission_to_see || '';
this.recommendation_id = recommendation_id;
this.tags_id = tags_id;
this.attachments_id = attachments_id;
this.polls = polls;
this.agenda_item_id = agenda_item_id;
this.log_messages = log_messages;
this.log_messages = log_messages || [];
this.initDataStoreValues();
}
/**
* update the values of the motion with new values
*/
patchValues(update: object) {
Object.assign(this, update);
}
/**
* sets the workflow_id and the workflow
*/
initDataStoreValues() {
const motionsWorkflowConfig = this.DS.filter(Config, config => config.key === 'motions_workflow')[0] as Config;
if (motionsWorkflowConfig) {
this.workflow_id = +motionsWorkflowConfig.value;
} else {
this.DS.getObservable().subscribe(newConfig => {
if (newConfig instanceof Config && newConfig.key === 'motions_workflow') {
this.workflow_id = +newConfig.value;
}
});
}
this.workflow = this.DS.get(Workflow, this.workflow_id) as Workflow;
if (!this.workflow.id) {
this.DS.getObservable().subscribe(newModel => {
if (newModel instanceof Workflow && newModel.id === this.workflow_id) {
this.workflow = newModel;
}
});
}
}
/** add a new motionSubmitter from user-object */
addSubmitter(user: User) {
const newSubmitter = new MotionSubmitter(null, user.id);
this.submitters.push(newSubmitter);
console.log('did addSubmitter. this.submitters: ', this.submitters);
}
/**
* returns the most current title from versions
*/
get currentTitle() {
if (this.versions[0]) {
get currentTitle(): string {
if (this.versions && this.versions[0]) {
return this.versions[0].title;
} else {
return '';
}
}
set currentTitle(newTitle: string) {
if (this.versions[0]) {
this.versions[0].title = newTitle;
}
}
/**
* returns the most current motion text from versions
*/
get currentText() {
if (this.versions) {
return this.versions[0].text;
} else {
return null;
}
}
set currentText(newText: string) {
this.versions[0].text = newText;
}
/**
* returns the most current motion reason text from versions
*/
get currentReason() {
if (this.versions) {
return this.versions[0].reason;
} else {
return null;
}
}
/**
* Update the current reason.
* TODO: ignores motion versions. Should make a new one.
*/
set currentReason(newReason: string) {
this.versions[0].reason = newReason;
}
/**
@ -110,76 +187,64 @@ export class Motion extends BaseModel {
*/
get submitterAsUser() {
const submitterIds = [];
if (this.submitters && this.submitters.length > 0) {
this.submitters.forEach(submitter => {
submitterIds.push(submitter.user_id);
});
const users = this.DS.get(User, ...submitterIds);
return users;
}
/**
* returns the name of the first submitter
*/
get submitterName() {
const mainSubmitter = this.DS.get(User, this.submitters[0].user_id) as User;
if (mainSubmitter) {
return mainSubmitter.username;
} else {
return '';
return null;
}
}
/**
* get the category of a motion as object
*/
get category() {
get category(): any {
if (this.category_id) {
const motionCategory = this.DS.get(Category, this.category_id);
return motionCategory;
return motionCategory as Category;
} else {
return 'none';
return '';
}
}
/**
* return the workflow state
*
* Right now only the default workflow is assumed
* TODO: Motion workflow needs to be specific on the server
* Set the category in the motion
*/
get stateName() {
//get the default workflow
const motionsWorkflowConfig = this.DS.filter(Config, config => config.key === 'motions_workflow')[0] as Config;
//make sure this is a number
const workflowId = +motionsWorkflowConfig.value;
//get the workflow for out motion
const selectedWorkflow = this.DS.get(Workflow, workflowId) as Workflow;
const stateName = selectedWorkflow.getStateNameById(this.state_id);
if (stateName !== 'NULL') {
return stateName;
set category(newCategory: any) {
this.category_id = newCategory.id;
}
/**
* return the workflow state
*/
get state(): any {
if (this.state_id && this.workflow && this.workflow.id) {
const state = this.workflow.state_by_id(this.state_id);
return state;
} else {
return '';
}
}
get possibleStates() {
return '';
/**
* returns possible states for the motion
*/
get possible_states(): WorkflowState[] {
return this.workflow.states;
}
/**
* Returns the name of the recommendation.
*
* Right now only the default workflow is assumed
* TODO: Motion workflow needs to be specific on the server
*/
get recommendation() {
//get the default workflow
const motionsWorkflowConfig = this.DS.filter(Config, config => config.key === 'motions_workflow')[0] as Config;
const workflowId = +motionsWorkflowConfig.value;
const selectedWorkflow = this.DS.get(Workflow, workflowId) as Workflow;
const stateName = selectedWorkflow.getStateNameById(this.recommendation_id);
if (stateName !== 'NULL') {
return stateName;
get recommendation(): any {
if (this.recommendation_id && this.workflow && this.workflow.id) {
const state = this.workflow.state_by_id(this.recommendation_id);
return state;
} else {
return '';
}
@ -193,8 +258,13 @@ export class Motion extends BaseModel {
Config,
config => config.key === 'motions_recommendations_by'
)[0] as Config;
if (motionsRecommendationsByConfig) {
const recomByString = motionsRecommendationsByConfig.value;
return recomByString;
} else {
return null;
}
}
deserialize(input: any): this {

4
client/src/app/shared/models/motions/workflow-state.ts
View File

@ -83,4 +83,8 @@ export class WorkflowState implements Deserializable {
Object.assign(this, input);
return this;
}
public toString = (): string => {
return this.name;
};
}

8
client/src/app/shared/models/motions/workflow.ts
View File

@ -21,14 +21,14 @@ export class Workflow extends BaseModel {
this.first_state = first_state;
}
getStateNameById(id: number): string {
let stateName = 'NULL';
state_by_id(id: number): WorkflowState {
let targetState;
this.states.forEach(state => {
if (id === state.id) {
stateName = state.name;
targetState = state;
}
});
return stateName;
return targetState as WorkflowState;
}
deserialize(input: any): this {

35
client/src/app/shared/models/users/user.ts
View File

@ -64,4 +64,39 @@ export class User extends BaseModel {
getGroups(): BaseModel | BaseModel[] {
return this.DS.get('users/group', ...this.groups_id);
}
//TODO get full_name
// TODO read config values for "users_sort_by"
get short_name(): string {
const title = this.title.trim();
const firstName = this.first_name.trim();
const lastName = this.last_name.trim();
let shortName = '';
// TODO need DS adjustment first first
// if (this.DS.getConfig('users_sort_by').value === 'last_name') {
// if (lastName && firstName) {
// shortName += `${lastName}, ${firstName}`;
// } else {
// shortName += lastName || firstName;
// }
// }
shortName += `${firstName} ${lastName}`;
if (shortName.trim() === '') {
shortName = this.username;
}
if (title) {
shortName = `${title} ${shortName}`;
}
return shortName.trim();
}
public toString = (): string => {
return this.short_name;
};
}

6
client/src/app/shared/shared.module.ts
View File

@ -20,6 +20,8 @@ import { MatDialogModule } from '@angular/material/dialog';
import { MatListModule } from '@angular/material/list';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatMenuModule } from '@angular/material/menu';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
// FontAwesome modules
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@ -48,6 +50,8 @@ library.add(fas);
imports: [
CommonModule,
FormsModule,
MatFormFieldModule,
MatSelectModule,
ReactiveFormsModule,
MatButtonModule,
MatCheckboxModule,
@ -68,6 +72,8 @@ library.add(fas);
],
exports: [
FormsModule,
MatFormFieldModule,
MatSelectModule,
ReactiveFormsModule,
MatButtonModule,
MatCheckboxModule,

230
client/src/app/site/motions/motion-detail/motion-detail.component.html
View File

@ -1,90 +1,148 @@
<mat-toolbar color='primary'>
<button class='generic-mini-button on-transition-fade' mat-mini-fab>
<fa-icon icon='pen'></fa-icon>
<button (click)='editMotionButton()' [ngClass]="{'save-button': editMotion}" class='generic-mini-button on-transition-fade'
mat-mini-fab>
<fa-icon *ngIf="!editMotion" icon='pen'></fa-icon>
<fa-icon *ngIf="editMotion" icon='check'></fa-icon>
</button>
<!-- motion.identifier -->
<!-- motion.versions[0].title -->
<div class='motion-title on-transition-fade'>
<span translate>Motion</span> {{motion.identifier}}: {{motion.currentTitle}}
<span *ngIf="newMotion">New </span>
<span translate>Motion</span>
<span *ngIf="motion && !editMotion"> {{motion.identifier}}</span>
<span *ngIf="editMotion && !newMotion"> {{metaInfoForm.get('identifier').value}}</span>
<span>:</span>
<span *ngIf="motion && !editMotion"> {{motion.currentTitle}}</span>
<span *ngIf="editMotion"> {{contentForm.get('currentTitle').value}}</span>
<br>
<div class='motion-submitter'>
<span translate>by</span> {{motion.submitterName}}
<div *ngIf="motion" class='motion-submitter'>
<span translate>by</span> {{motion.submitterAsUser}}
</div>
</div>
<span class='spacer'></span>
<button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
<fa-icon icon='ellipsis-v'></fa-icon>
</button>
<mat-menu #motionExtraMenu="matMenu">
<!-- TODO the functions for the buttons -->
<button mat-menu-item translate>Export As...</button>
<button mat-menu-item translate>Project</button>
<mat-divider></mat-divider>
<button mat-menu-item class='deleteMotionButton' (click)='deleteMotionButton()' translate>DeleteMotion</button>
</mat-menu>
</mat-toolbar>
<mat-accordion multi='true' class='on-transition-fade'>
<!-- <mat-expansion-panel [expanded]='true' class='meta-info-panel'> -->
<mat-expansion-panel class='meta-info-panel'>
<!-- MetaInfo -->
<!-- <mat-expansion-panel #metaInfoPanel [expanded]='true' class='meta-info-panel'> -->
<mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-panel'>
<mat-expansion-panel-header>
<mat-panel-title>
<fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
<span translate>Meta information</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div class='meta-info-panel-body'>
<div *ngIf="motion.submitterName">
<h3 translate>Submitters</h3>
{{motion.submitterName}}
<!-- Meta info -->
<form [formGroup]='metaInfoForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>
<!-- Identifier -->
<div *ngIf="editMotion && !newMotion">
<!-- <div *ngIf="editMotion"> -->
<div *ngIf='!editMotion'>
<h3 translate>Identifier</h3>
{{motion.identifier}}
</div>
<div *ngIf='motion.supporters_id && motion.supporters_id.length > 0'>
<h3>translate>Supporters</h3>
<!-- print all motion supporters -->
</div>
<div *ngIf='motion.state_id'>
<h3>
<a [matMenuTriggerFor]="stateMenu">
<span translate>Status</span>
<fa-icon icon='cog'></fa-icon>
</a>
</h3>
{{motion.stateName}}
</div>
<div *ngIf='motion.recommendation_id'>
<h3>
<a [matMenuTriggerFor]="stateMenu">
<span>{{motion.recomBy}}</span>
<fa-icon icon='cog'></fa-icon>
</a>
</h3>
{{motion.recommendation}}
</div>
<div *ngIf="motion.category_id">
<h3>
<a [matMenuTriggerFor]="categoryMenu">
<span translate>Category</span>
<fa-icon icon='cog'></fa-icon>
</a>
</h3>
{{motion.category}}
</div>
<div *ngIf="motion.origin">
<h3>
<span translate>Origin</span>
<fa-icon icon='cog'></fa-icon>
</h3>
<span>{{motion.origin}}</span>
<br>
<mat-form-field>
<input matInput #origin placeholder='Origin' value={{motion.origin}}>
<mat-form-field *ngIf="editMotion">
<input matInput placeholder='Identifier' formControlName='identifier' [value]='motion.identifier'>
</mat-form-field>
</div>
<div *ngIf='motion.polls && motion.polls.length > 0'>
<!-- Submitter -->
<div *ngIf="motion && motion.submitters || editMotion">
<h3 translate>Submitters</h3>
{{motion.submitterAsUser}}
</div>
<!-- Supporter -->
<div *ngIf='motion && motion.supporters_id && motion.supporters_id.length > 0 || editMotion'>
<h3 translate>Supporters</h3>
<!-- print all motion supporters -->
</div>
<!-- State -->
<div *ngIf='motion && motion.state_id || editMotion'>
<div *ngIf='!editMotion'>
<h3 translate>State</h3>
{{motion.state.name}}
</div>
<mat-form-field *ngIf="editMotion">
<mat-select placeholder='State' formControlName='state_id'>
<mat-option *ngFor="let state of motion.possible_states" [value]="state.id">{{state}}</mat-option>
<mat-divider></mat-divider>
<mat-option>
<fa-icon icon='exclamation-triangle'></fa-icon>
<span translate>Reset State</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Recommendation -->
<!-- The suggestion of the work group weather or not a motion should be accepted -->
<div *ngIf='motion && motion.recomBy && (motion.recommendation_id || editMotion)'>
<div *ngIf='!editMotion'>
<h3>{{motion.recomBy}}</h3>
{{motion.recommendation.name}}
</div>
<mat-form-field *ngIf="motion && editMotion">
<mat-select placeholder='Recommendation' formControlName='recommendation_id'>
<mat-option *ngFor="let state of motion.possible_states" [value]="state.id">{{state}}</mat-option>
<mat-divider></mat-divider>
<mat-option>
<fa-icon icon='exclamation-triangle'></fa-icon>
<span translate>Reset recommendation</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Category -->
<div *ngIf="motion && motion.category_id || editMotion">
<div *ngIf='!editMotion'>
<h3 translate> Category</h3>
{{motion.category}}
</div>
<mat-form-field *ngIf="motion && editMotion">
<mat-select placeholder='Category' formControlName='category_id'>
<mat-option>None</mat-option>
<mat-divider></mat-divider>
<mat-option *ngFor="let cat of getMotionCategories()" [value]="cat.id">{{cat}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Origin -->
<div *ngIf="motion && motion.origin || editMotion">
<div *ngIf='!editMotion'>
<h3 translate> Origin</h3>
{{motion.origin}}
</div>
<mat-form-field *ngIf="editMotion">
<input matInput placeholder='Origin' formControlName='origin' [value]='motion.origin'>
</mat-form-field>
</div>
<!-- Voting -->
<!-- <div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
<h3 translate>Voting</h3>
</div>
</div>
</div> -->
</form>
</mat-expansion-panel>
<!-- <mat-expansion-panel [expanded]='true'> -->
<!-- Personal Note -->
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
@ -94,7 +152,9 @@
</mat-expansion-panel-header>
TEST
</mat-expansion-panel>
<mat-expansion-panel [expanded]='true' class='content-panel'>
<!-- Content -->
<mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
<mat-expansion-panel-header>
<mat-panel-title>
<fa-icon icon='align-left' [fixedWidth]="true"></fa-icon>
@ -102,23 +162,39 @@
</mat-panel-title>
</mat-expansion-panel-header>
<form [formGroup]='contentForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>
<!-- Title -->
<div *ngIf="motion && motion.currentTitle || editMotion">
<div *ngIf='!editMotion'>
<h2>{{motion.currentTitle}}</h2>
</div>
<mat-form-field *ngIf="editMotion" class='wide-text'>
<input matInput placeholder='Title' formControlName='currentTitle' [value]='motion.currentTitle'>
</mat-form-field>
</div>
<!-- Text -->
<!-- TODO: this is a config variable. Read it out -->
<h3 translate>The assembly may decide:</h3>
<div *ngIf='motion && !editMotion'>
<div [innerHtml]='motion.currentText'></div>
</div>
<mat-form-field *ngIf="motion && editMotion" class='wide-text'>
<textarea matInput placeholder='Motion Text' formControlName='currentText' [value]='motion.currentText'></textarea>
</mat-form-field>
<h4 *ngIf='motion.currentReason' translate class='motion-reason-label'>Reason</h4>
<!-- Reason -->
<div *ngIf="motion && motion.currentReason || editMotion">
<div *ngIf='!editMotion'>
<h4 translate>Reason</h4>
<div [innerHtml]='motion.currentReason'></div>
</div>
<mat-form-field *ngIf="editMotion" class='wide-text'>
<textarea matInput placeholder="Reason" formControlName='currentReason' [value]='motion.currentReason'></textarea>
</mat-form-field>
</div>
</form>
</mat-expansion-panel>
</mat-accordion>
<!-- dummy values -->
<mat-menu #stateMenu="matMenu">
<button mat-menu-item translate>Accept</button>
<button mat-menu-item translate>Reject</button>
<button mat-menu-item translate>Do not decice</button>
</mat-menu>
<mat-menu #categoryMenu="matMenu">
<button mat-menu-item translate>B - Bildung</button>
<button mat-menu-item translate>T - Test</button>
</mat-menu>

28
client/src/app/site/motions/motion-detail/motion-detail.component.scss
View File

@ -2,6 +2,14 @@ span {
margin: 0;
}
.save-button {
background-color: rgb(77, 243, 86);
}
.deleteMotionButton {
color: red;
}
.motion-title {
padding-left: 20px;
line-height: 100%;
@ -52,17 +60,33 @@ mat-panel-title {
margin-left: 5px;
}
}
}
.meta-info-panel-body {
.wide-text {
width: 95%;
textarea {
height: 200px;
}
}
mat-expansion-panel {
.expansion-panel-custom-body {
padding-left: 55px;
}
}
.content-panel {
h2 {
display: block;
font-weight: bold;
font-size: 120%;
}
h3 {
display: block;
font-weight: initial;
font-size: 100%;
display: block;
}
h4 {

174
client/src/app/site/motions/motion-detail/motion-detail.component.ts
View File

@ -1,24 +1,80 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { OpenSlidesComponent } from '../../../openslides.component';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BaseComponent } from '../../../base.component';
import { Motion } from '../../../shared/models/motions/motion';
import { Category } from '../../../shared/models/motions/category';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MatExpansionPanel } from '@angular/material';
import { DataSendService } from '../../../core/services/data-send.service';
/**
* Component for the motion detail view
*/
@Component({
selector: 'app-motion-detail',
templateUrl: './motion-detail.component.html',
styleUrls: ['./motion-detail.component.scss']
})
export class MotionDetailComponent extends BaseComponent implements OnInit {
/**
* MatExpansionPanel for the meta info
*/
@ViewChild('metaInfoPanel') metaInfoPanel: MatExpansionPanel;
/**
* MatExpansionPanel for the content panel
*/
@ViewChild('contentPanel') contentPanel: MatExpansionPanel;
/**
* Target motion. Might be new or old
*/
motion: Motion;
constructor(private route: ActivatedRoute) {
super();
this.route.params.subscribe(params => {
console.log(params.id);
/**
* Motions meta-info
*/
metaInfoForm: FormGroup;
/**
* Motion content. Can be a new version
*/
contentForm: FormGroup;
/**
* Determine if the motion is edited
*/
editMotion = false;
/**
* Determine if the motion is new
*/
newMotion = false;
/**
* Constuct the detail view.
*
*
* @param route determine if this is a new or an existing motion
* @param formBuilder For reactive forms. Form Group and Form Control
*/
constructor(
private router: Router,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private dataSend: DataSendService
) {
super();
this.createForm();
if (route.snapshot.url[0].path === 'new') {
this.newMotion = true;
this.editMotion = true;
this.motion = new Motion();
} else {
// load existing motion
this.route.params.subscribe(params => {
// has the motion of the DataStore was initialized before.
// Otherwise we need to observe DS
this.motion = this.DS.get(Motion, params.id) as Motion;
// Observe motion to get the motion in the parameter and also get the changes
@ -26,20 +82,106 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
if (newModel instanceof Motion) {
if (newModel.id === +params.id) {
this.motion = newModel as Motion;
console.log('this.motion = ', this.motion);
// console.log('motion state name: ', this.motion.stateName);
}
}
});
});
}
ngOnInit() {
console.log('(init)the motion: ', this.motion);
console.log('motion state name: ', this.motion.stateName);
}
downloadSingleMotionButton() {
console.log('Download this motion');
/**
* Async load the values of the motion in the Form.
*/
patchForm() {
this.metaInfoForm.patchValue({
category_id: this.motion.category.id,
state_id: this.motion.state.id,
recommendation_id: this.motion.recommendation.id,
identifier: this.motion.identifier,
origin: this.motion.origin
});
this.contentForm.patchValue({
currentTitle: this.motion.currentTitle,
currentText: this.motion.currentText,
currentReason: this.motion.currentReason
});
}
/**
* Creates the forms for the Motion and the MotionVersion
*
* TODO: Build a custom form validator
*/
createForm() {
this.metaInfoForm = this.formBuilder.group({
identifier: [''],
category_id: [''],
state_id: [''],
recommendation_id: [''],
origin: ['']
});
this.contentForm = this.formBuilder.group({
currentTitle: [''],
currentText: [''],
currentReason: ['']
});
}
/**
* Save a motion. Calls the "patchValues" function in the MotionObject
*
* http:post the motion to the server.
* The AutoUpdate-Service should see a change once it arrives and show it
* in the list view automatically
*/
saveMotion() {
const newMotionValues = { ...this.metaInfoForm.value, ...this.contentForm.value };
this.motion.patchValues(newMotionValues);
// TODO: This is DRAFT. Reads out Motion version directly. Potentially insecure.
this.motion.title = this.motion.currentTitle;
this.motion.text = this.motion.currentText;
this.dataSend.saveModel(this.motion).subscribe(answer => {
if (answer && answer.id && this.newMotion) {
this.router.navigate(['./motions/' + answer.id]);
}
});
}
/**
* return all Categories.
*/
getMotionCategories(): Category[] {
const categories = this.DS.get(Category);
return categories as Category[];
}
/**
* Click on the edit button (pen-symbol)
*/
editMotionButton() {
this.editMotion ? (this.editMotion = false) : (this.editMotion = true);
if (this.editMotion) {
this.patchForm();
this.metaInfoPanel.open();
this.contentPanel.open();
} else {
this.saveMotion();
}
}
/**
* Trigger to delete the motion
*/
deleteMotionButton() {
this.dataSend.delete(this.motion).subscribe(answer => {
this.router.navigate(['./motions/']);
});
}
/**
* Init. Does nothing here.
*/
ngOnInit() {}
}

8
client/src/app/site/motions/motion-list/motion-list.component.html
View File

@ -1,6 +1,6 @@
<mat-toolbar color='primary'>
<button class='generic-plus-button on-transition-fade' mat-fab>
<button class='generic-plus-button on-transition-fade' routerLink='new' mat-fab>
<fa-icon icon='plus'></fa-icon>
</button>
@ -43,7 +43,7 @@
<br>
<span class='motion-list-from'>
<span translate>by</span>
{{motion.submitterAsUser.username}}
{{motion.submitterAsUser}}
</span>
</div>
</mat-cell>
@ -53,8 +53,8 @@
<ng-container matColumnDef="state">
<mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell>
<mat-cell *matCellDef="let motion">
<div *ngIf='motion.stateName !== "submitted"' class='innerTable'>
<fa-icon icon={{getStateIcon(motion.stateName)}}></fa-icon>
<div *ngIf='motion.state && motion.state.name !== "submitted"' class='innerTable'>
<fa-icon icon={{getStateIcon(motion.state)}}></fa-icon>
</div>
</mat-cell>
</ng-container>

44
client/src/app/site/motions/motion-list/motion-list.component.ts
View File

@ -7,6 +7,9 @@ import { Motion } from '../../../shared/models/motions/motion';
import { MatTable, MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Workflow } from '../../../shared/models/motions/workflow';
/**
* Component that displays all the motions in a Table using DataSource.
*/
@Component({
selector: 'app-motion-list',
templateUrl: './motion-list.component.html',
@ -28,14 +31,26 @@ export class MotionListComponent extends BaseComponent implements OnInit {
*/
dataSource: MatTableDataSource<Motion>;
/**
* The table itself.
*/
@ViewChild(MatTable) table: MatTable<Motion>;
/**
* Pagination. Might be turned off to all motions at once.
*/
@ViewChild(MatPaginator) paginator: MatPaginator;
/**
* Sort the Table
*/
@ViewChild(MatSort) sort: MatSort;
/**
* Use for minimal width
*/
columnsToDisplayMinWidth = ['identifier', 'title', 'state'];
/**
* Use for maximal width
*/
@ -43,13 +58,16 @@ export class MotionListComponent extends BaseComponent implements OnInit {
/**
* Constructor implements title and translation Module.
* @param titleService
* @param translate
*
* @param titleService Title
* @param translate Translation
* @param router Router
* @param route Current route
*/
constructor(
public router: Router,
titleService: Title,
protected titleService: Title,
protected translate: TranslateService,
private router: Router,
private route: ActivatedRoute
) {
super(titleService, translate);
@ -70,35 +88,43 @@ export class MotionListComponent extends BaseComponent implements OnInit {
// The alternative approach is to put the observable as DataSource to the table
this.DS.getObservable().subscribe(newModel => {
if (newModel instanceof Motion) {
this.motionArray.push(newModel as Motion);
this.motionArray = this.DS.get(Motion) as Motion[];
this.dataSource.data = this.motionArray;
}
});
}
/**
* Select a motion from list. Executed via click.
*
* @param motion The row the user clicked at
*/
selectMotion(motion) {
console.log('clicked a row, :', motion);
this.router.navigate(['./' + motion.id], { relativeTo: this.route });
}
/**
* Get the icon to the coresponding Motion Status
* TODO Needs to be more accessible (Motion workflow needs adjustment on the server)
* @param stateName the name of the state
* @param state the name of the state
*/
getStateIcon(stateName) {
getStateIcon(state) {
const stateName = state.name;
if (stateName === 'accepted') {
return 'thumbs-up';
} else if (stateName === 'rejected') {
return 'thumbs-down';
} else if (stateName === 'not decided') {
return 'question';
} else {
return '';
}
}
/**
* Download all motions As PDF and DocX
*
* TODO: Currently does nothing
*/
downloadMotionsButton() {
console.log('Download Motions Button');

2
client/src/app/site/motions/motions-routing.module.ts
View File

@ -5,7 +5,7 @@ import { MotionDetailComponent } from './motion-detail/motion-detail.component';
const routes: Routes = [
{ path: '', component: MotionListComponent },
{ path: 'dummy', component: MotionDetailComponent },
{ path: 'new', component: MotionDetailComponent },
{ path: ':id', component: MotionDetailComponent }
];

6
client/src/app/site/site.component.ts
View File

@ -66,9 +66,9 @@ export class SiteComponent extends BaseComponent implements OnInit {
});
// get a translation via code: use the translation service
this.translate.get('Motions').subscribe((res: string) => {
console.log('translation of motions in the target language: ' + res);
});
// this.translate.get('Motions').subscribe((res: string) => {
// console.log('translation of motions in the target language: ' + res);
// });
// start autoupdate if the user is logged in:
this.operator.whoAmI().subscribe(resp => {

1
client/src/app/site/start/start.component.ts
View File

@ -64,7 +64,6 @@ export class StartComponent extends BaseComponent implements OnInit {
if (welcomeTextConfig) {
this.welcomeText = welcomeTextConfig.value as string;
}
console.log(this.DS.filter(Config, config => config.key === 'general_event_welcome_title'));
// observe title and text in DS
this.DS.getObservable().subscribe(newModel => {