Skip to content

Commit

Permalink
Add search bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmybisenius
jimmybisenius committed Mar 6, 2021
1 parent 2e7a7d6 commit 767df5e
Showing 1 changed file with 63 additions and 38 deletions.
101 changes: 63 additions & 38 deletions client/pages/dashboard/marketplace/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,46 @@
<template>
<section class="flex flex-shrink-0 flex-col p-8 items-center bg-gray-100 flex-grow overflow-x-hidden overflow-y-scroll">
<div class="flex flex-row items-center justify-start w-full mb-4">
<h1 class="text-gray-800 font-extrabold tracking-tight text-3xl mr-auto mb-4 lg:mb-0">
<h1 class="text-gray-800 font-extrabold tracking-tight text-3xl mr-auto mb-4 lg:mb-0 lg:mr-4">
Marketplace
</h1>
<a href="/dashboard/marketplace/addon/submit" class="bg-indigo-200 border border-indigo-600 hover:bg-indigo-300 px-6 py-2 rounded-lg text-sm font-semibold text-indigo-500">Submit your theme<span class="ml-2 text-xl leading-none">+</span></a>
<div class="ml-auto flex flex-row p-1 rounded-lg bg-white flex-grow" style="max-width: 465px;">
<input class="flex text-sm text-gray-700 flex-grow font-medium rounded-lg p-2" type="text" v-model="query" placeholder="e.g. A theme name or term, colorful, bold, etc..."/>
<div @click="searchAddons" class="p-2 bg-indigo-200 text-indigo-600 cursor-pointer font-bold tracking-tight text-sm rounded-lg border border-indigo-500">Search themes</div>
</div>
</div>
<!-- Featured section -->
<div v-if="addons.featured.length>0" class="rounded-lg mb-10 px-12 py-10 bg-indigo-500 w-full flex flex-col lg:flex-row justify-start">
<div class="relative rounded" style="width: 201px; height: 217px; overflow: hidden;"><iframe scrolling="no" :src="'/dashboard/marketplace/preview/' + addons.featured[0].id" style="pointer-events: none; width: 375px; height: 406px; transform: scale(0.536) translate(-163px, -175px); top: 0px; left: 0px; position: absolute;"></iframe> <!----> <!----></div>
<div class="flex flex-col flex-1 ml-6">
<h5 class="tracking-wide font-bold uppercase text-sm text-indigo-300 mb-1">Featured theme</h5>
<h2 class="text-white font-bold tracking-tight text-2xl mb-2">{{ addons.featured[0].displayName }}</h2>
<span class="text-gray-200 font-medium mb-4">{{ addons.featured[0].description }}</span>
<a :href="'/dashboard/marketplace/addon/' + addons.featured[0].id" class="bg-indigo-600 rounded-lg px-6 py-3 text-sm font-semibold text-white hover:bg-indigo-700" style="width:fit-content;">See details</a>
</div>

<theme-list v-if="addons.query.length>0" :name="'Search results for ' + query" :preview="false" :themes="addons.query" :addon="true" :extended="false" class="mb-8"/>

<div v-if="addons.query.length>0" class="rounded-lg mb-10 px-12 py-10 bg-indigo-500 w-full flex flex-col justify-start items-start">
<h5 class="tracking-wide font-bold uppercase text-sm text-indigo-300 mb-1">Go back</h5>
<h2 class="text-white font-bold tracking-tight text-2xl mb-2">Didn't find what you were looking for?</h2>
<span class="text-gray-200 font-medium mb-4">Don't worry, there are tons more themes available. Return to the marketplace to discover more themes to use on your profile!</span>
<div @click="addons.query=[]" class="bg-indigo-200 border border-indigo-600 hover:bg-indigo-300 px-6 py-2 rounded-lg text-sm font-semibold text-indigo-500">Return to the marketplace</div>
</div>

