Sorting feature to sort QSTs

OneCommunityGlobal · Sep 20, 2024 · ba063ba · ba063ba
1 parent 5263c66
commit ba063ba
Show file tree

Hide file tree

Showing 3 changed files with 235 additions and 107 deletions.
diff --git a/src/components/UserProfile/QuickSetupModal/QuickSetupCodes.jsx b/src/components/UserProfile/QuickSetupModal/QuickSetupCodes.jsx
@@ -1,30 +1,73 @@
-function QuickSetupCodes({ titles, setShowAssignModal, setTitleOnClick,setShowAddTitle,editMode,assignMode }) {
+function QuickSetupCodes({ titles, setShowAssignModal, setTitleOnClick, setShowAddTitle,editMode,assignMode, setSortBy}) {
+
+  const groupedTitles = titles.reduce((acc, title) => {
+    if (!acc[title.teamCode]) {
+      acc[title.teamCode] = [];
+    }
+    acc[title.teamCode].push(title);
+    return acc;
+  }, {});
+
+
   return (
     <div className="blueSquares mt-3" id="qsc-outer-wrapper">
-      {titles.map(title => (
-        <div
-          key={title._id}
-          role="button"
-          id="wrapper"
-          className="role-button bg-warning"
-          onClick={() => {
-            if(editMode){
-              setShowAddTitle(true)
-            }else if(assignMode){
-              setShowAssignModal(true);
-            }
-            setTitleOnClick(title);
-          }}
-          value={title.titleName}
-        >
-          {title?.shortName}
-          <div className="title">
-            <span className="setup-title-name">{title?.titleName}</span>
+      {editMode ? (
+        Object.keys(groupedTitles).map((teamCode) => (
+          <div className = "group-titles" key={teamCode}>
+            <p className="team-code-title">{teamCode}: </p>
+            {groupedTitles[teamCode].map((title) => (
+              <div
+                key={title._id}
+                role="button"
+                id="wrapper"
+                className="role-button bg-warning"
+                onClick={() => {
+                  if (editMode) {
+                    setShowAddTitle(true);
+                  } else if (assignMode) {
+                    setShowAssignModal(true);
+                  }
+                  setTitleOnClick(title);
+                }}
+                value={title.titleName}
+              >
+                {title?.shortName}
+                <div className="title">
+                  <span className="setup-title-name">{title?.titleName}</span>
+                </div>
+              </div>
+            ))}
+
+          </div>
+        ))
+
+      ) : (
+        titles.map((title) => (
+          <div
+            key={title._id}
+            role="button"
+            id="wrapper"
+            className="role-button bg-warning"
+            onClick={() => {
+              if (assignMode) {
+                setShowAssignModal(true);
+              }
+              setTitleOnClick(title);
+            }}
+            value={title.titleName}
+          >
+            {title?.shortName}
+            <div className="title">
+              <span className="setup-title-name">{title?.titleName}</span>
+            </div>
           </div>
-        </div>
-      ))}
+        ))
+      )}
+
+
     </div>
   );
 }
 
 export default QuickSetupCodes;
+
diff --git a/src/components/UserProfile/QuickSetupModal/QuickSetupModal.css b/src/components/UserProfile/QuickSetupModal/QuickSetupModal.css
@@ -1,39 +1,87 @@
 .role-button {
-    border-radius: 50%;
-    padding: 2px;
-    margin: 5px;
-  }
-
- #qsc-outer-wrapper #wrapper{
-    position: relative;
-  }
-
-  #qsc-outer-wrapper  #wrapper .title {
-    position: absolute;
-    color: #ddd;
-    top:30px;
-    left: 30px;
-    /* height: 2rem;
-    width: 150px; */
-    display: none;
-    white-space: nowrap;
-    z-index: 10;
-    background-color: #555;
-    border-radius: 2px;
-    padding: 0.5rem 1rem;
-  }
-
-  #qsc-outer-wrapper  #wrapper:hover .title {
-    cursor: pointer;
-    display: block;
-  }
-
-
-.setup-title-name{
-    max-height: 30px;
-
-}
-
-.qsm-modal-required{
+  border-radius: 50%;
+  padding: 5px;
+  margin: 10px; 
+}
+
+
+#qsc-outer-wrapper .group-titles {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly; 
+
+}
+
+
+.group-titles {
+  display: flex;
+}
+
+.blueSquares {
+  width: 100%;
+  display: grid;
+  grid-gap: 2px;
+  grid-gap: 2px;
+  gap: 10px;
+  padding: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+  align-items: center;
+  justify-items: center;
+}
+
+.team-code-header {
+  margin-top: 20px;
+  font-weight: bold;
+  font-size: 5px;
+}
+
+#qsc-outer-wrapper #wrapper .title {
+  position: absolute; 
+  color: #fff;
+  top: -50px; 
+  left: 50%; 
+  transform: translateX(-50%); 
+  display: none;
+  white-space: nowrap;
+  z-index: 10;
+  background-color: #555;
+  border-radius: 2px;
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+}
+
+#qsc-outer-wrapper #wrapper:hover .title {
+  cursor: pointer;
+  display: block;
+}
+
+#qsc-outer-wrapper #wrapper {
+  position: relative; 
+}
+
+.setup-title-name {
+  max-height: 10px;
+}
+
+.qsm-modal-required {
   color: red;
-}
+}
+
+.group-container {
+  margin-bottom: 20px; 
+}
+
+.buttons-row {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 10px;
+  margin-top: 5px; 
+}
+
+.team-code-title {
+  font-size: 12px;
+  margin-bottom: 5px; 
+  font-weight: bold;
+  margin-bottom: 5px; 
+
+}