add/modify frontend components

src/main/webapp-backup/dev/js/common/instructor.js

@@ -29,76 +29,6 @@ import {
 
 // -----------------------------------------------------------------------------
 
-function setupFsCopyModal() {
-    $('#fsCopyModal').on('show.bs.modal', (event) => {
-        const button = $(event.relatedTarget); // Button that triggered the modal
-        const actionlink = button.data('actionlink');
-        const courseid = button.data('courseid');
-        const fsname = button.data('fsname');
-        const appUrl = window.location.origin;
-        const currentPage = window.location.href.substring(appUrl.length); // use the page's relative URL
-
-        $.ajax({
-            type: 'GET',
-            url: `${actionlink}&courseid=${encodeURIComponent(courseid)}&fsname=${encodeURIComponent(fsname)}`
-                    + `&currentPage=${encodeURIComponent(currentPage)}`,
-            beforeSend() {
-                $('#fscopy_submit').prop('disabled', true);
-                $('#courseList').html('Loading possible destination courses. Please wait ...<br>'
-                                      + "<img class='margin-center-horizontal' src='/images/ajax-loader.gif'/>");
-            },
-            error() {
-                $('#courseList').html("<p id='fs-copy-modal-error'>Error retrieving course list."
-                                      + 'Please close the dialog window and try again.</p>');
-            },
-            success(data) {
-                $('#courseList').html(data);
-                // If the user alt-clicks, the form does not send any parameters and results in an error.
-                // Prevent default form submission and submit using jquery.
-                $('#fscopy_submit').off('click')
-                        .on('click', (e) => {
-                            $('#fscopy_submit').prop('disabled', true);
-                            e.preventDefault();
-                            $('#fscopy_submit').closest('form').submit();
-                        });
-                $('#fscopy_submit').prop('disabled', false);
-                countRemainingCharactersOnInput(ParamsNames.COPIED_FEEDBACK_SESSION_NAME);
-            },
-        });
-    });
-
-    $('#instructorCopyModalForm').submit(function (e) {
-        e.preventDefault();
-        const $this = $(this);
-
-        const $copyModalStatusMessage = $('#feedback-copy-modal-status');
-
-        $.ajax({
-            type: 'POST',
-            url: $this.prop('action'),
-            data: $this.serialize(),
-            beforeSend() {
-                $copyModalStatusMessage.removeClass('alert alert-danger');
-                $copyModalStatusMessage.html('<img src="/images/ajax-loader.gif" class="margin-center-horizontal">');
-            },
-            error() {
-                $copyModalStatusMessage.addClass('alert alert-danger');
-                $copyModalStatusMessage.text('There was an error during submission. '
-                                                 + 'Please close the dialog window and try again.');
-            },
-            success(data) {
-                const isError = data.errorMessage !== '';
-                if (!isError && data.redirectUrl) {
-                    window.location.href = data.redirectUrl;
-                } else {
-                    $copyModalStatusMessage.addClass('alert alert-danger');
-                    $copyModalStatusMessage.text(data.errorMessage);
-                    $('#fscopy_submit').prop('disabled', false);
-                }
-            },
-        });
-    });
-}
 
 function initializeTimeZoneOptions($selectElement) {
     if (typeof moment !== 'undefined') {

src/main/webapp-backup/dev/js/main/instructorFeedbacks.js

@@ -24,14 +24,6 @@ import {
     setupFsCopyModal,
 } from '../common/instructor';
 
-import {
-    bindUncommonSettingsEvents,
-    formatResponsesVisibilityGroup,
-    formatSessionVisibilityGroup,
-    showUncommonPanelsIfNotInDefaultValues,
-    updateUncommonSettingsInfo,
-} from '../common/instructorFeedbacks';
-
 import {
     prepareRemindModal,
 } from '../common/remindModal';
@@ -61,30 +53,6 @@ const DISPLAY_FEEDBACK_SESSION_COPY_INVALID = 'There is no feedback session to b
 const DISPLAY_FEEDBACK_SESSION_NAME_DUPLICATE =
         'This feedback session name already existed in this course. Please use another name.';
 
-/**
- * To be run on page finish loading. This will fill the start date and
- * start time inputs based on the client's time.
- *
- * The default values will not be set if the form was submitted previously and
- * failed validation.
- */
-function selectDefaultStartDateTime() {
-    const isFormSubmittedPreviously = $(`#${ParamsNames.FEEDBACK_SESSION_TIMEZONE}`).data('timeZone');
-    if (isFormSubmittedPreviously) {
-        return;
-    }
-
-    const now = new Date();
-
-    /*
-     * A workaround to hide the datepicker which opens up at the bottom of the page
-     * when setting the start date using the datepicker.
-     */
-    $('#ui-datepicker-div').css('display', 'none');
-
-    $(`#${ParamsNames.FEEDBACK_SESSION_STARTDATE}`).datepicker('setDate', now);
-    $(`#${ParamsNames.FEEDBACK_SESSION_STARTTIME}`).val(now.getHours() + 1);
-}
 
 function bindCopyButton() {
     $('#button_copy').on('click', (e) => {
@@ -189,33 +157,6 @@ function bindEventsAfterAjax() {
     setupFsCopyModal();
 }
 
-function escapeXml(unsafe) {
-    return (unsafe || '').replace(/&/g, '&amp;').replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;').replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-}
-
-function updateCourseNameAndTimeZoneFromSelection() {
-    const selectedCourseId = $(`#${ParamsNames.COURSE_ID}`).val();
-    if (!selectedCourseId) {
-        return;
-    }
-    const selectedCourseData = $('.course-attributes-data').data(selectedCourseId);
-    $(`#${ParamsNames.COURSE_NAME}`).html(escapeXml(selectedCourseData.name));
-    $(`#${ParamsNames.FEEDBACK_SESSION_TIMEZONE}`).html(selectedCourseData.timeZone);
-}
-
-function initializeCourseName() {
-    $('.course-attributes-data').each((idx, obj) => {
-        const $obj = $(obj);
-        $('.course-attributes-data').data(obj.id, { name: $obj.data('name'), timeZone: $obj.data('timeZone') });
-    });
-    updateCourseNameAndTimeZoneFromSelection();
-}
-
-function bindSelectField() {
-    $(`#${ParamsNames.COURSE_ID}`).change(updateCourseNameAndTimeZoneFromSelection);
-}
 
 const ajaxRequest = function (e) {
     e.preventDefault();
@@ -285,24 +226,13 @@ function bindCollapseEvents() {
 }
 
 function readyFeedbackPage() {
-    formatSessionVisibilityGroup();
-    formatResponsesVisibilityGroup();
-
-    selectDefaultStartDateTime();
     loadSessionsByAjax();
-    bindUncommonSettingsEvents();
 
     bindDeleteButtons();
     bindRemindButtons();
     bindPublishButtons();
     bindUnpublishButtons();
 
-    initializeCourseName();
-    bindSelectField();
-
-    updateUncommonSettingsInfo();
-    showUncommonPanelsIfNotInDefaultValues();
-
     bindCollapseEvents();
 }
 

src/web/app/components/copy-session-modal/copy-session-modal-model.ts

@@ -0,0 +1,7 @@
+/**
+ * Result of {@link CopySessionModalComponent}
+ */
+export interface CopySessionModalResult {
+  newFeedbackSessionName: string;
+  copyToCourseId: string;
+}

src/web/app/components/copy-session-modal/copy-session-modal.component.html

@@ -0,0 +1,36 @@
+<div class="modal-header">
+  <h5 class="modal-title">
+    <div>Copy this feedback session to other courses</div>
+    <small class="text-secondary">(Select the course(s) you want to copy this feedback session to)</small>
+  </h5>
+  <button type="button" class="close" (click)="activeModal.dismiss()">
+    <i class="fas fa-times"></i>
+  </button>
+</div>
+<div class="modal-body">
+  <div class="row">
+    <div class="col-12">
+      <div class="form-group">
+        <label><b>Name for copied session</b></label>
+        <input type="text" class="form-control" [(ngModel)]="newFeedbackSessionName" maxlength="38">
+        <span>{{ 38 - newFeedbackSessionName.length }} characters left</span>
+      </div>
+      <div class="form-check" *ngFor="let course of courseCandidates">
+        <input type="radio" name="copySessionChooseCourse" class="form-check-input"
+               [(ngModel)]="copyToCourseId" [value]="course.courseId">
+        <label class="form-check-label">
+          [<span [ngClass]="{ 'text-danger': sessionToCopyCourseId === course.courseId }">{{ course.courseId }}</span>]
+          : {{ course.courseName }}
+        </label>
+        <div *ngIf="sessionToCopyCourseId === course.courseId" class="text-danger">
+          {{ "{Session currently in this course}" }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-light" (click)="activeModal.dismiss()">Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="copy()"
+          [disabled]="!newFeedbackSessionName || !copyToCourseId">Copy</button>
+</div>

src/web/app/components/copy-session-modal/copy-session-modal.component.spec.ts

@@ -0,0 +1,33 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormsModule } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { CopySessionModalComponent } from './copy-session-modal.component';
+
+describe('CopySessionModalComponent', () => {
+  let component: CopySessionModalComponent;
+  let fixture: ComponentFixture<CopySessionModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CopySessionModalComponent],
+      imports: [
+        FormsModule,
+      ],
+      providers: [
+        NgbActiveModal,
+      ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CopySessionModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});