<div v-if="addons.query.length<1" class="w-full flex flex-col justify-center items-start">
<!-- Featured section -->
<div v-if="addons.featured.length>0" class="rounded-lg mb-10 px-12 py-10 bg-indigo-500 w-full flex flex-col lg:flex-row justify-start">
<div class="relative rounded" style="width: 201px; height: 217px; overflow: hidden;"><iframe scrolling="no" :src="'/dashboard/marketplace/preview/' + addons.featured[0].id" style="pointer-events: none; width: 375px; height: 406px; transform: scale(0.536) translate(-163px, -175px); top: 0px; left: 0px; position: absolute;"></iframe> <!----> <!----></div>
<div class="flex flex-col flex-1 ml-6">
<h5 class="tracking-wide font-bold uppercase text-sm text-indigo-300 mb-1">Featured theme</h5>
<h2 class="text-white font-bold tracking-tight text-2xl mb-2">{{ addons.featured[0].displayName }}</h2>
<span class="text-gray-200 font-medium mb-4">{{ addons.featured[0].description }}</span>
<a :href="'/dashboard/marketplace/addon/' + addons.featured[0].id" class="bg-indigo-600 rounded-lg px-6 py-3 text-sm font-semibold text-white hover:bg-indigo-700" style="width:fit-content;">See details</a>
</div>
</div>
<!-- End featured section -->
<theme-list v-if="addons.hot.length>0" name="🔥 Trending themes" :preview="false" :themes="addons.hot" :addon="true" :extended="false" class="mb-8"/>
<theme-list v-if="addons.new.length>0" name="✨ Newest themes" :preview="false" :themes="addons.new" :addon="true" :extended="false" class="mb-8"/>
<theme-list v-if="addons.submissions.length>0" name="Your submissions" :preview="false" :themes="addons.submissions" :addon="true" :extended="false" class="mb-8"/>
<div v-if="addons.hot.length>0||addons.new.length>0" class="rounded-lg mb-10 px-12 py-10 bg-indigo-500 w-full flex flex-col justify-start items-start">
<h5 class="tracking-wide font-bold uppercase text-sm text-indigo-300 mb-1">Become a creator</h5>
<h2 class="text-white font-bold tracking-tight text-2xl mb-2">Ready to publish your first theme?</h2>
<span class="text-gray-200 font-medium mb-4">Submitting to the marketplace is easy, free, and takes seconds. All you need is a theme you've created that you're ready to share!</span>
<a href="/dashboard/marketplace/addon/submit" class="bg-indigo-200 border border-indigo-600 hover:bg-indigo-300 px-6 py-2 rounded-lg text-sm font-semibold text-indigo-500">Submit a theme<span class="ml-2 text-xl leading-none">+</span></a>
</div>
</div>
<!-- End featured section -->
<theme-list v-if="addons.hot.length>0" name="🔥 Trending themes" :preview="false" :themes="addons.hot" :addon="true" :extended="false" class="mb-8"/>
<theme-list v-if="addons.new.length>0" name="✨ Newest themes" :preview="false" :themes="addons.new" :addon="true" :extended="false" class="mb-8"/>
<theme-list v-if="addons.submissions.length>0" name="Your submissions" :preview="false" :themes="addons.submissions" :addon="true" :extended="false"/>
</section>
</template>

Expand Down Expand Up @@ -71,11 +92,13 @@ export default Vue.extend({
featured: new Array<Addon>(),
hot: new Array<Addon>(),
new: new Array<Addon>(),
query: new Array<Addon>(),
submissions: new Array<Addon>(),
},
top_feature: null,
userId: '',
isAdmin: false
isAdmin: false,
query: null
};
},
Expand Down Expand Up @@ -105,13 +128,15 @@ export default Vue.extend({
this.addons.hot = (await this.$axios.$post<Addon[]>('/marketplace/addons', {
sorting: "currentInstalls",
token: this.$store.getters['auth/getToken'],
detailed: true
detailed: true,
limit: 8
}));
// Grab newest addons from response
this.addons.new = (await this.$axios.$post<Addon[]>('/marketplace/addons', {
sorting: "new",
token: this.$store.getters['auth/getToken'],
detailed: true
detailed: true,
limit: 8
}));
console.log('Addons');
Expand All @@ -138,6 +163,26 @@ export default Vue.extend({
console.log(err);
}
},
async searchAddons() {
console.log('Query');
console.log(this.query);
if(!this.query) return;
try {
// Fetch query addons from response
this.addons.query = (await this.$axios.$post<Addon[]>('/marketplace/addons/search', {
query: this.query,
//token: this.$store.getters['auth/getToken'],
limit: 50,
detailed: true
}));
console.log(this.addons.query);
console.log('done');
} catch(err) {
console.log('Error');
console.log(err);
}
}
/*async saveChanges() {
try {
Expand All @@ -152,26 +197,6 @@ export default Vue.extend({
console.log(err);
}
},*/
getNewTheme(): Theme {
return {
id: '',
label: '',
global: false,
colors: {
fill: {
primary: '',
secondary: ''
},
text: {
primary: '',
secondary: ''
}
},
customCss: undefined,
customHtml: undefined,
};
},
}
});
</script>

0 comments on commit 767df5e

Please sign in to comment.