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

Merge pull request #3891 from tsiegleauq/cu-user

Browse Source 
User create update and details view

Some open tasks left (features are quire heavy). See recent issues
This commit is contained in:
Sean 2018-09-28 12:42:30 +02:00 committed by GitHub
commit b6ad0d759c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 1041 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/app/app.component.ts
View File

@ -15,7 +15,12 @@ import { ConstantsService } from './core/services/constants.service';
})
export class AppComponent {
/**
* Initialises the translation unit.
* Master-component of all apps.
*
* Inits the translation service, the operator, the login data and the constants.
*
* Handles the altering of Array.toString()
*
* @param autoupdateService
* @param notifyService
* @param translate
@ -35,5 +40,36 @@ export class AppComponent {
const browserLang = translate.getBrowserLang();
// try to use the browser language if it is available. If not, uses english.
translate.use(translate.getLangs().includes(browserLang) ? browserLang : 'en');
// change default JS functions
this.overloadArrayToString();
}
/**
* Function to alter the normal Array.toString - function
*
* Will add a whitespace after a comma and shorten the output to
* three strings.
*
* TODO: There might be a better place for overloading functions than app.component
* TODO: Overloading can be extended to more functions.
*/
private overloadArrayToString(): void {
Array.prototype.toString = function(): string {
let string = '';
const iterations = Math.min(this.length, 3);
for (let i = 0; i <= iterations; i++) {
if (i < iterations) {
string += this[i];
}
if (i < iterations - 1) {
string += ', ';
} else if (i === iterations && this.length > iterations) {
string += ', ...';
}
}
return string;
};
}
}

61
client/src/app/core/services/data-send.service.ts
View File

