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">{{ contentForm.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)">
                <!-- possible icons:
                    arrow_left
                    chevron_left
                    first_page
                    arrow_back
                    arrow_back_ios
                    navigate_before
                    fast_rewind
                -->
                <mat-icon>chevron_left</mat-icon>
                <span>{{ previousMotion.identifier }}</span>
            </button>
        </div>
        <div *ngIf="nextMotion">
            <button mat-button (click)="navigateToMotion(nextMotion)">
                <span>{{ nextMotion.identifier }}</span>
                <!-- possible icons:
                    arrow_right
                    chevron_right
                    last_page
                    arrow_forward
                    arrow_forward_ios
                    navigate_next
                    fast_forward
                -->
                <mat-icon>chevron_right</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>New 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 entire motion text</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 -->
<h1 class="title-left on-transition-fade" *ngIf="motion && !editMotion">
    {{ motion.title }}
</h1>

<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="!editMotion" [motion]="motion"></os-motion-comments>
        <os-personal-note *ngIf="!editMotion" [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="!editMotion" [motion]="motion"></os-motion-comments>
            <os-personal-note *ngIf="!editMotion" [motion]="motion"></os-personal-note>
        </div>
        <div class="desktop-right ">
            <!-- Content -->
            <mat-card [ngClass]="editMotion ? 'os-form-card' : 'os-card'">
                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
            </mat-card>
        </div>
    </div>
</ng-template>

<ng-template #metaInfoTemplate>
    <div *ngIf="motion">
        <!-- Submitters -->
        <div *ngIf="motion.submitters || newMotion">
            <div *ngIf="!editMotion"><os-manage-submitters [motion]="motion"></os-manage-submitters></div>
        </div>

        <!-- do Support -->
        <div *ngIf="minSupporters && !editMotion">
            <h4 *ngIf="perms.isAllowed('support', motion) || motion.hasSupporters()" translate>Supporters</h4>

            <!-- support button -->
            <button
                type="button"
                mat-raised-button
                color="primary"
                (click)="support()"
                *ngIf="perms.isAllowed('support', motion)"
            >
                <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>

        <!-- Set State -->
        <div *ngIf="!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
                *ngIf="motion.state"
                [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="recommender && !editMotion">
            <h4>{{ 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="!editMotion">
            <h4 translate>Category</h4>
            <mat-menu #categoryMenu="matMenu">
                <button
                    mat-menu-item
                    *ngFor="let category of categoryObserver.value"
                    (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>

        <!-- Block -->
        <div *ngIf="!editMotion">
            <h4 translate>Motion block</h4>

            <mat-menu #blockMenu="matMenu">
                <button mat-menu-item *ngFor="let block of blockObserver.value" (click)="setBlock(block.id)">
                    {{ block }}
                </button>
                <button mat-menu-item (click)="setBlock(null)">---</button>
            </mat-menu>
            <mat-basic-chip [matMenuTriggerFor]="blockMenu" class="grey">
                {{ motion.motion_block ? motion.motion_block : ('not set' | translate) }}
            </mat-basic-chip>
        </div>

        <!-- Origin - display only -->
        <div *ngIf="!editMotion && motion.origin">
            <h4 translate>Origin</h4>
            {{ motion.origin }}
        </div>

        <!-- motion polls -->
        <div *ngIf="!editMotion">
            <os-motion-poll *ngFor="let poll of motion.motion.polls; let i = index" [rawPoll]="poll" [pollIndex]="i">
            </os-motion-poll>
            <button mat-button *ngIf="perms.isAllowed('createpoll', motion)" (click)="createPoll()">
                <mat-icon class="main-nav-color">poll</mat-icon>
                <span translate>Create poll</span>
            </button>
        </div>
    </div>
</ng-template>

<ng-template #contentTemplate>
    <form
        class="motion-content"
        [formGroup]="contentForm"
        (keydown)="onKeyDown($event)"
        (ngSubmit)="saveMotion()"
        *ngIf="motion"
    >
        <!-- Line Number and Diff buttons -->
        <div *ngIf="!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" (change)="onStatuteAmendmentChange($event)">
                {{ 'Statute amendment' | translate }}
            </mat-checkbox>

            <mat-form-field *ngIf="contentForm.value.statute_amendment">
                <mat-select
                    [placeholder]="'Statute paragraph' | 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>

        <!-- Submitter -->
        <div *ngIf="newMotion" class="content-field">
            <div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
                <os-search-value-selector
                    ngDefaultControl
                    [form]="contentForm"
                    [formControl]="contentForm.get('submitters_id')"
                    [multiple]="true"
                    listname="{{ 'Submitters' | translate }}"
                    [InputListValues]="submitterObserver"
                ></os-search-value-selector>
            </div>
        </div>

        <div class="form-id-title">
            <!-- Identifier -->
            <div *ngIf="editMotion && !newMotion" class="content-field form-identifier">
                <mat-form-field *ngIf="editMotion">
                    <input
                        matInput
                        placeholder="{{ 'Identifier' | translate }}"
                        formControlName="identifier"
                        [value]="motionCopy.identifier"
                    />
                </mat-form-field>
            </div>

            <!-- Title -->
            <div *ngIf="editMotion" class="content-field form-title">
                <mat-form-field *ngIf="editMotion">
                    <input
                        matInput
                        osAutofocus
                        placeholder="{{ 'Title' | translate }}"
                        formControlName="title"
                        [value]="motionCopy.title"
                        required
                    />
                </mat-form-field>
            </div>
        </div>

        <!-- Text -->
        <span class="text-prefix-label">{{ preamble | translate }}</span>

        <!-- Regular motions or traditional amendments -->
        <ng-container *ngIf="!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="!editMotion && motion.isStatuteAmendment()"
            [innerHTML]="getFormattedStatuteAmendment()"
        ></div>

        <!-- The HTML Editor -->
        <editor formControlName="text" [init]="tinyMceSettings" *ngIf="motion && editMotion"></editor>

        <!-- Paragraph-based amendments -->
        <ng-container *ngIf="!editMotion && motion.isParagraphBasedAmendment()">
            <ng-container *ngTemplateOutlet="paragraphBasedAmendment"></ng-container>
        </ng-container>

        <!-- Reason -->
        <div *ngIf="motion.reason || editMotion">
            <h3 translate>Reason</h3>
            <div class="motion-text" *ngIf="!editMotion"><div [innerHtml]="motion.reason"></div></div>

            <!-- The HTML Editor -->
            <editor formControlName="reason" [init]="tinyMceSettings" *ngIf="editMotion"></editor>
        </div>

        <div class="extra-data">
            <!-- Attachments -->
            <div *ngIf="motion.hasAttachments() || editMotion" class="content-field">
                <div *ngIf="!editMotion">
                    <h3>{{ "Attachments" | translate }}<mat-icon>attach_file</mat-icon></h3>
                    <mat-list dense>
                        <mat-list-item *ngFor="let file of motion.attachments">
                            <a [routerLink]="" (click)="onClickAttacment(file)">{{ file.title }}</a>
                        </mat-list-item>
                    </mat-list>
                </div>
                <div *ngIf="editMotion">
                    <os-search-value-selector
                        ngDefaultControl
                        [form]="contentForm"
                        [formControl]="contentForm.get('attachments_id')"
                        [multiple]="true"
                        listname="{{ 'Attachments' | translate }}"
                        [InputListValues]="mediafilesObserver"
                    ></os-search-value-selector>
                </div>
            </div>

            <!-- Category form -->
            <div class="content-field" *ngIf="newMotion && categoryObserver.value.length > 0">
                <os-search-value-selector
                    ngDefaultControl
                    [form]="contentForm"
                    [formControl]="contentForm.get('category_id')"
                    [multiple]="false"
                    [includeNone]="true"
                    listname="{{ 'Category' | translate }}"
                    [InputListValues]="categoryObserver"
                ></os-search-value-selector>
            </div>

            <!-- Parent item -->
            <div class="content-field" *ngIf="newMotion && agendaItemObserver.value.length > 0">
                <os-search-value-selector
                    ngDefaultControl
                    [form]="contentForm"
                    [formControl]="contentForm.get('agenda_parent_id')"
                    [multiple]="false"
                    [includeNone]="true"
                    listname="{{ 'Parent Item' | translate }}"
                    [InputListValues]="agendaItemObserver"
                ></os-search-value-selector>
            </div>

            <!-- Visibility -->
            <div class="content-field" *ngIf="newMotion">
                <mat-form-field>
                    <mat-select formControlName="agenda_type" placeholder="{{ 'Agenda visibility' | translate }}">
                        <mat-option *ngFor="let type of itemVisibility" [value]="type.key">
                            <span>{{ type.name | translate }}</span>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <!-- Supporter form -->
            <div class="content-field" *ngIf="editMotion && minSupporters">
                <div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
                    <os-search-value-selector
                        ngDefaultControl
                        [form]="contentForm"
                        [formControl]="contentForm.get('supporters_id')"
                        [multiple]="true"
                        listname="{{ 'Supporters' | translate }}"
                        [InputListValues]="supporterObserver"
                    ></os-search-value-selector>
                </div>
            </div>

            <!-- Workflow -->
            <div class="content-field" *ngIf="editMotion && workflowObserver.value.length > 1">
                <div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
                    <os-search-value-selector
                        ngDefaultControl
                        [form]="contentForm"
                        [formControl]="contentForm.get('workflow_id')"
                        [multiple]="false"
                        listname="{{ 'Workflow' | translate }}"
                        [InputListValues]="workflowObserver"
                    ></os-search-value-selector>
                </div>
            </div>

            <!-- Origin form -->
            <div class="content-field" *ngIf="editMotion">
                <div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
                    <mat-form-field>
                        <input
                            matInput
                            placeholder="{{ 'Origin' | translate }}"
                            formControlName="origin"
                            [value]="motionCopy.origin"
                        />
                    </mat-form-field>
                </div>
            </div>
        </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(LineNumberingMode.None)"
            [ngClass]="{ selected: lnMode === LineNumberingMode.None }"
        >
            none
        </button>
        <button
            mat-menu-item
            translate
            (click)="setLineNumberingMode(LineNumberingMode.Inside)"
            [ngClass]="{ selected: lnMode === LineNumberingMode.Inside }"
        >
            inline
        </button>
        <button
            mat-menu-item
            translate
            (click)="setLineNumberingMode(LineNumberingMode.Outside)"
            [ngClass]="{ selected: lnMode === LineNumberingMode.Outside }"
        >
            outside
        </button>
    </div>
</mat-menu>

<!-- Diff View Menu -->
<mat-menu #changeRecoMenu="matMenu">
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Original)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Original }"
    >
        Original version
    </button>
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Changed)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Changed }"
    >
        Changed version
    </button>
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Diff)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Diff }"
    >
        Diff version
    </button>
    <button
        mat-menu-item
        translate
        (click)="setChangeRecoMode(ChangeRecoMode.Final)"
        [ngClass]="{ selected: crMode === ChangeRecoMode.Final }"
    >
        Final version
    </button>
</mat-menu>