Multiple Reference Timelines: Timeline Designer, Manage Users extensions

app/assets/stylesheets/course/reference_timelines.scss

@@ -0,0 +1,6 @@
+// TODO: Remove once sidebar is fixed, and set Timeline Designer height
+// to fill viewport until bottom of viewport.
+// 126px is the height of the topbar + breadcrumb + margins in between.
+#course-timeline-designer {
+  height: calc(100vh - 126px);
+}

app/controllers/course/reference_times_controller.rb

@@ -11,7 +11,7 @@ def create
   end
 
   def update
-    if @reference_time.update(reference_time_params)
+    if @reference_time.update(update_params)
       head :ok
     else
       render json: { errors: @reference_time.errors.full_messages.to_sentence }, status: :bad_request
@@ -26,13 +26,13 @@ def destroy
     end
   end
 
-  def self.base_params
-    [:lesson_plan_item_id, :start_at, :bonus_end_at, :end_at]
-  end
-
   private
 
-  def reference_time_params
-    params.require(:reference_time).permit(*self.class.base_params)
+  def create_params
+    params.require(:reference_time).permit([:lesson_plan_item_id, :start_at, :bonus_end_at, :end_at])
+  end
+
+  def update_params
+    params.require(:reference_time).permit([:start_at, :bonus_end_at, :end_at])
   end
 end

client/.eslintrc.js

@@ -145,6 +145,7 @@ module.exports = {
     'no-underscore-dangle': 'off',
     'object-curly-newline': ['error', { consistent: true }],
     'prefer-destructuring': 'off',
+    'no-restricted-exports': 'off',
   },
   globals: {
     window: true,

client/app/api/course/ReferenceTimelines.ts

@@ -0,0 +1,61 @@
+import { AxiosResponse } from 'axios';
+import {
+  TimeData,
+  TimelineData,
+  TimelinePostData,
+  TimelinesData,
+  TimePostData,
+} from 'types/course/referenceTimelines';
+
+import BaseCourseAPI from './Base';
+
+type Response<Result = void> = Promise<AxiosResponse<Result>>;
+
+export default class ReferenceTimelinesAPI extends BaseCourseAPI {
+  _getUrlPrefix(id?: TimelineData['id']): string {
+    return `/courses/${this.getCourseId()}/timelines${id ? `/${id}` : ''}`;
+  }
+
+  index(): Response<TimelinesData> {
+    return this.getClient().get(this._getUrlPrefix());
+  }
+
+  create(data: TimelinePostData): Response<TimelineData> {
+    return this.getClient().post(this._getUrlPrefix(), data);
+  }
+
+  delete(
+    id: TimelineData['id'],
+    alternativeTimelineId?: TimelineData['id'],
+  ): Response {
+    return this.getClient().delete(`${this._getUrlPrefix(id)}`, {
+      params: { revert_to: alternativeTimelineId },
+    });
+  }
+
+  update(id: TimelineData['id'], data: TimelinePostData): Response {
+    return this.getClient().patch(`${this._getUrlPrefix(id)}`, data);
+  }
+
+  createTime(
+    id: TimelineData['id'],
+    data: TimePostData,
+  ): Response<{ id: TimeData['id'] }> {
+    return this.getClient().post(`${this._getUrlPrefix(id)}/times`, data);
+  }
+
+  deleteTime(id: TimelineData['id'], timeId: TimeData['id']): Response {
+    return this.getClient().delete(`${this._getUrlPrefix(id)}/times/${timeId}`);
+  }
+
+  updateTime(
+    id: TimelineData['id'],
+    timeId: TimeData['id'],
+    data: TimePostData,
+  ): Response {
+    return this.getClient().patch(
+      `${this._getUrlPrefix(id)}/times/${timeId}`,
+      data,
+    );
+  }
+}

client/app/api/course/Users.ts

@@ -9,6 +9,7 @@ import {
   StaffRole,
   UpdateCourseUserPatchData,
 } from 'types/course/courseUsers';
+import { TimelineData } from 'types/course/referenceTimelines';
 
 import BaseCourseAPI from './Base';
 
@@ -44,6 +45,7 @@ export default class UsersAPI extends BaseCourseAPI {
       users: CourseUserListData[];
       permissions: ManageCourseUsersPermissions;
       manageCourseUsersData: ManageCourseUsersSharedData;
+      timelines?: Record<TimelineData['id'], string>;
     }>
   > {
     return this.getClient().get(`${this._baseUrlPrefix}/students`);
@@ -133,4 +135,16 @@ export default class UsersAPI extends BaseCourseAPI {
       params,
     );
   }
+
+  assignToTimeline(
+    ids: CourseUserBasicMiniEntity['id'][],
+    timelineId: TimelineData['id'],
+  ): Promise<AxiosResponse> {
+    const params = { course_users: { ids, reference_timeline_id: timelineId } };
+
+    return this.getClient().patch(
+      `${this._baseUrlPrefix}/users/assign_timeline`,
+      params,
+    );
+  }
 }