@ -21,31 +21,46 @@ export class DataSendService {
public constructor(private http: HttpClient) {}
/**
* Save motion in the server
*
* @return Observable from
* Sends a post request with the model to the server.
* Usually for new Models
*/
public 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.patch<BaseModel>('rest/' + model.collectionString + '/' + model.id, model).pipe(
tap(
response => {
console.log('Update model. Response : ', response);
},
error => console.log('error. ', error)
)
);
public createModel(model: BaseModel): Observable<BaseModel> {
return this.http.post<BaseModel>('rest/' + model.collectionString + '/', model).pipe(
tap(
response => {
// TODO: Message, Notify, Etc
console.log('New Model added. Response :\n', response);
},
error => console.error('createModel has returned an Error:\n', error)
)
);
}
/**
* Function to change a model on the server.
*
* @param model the base model that is meant to be changed
* @param method the required http method. might be put or patch
*/
public updateModel(model: BaseModel, method: 'put' | 'patch'): Observable<BaseModel> {
const restPath = `rest/${model.collectionString}/${model.id}`;
let httpMethod;
if (method === 'patch') {
httpMethod = this.http.patch<BaseModel>(restPath, model);
} else if (method === 'put') {
httpMethod = this.http.put<BaseModel>(restPath, model);
}
return httpMethod.pipe(
tap(
response => {
// TODO: Message, Notify, Etc
console.log('Update model. Response :\n', response);
},
error => console.error('updateModel has returned an Error:\n', error)
)
);
}
/**

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

@ -121,11 +121,11 @@ export class OperatorService extends OpenSlidesComponent {
/**
* Checks, if the operator has at least one of the given permissions.
* @param permissions The permissions to check, if at least one matches.
* @param checkPerms The permissions to check, if at least one matches.
*/
public hasPerms(...permissions: Permission[]): boolean {
return permissions.some(permisison => {
return this.permissions.includes(permisison);
public hasPerms(...checkPerms: Permission[]): boolean {
return checkPerms.some(permission => {
return this.permissions.includes(permission);
});
}

26
client/src/app/shared/directives/perms.directive.ts
View File

@ -25,6 +25,20 @@ export class PermsDirective extends OpenSlidesComponent {
*/
private lastPermissionCheckResult = false;
/**
* Alternative to the permissions. Used in special case where a combination
* with *ngIf would be required.
*
* # Example:
*
* The div will render if the permission `user.can_manage` is set
* or if `this.ownPage` is `true`
* ```html
* <div *osPerms="'users.can_manage';or:ownPage"> something </div>
* ```
*/
private alternative: boolean;
/**
* Constructs the directive once. Observes the operator for it's groups so the
* directive can perform changes dynamically
@ -61,6 +75,16 @@ export class PermsDirective extends OpenSlidesComponent {
this.updateView();
}
/**
* Comes from the view.
* `;or:` turns into osPermsOr during runtime.
*/
@Input('osPermsOr')
public set osPermsAlt(value: boolean) {
this.alternative = value;
this.updateView();
}
/**
* Shows or hides certain content in the view.
*/
@ -68,7 +92,7 @@ export class PermsDirective extends OpenSlidesComponent {
const hasPerms = this.checkPermissions();
const permsChanged = hasPerms !== this.lastPermissionCheckResult;
if (hasPerms && permsChanged) {
if ((hasPerms && permsChanged) || this.alternative) {
// clean up and add the template
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.template);

3
client/src/app/shared/models/base/base-model.ts
View File

@ -60,6 +60,9 @@ export abstract class BaseModel<T = object> extends OpenSlidesComponent
});
}
/**
* update the values of the base model with new values
*/
public patchValues(update: Partial<T>): void {
Object.assign(this, update);
}

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

@ -15,7 +15,8 @@ import {
MatSnackBarModule,
MatTableModule,
MatPaginatorModule,
MatSortModule
MatSortModule,
MatTooltipModule
} from '@angular/material';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material';
@ -79,6 +80,7 @@ library.add(fas);
MatDialogModule,
MatSnackBarModule,
MatChipsModule,
MatTooltipModule,
FontAwesomeModule,
TranslateModule.forChild(),
RouterModule,
@ -106,6 +108,7 @@ library.add(fas);
MatDialogModule,
MatSnackBarModule,
MatChipsModule,
MatTooltipModule,
NgxMatSelectSearchModule,
FontAwesomeModule,
TranslateModule,

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

@ -23,8 +23,9 @@
<!-- Button on the right-->
<div *ngIf="editMotion">
<button (click)='cancelEditMotionButton()' class='on-transition-fade' mat-icon-button>
<fa-icon icon='times'></fa-icon>
<button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button>
<span translate>Abort</span>
<fa-icon class="icon-text-distance" icon='times'></fa-icon>
</button>
</div>
<div *ngIf="!editMotion">
@ -39,7 +40,7 @@
<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>
<button mat-menu-item class='red-warning-text' (click)='deleteMotionButton()' translate>DeleteMotion</button>
</mat-menu>
</mat-toolbar>

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

@ -2,14 +2,6 @@ span {
margin: 0;
}
.save-button {
background-color: rgb(77, 243, 86);
}
.deleteMotionButton {
color: red;
}
.motion-title {
padding-left: 20px;
line-height: 100%;

10
client/src/app/site/motions/components/motion-list/motion-list.component.scss
View File

@ -1,13 +1,3 @@
.custom-table-header {
// display: none;
width: 100%;
height: 60px;
line-height: 60px;
text-align: right;
background: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
/** css hacks https://codepen.io/edge0703/pen/iHJuA */
.innerTable {
display: inline-block;

4
client/src/app/site/motions/services/category-repository.service.ts
View File

@ -40,7 +40,7 @@ export class CategoryRepositoryService extends BaseRepository<ViewCategory, Cate
if (this.osInDataStore(viewCategory)) {
return this.update(update, viewCategory);
} else {
return this.dataSend.saveModel(viewCategory.category);
return this.dataSend.createModel(viewCategory.category);
}
}
@ -52,7 +52,7 @@ export class CategoryRepositoryService extends BaseRepository<ViewCategory, Cate
updateCategory = new Category();
}
updateCategory.patchValues(update);
return this.dataSend.saveModel(updateCategory);
return this.dataSend.updateModel(updateCategory, 'put');
}
public delete(viewCategory: ViewCategory): Observable<any> {

4
client/src/app/site/motions/services/motion-repository.service.ts
View File

@ -66,7 +66,7 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
* TODO: Remove the viewMotion and make it actually distignuishable from save()
*/
public create(motion: Motion): Observable<any> {
return this.dataSend.saveModel(motion);
return this.dataSend.createModel(motion);
}
/**
@ -81,7 +81,7 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
public update(update: Partial<Motion>, viewMotion: ViewMotion): Observable<any> {
const motion = viewMotion.motion;
motion.patchValues(update);
return this.dataSend.saveModel(motion);
return this.dataSend.updateModel(motion, 'patch');
}
/**

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

@ -1,4 +1,5 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'app/core/services/auth.service';
import { OperatorService } from 'app/core/services/operator.service';
@ -21,7 +22,8 @@ export class SiteComponent extends BaseComponent implements OnInit {
/**
* HTML element of the side panel
*/
@ViewChild('sideNav') public sideNav: MatSidenav;
@ViewChild('sideNav')
public sideNav: MatSidenav;
/**
* Get the username from the operator (should be known already)
@ -37,6 +39,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
* Constructor
*
* @param authService
* @param router
* @param operator
* @param vp
* @param translate
@ -44,6 +47,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
*/
public constructor(
private authService: AuthService,
private router: Router,
public operator: OperatorService,
public vp: ViewportService,
public translate: TranslateService,
@ -109,7 +113,11 @@ export class SiteComponent extends BaseComponent implements OnInit {
}
// TODO: Implement this
public editProfile(): void {}
public editProfile(): void {
if (this.operator.user) {
this.router.navigate([`./users/${this.operator.user.id}`]);
}
}
// TODO: Implement this
public changePassword(): void {}

152
client/src/app/site/users/components/user-detail/user-detail.component.html Normal file
View File

@ -0,0 +1,152 @@
<mat-toolbar color='primary'>
<button *osPerms="'users.can_manage';or:ownPage" (click)='editUserButton()' [ngClass]="{'save-button': editUser}"
class='generic-mini-button on-transition-fade' mat-mini-fab>
<fa-icon *ngIf='!editUser' icon='pen'></fa-icon>
<fa-icon *ngIf='editUser' icon='check'></fa-icon>
</button>
<div class="on-transition-fade">
<div *ngIf='editUser'>
{{personalInfoForm.get('title').value}}
{{personalInfoForm.get('first_name').value}}
{{personalInfoForm.get('last_name').value}}
</div>
<div *ngIf='!editUser'>
{{user.fullName}}
</div>
</div>
<span class='spacer'></span>
<!-- Button on the right-->
<div *ngIf="editUser">
<button (click)='cancelEditMotionButton()' class='on-transition-fade' color="warn" mat-raised-button>
<span translate>Abort</span>
<fa-icon class="icon-text-distance" icon='times'></fa-icon>
</button>
</div>
<div *ngIf="!editUser">
<button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="userExtraMenu">
<fa-icon icon='ellipsis-v'></fa-icon>
</button>
</div>
<mat-menu #userExtraMenu="matMenu">
<button mat-menu-item class="red-warning-text" (click)='deleteUserButton()' translate>Delete User</button>
</mat-menu>
</mat-toolbar>
<mat-card class="os-card" *osPerms="'users.can_see_name'">
<form [ngClass]="{'mat-form-field-enabled': editUser}" [formGroup]='personalInfoForm' (ngSubmit)='saveUser()' *ngIf="user">
<!-- <h3 translate>Personal Data</h3> -->
<div *ngIf='isAllowed("seeName")'>
<!-- Title -->
<mat-form-field class='form30 distance force-min-with' *ngIf='user.title || editUser && isAllowed("manage")'>
<input type='text' matInput placeholder='{{"Title" | translate}}' formControlName='title' [value]='user.title'>
</mat-form-field>
<!-- First name -->
<mat-form-field class='form30 distance force-min-with' *ngIf='user.firstName || editUser && isAllowed("manage")'>
<input type='text' matInput placeholder='{{"First Name" | translate}}' formControlName='first_name'
[value]='user.firstName'>
</mat-form-field>
<!-- Last name -->
<mat-form-field class='form30 force-min-with' *ngIf='user.lastName || editUser && isAllowed("manage")'>
<input type='text' matInput placeholder='{{"Last Name" | translate}}' formControlName='last_name'
[value]='user.lastName'>
</mat-form-field>
</div>
<div *ngIf='isAllowed("seePersonal")'>
<!-- E-Mail -->
<mat-form-field class='form100' *ngIf="user.email || editUser">
<input type='email' matInput placeholder='{{"EMail" | translate}}' name="email" formControlName='email'
[value]='user.email'>
<mat-error *ngIf="personalInfoForm.get('email').hasError('email')">
Please enter a valid email address
</mat-error>
</mat-form-field>
</div>
<div>
<!-- Strcuture Level -->
<mat-form-field class='form70 distance' *ngIf='user.structureLevel || editUser && isAllowed("manage")'>
<input type='text' matInput placeholder='{{"Structure Level" | translate}}' formControlName='structure_level'
[value]='user.structureLevel'>
</mat-form-field>
<!-- Partizipant Number -->
<mat-form-field class='form20 force-min-with' *ngIf='user.participantNumber || editUser && isAllowed("manage")'>
<input type='text' matInput placeholder='{{"Participant Number" | translate}}' formControlName='number'
[value]='user.participantNumber'>
</mat-form-field>
</div>
<div>
<!-- Groups -->
<mat-form-field class='form100' *ngIf="user.groups && user.groups.length > 0 || editUser">
<mat-select placeholder='{{"Groups" | translate}}' formControlName='groups_id' multiple>
<mat-option *ngFor="let group of groups" [value]="group.id">{{group}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf='isAllowed("manage")'>
<!-- Initial Password -->
<mat-form-field class='form100'>
<input matInput placeholder='{{"Initial Password" | translate}}' formControlName='default_password'
[value]='user.initialPassword'>
<mat-hint align="end">Generate</mat-hint>
<button type="button" mat-button matSuffix mat-icon-button [disabled]='!newUser' (click)='generatePassword()'>
<fa-icon icon='magic'></fa-icon>
</button>
</mat-form-field>
</div>
<div *ngIf='isAllowed("seePersonal")'>
<!-- About me -->
<!-- TODO: Needs Rich Text Editor -->
<mat-form-field class='form100' *ngIf="user.about || editUser">
<textarea formControlName='about_me' matInput placeholder='{{"About Me" | translate}}' [value]='user.about'></textarea>
</mat-form-field>
</div>
<div *ngIf='isAllowed("seePersonal")'>
<!-- username -->
<mat-form-field class='form100' *ngIf="user.username || editUser">
<input type='text' matInput placeholder='{{"Username" | translate}}' formControlName='username' [value]='user.username'>
</mat-form-field>
</div>
<div *ngIf='isAllowed("seeExtra")'>
<!-- Comment -->
<mat-form-field class='form100' *ngIf="user.comment || editUser">
<input matInput placeholder='{{"Comment"| translate}}' formControlName='comment' [value]='user.comment'>
<mat-hint translate>Only for internal notes.</mat-hint>
</mat-form-field>
</div>
<div *ngIf='isAllowed("seeExtra")'>
<!-- Present? -->
<mat-checkbox formControlName='is_present' matTooltip='{{"Designates whether this user is in the room." | translate}} '
[value]='user.isPresent'>
<span translate>Is Present</span>
</mat-checkbox>
<!-- Active? -->
<mat-checkbox *osPerms="'users.can_see_extra_data'" formControlName='is_active' matTooltip='{{"Designates whether this user should be treated as active. Unselect this instead of deleting the account." | translate}}'
[value]='user.isActive'>
<span translate>Is Active</span>
</mat-checkbox>
<!-- Commitee? -->
<mat-checkbox formControlName='is_committee' matTooltip='{{"Designates whether this user should be treated as a committee." | translate}}'
[value]='user.isCommittee'>
<span translate>Is a committee</span>
</mat-checkbox>
</div>
</form>
</mat-card>

67
client/src/app/site/users/components/user-detail/user-detail.component.scss Normal file
View File

@ -0,0 +1,67 @@
// hide certain stuff whem editing is disabled
.mat-form-field-disabled {
::ng-deep {
.mat-input-element {
color: currentColor;
}
.mat-select-value {
color: currentColor;
}
.mat-form-field-underline {
display: none;
}
.mat-hint {
display: none;
}
.mat-select-value {
display: table-cell;
}
button {
display: none;
}
}
}
// angular material does not have this class. This is virtually set using ngClass
.mat-form-field-enabled {
.form100 {
::ng-deep {
width: 100%;
}
}
.form70 {
::ng-deep {
width: 70%;
}
}
.force-min-with {
min-width: 150px;
}
.form30 {
::ng-deep {
width: 30%;
}
}
.form20 {
::ng-deep {
width: 25%;
}
}
.distance {
padding-right: 5%;
}
}
mat-checkbox {
margin-right: 10px;
}

24
client/src/app/site/users/components/user-detail/user-detail.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserDetailComponent } from './user-detail.component';
describe('UserDetailComponent', () => {
let component: UserDetailComponent;
let fixture: ComponentFixture<UserDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserDetailComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

336
client/src/app/site/users/components/user-detail/user-detail.component.ts Normal file
View File

@ -0,0 +1,336 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ViewUser } from '../../models/view-user';
import { UserRepositoryService } from '../../services/user-repository.service';
import { Group } from '../../../../shared/models/users/group';
import { DataStoreService } from '../../../../core/services/data-store.service';
import { OperatorService } from '../../../../core/services/operator.service';
/**
* Users detail component for both new and existing users
*/
@Component({
selector: 'os-user-detail',
templateUrl: './user-detail.component.html',
styleUrls: ['./user-detail.component.scss']
})
export class UserDetailComponent implements OnInit {
/**
* Info form object
*/
public personalInfoForm: FormGroup;
/**
* if this is the own page
*/
public ownPage = false;
/**
* Editing a user
*/
public editUser = false;
/**
* True if a new user is created
*/
public newUser = false;
/**
* True if the operator has manage permissions
*/
public canManage = false;
/**
* ViewUser model
*/
public user: ViewUser;
/**
* Should contain all Groups, loaded or observed from DataStore
*/
public groups: Group[];
/**
* Constructor for user
*/
public constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private repo: UserRepositoryService,
private DS: DataStoreService,
private op: OperatorService
) {
this.user = new ViewUser();
if (route.snapshot.url[0].path === 'new') {
this.newUser = true;
this.setEditMode(true);
} else {
this.route.params.subscribe(params => {
this.loadViewUser(params.id);
// will fail after reload - observable required
this.ownPage = this.opOwnsPage(Number(params.id));
// observe operator to find out if we see our own page or not
this.op.getObservable().subscribe(newOp => {
if (newOp) {
this.ownPage = this.opOwnsPage(Number(params.id));
}
});
});
}
this.createForm();
}
/**
* sets the ownPage variable if the operator owns the page
*/
public opOwnsPage(userId: number): boolean {
if (this.op.user && this.op.user.id === userId) {
return true;
} else {
return false;
}
}
/**
* Should determine if the user (Operator) has the
* correct permission to perform the given action.
*
* actions might be:
* - seeName (title, 1st, last) (user.can_see_name or ownPage)
* - seeExtra (checkboxes, comment) (user.can_see_extra_data)
* - seePersonal (mail, username, about) (user.can_see_extra_data or ownPage)
* - manage (everything) (user.can_manage)
* - changePersonal (mail, username, about) (user.can_manage or ownPage)
*
* @param action the action the user tries to perform
*/
public isAllowed(action: string): boolean {
switch (action) {
case 'manage':
return this.op.hasPerms('users.can_manage');
case 'seeName':
return this.op.hasPerms('users.can_see_name', 'users.can_manage') || this.ownPage;
case 'seeExtra':
return this.op.hasPerms('users.can_see_extra_data', 'users.can_manage');
case 'seePersonal':
return this.op.hasPerms('users.can_see_extra_data', 'users.can_manage') || this.ownPage;
case 'changePersonal':
return this.op.hasPerms('user.cans_manage') || this.ownPage;
default:
return false;
}
}
/**
* Loads a user from users repository
* @param id the required ID
*/
public loadViewUser(id: number): void {
this.repo.getViewModelObservable(id).subscribe(newViewUser => {
// repo sometimes delivers undefined values
// also ensures edition cannot be interrupted by autpupdate
if (newViewUser && !this.editUser) {
this.user = newViewUser;
// personalInfoForm is undefined during 'new' and directly after reloading
if (this.personalInfoForm) {
this.patchFormValues();
}
}
});
}
/**
* initialize the form with default values
*/
public createForm(): void {
this.personalInfoForm = this.formBuilder.group({
username: [''],
title: [''],
first_name: [''],
last_name: [''],
structure_level: [''],
number: [''],
about_me: [''],
groups_id: [''],
is_present: [true],
is_committee: [false],
email: ['', Validators.email],
last_email_send: [''],
comment: [''],
is_active: [true],
default_password: ['']
});
// per default disable the whole form:
this.patchFormValues();
}
/**
* Loads values that require external references
* And allows async reading
*/
public patchFormValues(): void {
this.personalInfoForm.patchValue({
username: this.user.username,
groups_id: this.user.groupIds,
title: this.user.title,
first_name: this.user.firstName,
last_name: this.user.lastName
});
}
/**
* Makes the form editable
* @param editable
*/
public makeFormEditable(editable: boolean): void {
if (this.personalInfoForm) {
const formControlNames = Object.keys(this.personalInfoForm.controls);
const allowedFormFields = [];
if (this.isAllowed('manage')) {
// editable content with manage rights
allowedFormFields.push(
this.personalInfoForm.get('username'),
this.personalInfoForm.get('title'),
this.personalInfoForm.get('first_name'),
this.personalInfoForm.get('last_name'),
this.personalInfoForm.get('email'),
this.personalInfoForm.get('structure_level'),
this.personalInfoForm.get('number'),
this.personalInfoForm.get('groups_id'),
this.personalInfoForm.get('comment'),
this.personalInfoForm.get('is_present'),
this.personalInfoForm.get('is_active'),
this.personalInfoForm.get('is_committee'),
this.personalInfoForm.get('about_me')
);
} else if (this.isAllowed('changePersonal')) {
// changeable personal data
// FIXME: Own E-Mail and Password is hidden (server?)
allowedFormFields.push(
this.personalInfoForm.get('username'),
this.personalInfoForm.get('email'),
this.personalInfoForm.get('about_me')
);
}
// treatment for the initial password field
if (!editable || this.newUser) {
allowedFormFields.push(this.personalInfoForm.get('default_password'));
}
if (editable) {
allowedFormFields.forEach(formElement => {
formElement.enable();
});
} else {
formControlNames.forEach(formControlName => {
this.personalInfoForm.get(formControlName).disable();
});
}
}
}
/**
* Handler for the generate Password button.
* Generates a password using 8 pseudo-random letters
* from the `characters` const.
*
* Removed the letter 'O' from the alphabet cause it's easy to confuse
* with the number '0'.
*/
public generatePassword(): void {
let pw = '';
const characters = 'ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const amount = 8;
for (let i = 0; i < amount; i++) {
pw += characters.charAt(Math.floor(Math.random() * characters.length));
}
this.personalInfoForm.patchValue({
default_password: pw
});
}
/**
* Save / Submit a user
*/
public saveUser(): void {
if (this.newUser) {
this.repo.create(this.personalInfoForm.value).subscribe(
response => {
this.newUser = false;
this.router.navigate([`./users/${response.id}`]);
// this.setEditMode(false);
// this.loadViewUser(response.id);
},
error => console.error('Creation of the user failed: ', error.error)
);
} else {
this.repo.update(this.personalInfoForm.value, this.user).subscribe(
response => {
this.setEditMode(false);
this.loadViewUser(response.id);
},
error => console.error('Update of the user failed: ', error.error)
);
}
}
/**
* sets editUser variable and editable form
* @param edit
*/
public setEditMode(edit: boolean): void {
this.editUser = edit;
this.makeFormEditable(edit);
}
/**
* click on the edit button
*/
public editUserButton(): void {
if (this.editUser) {
this.saveUser();
} else {
this.setEditMode(true);
}
}
public cancelEditMotionButton(): void {
if (this.newUser) {
this.router.navigate(['./users/']);
} else {
this.setEditMode(false);
this.loadViewUser(this.user.id);
}
}
/**
* click on the delete user button
*/
public deleteUserButton(): void {
this.repo.delete(this.user).subscribe(response => {
this.router.navigate(['./users/']);
});
}
/**
* Init function.
*/
public ngOnInit(): void {
this.makeFormEditable(this.editUser);
this.groups = this.DS.getAll(Group);
this.DS.changeObservable.subscribe(model => {
if (model instanceof Group) {
this.groups.push(model as Group);
}
});
}
}

31
client/src/app/site/users/user-list/user-list.component.html → client/src/app/site/users/components/user-list/user-list.component.html
View File

@ -2,6 +2,15 @@
(ellipsisMenuItem)=onEllipsisItem($event)>
</os-head-bar>
<div class='custom-table-header on-transition-fade'>
<button mat-button>
<span translate>SORT</span>
</button>
<button mat-button>
<span translate>FILTER</span>
</button>
</div>
<mat-table class='os-listview-table on-transition-fade' [dataSource]="dataSource" matSort>
<!-- name column -->
<ng-container matColumnDef="name">
@ -12,12 +21,30 @@
<!-- prefix column -->
<ng-container matColumnDef="group">
<mat-header-cell *matHeaderCellDef mat-sort-header> Group </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.groups}} {{user.structureLevel}} </mat-cell>
<mat-cell *matCellDef="let user">
<div class='groupsCell'>
<span *ngIf="user.groups.length > 0">
<fa-icon icon="users"></fa-icon>
{{user.groups}}
</span>
<br *ngIf="user.groups && user.structureLevel">
<span *ngIf="user.structureLevel">
<fa-icon icon="flag"></fa-icon>
{{user.structureLevel}}
</span>
</div>
</mat-cell>
</ng-container>
<!-- Presence column -->
<ng-container matColumnDef="presence">
<mat-header-cell *matHeaderCellDef mat-sort-header> Presence </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.isActive}} </mat-cell>
<mat-cell *matCellDef="let user">
<div *ngIf="user.isActive">
<fa-icon icon="check-square"></fa-icon>
<span translate>Present</span>
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="['name', 'group', 'presence']"></mat-header-row>

32
client/src/app/site/users/components/user-list/user-list.component.scss Normal file
View File

@ -0,0 +1,32 @@
.groupsCell {
display: inline-block;
vertical-align: middle;
line-height: normal;
fa-icon {
font-size: 80%;
}
}
.os-listview-table {
.mat-column-name {
flex: 1 0 200px;
}
.mat-column-group {
flex: 2 0 60px;
}
.mat-column-presence {
flex: 0 0 60px;
fa-icon {
font-size: 100%;
margin-right: 5px;
}
div {
display: inherit;
}
}
}

0
client/src/app/site/users/user-list/user-list.component.spec.ts → client/src/app/site/users/components/user-list/user-list.component.spec.ts
View File

17
client/src/app/site/users/user-list/user-list.component.ts → client/src/app/site/users/components/user-list/user-list.component.ts
View File

@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { ViewUser } from '../models/view-user';
import { UserRepositoryService } from '../services/user-repository.service';
import { ListViewBaseComponent } from '../../base/list-view-base';
import { ViewUser } from '../../models/view-user';
import { UserRepositoryService } from '../../services/user-repository.service';
import { ListViewBaseComponent } from '../../../base/list-view-base';
import { Router, ActivatedRoute } from '@angular/router';
/**
* Component for the user list view.
@ -13,7 +14,7 @@ import { ListViewBaseComponent } from '../../base/list-view-base';
@Component({
selector: 'os-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
styleUrls: ['./user-list.component.scss']
})
export class UserListComponent extends ListViewBaseComponent<ViewUser> implements OnInit {
/**
@ -46,7 +47,9 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
public constructor(
private repo: UserRepositoryService,
protected titleService: Title,
protected translate: TranslateService
protected translate: TranslateService,
private router: Router,
private route: ActivatedRoute
) {
super(titleService, translate);
}
@ -86,13 +89,13 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
* @param row selected row
*/
public selectUser(row: ViewUser): void {
console.log('clicked the row for user: ', row);
this.router.navigate([`./${row.id}`], { relativeTo: this.route });
}
/**
* Handles the click on the plus button
*/
public onPlusButton(): void {
console.log('new User');
this.router.navigate(['./new'], { relativeTo: this.route });
}
}

81
client/src/app/site/users/models/view-user.ts
View File

@ -7,39 +7,96 @@ export class ViewUser extends BaseViewModel {
private _user: User;
private _groups: Group[];
public get id(): number {
return this._user ? this._user.id : null;
}
public get user(): User {
return this._user;
return this._user ? this._user : null;
}
public get groups(): Group[] {
return this._groups;
}
public get id(): number {
return this.user ? this.user.id : null;
}
public get username(): string {
return this.user ? this.user.username : null;
}
public get title(): string {
return this.user ? this.user.title : null;
}
public get firstName(): string {
return this.user ? this.user.first_name : null;
}
public get lastName(): string {
return this.user ? this.user.last_name : null;
}
public get fullName(): string {
return this.user ? this.user.full_name : null;
}
/**
* TODO: Make boolean, use function over view component.
*/
public get isActive(): string {
return this.user && this.user.is_active ? 'active' : 'inactive';
public get email(): string {
return this.user ? this.user.email : null;
}
public get structureLevel(): string {
return this.user ? this.user.structure_level : null;
}
public get participantNumber(): string {
return this.user ? this.user.number : null;
}
public get groupIds(): number[] {
return this.user ? this.user.groups_id : null;
}
/**
* Required by the input selector
*/
public set groupIds(ids: number[]) {
if (this.user) {
this.user.groups_id = ids;
}
}
public get initialPassword(): string {
return this.user ? this.user.default_password : null;
}
public get comment(): string {
return this.user ? this.user.comment : null;
}
public get isPresent(): boolean {
return this.user ? this.user.is_present : null;
}
public get isActive(): boolean {
return this.user ? this.user.is_active : null;
}
public get isCommittee(): boolean {
return this.user ? this.user.is_committee : null;
}
public get about(): string {
return this.user ? this.user.about_me : null;
}
public constructor(user?: User, groups?: Group[]) {
super();
this._user = user;
this._groups = groups;
}
/**
* required by BaseViewModel. Don't confuse with the users title.
*/
public getTitle(): string {
return this.user ? this.user.toString() : null;
}
@ -47,9 +104,7 @@ export class ViewUser extends BaseViewModel {
/**
* TODO: Implement
*/
public replaceGroup(newGroup: Group): void {
console.log('replace group - not yet implemented, ', newGroup);
}
public replaceGroup(newGroup: Group): void {}
public updateValues(update: BaseModel): void {
if (update instanceof Group) {

54
client/src/app/site/users/services/user-repository.service.ts
View File

@ -6,6 +6,7 @@ import { User } from '../../../shared/models/users/user';
import { Group } from '../../../shared/models/users/group';
import { Observable } from 'rxjs';
import { DataStoreService } from '../../../core/services/data-store.service';
import { DataSendService } from '../../../core/services/data-send.service';
/**
* Repository service for users
@ -19,17 +20,29 @@ export class UserRepositoryService extends BaseRepository<ViewUser, User> {
/**
* Constructor calls the parent constructor
*/
public constructor(DS: DataStoreService) {
public constructor(DS: DataStoreService, private dataSend: DataSendService) {
super(DS, User, [Group]);
}
/**
* @ignore
* Updates a the selected user with the form values.
*
* TODO: used over not-yet-existing detail view
* @param update the forms values
* @param viewUser
*/
public update(user: Partial<User>, viewUser: ViewUser): Observable<User> {
return null;
public update(update: Partial<User>, viewUser: ViewUser): Observable<any> {
const updateUser = new User();
// copy the ViewUser to avoid manipulation of parameters
updateUser.patchValues(viewUser.user);
updateUser.patchValues(update);
// if the user deletes the username, reset
// prevents the server of generating '<firstname> <lastname> +1' as username
if (updateUser.username === '') {
updateUser.username = viewUser.username;
}
return this.dataSend.updateModel(updateUser, 'put');
}
/**
@ -37,17 +50,38 @@ export class UserRepositoryService extends BaseRepository<ViewUser, User> {
*
* TODO: used over not-yet-existing detail view
*/
public delete(user: ViewUser): Observable<User> {
return null;
public delete(viewUser: ViewUser): Observable<any> {
return this.dataSend.delete(viewUser.user);
}
/**
* @ignore
* creates and saves a new user
*
* TODO: used over not-yet-existing detail view
* @param userData blank form value. Usually not yet a real user
*/
public create(user: User): Observable<User> {
return null;
public create(userData: Partial<User>): Observable<any> {
const newUser = new User();
// collectionString of userData is still empty
newUser.patchValues(userData);
// if the username is not presend, delete.
// The server will generate a one
if (!newUser.username) {
delete newUser.username;
}
// title must not be "null" during creation
if (!newUser.title) {
delete newUser.title;
}
// null values will not be accepted for group_id
if (!newUser.groups_id) {
delete newUser.groups_id;
}
return this.dataSend.createModel(newUser);
}
public createViewModel(user: User): ViewUser {

0
client/src/app/site/users/user-list/user-list.component.css
View File

18
client/src/app/site/users/users-routing.module.ts
View File

@ -1,8 +1,22 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserListComponent } from './components/user-list/user-list.component';
import { UserDetailComponent } from './components/user-detail/user-detail.component';
const routes: Routes = [{ path: '', component: UserListComponent }];
const routes: Routes = [
{
path: '',
component: UserListComponent
},
{
path: 'new',
component: UserDetailComponent
},
{
path: ':id',
component: UserDetailComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],

5
client/src/app/site/users/users.module.ts
View File

@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
import { UsersRoutingModule } from './users-routing.module';
import { SharedModule } from '../../shared/shared.module';
import { UserListComponent } from './user-list/user-list.component';
import { UserListComponent } from './components/user-list/user-list.component';
import { UserDetailComponent } from './components/user-detail/user-detail.component';
@NgModule({
imports: [CommonModule, UsersRoutingModule, SharedModule],
declarations: [UserListComponent]
declarations: [UserListComponent, UserDetailComponent]
})
export class UsersModule {}

36
client/src/assets/i18n/de.json
View File

@ -1,12 +1,29 @@
{
"Abort": "",
"About Me": "",
"Agenda": "Tagesordnung",
"Assignments": "Wahlen",
"Category": "",
"Change Password": "Passwort ändern",
"Comment": "",
"Content": "",
"Copyright by": "Copyright by",
"Delete User": "",
"DeleteMotion": "",
"Designates whether this user is in the room": {
"0": ""
},
"Designates whether this user should be treated as a committee": {
"0": ""
},
"Designates whether this user should be treated as active": {
" Unselect this instead of deleting the account": {
"0": ""
}
},
"EMail": "",
"Edit Profile": "Profil bearbeiten",
"Edit category details:": "",
"English": "Englisch",
"Export As": {
"0": {
@ -17,11 +34,18 @@
},
"FILTER": "",
"Files": "Dateien",
"First Name": "",
"French": "Französisch",
"German": "Deutsch",
"Groups": "",
"Home": "Startseite",
"Identifier": "",
"Initial Password": "",
"Installed plugins": "",
"Is Active": "",
"Is Present": "",
"Is a committee": "",
"Last Name": "",
"Legal Notice": "Impressum",
"License": "",
"Login": "",
@ -30,30 +54,42 @@
"Meta information": "",
"Motion": "",
"Motions": "Anträge",
"Name": "",
"None": "",
"OK": "",
"Offline mode: You can use OpenSlides but changes are not saved": {
"0": ""
},
"Only for internal notes": {
"0": ""
},
"Origin": "",
"Participant Number": "",
"Participants": "Teilnehmer",
"Personal Note": "",
"Personal note": "",
"Prefix": "",
"Present": "",
"Privacy Policy": "Datenschutz",
"Project": "",
"Projector": "",
"Reason": "",
"Required": "",
"Reset State": "",
"Reset recommendation": "",
"SORT": "",
"Selected Values": "",
"Settings": "Einstellungen",
"State": "",
"Structure Level": "",
"Submitters": "",
"Supporters": "",
"The assembly may decide:": "",
"The event manager hasn't set up a privacy policy yet": {
"0": ""
},
"Title": "",
"Username": "",
"Welcome to OpenSlides": "Willkommen bei OpenSlides",
"by": ""
}

36
client/src/assets/i18n/en.json
View File

@ -1,12 +1,29 @@
{
"Abort": "",
"About Me": "",
"Agenda": "",
"Assignments": "",
"Category": "",
"Change Password": "",
"Comment": "",
"Content": "",
"Copyright by": "",
"Delete User": "",
"DeleteMotion": "",
"Designates whether this user is in the room": {
"0": ""
},
"Designates whether this user should be treated as a committee": {
"0": ""
},
"Designates whether this user should be treated as active": {
" Unselect this instead of deleting the account": {
"0": ""
}
},
"EMail": "",
"Edit Profile": "",
"Edit category details:": "",
"English": "",
"Export As": {
"0": {
@ -17,11 +34,18 @@
},
"FILTER": "",
"Files": "",
"First Name": "",
"French": "",
"German": "",
"Groups": "",
"Home": "",
"Identifier": "",
"Initial Password": "",
"Installed plugins": "",
"Is Active": "",
"Is Present": "",
"Is a committee": "",
"Last Name": "",
"Legal Notice": "",
"License": "",
"Login": "",
@ -30,30 +54,42 @@
"Meta information": "",
"Motion": "",
"Motions": "",
"Name": "",
"None": "",
"OK": "",
"Offline mode: You can use OpenSlides but changes are not saved": {
"0": ""
},
"Only for internal notes": {
"0": ""
},
"Origin": "",
"Participant Number": "",
"Participants": "",
"Personal Note": "",
"Personal note": "",
"Prefix": "",
"Present": "",
"Privacy Policy": "",
"Project": "",
"Projector": "",
"Reason": "",
"Required": "",
"Reset State": "",
"Reset recommendation": "",
"SORT": "",
"Selected Values": "",
"Settings": "",
"State": "",
"Structure Level": "",
"Submitters": "",
"Supporters": "",
"The assembly may decide:": "",
"The event manager hasn't set up a privacy policy yet": {
"0": ""
},
"Title": "",
"Username": "",
"Welcome to OpenSlides": "",
"by": ""
}

36
client/src/assets/i18n/fr.json
View File

@ -1,12 +1,29 @@
{
"Abort": "",
"About Me": "",
"Agenda": "",
"Assignments": "",
"Category": "",
"Change Password": "",
"Comment": "",
"Content": "",
"Copyright by": "",
"Delete User": "",
"DeleteMotion": "",
"Designates whether this user is in the room": {
"0": ""
},
"Designates whether this user should be treated as a committee": {
"0": ""
},
"Designates whether this user should be treated as active": {
" Unselect this instead of deleting the account": {
"0": ""
}
},
"EMail": "",
"Edit Profile": "",
"Edit category details:": "",
"English": "",
"Export As": {
"0": {
@ -17,11 +34,18 @@
},
"FILTER": "",
"Files": "",
"First Name": "",
"French": "",
"German": "",
"Groups": "",
"Home": "",
"Identifier": "",
"Initial Password": "",
"Installed plugins": "",
"Is Active": "",
"Is Present": "",
"Is a committee": "",
"Last Name": "",
"Legal Notice": "",
"License": "",
"Login": "",
@ -30,30 +54,42 @@
"Meta information": "",
"Motion": "",
"Motions": "",
"Name": "",
"None": "",
"OK": "",
"Offline mode: You can use OpenSlides but changes are not saved": {
"0": ""
},
"Only for internal notes": {
"0": ""
},
"Origin": "",
"Participant Number": "",
"Participants": "",
"Personal Note": "",
"Personal note": "",
"Prefix": "",
"Present": "",
"Privacy Policy": "",
"Project": "",
"Projector": "",
"Reason": "",
"Required": "",
"Reset State": "",
"Reset recommendation": "",
"SORT": "",
"Selected Values": "",
"Settings": "",
"State": "",
"Structure Level": "",
"Submitters": "",
"Supporters": "",
"The assembly may decide:": "",
"The event manager hasn't set up a privacy policy yet": {
"0": ""
},
"Title": "",
"Username": "",
"Welcome to OpenSlides": "",
"by": ""
}

23
client/src/styles.scss
View File

@ -26,6 +26,19 @@ body {
z-index: 100;
}
.save-button {
// needs to be important or will be overwritten locally
background-color: rgb(77, 243, 86) !important;
}
.red-warning-text {
color: red;
}
.icon-text-distance {
margin-left: 5px;
}
.os-card {
max-width: 90%;
margin-top: 10px;
@ -33,6 +46,16 @@ body {
margin-right: auto;
}
//custom table header for search button, filtering and more. Used in ListViews
.custom-table-header {
width: 100%;
height: 60px;
line-height: 60px;
text-align: right;
background: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.os-listview-table {
width: 100%;