Skip to content

Commit

Permalink
Adds ability to submit your own new wheels
Browse files Browse the repository at this point in the history 
Signed-off-by: Cole Gentry <[email protected]>
  • Loading branch information
@SomethingNew71
SomethingNew71 committed Dec 7, 2023
1 parent 37d2940 commit 6ad8d45
Show file tree
Hide file tree
Showing 9 changed files with 216 additions and 104 deletions.
68 changes: 39 additions & 29 deletions components/WheelCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
</script>

<template>
<v-card hover class="mx-auto">
<v-card-item :title="wheel.name" class="bg-blue-grey-lighten-5">
<v-card hover class="mx-auto" elevation="4">
<v-card-item :title="wheel.name">
<template v-slot:subtitle>
<v-icon icon="fad fa-tire fa-spin" size="24" class="me-1 py-2"></v-icon>
{{ wheel.width ? wheel.width : '?' }} x {{ wheel.size ? wheel.size : '?' }}
Expand Down Expand Up @@ -50,33 +50,43 @@
></v-img>
</v-row>
</v-card-text>

<div class="d-flex py-3 justify-space-between">
<v-list-item density="compact" prepend-icon="fa-duotone text-yellow-darken-3 fa-ruler-triangle">
<v-list-item-subtitle>Size: {{ wheel.size ? wheel.size : 'Unknown' }}</v-list-item-subtitle>
</v-list-item>
<v-list-item density="compact" append-icon="fa-duotone fa-maximize text-blue-darken-4">
<v-list-item-subtitle>Width: {{ wheel.width ? wheel.width : 'Unknown' }}</v-list-item-subtitle>
</v-list-item>
</div>

<v-divider></v-divider>

