Tabbed Marketplace System

frontend/src/components/TabView.vue

@@ -38,7 +38,7 @@
 <script>
 	export default {
 		name: 'TabView',
-		props: ['tabs', 'value', 'padding', 'small-tabs', 'transparent'],
+		props: ['tabs', 'value', 'padding', 'small-tabs', 'transparent', 'click'],
 		methods: {
 			changeTab (index) {
 				this.$emit('input', index)

frontend/src/components/routes/Marketplace.vue

@@ -43,6 +43,13 @@
         <div class="column">
           <b-button class="is-primary">Create Marketplace Item</b-button>
         </div>
+        <tab-view
+            :tabs='["Hats", "Faces", "Shirts", "Pants"]'
+            v-model="showSettingTab"
+            padding='true'
+            slot='main'
+        >
+        </tab-view>
         <scroll-load
           key='user-row'
           class='columns is-multiline'
@@ -80,7 +87,7 @@
       <p name='fade' mode='out-in'>
       <center><loading-message key='loading' v-if='loading'></loading-message></center>
       <center><div class='overlay_message' v-if='!loading && !users.length'>
-        Something went wrong while loading the Marketplace Items, check your internet connection, or check the <a href="https://status.troplo.com">Service Status</a>
+        No items to display at the moment.
       </div></center></p>
     </div>
   </main>
@@ -88,6 +95,7 @@
 <script>
 import LoadingMessage from '../LoadingMessage';
 import ScrollLoad from '../ScrollLoad';
+import TabView from '../TabView'
 import throttle from 'lodash.throttle';
 import AjaxErrorHandler from '../../assets/js/errorHandler';
 
@@ -95,7 +103,8 @@ export default {
   name: 'Marketplace',
   components: {
     LoadingMessage,
-    ScrollLoad
+    ScrollLoad,
+    TabView
   },
   data () {
     return {
@@ -105,6 +114,7 @@ export default {
       loading: true,
       offset: 0,
       limit: 15,
+      marketplaceTabs: 0,
 
       roleOptions: [
         { name: 'Admins', value: 'admin' },
@@ -118,11 +128,21 @@ export default {
       }
     }
   },
+  computed: {
+    showSettingTab: {
+      get() {
+        return this.marketplaceTabs
+      },
+      set(index) {
+        this.marketplaceTabs = index
+      }
+    }
+  },
   methods: {
     fetchData () {
       if(this.offset === null) return;
 
-      let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/shirts' + `?
+      let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/' + this.showSettingTab + `?
 					sort=${this.tableSort.column}
 					&order=${this.tableSort.sort}
 					&offset=${this.offset}
@@ -182,7 +202,7 @@ export default {
   },
   watch: {
     tableSort: 'resetFetchData',
-    roleSelected: 'resetFetchData',
+    marketplaceTabs: 'resetFetchData',
     search: throttle(function () {
       this.resetFetchData();
     }, 200)

routes/marketplace.js

@@ -58,12 +58,12 @@ router.get('/:category', async(req, res, next) => {
             threadsLatestPost = await Thread.findAll( threadInclude('DESC')[0] )
         } else {
             threads = await ItemCategory.findOne({
-                where: { value: req.params.category },
+                where: { id: req.params.category },
                 include: threadInclude('ASC')
             })
 
             threadsLatestPost = await ItemCategory.findOne({
-                where: { value: req.params.category },
+                where: { id: req.params.category },
                 include: threadInclude('DESC')
             })
         }