516 lines
21 KiB
HTML
516 lines
21 KiB
HTML
<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> </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>
|
|
|
|
<button
|
|
mat-menu-item
|
|
(click)="createAmendment()"
|
|
*ngIf="amendmentsEnabled && motion && !motion.isParagraphBasedAmendment()"
|
|
>
|
|
<mat-icon>add</mat-icon>
|
|
<span translate>Create amendment</span>
|
|
</button>
|
|
|
|
<button
|
|
mat-menu-item
|
|
(click)="showAmendmentContext = !showAmendmentContext"
|
|
*ngIf="motion && motion.isParagraphBasedAmendment()"
|
|
>
|
|
<mat-icon>{{ !showAmendmentContext ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
|
|
<span translate>Show context</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]="true" 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>
|
|
|
|
<!-- 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>
|
|
|
|
<os-motion-comments *ngIf="!newMotion" [motion]="motion"></os-motion-comments>
|
|
<os-personal-note *ngIf="!newMotion" [motion]="motion"></os-personal-note>
|
|
</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" (keydown)="onKeyDown($event)" (ngSubmit)="saveMotion()">
|
|
<!-- Identifier -->
|
|
<div *ngIf="editMotion && !newMotion">
|
|
<!-- <div *ngIf="editMotion"> -->
|
|
<div *ngIf="!editMotion">
|
|
<h4 translate>Identifier</h4>
|
|
{{ motion.identifier }}
|
|
</div>
|
|
<mat-form-field *ngIf="editMotion">
|
|
<input
|
|
matInput
|
|
placeholder="{{ "Identifier" | translate }}"
|
|
formControlName="identifier"
|
|
[value]="motionCopy.identifier"
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Submitters -->
|
|
<div *ngIf="motion && motion.submitters || newMotion">
|
|
<div *ngIf="newMotion">
|
|
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
|
|
<os-search-value-selector
|
|
ngDefaultControl
|
|
[form]="metaInfoForm"
|
|
[formControl]="metaInfoForm.get('submitters_id')"
|
|
[multiple]="true"
|
|
listname="{{ 'Submitters' | translate }}"
|
|
[InputListValues]="submitterObserver"
|
|
></os-search-value-selector>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!editMotion && !newMotion">
|
|
<h4 translate>Submitters</h4>
|
|
<mat-chip-list *ngFor="let submitter of motion.submitters">
|
|
<mat-chip>{{ submitter.full_name }}</mat-chip>
|
|
</mat-chip-list>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Supporters -->
|
|
<div *ngIf='motion && minSupporters'>
|
|
<div *ngIf="editMotion">
|
|
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
|
|
<os-search-value-selector
|
|
ngDefaultControl
|
|
[form]="metaInfoForm"
|
|
[formControl]="metaInfoForm.get('supporters_id')"
|
|
[multiple]="true"
|
|
listname="{{ 'Supporters' | translate }}"
|
|
[InputListValues]="supporterObserver"
|
|
></os-search-value-selector>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!editMotion">
|
|
<h4 *ngIf="perms.isAllowed('support', motion) || motion.hasSupporters()" translate>Supporters</h4>
|
|
<!-- support button -->
|
|
<button type="button" *ngIf="perms.isAllowed('support', motion)" (click)=support() mat-raised-button color="primary">
|
|
<mat-icon>thumb_up</mat-icon>
|
|
{{ 'Support' | translate }}
|
|
</button>
|
|
<!-- unsupport button -->
|
|
<button type="button" *ngIf="perms.isAllowed('unsupport', motion)" (click)=unsupport() mat-raised-button color="primary">
|
|
<mat-icon>thumb_down</mat-icon>
|
|
{{ 'Unsupport' | translate }}
|
|
</button>
|
|
<!-- show supporters (TODO: open in dialog) -->
|
|
<button type="button" *ngIf="motion.hasSupporters()" (click)=openSupportersDialog() mat-button>
|
|
{{ motion.supporters.length }} {{ 'supporters' | translate }}
|
|
</button>
|
|
<p *ngIf="showSupporters">
|
|
<mat-chip-list *ngFor="let supporter of motion.supporters">
|
|
<mat-chip>{{ supporter.full_name }}</mat-chip>
|
|
</mat-chip-list>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- State -->
|
|
<div *ngIf='motion && !editMotion'>
|
|
<h4 translate>State</h4>
|
|
<mat-menu #stateMenu='matMenu'>
|
|
<button *ngFor='let state of motion.nextStates' mat-menu-item
|
|
(click)=setState(state.id)>{{ state.name | translate }}
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
<button mat-menu-item (click)=setState(null)>
|
|
<mat-icon>replay</mat-icon> {{ 'Reset state' | translate }}
|
|
</button>
|
|
</mat-menu>
|
|
<mat-basic-chip [matMenuTriggerFor]='stateMenu' [ngClass]="{
|
|
'green': motion.state.css_class === 'success',
|
|
'red': motion.state.css_class === 'danger',
|
|
'grey': motion.state.css_class === 'default',
|
|
'lightblue': motion.state.css_class === 'primary' }">
|
|
{{ motion.state.name | translate }}
|
|
</mat-basic-chip>
|
|
|
|
<!--*osPerms="['motions.can_manage', 'motions.can_manage_metadata']; -->
|
|
</div>
|
|
|
|
<!-- Recommendation -->
|
|
<div *ngIf='motion && recommender && !editMotion'>
|
|
<h4 translate>{{ recommender }}</h4>
|
|
<mat-menu #recommendationMenu='matMenu'>
|
|
<button *ngFor='let recommendation of motion.possibleRecommendations' mat-menu-item
|
|
(click)=setRecommendation(recommendation.id)>{{ recommendation.recommendation_label | translate }}
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
<button mat-menu-item (click)=setRecommendation(null)>
|
|
<mat-icon>replay</mat-icon> {{ 'Reset recommendation' | translate }}
|
|
</button>
|
|
</mat-menu>
|
|
<mat-basic-chip [matMenuTriggerFor]='recommendationMenu' class="bluegrey">
|
|
{{ motion.recommendation ? (motion.recommendation.recommendation_label | translate) : ('not set' | translate) }}
|
|
</mat-basic-chip>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<!-- Disabled during "new motion" since changing has no effect -->
|
|
<div *ngIf="motion && !editMotion">
|
|
<h4 translate>Category</h4>
|
|
<mat-menu #categoryMenu='matMenu'>
|
|
<button *ngFor='let category of categoryObserver.value' mat-menu-item
|
|
(click)=setCategory(category.id)>{{ category }}
|
|
</button>
|
|
<button mat-menu-item (click)=setCategory(null)>
|
|
---
|
|
</button>
|
|
</mat-menu>
|
|
<mat-basic-chip [matMenuTriggerFor]='categoryMenu' class="grey">
|
|
{{ motion.category ? motion.category : ('not set' | translate) }}
|
|
</mat-basic-chip>
|
|
</div>
|
|
|
|
<!-- Workflow -->
|
|
<div *ngIf="editMotion">
|
|
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
|
|
<os-search-value-selector
|
|
ngDefaultControl
|
|
[form]="metaInfoForm"
|
|
[formControl]="metaInfoForm.get('workflow_id')"
|
|
[multiple]="false"
|
|
listname="{{ 'Workflow' | translate }}"
|
|
[InputListValues]="workflowObserver"
|
|
></os-search-value-selector>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Origin -->
|
|
<div *ngIf="(motion && motion.origin) || editMotion">
|
|
<div *ngIf="!editMotion">
|
|
<h4 translate>Origin</h4>
|
|
{{ 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voting -->
|
|
<!--
|
|
<div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
|
|
<h4 translate>Voting</h4>
|
|
</div>
|
|
-->
|
|
</form>
|
|
</ng-template>
|
|
|
|
<ng-template #contentTemplate>
|
|
<form
|
|
class="motion-content"
|
|
[formGroup]="contentForm"
|
|
(clickdown)="onKeyDown($event)"
|
|
(keydown)="onKeyDown($event)"
|
|
(ngSubmit)="saveMotion()"
|
|
>
|
|
<!-- Line Number and Diff buttons -->
|
|
<div *ngIf="motion && !editMotion && !motion.isStatuteAmendment()" class="motion-text-controls">
|
|
<button
|
|
type="button"
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="lineNumberingMenu"
|
|
matTooltip="{{ 'Line numbering' | translate }}"
|
|
>
|
|
<mat-icon>format_list_numbered</mat-icon>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="changeRecoMenu"
|
|
matTooltip="{{ 'Change recommendations' | translate }}"
|
|
*ngIf="motion && !motion.isParagraphBasedAmendment() && allChangingObjects.length > 0"
|
|
>
|
|
<mat-icon>rate_review</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Selecting statute paragraphs for amendment -->
|
|
<div class="statute-amendment-selector" *ngIf="editMotion && statuteParagraphs.length > 0 && statutesEnabled">
|
|
<mat-checkbox formControlName="statute_amendment" translate (change)="onStatuteAmendmentChange($event)">
|
|
Statute amendment
|
|
</mat-checkbox>
|
|
|
|
<mat-form-field *ngIf="contentForm.value.statute_amendment">
|
|
<mat-select
|
|
[placeholder]="'Select paragraph to amend' | translate"
|
|
formControlName="statute_paragraph_id"
|
|
(valueChange)="onStatuteParagraphChange($event)"
|
|
>
|
|
<mat-option *ngFor="let paragraph of statuteParagraphs" [value]="paragraph.id">
|
|
{{ paragraph.title }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</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' | translate }}"
|
|
formControlName="title"
|
|
[value]="motionCopy.title"
|
|
required
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Text -->
|
|
<span class="text-prefix-label">{{ preamble | translate }}</span>
|
|
|
|
<!-- Regular motions or traditional amendments -->
|
|
<ng-container
|
|
*ngIf="motion && !editMotion && !motion.isStatuteAmendment() && !motion.isParagraphBasedAmendment()"
|
|
>
|
|
<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]="sanitizedText(getFormattedTextPlain())"
|
|
></div>
|
|
</div>
|
|
<os-motion-detail-diff
|
|
*ngIf="isRecoModeDiff()"
|
|
[motion]="motion"
|
|
[changes]="allChangingObjects"
|
|
[scrollToChange]="scrollToChange"
|
|
(createChangeRecommendation)="createChangeRecommendation($event)"
|
|
></os-motion-detail-diff>
|
|
</ng-container>
|
|
<div
|
|
class="motion-text line-numbers-none"
|
|
*ngIf="motion && !editMotion && motion.isStatuteAmendment()"
|
|
[innerHTML]="getFormattedStatuteAmendment()"
|
|
></div>
|
|
|
|
<!-- The HTML Editor -->
|
|
<editor formControlName="text" [init]="tinyMceSettings" *ngIf="motion && editMotion"></editor>
|
|
|
|
<!-- Paragraph-based amendments -->
|
|
<ng-container *ngIf="motion && !editMotion && motion.isParagraphBasedAmendment()">
|
|
<ng-container *ngTemplateOutlet="paragraphBasedAmendment"></ng-container>
|
|
</ng-container>
|
|
|
|
<!-- Reason -->
|
|
<div *ngIf="motion || editMotion">
|
|
<h5 *ngIf="motion.reason || editMotion" translate>Reason</h5>
|
|
<div class="motion-text" *ngIf="!editMotion"><div [innerHtml]="motion.reason"></div></div>
|
|
|
|
<!-- The HTML Editor -->
|
|
<editor
|
|
formControlName='reason'
|
|
[init]="tinyMceSettings"
|
|
*ngIf="editMotion"
|
|
></editor>
|
|
</div>
|
|
</form>
|
|
</ng-template>
|
|
|
|
<ng-template #paragraphBasedAmendment>
|
|
<section class="text-holder">
|
|
<div class="alert alert-info" *ngIf="this.getAmendedParagraphs().length === 0">
|
|
<span translate>No changes at the text.</span>
|
|
</div>
|
|
<div
|
|
*ngFor="let paragraph of this.getAmendedParagraphs()"
|
|
class="motion-text motion-text-diff amendment-view"
|
|
[class.line-numbers-none]="isLineNumberingNone()"
|
|
[class.line-numbers-inline]="isLineNumberingInline()"
|
|
[class.line-numbers-outside]="isLineNumberingOutside()"
|
|
[class.amendment-context]="showAmendmentContext"
|
|
>
|
|
<div class="amendment-context" *ngIf="showAmendmentContext">
|
|
<div [innerHTML]="getParentMotionRange(1, paragraph.paragraphLineFrom)" class="context"></div>
|
|
</div>
|
|
|
|
<h3
|
|
*ngIf="paragraph.diffLineTo === paragraph.diffLineFrom + 1 && !showAmendmentContext"
|
|
class="amendment-line-header"
|
|
>
|
|
<span translate>Line</span> {{ paragraph.diffLineFrom }}:
|
|
</h3>
|
|
<h3
|
|
*ngIf="paragraph.diffLineTo !== paragraph.diffLineFrom + 1 && !showAmendmentContext"
|
|
class="amendment-line-header"
|
|
>
|
|
<span translate>Line</span> {{ paragraph.diffLineFrom }} - {{ paragraph.diffLineTo - 1 }}:
|
|
</h3>
|
|
|
|
<div class="paragraph-context" [innerHtml]="sanitizedText(paragraph.textPre)"></div>
|
|
<div [innerHtml]="sanitizedText(paragraph.text)"></div>
|
|
<div class="paragraph-context" [innerHtml]="sanitizedText(paragraph.textPost)"></div>
|
|
|
|
<div class="amendment-context" *ngIf="showAmendmentContext">
|
|
<div [innerHtml]="getParentMotionRange(paragraph.paragraphLineTo, null)"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</ng-template>
|
|
|
|
<!-- Line number Menu -->
|
|
<mat-menu #lineNumberingMenu="matMenu">
|
|
<div *ngIf="motion">
|
|
<button mat-menu-item translate (click)=setLineNumberingMode(0) [ngClass]="{ 'selected': motion.lnMode === 0 }">none</button>
|
|
<button mat-menu-item translate (click)=setLineNumberingMode(1) [ngClass]="{ 'selected': motion.lnMode === 1 }">inline</button>
|
|
<button mat-menu-item translate (click)=setLineNumberingMode(2) [ngClass]="{ 'selected': motion.lnMode === 2 }">outside</button>
|
|
</div>
|
|
</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>
|