From 937b6486e5177543952d2c24f27ac9357a055342 Mon Sep 17 00:00:00 2001
From: Nebojsa Stojanovic <nebojsa.stojanovic0@gmail.com>
Date: Thu, 23 Jun 2022 17:22:08 +0200
Subject: [PATCH 1/8] Added option to quantify multiple praises at once

---
 packages/api/src/praise/controllers.ts        |  48 +++++++
 packages/api/src/praise/routes.ts             |   5 +
 packages/api/src/praise/types.ts              |   5 +
 .../src/components/form/SearchInput.tsx       |   8 +-
 packages/frontend/src/model/periods.ts        |   2 +
 packages/frontend/src/model/praise.ts         |  28 +++++
 .../src/pages/EventLogs/EventLogsPage.tsx     |   4 +-
 .../components/PraiseMultipleButton.tsx       |  29 +++++
 .../components/PraiseMultipleDialog.tsx       |  63 ++++++++++
 .../components/QuantifyTable.tsx              | 119 ++++++++++++++++--
 10 files changed, 295 insertions(+), 16 deletions(-)
 create mode 100644 packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton.tsx
 create mode 100644 packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog.tsx

diff --git a/packages/api/src/praise/controllers.ts b/packages/api/src/praise/controllers.ts
index ace1ff460..58f376026 100644
--- a/packages/api/src/praise/controllers.ts
+++ b/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,50 @@ 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);
+  console.log('RESPONSE:', response);
+  res.status(200).json(response);
+};
diff --git a/packages/api/src/praise/routes.ts b/packages/api/src/praise/routes.ts
index 9280a2e60..c6eb71c55 100644
--- a/packages/api/src/praise/routes.ts
+++ b/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 };
diff --git a/packages/api/src/praise/types.ts b/packages/api/src/praise/types.ts
index 7c4e62afd..7c0aee6df 100644
--- a/packages/api/src/praise/types.ts
+++ b/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;
diff --git a/packages/frontend/src/components/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx
index 5ce9b7ec3..9f61847e1 100644
--- a/packages/frontend/src/components/form/SearchInput.tsx
+++ b/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)
diff --git a/packages/frontend/src/model/periods.ts b/packages/frontend/src/model/periods.ts
index b9a7bb9d4..73b548be6 100644
--- a/packages/frontend/src/model/periods.ts
+++ b/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 &&
diff --git a/packages/frontend/src/model/praise.ts b/packages/frontend/src/model/praise.ts
index 9df6b22f1..93be48983 100644
--- a/packages/frontend/src/model/praise.ts
+++ b/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 };
+  };
diff --git a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx b/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
index a3757045d..4d3a6919a 100644
--- a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
+++ b/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);
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton.tsx
new file mode 100644
index 000000000..6e2bc81c2
--- /dev/null
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton.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 PraiseMultipleButton = ({
+  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>Praise</span>
+    </button>
+  );
+};
+
+export default PraiseMultipleButton;
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog.tsx
new file mode 100644
index 000000000..0e177b8fd
--- /dev/null
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog.tsx
@@ -0,0 +1,63 @@
+import ScrollableDialog from '@/components/ScrollableDialog';
+import PraiseMultipleButton from '@/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton';
+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 PraiseMultipleDialogProps {
+  open: boolean;
+  onClose(): void;
+  selectedPraises: PraiseDto[];
+  allowedValues: number[];
+  onSetScore(newScore: number, selectedPraises: PraiseDto[]);
+}
+
+const PraiseMultipleDialog = ({
+  open = false,
+  onClose,
+  selectedPraises,
+  allowedValues,
+  onSetScore,
+}: PraiseMultipleDialogProps): 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">
+            <PraiseMultipleButton
+              onClick={(): void => {
+                onSetScore(score, selectedPraises);
+                onClose();
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </ScrollableDialog>
+  );
+};
+
+export default PraiseMultipleDialog;
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
index 9cd49296b..cf5f391ac 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
@@ -1,6 +1,6 @@
 import { PraiseDto } from 'api/dist/praise/types';
 import { PeriodQuantifierReceiverPraise } from '@/model/periods';
-import { useQuantifyPraise } from '@/model/praise';
+import { useQuantifyMultiplePraise, useQuantifyPraise } from '@/model/praise';
 import { usePeriodSettingValueRealized } from '@/model/periodsettings';
 import getWeek from 'date-fns/getWeek';
 import parseISO from 'date-fns/parseISO';
@@ -15,6 +15,9 @@ import DuplicateSearchDialog from './DuplicateSearchDialog';
 import MarkDuplicateButton from './MarkDuplicateButton';
 import MarkDismissedButton from './MarkDismissedButton';
 import QuantifyPraiseRow from './QuantifyPraiseRow';
+import SearchInput from '@/components/form/SearchInput';
+import PraiseMultipleDialog from '@/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog';
+import PraiseMultipleButton from '@/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton';
 
 interface Props {
   periodId: string;
@@ -23,6 +26,10 @@ interface Props {
 }
 
 const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
+  const [searchValue, setSearchValue] = React.useState<string | undefined>(
+    undefined
+  );
+
   const data = useRecoilValue(
     PeriodQuantifierReceiverPraise({ periodId, receiverId })
   );
@@ -31,21 +38,40 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
     'PRAISE_QUANTIFY_RECEIVER_PSEUDONYMS'
   ) as boolean;
   const { quantify } = useQuantifyPraise();
+  const { quantifyMultiple } = useQuantifyMultiplePraise();
 
   const [isDismissDialogOpen, setIsDismissDialogOpen] = React.useState(false);
   const [isDuplicateDialogOpen, setIsDuplicateDialogOpen] =
     React.useState(false);
   const [isDuplicateSearchDialogOpen, setIsDuplicateSearchDialogOpen] =
     React.useState(false);
+  const [isPraiseMultipleDialogOpen, setIsPraiseMultipleDialogOpen] =
+    React.useState(false);
   const [duplicateSearchDialogPraise, setDuplicateSearchDialogPraise] =
     React.useState<PraiseDto | undefined>(undefined);
   const [selectedPraises, setSelectedPraises] = React.useState<PraiseDto[]>([]);
