#DLF-156 - Ajout d'un filtre par producer en utilisant le suggestProd…

…ucers azure
sheaft-app · Dec 20, 2020 · 3c72fbb · 3c72fbb
1 parent 1b7bba3
commit 3c72fbb
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 68 deletions.
diff --git a/src/routes/search-products/FiltersModal.svelte b/src/routes/search-products/FiltersModal.svelte
@@ -1,74 +1,159 @@
 <script>
-  import GetRouterInstance from "../../services/SheaftRouter.js";
-  import CategorySelect from "./../../components/controls/CategorySelect.svelte";
-  import Toggle from "./../../components/controls/Toggle.svelte";
-  import SortingSelect from "./SortingSelect.svelte";
-  import Icon from "svelte-awesome";
-  import { faTimes } from "@fortawesome/free-solid-svg-icons";
-
-  const routerInstance = GetRouterInstance();
-  export let close, filters;
-
-  const toggleBio = () => {
-    let values = routerInstance.getQueryParams();
-
-    if (!values["labels"]) {
-      routerInstance.replaceQueryParams({
-        labels: ["bio"]
-      });
-      return close();
-    }
-     
-
-    if (values["labels"].includes("bio")) {
-      routerInstance.replaceQueryParams({
-        labels: values["labels"].split(",").filter(t => t !== "bio")
-      });
-      return close();
-    }
-
-    routerInstance.replaceQueryParams({
-      labels: [values["labels"], "bio"]
-    });
-
-    return close();
-  };
-
-  $: activeLabels = routerInstance.getQueryParams()["labels"]
-    ? routerInstance.getQueryParams()["labels"]
-    : [];
+	import Select from "./../../components/controls/select/Select.svelte";
+	import GetRouterInstance from "../../services/SheaftRouter.js";
+	import GetGraphQLInstance from "../../services/SheaftGraphQL.js";
+	import CategorySelect from "./../../components/controls/CategorySelect.svelte";
+	import Toggle from "./../../components/controls/Toggle.svelte";
+	import SortingSelect from "./SortingSelect.svelte";
+	import Icon from "svelte-awesome";
+	import ProducerItem from "./ProducerItem.svelte";
+	import { faSearch, faTimes } from "@fortawesome/free-solid-svg-icons";
+	import { SUGGEST_PRODUCER } from "./queries";
+
+	const routerInstance = GetRouterInstance();
+	const graphQLInstance = GetGraphQLInstance();
+	export let close, filters, producer;
+	let isLoading = false;
+
+	const getOptionLabel = (option) => {
+		if (
+			!option ||
+			!option.address ||
+			!option.address.city ||
+			!option.address.zipcode
+		)
+			return "";
+
+		return `<p class="leading-none mt-1 uppercase">${option.name}</p><p class="leading-none text-xs mt-1 uppercase">${option.address.zipcode} ${option.address.city}</p>`;
+	};
+	const getSelectionLabel = (option) => option.name;
+
+	const loadData = async (filterText) => {
+		var res = await graphQLInstance.query(SUGGEST_PRODUCER, {
+			input: { text: filterText },
+		});
+		if (!res.success) {
+			//TODO
+			return [];
+		}
+
+		return res.data;
+	};
+
+	const handleSelect = (selectedItem) => {
+		routerInstance.replaceQueryParams({
+			producerId: selectedItem.detail.id,
+		});
+
+		return close();
+	};
+
+	const toggleBio = () => {
+		let values = routerInstance.getQueryParams();
+
+		if (!values["labels"]) {
+			routerInstance.replaceQueryParams({
+				labels: ["bio"],
+			});
+			return close();
+		}
+
+		if (values["labels"].includes("bio")) {
+			routerInstance.replaceQueryParams({
+				labels: values["labels"].split(",").filter((t) => t !== "bio"),
+			});
+			return close();
+		}
+
+		routerInstance.replaceQueryParams({
+			labels: [values["labels"], "bio"],
+		});
+
+		return close();
+	};
+
+	$: if (!producer) {
+		routerInstance.replaceQueryParams({
+			producerId: producer,
+		});
+	}
+
+	$: activeLabels = routerInstance.getQueryParams()["labels"]
+		? routerInstance.getQueryParams()["labels"]
+		: [];
 </script>
 
 <div class="flex justify-between items-center pb-2">
-  <p class="text-lg font-medium">Filtres</p>
-  <button on:click={() => close()}>
-    <Icon data={faTimes} />
-  </button>
+	<p class="text-lg font-medium">Filtres</p>
+	<button on:click={() => close()}>
+		<Icon data={faTimes} />
+	</button>
 </div>
 <hr />
 <div class="mt-6">
-  <label class="block uppercase tracking-wide text-xs font-bold mb-2">
-    Tri
-  </label>
-  <SortingSelect {filters} callback={close} inline={true} />
+	<label class="block uppercase tracking-wide text-xs font-bold mb-2">
+		Tri
+	</label>
+	<SortingSelect {filters} callback={close} inline={true} />
+</div>
+<div class="mt-6">
+	<div class="themed">
+		<label class="block uppercase tracking-wide text-xs font-bold mb-2">
+			Producteur
+		</label>
+		<Select
+			loadOptions={(text) => loadData(text)}
+			{getOptionLabel}
+			isDisabled={isLoading}
+			isWaiting={isLoading}
+			icon={faSearch}
+			iconClasses="mr-3 text-accent"
+			{getSelectionLabel}
+			on:select={handleSelect}
+			isClearable={true}
+			showChevron={false}
+			hideSelectedOnFocus={true}
+			optionIdentifier="id"
+			placeholder="Entrez le nom d'un producteur"
+			inputAttributes={{ style: 'cursor: pointer !important;' }}
+			Item={ProducerItem}
+			noOptionsMessage="Aucune correspondance trouvée pour ce nom"
+			bind:selectedValue={producer}
+			containerStyles="height: 60px; font-weight: 600; color: #4a5568; padding-left:1em;" />
+	</div>
 </div>
 <div class="mt-6">
