Feat/unit date selector

angular.json

@@ -36,7 +36,6 @@
               "src/styles.scss",
               "./node_modules/bootstrap/dist/css/bootstrap.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
-              "./build/assets/doubtfire.css",
               "./build/assets/node_modules/angular-xeditable/dist/css/xeditable.css",
               "./build/assets/node_modules/codemirror/lib/codemirror.css",
               "./build/assets/node_modules/codemirror/theme/xq-light.css",

src/app/common/unit-code/unit-code.component.ts

@@ -57,7 +57,8 @@ export class UnitCodeComponent implements OnInit, OnDestroy {
   flip() {
     this.showState = 'out'; // Trigger animation out
     setTimeout(() => {
-      this.currentIndex = (this.currentIndex + 1) % this.unitCodeParts.length;
+      // A small fix for the frontend code to compile.
+      this.currentIndex = (this.currentIndex + 1) % this.unitCodeParts?.length;
       this.showState = 'in'; // Trigger animation in after a delay
     }, 200); // Delay to match the animation duration
   }

src/app/doubtfire-angular.module.ts

@@ -267,6 +267,7 @@ const MY_DATE_FORMAT = {
   },
 };
 import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.component';
+import { UnitDatesSelectorComponent } from './units/states/rollover/directives/unit-dates-selector/unit-dates-selector';
 
 @NgModule({
   // Components we declare
@@ -309,6 +310,7 @@ import { UnitStudentEnrolmentModalComponent } from './units/modals/unit-student-
     TaskDefinitionOverseerComponent,
     TaskDefinitionScormComponent,
     UnitAnalyticsComponent,
+    UnitDatesSelectorComponent,
     StudentTutorialSelectComponent,
     StudentCampusSelectComponent,
     TaskListItemComponent,

src/app/doubtfire-angularjs.module.ts

@@ -222,6 +222,7 @@ import {GradeService} from './common/services/grade.service';
 import {TaskScormCardComponent} from './projects/states/dashboard/directives/task-dashboard/directives/task-scorm-card/task-scorm-card.component';
 import { UnitStudentEnrolmentModalService } from './units/modals/unit-student-enrolment-modal/unit-student-enrolment-modal.service';
 import { PrivacyPolicy } from './config/privacy-policy/privacy-policy';
+import { UnitDatesSelectorComponent } from './units/states/rollover/directives/unit-dates-selector/unit-dates-selector';
 
 export const DoubtfireAngularJSModule = angular.module('doubtfire', [
   'doubtfire.config',
@@ -329,6 +330,13 @@ DoubtfireAngularJSModule.directive(
   'userBadge',
   downgradeComponent({component: UserBadgeComponent}),
 );
+
+DoubtfireAngularJSModule.directive(
+  'fUnitDatesSelector',
+  downgradeComponent({component: UnitDatesSelectorComponent}),
+);
+
+
 DoubtfireAngularJSModule.directive(
   'fTaskSubmissionCard',
   downgradeComponent({component: TaskSubmissionCardComponent}),

src/app/units/states/rollover/directives/unit-dates-selector/unit-dates-selector.component.html

@@ -0,0 +1,110 @@
+<div class="unit-dates-selector">
+  <div class="panel panel-primary">
+    <div class="panel-heading">
+      <h3 class="panel-title">Create Unit</h3>
+      <p>Duplicate an existing unit by specifying the time period.</p>
+    </div>
+
+    <form [formGroup]="form" (ngSubmit)="saveUnit()" class="form-horizontal">
+      <div class="panel-body">
+
+        <!-- Teaching Period -->
+        <div class="form-group row">
+          <label for="teachingperiod" class="col-sm-2 col-form-label">Teaching Period</label>
+          <div class="col-sm-9">
+            <!-- Replace with your custom select component -->
+            <object-select
+              [source]="teachingPeriodValues"
+              [target]="form.get('toPeriod')?.value"
+              (targetChange)="form.get('toPeriod')?.setValue($event)"
+              label="Select Teaching Period">
+            </object-select>
+          </div>
+        </div>
+
+        <!-- Start Date -->
+        <div class="form-group row">
+          <label for="startdate" class="col-sm-2 col-form-label" title="Date for the start of teaching in the unit.">
+            Start Date
+          </label>
+          <div class="col-sm-9">
+            <div class="input-group col-sm-4">
+              <ng-container *ngIf="!form.get('toPeriod')?.value; else displayStart">
+                <input
+                  id="startdate"
+                  type="date"
+                  class="form-control"
+                  formControlName="startDate"
+                  placeholder="yyyy-MM-dd"
+                />
+              </ng-container>
+
+              <ng-template #displayStart>
+                <input
+                  type="text"
+                  class="form-control"
+                  [value]="form.get('toPeriod')?.value?.startDate | date: 'yyyy-MM-dd'"
+                  disabled
+                />
+              </ng-template>
+
+              <span class="input-group-btn">
+                <button
+                  type="button"
+                  class="btn btn-default"
+                  (click)="openPicker('start')"
+                  [disabled]="form.get('toPeriod')?.value"
+                >
+                  <i class="fa fa-calendar"></i>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- End Date -->
+        <div class="form-group row">
+          <label for="enddate" class="col-sm-2 col-form-label">End Date</label>
+          <div class="col-sm-9">
+            <div class="input-group col-sm-4">
+              <ng-container *ngIf="!form.get('toPeriod')?.value; else displayEnd">
+                <input
+                  id="enddate"
+                  type="date"
+                  class="form-control"
+                  formControlName="endDate"
+                  placeholder="yyyy-MM-dd"
+                />
+              </ng-container>
+
+              <ng-template #displayEnd>
+                <input
+                  type="text"
+                  class="form-control"
+                  [value]="form.get('toPeriod')?.value?.endDate | date: 'yyyy-MM-dd'"
+                  disabled
+                />
+              </ng-template>
+
+              <span class="input-group-btn">
+                <button
+                  type="button"
+                  class="btn btn-default"
+                  (click)="openPicker('end')"
+                  [disabled]="form.get('toPeriod')?.value"
+                >
+                  <i class="fa fa-calendar"></i>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Submit Button -->
+      <div class="panel-footer text-right">
+        <button type="submit" class="btn btn-success" [disabled]="form.invalid">Create Unit</button>
+      </div>
+    </form>
+  </div>
+</div>