<v-list class="bg-transparent">
<v-list-item
:title="wheel.type ? wheel.type : 'Unknown'"
color="light-green-darken-1"
append-icon="fa-duotone fa-box-open-full text-brown-darken-4"
subtitle="Type"
>
</v-list-item>
<v-list-item
:title="wheel.offset ? wheel.offset : 'Unknown'"
append-icon="fa-duotone fa-right-from-line text-green-darken-4"
subtitle="Offset"
>
</v-list-item>
</v-list>
<v-card-item>
<v-row justify="space-between">
<v-col cols="6">
<v-list>
<v-list-item
:subtitle="wheel.size ? wheel.size : 'Unknown'"
color="light-green-darken-1"
prepend-icon="fa-duotone text-yellow-darken-3 fa-ruler-triangle"
title="Size"
>
</v-list-item>
<v-list-item
:subtitle="wheel.width ? wheel.width : 'Unknown'"
prepend-icon="fa-duotone fa-maximize text-blue-darken-4"
title="Width"
>
</v-list-item> </v-list
></v-col>
<v-divider vertical thickness="3"></v-divider>
<v-col cols="6" class="text-right">
<v-list>
<v-list-item
:subtitle="wheel.type ? wheel.type : 'Unknown'"
color="light-green-darken-1"
append-icon="fa-duotone fa-box-open-full text-brown-darken-4"
title="Type"
>
</v-list-item>
<v-list-item
:subtitle="wheel.offset ? wheel.offset : 'Unknown'"
append-icon="fa-duotone fa-right-from-line text-green-darken-4"
title="Offset"
>
</v-list-item> </v-list
></v-col>
</v-row>
</v-card-item>
<v-expansion-panels class="pt-2">
<v-expansion-panel v-if="wheel.notes !== ''" title="Notes">
<v-expansion-panel-text>
Expand Down
14 changes: 10 additions & 4 deletions components/WheelGrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,17 @@
<pre v-else-if="error">{{ error }}</pre>
<v-data-iterator v-else :items="wheels" :page="page" :items-per-page="12" :search="search">
<template v-slot:header="{ page, pageCount, prevPage, nextPage }">
<v-col class="d-flex align-center flex-column bg-grey-lighten-3 pa-6">
<v-btn-toggle v-model="size" mandatory rounded="0" color="primary" group>
<v-col class="d-flex align-center flex-column bg-grey-lighten-3 pa-6 rounded-t-xl">
<v-btn-toggle v-model="size" mandatory rounded="10" color="primary" group>
<v-btn value="list"> All </v-btn>
<v-btn value="ten"> 10 </v-btn>
<v-btn value="twelve"> 12 </v-btn>
<v-btn value="thirteen"> 13 </v-btn>
</v-btn-toggle>
</v-col>
<v-toolbar class="px-2 mb-5" rounded>
<v-toolbar class="px-2 pb-3 mb-5" rounded>
<v-text-field
v-model="search"
clearable
density="comfortable"
hide-details
placeholder="Search"
Expand Down Expand Up @@ -68,6 +67,13 @@
></v-btn>
</v-toolbar>
</template>
<template v-slot:no-data>
<v-row>
<v-col cols="12" class="text-center py-10 my-10">
<h4 class="text-h5">No items matching your search</h4>
</v-col>
</v-row>
</template>
<template v-slot:default="{ items }">
<v-row align="center">
<v-col v-for="(item, i) in items" :key="i" cols="12" md="4" xl="3">
Expand Down
82 changes: 55 additions & 27 deletions components/WheelSubmit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@
import { humanFileSize } from '~/data/models/helper-utils';
import { useRecaptchaToken } from '~/composables/recaptcha';
const wheel = ref();
const pageLoad = ref();
const pageLoad = ref(true);
const pageError = ref();
const submitError = ref();
const loading = ref(false);
const hasError = ref(false);
const hasSuccess = ref();
const detailsValid = ref(false);
const imagesValid = ref(false);
const contactValid = ref(false);
const step = ref(1);
Expand Down Expand Up @@ -60,23 +62,35 @@
return 'You cannot upload more than 5 images at a time.';
},
];
console.log('big ass prop', props.newWheel);
const imageRulesRequired = [
(value: any) => {
return !value || !value.length || value[0].size < 3000000 || 'Wheel image size should be less than 3 MB!';
},
(value: any) => {
if (value?.length > 0) return true;
return 'This field is required';
},
(value: any) => {
if (value?.length <= 5) return true;
return 'You cannot upload more than 5 images at a time.';
},
];
if (!props.newWheel) {
const {
data: singleWheel,
pending,
error,
}: any = await useFetch(`/api/wheels/wheel`, {
await useFetch(`/api/wheels/wheel`, {
query: {
uuid: props.uuid,
},
});
wheel.value = singleWheel;
pageLoad.value = pending;
pageError.value = error;
})
.then(({ data }) => {
wheel.value = data.value;
})
.catch((error) => (pageError.value = error))
.finally(() => {
pageLoad.value = false;
});
} else {
pageLoad.value = false;
}
async function sendNewInfo() {
Expand All @@ -103,7 +117,10 @@
console.warn('Recaptcha failed');
}
})
.catch((err) => console.error(`Recaptcha failed - ${err}`));
.catch((err) => {
submitError.value = true;
console.error(`Recaptcha failed - ${err}`);
});
}
async function storeWheelDetails() {
Expand Down Expand Up @@ -148,14 +165,12 @@
<template>
<v-stepper v-model="step" :items="['Wheel Details', 'Images', 'Contact Info', 'Review', 'Submitted']">
<template v-slot:item.1>
<v-skeleton-loader v-if="pageLoad" type="list-item-two-line">
<v-list-item title="Title" subtitle="Subtitle" lines="two" rounded></v-list-item>
</v-skeleton-loader>
<v-skeleton-loader v-if="pageLoad" type="list-item-two-line"> </v-skeleton-loader>
<div v-else-if="pageError">
<p>Error loading wheel - {{ pageError }}</p>
</div>
<v-card v-else-if="wheel || newWheel" :title="newWheel ? 'Submit wheel' : 'Suggested Updates'" flat>
<v-form>
<v-form v-model="detailsValid">
<v-container>
<v-row>
<v-col cols="12" md="4">
Expand All @@ -167,6 +182,9 @@
prepend-icon="fad fa-file-signature"
variant="solo-filled"
v-model="name"
:rules="newWheel ? contactRules : []"
:required="newWheel"
:append-inner-icon="newWheel ? 'fad fa-asterisk' : ''"
:counter="30"
label="Wheel Name"
></v-text-field>
Expand Down Expand Up @@ -196,7 +214,10 @@
prepend-icon="fad fa-ruler-horizontal"
variant="solo-filled"
v-model="width"
:rules="newWheel ? contactRules : []"
:required="newWheel"
type="number"
:append-inner-icon="newWheel ? 'fad fa-asterisk' : ''"
label="Wheel Width"
></v-text-field>
</v-col>
Expand All @@ -211,6 +232,9 @@
prepend-icon="fad fa-ruler"
variant="solo-filled"
v-model="size"
:rules="newWheel ? contactRules : []"
:required="newWheel"
:append-inner-icon="newWheel ? 'fad fa-asterisk' : ''"
label="Wheel Size"
:items="['10', '12', '13']"
></v-select>
Expand Down Expand Up @@ -254,11 +278,15 @@
<template v-slot:item.2>
<v-row>
<v-col cols="12" md="6">
<h3 class="text-h5 pb-4">Add your own images</h3>
<h3 class="text-h5 pb-1">Add your own images</h3>
<h4 class="text-subtitle pb-4" v-if="newWheel">
To submit a new wheel, you must include at least one image for the registry
</h4>
<v-form v-model="imagesValid">
<v-file-input
:rules="imageRules"
:rules="newWheel ? imageRulesRequired : imageRules"
:required="newWheel"
:append-inner-icon="newWheel ? 'fad fa-asterisk' : ''"
accept="image/png, image/jpeg"
label="Upload up to 5 images"
variant="filled"
Expand Down Expand Up @@ -373,42 +401,42 @@
<v-col cols="12" md="6">
<v-list lines="two" elevation="2">
<v-list-subheader> Wheel Information </v-list-subheader>
<v-list-item title="Wheel Name" :subtitle="name !== '' ? name : 'No change'">
<v-list-item title="Wheel Name" :subtitle="name !== '' ? name : 'N/A'">
<template v-slot:prepend>
<v-avatar>
<v-icon icon="fad fa-file-signature"></v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item title="Type" :subtitle="type !== '' ? type : 'No change'">
<v-list-item title="Type" :subtitle="type !== '' ? type : 'N/A'">
<template v-slot:prepend>
<v-avatar>
<v-icon icon="fad fa-box-open-full"></v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item title="Width" :subtitle="width !== '' ? size : 'No change'">
<v-list-item title="Width" :subtitle="width !== '' ? size : 'N/A'">
<template v-slot:prepend>
<v-avatar>
<v-icon icon="fad fa-ruler-horizontal"></v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item title="Size" :subtitle="size !== '' ? size : 'No change'">
<v-list-item title="Size" :subtitle="size !== '' ? size : 'N/A'">
<template v-slot:prepend>
<v-avatar>
<v-icon icon="fad fa-ruler"></v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item title="Offset" :subtitle="offset !== '' ? offset : 'No change'">
<v-list-item title="Offset" :subtitle="offset !== '' ? offset : 'N/A'">
<template v-slot:prepend>
<v-avatar>
<v-icon icon="fad fa-arrow-right-from-line"></v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item title="Notes" :subtitle="notes !== '' ? notes : 'No change'">
<v-list-item title="Notes" :subtitle="notes !== '' ? notes : 'N/A'">
<template v-slot:prepend>
<v-avatar>
<v-icon icon="fad fa-notebook"></v-icon>
Expand Down Expand Up @@ -478,7 +506,7 @@
<template v-slot:actions>
<v-row class="d-flex justify-space-between mx-5 mb-5">
<v-btn v-if="step !== 5" :disabled="step === 1" @click="step--">Previous</v-btn>
<v-btn v-if="step === 1" color="primary" @click="step++">Next</v-btn>
<v-btn v-if="step === 1" color="primary" @click="step++" :disabled="!detailsValid">Next</v-btn>
<v-btn v-if="step === 2" color="primary" @click="step++" :disabled="!imagesValid">Next</v-btn>
<v-btn v-if="step === 3" color="primary" @click="step++" :disabled="!contactValid">Next</v-btn>
<v-btn v-if="step === 4" color="primary" :loading="loading" @click="sendNewInfo()">Submit</v-btn>
Expand Down
24 changes: 12 additions & 12 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

1 comment on commit 6ad8d45

@vercel
Copy link

@vercel vercel bot commented on 6ad8d45 Dec 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

classicminidiy – ./

classicminidiy-git-main-classicminidiy.vercel.app
classicminidiy.vercel.app
classicminidiy-classicminidiy.vercel.app
classicminidiy.com
www.classicminidiy.com

Please sign in to comment.