keyword search for quantifiers & Quantify multiple praise

packages/api/src/praise/controllers.ts

@@ -31,6 +31,7 @@ import {
   PraiseDocument,
   PraiseDto,
   QuantificationCreateUpdateInput,
+  QuantifyMultiplePraiseInput,
 } from './types';
 import { praiseWithScore, getPraisePeriod } from './utils/core';
 
@@ -201,3 +202,49 @@ export const quantify = async (
   const response = await praiseDocumentListTransformer(affectedPraises);
   res.status(200).json(response);
 };
+
+export const quantifyMultiple = async (
+  req: TypedRequestBody<QuantifyMultiplePraiseInput>,
+  res: TypedResponse<PraiseDto[]>
+): Promise<void> => {
+  const { score, praiseIds } = req.body;
+
+  const affectedPraises = await Promise.all(
+    praiseIds.map(async (id) => {
+      const praise = await PraiseModel.findById(id).populate(
+        'giver receiver forwarder'
+      );
+
+      if (!praise) throw new NotFoundError('Praise');
+
+      const period = await getPraisePeriod(praise);
+
+      if (!period)
+        throw new BadRequestError('Praise does not have an associated period');
+
+      if (!res.locals.currentUser?._id) {
+        throw new InternalServerError('Current user not found.');
+      }
+
+      const quantification = praise.quantifications.find((q) =>
+        q.quantifier.equals(res.locals.currentUser._id)
+      );
+
+      if (!quantification)
+        throw new BadRequestError(
+          'User not assigned as quantifier for praise.'
+        );
+
+      quantification.score = score;
+      quantification.dismissed = false;
+      quantification.duplicatePraise = undefined;
+
+      await praise.save();
+
+      return praise;
+    })
+  );
+
+  const response = await praiseDocumentListTransformer(affectedPraises);
+  res.status(200).json(response);
+};

packages/api/src/praise/routes.ts

@@ -12,5 +12,10 @@ praiseRouter.patchAsync(
   authMiddleware(UserRole.QUANTIFIER),
   controller.quantify
 );
+praiseRouter.patchAsync(
+  '/quantify',
+  authMiddleware(UserRole.QUANTIFIER),
+  controller.quantifyMultiple
+);
 
 export { praiseRouter };

packages/api/src/praise/types.ts

@@ -75,6 +75,11 @@ export interface QuantificationCreateUpdateInput {
   duplicatePraise: string;
 }
 
