From bb641f9d0afa53fe014938ada3c0998c68a5ba56 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 13 Dec 2023 22:15:33 +0100
Subject: [PATCH 1/6] fix(marketplace): Scroll to top after navigation please

---
 frontend/marketplace/src/router/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/marketplace/src/router/index.ts b/frontend/marketplace/src/router/index.ts
index 056120f6..a9b5c206 100644
--- a/frontend/marketplace/src/router/index.ts
+++ b/frontend/marketplace/src/router/index.ts
@@ -11,6 +11,10 @@ import AuctionPaymentSuccessful from "@/pages/AuctionPaymentSuccessful.vue";
 import AuctionPaymentCancelled from "@/pages/AuctionPaymentCancelled.vue";
 
 const router = createRouter({
+  scrollBehavior: () => {
+    // always scroll to top after navigation
+    return { top: 0 };
+  },
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {

From 1cb2103e4970409fe836e32b46942de97a6f48b1 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 13 Dec 2023 22:17:42 +0100
Subject: [PATCH 2/6] fix(marketplace): s/COLLECTOR ORGANISATION/COLLECTION
 ORGANISATION

---
 .../marketplace/src/components/SearchBar.vue  | 44 ++++++++++++++++---
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/marketplace/src/components/SearchBar.vue b/frontend/marketplace/src/components/SearchBar.vue
index 19d3a5a0..084a9f14 100644
--- a/frontend/marketplace/src/components/SearchBar.vue
+++ b/frontend/marketplace/src/components/SearchBar.vue
@@ -87,7 +87,15 @@ const applicantData: any = useQuery(gql`
           <p class="text-title14 text-dropDownText">Location</p>
           <SearchFilterSelect
             select
-            :options="Array.from(new Set(locationData?.result.value?.countries?.nodes.map((item: any) => item.id)))"
+            :options="
+              Array.from(
+                new Set(
+                  locationData?.result.value?.countries?.nodes.map(
+                    (item: any) => item.id,
+                  ),
+                ),
+              )
+            "
             v-model="filterValues.location"
             placeholder="Select Location"
           />
@@ -110,9 +118,17 @@ const applicantData: any = useQuery(gql`
           />
         </div>
         <div>
-          <p class="filter-subtitle">COLLECTOR ORGANISATION</p>
+          <p class="filter-subtitle">COLLECTION ORGANISATION</p>
           <SearchFilterSelect
-            :options="Array.from(new Set(applicantData?.result.value?.applicantData?.nodes.map((item: any)=>item.name)))"
+            :options="
+              Array.from(
+                new Set(
+                  applicantData?.result.value?.applicantData?.nodes.map(
+                    (item: any) => item.name,
+                  ),
+                ),
+              )
+            "
             v-model="filterValues.organization"
             placeholder="Select collector"
           />
@@ -170,7 +186,15 @@ const applicantData: any = useQuery(gql`
       <div class="filter-box">
         <p class="filter-subtitle">LOCATION</p>
         <SearchFilterSelect
-          :options="Array.from(new Set(locationData?.result.value?.countries?.nodes.map((item: any)=>item.id)))"
+          :options="
+            Array.from(
+              new Set(
+                locationData?.result.value?.countries?.nodes.map(
+                  (item: any) => item.id,
+                ),
+              ),
+            )
+          "
           v-model="filterValues.location"
           placeholder="Select Location"
         />
@@ -194,9 +218,17 @@ const applicantData: any = useQuery(gql`
         />
       </div>
       <div class="filter-box">
-        <p class="filter-subtitle">COLLECTOR ORGANISATION</p>
+        <p class="filter-subtitle">COLLECTION ORGANISATION</p>
         <SearchFilterSelect
-          :options="Array.from(new Set(applicantData?.result.value?.applicantData?.nodes.map((item: any)=>item.name)))"
+          :options="
+            Array.from(
+              new Set(
+                applicantData?.result.value?.applicantData?.nodes.map(
+                  (item: any) => item.name,
+                ),
+              ),
+            )
+          "
           v-model="filterValues.organization"
           placeholder="Select collector"
         />

From 2c84dac57a982ee91baa7aa6ee2e446788717833 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 13 Dec 2023 22:18:54 +0100
Subject: [PATCH 3/6] fix(marketplace): Lets be consistent with organiSation
 spelling

---
 frontend/marketplace/src/pages/AuctionDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/marketplace/src/pages/AuctionDetails.vue b/frontend/marketplace/src/pages/AuctionDetails.vue
index b961c070..c53bb695 100644
--- a/frontend/marketplace/src/pages/AuctionDetails.vue
+++ b/frontend/marketplace/src/pages/AuctionDetails.vue
@@ -293,7 +293,7 @@ onMounted(() => {
           list
         />
         <ProjectDetailContent
-          label="Collection organization"
+          label="Collection organisation"
           :value="auctionDetails?.applicant"
         />
         <ProjectDetailContent

From 3763802b0004371fe72c936fb762eea67f0233f4 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 13 Dec 2023 22:21:27 +0100
Subject: [PATCH 4/6] fix(marketplace): Set plasticType as material heading and
 indent the properties

---
 .../src/components/AuctionResultsCard.vue     | 83 ++++++++++---------
 frontend/marketplace/src/utils/utils.ts       | 70 ++++++++++++----
 2 files changed, 101 insertions(+), 52 deletions(-)

diff --git a/frontend/marketplace/src/components/AuctionResultsCard.vue b/frontend/marketplace/src/components/AuctionResultsCard.vue
index 47265103..a81ebe5f 100644
--- a/frontend/marketplace/src/components/AuctionResultsCard.vue
+++ b/frontend/marketplace/src/components/AuctionResultsCard.vue
@@ -2,7 +2,12 @@
 import type { MarketplaceListing } from "@/types/GraphqlSchema";
 import router from "@/router";
 import auctionCard from "@/assets/auctionCard.png";
-import { getDetailsList } from "@/utils/utils";
+import {
+  getDetailsList,
+  prettifyCardProperty,
+  stripPlasticTypeFromMaterial,
+  findPlasticTypeInMaterial,
+} from "@/utils/utils";
 import { formatDenom } from "@/utils/wallet-utils";
 import { onMounted, ref } from "vue";
 
@@ -12,11 +17,31 @@ export interface AuctionResultsCardProps {
   };
 }
 
+interface CardDetailsList {
+  applicant: string[];
+  location: string[];
+  material: {
+    key: string;
+    value: string;
+  }[][];
+  volume: number;
+  thumbnailUrl: string;
+  image: string[];
+  locationPointers: {
+    lat: number;
+    lng: number;
+  }[];
+}
+
 const props = defineProps<AuctionResultsCardProps>();
 const denom = ref("");
+const cardDetailsList = ref<CardDetailsList>();
 
 onMounted(async () => {
   denom.value = await formatDenom(props.cardData?.pricePerCreditDenom);
+  cardDetailsList.value = getDetailsList(
+    props.cardData.creditCollection.creditData.nodes,
+  );
 });
 </script>
 <template>
@@ -25,10 +50,7 @@ onMounted(async () => {
   >
     <img
       class="h-full col-span-1 rounded-sm"
-      :src="
-        getDetailsList(cardData.creditCollection.creditData.nodes)
-          .thumbnailUrl || auctionCard
-      "
+      :src="cardDetailsList?.thumbnailUrl || auctionCard"
     />
 
     <!--      Details for Mobile UI-->
@@ -40,11 +62,7 @@ onMounted(async () => {
         <p class="text-title15 font-light">Price per credit</p>
       </div>
       <div class="text-right">
-        <p class="text-title13 font-bold">
-          {{
-            getDetailsList(cardData.creditCollection.creditData.nodes).volume
-          }}kg
-        </p>
+        <p class="text-title13 font-bold">{{ cardDetailsList?.volume }}kg</p>
         <p class="text-title11 font-light">Volume</p>
       </div>
       <div>
@@ -70,27 +88,27 @@ onMounted(async () => {
     >
       <div class="col-span-1 ...">
         <p class="details-title">Material</p>
-        <ul class="list-disc ml-6">
-          <li
-            v-for="material in getDetailsList(
-              cardData.creditCollection.creditData.nodes
-            ).material"
-            :key="material.key"
-          >
-            {{ material.value }}
-          </li>
-        </ul>
+        <div
+          v-for="(material, index) in cardDetailsList?.material"
+          :key="`${cardData.id}-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>
       <div class="col-span-1">
         <p class="details-title">Location</p>
         <p>{{ cardData.creditCollection.nodes }}</p>
         <ul class="list-disc ml-6">
-          <li
-            v-for="location in getDetailsList(
-              cardData.creditCollection.creditData.nodes
-            ).location"
-            :key="location"
-          >
+          <li v-for="location in cardDetailsList?.location" :key="location">
             {{ location }}
           </li>
         </ul>
@@ -98,23 +116,14 @@ onMounted(async () => {
       <div class="col-span-1">
         <p class="details-title">Applicant</p>
         <ul class="list-disc ml-6">
-          <li
-            v-for="applicant in getDetailsList(
-              cardData.creditCollection.creditData.nodes
-            ).applicant"
-            :key="applicant"
-          >
+          <li v-for="applicant in cardDetailsList?.applicant" :key="applicant">
             {{ applicant }}
           </li>
         </ul>
       </div>
       <div class="col-span-1">
         <p class="details-title">Volume</p>
-        <p>
-          {{
-            getDetailsList(cardData.creditCollection.creditData.nodes).volume
-          }}kg
-        </p>
+        <p>{{ cardDetailsList?.volume }}kg</p>
       </div>
       <div class="col-span-1 text-right">
         <p class="text-title32 font-bold leading-7 mt-6">
diff --git a/frontend/marketplace/src/utils/utils.ts b/frontend/marketplace/src/utils/utils.ts
index 1f0c020a..7058e3a2 100644
--- a/frontend/marketplace/src/utils/utils.ts
+++ b/frontend/marketplace/src/utils/utils.ts
@@ -6,19 +6,36 @@ export const convertIPFStoHTTPS = (url: string) => {
   return HTTPS_URL;
 };
 
+const uniqueMaterials = (
+  materials: Array<Array<{ key: string; value: string }>>,
+): Array<Array<{ key: string; value: string }>> => {
+  // Convert each material to a string representation
+  const materialsStr = materials.map((material) =>
+    JSON.stringify(material.sort((a, b) => a.key.localeCompare(b.key))),
+  );
+  // Create a Set from the stringified materials to remove duplicates
+  const uniqueMaterialsStr = Array.from(new Set(materialsStr));
+
+  // Convert each unique material back to an object
+  const uniqueMaterials = uniqueMaterialsStr.map((materialStr) =>
+    JSON.parse(materialStr),
+  );
+
+  return uniqueMaterials;
+};
+
 // TODO run in only once on component init
 export const getDetailsList = (data: any) => {
   const applicantArray: string[] = [];
   const locationArray: string[] = [];
   const imageArray: string[] = [];
-  const materialArray: { key: string; value: string }[] = [];
+  const materialArray: { key: string; value: string }[][] = [];
   let volume: number = 0;
   let thumbnailUrl: string = "";
   const locationPointersArray: {
     lat: number;
     lng: number;
   }[] = [];
-
   data.map((item: any) => {
     if (item.applicantDataByCreditDataId) {
       item.applicantDataByCreditDataId.nodes.map((node: any) => {
@@ -35,7 +52,7 @@ export const getDetailsList = (data: any) => {
           lat: node?.latitude,
           lng: node?.longitude,
         });
-        materialArray.push(...node.material.nodes);
+        materialArray.push(node.material.nodes);
       });
     }
     if (item.mediaFiles) {
@@ -46,11 +63,7 @@ export const getDetailsList = (data: any) => {
     }
   });
 
-  const uniqueMaterialArray = materialArray.filter(
-    (obj, index, self) =>
-      index ===
-      self.findIndex((o) => o.key === obj.key && o.value === obj.value)
-  );
+  const uniqueMaterialArray = uniqueMaterials(materialArray);
 
   return {
     applicant: Array.from(new Set(applicantArray)),
@@ -68,7 +81,7 @@ export const addTextWithSpacing = (
   text: string,
   x: number,
   y: number,
-  spacing: number
+  spacing: number,
 ) => {
   for (let i = 0; i < text.length; i++) {
     const currentLetter = text[i];
@@ -84,12 +97,12 @@ export const addTextWithSpacing = (
 export const calculateTextProperties = (
   name: string,
   baseXPos: number = 163,
-  baseFontSize: number = 50
+  baseFontSize: number = 50,
 ): { xPos: number; fontSize: number } => {
   const nameLength = name.length;
 
   let stepSize = 0;
-  let charsPerStep = 1;
+  const charsPerStep = 1;
   let fontSize = baseFontSize;
   if (nameLength < 15) {
     stepSize = 4;
@@ -105,16 +118,16 @@ export const calculateTextProperties = (
   }
   const steps = Math.floor((nameLength - 3) / charsPerStep);
 
-  let xPos = baseXPos - steps * stepSize;
+  const xPos = baseXPos - steps * stepSize;
 
   return { xPos, fontSize };
-}
+};
 export const calculateXPosition = (
   text: string,
   basePosition: number = 179,
   capitalStep: number = 1.5,
   otherStep: number = 1,
-  numberStep: number = 1.4
+  numberStep: number = 1.4,
 ): number => {
   let currentPosition = basePosition;
 
@@ -130,8 +143,35 @@ export const calculateXPosition = (
   }
 
   return currentPosition;
-}
+};
 
 export const ipfsToHttpsProtocol = (url: string) => {
   return url.replace("ipfs://", "https://ipfs.empowerchain.io/ipfs/");
 };
+
+export const upperCaseFirstLetter = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+export const prettifyCardProperty = (property: {
+  key: string;
+  value: string;
+}): 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[]) => {
+  return arrayOfProperties.filter((property) => property.key !== "plasticType");
+};
+
+export const findPlasticTypeInMaterial = (material: Material[]) => {
+  return material.find((property) => property.key === "plasticType");
+};

From 12ecf020af5cdf065117a643763003988a789242 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 13 Dec 2023 22:28:39 +0100
Subject: [PATCH 5/6] fix(marketplace): s/Applicant/Collection Organisation

---
 .../src/components/AuctionResultsCard.vue           | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/marketplace/src/components/AuctionResultsCard.vue b/frontend/marketplace/src/components/AuctionResultsCard.vue
index a81ebe5f..6bc6ee13 100644
--- a/frontend/marketplace/src/components/AuctionResultsCard.vue
+++ b/frontend/marketplace/src/components/AuctionResultsCard.vue
@@ -9,7 +9,7 @@ import {
   findPlasticTypeInMaterial,
 } from "@/utils/utils";
 import { formatDenom } from "@/utils/wallet-utils";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 export interface AuctionResultsCardProps {
   cardData: MarketplaceListing & {
@@ -36,6 +36,9 @@ interface CardDetailsList {
 const props = defineProps<AuctionResultsCardProps>();
 const denom = ref("");
 const cardDetailsList = ref<CardDetailsList>();
+const applicant = computed<string>(() => {
+  return cardDetailsList.value?.applicant[0] ?? "";
+});
 
 onMounted(async () => {
   denom.value = await formatDenom(props.cardData?.pricePerCreditDenom);
@@ -114,12 +117,8 @@ onMounted(async () => {
         </ul>
       </div>
       <div class="col-span-1">
-        <p class="details-title">Applicant</p>
-        <ul class="list-disc ml-6">
-          <li v-for="applicant in cardDetailsList?.applicant" :key="applicant">
-            {{ applicant }}
-          </li>
-        </ul>
+        <p class="details-title">Collection Organisation</p>
+        <h3>{{ applicant }}</h3>
       </div>
       <div class="col-span-1">
         <p class="details-title">Volume</p>

From 6a1105d4f47c0bbed9090dbdb70c40ff4e237ced Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 13 Dec 2023 22:46:15 +0100
Subject: [PATCH 6/6] fix(marketplace): Fix build

---
 .../marketplace/src/components/CreditCard.vue    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/marketplace/src/components/CreditCard.vue b/frontend/marketplace/src/components/CreditCard.vue
index 41226bed..51cc1886 100644
--- a/frontend/marketplace/src/components/CreditCard.vue
+++ b/frontend/marketplace/src/components/CreditCard.vue
@@ -50,12 +50,12 @@ const showTransferCreditsModal = ref(false);
           <ul class="list-disc ml-6">
             <li
               class="text-title18"
-              v-for="material in getDetailsList(
-                cardData.creditCollection.creditData.nodes
+              v-for="(material, index) in getDetailsList(
+                cardData.creditCollection.creditData.nodes,
               ).material"
-              :key="material.key"
+              :key="`${material[0].key}-index-${index}`"
             >
-              {{ material.value }}
+              {{ material[0].value }}
             </li>
           </ul>
         </div>
@@ -104,12 +104,12 @@ const showTransferCreditsModal = ref(false);
           <ul class="list-disc ml-6">
             <li
               class="text-title14 font-bold"
-              v-for="material in getDetailsList(
-                cardData.creditCollection.creditData.nodes
+              v-for="(material, index) in getDetailsList(
+                cardData.creditCollection.creditData.nodes,
               ).material"
-              :key="material.key"
+              :key="`${material[0].key}-index-${index}`"
             >
-              {{ material.value }}
+              {{ material[0].value }}
             </li>
           </ul>
         </div>