text-exercise-update.component.html

<form name="editForm" role="form" novalidate #editForm="ngForm">
    <div class="d-flex align-items-center gap-2">
        @if (!textExercise.id) {
            <h2 id="jhi-text-exercise-heading-create" jhiTranslate="artemisApp.textExercise.home.createLabel">Create a new Text Exercise</h2>
        } @else if (!isImport && textExercise.id) {
            <h2 id="jhi-text-exercise-heading-edit" jhiTranslate="artemisApp.textExercise.home.editLabel">Edit Text Exercise</h2>
        } @else if (isImport) {
            <h2 id="jhi-text-exercise-heading-import" jhiTranslate="artemisApp.textExercise.home.importLabel">Import Text Exercise</h2>
        }
        <jhi-documentation-button [type]="documentationType" />
    </div>
    <jhi-form-status-bar [formStatusSections]="formSectionStatus" />
    <div>
        <h3 jhiTranslate="artemisApp.exercise.sections.general" id="artemisApp.exercise.sections.general">General Information</h3>
        <jhi-exercise-title-channel-name [exercise]="textExercise" [course]="textExercise.course" [minTitleLength]="3" [isImport]="isImport" [isExamMode]="isExamMode" />
        @if (!isExamMode) {
            <div class="form-group position-relative">
                <label class="form-control-label" jhiTranslate="artemisApp.exercise.categories">Categories</label>
                <jhi-help-icon text="artemisApp.exercise.categoriesTooltip" />
                <jhi-category-selector [categories]="exerciseCategories" [existingCategories]="existingCategories" (selectedCategories)="updateCategories($event)" />
            </div>
        }
        <h3 jhiTranslate="artemisApp.exercise.sections.mode" id="artemisApp.exercise.sections.mode">Mode</h3>
        <div class="form-group">
            <label class="form-control-label" jhiTranslate="artemisApp.exercise.difficulty">Difficulty</label>
            <div>
                <jhi-difficulty-picker [exercise]="textExercise" />
            </div>
        </div>
        <jhi-team-config-form-group class="form-element" [exercise]="textExercise" [isImport]="isImport" />
        <h3 jhiTranslate="artemisApp.exercise.sections.problem" id="artemisApp.exercise.sections.problem">Problem Statement</h3>
        <div class="form-group">
            <label jhiTranslate="artemisApp.exercise.problemStatement" for="problemStatement">Problem Statement</label>
            <jhi-markdown-editor
                id="problemStatement"
                class="markdown-editor"
                [domainCommands]="domainCommandsProblemStatement"
                [(markdown)]="textExercise.problemStatement"
                [editorMode]="EditorMode.LATEX"
                (markdownChange)="calculateFormSectionStatus()"
            />
        </div>
        @if (!isExamMode) {
            <div class="form-group">
                <jhi-competency-selection
                    id="competencies"
                    [labelName]="'artemisApp.competency.link.title' | artemisTranslate"
                    [labelTooltip]="'artemisApp.competency.link.exercise' | artemisTranslate"
                    [(ngModel)]="textExercise.competencies"
                    name="competencies"
                />
            </div>
        }
        <h3 jhiTranslate="artemisApp.exercise.sections.solution" id="artemisApp.exercise.sections.solution">Example Solution</h3>
        <div class="form-group">
            <label jhiTranslate="artemisApp.exercise.exampleSolution" for="exampleSolution">Example Solution</label>
            <jhi-markdown-editor
                id="exampleSolution"
                class="markdown-editor"
                [domainCommands]="domainCommandsSampleSolution"
                [(markdown)]="textExercise.exampleSolution"
                [editorMode]="EditorMode.LATEX"
                (markdownChange)="calculateFormSectionStatus()"
            />
        </div>
        @if (!isExamMode) {
            <div class="form-group">
                <jhi-date-time-picker
                    #solutionPublicationDate
                    class="form-element"
                    name="exampleSolutionPublicationDate"
                    labelName="{{ 'artemisApp.exercise.exampleSolutionPublicationDate' | artemisTranslate }}"
                    [(ngModel)]="textExercise.exampleSolutionPublicationDate"
                    [error]="textExercise.exampleSolutionPublicationDateError!"
                    (valueChange)="validateDate()"
                />
                @if (textExercise.exampleSolutionPublicationDateError) {
                    <span class="invalid-feedback">{{ 'artemisApp.exercise.exampleSolutionPublicationDateError' | artemisTranslate }}</span>
                }
            </div>
        }
        <h3 jhiTranslate="artemisApp.exercise.sections.grading" id="artemisApp.exercise.sections.grading">Grading</h3>
        @if (!isExamMode) {
            <div class="d-flex">
                <div class="form-group flex-grow-1">
                    <jhi-date-time-picker
                        #releaseDate
                        class="form-element"
                        id="pick-releaseDate"
                        labelName="{{ 'artemisApp.exercise.releaseDate' | artemisTranslate }}"
                        [(ngModel)]="textExercise.releaseDate"
                        (valueChange)="validateDate()"
                        [error]="false"
                        name="releaseDate"
                    />
                </div>
                <div class="form-group flex-grow-1 ms-3">
                    <jhi-date-time-picker
                        #startDate
                        class="form-element"
                        id="pick-startDate"
                        name="startDate"
                        [error]="!!textExercise.startDateError"
                        labelName="{{ 'artemisApp.exercise.startDate' | artemisTranslate }}"
                        (valueChange)="validateDate()"
                        [(ngModel)]="textExercise.startDate"
                    />
                    @if (textExercise.startDateError) {
                        <span class="invalid-feedback">{{ 'artemisApp.exercise.startDateError' | artemisTranslate }}</span>
                    }
                </div>
            </div>
            <div class="d-flex">
                <div class="form-group flex-grow-1">
                    <jhi-date-time-picker
                        #dueDate
                        class="form-element"
                        id="pick-dueDate"
                        name="dueDate"
                        [error]="!!textExercise.dueDateError"
                        labelName="{{ 'artemisApp.exercise.dueDate' | artemisTranslate }}"
                        (valueChange)="validateDate()"
                        [(ngModel)]="textExercise.dueDate"
                    />
                    @if (textExercise.dueDateError) {
                        <span class="invalid-feedback">{{ 'artemisApp.exercise.dueDateError' | artemisTranslate }}</span>
                    }
                </div>
                <div class="form-group flex-grow-1 ms-3">
                    <jhi-date-time-picker
                        #assessmentDueDate
                        class="form-element"
                        id="pick-assessmentDueDate"
                        name="assessmentDueDate"
                        [error]="!!textExercise.assessmentDueDateError"
                        labelName="{{ 'artemisApp.exercise.assessmentDueDate' | artemisTranslate }}"
                        (valueChange)="validateDate()"
                        [(ngModel)]="textExercise.assessmentDueDate"
                    />
                    @if (textExercise.assessmentDueDateError) {
                        <span class="invalid-feedback">{{ 'artemisApp.exercise.assessmentDueDateError' | artemisTranslate }}</span>
                    }
                </div>
            </div>
        }
        <div class="form-group">
            <label class="form-control-label">{{ 'artemisApp.exercise.includedInOverallScore' + (textExercise.course ? 'Course' : 'Exam') + 'Label' | artemisTranslate }}</label>
            <div>
                <jhi-included-in-overall-score-picker
                    [(includedInOverallScore)]="textExercise.includedInOverallScore"
                    (includedInOverallScoreChange)="validateDate()"
                    [allowNotIncluded]="!isExamMode"
                />
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="artemisApp.exercise.points" for="field_points">Points</label>
                    <input
                        required
                        type="number"
                        class="form-control"
                        [customMin]="1"
                        [customMax]="9999"
                        name="points"
                        #points="ngModel"
                        id="field_points"
                        [(ngModel)]="textExercise.maxPoints"
                    />
                    @if (points?.invalid && (points?.dirty || points?.touched) && points?.errors) {
                        <div class="alert alert-danger">
                            {{ 'artemisApp.exercise.pointsError' | artemisTranslate }}
                        </div>
                    }
                </div>
            </div>
            <div class="col">
                <div class="form-group" [hidden]="textExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
                    <label class="form-control-label" jhiTranslate="artemisApp.exercise.bonusPoints" for="field_bonusPoints">Bonus Points</label>
                    <input
                        type="number"
                        [required]="textExercise.includedInOverallScore === IncludedInOverallScore.INCLUDED_COMPLETELY"
                        class="form-control"
                        [customMin]="0"
                        [customMax]="9999"
                        name="bonusPoints"
                        id="field_bonusPoints"
                        [(ngModel)]="textExercise.bonusPoints"
                        #bonusPoints="ngModel"
                    />
                    @if (bonusPoints?.invalid && (bonusPoints?.dirty || bonusPoints?.touched) && bonusPoints?.errors) {
                        <div class="alert alert-danger" [hidden]="textExercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY">
                            {{ 'artemisApp.exercise.bonusPointsError' | artemisTranslate }}
                        </div>
                    }
                </div>
            </div>
        </div>
        @if ((isAthenaEnabled$ | async) && !isExamMode) {
            <div class="form-group">
                <div class="form-check custom-control custom-checkbox">
                    <input
                        type="checkbox"
                        id="feedbackSuggestionsEnabled"
                        [ngModel]="textExercise.feedbackSuggestionsEnabled"
                        (ngModelChange)="textExercise.feedbackSuggestionsEnabled = !!$event"
                        class="form-check-input custom-control-input"
                        name="feedbackSuggestionsEnabled"
                    />
                    <label class="form-check-label custom-control-label" for="feedbackSuggestionsEnabled" jhiTranslate="artemisApp.exercise.feedbackSuggestionsEnabled"></label>
                    <jhi-help-icon placement="right auto" [text]="'artemisApp.exercise.feedbackSuggestionsEnabledTooltip'" />
                </div>
            </div>
        }
        @if (!isExamMode) {
            <jhi-exercise-update-plagiarism [exercise]="textExercise" />
        }
        <jhi-presentation-score-checkbox [exercise]="textExercise" />
        <div class="form-group">
            <label class="form-control-label" jhiTranslate="artemisApp.exercise.assessmentInstructions" for="gradingInstructions">Assessment Instructions</label>
            <jhi-grading-instructions-details id="gradingInstructions" [exercise]="textExercise" />
        </div>
    </div>
    <jhi-form-footer
        [isCreation]="!textExercise.id"
        [isImport]="isImport"
        [isSaving]="isSaving"
        [isDisabled]="!!(editForm.form.invalid || textExercise.dueDateError || textExercise.assessmentDueDateError || textExercise.exampleSolutionPublicationDateError)"
        (cancel)="previousState()"
        (save)="save()"
        [(notificationText)]="notificationText"
    />
</form>