Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

5834 auction page issues #1104

Merged
merged 7 commits into from
Dec 14, 2023
Merged

5834 auction page issues #1104

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bb641f9
fix(marketplace): Scroll to top after navigation please
jschill Dec 13, 2023
1cb2103
fix(marketplace): s/COLLECTOR ORGANISATION/COLLECTION ORGANISATION
jschill Dec 13, 2023
2c84dac
fix(marketplace): Lets be consistent with organiSation spelling
jschill Dec 13, 2023
3763802
fix(marketplace): Set plasticType as material heading and indent the …
jschill Dec 13, 2023
12ecf02
fix(marketplace): s/Applicant/Collection Organisation
jschill Dec 13, 2023
6a1105d
fix(marketplace): Fix build
jschill Dec 13, 2023
1ebc4fd
Merge branch 'main' into 5834-auction-page-issues
jschill Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 51 additions & 43 deletions frontend/marketplace/src/components/AuctionResultsCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,49 @@
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";
import { computed, onMounted, ref } from "vue";

export interface AuctionResultsCardProps {
cardData: MarketplaceListing & {
creditCollection: any;
};
}

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>();
const applicant = computed<string>(() => {
return cardDetailsList.value?.applicant[0] ?? "";
});

onMounted(async () => {
denom.value = await formatDenom(props.cardData?.pricePerCreditDenom);
cardDetailsList.value = getDetailsList(
props.cardData.creditCollection.creditData.nodes,
);
});
</script>
<template>
Expand All @@ -25,10 +53,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-->
Expand All @@ -40,11 +65,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>
Expand All @@ -70,51 +91,38 @@ 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>
</div>
<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"
>
{{ 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>
<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">
Expand Down
16 changes: 8 additions & 8 deletions frontend/marketplace/src/components/CreditCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
44 changes: 38 additions & 6 deletions frontend/marketplace/src/components/SearchBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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"
/>
Expand All @@ -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"
/>
Expand Down
2 changes: 1 addition & 1 deletion frontend/marketplace/src/pages/AuctionDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ onMounted(() => {
list
/>
<ProjectDetailContent
label="Collection organization"
label="Collection organisation"
:value="auctionDetails?.applicant"
/>
<ProjectDetailContent
Expand Down
4 changes: 4 additions & 0 deletions frontend/marketplace/src/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand Down
Loading