+export interface QuantifyMultiplePraiseInput {
+  score: number;
+  praiseIds: string[];
+}
+
 export interface Receiver {
   _id: string;
   praiseCount: number;

packages/frontend/src/components/form/SearchInput.tsx

@@ -3,15 +3,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface SearchInputProps {
   handleChange: (element) => void;
-  value: string;
+  value?: string;
+  placeholder?: string;
 }
 
 const SearchInput = ({
   handleChange,
   value,
+  placeholder = 'Search',
 }: SearchInputProps): JSX.Element => {
   return (
-    <div className="relative flex items-center border border-warm-gray-400 h-[42px]">
+    <div className="relative flex items-center border border-warm-gray-400">
       <div className="absolute inset-y-0 left-0 flex items-center pl-3">
         <span className="text-warm-gray-800 dark:text-white">
           <FontAwesomeIcon
@@ -25,7 +27,7 @@ const SearchInput = ({
         className="block pl-8 bg-transparent border-none outline-none focus:ring-0"
         name="search"
         type="text"
-        placeholder="Search"
+        placeholder={placeholder}
         value={value}
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
           handleChange(e.target.value)

packages/frontend/src/model/periods.ts

@@ -702,7 +702,9 @@ export const PeriodQuantifierReceiverPraise = selectorFamily({
       const userId = get(ActiveUserId);
       const listKey = periodQuantifierPraiseListKey(periodId);
       const praiseList = get(AllPraiseList(listKey));
+
       if (!praiseList) return undefined;
+
       return praiseList.filter(
         (praise) =>
           praise &&

packages/frontend/src/model/praise.ts

@@ -264,6 +264,7 @@ type useQuantifyPraiseReturn = {
     duplicatePraise: string | null
   ) => Promise<void>;
 };
+
 /**
  * Hook that returns a function to use for closing a period
  */
@@ -296,3 +297,30 @@ export const useQuantifyPraise = (): useQuantifyPraiseReturn => {
   );
   return { quantify };
 };
+
+type useQuantifyMultiplePraiseReturn = {
+  quantifyMultiple: (score: number, praiseIds: string[]) => Promise<void>;
+};
+
+export const useQuantifyMultiplePraise =
+  (): useQuantifyMultiplePraiseReturn => {
+    const apiAuthClient = makeApiAuthClient();
+
+    const quantifyMultiple = useRecoilCallback(
+      ({ set }) =>
+        async (score: number, praiseIds: string[]): Promise<void> => {
+          const response: AxiosResponse<PraiseDto[]> =
+            await apiAuthClient.patch('/praise/quantify', {
+              score,
+              praiseIds,
+            });
+
+          const praises = response.data;
+
+          praises.forEach((praise) => {
+            set(SinglePraise(praise._id), praise);
+          });
+        }
+    );
+    return { quantifyMultiple };
+  };

packages/frontend/src/pages/EventLogs/EventLogsPage.tsx

@@ -109,7 +109,7 @@ const EventLogsPage = (): JSX.Element => {
           </div>
 
           {/* Search */}
-          <div className="w-5/12 mt-5 mb-5 mr-4">
+          <div className="w-5/12 mt-5 mb-5 mr-4 h-[42px]">
             <SearchInput
               handleChange={(e): void => {
                 setSearchValue(e);
@@ -120,7 +120,7 @@ const EventLogsPage = (): JSX.Element => {
           </div>
 
           {/* Sort */}
-          <div className="w-2/12 mt-5 mb-5 ml-auto mr-5">
+          <div className="w-2/12 mt-5 mb-5 ml-auto mr-5 h-[42px]">
             <SelectInput
               handleChange={(e): void => {
                 setSelectedSort(e);

packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx

@@ -0,0 +1,29 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPrayingHands } from '@fortawesome/free-solid-svg-icons';
+
+interface Props {
+  disabled?: boolean;
+  onClick();
+}
+
+const QuantifyMultipleButton = ({
+  disabled = false,
+  onClick,
+}: Props): JSX.Element => {
+  return (
+    <button
+      disabled={disabled}
+      className={
+        disabled
+          ? 'praise-button-disabled space-x-2'
+          : 'praise-button space-x-2'
+      }
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon={faPrayingHands} size="1x" />
+      <span>Quantify</span>
+    </button>
+  );
+};
+
+export default QuantifyMultipleButton;

packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx

@@ -0,0 +1,63 @@
+import ScrollableDialog from '@/components/ScrollableDialog';
+import QuantifyMultipleButton from '@/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton';
+import QuantifySlider from '@/pages/QuantifyPeriodReceiver/components/QuantifySlider';
+import { faCalculator, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { PraiseDto } from 'api/dist/praise/types';
+import { useState } from 'react';
+
+interface QuantifyMultipleDialogProps {
+  open: boolean;
+  onClose(): void;
+  selectedPraises: PraiseDto[];
+  allowedValues: number[];
+  onSetScore(newScore: number, selectedPraises: PraiseDto[]);
+}
+
+const QuantifyMultipleDialog = ({
+  open = false,
+  onClose,
+  selectedPraises,
+  allowedValues,
+  onSetScore,
+}: QuantifyMultipleDialogProps): JSX.Element | null => {
+  const [score, setScore] = useState<number>(0);
+
+  return (
+    <ScrollableDialog open={open} onClose={onClose}>
+      <div className="w-full h-full">
+        <div className="flex justify-end p-6">
+          <button className="praise-button-round" onClick={onClose}>
+            <FontAwesomeIcon icon={faTimes} size="1x" />
+          </button>
+        </div>
+        <div className="px-20 space-y-6">
+          <div className="flex justify-center">
+            <FontAwesomeIcon icon={faCalculator} size="2x" />
+          </div>
+          <h2 className="text-center">
+            Quantify selected ({selectedPraises.length}) praises
+          </h2>
+
+          <div className="text-center">
+            <QuantifySlider
+              allowedScores={allowedValues}
+              onChange={(newScore): void => setScore(newScore)}
+            />
+          </div>
+
+          <div className="flex justify-center">
+            <QuantifyMultipleButton
+              onClick={(): void => {
+                onSetScore(score, selectedPraises);
+                onClose();
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </ScrollableDialog>
+  );
+};
+
+export default QuantifyMultipleDialog;