OpenSlides/client/src/app/site/users/components/user-detail/user-detail.component.html
2018-12-12 13:15:51 +01:00

154 lines
7.0 KiB
HTML

<os-head-bar [mainButton]="isAllowed('manage')" mainButtonIcon="edit" [nav]="false" [editMode]="editUser"
(mainEvent)="setEditMode(!editUser)" (saveEvent)="saveUser()">
<!-- Title -->
<div class="title-slot">
<h2 *ngIf="editUser">
{{ personalInfoForm.get('title').value }}
{{ personalInfoForm.get('first_name').value }}
{{ personalInfoForm.get('last_name').value }}
</h2>
<h2 *ngIf="!editUser">
{{ user.full_name }}
</h2>
</div>
<!-- Menu -->
<div class="menu-slot">
<button type="button" mat-icon-button [matMenuTriggerFor]="userExtraMenu">
<mat-icon>more_vert</mat-icon>
</button>
</div>
<mat-menu #userExtraMenu="matMenu">
<button mat-menu-item class="red-warning-text" (click)="deleteUserButton()">
<mat-icon>delete</mat-icon>
<span translate>Delete</span>
</button>
<button mat-menu-item (click)="changePassword()">
<mat-icon>security</mat-icon>
<span translate>Change password</span>
</button>
</mat-menu>
</os-head-bar>
<mat-card class="os-card" *osPerms="'users.can_see_name'">
<form [ngClass]="{'mat-form-field-enabled': editUser}" [formGroup]="personalInfoForm" (ngSubmit)="saveUser()" *ngIf="user" (keydown)="onKeyDown($event)">
<!-- <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 osAutofocus placeholder="{{ 'Title' | translate }}" formControlName="title"
[value]="user.title">
</mat-form-field>
<!-- First name -->
<mat-form-field class="form30 distance force-min-with" *ngIf="user.first_name || editUser && isAllowed('manage')">
<input type="text" matInput placeholder="{{ 'Given name' | translate }}" formControlName="first_name"
[value]="user.first_name">
</mat-form-field>
<!-- Last name -->
<mat-form-field class="form30 force-min-with" *ngIf="user.last_name || editUser && isAllowed('manage')">
<input type="text" matInput placeholder="{{ 'Surname' | translate }}" formControlName="last_name"
[value]="user.last_name">
</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')" translate>
Please enter a valid email address
</mat-error>
</mat-form-field>
</div>
<div>
<!-- Strucuture Level -->
<mat-form-field class="form70 distance" *ngIf="user.structure_level || editUser && isAllowed('manage')">
<input type="text" matInput placeholder="{{ 'Structure level' | translate }}" formControlName="structure_level"
[value]="user.structure_level">
</mat-form-field>
<!-- Partizipant Number -->
<mat-form-field class="form20 force-min-with" *ngIf="user.participant_number || editUser && isAllowed('manage')">
<input type="text" matInput placeholder="{{ 'Participant number' | translate }}" formControlName="number"
[value]="user.participant_number">
</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.default_password">
<mat-hint align="end">Generate</mat-hint>
<button type="button" mat-button matSuffix mat-icon-button [disabled]="!newUser"
(click)="generatePassword()">
<mat-icon>sync_problem</mat-icon>
</button>
</mat-form-field>
</div>
<!-- About me -->
<div *ngIf="isAllowed('seePersonal')">
<!-- The HTML Editor -->
<h4 translate *ngIf="user.about_me || editUser">About me</h4>
<editor
formControlName='about_me'
[init]="tinyMceSettings"
*ngIf="editUser"
></editor>
<div *ngIf="user.about_me && !editUser" [innerHTML]="user.about_me"></div>
</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.is_present">
<span translate>Is present</span>
</mat-checkbox>
<!-- Active? -->
<mat-checkbox *osPerms="'users.can_see_extra_data'" formControlName="is_active" [value]="user.is_active"
matTooltip="{{ 'Designates whether this user should be treated as active. Unselect this instead of deleting the account.' | translate }}">
<span translate>Is active</span>
</mat-checkbox>
<!-- Commitee? -->
<mat-checkbox formControlName="is_committee" [value]="user.is_committee"
matTooltip="{{ 'Designates whether this user should be treated as a committee.' | translate }}">
<span translate>Is a committee</span>
</mat-checkbox>
</div>
</form>
</mat-card>