-  <label class="block uppercase tracking-wide text-xs font-bold mb-2">
-    Labels
-  </label>
-  <Toggle
-    classNames="ml-3"
-    isChecked={activeLabels.includes('bio')}
-    onChange={() => toggleBio()}>
-     <span>Produit issu de l'agriculture biologique</span>
-  </Toggle>
+	<label class="block uppercase tracking-wide text-xs font-bold mb-2">
+		Labels
+	</label>
+	<Toggle
+		classNames="ml-3"
+		isChecked={activeLabels.includes('bio')}
+		onChange={() => toggleBio()}>
+		<span>Produit issu de l'agriculture biologique</span>
+	</Toggle>
 </div>
 <div class="mt-6">
-  <label class="block uppercase tracking-wide text-xs font-bold mb-2">
-    Catégories
-  </label>
-  <CategorySelect
-    callback={close}
-    withSearch={true}
-    grid="grid grid-cols-2 lg:grid-cols-3 gap-2" />
+	<label class="block uppercase tracking-wide text-xs font-bold mb-2">
+		Catégories
+	</label>
+	<CategorySelect
+		callback={close}
+		withSearch={true}
+		grid="grid grid-cols-2 lg:grid-cols-3 gap-2" />
 </div>
+
+<style lang="scss">
+	.themed {
+		display: contents;
+		--cursor: text;
+		--padding: 22px 16px;
+		--borderFocusColor: #a0aec0;
+		--borderHoverColor: #a0aec0;
+		--border: 1px solid #cbd5e0;
+		--inputPadding: 45px;
+		--inputColor: #205164;
+		--indicatorTop: 16px;
+		--indicatorColor: #ff4081;
+	}
+</style>
diff --git a/src/routes/search-products/ProducerItem.svelte b/src/routes/search-products/ProducerItem.svelte
@@ -0,0 +1,13 @@
+<script>
+    import Icon from "svelte-awesome";
+    import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
+    export let item = null;
+</script>
+
+<div class="cursor-pointer py-2 px-1 border-b border-gray-400 border-solid hover:bg-gray-200 flex items-center">
+    <Icon data={faMapMarkerAlt} class="mr-5 ml-3" />
+    <div>
+        <p class="font-semibold">{item.name}</p>
+        <p class="text-sm font-normal">{item.address.zipcode} {item.address.city}</p>
+    </div>
+</div>
diff --git a/src/routes/search-products/SearchProducts.svelte b/src/routes/search-products/SearchProducts.svelte
@@ -101,7 +101,7 @@
 	};
 
 	const showFiltersModal = () => {
-		open(FiltersModal, { filters, visibleNav: true });
+		open(FiltersModal, { filters, visibleNav: true, producer });
 	};
 
 	const renderSort = (sort) => {
@@ -141,8 +141,10 @@
 			}
 		}
 
-		if (values["producerId"] && values["producerId"] <= 0)
+		if (values["producerId"] && values["producerId"] <= 0){
 			values["producerId"] = null;
+			producer = null;
+		}
 
 		if (values["maxDistance"] && values["maxDistance"].length > 0) {
 			values["maxDistance"] = parseInt(values["maxDistance"]);
@@ -360,8 +362,13 @@
 	});
 
 	let currentProducerId = null;
-	const GetProducerName = async (producerId) => {
-		if (!producerId || producerId.length <= 0 || currentProducerId == producerId) return;
+	const GetProducerFilter = async (producerId) => {
+		if(currentProducerId == producerId) return;
+
+		if (!producerId || producerId.length <= 0){ 
+			producer = null;
+			return;
+		}
 
 		currentProducerId = producerId;
 		var result = await graphQLInstance.query(
@@ -375,7 +382,7 @@
 		producer = result.data;
 	};
 	
-	$: GetProducerName($filters.producerId);
+	$: GetProducerFilter($filters.producerId);
 	$: productsCount = $cartItems.reduce((sum, product) => {
 		return sum + (product.quantity || 0);
 	}, 0);
@@ -595,7 +602,7 @@
 							on:click={() => clearProducer()}
 							style="font-size: .6rem"
 							class="mx-1 mb-2 px-3 h-6 rounded-full font-semibold flex
-								items-center bg-gray-200">
+								items-center bg-gray-200 cursor-pointer">
 							producteur: '{producer.name}'
 							<Icon data={faTimesCircle} scale=".7" class="ml-2" />
 						</span>

diff --git a/src/routes/search-products/queries.js b/src/routes/search-products/queries.js
@@ -124,3 +124,16 @@ export const GET_PRODUCER_NAME = gql`
 		}
 	}
 `;
+
+export const SUGGEST_PRODUCER = gql`
+	query SuggestProducer($input: SearchTermsInput!) {
+		suggestProducers(input: $input) {
+			id
+			name
+			address{
+				zipcode
+				city
+			}
+		}
+	}
+`;