From 2b7035876c0d08af1575bc19b5c742b4d1c3ecb0 Mon Sep 17 00:00:00 2001 From: tsun900 Date: Tue, 24 Sep 2024 17:41:15 -0400 Subject: [PATCH 1/7] map page more filter fixed --- src/components/map/index.tsx | 132 +++++++++++++++++++------------ src/components/map/mapStyles.css | 15 +++- 2 files changed, 95 insertions(+), 52 deletions(-) diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 5ff151f..b1fc2f8 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -27,6 +27,7 @@ import { Tooltip as ReactTooltip } from "react-tooltip"; import searchIcon from '../../assets/img/searchicon.png'; import x from '../../assets/img/x.png'; import dropdownIcon from '../../assets/svg/chevron-down.svg'; +import { MdChevronRight } from "react-icons/md"; import Switch from 'react-switch'; import { func } from 'prop-types'; import ProgressBar from "components/subcomponents/chartcomponents/ProgressBar"; @@ -62,7 +63,7 @@ const data2 = [ { x: "Dec", y: 2085 }, ]; -const FILTER_CUTOFF = 5; +const FILTER_CUTOFF = 3; const PAGE_SIZE = 100; const getWidth = () => @@ -689,6 +690,8 @@ const Map = (props) => { style={{ display: "flex", alignItems: "center" }} >
+ { + console.log((filtersData))} {Object.entries(filtersData) .filter( ([key, value]: any[]) => @@ -703,24 +706,8 @@ const Map = (props) => { renderDropdown(value.name, key) )} - {moreFilter ? ( - <> - {Object.entries(filtersData) - .filter( - ([key, value]: any[]) => - !Number.isInteger(value.priority) || - value.priority >= FILTER_CUTOFF - ) - .sort( - ( - [aKey, aValue]: any[], - [bKey, bValue]: any[] - ) => aValue.name.localeCompare(bValue.name) - ) - .map(([key, value]: any[]) => - renderDropdown(value.name, key) - )} - + {Object.keys(filtersData).length > FILTER_CUTOFF ? ( + <> { - setMoreFilter(true)}> - Option 1 - - setMoreFilter(true)}> - Option 2 - - setMoreFilter(true)}> - Option 3 - + {Object.entries(filtersData) + .filter( + ([key, value]: any[]) => + !Number.isInteger(value.priority) || + value.priority >= FILTER_CUTOFF + ) + .sort( + ( + [aKey, aValue]: any[], + [bKey, bValue]: any[] + ) => aValue.name.localeCompare(bValue.name) + ) + .map(([key, value]: any[]) => + renderMoreDropdown(value.name, key) + )} {/* */} ) : ( - - - {moreFilters} - - dropdown icon - - - - - setMoreFilter(true)}> - Option 1 - - setMoreFilter(true)}> - Option 2 - - setMoreFilter(true)}> - Option 3 - - - +
// )} - {isDragged || ( + {/* {isDragged || ( - )} + )} */}
@@ -109,13 +112,14 @@ export default ({ {/* */} + {item.active && ( - +
)} @@ -192,6 +196,7 @@ export default ({ optionName.length <= 0 } variant="primary" + className={"category-button-add"} > Add diff --git a/src/components/template/index.tsx b/src/components/template/index.tsx index 90adad8..7c1f59e 100644 --- a/src/components/template/index.tsx +++ b/src/components/template/index.tsx @@ -14,6 +14,7 @@ import promiseWithTimeout from "../../functions/promiseWithTimeout"; import { Store } from "reducers/types"; import { TempTutorial } from "./TempTutorial"; import { TempTutorialTwo } from "./TempTutorialTwo"; +import { ToggleSlider } from "react-toggle-slider"; function reorder(list: T[], startIndex: number, endIndex: number) { const result = Array.from(list); @@ -36,6 +37,7 @@ export default compose( const [isLoading, setIsLoading] = useState(true); const [showModal, setShowModal] = useState(false); const [, setDefaultCategories] = useState([]); + const [usePrimary, setUsePrimary] = useState(false); const staticData = { id: "Preview", address: ["123 Fake St, Philadelphia, PA 19133"], @@ -330,8 +332,10 @@ export default compose( !document.cookie.includes("tut2") && }
-

Template Builder

-
+
+ {/* + */} +
+

Enable Primary Single Select Filter

+ setUsePrimary(!usePrimary)}/> +
+

Activate to create a single filtering group where you can color code the options. We recommend if you have a primary filtering group.


{message != null &&

{message}

} +
+

Filters

+

The top 3 filters will be directly displayed under search in desktop view. Additional filters will be accessible under ‘More filters’

+
- setNewCatName((e.target as HTMLInputElement).value)} type="text" @@ -368,7 +381,7 @@ export default compose( Add - + */}
diff --git a/yarn.lock b/yarn.lock index 39e7a40..0f166da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3808,6 +3808,11 @@ align-text@^0.1.1, align-text@^0.1.3: longest "^1.0.1" repeat-string "^1.5.2" +almost-equal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd" + integrity sha512-0V/PkoculFl5+0Lp47JoxUcO0xSxhIBvm+BxHdD/OgXNmdRpRHCFnKVuUoWyS9EzQP+otSGv0m9Lb4yVkQBn2A== + ansi-escapes@^4.2.1, ansi-escapes@^4.3.1: version "4.3.2" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e" @@ -4899,6 +4904,11 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== +clamp@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634" + integrity sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA== + class-utils@^0.3.5: version "0.3.6" resolved "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz" @@ -5032,16 +5042,41 @@ color-convert@^2.0.1: dependencies: color-name "~1.1.4" +color-interpolate@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/color-interpolate/-/color-interpolate-1.0.5.tgz#d5710ce4244bd8b9feeda003f409edd4073b6217" + integrity sha512-EcWwYtBJdbeHyYq/y5QwVWLBUm4s7+8K37ycgO9OdY6YuAEa0ywAY+ItlAxE1UO5bXW4ugxNhStTV3rsTZ35ZA== + dependencies: + clamp "^1.0.1" + color-parse "^1.2.0" + color-space "^1.14.3" + lerp "^1.0.3" + color-name@1.1.3: version "1.1.3" resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz" integrity "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" -color-name@^1.1.4, color-name@~1.1.4: +color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4: version "1.1.4" resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI= sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" +color-parse@^1.2.0: + version "1.4.3" + resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.4.3.tgz#6dadfb49128c554c60c49d63f3d025f2c5a7ff22" + integrity sha512-BADfVl/FHkQkyo8sRBwMYBqemqsgnu7JZAwUgvBvuwwuNUZAhSvLTbsEErS5bQXzOjDR0dWzJ4vXN2Q+QoPx0A== + dependencies: + color-name "^1.0.0" + +color-space@^1.14.3: + version "1.16.0" + resolved "https://registry.yarnpkg.com/color-space/-/color-space-1.16.0.tgz#611781bca41cd8582a1466fd9e28a7d3d89772a2" + integrity sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg== + dependencies: + hsluv "^0.0.3" + mumath "^3.3.4" + colord@^2.9.1: version "2.9.3" resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" @@ -7854,6 +7889,11 @@ hpack.js@^2.1.6: readable-stream "^2.0.1" wbuf "^1.1.0" +hsluv@^0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.0.3.tgz#829107dafb4a9f8b52a1809ed02e091eade6754c" + integrity sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ== + html-encoding-sniffer@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3" @@ -9547,6 +9587,11 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" +lerp@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/lerp/-/lerp-1.0.3.tgz#a18c8968f917896de15ccfcc28d55a6b731e776e" + integrity sha512-70Rh4rCkJDvwWiTsyZ1HmJGvnyfFah4m6iTux29XmasRiZPDBpT9Cfa4ai73+uLZxnlKruUS62jj2lb11wURiA== + leven@^3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz" @@ -10072,6 +10117,13 @@ multicast-dns@^7.2.5: dns-packet "^5.2.2" thunky "^1.0.2" +mumath@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/mumath/-/mumath-3.3.4.tgz#48d4a0f0fd8cad4e7b32096ee89b161a63d30bbf" + integrity sha512-VAFIOG6rsxoc7q/IaY3jdjmrsuX9f15KlRLYTHmixASBZkZEKC1IFqE2BC5CdhXmK6WLM1Re33z//AGmeRI6FA== + dependencies: + almost-equal "^1.1.0" + mute-stream@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" @@ -12228,6 +12280,13 @@ react-switch@^7.0.0: dependencies: prop-types "^15.7.2" +react-toggle-slider@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/react-toggle-slider/-/react-toggle-slider-0.4.0.tgz#faea3db01346280a9716afa0c493cb1b6d6e1c3e" + integrity sha512-MO2L1ED5h8AYBCmO9xnWyWaZmeDND8pPx5YCwFk7gJ/ki6rU9qSrpqt2/MV3OWcszDSnoeUOGD7/89Eot6Y7rQ== + dependencies: + color-interpolate "^1.0.5" + react-tooltip@^5.21.5: version "5.21.5" resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.21.5.tgz#3e1bc02a0e674369dea81bb201d6106724dd60cf" From b9344d86fe9b20896669f8ebf083c78ccc57aa74 Mon Sep 17 00:00:00 2001 From: tsun90 <52758623+tsun900@users.noreply.github.com> Date: Tue, 1 Oct 2024 03:58:06 -0400 Subject: [PATCH 3/7] single select feature updated --- src/assets/styles/main.css | 74 +++++- src/components/chat/index.tsx | 1 - src/components/dashboard/ActionForm.tsx | 3 - src/components/dashboard/AddProvider.tsx | 2 - src/components/dashboard/CSV.tsx | 12 - src/components/dashboard/TimeTable.tsx | 1 - src/components/map/ProviderCell.tsx | 1 - src/components/modals/Modal.jsx | 1 - .../subcomponents/ProviderInfoMobile.tsx | 1 - src/components/template/CategoryCell.tsx | 24 +- src/components/template/PrimaryCell.tsx | 233 ++++++++++++++++++ src/components/template/index.tsx | 158 ++++++++++-- 12 files changed, 462 insertions(+), 49 deletions(-) create mode 100644 src/components/template/PrimaryCell.tsx diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index 182b40f..30514ca 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.css @@ -478,6 +478,21 @@ h2 { overflow-x: hidden; } +.template-add { + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px 16px; + gap: 4px; + background: rgba(19, 70, 170, 0.06); + border: 2px dashed #226DFF; + border-radius: 4px; + color: #226DFF; + width: 100%; +} + .reverse-column { display: flex; flex-direction: column; @@ -491,6 +506,15 @@ h2 { padding-top: 50px; } +.category-delete-container { + display: flex; + justify-content: end; +} + +.category-delete-button { + cursor: pointer; +} + .spinner { font-size: 10px; margin: 0px auto; @@ -1104,8 +1128,12 @@ h2 { justify-content: center; align-items: stretch; margin-bottom: 12px; + background: #FFFFFF; + border: 1px solid #E0E0E0; + border-radius: 8px; } + .category-grip { font-size: 27px; color: #4f4f4f; @@ -1118,10 +1146,25 @@ h2 { justify-content: center; } +.primary-grip { + font-size: 27px; + color: #4f4f4f; + transition: all 200ms; + height: 100%; + border-radius: 8px 0px 0px 8px; + background-color: #F2F2F2; + display: flex; + align-items: center; + justify-content: center;} + .category-cell-wrapper:hover .category-grip { background: #226DFF; } +.category-cell-wrapper:hover .primary-grip { + background: #E0E0E0; +} + .category-cell-container { display: flex; flex: 1; @@ -1168,6 +1211,8 @@ h2 { background-color: white !important; border: hidden; cursor: pointer; + align-self: flex-end; + margin-left: 2.5rem; } .add-option { @@ -1184,7 +1229,34 @@ h2 { } .options-item { - flex-direction: row-reverse; + flex-direction: row; +} + +.options-item-1{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.options-color { + width: 2.5rem !important; + height: 2.5rem !important; + padding: 3px !important; + border-radius: 50% !important; + border: hidden !important; + cursor: pointer; + overflow: hidden; +} + +.options-add-color { + width: 3.5rem !important; + height: 2.5rem !important; + padding: 1px !important; + border: hidden !important; + margin-right: px !important; + cursor: pointer; + overflow: hidden; } .options-label { diff --git a/src/components/chat/index.tsx b/src/components/chat/index.tsx index 11a4b41..8b766b8 100644 --- a/src/components/chat/index.tsx +++ b/src/components/chat/index.tsx @@ -20,7 +20,6 @@ async function sendSlackMessage(email, message) { }, body: JSON.stringify(data), }; - console.log(requestOptions); fetch("https://bit-bot-five.vercel.app/bog/mapscout", requestOptions); } diff --git a/src/components/dashboard/ActionForm.tsx b/src/components/dashboard/ActionForm.tsx index 26b9be3..8e883bb 100644 --- a/src/components/dashboard/ActionForm.tsx +++ b/src/components/dashboard/ActionForm.tsx @@ -45,8 +45,6 @@ const ActionForm = (props) => { onClick={() => { const data = actions; data[index].selected = !data[index].selected; //! UNSURE - console.log(data); - console.log(actions[index].selected); setActions(data); setTimeout(() => props.onChange(actions), 100); }} @@ -62,7 +60,6 @@ const ActionForm = (props) => { onChange={(e) => { const data = actions; actions[index].linkText = (e.target as HTMLInputElement).value; - console.log((e.target as HTMLInputElement).value); setActions(data); setTimeout(() => props.onChange(actions), 100); }} diff --git a/src/components/dashboard/AddProvider.tsx b/src/components/dashboard/AddProvider.tsx index 1074dfb..a32983c 100644 --- a/src/components/dashboard/AddProvider.tsx +++ b/src/components/dashboard/AddProvider.tsx @@ -250,8 +250,6 @@ function AddProvider(props) { ), ); props.history.push(providerRoute); - console.log(providerRoute); - console.log("adding"); } catch (e) { setError( "Failed to save changes. Please check your network connection or try again later.", diff --git a/src/components/dashboard/CSV.tsx b/src/components/dashboard/CSV.tsx index c6ab962..e3d77a9 100644 --- a/src/components/dashboard/CSV.tsx +++ b/src/components/dashboard/CSV.tsx @@ -116,11 +116,6 @@ const ExportCSV = (props) => { async function handleDrop(data) { let oldProviders: { id: string }[] = Array.from(props.providers); let oldCategories: { id: string }[] = Array.from(props.categories); - console.log("older categories", oldCategories); - console.log("older Providers", oldProviders); - console.log("---------------------------"); - console.log("data", data); - console.log("---------------------------"); let mergedProviders = data.slice(); let isDifferent = false; @@ -145,7 +140,6 @@ const ExportCSV = (props) => { } isDifferent = false; } - console.log("first for loope"); for (let i = 0; i < mergedProviders.length; i++) { try { @@ -199,7 +193,6 @@ const ExportCSV = (props) => { .collection("categories") .doc(trimmedProperty) .get(); - console.log(columns); if (doc.data()) { const selectType = doc.data()["select_type"]; if (selectType === 2) { @@ -218,7 +211,6 @@ const ExportCSV = (props) => { } } - console.log("second for loope"); var columnArr = []; for (let i = 0; i < data.slice().length; i++) { @@ -240,7 +232,6 @@ const ExportCSV = (props) => { break; } } - console.log(containsName); if (!containsName) { // create a new object and push it to mergedCategories var arr = []; @@ -309,9 +300,6 @@ const ExportCSV = (props) => { { - console.log("---------------------------"); - console.log(results); - console.log("---------------------------"); handleDrop(results.data); }} > diff --git a/src/components/dashboard/TimeTable.tsx b/src/components/dashboard/TimeTable.tsx index e5d26de..1ffeef1 100644 --- a/src/components/dashboard/TimeTable.tsx +++ b/src/components/dashboard/TimeTable.tsx @@ -16,7 +16,6 @@ const daysOfWeek = [ ]; const TimeTable = (props) => { - console.log(props); const [days, setDays] = useState( daysOfWeek.map((item) => ({ day: item, diff --git a/src/components/map/ProviderCell.tsx b/src/components/map/ProviderCell.tsx index 8f56b68..c73a8fc 100644 --- a/src/components/map/ProviderCell.tsx +++ b/src/components/map/ProviderCell.tsx @@ -36,7 +36,6 @@ export default ({ await setImage(item.imageURL); setIsLoading(false); } catch (e) { - console.log(e); setIsLoading(false); } } diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx index 349bf05..a876c59 100644 --- a/src/components/modals/Modal.jsx +++ b/src/components/modals/Modal.jsx @@ -3,7 +3,6 @@ import "./Modal.css"; export default function Modal(props) { // eslint-disable-next-line no-console - console.log(props); return (
{ setImage(res2.url); setIsLoading(false); } catch (e) { - console.log(e); setIsLoading(false); } } diff --git a/src/components/template/CategoryCell.tsx b/src/components/template/CategoryCell.tsx index 7b70c11..27c680f 100644 --- a/src/components/template/CategoryCell.tsx +++ b/src/components/template/CategoryCell.tsx @@ -34,7 +34,6 @@ export default ({ return (
- {console.log(item)}
{item.active ? (
@@ -49,7 +48,7 @@ export default ({ borderRadius: 0, padding: 0, }} - onClick={() => enableCat(index)} + onClick={() => enableCat(item)} > @@ -66,8 +65,8 @@ export default ({ }} onClick={ item.active - ? () => disableCat(index) - : () => deleteCat(index) + ? () => disableCat(item) + : () => deleteCat(item) } > @@ -93,7 +92,7 @@ export default ({ style={{ fontWeight: "bolder" }} onChange={(e: any) => { setTitle(e.target.value); - rename(e, index); + rename(e, item); }} /> changeType( parseInt(myRef.current.value), - index, + item, ) } > @@ -151,17 +150,17 @@ export default ({ key={i} className="options-item row-spaced mt-1" > +
+ {option.value} +
- removeOption(i, index) + removeOption(i, item) } className="options-close" >
-
- {option.label} -
)) ) : ( @@ -187,7 +186,7 @@ export default ({ onClick={() => { addOption( optionName, - index, + item, ); setOptionName(""); }} @@ -204,6 +203,9 @@ export default ({
+
+

deleteCat(item)}>Delete Filter

+
) : (
diff --git a/src/components/template/PrimaryCell.tsx b/src/components/template/PrimaryCell.tsx new file mode 100644 index 0000000..4a74716 --- /dev/null +++ b/src/components/template/PrimaryCell.tsx @@ -0,0 +1,233 @@ +import React, { useRef, useState } from "react"; +import Button from "react-bootstrap/Button"; +import Col from "react-bootstrap/Col"; +import FormControl from "react-bootstrap/FormControl"; +import InputGroup from "react-bootstrap/InputGroup"; +import Row from "react-bootstrap/Row"; +import { Collapse } from "react-collapse"; +import { FiMoreVertical } from "react-icons/fi"; +import { + IoIosArrowDown, + IoIosArrowUp, + IoIosRefresh, + IoIosTrash, + IoMdClose, +} from "react-icons/io"; + +export default ({ + item, + index, + deleteCat, + disableCat, + enableCat, + addOption, + removeOption, + changeType, + rename, +}) => { + const [optionName, setOptionName] = useState(""); + const [color, setColor] = useState("#379bf0"); + const [title, setTitle] = useState(item.name); + const [collapsed, setCollapsed] = useState(false); + + const myRef = useRef(null); + + return ( +
+
+ {item.active ? ( +
+

{index + 1}

+
+ ) : ( + + )} + {/* {isDragged || ( + + )} */} +
+
+
+ + + + { + setTitle(e.target.value); + rename(e, item); + }} + /> + + changeType( + parseInt(myRef.current.value), + item, + ) + } + > + + {/* */} + + + + + + {item.active && ( + +
setCollapsed(!collapsed)} + > + {collapsed ? ( + + ) : ( + + )} +
+ + )} + +
+ {!item.active && ( +
+ This category has been disabled. You may either restore + it or permanently delete it. +
+ )} + + {item.select_type === 1 || item.select_type === 2 ? ( +
+
+ + CURRENT OPTIONS + + {item.options && item.options.length > 0 ? ( + item.options.map((option, i) => ( +
+
+ setColor((e.target as HTMLInputElement).value)} + /> +
+ {option.value} +
+
+
+ removeOption(i, item) + } + className="options-close" + > + +
+
+ )) + ) : ( +
+ There are currently no options, please + add some +
+ )} +
+
+
+ setColor((e.target as HTMLInputElement).value)} + /> + + setOptionName((e.target as HTMLInputElement).value) + } + type="text" + defaultValue="#563d7c" + placeholder="Create New Option" + /> + +
+
+
+

deleteCat(item)}>Delete Filter

+
+
+ ) : ( +
+ There is no additional configuration for this + property type +
+ )} + +
+
+ ); +}; diff --git a/src/components/template/index.tsx b/src/components/template/index.tsx index 7c1f59e..c4ea3b2 100644 --- a/src/components/template/index.tsx +++ b/src/components/template/index.tsx @@ -9,12 +9,15 @@ import { withFirestore, isEmpty } from "react-redux-firebase"; import { compose } from "redux"; import { connect } from "react-redux"; import CategoryCell from "./CategoryCell"; +import PrimaryCell from "./PrimaryCell"; import ProviderInfo from "../subcomponents/ProviderInfo"; import promiseWithTimeout from "../../functions/promiseWithTimeout"; import { Store } from "reducers/types"; import { TempTutorial } from "./TempTutorial"; import { TempTutorialTwo } from "./TempTutorialTwo"; import { ToggleSlider } from "react-toggle-slider"; +import { BsPlus } from "react-icons/bs"; +import { Card } from "react-bootstrap"; function reorder(list: T[], startIndex: number, endIndex: number) { const result = Array.from(list); @@ -33,7 +36,7 @@ export default compose( )(({ team, firestore }) => { const [categories, setCategories] = useState([]); const [message, setMessage] = useState(null); - const [newCatName, setNewCatName] = useState(""); + const [newCatName, setNewCatName] = useState("Please edit name of new category"); const [isLoading, setIsLoading] = useState(true); const [showModal, setShowModal] = useState(false); const [, setDefaultCategories] = useState([]); @@ -160,10 +163,18 @@ export default compose( item.priority = index; }); setCategories(items); + saveChanges(); } - async function changeType(type, index) { + async function changeType(type, item) { setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } const point = await categories[index]; point.select_type = type; setIsLoading(false); @@ -171,17 +182,32 @@ export default compose( saveChanges(); } - async function rename(e, index) { + async function rename(e, item) { + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } const items = categories; const point = items[index]; point.name = e.target.value; + point.id = e.target.value; setCategories(items); saveChanges(); } - async function addOption(name, index) { + async function addOption(name, item) { setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } const point = categories[index]; if ( point.options.findIndex( @@ -198,8 +224,41 @@ export default compose( saveChanges(); } - async function removeOption(i, index) { + async function addPrimOption(name, colors, item) { setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } + const point = categories[index]; + if ( + point.options.findIndex( + (x) => x.value.toLowerCase() === name.toLowerCase(), + ) === -1 + ) { + console.log(item) + await point.options.push({ + color: colors, + value: name, + }); + } + setIsLoading(false); + + saveChanges(); + } + + async function removeOption(i, item) { + setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } const point = categories[index]; await point.options.splice(i, 1); setIsLoading(false); @@ -207,7 +266,14 @@ export default compose( saveChanges(); } - function disableCat(index) { + function disableCat(item) { + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } const items: any[] = reorder(categories, index, categories.length - 1); items[categories.length - 1].active = false; items.forEach((item: any, i) => { @@ -218,8 +284,15 @@ export default compose( saveChanges(); } - async function enableCat(index) { + async function enableCat(item) { setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } const point = await categories[index]; point.active = true; setIsLoading(false); @@ -227,27 +300,54 @@ export default compose( saveChanges(); } - async function deleteCat(index) { + async function deleteCat(item) { setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } await categories.splice(index, 1); setIsLoading(false); saveChanges(); } - async function createNewCat() { + async function deletePrim(item) { setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } + await categories.splice(index, 1); + setIsLoading(false); + + saveChanges(); + } + async function createNewCat() { + setIsLoading(true); + let type = 1 + if (usePrimary) { + type = 2 + } await categories.unshift({ name: newCatName, - select_type: 2, + select_type: type, options: [], active: true, team: team.name, id: newCatName, + isPrimary: usePrimary, }); + console.log(categories) - setNewCatName(""); + setNewCatName("Please edit name of new category"); setIsLoading(false); saveChanges(); @@ -258,7 +358,6 @@ export default compose( // } async function saveChanges() { - setIsLoading(true); try { const collections = firestore.collection("categories"); await collections @@ -320,8 +419,6 @@ export default compose(
); } - - console.log(document.cookie); return (
{(document.cookie == "" || document.cookie == null) && ( @@ -384,6 +481,28 @@ export default compose( */}
+ {usePrimary? ( +
+ {categories + .filter( + (item, value) => item.isPrimary) + .map((item, index) => ( +

+ +

+ )) + } +
) :(<>)} {(provided, snapshot) => ( @@ -391,7 +510,10 @@ export default compose( {...provided.droppableProps} ref={provided.innerRef} > - {categories.map((item, index) => ( + {categories + .filter( + (item, value) => !item.isPrimary) + .map((item, index) => ( ( )} + setShowModal(false)} dialogClassName="myModal" scrollable>
From 9cb00ada2b93453d01278cf99febeef16c6e6cc8 Mon Sep 17 00:00:00 2001 From: tsun90 <52758623+tsun900@users.noreply.github.com> Date: Tue, 1 Oct 2024 04:12:37 -0400 Subject: [PATCH 4/7] style fix --- src/components/map/mapStyles.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/map/mapStyles.css b/src/components/map/mapStyles.css index d754f85..61c7621 100644 --- a/src/components/map/mapStyles.css +++ b/src/components/map/mapStyles.css @@ -76,13 +76,12 @@ } .custom-checkbox input[type="checkbox"]:hover { - border: #0A1D7C; + border: #0A1D7C !important; } .custom-checkbox input[type="checkbox"]:active { background-color: #0056b3 !important; } - .custom-padder { padding-left: 20px; margin-bottom: 8px; @@ -105,6 +104,9 @@ font-size: 16px !important; } .subMenu { + display: flex !important; + justify-content: space-between !important; + align-items: center !important; background: none !important; border: none !important; margin: 0; @@ -112,11 +114,10 @@ cursor: pointer; color: black !important; font-size: 16px !important; - text-align: center; width: 100%; } .subMenu:hover { - background: #9F9999 !important + background: rgba(19, 70, 170, 0.06) !important } .astext:hover { color: black !important From 708fcc18b8d4ec097a6fa7c1dd69b823f32554a8 Mon Sep 17 00:00:00 2001 From: tsun900 Date: Tue, 1 Oct 2024 19:00:14 -0400 Subject: [PATCH 5/7] bugfix --- src/components/template/PrimaryCell.tsx | 3 ++- src/components/template/index.tsx | 26 +++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/components/template/PrimaryCell.tsx b/src/components/template/PrimaryCell.tsx index 4a74716..176b7e6 100644 --- a/src/components/template/PrimaryCell.tsx +++ b/src/components/template/PrimaryCell.tsx @@ -21,6 +21,7 @@ export default ({ disableCat, enableCat, addOption, + changeColor, removeOption, changeType, rename, @@ -155,7 +156,7 @@ export default ({ className="options-color" placeholder="Choose your color" defaultValue={option.color} - onChange={(e) => setColor((e.target as HTMLInputElement).value)} + onChange={(e) => changeColor((e.target as HTMLInputElement).value, option.value, item)} />
{option.value} diff --git a/src/components/template/index.tsx b/src/components/template/index.tsx index c4ea3b2..ff87e26 100644 --- a/src/components/template/index.tsx +++ b/src/components/template/index.tsx @@ -199,6 +199,31 @@ export default compose( saveChanges(); } + async function changeColor(color, name, item) { + setIsLoading(true); + let index = 0; + for (let i of categories) { + if(i.name === item.name) { + break; + } + index++; + } + const point = categories[index]; + index = 0 + for (let i of point.options) { + console.log(i) + if(i.value === name) { + break; + } + index++; + } + point.options[index].color = color + setIsLoading(false); + + saveChanges(); + } + + async function addOption(name, item) { setIsLoading(true); let index = 0; @@ -497,6 +522,7 @@ export default compose( changeType={changeType} rename={rename} addOption={addPrimOption} + changeColor={changeColor} removeOption={removeOption} />

From 2c9e54aab3fd4e7b0cc6fc2c40171a432794c47c Mon Sep 17 00:00:00 2001 From: Athanasios Taprantzis Date: Sat, 5 Oct 2024 12:35:57 -0500 Subject: [PATCH 6/7] Add "Delete Filter" on description filters --- src/components/template/CategoryCell.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/template/CategoryCell.tsx b/src/components/template/CategoryCell.tsx index 27c680f..a05d14c 100644 --- a/src/components/template/CategoryCell.tsx +++ b/src/components/template/CategoryCell.tsx @@ -203,9 +203,6 @@ export default ({
-
-

deleteCat(item)}>Delete Filter

-
) : (
@@ -213,6 +210,9 @@ export default ({ property type
)} +
+

deleteCat(item)}>Delete Filter

+
From 081f92cf649385c5f7692cca54ab1a647ae062f7 Mon Sep 17 00:00:00 2001 From: Athanasios Taprantzis Date: Sat, 5 Oct 2024 14:41:23 -0500 Subject: [PATCH 7/7] Disable primary single select filter --- src/components/template/index.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/template/index.tsx b/src/components/template/index.tsx index ff87e26..04c4189 100644 --- a/src/components/template/index.tsx +++ b/src/components/template/index.tsx @@ -456,23 +456,14 @@ export default compose(

Template Builder

-
- {/* */} + {/*

Enable Primary Single Select Filter

setUsePrimary(!usePrimary)}/>

Activate to create a single filtering group where you can color code the options. We recommend if you have a primary filtering group.

-
+
*/} {message != null &&

{message}

}

Filters