OpenSlides/client/src/app/site/motions/components/motion-detail/motion-detail.component.html

329 lines
14 KiB
HTML
Raw Normal View History

2018-11-08 17:38:44 +01:00
<os-head-bar [mainButton]="opCanEdit()" mainButtonIcon="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>
2018-08-22 16:03:49 +02:00
<!-- 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>
2018-08-22 16:03:49 +02:00
<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>
2018-08-22 16:03:49 +02:00
</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>
2018-11-08 17:38:44 +01:00
<ng-container *ngIf="vp.isMobile; then mobileView; else desktopView"></ng-container>
2018-09-03 14:23:54 +02:00
<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'> -->
2018-09-03 14:23:54 +02:00
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>info</mat-icon>
2018-09-03 14:23:54 +02:00
<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>
2018-08-16 17:03:39 +02:00
</div>
2018-09-03 14:23:54 +02:00
</mat-expansion-panel>
2018-08-16 17:03:39 +02:00
<os-motion-comments *ngIf="!newMotion" [motion]="motion"></os-motion-comments>
<os-personal-note *ngIf="!newMotion" [motion]="motion"></os-personal-note>
2018-09-03 14:23:54 +02:00
<!-- Content -->
<mat-expansion-panel #contentPanel [expanded]='true'>
2018-09-03 14:23:54 +02:00
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>format_align_left</mat-icon>
2018-09-03 14:23:54 +02:00
<span translate>Content</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="expansion-panel-custom-body">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</div>
2018-09-03 14:23:54 +02:00
</mat-expansion-panel>
</mat-accordion>
</ng-template>
<ng-template #desktopView>
<div class="desktop-view">
<div class="desktop-left on-transition-fade">
2018-08-13 13:49:38 +02:00
2018-09-03 14:23:54 +02:00
<!-- Meta Info -->
<div class="meta-info-block meta-info-desktop">
<ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
</div>
2018-08-13 13:49:38 +02:00
<os-motion-comments *ngIf="!newMotion" [motion]="motion"></os-motion-comments>
<os-personal-note *ngIf="!newMotion" [motion]="motion"></os-personal-note>
2018-08-13 13:49:38 +02:00
2018-09-03 14:23:54 +02:00
</div>
<div class="desktop-right ">
<!-- Content -->
<mat-card>
2018-09-03 14:23:54 +02:00
<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>
2018-09-03 14:23:54 +02:00
<mat-form-field *ngIf="editMotion">
<input matInput placeholder='{{ "Identifier" | translate }}' formControlName='identifier' [value]='motionCopy.identifier'>
2018-09-03 14:23:54 +02:00
</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>
<mat-chip-list *ngFor="let submitter of motion.submitters">
<mat-chip>{{ submitter.full_name }}</mat-chip>
</mat-chip-list>
</div>
2018-09-03 14:23:54 +02:00
</div>
<!-- Supporter -->
<div *ngIf='motion && motion.hasSupporters() || editMotion'>
2018-09-03 14:23:54 +02:00
<!-- 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="{{ 'Supporters' | translate }}" [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>
2018-09-03 14:23:54 +02:00
</div>
2018-08-13 13:49:38 +02:00
2018-09-03 14:23:54 +02:00
<!-- State -->
2018-11-05 17:43:44 +01:00
<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' | translate }}" 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>
2018-09-03 14:23:54 +02:00
</div>
2018-08-13 13:49:38 +02:00
2018-09-03 14:23:54 +02:00
<!-- Recommendation -->
2018-11-05 17:43:44 +01:00
<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.recommendation_label | translate }}
</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="null">
<mat-icon>replay</mat-icon><span translate>Reset recommendation</span>
</mat-option>
2018-09-03 14:23:54 +02:00
</mat-select>
</mat-form-field>
</div>
<!-- Category -->
<div *ngIf="motion && motion.category_id || editMotion">
2018-09-03 14:23:54 +02:00
<div *ngIf='!editMotion'>
2018-09-19 15:18:57 +02:00
<h3 translate>Category</h3>
{{ motion.category }}
2018-09-03 14:23:54 +02:00
</div>
<div *ngIf="editMotion || newMotion">
<os-search-value-selector ngDefaultControl [form]="metaInfoForm" [formControl]="this.metaInfoForm.get('category_id')"
[multiple]="false" listname="{{ 'Category' | translate }}" [InputListValues]="this.categoryObserver"></os-search-value-selector>
</div>
2018-09-03 14:23:54 +02:00
</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' | translate}}" formControlName='origin' [value]='motionCopy.origin'>
</mat-form-field>
2018-09-03 14:23:54 +02:00
</div>
</div>
<!-- Voting -->
<!-- <div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
<h3 translate>Voting</h3>
2018-08-16 17:03:39 +02:00
</div> -->
2018-09-03 14:23:54 +02:00
</form>
</ng-template>
<ng-template #contentTemplate>
2018-09-28 15:10:48 +02:00
<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" matTooltip="{{ 'Line numbering' | translate }}">
<mat-icon>format_list_numbered</mat-icon>
2018-09-28 15:10:48 +02:00
</button>
<button type="button" mat-icon-button [matMenuTriggerFor]="changeRecoMenu" matTooltip="{{ 'Change recommendations' | translate }}">
<mat-icon>rate_review</mat-icon>
2018-09-28 15:10:48 +02:00
</button>
</div>
2018-08-16 17:03:39 +02:00
2018-09-03 14:23:54 +02:00
<!-- Title -->
<div *ngIf="motion && motion.title || editMotion">
2018-09-03 14:23:54 +02:00
<div *ngIf='!editMotion'>
<h4>{{motion.title}}</h4>
2018-08-16 17:03:39 +02:00
</div>
2018-09-03 14:23:54 +02:00
<mat-form-field *ngIf="editMotion" class="wide-form">
<input matInput osAutofocus placeholder="{{ 'Title' | translate }}" formControlName='title' [value]='motionCopy.title'
required>
2018-08-16 17:03:39 +02:00
</mat-form-field>
2018-09-03 14:23:54 +02:00
</div>
<!-- Text -->
<!-- TODO: this is a config variable. Read it out -->
<span class="text-prefix-label" translate>The assembly may decide:</span>
2018-09-30 18:43:20 +02:00
<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>
2018-09-30 18:43:20 +02:00
<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>
2018-09-30 18:43:20 +02:00
</ng-container>
2018-09-03 14:23:54 +02:00
<mat-form-field *ngIf="motion && editMotion" class="wide-form">
<textarea matInput placeholder="{{ 'Motion text' | translate }}" formControlName='text' [value]='motionCopy.text' required></textarea>
2018-09-03 14:23:54 +02:00
</mat-form-field>
<!-- Reason -->
<div *ngIf="motion && motion.reason || editMotion">
<h5 *ngIf="!editMotion" translate>Reason</h5>
<div class="motion-text" *ngIf='!editMotion'>
<div [innerHtml]='motion.reason'></div>
2018-08-16 17:03:39 +02:00
</div>
2018-09-03 14:23:54 +02:00
<mat-form-field *ngIf="editMotion" class="wide-form">
<textarea matInput placeholder="{{ 'Reason' | translate }}" formControlName='reason' [value]='motionCopy.reason'></textarea>
2018-09-03 14:23:54 +02:00
</mat-form-field>
</div>
2018-09-03 14:23:54 +02:00
</form>
</ng-template>
2018-09-28 15:10:48 +02:00
<!-- 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>
2018-09-28 15:10:48 +02:00
</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>