feat(admin/mods): pull data from backend

Sayo-nika · May 9, 2019 · b360dc7 · b360dc7
1 parent ff2a032
commit b360dc7
Show file tree

Hide file tree

Showing 4 changed files with 927 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -20,18 +20,19 @@
     "clipboard-copy": "^3.0.0",
     "cookie-universal-nuxt": "^2.0.14",
     "cross-env": "^5.2.0",
+    "date-fns": "^1.30.1",
     "node-vibrant": "~3.1.1",
     "nuxt": "^2.6.3",
     "nuxt-env": "^0.1.0",
     "router": "^1.3.3",
+    "snyk": "^1.161.1",
     "vue": "^2.6.10",
     "vue-async-computed": "^3.6.1",
     "vue-recaptcha": "^1.1.1",
     "vue-recaptcha-v3": "^1.4.0",
     "vue-social-sharing": "^2.4.3",
     "vuetify": "^1.5.13",
-    "zxcvbn": "^4.4.2",
-    "snyk": "^1.161.1"
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",

diff --git a/pages/admin/mods.vue b/pages/admin/mods.vue
@@ -35,34 +35,35 @@
     </header>
 
     <v-list class="transparent" avatar three-line>
-      <v-card v-for="i in 10" :key="`z${i}`" class="mb-3 zoop">
+      <v-card v-for="mod in pendingMods" :key="`pendingMod-${mod.id}`" class="mb-3 verify-entry__card" :style="`background-image: url(${mod.banner});`">
         <v-list-tile class="verify-entry">
           <v-list-tile-avatar color="primary">
-            Z
+            <img v-if="mod.icon" :src="mod.icon">
+            <template v-else>{{ initial(mod.title) }}</template>
           </v-list-tile-avatar>
 
           <v-list-tile-content>
             <v-list-tile-title>
-              Obamas Sexy time club
+              {{ mod.title }}
             </v-list-tile-title>
 
             <v-list-tile-sub-title>
-              Submitted by God
+              Submitted by {{ mod.author.username }}
               <br>
-              20 March, 20219
+              On 1{{ formatDate(mod.created_at) }}
             </v-list-tile-sub-title>
           </v-list-tile-content>
 
           <v-spacer/>
 
           <v-list-tile-action>
-            <v-btn color="primary" depressed @click="dialogOpen = true">View</v-btn>
+            <v-btn color="primary" depressed @click="selection = mod">View</v-btn>
           </v-list-tile-action>
         </v-list-tile>
       </v-card>
     </v-list>
 
-    <v-dialog v-model="dialogOpen" max-width="1000">
+    <v-dialog v-model="selection" max-width="1000">
       <v-card>
         <v-card-text>
           <header class="align-center pa-5" style="display: flex;">
@@ -132,6 +133,7 @@
 </template>
 
 <script>
+import {format} from 'date-fns';
 import AiCarousel from '~/components/AiCarousel.vue';
 import HeightTransition from '~/components/HeightTransition.vue';
 
@@ -145,9 +147,27 @@ export default {
   data() {
     return {
       sort: 'Submitted',
-      dialogOpen: false,
-      expandedDescription: false
+      expandedDescription: false,
+      selection: null
     };
+  },
+  async asyncData({$axios}) {
+    const {result: {
+      results: pendingMods,
+      total,
+      page,
+      limit
+    }} = await $axios.$get('/mods/verify_queue?limit=100');
+
+    return {pendingMods, total, page, limit};
+  },
+  methods: {
+    initial(value) {
+      return value ? value[0].toUpperCase() : '';
+    },
+    formatDate(date) {
+      return format(date, 'MMMM D, YYYY');
+    }
   }
 };
 </script>
@@ -157,8 +177,7 @@ export default {
 
 .verify-entry
   position: relative;
-  // background-image: url('~assets/img/login-bg.jpg');
-  background-image: linear-gradient(to right,#7c75ee,#e767eb 75%);
+  background-image: url('~assets/img/login-bg.jpg');
   background-position: left center;
 
   &::before
@@ -169,6 +188,6 @@ export default {
     width: 100%;
     border-radius: 8px;
 
-.zoop:hover
+.verify-entry__card:hover
   elevation(10, true);
 </style>
diff --git a/pages/admin/user-control.vue b/pages/admin/user-control.vue
@@ -23,7 +23,8 @@
       <template #selection="{item: {avatar, username}}">
         <v-chip>
           <v-avatar color="primary">
-            {{ avatar || initial(username) }}
+            <img v-if="avatar" :src="avatar">
+            <template v-else>{{ initial(username) }}</template>
           </v-avatar>
           {{ username }}
         </v-chip>
@@ -33,7 +34,8 @@
     <v-card v-if="selection" class="pa-3">
       <v-card-title class="mb-2">
         <v-avatar class="mr-3" color="primary" size="64">
-          {{ selection.avatar || initial(selection.username) }}
+          <img v-if="selection.avatar" :src="selection.avatar">
+          <template v-else>{{ initial(selection.username) }}</template>
         </v-avatar>
         <div>
           <div>{{ selection.username }}</div>