OpenSlides/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
Jochen Saalfeld a2d736bae9
Merge pull request #3996 from FinnStutzenstein/client_perms_for_motion
can_manage_metadata and categories on motion create
2018-11-08 15:56:28 +01:00

325 lines
14 KiB
HTML

<os-head-bar [mainButton]="opCanEdit()" buttonIcon="edit" [nav]="false" [editMode]="editMotion" (mainEvent)="setEditMode(!editMotion)"
(saveEvent)="saveMotion()">
<!-- Title -->
<div class="title-slot">
<h2 *ngIf="motion && !newMotion">
<span translate>Motion</span>
<!-- Whitespace between "Motion" and identifier -->
<span>&nbsp;</span>
<span *ngIf="!editMotion">{{ motion.identifier }}</span>
<span *ngIf="editMotion">{{ metaInfoForm.get("identifier").value }}</span>
</h2>
<h2 *ngIf="newMotion" translate>
New motion
</h2>
</div>
<!-- Back and forth buttons-->
<div *ngIf="!editMotion" class="extra-controls-slot on-transition-fade">
<div *ngIf="previousMotion">
<button mat-button (click)="navigateToMotion(previousMotion)">
<mat-icon>navigate_before</mat-icon>
<span>{{ previousMotion.identifier }}</span>
</button>
</div>
<div *ngIf="nextMotion">
<button mat-button (click)="navigateToMotion(nextMotion)">
<span>{{ nextMotion.identifier }}</span>
<mat-icon>navigate_next</mat-icon>
</button>
</div>
</div>
<!-- Menu -->
<div class="menu-slot">
<button type="button" mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
<mat-icon>more_vert</mat-icon>
</button>
</div>
<mat-menu #motionExtraMenu="matMenu">
<div *ngIf="motion">
<button mat-menu-item>
<mat-icon>picture_as_pdf</mat-icon>
<span translate>PDF</span>
</button>
<button mat-menu-item [routerLink]="getSpeakerLink()">
<mat-icon>mic</mat-icon>
<span translate>List of speakers</span>
</button>
<button mat-menu-item>
<!-- possible icons: screen_share, cast, videocam -->
<mat-icon>videocam</mat-icon>
<span translate>Project</span>
</button>
<mat-divider></mat-divider>
<button mat-menu-item class='red-warning-text' (click)='deleteMotionButton()'>
<mat-icon>delete</mat-icon>
<span translate>Delete</span>
</button>
</div>
</mat-menu>
</os-head-bar>
<!-- Title -->
<div *ngIf="motion" class="motion-title on-transition-fade">
<h2 *ngIf="!editMotion">{{ motion.title }}</h2>
<h2 *ngIf="editMotion">{{ contentForm.get("title").value }}</h2>
</div>
<ng-container *ngIf="vp.isMobile ; then mobileView; else desktopView"></ng-container>
<ng-template #mobileView>
<mat-accordion multi='true' class='on-transition-fade'>
<!-- MetaInfo Panel-->
<mat-expansion-panel #metaInfoPanel [expanded]="this.editMotion" class='meta-info-block meta-info-panel'>
<!-- <mat-expansion-panel #metaInfoPanel [expanded]="this.editReco && this.newReco" class='meta-info-block meta-info-panel'> -->
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>info</mat-icon>
<span translate>Meta information</span>
</mat-panel-title>
</mat-expansion-panel-header>
<!-- Meta info -->
<div class="expansion-panel-custom-body">
<ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
</div>
</mat-expansion-panel>
<os-motion-comments *ngIf="!newMotion" [motion]="motion"></os-motion-comments>
<os-personal-note *ngIf="!newMotion" [motion]="motion"></os-personal-note>
<!-- Content -->
<mat-expansion-panel #contentPanel [expanded]='true'>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>format_align_left</mat-icon>
<span translate>Content</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="expansion-panel-custom-body">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div>
</mat-expansion-panel>
</mat-accordion>
</ng-template>
<ng-template #desktopView>
<div class="desktop-view">
<div class="desktop-left on-transition-fade">
<!-- Meta Info -->
<div class="meta-info-block meta-info-desktop">
<ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
</div>
<os-motion-comments *ngIf="!newMotion" [motion]="motion"></os-motion-comments>
<os-personal-note *ngIf="!newMotion" [motion]="motion"></os-personal-note>
</div>
<div class="desktop-right ">
<!-- Content -->
<mat-card>
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</mat-card>
</div>
</div>
</ng-template>
<ng-template #metaInfoTemplate>
<form [formGroup]='metaInfoForm' (ngSubmit)='saveMotion()'>
<!-- Identifier -->
<div *ngIf="editMotion && !newMotion">
<!-- <div *ngIf="editMotion"> -->
<div *ngIf='!editMotion'>
<h3 translate>Identifier</h3>
{{motion.identifier}}
</div>
<mat-form-field *ngIf="editMotion">
<input matInput placeholder='Identifier' formControlName='identifier' [value]='motionCopy.identifier'>
</mat-form-field>
</div>
<!-- Submitter -->
<div *ngIf="motion && motion.submitters || editMotion">
<div *ngIf="editMotion">
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
<os-search-value-selector ngDefaultControl [form]="metaInfoForm" [formControl]="this.metaInfoForm.get('submitters_id')"
[multiple]="true" listname="Submitter" [InputListValues]="this.submitterObserver"></os-search-value-selector>
</div>
</div>
<div *ngIf="!editMotion || !newMotion">
<h3 translate>Submitters</h3>
<ul *ngFor="let submitter of motion.submitters">
<li>{{submitter.full_name}}</li>
</ul>
</div>
</div>
<!-- Supporter -->
<div *ngIf='motion && motion.hasSupporters() || editMotion'>
<!-- print all motion supporters -->
<div *ngIf="editMotion">
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
<os-search-value-selector ngDefaultControl [form]="metaInfoForm" [formControl]="this.metaInfoForm.get('supporters_id')"
[multiple]="true" listname="Supporter" [InputListValues]="this.supporterObserver"></os-search-value-selector>
</div>
</div>
<div *ngIf="!editMotion && motion.hasSupporters()">
<h3 translate>Supporters</h3>
<ul *ngFor="let supporter of motion.supporters">
<li>{{ supporter.full_name }}</li>
</ul>
</div>
</div>
<!-- State -->
<div *ngIf='motion && motion.state'>
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata'];complement:true">
<ng-container *ngIf="!newMotion">
<h3 translate>State</h3>
{{ motion.state }}
</ng-container>
</div>
<div *ngIf="!editMotion">
<mat-form-field *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
<mat-select placeholder='State' formControlName='state_id' (selectionChange)="onChangeState($event)">
<mat-option [value]="motion.state_id">{{ motion.state }}</mat-option>
<mat-divider></mat-divider>
<mat-option *ngFor="let state of motion.nextStates" [value]="state.id">{{ state }}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="null">
<mat-icon>replay</mat-icon>
<span translate>Reset State</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<!-- Recommendation -->
<!-- The suggestion of the work group weather or not a motion should be accepted -->
<div *ngIf='motion && motion.state && recommender'>
<mat-form-field *ngIf="!editMotion && !newMotion">
<mat-select [placeholder]=recommender formControlName='recommendation_id' (selectionChange)="onChangerRecommenderState($event)">
<mat-option *ngFor="let recommendation of motion.possibleRecommendations" [value]="recommendation.id">{{ recommendation }}</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>
<div *ngIf="editMotion || newMotion">
<os-search-value-selector ngDefaultControl [form]="metaInfoForm" [formControl]="this.metaInfoForm.get('category_id')"
[multiple]="false" listname="Category" [InputListValues]="this.categoryObserver"></os-search-value-selector>
</div>
</div>
<!-- Origin -->
<div *ngIf="motion && motion.origin || editMotion">
<div *ngIf='!editMotion'>
<h3 translate> Origin</h3>
{{ motion.origin }}
</div>
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
<mat-form-field *ngIf="editMotion">
<input matInput placeholder='Origin' formControlName='origin' [value]='motionCopy.origin'>
</mat-form-field>
</div>
</div>
<!-- Voting -->
<!-- <div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
<h3 translate>Voting</h3>
</div> -->
</form>
</ng-template>
<ng-template #contentTemplate>
<form class="motion-content" [formGroup]='contentForm' (ngSubmit)='saveMotion()'>
<!-- Line Number and Diff buttons-->
<div class="motion-text-controls">
<button type="button" mat-icon-button [matMenuTriggerFor]="lineNumberingMenu">
<mat-icon>format_list_numbered</mat-icon>
</button>
<button type="button" mat-icon-button [matMenuTriggerFor]="changeRecoMenu">
<mat-icon>rate_review</mat-icon>
</button>
</div>
<!-- Title -->
<div *ngIf="motion && motion.title || editMotion">
<div *ngIf='!editMotion'>
<h4>{{motion.title}}</h4>
</div>
<mat-form-field *ngIf="editMotion" class="wide-form">
<input matInput osAutofocus placeholder='Title' formControlName='title' [value]='motionCopy.title'
required>
</mat-form-field>
</div>
<!-- Text -->
<!-- TODO: this is a config variable. Read it out -->
<span class="text-prefix-label" translate>The assembly may decide:</span>
<ng-container *ngIf='motion && !editMotion'>
<div *ngIf="!isRecoModeDiff()" class="motion-text" [class.line-numbers-none]="isLineNumberingNone()"
[class.line-numbers-inline]="isLineNumberingInline()" [class.line-numbers-outside]="isLineNumberingOutside()">
<os-motion-detail-original-change-recommendations *ngIf="isLineNumberingOutside() && isRecoModeOriginal()"
[html]="getFormattedTextPlain()" [changeRecommendations]="changeRecommendations"
(createChangeRecommendation)="createChangeRecommendation($event)" (gotoChangeRecommendation)="gotoChangeRecommendation($event)"></os-motion-detail-original-change-recommendations>
<div *ngIf="!isLineNumberingOutside() || !isRecoModeOriginal()" [innerHTML]="getFormattedText()"></div>
</div>
<os-motion-detail-diff *ngIf="isRecoModeDiff()" [motion]="motion" [changes]="allChangingObjects"
[scrollToChange]="scrollToChange" (createChangeRecommendation)="createChangeRecommendation($event)"></os-motion-detail-diff>
</ng-container>
<mat-form-field *ngIf="motion && editMotion" class="wide-form">
<textarea matInput placeholder='Motion Text' formControlName='text' [value]='motionCopy.text' required></textarea>
</mat-form-field>
<!-- Reason -->
<div *ngIf="motion && motion.reason || editMotion">
<h5 translate>Reason</h5>
<div class="motion-text" *ngIf='!editMotion'>
<div [innerHtml]='motion.reason'></div>
</div>
<mat-form-field *ngIf="editMotion" class="wide-form">
<textarea matInput placeholder="Reason" formControlName='reason' [value]='motionCopy.reason'></textarea>
</mat-form-field>
</div>
</form>
</ng-template>
<!-- Line number Menu -->
<mat-menu #lineNumberingMenu="matMenu">
<button mat-menu-item translate (click)=setLineNumberingMode(0)>None</button>
<button mat-menu-item translate (click)=setLineNumberingMode(1)>Inline</button>
<button mat-menu-item translate (click)=setLineNumberingMode(2)>Outside</button>
</mat-menu>
<!-- Diff View Menu -->
<mat-menu #changeRecoMenu="matMenu">
<button mat-menu-item translate (click)=setChangeRecoMode(0)>Original version</button>
<button mat-menu-item translate (click)=setChangeRecoMode(1)>Changed version</button>
<button mat-menu-item translate (click)=setChangeRecoMode(2)>Diff version</button>
<button mat-menu-item translate (click)=setChangeRecoMode(3)>Final version</button>
</mat-menu>