TASK-387 Sort shifts in dropdown

cypress/integration/e2e/table/load-schedule.spec.ts

@@ -4,7 +4,7 @@
 
 import { ShiftCode } from "../../../../src/common-models/shift-info.model";
 import { WorkerType } from "../../../../src/common-models/worker-info.model";
-import { FoundationInfoRowType, ScheduleName } from "../../../support/commands";
+import { FoundationInfoRowType } from "../../../support/commands";
 //#region Test data
 interface CheckFoundationInfoReadCorrectly {
   scheduleName: "childrens_extraworkers.xlsx" | "extraworkers_childrens.xlsx";

src/assets/styles/styles/custom/_autocomplete.scss

@@ -1,34 +1,51 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/*
+?Styling for shift autocomplete component
+*/
 .more-left-margin {
   margin-left: -6px !important;
 }
-
+.autoSeparator {
+  flex: 1;
+  width: 90%;
+  background-color: $gray-400;
+  height: 1.25px;
+  display: flex;
+  align-self: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
 .listbox {
   position: absolute;
   padding: 10px 0;
   margin: -5px 0 0 -2px;
   z-index: 1;
-  list-style: none;
   overflow: auto;
   font-family: $font-family-primary;
   font-size: $font-size-lg;
-  line-height: 175%;
   text-align: left;
   color: $primary;
   background-color: $white;
   font-weight: $font-weight-normal;
   box-shadow: 0 4px 7px rgba(16, 32, 70, 0.2);
   max-height: 500px;
   border-radius: 7px;
-  min-width: 250px;
+  min-width: 260px;
   z-index: 300;
 
-  & li {
-    clear: both;
-    min-height: 25px;
+  & > div {
+    display: flex;
+    margin-left: 0.6em;
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: nowrap;
     letter-spacing: 0.75px;
+    align-content: center;
+    justify-items: center;
+    justify-content: left;
     &:hover {
       font-style: italic;
       font-weight: $font-weight-extra-bold;
@@ -37,23 +54,21 @@
     &[data-focus="true"] {
       cursor: pointer;
     }
-
-    .container {
-      display: block;
-      margin-left: 15px;
-
-      .colorSample {
-        width: 9px;
-        height: 9px;
-        border-radius: 50%;
-        float: left;
-        margin: 8.5px 20px 0 10px;
-      }
-
-      .optionLabel {
-        float: left;
-        clear: both;
-      }
+    > .optionLabel {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      margin-right: 0.2em;
+      word-wrap: normal;
+      overflow-wrap: normal;
+    }
+    > .colorSamplee {
+      display: flex;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      margin: 0 0;
+      align-self: center;
     }
   }
 }

src/components/common-components/autocomplete/autocomplete.component.tsx

@@ -6,7 +6,13 @@ import classNames from "classnames/bind";
 import React, { useEffect, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 
-interface AutocompleteOptions<T> {
+interface AutocompleteOptions<
+  T extends {
+    name: string;
+    from: number;
+    to: number;
+  }
+> {
   options: T[];
   getOptionLabel: (option: T) => string;
   onValueChange: (newValue: T) => void;
@@ -20,7 +26,13 @@ interface AutocompleteOptions<T> {
  * Dropdown create by this function is always opened.
  * To close the dropdown, you should destroy this component
  */
-export function AutocompleteComponent<T>({
+export function AutocompleteComponent<
+  T extends {
+    name: string;
+    from: number;
+    to: number;
+  }
+>({
   className,
   options,
   getOptionLabel,
@@ -52,6 +64,21 @@ export function AutocompleteComponent<T>({
     getOptionLabel,
     open: true,
   });
+  const LabelComponent = ({ option, index }): JSX.Element => {
+    return (
+      <div
+        {...getOptionProps({ option, index })}
+        data-cy={option["data-cy"]}
+        onClick={(e: React.MouseEvent): void => {
+          e.stopPropagation();
+          setValue(option);
+        }}
+      >
+        <div className="optionLabel">{getOptionLabel(option)}</div>
+        <div className="colorSamplee" style={{ backgroundColor: `#${getOptionColor(option)}` }} />
+      </div>
+    );
+  };
   return (
     <div ref={inputRef} data-cy="shiftDropdown">
       <div {...getRootProps()}>
@@ -64,32 +91,35 @@ export function AutocompleteComponent<T>({
         />
       </div>
       {groupedOptions.length > 0 ? (
-        <ul
+        <div
           ref={tooltipRef}
           className={classNames("listbox")}
           style={styles.popper}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           onMouseDown={(getListboxProps() as any).onMouseDown}
         >
-          {groupedOptions.map((option, index) => (
-            <li
-              {...getOptionProps({ option, index })}
-              data-cy={option["data-cy"]}
-              onClick={(e: React.MouseEvent): void => {
-                e.stopPropagation();
-                setValue(option);
-              }}
-            >
-              <div className="container">
-                <div className="optionLabel">{getOptionLabel(option)}</div>
-                <div
-                  className="colorSample"
-                  style={{ backgroundColor: `#${getOptionColor(option)}` }}
-                />
-              </div>
-            </li>
-          ))}
-        </ul>
+          {groupedOptions.map((option, index) => {
+            if (option.name.trim() === "wolne") {
+              return <LabelComponent option={option} index={index} />;
+            }
+            return null;
+          })}
+          {groupedOptions.map((option, index) => {
+            if (option.name.trim() !== "wolne") {
+              if (option.from !== 0 && option.to !== 24)
+                return <LabelComponent option={option} index={index} />;
+            }
+            return null;
+          })}
+          <div className="autoSeparator" />
+          {groupedOptions.map((option, index) => {
+            if (option.name.trim() !== "wolne") {
+              if (option.from === 0 && option.to === 24)
+                return <LabelComponent option={option} index={index} />;
+            }
+            return null;
+          })}
+        </div>
       ) : null}
     </div>
   );

src/components/schedule-page/table/schedule/schedule-parts/shift-cell/shift-autocomplete.component.tsx

@@ -1,21 +1,36 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import _ from "lodash";
 import React from "react";
 import { SHIFTS as shifts } from "../../../../../../common-models/shift-info.model";
 import { AutocompleteComponent } from "../../../../../common-components";
 import { BaseCellInputOptions } from "../base-cell/base-cell-input.component";
 
-const ShiftCodeSelectItems = Object.values(shifts).map((shift) => {
-  return {
-    name: `${shift.name} ${shift.isWorkingShift ? `(${shift.from}-${shift.to})` : ""}`,
-    symbol: shift.code,
-    code: shift.code,
-    color: shift.color ? shift.color : "$white",
-    "data-cy": `autocomplete-${shift.code}`,
-  };
-});
+const ShiftCodeSelectItems = _.sortBy(
+  Object.values(shifts).map((shift) => {
+    return {
+      name: `${shift.name} ${shift.isWorkingShift ? `(${shift.from}-${shift.to})` : ""}`,
+      symbol: shift.code,
+      from: shift.from,
+      to: shift.to,
+      code: shift.code,
+      color: shift.color ? shift.color : "$white",
+      "data-cy": `autocomplete-${shift.code}`,
+    };
+  }),
+  ["from", "to", "name"]
+);
+// const ErgoSort = (): typeof ShiftCodeSelectItems => {
+//   let ar = ShiftCodeSelectItems, wolne;
+//   let special = ar.reduce((e, ex) => {
+//     if(ex.name.trim() === "wolne"){
+//       wolne = ex
+//     }else if (ex.from === 0 && ex.to === 24) return ex;
 
+//   });
+//   return ar;
+// };
 export function ShiftAutocompleteComponent(inputOptions: BaseCellInputOptions): JSX.Element {
   return (
     <AutocompleteComponent