+  const [selectAllChecked, setSelectAllChecked] =
+    React.useState<boolean>(false);
 
   const allowedValues = usePeriodSettingValueRealized(
     periodId,
     'PRAISE_QUANTIFY_ALLOWED_VALUES'
   ) as number[];
 
+  const applyFilter = React.useCallback(
+    (data: PraiseDto[] | undefined): PraiseDto[] => {
+      if (!data) return [];
+      if (!searchValue) return data;
+
+      const filteredData = data.filter((praise: PraiseDto) => {
+        return praise.reasonRealized.includes(searchValue);
+      });
+
+      return filteredData;
+    },
+    [searchValue]
+  );
+
   if (!data) return null;
 
   const handleDismiss = (): void => {
@@ -75,6 +101,16 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
     void quantify(praise._id, score, false, null);
   };
 
+  const handleSetMultipleScore = (
+    score: number,
+    selectedPraises: PraiseDto[]
+  ): void => {
+    const praiseIds = selectedPraises.map((praise) => praise._id);
+
+    void quantifyMultiple(score, praiseIds);
+    setSelectedPraises([]);
+  };
+
   const handleDuplicateSearchPraise = (originalPraiseId: string): void => {
     if (!duplicateSearchDialogPraise) return;
 
@@ -83,6 +119,8 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
   };
 
   const handleToggleCheckbox = (praise: PraiseDto): void => {
+    setSelectAllChecked(false);
+
     if (selectedPraises.includes(praise)) {
       const newSelectedPraiseIds = selectedPraises.filter(
         (p) => p._id !== praise._id
@@ -96,8 +134,23 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
     }
   };
 
+  const handleToggleSelectAll = (): void => {
+    setSelectAllChecked(!selectAllChecked);
+
+    if (selectAllChecked) {
+      setSelectedPraises([]);
+    } else {
+      setSelectedPraises(applyFilter(data));
+    }
+  };
+
+  const handleSearchInput = (searchValue: string): void => {
+    setSearchValue(searchValue);
+    setSelectedPraises([]);
+  };
+
   const weeklyData = groupBy(
-    sortBy(data, (p) => p.createdAt),
+    sortBy(applyFilter(data), (p) => p.createdAt),
     (praise: PraiseDto) => {
       if (!praise) return 0;
       return getWeek(parseISO(praise.createdAt), { weekStartsOn: 1 });
@@ -110,20 +163,55 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
 
   return (
     <div>
-      <div className="sticky z-10 w-full p-5 space-x-4 border-t border-l border-r top-14 lg:top-0 rounded-t-xl bg-warm-gray-100 dark:bg-slate-700">
-        <MarkDuplicateButton
-          disabled={selectedPraises.length < 2}
-          onClick={(): void => setIsDuplicateDialogOpen(true)}
-        />
-        <MarkDismissedButton
-          disabled={selectedPraises.length < 1}
-          onClick={(): void => setIsDismissDialogOpen(true)}
-        />
+      <div className="flex sticky z-10 w-full p-5 border-t border-l border-r top-14 lg:top-0 rounded-t-xl bg-warm-gray-100 dark:bg-slate-700">
+        <div className="mr-4">
+          <MarkDuplicateButton
+            disabled={selectedPraises.length < 2}
+            onClick={(): void => setIsDuplicateDialogOpen(true)}
+          />
+        </div>
+
+        <div className="mr-4">
+          <MarkDismissedButton
+            disabled={selectedPraises.length < 1}
+            onClick={(): void => setIsDismissDialogOpen(true)}
+          />
+        </div>
+
+        <div>
+          <PraiseMultipleButton
+            disabled={selectedPraises.length < 1}
+            onClick={(): void => setIsPraiseMultipleDialogOpen(true)}
+          />
+        </div>
+
+        <div className="w-22 ml-auto h-8">
+          <SearchInput
+            handleChange={(e): void => handleSearchInput(e)}
+            placeholder="Filter"
+          />
+        </div>
       </div>
 
       <div className="overflow-x-auto rounded-t-none praise-box-wide">
         <table className="w-full table-auto">
           <tbody>
+            <tr>
+              <td colSpan={2} className="pb-4">
+                <input
+                  type="checkbox"
+                  onChange={handleToggleSelectAll}
+                  checked={selectAllChecked}
+                />
+                <span className="ml-4">Select All</span>
+              </td>
+            </tr>
+            <tr>
+              <td colSpan={5}>
+                <div className="mb-5 border-2 border-t border-warm-gray-400" />
+              </td>
+            </tr>
+
             {Object.keys(weeklyData).map((weekKey, index) => (
               <React.Fragment key={index}>
                 {index !== 0 && index !== data.length - 1 && (
@@ -178,6 +266,15 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
           handleDuplicateSearchPraise(praiseId)
         }
       />
+      <PraiseMultipleDialog
+        open={isPraiseMultipleDialogOpen}
+        onClose={(): void => setIsPraiseMultipleDialogOpen(false)}
+        selectedPraises={selectedPraises}
+        allowedValues={allowedValues}
+        onSetScore={(score, selectedPraises): void =>
+          handleSetMultipleScore(score, selectedPraises)
+        }
+      />
     </div>
   );
 };

From 086e226643f84d93b1fe5d6aa889b2cbd6aed4d8 Mon Sep 17 00:00:00 2001
From: Nebojsa Stojanovic <nebojsa.stojanovic0@gmail.com>
Date: Thu, 23 Jun 2022 17:27:14 +0200
Subject: [PATCH 2/8] Change multiple quantify button & component name

---
 packages/api/src/praise/controllers.ts           |  1 -
 ...ipleButton.tsx => QuantifyMultipleButton.tsx} |  6 +++---
 ...ipleDialog.tsx => QuantifyMultipleDialog.tsx} | 12 ++++++------
 .../components/QuantifyTable.tsx                 | 16 ++++++++--------
 4 files changed, 17 insertions(+), 18 deletions(-)
 rename packages/frontend/src/pages/QuantifyPeriodReceiver/components/{PraiseMultipleButton.tsx => QuantifyMultipleButton.tsx} (84%)
 rename packages/frontend/src/pages/QuantifyPeriodReceiver/components/{PraiseMultipleDialog.tsx => QuantifyMultipleDialog.tsx} (84%)

diff --git a/packages/api/src/praise/controllers.ts b/packages/api/src/praise/controllers.ts
index 58f376026..403fb49da 100644
--- a/packages/api/src/praise/controllers.ts
+++ b/packages/api/src/praise/controllers.ts
@@ -246,6 +246,5 @@ export const quantifyMultiple = async (
   );
 
   const response = await praiseDocumentListTransformer(affectedPraises);
-  console.log('RESPONSE:', response);
   res.status(200).json(response);
 };
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx
similarity index 84%
rename from packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton.tsx
rename to packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx
index 6e2bc81c2..18569dfcf 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx
@@ -6,7 +6,7 @@ interface Props {
   onClick();
 }
 
-const PraiseMultipleButton = ({
+const QuantifyMultipleButton = ({
   disabled = false,
   onClick,
 }: Props): JSX.Element => {
@@ -21,9 +21,9 @@ const PraiseMultipleButton = ({
       onClick={onClick}
     >
       <FontAwesomeIcon icon={faPrayingHands} size="1x" />
-      <span>Praise</span>
+      <span>Quantify</span>
     </button>
   );
 };
 
-export default PraiseMultipleButton;
+export default QuantifyMultipleButton;
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx
similarity index 84%
rename from packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog.tsx
rename to packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx
index 0e177b8fd..16d7854a9 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx
@@ -1,12 +1,12 @@
 import ScrollableDialog from '@/components/ScrollableDialog';
-import PraiseMultipleButton from '@/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton';
+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 PraiseMultipleDialogProps {
+interface QuantifyMultipleDialogProps {
   open: boolean;
   onClose(): void;
   selectedPraises: PraiseDto[];
@@ -14,13 +14,13 @@ interface PraiseMultipleDialogProps {
   onSetScore(newScore: number, selectedPraises: PraiseDto[]);
 }
 
-const PraiseMultipleDialog = ({
+const QuantifyMultipleDialog = ({
   open = false,
   onClose,
   selectedPraises,
   allowedValues,
   onSetScore,
-}: PraiseMultipleDialogProps): JSX.Element | null => {
+}: QuantifyMultipleDialogProps): JSX.Element | null => {
   const [score, setScore] = useState<number>(0);
 
   return (
@@ -47,7 +47,7 @@ const PraiseMultipleDialog = ({
           </div>
 
           <div className="flex justify-center">
-            <PraiseMultipleButton
+            <QuantifyMultipleButton
               onClick={(): void => {
                 onSetScore(score, selectedPraises);
                 onClose();
@@ -60,4 +60,4 @@ const PraiseMultipleDialog = ({
   );
 };
 
-export default PraiseMultipleDialog;
+export default QuantifyMultipleDialog;
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
index cf5f391ac..92fa7a9c8 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
@@ -16,8 +16,8 @@ import MarkDuplicateButton from './MarkDuplicateButton';
 import MarkDismissedButton from './MarkDismissedButton';
 import QuantifyPraiseRow from './QuantifyPraiseRow';
 import SearchInput from '@/components/form/SearchInput';
-import PraiseMultipleDialog from '@/pages/QuantifyPeriodReceiver/components/PraiseMultipleDialog';
-import PraiseMultipleButton from '@/pages/QuantifyPeriodReceiver/components/PraiseMultipleButton';
+import QuantifyMultipleDialog from '@/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog';
+import QuantifyMultipleButton from '@/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton';
 
 interface Props {
   periodId: string;
@@ -45,7 +45,7 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
     React.useState(false);
   const [isDuplicateSearchDialogOpen, setIsDuplicateSearchDialogOpen] =
     React.useState(false);
-  const [isPraiseMultipleDialogOpen, setIsPraiseMultipleDialogOpen] =
+  const [isQuantifyMultipleDialogOpen, setIsQuantifyMultipleDialogOpen] =
     React.useState(false);
   const [duplicateSearchDialogPraise, setDuplicateSearchDialogPraise] =
     React.useState<PraiseDto | undefined>(undefined);
@@ -179,9 +179,9 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
         </div>
 
         <div>
-          <PraiseMultipleButton
+          <QuantifyMultipleButton
             disabled={selectedPraises.length < 1}
-            onClick={(): void => setIsPraiseMultipleDialogOpen(true)}
+            onClick={(): void => setIsQuantifyMultipleDialogOpen(true)}
           />
         </div>
 
@@ -266,9 +266,9 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
           handleDuplicateSearchPraise(praiseId)
         }
       />
-      <PraiseMultipleDialog
-        open={isPraiseMultipleDialogOpen}
-        onClose={(): void => setIsPraiseMultipleDialogOpen(false)}
+      <QuantifyMultipleDialog
+        open={isQuantifyMultipleDialogOpen}
+        onClose={(): void => setIsQuantifyMultipleDialogOpen(false)}
         selectedPraises={selectedPraises}
         allowedValues={allowedValues}
         onSetScore={(score, selectedPraises): void =>

From ac0ff3f052a250c6567c697a33e3a6647db1635f Mon Sep 17 00:00:00 2001
From: Nebojsa Stojanovic <nebojsa.stojanovic0@gmail.com>
Date: Tue, 28 Jun 2022 23:15:51 +0200
Subject: [PATCH 3/8] Moved select all checkbox, fixed issue with duplicate
 praise scores, modified inputs, changed buttons style

---
 packages/api/src/praise/controllers.ts        |  39 ++++++-
 .../src/components/form/MultiselectInput.tsx  |   4 +-
 .../src/components/form/SearchInput.tsx       |   2 +-
 .../src/components/form/SelectInput.tsx       |   4 +-
 .../src/pages/EventLogs/EventLogsPage.tsx     |   4 +-
 .../components/MarkDismissedButton.tsx        |  13 ++-
 .../components/MarkDuplicateButton.tsx        |  13 ++-
 .../components/QuantifyMultipleButton.tsx     |  17 +--
 .../components/QuantifyMultipleDialog.tsx     |   2 +-
 .../components/QuantifyTable.tsx              | 108 ++++++++++--------
 10 files changed, 129 insertions(+), 77 deletions(-)

diff --git a/packages/api/src/praise/controllers.ts b/packages/api/src/praise/controllers.ts
index 403fb49da..dbfccf678 100644
--- a/packages/api/src/praise/controllers.ts
+++ b/packages/api/src/praise/controllers.ts
@@ -28,6 +28,7 @@ import {
 import {
   PraiseAllInput,
   PraiseDetailsDto,
+  Praise,
   PraiseDocument,
   PraiseDto,
   QuantificationCreateUpdateInput,
@@ -203,13 +204,21 @@ export const quantify = async (
   res.status(200).json(response);
 };
 
+/**
+ * Quantify multiple praise items
+ * @param req
+ * @param res
+ */
 export const quantifyMultiple = async (
   req: TypedRequestBody<QuantifyMultiplePraiseInput>,
   res: TypedResponse<PraiseDto[]>
 ): Promise<void> => {
   const { score, praiseIds } = req.body;
 
-  const affectedPraises = await Promise.all(
+  let eventLogMessage = '';
+  const duplicatePraises: PraiseDocument[] = [];
+
+  const praiseItems = await Promise.all(
     praiseIds.map(async (id) => {
       const praise = await PraiseModel.findById(id).populate(
         'giver receiver forwarder'
@@ -235,16 +244,42 @@ export const quantifyMultiple = async (
           'User not assigned as quantifier for praise.'
         );
 
+      const praisesDuplicateOfThis = await PraiseModel.find({
+        quantifications: {
+          $elemMatch: {
+            quantifier: res.locals.currentUser._id,
+            duplicatePraise: praise._id,
+          },
+        },
+      }).populate('giver receiver forwarder');
+
+      if (praisesDuplicateOfThis?.length > 0)
+        duplicatePraises.push(...praisesDuplicateOfThis);
+
       quantification.score = score;
       quantification.dismissed = false;
       quantification.duplicatePraise = undefined;
 
       await praise.save();
 
+      eventLogMessage = `Gave a score of ${
+        quantification.score
+      } to the praise with id "${(praise._id as Types.ObjectId).toString()}"`;
+
+      await logEvent(
+        EventLogTypeKey.QUANTIFICATION,
+        eventLogMessage,
+        {
+          userId: res.locals.currentUser._id,
+        },
+        period._id
+      );
+
       return praise;
     })
   );
 
-  const response = await praiseDocumentListTransformer(affectedPraises);
+  const affectedPraiseItems = [...praiseItems, ...duplicatePraises];
+  const response = await praiseDocumentListTransformer(affectedPraiseItems);
   res.status(200).json(response);
 };
diff --git a/packages/frontend/src/components/form/MultiselectInput.tsx b/packages/frontend/src/components/form/MultiselectInput.tsx
index f74ba64dc..00db6b5d1 100644
--- a/packages/frontend/src/components/form/MultiselectInput.tsx
+++ b/packages/frontend/src/components/form/MultiselectInput.tsx
@@ -22,9 +22,9 @@ const MultiselectInput = ({
   noSelectedMessage,
 }: MultiselectInputProps): JSX.Element => {
   return (
-    <div className="relative border border-warm-gray-400 h-[42px]">
+    <div className="relative border border-warm-gray-400 h-10">
       <Listbox value={selected} onChange={handleChange} multiple>
-        <Listbox.Button className=" pl-2 pr-8 text-left h-[42px] w-full bg-transparent border-none outline-none focus:ring-0 ">
+        <Listbox.Button className=" pl-2 pr-8 text-left h-10 w-full bg-transparent border-none outline-none focus:ring-0 ">
           {(): JSX.Element => (
             <>
               <span className="block truncate">
diff --git a/packages/frontend/src/components/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx
index 9f61847e1..b26020f7e 100644
--- a/packages/frontend/src/components/form/SearchInput.tsx
+++ b/packages/frontend/src/components/form/SearchInput.tsx
@@ -13,7 +13,7 @@ const SearchInput = ({
   placeholder = 'Search',
 }: SearchInputProps): JSX.Element => {
   return (
-    <div className="relative flex items-center border border-warm-gray-400">
+    <div className="relative flex items-center border border-warm-gray-400 h-10">
       <div className="absolute inset-y-0 left-0 flex items-center pl-3">
         <span className="text-warm-gray-800 dark:text-white">
           <FontAwesomeIcon
diff --git a/packages/frontend/src/components/form/SelectInput.tsx b/packages/frontend/src/components/form/SelectInput.tsx
index 24d095ae9..c54c2336c 100644
--- a/packages/frontend/src/components/form/SelectInput.tsx
+++ b/packages/frontend/src/components/form/SelectInput.tsx
@@ -23,9 +23,9 @@ const SelectInput = ({
   icon,
 }: SelectInputProps): JSX.Element => {
   return (
-    <div className="relative h-[42px]">
+    <div className="relative h-10">
       <Listbox value={selected} onChange={handleChange}>
-        <Listbox.Button className="h-[42px] border border-warm-gray-400 w-full py-1.5 pl-3 pr-10 text-left bg-transparent  ">
+        <Listbox.Button className="h-10 border border-warm-gray-400 w-full py-1.5 pl-3 pr-10 text-left bg-transparent  ">
           <span className="block truncate">{selected.label}</span>
           <div className="absolute inset-y-0 right-0 flex items-center pr-3">
             <span className="text-warm-gray-800 ">
diff --git a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx b/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
index 4d3a6919a..a3757045d 100644
--- a/packages/frontend/src/pages/EventLogs/EventLogsPage.tsx
+++ b/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 h-[42px]">
+          <div className="w-5/12 mt-5 mb-5 mr-4">
             <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 h-[42px]">
+          <div className="w-2/12 mt-5 mb-5 ml-auto mr-5">
             <SelectInput
               handleChange={(e): void => {
                 setSelectedSort(e);
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDismissedButton.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDismissedButton.tsx
index 9c47a3446..0b225b59c 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDismissedButton.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDismissedButton.tsx
@@ -3,25 +3,26 @@ import { faMinusCircle } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   disabled?: boolean;
+  small?: boolean;
   onClick();
 }
 
 const MarkDismissedButton = ({
   disabled = false,
   onClick,
+  small,
 }: Props): JSX.Element => {
+  const disabledClass = disabled ? 'praise-button-disabled' : 'praise-button';
+  const smallClass = small ? 'praise-button-round' : '';
+
   return (
     <button
       disabled={disabled}
-      className={
-        disabled
-          ? 'praise-button-disabled space-x-2'
-          : 'praise-button space-x-2'
-      }
+      className={`space-x-2 ${disabledClass} ${smallClass}`}
       onClick={onClick}
     >
       <FontAwesomeIcon icon={faMinusCircle} size="1x" />
-      <span>Dismiss</span>
+      {!small ? <span>Dismiss</span> : null}
     </button>
   );
 };
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDuplicateButton.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDuplicateButton.tsx
index 003837108..ca8615444 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDuplicateButton.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/MarkDuplicateButton.tsx
@@ -3,25 +3,26 @@ import { faCopy } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   disabled?: boolean;
+  small?: boolean;
   onClick();
 }
 
 const MarkDuplicateButton = ({
   disabled = false,
   onClick,
+  small,
 }: Props): JSX.Element => {
+  const disabledClass = disabled ? 'praise-button-disabled' : 'praise-button';
+  const smallClass = small ? 'praise-button-round' : '';
+
   return (
     <button
       disabled={disabled}
-      className={
-        disabled
-          ? 'praise-button-disabled space-x-2'
-          : 'praise-button space-x-2'
-      }
+      className={`space-x-2 ${disabledClass} ${smallClass}`}
       onClick={onClick}
     >
       <FontAwesomeIcon icon={faCopy} size="1x" />
-      <span>Mark as duplicates</span>
+      {!small ? <span>Mark as duplicates</span> : null}
     </button>
   );
 };
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx
index 18569dfcf..440799bda 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton.tsx
@@ -1,27 +1,28 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPrayingHands } from '@fortawesome/free-solid-svg-icons';
+import { faScaleUnbalanced } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   disabled?: boolean;
+  small?: boolean;
   onClick();
 }
 
 const QuantifyMultipleButton = ({
   disabled = false,
   onClick,
+  small,
 }: Props): JSX.Element => {
+  const disabledClass = disabled ? 'praise-button-disabled' : 'praise-button';
+  const smallClass = small ? 'praise-button-round' : '';
+
   return (
     <button
       disabled={disabled}
-      className={
-        disabled
-          ? 'praise-button-disabled space-x-2'
-          : 'praise-button space-x-2'
-      }
+      className={`space-x-2 ${disabledClass} ${smallClass}`}
       onClick={onClick}
     >
-      <FontAwesomeIcon icon={faPrayingHands} size="1x" />
-      <span>Quantify</span>
+      <FontAwesomeIcon icon={faScaleUnbalanced} size="1x" />
+      {!small ? <span>Quantify</span> : null}
     </button>
   );
 };
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx
index 16d7854a9..3a8127565 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog.tsx
@@ -36,7 +36,7 @@ const QuantifyMultipleDialog = ({
             <FontAwesomeIcon icon={faCalculator} size="2x" />
           </div>
           <h2 className="text-center">
-            Quantify selected ({selectedPraises.length}) praises
+            Quantify selected ({selectedPraises.length}) praise items.
           </h2>
 
           <div className="text-center">
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
index 92fa7a9c8..4da978039 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
@@ -18,6 +18,7 @@ import QuantifyPraiseRow from './QuantifyPraiseRow';
 import SearchInput from '@/components/form/SearchInput';
 import QuantifyMultipleDialog from '@/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog';
 import QuantifyMultipleButton from '@/pages/QuantifyPeriodReceiver/components/QuantifyMultipleButton';
+import { Tooltip } from '@mui/material';
 
 interface Props {
   periodId: string;
@@ -58,13 +59,17 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
     'PRAISE_QUANTIFY_ALLOWED_VALUES'
   ) as number[];
 
-  const applyFilter = React.useCallback(
+  const filterBySearchValue = React.useCallback(
     (data: PraiseDto[] | undefined): PraiseDto[] => {
       if (!data) return [];
       if (!searchValue) return data;
 
       const filteredData = data.filter((praise: PraiseDto) => {
-        return praise.reasonRealized.includes(searchValue);
+        const searchString = searchValue.toLowerCase();
+        const reason = praise.reasonRealized.toLowerCase();
+        const giver = praise.giver.name.toLowerCase();
+
+        return reason.includes(searchString) || giver.includes(searchString);
       });
 
       return filteredData;
@@ -140,7 +145,7 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
     if (selectAllChecked) {
       setSelectedPraises([]);
     } else {
-      setSelectedPraises(applyFilter(data));
+      setSelectedPraises(filterBySearchValue(data));
     }
   };
 
@@ -150,7 +155,7 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
   };
 
   const weeklyData = groupBy(
-    sortBy(applyFilter(data), (p) => p.createdAt),
+    sortBy(filterBySearchValue(data), (p) => p.createdAt),
     (praise: PraiseDto) => {
       if (!praise) return 0;
       return getWeek(parseISO(praise.createdAt), { weekStartsOn: 1 });
@@ -163,55 +168,64 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
 
   return (
     <div>
-      <div className="flex sticky z-10 w-full p-5 border-t border-l border-r top-14 lg:top-0 rounded-t-xl bg-warm-gray-100 dark:bg-slate-700">
-        <div className="mr-4">
-          <MarkDuplicateButton
-            disabled={selectedPraises.length < 2}
-            onClick={(): void => setIsDuplicateDialogOpen(true)}
-          />
-        </div>
-
-        <div className="mr-4">
-          <MarkDismissedButton
-            disabled={selectedPraises.length < 1}
-            onClick={(): void => setIsDismissDialogOpen(true)}
-          />
-        </div>
-
-        <div>
-          <QuantifyMultipleButton
-            disabled={selectedPraises.length < 1}
-            onClick={(): void => setIsQuantifyMultipleDialogOpen(true)}
-          />
-        </div>
-
-        <div className="w-22 ml-auto h-8">
-          <SearchInput
-            handleChange={(e): void => handleSearchInput(e)}
-            placeholder="Filter"
-          />
+      <div className="sticky z-10 w-full p-5 border-t border-l border-r top-14 lg:top-0 rounded-t-xl bg-warm-gray-100 dark:bg-slate-700">
+        <div className="flex">
+          <div className="mr-6 mt-1">
+            <input
+              type="checkbox"
+              onChange={handleToggleSelectAll}
+              checked={selectAllChecked}
+            />
+          </div>
+
+          <div className="mr-4">
+            <Tooltip placement="bottom" title="Mark as duplicates" arrow>
+              <div>
+                <MarkDuplicateButton
+                  disabled={selectedPraises.length < 2}
+                  onClick={(): void => setIsDuplicateDialogOpen(true)}
+                  small={true}
+                />
+              </div>
+            </Tooltip>
+          </div>
+
+          <div className="mr-4">
+            <Tooltip placement="bottom" title="Dismiss" arrow>
+              <div>
+                <MarkDismissedButton
+                  disabled={selectedPraises.length < 1}
+                  onClick={(): void => setIsDismissDialogOpen(true)}
+                  small={true}
+                />
+              </div>
+            </Tooltip>
+          </div>
+
+          <div>
+            <Tooltip placement="bottom" title="Quantify" arrow>
+              <div>
+                <QuantifyMultipleButton
+                  disabled={selectedPraises.length < 1}
+                  onClick={(): void => setIsQuantifyMultipleDialogOpen(true)}
+                  small={true}
+                />
+              </div>
+            </Tooltip>
+          </div>
+
+          <div className="w-22 ml-auto h-8">
+            <SearchInput
+              handleChange={(e): void => handleSearchInput(e)}
+              placeholder="Filter"
+            />
+          </div>
         </div>
       </div>
 
       <div className="overflow-x-auto rounded-t-none praise-box-wide">
         <table className="w-full table-auto">
           <tbody>
-            <tr>
-              <td colSpan={2} className="pb-4">
-                <input
-                  type="checkbox"
-                  onChange={handleToggleSelectAll}
-                  checked={selectAllChecked}
-                />
-                <span className="ml-4">Select All</span>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={5}>
-                <div className="mb-5 border-2 border-t border-warm-gray-400" />
-              </td>
-            </tr>
-
             {Object.keys(weeklyData).map((weekKey, index) => (
               <React.Fragment key={index}>
                 {index !== 0 && index !== data.length - 1 && (

From da5b6d6cc67d243fec93fbfd154f25a0c5a0d0df Mon Sep 17 00:00:00 2001
From: kristoferlund <kristofer@fmckl.se>
Date: Wed, 29 Jun 2022 13:32:32 +0200
Subject: [PATCH 4/8] Fix: Added InternalServerError import

---
 packages/api/src/praise/controllers.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/praise/controllers.ts b/packages/api/src/praise/controllers.ts
index bff54e1e3..c82768b63 100644
--- a/packages/api/src/praise/controllers.ts
+++ b/packages/api/src/praise/controllers.ts
@@ -1,4 +1,8 @@
-import { BadRequestError, NotFoundError } from '@error/errors';
+import {
+  BadRequestError,
+  InternalServerError,
+  NotFoundError,
+} from '@error/errors';
 import {
   getPraiseAllInput,
   getQueryInput,
@@ -24,7 +28,6 @@ import {
 import {
   PraiseAllInput,
   PraiseDetailsDto,
-  Praise,
   PraiseDocument,
   PraiseDto,
   QuantificationCreateUpdateInput,

From 7acf2a1562f44aca1bdb2d61a7c99e842fef9b09 Mon Sep 17 00:00:00 2001
From: kristoferlund <kristofer@fmckl.se>
Date: Thu, 30 Jun 2022 17:40:51 +0200
Subject: [PATCH 5/8] Fix: Margins and colours

---
 .../components/BackNextLink.tsx               |   2 +-
 .../components/QuantifyPraiseRow.tsx          |  16 ++-
 .../components/QuantifyTable.tsx              | 100 +++++++-----------
 3 files changed, 51 insertions(+), 67 deletions(-)

diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/BackNextLink.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/BackNextLink.tsx
index a2e0ac858..0510498e5 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/BackNextLink.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/BackNextLink.tsx
@@ -34,7 +34,7 @@ export const QuantifyBackNextLink = ({
   }
 
   return (
-    <div className="grid grid-cols-2 mt-5">
+    <div className="grid grid-cols-2 px-5 mt-5">
       <div className="text-left">
         {backReceiver && (
           <Link
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyPraiseRow.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyPraiseRow.tsx
index 26728b916..121ac92ce 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyPraiseRow.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyPraiseRow.tsx
@@ -10,6 +10,7 @@ import { faCopy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useRecoilValue } from 'recoil';
 import QuantifySlider from './QuantifySlider';
+import { classNames } from '@/utils/index';
 
 interface Props {
   praise: PraiseDto;
@@ -42,11 +43,16 @@ const QuantifyPraiseRow = ({
   const duplicate = !!quantification.duplicatePraise;
 
   return (
-    <tr className="group">
-      <td className="pr-5">
+    <tr
+      className={classNames(
+        'group',
+        checked ? 'bg-warm-gray-100 dark:bg-slate-500' : ''
+      )}
+    >
+      <td className="pl-5 pr-5">
         <input type="checkbox" checked={checked} onChange={onToggleCheck} />
       </td>
-      <td className="pb-5 pr-5">
+      <td className="py-3 pr-5">
         <Praise
           praise={praise}
           showIdPrefix={true}
@@ -76,10 +82,10 @@ const QuantifyPraiseRow = ({
           />
         )}
       </td>
-      <td>
+      <td className="pr-5">
         <div className="w-3">
           <button
-            className="hidden text-warm-gray-400 cursor-pointer group-hover:block hover:text-warm-gray-500"
+            className="hidden cursor-pointer text-warm-gray-400 group-hover:block hover:text-warm-gray-500"
             disabled={duplicate}
             onClick={onDuplicateClick}
           >
diff --git a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
index e929b0f15..47b35cd9c 100644
--- a/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
+++ b/packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyTable.tsx
@@ -15,13 +15,12 @@ import DuplicateSearchDialog from './DuplicateSearchDialog';
 import QuantifyPraiseRow from './QuantifyPraiseRow';
 import SearchInput from '@/components/form/SearchInput';
 import QuantifyMultipleDialog from '@/pages/QuantifyPeriodReceiver/components/QuantifyMultipleDialog';
-import { Tooltip } from '@mui/material';
-import IconButton from '@/components/IconButton';
 import {
   faCopy,
   faMinusCircle,
   faScaleUnbalanced,
 } from '@fortawesome/free-solid-svg-icons';
+import IconButtonRound from '@/components/IconButtonRound';
 
 interface Props {
   periodId: string;
@@ -171,68 +170,47 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
 
   return (
     <div>
-      <div className="sticky z-10 w-full p-5 border-t border-l border-r top-14 lg:top-0 rounded-t-xl bg-warm-gray-100 dark:bg-slate-700">
-        <div className="flex">
-          <div className="mr-6 mt-1">
-            <input
-              type="checkbox"
-              onChange={handleToggleSelectAll}
-              checked={selectAllChecked}
-            />
-          </div>
-
-          <div className="mr-4">
-            <Tooltip placement="bottom" title="Dismiss" arrow>
-              <div>
-                <IconButton
-                  icon={faMinusCircle}
-                  text="Dismiss"
-                  disabled={selectedPraises.length < 1}
-                  onClick={(): void => setIsDismissDialogOpen(true)}
-                  small={true}
-                />
-              </div>
-            </Tooltip>
-          </div>
-
-          <div className="mr-4">
-            <Tooltip placement="bottom" title="Mark as duplicates" arrow>
-              <div>
-                <IconButton
-                  icon={faCopy}
-                  text="Mark as duplicates"
-                  disabled={selectedPraises.length < 2}
-                  onClick={(): void => setIsDuplicateDialogOpen(true)}
-                  small={true}
-                />
-              </div>
-            </Tooltip>
-          </div>
-
-          <div>
-            <Tooltip placement="bottom" title="Quantify" arrow>
-              <div>
-                <IconButton
-                  icon={faScaleUnbalanced}
-                  text="Quantify"
-                  disabled={selectedPraises.length < 1}
-                  onClick={(): void => setIsQuantifyMultipleDialogOpen(true)}
-                  small={true}
-                />
-              </div>
-            </Tooltip>
-          </div>
-
-          <div className="w-22 ml-auto h-8">
-            <SearchInput
-              handleChange={(e): void => handleSearchInput(e)}
-              placeholder="Filter"
-            />
+      <div className="sticky z-10 w-full p-5 border-t border-l border-r top-14 lg:top-0 rounded-t-xl bg-warm-gray-50 dark:bg-slate-600">
+        <div className="flex items-center space-x-4">
+          <input
+            type="checkbox"
+            onChange={handleToggleSelectAll}
+            checked={selectAllChecked}
+          />
+
+          <IconButtonRound
+            icon={faMinusCircle}
+            tooltip="Dismiss"
+            disabled={selectedPraises.length < 1}
+            onClick={(): void => setIsDismissDialogOpen(true)}
+          />
+
+          <IconButtonRound
+            icon={faCopy}
+            tooltip="Mark as duplicates"
+            disabled={selectedPraises.length < 2}
+            onClick={(): void => setIsDuplicateDialogOpen(true)}
+          />
+
+          <IconButtonRound
+            icon={faScaleUnbalanced}
+            tooltip="Quantify"
+            disabled={selectedPraises.length < 1}
+            onClick={(): void => setIsQuantifyMultipleDialogOpen(true)}
+          />
+
+          <div className="flex justify-end grow">
+            <div className="w-22">
+              <SearchInput
+                handleChange={(e): void => handleSearchInput(e)}
+                placeholder="Filter"
+              />
+            </div>
           </div>
         </div>
       </div>
 
-      <div className="overflow-x-auto rounded-t-none praise-box-wide">
+      <div className="p-0 pb-5 overflow-x-auto rounded-t-none praise-box-wide">
         <table className="w-full table-auto">
           <tbody>
             {Object.keys(weeklyData).map((weekKey, index) => (
@@ -240,7 +218,7 @@ const QuantifyTable = ({ periodId, receiverId }: Props): JSX.Element | null => {
                 {index !== 0 && index !== data.length - 1 && (
                   <tr>
                     <td colSpan={5}>
-                      <div className="mb-5 border-2 border-t border-warm-gray-400" />
+                      <hr className="border-t-2 border-warm-gray-400 dark:border-slate-700" />
                     </td>
                   </tr>
                 )}

From 316f94a67fbe89240184407be7747313b8f4c533 Mon Sep 17 00:00:00 2001
From: kristoferlund <kristofer@fmckl.se>
Date: Thu, 30 Jun 2022 17:41:03 +0200
Subject: [PATCH 6/8] Add: IconRoundButton

---
 .../src/components/IconButtonRound.tsx        | 110 ++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 packages/frontend/src/components/IconButtonRound.tsx

diff --git a/packages/frontend/src/components/IconButtonRound.tsx b/packages/frontend/src/components/IconButtonRound.tsx
new file mode 100644
index 000000000..a4aa59ac5
--- /dev/null
+++ b/packages/frontend/src/components/IconButtonRound.tsx
@@ -0,0 +1,110 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { classNames } from '../utils';
+
+interface TooltipProps {
+  title: string;
+  placement: string;
+  disabled: boolean;
+  children: JSX.Element;
+}
+
+export const Tooltip = ({
+  title,
+  children,
+  disabled,
+}: TooltipProps): JSX.Element | null => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [open, setOpen] = React.useState(false);
+  const [openTimeout, setOpenTimeout] = React.useState<NodeJS.Timeout | null>(
+    null
+  );
+  const [closeTimeout, setCloseTimeout] = React.useState<NodeJS.Timeout | null>(
+    null
+  );
+  const [width, setWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    if (ref.current?.offsetWidth) {
+      setWidth(ref.current.offsetWidth);
+    }
+  }, [open]);
+
+  return (
+    <div className="inline-block">
+      <div
+        onPointerEnter={(): void => {
+          closeTimeout && clearTimeout(closeTimeout);
+          !open && setOpenTimeout(setTimeout(() => setOpen(true), 100));
+        }}
+        onPointerLeave={(): void => {
+          openTimeout && clearTimeout(openTimeout);
+          setCloseTimeout(setTimeout(() => setOpen(false), 100));
+        }}
+      >
+        {children}
+      </div>
+
+      {open && !disabled && (
+        <div className="absolute z-10">
+          <div
+            ref={ref}
+            className="relative flex flex-col items-center"
+            onPointerEnter={(): void => {
+              closeTimeout && clearTimeout(closeTimeout);
+            }}
+            onPointerLeave={(): void => {
+              openTimeout && clearTimeout(openTimeout);
+              setTimeout(() => setOpen(false), 100);
+            }}
+            style={{ left: `-${width / 2 - 14}px` }}
+          >
+            <div className="inline-block w-3 overflow-hidden">
+              <div className="w-2 h-2 origin-bottom-left transform rotate-45 bg-warm-gray-600 dark:bg-slate-700"></div>
+            </div>
+            <div className="p-1 text-xs text-white rounded shadow-md bg-warm-gray-600 dark:bg-slate-700">
+              {title}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface IconButtonRoundProps {
+  disabled?: boolean;
+  icon: IconProp;
+  tooltip: string;
+  onClick();
+}
+
+const IconButtonRound = ({
+  disabled = false,
+  icon,
+  tooltip,
+  onClick,
+}: IconButtonRoundProps): JSX.Element => {
+  const classNamesActive =
+    'hover:bg-warm-gray-300 dark:text-white dark:hover:bg-slate-800';
+  const classNamesDisabled =
+    'cursor-default text-gray-900/50 dark:text-white/50';
+
+  return (
+    <Tooltip placement="bottom" title={tooltip} disabled={disabled}>
+      <button
+        disabled={disabled}
+        className={classNames(
+          'flex items-center justify-center rounded-full w-7 h-7',
+          disabled ? classNamesDisabled : classNamesActive
+        )}
+        onClick={onClick}
+      >
+        <FontAwesomeIcon icon={icon} size="1x" />
+      </button>
+    </Tooltip>
+  );
+};
+
+export default IconButtonRound;

From 4cdb995ef2f57485485ce77f634ace17f8929b9c Mon Sep 17 00:00:00 2001
From: kristoferlund <kristofer@fmckl.se>
Date: Thu, 30 Jun 2022 17:45:43 +0200
Subject: [PATCH 7/8] Fix: removed round button code from IconButton

---
 packages/frontend/src/components/IconButton.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/IconButton.tsx b/packages/frontend/src/components/IconButton.tsx
index f76847784..85e909fb4 100644
--- a/packages/frontend/src/components/IconButton.tsx
+++ b/packages/frontend/src/components/IconButton.tsx
@@ -1,9 +1,9 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { classNames } from '../utils';
 
 interface Props {
   disabled?: boolean;
-  small?: boolean;
   icon: IconProp;
   text: string;
   onClick();
@@ -14,19 +14,18 @@ const IconButton = ({
   icon,
   text,
   onClick,
-  small,
 }: Props): JSX.Element => {
-  const disabledClass = disabled ? 'praise-button-disabled' : 'praise-button';
-  const smallClass = small ? 'praise-button-round' : '';
-
   return (
     <button
       disabled={disabled}
-      className={`space-x-2 ${disabledClass} ${smallClass}`}
+      className={classNames(
+        'space-x-2',
+        disabled ? 'praise-button-disabled' : 'praise-button'
+      )}
       onClick={onClick}
     >
       <FontAwesomeIcon icon={icon} size="1x" />
-      {!small ? <span>{text}</span> : null}
+      <span>{text}</span>
     </button>
   );
 };

From e697acd7aa60c16f4e8b6372ff42a27d857c9e7f Mon Sep 17 00:00:00 2001
From: kristoferlund <kristofer@fmckl.se>
Date: Thu, 30 Jun 2022 17:51:17 +0200
Subject: [PATCH 8/8] Fix: Remove unused imports

---
 packages/api/src/praise/controllers.ts | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/api/src/praise/controllers.ts b/packages/api/src/praise/controllers.ts
index b58fbca38..0e162aea1 100644
--- a/packages/api/src/praise/controllers.ts
+++ b/packages/api/src/praise/controllers.ts
@@ -1,8 +1,4 @@
-import {
-  BadRequestError,
-  InternalServerError,
-  NotFoundError,
-} from '@error/errors';
+import { BadRequestError, NotFoundError } from '@error/errors';
 import {
   getPraiseAllInput,
   getQueryInput,
@@ -16,10 +12,7 @@ import {
   TypedRequestQuery,
   TypedResponse,
 } from '@shared/types';
-import { EventLogTypeKey } from '@eventlog/types';
-import { logEvent } from '@eventlog/utils';
 import { Request } from 'express';
-import { Types } from 'mongoose';
 import { PraiseModel } from './entities';
 import {
   praiseDocumentListTransformer,
@@ -28,13 +21,11 @@ import {
 import {
   PraiseAllInput,
   PraiseDetailsDto,
-  PraiseDocument,
   PraiseDto,
   QuantificationCreateUpdateInput,
   QuantifyMultiplePraiseInput,
 } from './types';
-import { praiseWithScore, getPraisePeriod } from './utils/core';
-import { PeriodStatusType } from '@period/types';
+import { praiseWithScore } from './utils/core';
 import { quantifyPraise } from '@praise/utils/quantify';
 interface PraiseAllInputParsedQs extends Query, QueryInput, PraiseAllInput {}