OpenSlides/client/src/app/site/motions/components/motion-detail/motion-detail.component.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>&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" | translate }}' 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>
                <mat-chip-list *ngFor="let submitter of motion.submitters">
                    <mat-chip>{{ submitter.full_name }}</mat-chip>
                </mat-chip-list>
            </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="{{ '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>
        </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' | 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>
        </div>

        <!-- Recommendation -->
        <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>
                </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' | translate }}" [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' | translate}}" 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" matTooltip="{{ 'Line numbering' | translate }}">
                <mat-icon>format_list_numbered</mat-icon>
            </button>
            <button type="button" mat-icon-button [matMenuTriggerFor]="changeRecoMenu" matTooltip="{{ 'Change recommendations' | translate }}">
                <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' | translate }}" 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' | translate }}" formControlName='text' [value]='motionCopy.text' required></textarea>
        </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>
            </div>
            <mat-form-field *ngIf="editMotion" class="wide-form">
                <textarea matInput placeholder="{{ 'Reason' | translate }}" 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>