removed add modal and made it go directly in the row when adding new … (

#426) Co-authored-by: md <[email protected]>
varianter · Feb 20, 2024 · d3c286e · d3c286e
1 parent e226f26
commit d3c286e
Show file tree

Hide file tree

Showing 16 changed files with 765 additions and 436 deletions.
diff --git a/frontend/src/components/ComboBox.tsx b/frontend/src/components/ComboBox.tsx
@@ -1,7 +1,12 @@
-import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
-import { useContext } from "react";
-import Select, { MultiValue, SingleValue, createFilter } from "react-select";
+import Select, {
+  CSSObjectWithLabel,
+  MultiValue,
+  SingleValue,
+  StylesConfig,
+  createFilter,
+} from "react-select";
 import CreatableSelect from "react-select/creatable";
+import { OptionalTypeNode } from "typescript";
 
 export type SelectOption = { value: string | number; label: string };
 
@@ -16,6 +21,7 @@ export default function ComboBox({
   placeHolderText = "Velg...",
   isClearable = false,
   isCreatable = false,
+  width = 200,
 }: {
   options: SelectOption[];
   selectedSingleOptionValue?: SelectOption | null;
@@ -27,6 +33,7 @@ export default function ComboBox({
   placeHolderText?: string;
   isClearable?: boolean;
   isCreatable?: boolean;
+  width?: number;
 }) {
   const customFilter = createFilter({
     matchFrom: "start",
@@ -64,6 +71,11 @@ export default function ComboBox({
             ? "1 0 auto"
             : "",
       }),
+
+      control: (base: CSSObjectWithLabel) => ({
+        ...base,
+        width,
+      }),
     },
   };
   if (!isCreatable) return <Select {...selectProps} />;

diff --git a/frontend/src/components/CostumerTable/CustomerRow.tsx b/frontend/src/components/CostumerTable/CustomerRow.tsx
@@ -7,7 +7,7 @@ import {
   getColorByStaffingType,
   getIconByBookingType,
 } from "../Staffing/helpers/utils";
-import { getBookingTypeFromProjectState } from "../Staffing/AddEngagementHoursModal/utils";
+import { getBookingTypeFromProjectState } from "../Staffing/EditEngagementHourModal/utils";
 import Link from "next/link";
 
 export default function CostumerRow({

diff --git a/frontend/src/components/CostumerTable/CustomerTable.tsx b/frontend/src/components/CostumerTable/CustomerTable.tsx
@@ -8,7 +8,6 @@ import { useDepartmentFilter } from "@/hooks/staffing/useDepartmentFilter";
 import WeekSelector from "../WeekSelector";
 import { useWeekSelectors } from "@/hooks/useWeekSelectors";
 import { WeekSpanTableHead } from "../Staffing/WeekTableHead";
-import WeekSelection from "../WeekSelection";
 
 export default function CustomerTable({
   customer,

diff --git a/frontend/src/components/CostumerTable/EngagementRow.tsx b/frontend/src/components/CostumerTable/EngagementRow.tsx
@@ -12,7 +12,7 @@ import { Week } from "@/types";
 import { weekToString } from "@/data/urlUtils";
 import { EditEngagementHoursRow } from "../Staffing/EditEngagementHourModal/EditEngagementHoursRow";
 import { DateTime } from "luxon";
-import { getBookingTypeFromProjectState } from "../Staffing/AddEngagementHoursModal/utils";
+import { getBookingTypeFromProjectState } from "../Staffing/EditEngagementHourModal/utils";
 import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
 import { filterConsultants } from "@/hooks/staffing/useConsultantsFilter";
 

diff --git a/frontend/src/components/Staffing/AddConsultantCell.tsx b/frontend/src/components/Staffing/AddConsultantCell.tsx
@@ -27,7 +27,7 @@ export function AddConsultantCell(props: {
         />
         <button
           onClick={openModal}
-          className="flex flex-row items-center gap-2"
+          className="flex flex-row items-center ml-3"
           onMouseEnter={() => setIsAddConsultantHovered(true)}
           onMouseLeave={() => setIsAddConsultantHovered(false)}
         >
@@ -38,7 +38,7 @@ export function AddConsultantCell(props: {
           >
             <Plus size={16} className="text-primary" />
           </span>
-          <p className="small text-primary text-start small ">
+          <p className="small text-primary text-start small pl-1">
             Legg til konsulent
           </p>
         </button>

diff --git a/frontend/src/components/Staffing/AddEngagementForm.tsx b/frontend/src/components/Staffing/AddEngagementForm.tsx
@@ -7,8 +7,6 @@ import React, {
 } from "react";
 import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
 import ComboBox, { SelectOption } from "@/components/ComboBox";
-import { MultiValue } from "react-select";
-import EasyModal from "@/components/Modals/EasyModal";
 import {
   ConsultantReadModel,
   EngagementState,
@@ -20,18 +18,12 @@ import ActionButton from "../Buttons/ActionButton";
 
 export function AddEngagementForm({
   closeEngagementModal,
-  easyModalRef,
   consultant,
 }: {
-  closeEngagementModal: (
-    project: ProjectWithCustomerModel,
-    selectedConsultants: ConsultantReadModel[],
-  ) => void;
-  easyModalRef: RefObject<HTMLDialogElement>;
+  closeEngagementModal: (project: ProjectWithCustomerModel) => void;
   consultant: ConsultantReadModel;
 }) {
-  const { customers, consultants, setIsDisabledHotkeys } =
-    useContext(FilteredContext);
+  const { customers, setIsDisabledHotkeys } = useContext(FilteredContext);
 
   const organisationName = usePathname().split("/")[1];
   // State for select components
@@ -41,14 +33,6 @@ export function AddEngagementForm({
   const [selectedEngagement, setSelectedEngagement] =
     useState<SelectOption | null>(null);
 
-  const selectedConsultant: SelectOption = {
-    value: consultant.id.toString(),
-    label: consultant.name,
-  };
-
-  const [selectedConsultants, setSelectedConsultants] =
-    useState<MultiValue<SelectOption> | null>([selectedConsultant]);
-
   const [_, setProject] = useState<ProjectWithCustomerModel | undefined>();
 
   const customerOptions = customers.map(
@@ -73,15 +57,6 @@ export function AddEngagementForm({
       .filter((e) => !uniqueLabels.has(e.label) && uniqueLabels.add(e.label)) ??
     [];
 
-  const consultantOptions =
-    consultants.map(
-      (c) =>
-        ({
-          value: `${c.id}`,
-          label: `${c.name}`,
-        }) as SelectOption,
-    ) ?? [];
-
   // State for radio button group
   const [radioValue, setRadioValue] = useState(EngagementState.Offer);
 
@@ -146,12 +121,7 @@ export function AddEngagementForm({
     // TODO: This is a simplified mockup.
     if (result) {
       setProject(result);
-      closeEngagementModal(
-        result,
-        consultants.filter(
-          (c) => selectedConsultants?.some((sc) => sc.value == c.id.toString()),
-        ),
-      );
+      closeEngagementModal(result);
       setIsDisabledHotkeys(true);
       resetSelectedValues();
 
@@ -163,40 +133,20 @@ export function AddEngagementForm({
   function resetSelectedValues() {
     setSelectedCustomer(null);
     setSelectedEngagement(null);
-    setSelectedConsultants([selectedConsultant]);
     setRadioValue(EngagementState.Offer);
     setIsFakturerbar(true);
   }
 
   return (
-    <>
-      <EasyModal
-        modalRef={easyModalRef}
-        title={"Legg til engasjement"}
-        showCloseButton={true}
-        onClose={() => {
-          setIsDisabledHotkeys(false);
-          resetSelectedValues();
+    <div className="flex flex-row gap-2 items-center w-max pt-3 pb-3">
+      <form
+        onSubmit={(e) => {
+          selectedEngagement != null && handleSubmit(e);
         }}
+        className="flex flex-col gap-4 items-center"
       >
-        <form
-          onSubmit={(e) => {
-            selectedEngagement != null && handleSubmit(e);
-          }}
-          className="h-full flex flex-col gap-6"
-        >
-          <div className="flex flex-col gap-6 pt-6">
-            {/* Selected Customer */}
-            <div className="flex flex-col gap-2">
-              <p className="small text-black">Konsulenter</p>
-              <ComboBox
-                options={consultantOptions}
-                selectedMultipleOptionsValue={selectedConsultants}
-                onMultipleOptionsChange={setSelectedConsultants}
-                isMultipleOptions={true}
-                placeHolderText="Velg konsulenter"
-              />
-            </div>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-row gap-6">
             <div className="flex flex-col gap-2">
               <p className="small text-black">Kunde</p>
               <ComboBox
@@ -205,7 +155,6 @@ export function AddEngagementForm({
                 onSingleOptionChange={handleSelectedCustomerChange}
                 isMultipleOptions={false}
                 placeHolderText="Velg kunde"
-                isDisabled={!selectedConsultants}
                 isCreatable={true}
               />
             </div>
@@ -221,71 +170,71 @@ export function AddEngagementForm({
                 isCreatable={true}
               />
             </div>
+          </div>
 
-            {!isAbsence && (
-              <>
-                {/* Radio Button Group */}
-
+          {!isAbsence && (
+            <>
+              {/* Radio Button Group */}
+
+              <div
+                className={`flex flex-row gap-4 ${
+                  selectedEngagement == null && "hidden"
+                }`}
+              >
+                <label className="flex gap-2 normal items-center">
+                  <input
+                    type="radio"
+                    value={EngagementState.Offer}
+                    checked={radioValue === EngagementState.Offer}
+                    onChange={handleRadioChange}
+                    disabled={selectedCustomer?.value == -1}
+                  />
+                  Tilbud
+                </label>
+                <label className="flex gap-2 normal items-center">
+                  <input
+                    type="radio"
+                    value={EngagementState.Order}
+                    checked={radioValue === EngagementState.Order}
+                    onChange={handleRadioChange}
+                    disabled={isAbsence}
+                  />
+                  Ordre
+                </label>
+              </div>
+              {/* Toggle (Checkbox) */}
+              <label
+                className={`flex flex-row justify-between items-center normal ${
+                  selectedEngagement == null && "hidden"
+                }`}
+              >
+                Fakturerbart
                 <div
-                  className={`flex flex-row gap-4 ${
-                    selectedEngagement == null && "hidden"
-                  }`}
-                >
-                  <label className="flex gap-2 normal items-center">
-                    <input
-                      type="radio"
-                      value={EngagementState.Offer}
-                      checked={radioValue === EngagementState.Offer}
-                      onChange={handleRadioChange}
-                      disabled={selectedCustomer?.value == -1}
-                    />
-                    Tilbud
-                  </label>
-                  <label className="flex gap-2 normal items-center">
-                    <input
-                      type="radio"
-                      value={EngagementState.Order}
-                      checked={radioValue === EngagementState.Order}
-                      onChange={handleRadioChange}
-                      disabled={isAbsence}
-                    />
-                    Ordre
-                  </label>
-                </div>
-                {/* Toggle (Checkbox) */}
-                <label
-                  className={`flex flex-row justify-between items-center normal ${
-                    selectedEngagement == null && "hidden"
+                  className={`rounded-full w-[52px] h-7 flex items-center  ${
+                    isFakturerbar ? "bg-primary" : "bg-black/20"
                   }`}
+                  onClick={handleToggleChange}
                 >
-                  Fakturerbart
                   <div
-                    className={`rounded-full w-[52px] h-7 flex items-center  ${
-                      isFakturerbar ? "bg-primary" : "bg-black/20"
+                    className={`m-[2px] bg-white rounded-full w-6 h-6 ${
+                      isFakturerbar && " translate-x-6"
                     }`}
-                    onClick={handleToggleChange}
-                  >
-                    <div
-                      className={`m-[2px] bg-white rounded-full w-6 h-6 ${
-                        isFakturerbar && " translate-x-6"
-                      }`}
-                    ></div>
-                  </div>
-                </label>
-              </>
-            )}
-          </div>
-
-          <ActionButton
-            variant="primary"
-            fullWidth
-            type="submit"
-            disabled={selectedEngagement == null}
-          >
-            Legg til engasjement
-          </ActionButton>
-        </form>
-      </EasyModal>
-    </>
+                  ></div>
+                </div>
+              </label>
+            </>
+          )}
+        </div>
+
+        <ActionButton
+          variant="primary"
+          fullWidth
+          type="submit"
+          disabled={selectedEngagement == null}
+        >
+          Legg til engasjement
+        </ActionButton>
+      </form>
+    </div>
   );
 }