Implement stock viewing functionalities

src/lib/home/Tag.svelte

@@ -4,6 +4,9 @@
 </script>
 
 <span
+	on:click={() => {
+		dispatch('click');
+	}}
 	class="text-[#5E9486] text-xs md:text-sm lg:text-base cursor-pointer mt-[10px] border-solid border-[1px] border-[#5E9486] px-[5px] py-[2px] w-[30%] md:w-[22%] lg:w-[15%] text-center rounded-full"
 	><slot /></span
 >

src/lib/home/TagSection.svelte

@@ -1,15 +1,30 @@
 <script lang="ts">
+	import { push } from 'svelte-spa-router';
 	import Tag from './Tag.svelte';
 
-	export let tags: string[];
+	export let tags: any;
 	export let title: string;
 </script>
 
-<div class="mt-[30px]">
-	<h1 class="text-lg">{title}</h1>
+<div class="mt-[50px]">
+	<h1 class="text-xl font-bold">{title}</h1>
 	<div class="w-full flex items-center justify-between flex-wrap">
-		{#each tags as tag}
-			<Tag>{tag}</Tag>
-		{/each}
+		{#await tags}
+			<h1>Loading....</h1>
+		{:then tags}
+			{#if tags.length == 0}
+				<p class="font-light">No available results!</p>
+			{:else}
+				{#each tags as tag}
+					<Tag
+						on:click={() => {
+							push(
+								`/medicine/${tag.chemicalName}?name=${tag.name}`
+							);
+						}}>{tag.name}</Tag
+					>
+				{/each}
+			{/if}
+		{/await}
 	</div>
 </div>

src/lib/medicine/TableRow.svelte

@@ -6,19 +6,20 @@
 	export let stock: number;
 	export let index: number;
 	export let id;
+	export let medicineId: string;
 </script>
 
 <tr
 	class={`${
 		index % 2 == 0 ? 'bg-[#CEE8B8]' : 'bg-white'
 	} rounded-full text-xs md:text-base cursor-pointer `}
 	on:click={() => {
-		push(`/pharmacy/${id}`);
+		push(`/pharmacy/${id}?med=${medicineId}`);
 	}}
 >
 	<td
 		class="w-[40%] py-[15px] p-[20px] rounded-l-lg md:rounded-l-full align-middle"
-		><a href={`/pharmacy/${id}`} use:link>{name}</a></td
+		><a href={`/pharmacy/${id}?med=${medicineId}`} use:link>{name}</a></td
 	>
 	<td class="w-[40%] py-[15px] p-[20px]  align-middle">{contactNo}</td>
 	<td class="w-[10%] py-[15px] p-[20px] align-middle">{mrp}</td>

src/routes/Home.svelte

@@ -15,7 +15,38 @@
 		const response = await fetch(url);
 		const data = await response.json();
 
-		return data.medicines.map((i) => {
+		console.log(data);
+
+		return {
+			medicines: data.medicines.map((i) => {
+				return {
+					name: i.name,
+					totalStock: i.stock,
+					mrp: i.pricePerUnit,
+					id: i._id,
+					chemicalName: i.chemicalName,
+				};
+			}),
+			suggestions: data.suggestions.map((i) => {
+				return {
+					name: i.name,
+					totalStock: i.stock,
+					mrp: i.pricePerUnit,
+					id: i._id,
+					chemicalName: i.chemicalName,
+				};
+			}),
+		};
+	};
+
+	const getStockAvailability = async (status) => {
+		let url = `${API_ENDPOINT}/user/medicine?availability=${status}`;
+		const response = await fetch(url);
+		const data = await response.json();
+
+		console.log(data);
+
+		return data.medicines.slice(0, 8).map((i) => {
 			return {
 				name: i.name,
 				totalStock: i.stock,
@@ -28,15 +59,9 @@
 
 	$: promise = fetchData(searchValue, selectValue);
 
-	// $: medicines = $newMed.filter(
-	// 	(i) =>
-	// 		i.name.toLowerCase().includes(searchValue.toLowerCase()) &&
-	// 		(selectValue === 'All in Sri Lanka' ||
-	// 			i.stocks.find(
-	// 				(st) =>
-	// 					st.District.toLowerCase() === selectValue.toLowerCase()
-	// 			))
-	// );
+	const outOfStocks = getStockAvailability('OS');
+	const limitedStocks = getStockAvailability('LS');
+	const availableStocks = getStockAvailability('AV');
 </script>
 
 <Layout isHome={true}>
@@ -67,8 +92,8 @@
 		{#if searchValue.trim().length > 0}
 			{#await promise}
 				<p>Loading...</p>
-			{:then medicines}
-				{#if medicines.length == 0}
+			{:then data}
+				{#if data.medicines.length == 0}
 					<p
 						class="text-[#5E9486] w-full text-center my-[10px] font-bold text-xl"
 					>
@@ -94,65 +119,22 @@
 								</tr>
 							</thead>
 							<tbody>
-								{#each medicines as medicine, index (medicine.id)}
+								{#each data.medicines as medicine, index (medicine.id)}
 									<TableRow {...medicine} {index} />
 								{/each}
 							</tbody>
 						</table>
 					</div>
 				{/if}
-				<TagSection
-					title="Similar Searches"
-					tags={[
-						'Value 1',
-						'Value 2',
-						'Value 3',
-						'Value 4',
-						'Value 5',
-						'Value 6',
-						'Value 7',
-					]}
-				/>
+				<TagSection title="Suggestions" tags={data.suggestions} />
 			{:catch error}
 				<p style="color: red">{error.message}</p>
 			{/await}
 		{:else}
-			<TagSection
-				title="Empty Stocks"
-				tags={[
-					'Value 1',
-					'Value 2',
-					'Value 3',
-					'Value 4',
-					'Value 5',
-					'Value 6',
-					'Value 7',
-				]}
-			/>
-			<TagSection
-				title="Least Available Stocks"
-				tags={[
-					'Value 1',
-					'Value 2',
-					'Value 3',
-					'Value 4',
-					'Value 5',
-					'Value 6',
-					'Value 7',
-				]}
-			/>
-			<TagSection
-				title="Most Searched"
-				tags={[
-					'Value 1',
-					'Value 2',
-					'Value 3',
-					'Value 4',
-					'Value 5',
-					'Value 6',
-					'Value 7',
-				]}
-			/>
+			<TagSection title="Empty Stocks" tags={outOfStocks} />
+
+			<TagSection title="Limited Stocks" tags={limitedStocks} />
+			<TagSection title="Available Stocks" tags={availableStocks} />
 		{/if}
 	</section>
 </Layout>

src/routes/Medicine.svelte

@@ -109,6 +109,7 @@
 					mrp: i.pricePerUnit,
 					stock: i.stock,
 					id: i.pharmacy._id,
+					medicineId: i._id,
 				};
 			}),
 			unAvailablePlaces: data.notSelectedMedicine.map((i) => {
@@ -118,6 +119,7 @@
 					mrp: i.pricePerUnit,
 					stock: i.stock,
 					id: i.pharmacy._id,
+					medicineId: i._id,
 				};
 			}),
 		};

src/routes/Pharmacy.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { link } from 'svelte-spa-router';
+	import { link, querystring } from 'svelte-spa-router';
 	import Layout from '../lib/Layout.svelte';
 	import Icon from 'svelte-icons-pack/Icon.svelte';
 	import LocationIcon from 'svelte-icons-pack/fa/FaSolidLocationArrow';
@@ -13,6 +13,10 @@
 	const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN;
 
 	mapboxgl.accessToken = MAPBOX_TOKEN;
+	let medicineId = $querystring
+		.split('&')[0]
+		.split('=')[1]
+		.replace('%20', ' ');
 	let map;
 	onMount(() => {
 		map = new mapboxgl.Map({
@@ -54,7 +58,7 @@
 	};
 
 	const fetchData = async () => {
-		const url = `${API_ENDPOINT}/user/pharmacies/${params.id}`;
+		const url = `${API_ENDPOINT}/user/pharmacies/${params.id}?med=${medicineId}`;
 		const response = await fetch(url);
 		const data = await response.json();
 		const address = data.pharmacy.contact.address.replace(' ', '+');