fix(marketplace): Show materials details the same way on auction as i…

frontend/marketplace/src/components/AuctionResultsCard.vue

@@ -2,6 +2,7 @@
 import type { MarketplaceListing } from "@/types/GraphqlSchema";
 import router from "@/router";
 import auctionCard from "@/assets/auctionCard.png";
+import type { MaterialProperty } from "@/types/GraphqlSchema";
 import {
   getDetailsList,
   prettifyCardProperty,
@@ -21,10 +22,7 @@ export interface AuctionResultsCardProps {
 interface CardDetailsList {
   applicant: string[];
   location: string[];
-  material: {
-    key: string;
-    value: string;
-  }[][];
+  material: MaterialProperty[][];
   volume: number;
   thumbnailUrl: string;
   image: string[];

frontend/marketplace/src/components/CreditTabContent.vue

@@ -35,8 +35,8 @@ const getCreditsData = async () => {
     query {
     creditBalances(
     first:${itemsPerPage.value},offset:${
-        (pageNumber.value - 1) * itemsPerPage.value
-      }
+      (pageNumber.value - 1) * itemsPerPage.value
+    }
     filter:{
       wallet:{
         address:{equalTo:"${walletAddress}"}
@@ -93,11 +93,9 @@ const getCreditsData = async () => {
 
 const loadQueryData = (query: string) => {
   showSpinner.value = true;
-  const { result, loading, error, refetch } = useQuery(
-    gql`
-      ${query}
-    `
-  );
+  const { result, loading, error, refetch } = useQuery(gql`
+    ${query}
+  `);
   data.value = { result, loading, error };
   showSpinner.value = false;
   setInterval(() => {

frontend/marketplace/src/components/CustomGoogleMap.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { GOOGLE_MAPS_API_KEY } from "@/config/config";
-import { GoogleMap, Marker } from "vue3-google-map";
+import { GoogleMap, Marker, MarkerCluster } from "vue3-google-map";
 import { ref, watch } from "vue";
 
 export interface CustomGoogleMapProps {

frontend/marketplace/src/components/ProjectDetailMaterial.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { MaterialProperty } from "@/types/GraphqlSchema";
+import {
+  findPlasticTypeInMaterial,
+  stripPlasticTypeFromMaterial,
+  prettifyCardProperty,
+} from "@/utils/utils";
+
+interface Props {
+  materials: MaterialProperty[][];
+  label: string;
+}
+defineProps<Props>();
+</script>
+<template>
+  <div>
+    <h2 class="details-label">{{ label }}</h2>
+    <div v-for="(material, index) in materials" :key="`material-${index}`">
+      <h3>{{ findPlasticTypeInMaterial(material)?.value }}</h3>
+      <ul class="list-disc ml-6">
+        <li
+          v-for="property in stripPlasticTypeFromMaterial(material)"
+          :key="property.key"
+          class="text-title14"
+        >
+          {{ prettifyCardProperty(property) }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+

frontend/marketplace/src/pages/AuctionDetails.vue

@@ -1,28 +1,51 @@
 <script setup lang="ts">
+import type { MaterialProperty } from "@/types/GraphqlSchema";
 import BuyCredits from "@/components/BuyCredits.vue";
 import CustomGoogleMap from "@/components/CustomGoogleMap.vue";
 import CustomSpinner from "@/components/CustomSpinner.vue";
 import ImageCarousel from "@/components/ImageCarousel.vue";
 import ImageGallery from "@/components/ImageGallery.vue";
 import ProjectDetailContent from "@/components/ProjectDetailContent.vue";
+import ProjectDetailMaterial from "@/components/ProjectDetailMaterial.vue";
 import { useRoute } from "@/router";
-import { convertIPFStoHTTPS } from "@/utils/utils";
+import {
+  convertIPFStoHTTPS,
+  uniqueMaterials,
+  findPlasticTypeInMaterial,
+} from "@/utils/utils";
 import { useQuery } from "@vue/apollo-composable";
 import gql from "graphql-tag";
 import { onMounted, ref, watch } from "vue";
 import { toast } from "vue3-toastify";
 
+interface AuctionDetails {
+  applicant: string;
+  location: string[];
+  material: MaterialProperty[][];
+  volume: number;
+  image: string[];
+  file: {
+    url: string;
+    name: string;
+  }[];
+  locationPointers: {
+    lat: number;
+    lng: number;
+  }[];
+  registrationDate: string;
+}
+
 const router = useRoute();
 
 const data = ref();
 const orderHistory = ref();
 const showSpinner = ref(true);
 const denom = ref("");
 const owner = ref("");
-const auctionDetails = ref({
+const auctionDetails = ref<AuctionDetails>({
   applicant: "",
   location: [""],
-  material: [""],
+  material: [],
   volume: 0,
   image: [""],
   file: [{ url: "", name: "" }],
@@ -33,17 +56,17 @@ const pricePerCreditDenom = ref("");
 const plasticType = ref("");
 
 const getDetailsList = (data: any, materialVolume: number) => {
-  let applicantArray: string[] = [];
-  let locationArray: string[] = [];
-  let locationPointersArray: {
+  const applicantArray: string[] = [];
+  const locationArray: string[] = [];
+  const locationPointersArray: {
     lat: number;
     lng: number;
   }[] = [];
-  let imageArray: string[] = [];
-  let fileArray: { url: string; name: string }[] = [];
-  let materialArray: { key: string; value: string }[] = [];
-  let volume = materialVolume;
-  let registrationDateArray: string[] = [];
+  const imageArray: string[] = [];
+  const fileArray: { url: string; name: string }[] = [];
+  const materialArray: MaterialProperty[][] = [];
+  const volume = materialVolume;
+  const registrationDateArray: string[] = [];
 
   data?.map((item: any) => {
     item.applicantDataByCreditDataId.nodes.map((node: any) => {
@@ -53,9 +76,9 @@ const getDetailsList = (data: any, materialVolume: number) => {
     item.eventData.nodes.map((node: any) => {
       locationArray.push(node.country);
       locationPointersArray.push({ lat: node.latitude, lng: node.longitude });
-      materialArray.push(...node.material.nodes);
+      materialArray.push(node.material.nodes);
       registrationDateArray.push(
-        new Date(node.registrationDate).toLocaleDateString()
+        new Date(node.registrationDate).toLocaleDateString(),
       );
     });
 
@@ -69,18 +92,14 @@ const getDetailsList = (data: any, materialVolume: number) => {
       });
     });
   });
-
-  const uniqueMaterialArray = materialArray.filter(
-    (obj, index, self) =>
-      index ===
-      self.findIndex((o) => o.key === obj.key && o.value === obj.value)
-  );
+  const uniqueMaterialArray = uniqueMaterials(materialArray);
   plasticType.value =
-    materialArray.find((item) => item.key === "plasticType")?.value || "";
+    findPlasticTypeInMaterial(uniqueMaterialArray[0])?.value ?? "";
+
   return {
     applicant: applicantArray[0],
     location: Array.from(new Set(locationArray)),
-    material: uniqueMaterialArray.map((item) => item.value),
+    material: uniqueMaterialArray,
     volume: volume,
     image: imageArray,
     file: fileArray,
@@ -172,11 +191,11 @@ const getAuctionDetails = (id: string | string[]) => {
     auctionDetails.value = getDetailsList(
       value.marketplaceListings?.nodes[0].creditCollection.creditData.nodes,
       parseInt(
-        value.marketplaceListings?.nodes[0].creditCollection.activeAmount
+        value.marketplaceListings?.nodes[0].creditCollection.activeAmount,
       ) +
         parseInt(
-          value.marketplaceListings?.nodes[0].creditCollection.retiredAmount
-        )
+          value.marketplaceListings?.nodes[0].creditCollection.retiredAmount,
+        ),
     );
     pricePerCreditDenom.value =
       value.marketplaceListings?.nodes[0].pricePerCreditDenom;
@@ -277,10 +296,9 @@ onMounted(() => {
               .creditType
           "
         />
-        <ProjectDetailContent
+        <ProjectDetailMaterial
           label="Material"
-          :value="auctionDetails?.material"
-          list
+          :materials="auctionDetails?.material"
         />
         <ProjectDetailContent label="Kgs per credit" value="1" />
         <ProjectDetailContent

frontend/marketplace/src/pages/HomePage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import CustomSpinner from "@/components/CustomSpinner.vue";
 import AuctionSection from "@/components/AuctionSection.vue";
 import HomePageHeroBanner from "@/components/HomePageHeroBanner.vue";
 import { DEFAULT_CREDIT_TYPE } from "@/config/config";
@@ -73,7 +74,7 @@ const handleSearch = (filterValues: any) => {
     <CustomSpinner :visible="showSpinner" />
     <template v-if="!showSpinner">
       <AuctionSection
-        :auction-array="data?.result?.marketplaceListings?.nodes"
+        :auction-array="data?.result?.marketplaceListings?.nodes ?? []"
         :filter-values="filter"
       />
     </template>

frontend/marketplace/src/types/GraphqlSchema.ts

@@ -189,6 +189,11 @@ interface Message {
   txHash: string;
 }
 
+interface MaterialProperty {
+  key: string;
+  value: string;
+}
+
 export type {
   Block,
   Transaction,
@@ -210,4 +215,5 @@ export type {
   MaterialData,
   MetadataUri,
   Message,
+  MaterialProperty,
 };

frontend/marketplace/src/utils/utils.ts

@@ -1,3 +1,4 @@
+import type { MaterialProperty } from "@/types/GraphqlSchema";
 import { HTTPS_FILE_URL } from "@/config/config";
 
 export const convertIPFStoHTTPS = (url: string) => {
@@ -6,7 +7,7 @@ export const convertIPFStoHTTPS = (url: string) => {
   return HTTPS_URL;
 };
 
-const uniqueMaterials = (
+export const uniqueMaterials = (
   materials: Array<Array<{ key: string; value: string }>>,
 ): Array<Array<{ key: string; value: string }>> => {
   // Convert each material to a string representation
@@ -29,7 +30,7 @@ export const getDetailsList = (data: any) => {
   const applicantArray: string[] = [];
   const locationArray: string[] = [];
   const imageArray: string[] = [];
-  const materialArray: { key: string; value: string }[][] = [];
+  const materialArray: MaterialProperty[][] = [];
   let volume: number = 0;
   let thumbnailUrl: string = "";
   const locationPointersArray: {
@@ -153,26 +154,20 @@ export const upperCaseFirstLetter = (string: string) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
-export const prettifyCardProperty = (property: {
-  key: string;
-  value: string;
-}): string => {
+export const prettifyCardProperty = (property: MaterialProperty): string => {
   return property.value.toLowerCase() === "yes" ||
     property.value.toLowerCase() === "no"
     ? upperCaseFirstLetter(property.key) + ": " + property.value.toLowerCase()
     : property.value;
 };
 
-interface Material {
-  key: string;
-  value: string;
-}
-
-export const stripPlasticTypeFromMaterial = (arrayOfProperties: Material[]) => {
+export const stripPlasticTypeFromMaterial = (
+  arrayOfProperties: MaterialProperty[],
+) => {
   return arrayOfProperties.filter((property) => property.key !== "plasticType");
 };
 
-export const findPlasticTypeInMaterial = (material: Material[]) => {
+export const findPlasticTypeInMaterial = (material: MaterialProperty[]) => {
   return material.find((property) => property.key === "plasticType");
 };