client/app/api/course/index.js

@@ -20,6 +20,7 @@ import LevelAPI from './Level';
 import MaterialFoldersAPI from './MaterialFolders';
 import MaterialsAPI from './Materials';
 import PersonalTimesAPI from './PersonalTimes';
+import ReferenceTimelinesAPI from './ReferenceTimelines';
 import StatisticsAPI from './Statistics';
 import SurveyAPI from './Survey';
 import UserEmailSubscriptionsAPI from './UserEmailSubscriptions';
@@ -51,6 +52,7 @@ const CourseAPI = {
   materials: new MaterialsAPI(),
   materialFolders: new MaterialFoldersAPI(),
   personalTimes: new PersonalTimesAPI(),
+  referenceTimelines: new ReferenceTimelinesAPI(),
   statistics: StatisticsAPI,
   submissions: new SubmissionsAPI(),
   survey: SurveyAPI,

client/app/bundles/announcements/operations.ts

@@ -5,7 +5,7 @@ import GlobalAnnouncementsAPI from 'api/Announcements';
 
 import * as actions from './actions';
 
-export function indexAnnouncements(): Operation<void> {
+export function indexAnnouncements(): Operation {
   return async (dispatch) =>
     GlobalAnnouncementsAPI.announcements.index().then((response) => {
       const data = response.data;

client/app/bundles/course/achievement/operations.ts

@@ -29,7 +29,7 @@ const formatAttributes = (data: AchievementFormData): FormData => {
   return payload;
 };
 
-export function fetchAchievements(): Operation<void> {
+export function fetchAchievements(): Operation {
   return async (dispatch) =>
     CourseAPI.achievements.index().then((response) => {
       const data = response.data;
@@ -51,9 +51,7 @@ export function loadAchievement(
       );
 }
 
-export function loadAchievementCourseUsers(
-  achievementId: number,
-): Operation<void> {
+export function loadAchievementCourseUsers(achievementId: number): Operation {
   return async (dispatch) =>
     CourseAPI.achievements
       .fetchAchievementCourseUsers(achievementId)
@@ -84,7 +82,7 @@ export function updateAchievement(
   return async () => CourseAPI.achievements.update(achievementId, attributes);
 }
 
-export function deleteAchievement(achievementId: number): Operation<void> {
+export function deleteAchievement(achievementId: number): Operation {
   return async (dispatch) =>
     CourseAPI.achievements.delete(achievementId).then(() => {
       dispatch(actions.deleteAchievement(achievementId));
@@ -94,7 +92,7 @@ export function deleteAchievement(achievementId: number): Operation<void> {
 export function awardAchievement(
   achievementId: number,
   data: number[],
-): Operation<void> {
+): Operation {
   const attributes = { achievement: { course_user_ids: data } };
   return async (dispatch) =>
     CourseAPI.achievements
@@ -107,7 +105,7 @@ export function awardAchievement(
 export function updatePublishedAchievement(
   achievementId: number,
   data: boolean,
-): Operation<void> {
+): Operation {
   const attributes = { achievement: { published: data } };
   return async (dispatch) =>
     CourseAPI.achievements

client/app/bundles/course/admin/pages/CourseSettings/CourseSettingsForm.tsx

@@ -169,6 +169,7 @@ const CourseSettingsForm = (props: CourseSettingsFormProps): JSX.Element => {
                       field={field}
                       fieldState={fieldState}
                       label={t(translations.startsAt)}
+                      required
                       variant="filled"
                     />
                   )}

client/app/bundles/course/admin/pages/CourseSettings/translations.ts

@@ -53,7 +53,7 @@ export default defineMessages({
   },
   startsAt: {
     id: 'course.admin.CourseSettings.startsAt',
-    defaultMessage: 'Starts as',
+    defaultMessage: 'Starts at',
   },
   endsAt: {
     id: 'course.admin.CourseSettings.endsAt',

client/app/bundles/course/announcements/components/misc/AnnouncementCard.tsx

@@ -26,8 +26,8 @@ interface Props extends WrappedComponentProps {
   updateOperation?: (
     announcementId: number,
     formData: AnnouncementFormData,
-  ) => Operation<void>;
-  deleteOperation?: (announcementId: number) => Operation<void>;
+  ) => Operation;
+  deleteOperation?: (announcementId: number) => Operation;
   canSticky?: boolean;
 }
 

client/app/bundles/course/announcements/components/misc/AnnouncementsDisplay.tsx

@@ -9,7 +9,7 @@ import {
 } from 'types/course/announcements';
 import { Operation } from 'types/store';
 
-import SearchBar from 'lib/components/core/fields/SearchBar';
+import SearchField from 'lib/components/core/fields/SearchField';
 import Pagination from 'lib/components/core/layouts/Pagination';
 
 import AnnouncementCard from './AnnouncementCard';
@@ -20,8 +20,8 @@ interface Props extends WrappedComponentProps {
   updateOperation?: (
     announcementId: number,
     formData: AnnouncementFormData,
-  ) => Operation<void>;
-  deleteOperation?: (announcementId: number) => Operation<void>;
+  ) => Operation;
+  deleteOperation?: (announcementId: number) => Operation;
   canSticky?: boolean;
 }
 
@@ -56,21 +56,17 @@ const AnnouncementsDisplay: FC<Props> = (props) => {
     setShavedAnnouncements(announcements);
   }, [announcements]);
 
-  const handleSearchBarChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ): void => {
-    if (event.target.value.trim() === '') {
+  const handleSearchBarChange = (rawKeyword: string): void => {
+    const keyword = rawKeyword.trim();
+
+    if (keyword === '') {
       setShavedAnnouncements(announcements);
     } else {
       setShavedAnnouncements(
         announcements.filter(
           (announcement: AnnouncementMiniEntity) =>
-            announcement.title
-              .toLowerCase()
-              .includes(event.target.value.trim().toLowerCase()) ||
-            announcement.content
-              .toLowerCase()
-              .includes(event.target.value.trim().toLowerCase()),
+            announcement.title.toLowerCase().includes(keyword.toLowerCase()) ||
+            announcement.content.toLowerCase().includes(keyword.toLowerCase()),
         ),
       );
     }
@@ -88,12 +84,12 @@ const AnnouncementsDisplay: FC<Props> = (props) => {
           xs={1}
         >
           <div style={{ paddingTop: 7, paddingBottom: 5 }}>
-            <SearchBar
-              onChange={handleSearchBarChange}
+            <SearchField
+              className="w-[350px]"
+              onChangeKeyword={handleSearchBarChange}
               placeholder={intl.formatMessage(
                 translations.searchBarPlaceholder,
               )}
-              width={350}
             />
           </div>
         </Grid>

client/app/bundles/course/announcements/operations.ts

@@ -29,7 +29,7 @@ const formatAttributes = (data: AnnouncementFormData): FormData => {
   return payload;
 };
 
-export function fetchAnnouncements(): Operation<void> {
+export function fetchAnnouncements(): Operation {
   return async (dispatch) =>
     CourseAPI.announcements.index().then((response) => {
       const data = response.data;
@@ -39,9 +39,7 @@ export function fetchAnnouncements(): Operation<void> {
     });
 }
 
-export function createAnnouncement(
-  formData: AnnouncementFormData,
-): Operation<void> {
+export function createAnnouncement(formData: AnnouncementFormData): Operation {
   const attributes = formatAttributes(formData);
   return async (dispatch) =>
     CourseAPI.announcements.create(attributes).then((response) => {
@@ -55,7 +53,7 @@ export function createAnnouncement(
 export function updateAnnouncement(
   announcementId: number,
   formData: AnnouncementFormData,
-): Operation<void> {
+): Operation {
   const attributes = formatAttributes(formData);
   return async (dispatch) =>
     CourseAPI.announcements
@@ -65,7 +63,7 @@ export function updateAnnouncement(
       });
 }
 
-export function deleteAnnouncement(accouncementId: number): Operation<void> {
+export function deleteAnnouncement(accouncementId: number): Operation {
   return async (dispatch) =>
     CourseAPI.announcements.delete(accouncementId).then(() => {
       dispatch(actions.deleteAnnouncement(accouncementId));

client/app/bundles/course/announcements/pages/AnnouncementEdit/index.tsx

@@ -24,7 +24,7 @@ interface Props {
   updateOperation: (
     announcementId: number,
     formData: AnnouncementFormData,
-  ) => Operation<void>;
+  ) => Operation;
   canSticky: boolean;
 }
 

client/app/bundles/course/announcements/pages/AnnouncementNew/index.tsx

@@ -13,7 +13,7 @@ import AnnouncementForm from '../../components/forms/AnnouncementForm';
 interface Props {
   open: boolean;
   onClose: () => void;
-  createOperation: (formData: AnnouncementFormData) => Operation<void>;
+  createOperation: (formData: AnnouncementFormData) => Operation;
   canSticky?: boolean;
 }
 

client/app/bundles/course/assessment/components/AssessmentForm/index.tsx

@@ -214,6 +214,7 @@ const AssessmentForm = (props: AssessmentFormProps): JSX.Element => {
                   field={field}
                   fieldState={fieldState}
                   label={intl.formatMessage(t.startAt)}
+                  required
                   variant="filled"
                 />
               )}

client/app/bundles/course/assessment/components/AssessmentForm/translations.intl.js

@@ -11,7 +11,7 @@ const translations = defineMessages({
   },
   startAt: {
     id: 'course.assessment.AssessmentForm.startAt',
-    defaultMessage: 'Starts at *',
+    defaultMessage: 'Starts at',
   },
   endAt: {
     id: 'course.assessment.AssessmentForm.endAt',