Achievement UI update

jonas-chow · chownces · commit b63ff09a1702 · 2021-08-04T05:00:18.000+08:00
diff --git a/src/commons/achievement/AchievementManualEditor.tsx b/src/commons/achievement/AchievementManualEditor.tsx
@@ -1,5 +1,5 @@
-import { Button, MenuItem, NumericInput } from '@blueprintjs/core';
-import { ItemRenderer, Select } from '@blueprintjs/select';
+import { Button, Checkbox, MenuItem, NumericInput } from '@blueprintjs/core';
+import { ItemPredicate, ItemRenderer, Select } from '@blueprintjs/select';
 import { useContext, useEffect, useState } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
 import {
@@ -8,7 +8,11 @@ import {
   GoalProgress
 } from 'src/features/achievement/AchievementTypes';
 
+import { showSuccessMessage, showWarningMessage } from '../utils/NotificationsHelper';
+
 type AchievementManualEditorProps = {
+  hiddenState: [boolean, any];
+  userState: [AchievementUser | undefined, any];
   studio: string;
   users: AchievementUser[];
   getUsers: () => void;
@@ -19,9 +23,22 @@ const GoalSelect = Select.ofType<AchievementGoal>();
 const goalRenderer: ItemRenderer<AchievementGoal> = (goal, { handleClick }) => (
   <MenuItem key={goal.uuid} onClick={handleClick} text={goal.text} />
 );
+const goalPredicate: ItemPredicate<AchievementGoal> = (query, item) =>
+  item.text.toLowerCase().includes(query.toLowerCase());
+
+const UserSelect = Select.ofType<AchievementUser>();
+const userRenderer: ItemRenderer<AchievementUser> = (user, { handleClick }) => (
+  <MenuItem key={user.courseRegId} onClick={handleClick} text={user.name} />
+);
+const userPredicate: ItemPredicate<AchievementUser> = (query, item) =>
+  item.name.toLowerCase().includes(query.toLowerCase());
+
+export function updateGoalProcessed() {
+  showSuccessMessage('Goal updated');
+}
 
 function AchievementManualEditor(props: AchievementManualEditorProps) {
-  const { studio, getUsers, updateGoalProgress } = props;
+  const { userState, hiddenState, studio, getUsers, updateGoalProgress } = props;
   const users =
     studio === 'Staff'
       ? // The name can be null for users who have yet to log in. We push these to the back of the array.
@@ -39,35 +56,36 @@ function AchievementManualEditor(props: AchievementManualEditorProps) {
     .getAllGoals()
     .filter(goals => goals.meta.type === 'Manual');
 
-  const [goal, changeGoal] = useState(manualAchievements[0]);
-  const [selectedUser, changeSelectedUser] = useState(users[0]);
-  const [count, changeCount] = useState(0);
-
-  const UserSelect = Select.ofType<AchievementUser>();
-  const userRenderer: ItemRenderer<AchievementUser> = (user, { handleClick }) => (
-    <MenuItem key={user.courseRegId} onClick={handleClick} text={user.name} />
-  );
+  const [goal, changeGoal] = useState<AchievementGoal | undefined>(undefined);
+  const [selectedUser, changeSelectedUser] = userState;
+  const [count, changeCount] = useState<number>(0);
+  const [viewHidden, changeViewHidden] = hiddenState;
 
   const updateGoal = () => {
-    if (goal) {
+    if (goal && selectedUser) {
       const progress: GoalProgress = {
         uuid: goal.uuid,
-        count: count,
+        count: count < 0 ? 0 : Math.floor(count),
         targetCount: goal.targetCount,
         completed: count >= goal.targetCount
       };
       updateGoalProgress(selectedUser.courseRegId, progress);
+    } else {
+      !goal && showWarningMessage('Goal not selected');
+      !selectedUser && showWarningMessage('User not selected');
     }
   };
 
   return (
     <div className="achievement-manual-editor">
       <h3>User: </h3>
       <UserSelect
-        filterable={false}
+        filterable={true}
         items={users}
         itemRenderer={userRenderer}
+        itemPredicate={userPredicate}
         onItemSelect={changeSelectedUser}
+        noResults={<MenuItem disabled={true} text="No matching user" />}
       >
         <Button
           outlined={true}
@@ -78,10 +96,12 @@ function AchievementManualEditor(props: AchievementManualEditorProps) {
 
       <h3>Goal: </h3>
       <GoalSelect
-        filterable={false}
+        filterable={true}
         items={manualAchievements}
         itemRenderer={goalRenderer}
+        itemPredicate={goalPredicate}
         onItemSelect={changeGoal}
+        noResults={<MenuItem disabled={true} text="No matching goal" />}
       >
         <Button outlined={true} text={goal ? goal.text : 'No Goal Selected'} color="White" />
       </GoalSelect>
@@ -91,12 +111,20 @@ function AchievementManualEditor(props: AchievementManualEditorProps) {
         value={count}
         min={0}
         allowNumericCharactersOnly={true}
+        minorStepSize={null}
         placeholder="Count"
         onValueChange={changeCount}
       />
 
       <h3> </h3>
       <Button outlined={true} text="Update Goal" onClick={updateGoal} intent="primary" />
+
+      <h3> </h3>
+      <Checkbox
+        checked={viewHidden}
+        label="View Hidden Achievements"
+        onChange={() => changeViewHidden(!viewHidden)}
+      />
     </div>
   );
 }
diff --git a/src/commons/achievement/AchievementView.tsx b/src/commons/achievement/AchievementView.tsx
@@ -44,7 +44,8 @@ function AchievementView(props: AchievementViewProps) {
       <div
         className="cover"
         style={{
-          background: `url(${coverImage}) center/cover`
+          background: `rgba(0, 0, 0, 0.5) url(${coverImage}) center/cover`,
+          backgroundBlendMode: `darken`
         }}
       >
         <h1>{title.toUpperCase()}</h1>
diff --git a/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx b/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, EditableText } from '@blueprintjs/core';
+import { Button, Checkbox, Dialog, EditableText } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import { useState } from 'react';
@@ -58,9 +58,13 @@ function AchievementSettings(props: AchievementSettingsProps) {
           />
           <h3>Goals</h3>
           <EditableGoalUuids changeGoalUuids={changeGoalUuids} goalUuids={goalUuids} />
-          <Tooltip2 content="The rewarded XP will be equal to the sum of 'count' of goals">
-            <Button text={'Variable XP?'} active={isVariableXp} onClick={changeIsVariableXp} />
-          </Tooltip2>
+
+          <h3>Variable XP</h3>
+          <Checkbox
+            label={"The rewarded XP will be equal to the sum of 'count' of goals"}
+            checked={isVariableXp}
+            onChange={changeIsVariableXp}
+          />
         </div>
       </Dialog>
     </>
diff --git a/src/commons/achievement/control/achievementEditor/achievementSettings/EditableGoalUuids.tsx b/src/commons/achievement/control/achievementEditor/achievementSettings/EditableGoalUuids.tsx
@@ -1,8 +1,9 @@
 import { MenuItem } from '@blueprintjs/core';
-import { ItemRenderer, MultiSelect } from '@blueprintjs/select';
+import { ItemPredicate, ItemRenderer, MultiSelect } from '@blueprintjs/select';
 import { without } from 'lodash';
 import { useContext } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
+import { AchievementGoal } from 'src/features/achievement/AchievementTypes';
 
 type EditableGoalUuidsProps = {
   changeGoalUuids: (goalUuids: string[]) => void;
@@ -19,12 +20,13 @@ function EditableGoalUuids(props: EditableGoalUuidsProps) {
   );
 
   const getUuid = (text: string) => inferencer.getUuidByText(text);
-  const getText = (uuid: string) => inferencer.getTextByUuid(uuid);
 
-  const GoalSelect = MultiSelect.ofType<string>();
-  const goalRenderer: ItemRenderer<string> = (uuid, { handleClick }) => (
-    <MenuItem key={uuid} onClick={handleClick} text={getText(uuid)} />
+  const GoalSelect = MultiSelect.ofType<AchievementGoal>();
+  const goalRenderer: ItemRenderer<AchievementGoal> = (goal, { handleClick }) => (
+    <MenuItem key={goal.uuid} onClick={handleClick} text={goal.text} />
   );
+  const goalPredicate: ItemPredicate<AchievementGoal> = (query, item) =>
+    item.text.toLowerCase().includes(query.toLowerCase());
 
   const selectedGoals = new Set(selectedUuids);
   const availableGoals = new Set(without(allGoalUuids, ...goalUuids));
@@ -36,22 +38,24 @@ function EditableGoalUuids(props: EditableGoalUuidsProps) {
   };
 
   const removeGoal = (removeUuid?: string) => {
-    if (removeUuid === undefined) return;
+    if (removeGoal === undefined) return;
 
-    selectedGoals.delete(removeUuid);
-    availableGoals.add(removeUuid);
+    selectedGoals.delete(removeUuid!);
+    availableGoals.add(removeUuid!);
     changeGoalUuids([...selectedGoals]);
   };
 
   return (
     <GoalSelect
       itemRenderer={goalRenderer}
-      items={[...availableGoals]}
+      items={[...availableGoals].map(uuid => inferencer.getGoal(uuid))}
       noResults={<MenuItem disabled={true} text="No available goal" />}
-      onItemSelect={selectGoal}
-      selectedItems={[...selectedGoals]}
+      onItemSelect={goal => selectGoal(goal.uuid)}
+      selectedItems={[...selectedGoals].map(uuid => inferencer.getGoal(uuid))}
       tagInputProps={{ onRemove: text => removeGoal(getUuid(text!.toString())) }}
-      tagRenderer={getText}
+      tagRenderer={goal => goal.text}
+      itemPredicate={goalPredicate}
+      resetOnSelect={true}
     />
   );
 }
diff --git a/src/commons/achievement/control/achievementEditor/achievementSettings/EditablePrerequisiteUuids.tsx b/src/commons/achievement/control/achievementEditor/achievementSettings/EditablePrerequisiteUuids.tsx
@@ -1,7 +1,9 @@
 import { MenuItem } from '@blueprintjs/core';
-import { ItemRenderer, MultiSelect } from '@blueprintjs/select';
+import { ItemPredicate, ItemRenderer, MultiSelect } from '@blueprintjs/select';
+import { without } from 'lodash';
 import { useContext } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
+import { AchievementItem } from 'src/features/achievement/AchievementTypes';
 
 type EditablePrerequisiteUuidsProps = {
   changePrerequisiteUuids: (prerequisiteUuids: string[]) => void;
@@ -19,15 +21,16 @@ function EditablePrerequisiteUuids(props: EditablePrerequisiteUuidsProps) {
   );
 
   const getUuid = (title: string) => inferencer.getUuidByTitle(title);
-  const getTitle = (uuid: string) => inferencer.getTitleByUuid(uuid);
 
-  const PrerequisiteSelect = MultiSelect.ofType<string>();
-  const prerequisiteRenderer: ItemRenderer<string> = (uuid, { handleClick }) => (
-    <MenuItem key={uuid} onClick={handleClick} text={getTitle(uuid)} />
+  const PrerequisiteSelect = MultiSelect.ofType<AchievementItem>();
+  const prerequisiteRenderer: ItemRenderer<AchievementItem> = (achievement, { handleClick }) => (
+    <MenuItem key={achievement.uuid} onClick={handleClick} text={achievement.title} />
   );
+  const prerequisitePredicate: ItemPredicate<AchievementItem> = (query, item) =>
+    item.title.toLowerCase().includes(query.toLowerCase());
 
   const selectedPrereqs = new Set(selectedUuids);
-  const availablePrereqs = new Set(availableUuids);
+  const availablePrereqs = new Set(without(availableUuids, ...selectedUuids));
 
   const selectPrereq = (selectUuid: string) => {
     selectedPrereqs.add(selectUuid);
@@ -46,12 +49,14 @@ function EditablePrerequisiteUuids(props: EditablePrerequisiteUuidsProps) {
   return (
     <PrerequisiteSelect
       itemRenderer={prerequisiteRenderer}
-      items={[...availablePrereqs]}
+      items={[...availablePrereqs].map(uuid => inferencer.getAchievement(uuid))}
       noResults={<MenuItem disabled={true} text="No available achievement" />}
-      onItemSelect={selectPrereq}
-      selectedItems={[...selectedPrereqs]}
+      onItemSelect={achievement => selectPrereq(achievement.uuid)}
+      selectedItems={[...selectedPrereqs].map(uuid => inferencer.getAchievement(uuid))}
       tagInputProps={{ onRemove: title => removePrereq(getUuid(title!.toString())) }}
-      tagRenderer={getTitle}
+      tagRenderer={achievement => achievement.title}
+      itemPredicate={prerequisitePredicate}
+      resetOnSelect={true}
     />
   );
 }
diff --git a/src/commons/achievement/utils/AchievementInferencer.ts b/src/commons/achievement/utils/AchievementInferencer.ts
@@ -495,6 +495,15 @@ class AchievementInferencer {
       .map(sortedTask => sortedTask.uuid);
   }
 
+  /**
+   * Returns an array of achievementId sorted by position
+   */
+  public listAllSortedAchievementUuids() {
+    return this.getAllAchievements()
+      .sort((taskA, taskB) => taskA.position - taskB.position)
+      .map(sortedTask => sortedTask.uuid);
+  }
+
   /**
    * Returns whether an achievement is completed or not.
    *
diff --git a/src/commons/achievement/utils/InsertFakeAchievements.ts b/src/commons/achievement/utils/InsertFakeAchievements.ts
@@ -1,7 +1,4 @@
-import {
-  cardBackgroundUrl,
-  coverImageUrl
-} from '../../../features/achievement/AchievementConstants';
+import { cardBackgroundUrl } from '../../../features/achievement/AchievementConstants';
 import { AchievementAbility, GoalType } from '../../../features/achievement/AchievementTypes';
 import { AssessmentOverview } from '../../assessment/AssessmentTypes';
 import AchievementInferencer from './AchievementInferencer';
@@ -69,7 +66,7 @@ function insertFakeAchievements(
       goalUuids: [idString + '0', idString + '1'], // need to create a mock completed goal to reference to be considered complete
       cardBackground: `${cardBackgroundUrl}/default.png`,
       view: {
-        coverImage: `${coverImageUrl}/default.png`,
+        coverImage: assessmentOverview.coverImage,
         description: assessmentOverview.shortSummary,
         completionText: `XP: ${assessmentOverview.xp} / ${assessmentOverview.maxXp}`
       }
diff --git a/src/commons/sagas/AchievementSaga.ts b/src/commons/sagas/AchievementSaga.ts
@@ -17,6 +17,7 @@ import {
   UPDATE_GOAL_PROGRESS,
   UPDATE_OWN_GOAL_PROGRESS
 } from '../../features/achievement/AchievementTypes';
+import { updateGoalProcessed } from '../achievement/AchievementManualEditor';
 import AchievementInferencer from '../achievement/utils/AchievementInferencer';
 import { goalIncludesEvents, incrementCount } from '../achievement/utils/EventHandler';
 import { OverallState } from '../application/ApplicationTypes';
@@ -88,9 +89,9 @@ export default function* AchievementSaga(): SagaIterator {
   yield takeEvery(GET_GOALS, function* (action: ReturnType<typeof actions.getGoals>): any {
     const tokens: Tokens = yield selectTokens();
 
-    const studentId = action.payload;
+    const studentCourseRegId = action.payload;
 
-    const goals = yield call(getGoals, tokens, studentId);
+    const goals = yield call(getGoals, tokens, studentCourseRegId);
 
     if (goals) {
       yield put(actions.saveGoals(goals));
@@ -171,6 +172,10 @@ export default function* AchievementSaga(): SagaIterator {
       if (!resp) {
         return;
       }
+      if (resp.ok) {
+        yield put(actions.getGoals(studentCourseRegId));
+        updateGoalProcessed();
+      }
     }
   );
 
diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
@@ -247,7 +247,7 @@ export const getGoals = async (
   tokens: Tokens,
   studentId: number
 ): Promise<AchievementGoal[] | null> => {
-  const resp = await request(`${courseId()}/achievements/goals/${studentId}`, 'GET', {
+  const resp = await request(`${courseId()}/admin/goals/${studentId}`, 'GET', {
     ...tokens,
     shouldRefresh: true
   });
diff --git a/src/features/achievement/AchievementActions.ts b/src/features/achievement/AchievementActions.ts
@@ -31,7 +31,7 @@ export const bulkUpdateGoals = (goals: GoalDefinition[]) => action(BULK_UPDATE_G
 
 export const getAchievements = () => action(GET_ACHIEVEMENTS);
 
-export const getGoals = (studentId: number) => action(GET_GOALS, studentId);
+export const getGoals = (studentCourseRegId: number) => action(GET_GOALS, studentCourseRegId);
 
 export const getOwnGoals = () => action(GET_OWN_GOALS);
 
diff --git a/src/pages/achievement/subcomponents/AchievementDashboard.tsx b/src/pages/achievement/subcomponents/AchievementDashboard.tsx
diff --git a/src/pages/achievement/subcomponents/AchievementDashboardContainer.ts b/src/pages/achievement/subcomponents/AchievementDashboardContainer.ts
