Skip to content
This repository has been archived by the owner on Feb 14, 2020. It is now read-only.

Commit

Permalink
refactor(admin): put repeated structure in layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ovyerus
Ovyerus committed Apr 26, 2019
1 parent bb93e53 commit 0e37a8c
Show file tree
Hide file tree
Showing 2 changed files with 167 additions and 162 deletions.
87 changes: 85 additions & 2 deletions layouts/admin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,86 @@

<v-content>
<v-container grid-list-lg fluid>
<nuxt/>
<v-layout row wrap>
<v-flex v-if="$breakpoint.is('mdAndUp')" lg2 md3>
<nav-card>
<v-list>
<v-list-tile to="/admin" exact nuxt ripple>
<v-list-tile-action>
<v-icon>mdi-home</v-icon>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/mods" nuxt ripple>
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">50+</span>

<v-icon>mdi-library-books</v-icon>
</v-badge>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>Pending Mods</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/user-reports" nuxt ripple>
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">12</span>

<v-icon>mdi-account-circle</v-icon>
</v-badge>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>User Reports</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/mod-reports" nuxt ripple>
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">69</span>

<v-icon>mdi-flag</v-icon>
</v-badge>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>Mod Reports</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/user-control" nuxt ripple>
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">50+</span>

<v-icon>mdi-library-books</v-icon>
</v-badge>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>User Access Control</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</nav-card>
</v-flex>


<v-flex md9 lg10 xs12>
<v-container>
<nuxt/>
</v-container>
</v-flex>
</v-layout>
</v-container>
</v-content>

Expand All @@ -84,9 +163,13 @@

<script>
import Navbar from '~/components/Navbar.vue';
import NavCard from '~/components/NavCard.vue';
export default {
components: {Navbar},
components: {
Navbar,
NavCard
},
data() {
return {
drawer: false
Expand Down
242 changes: 82 additions & 160 deletions pages/admin/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,186 +1,108 @@
<template>
<v-layout row wrap>
<v-flex v-if="$breakpoint.is('mdAndUp')" lg2 md3>
<nav-card>
<v-list>
<v-list-tile to="/admin" exact nuxt ripple>
<v-list-tile-action>
<v-icon>mdi-home</v-icon>
</v-list-tile-action>
<div>
<v-card class="mb-3">
<v-list class="admin__recent" two-line>
<v-subheader class="primary--text">
<v-icon class="mr-1" color="primary">mdi-library-books</v-icon> Pending Mods
</v-subheader>

<template v-if="pendingMods.length">
<v-list-tile v-for="mod in pendingMods" :key="`mod-${mod.id}`" avatar @click="void 0">
<v-list-tile-avatar>
<img :src="mod.icon_url" alt="icon">
</v-list-tile-avatar>

<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
<v-list-tile-title>{{ mod.title }}</v-list-tile-title>
<v-list-tile-sub-title>Submitted by {{ mod.author.username }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/mods" nuxt ripple>
<!---TODO: Make this spawn the Mod overview that has approve and deny buttons. --->
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">50+</span>

<v-icon>mdi-library-books</v-icon>
</v-badge>
<v-btn color="primary" depressed ripple>View</v-btn>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>Pending Mods</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/user-reports" nuxt ripple>
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">12</span>

<v-icon>mdi-account-circle</v-icon>
</v-badge>
</v-list-tile-action>
<div class="mx-3 mb-2">
<v-btn color="accent" to="/admin/mods" block flat nuxt>View all pending mods</v-btn>
</div>
</template>
<v-container v-else fluid>
<h2 class="display-1 font-italic admin__empty text-xs-center">
All done here!
</h2>
</v-container>
</v-list>
</v-card>

<v-card class="mb-3">
<v-list class="admin__recent" two-line>
<v-subheader class="primary--text">
<v-icon class="mr-1" color="primary">mdi-flag</v-icon> Recent Mod Reports
</v-subheader>

<template v-if="modReports.length">
<v-list-tile v-for="mod in modReports" :key="`m_report-${mod}`" avatar @click="void 0">
<v-list-tile-avatar>
<img :src="mod.icon_url" alt="icon">
</v-list-tile-avatar>

<v-list-tile-content>
<v-list-tile-title>User Reports</v-list-tile-title>
<v-list-tile-title>{{ mod.title }}</v-list-tile-title>
<v-list-tile-sub-title>Reported by {{ mod.author_id }} for {{ mod.report_type }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/mod-reports" nuxt ripple>
<!--- TODO: this should show a dialog containing all the info from the report object --->
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">69</span>

<v-icon>mdi-flag</v-icon>
</v-badge>
<v-btn color="primary" depressed ripple>View</v-btn>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>Mod Reports</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>

<v-list-tile to="/admin/user-control" nuxt ripple>
<v-list-tile-action>
<v-badge color="accent">
<span slot="badge">50+</span>

<v-icon>mdi-library-books</v-icon>
</v-badge>
</v-list-tile-action>

<v-list-tile-content>
<v-list-tile-title>User Access Control</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</nav-card>
</v-flex>

<v-flex md9 lg10 xs12>
<v-container>
<v-card class="mb-3">
<v-list class="admin__recent" two-line>
<v-subheader class="primary--text">
<v-icon class="mr-1" color="primary">mdi-library-books</v-icon> Pending Mods
</v-subheader>

<template v-if="pendingMods.length">
<v-list-tile v-for="mod in pendingMods" :key="`mod-${mod.id}`" avatar @click="void 0">
<v-list-tile-avatar>
<img :src="mod.icon_url" alt="icon">
</v-list-tile-avatar>

<v-list-tile-content>
<v-list-tile-title>{{ mod.title }}</v-list-tile-title>
<v-list-tile-sub-title>Submitted by {{ mod.author.username }}</v-list-tile-sub-title>
</v-list-tile-content>

<!---TODO: Make this spawn the Mod overview that has approve and deny buttons. --->
<v-list-tile-action>
<v-btn color="primary" depressed ripple>View</v-btn>
</v-list-tile-action>
</v-list-tile>

<div class="mx-3 mb-2">
<v-btn color="accent" to="/admin/mods" block flat nuxt>View all pending mods</v-btn>
</div>
</template>
<v-container v-else fluid>
<h2 class="display-1 font-italic admin__empty text-xs-center">
All done here!
</h2>
</v-container>
</v-list>
</v-card>

<v-card class="mb-3">
<v-list class="admin__recent" two-line>
<v-subheader class="primary--text">
<v-icon class="mr-1" color="primary">mdi-flag</v-icon> Recent Mod Reports
</v-subheader>

<template v-if="modReports.length">
<v-list-tile v-for="mod in modReports" :key="`m_report-${mod}`" avatar @click="void 0">
<v-list-tile-avatar>
<img :src="mod.icon_url" alt="icon">
</v-list-tile-avatar>

<v-list-tile-content>
<v-list-tile-title>{{ mod.title }}</v-list-tile-title>
<v-list-tile-sub-title>Reported by {{ mod.author_id }} for {{ mod.report_type }}</v-list-tile-sub-title>
</v-list-tile-content>

<!--- TODO: this should show a dialog containing all the info from the report object --->
<v-list-tile-action>
<v-btn color="primary" depressed ripple>View</v-btn>
</v-list-tile-action>
</v-list-tile>

<div class="mx-3 mb-2">
<v-btn color="accent" to="/admin/mod-reports" block flat nuxt>View all reports</v-btn>
</div>
</template>
<v-container v-else fluid>
<h2 class="display-1 font-italic admin__empty text-xs-center">
All done here!
</h2>
</v-container>
</v-list>
</v-card>

<v-card class="mb-3">
<v-list class="admin__recent" two-line>
<v-subheader class="primary--text">
<v-icon class="mr-1" color="primary">mdi-account-alert</v-icon> Recent User Reports
</v-subheader>

<v-list-tile v-for="i in 5" :key="`user-${i}`" avatar @click="void 0">
<v-list-tile-avatar>
<img src="https://placeimg.com/128/128/people" alt="icon">
</v-list-tile-avatar>

<v-list-tile-content>
<v-list-tile-title>Title</v-list-tile-title>
<v-list-tile-sub-title>*screams*</v-list-tile-sub-title>
</v-list-tile-content>

<v-list-tile-action>
<v-btn color="primary" depressed ripple>View</v-btn>
</v-list-tile-action>
</v-list-tile>

<div class="mx-3 mb-2">
<v-btn color="accent" to="/admin/user-reports" block flat nuxt>View all reports</v-btn>
</div>
</v-list>
</v-card>
</v-container>
</v-flex>
</v-layout>
<div class="mx-3 mb-2">
<v-btn color="accent" to="/admin/mod-reports" block flat nuxt>View all reports</v-btn>
</div>
</template>
<v-container v-else fluid>
<h2 class="display-1 font-italic admin__empty text-xs-center">
All done here!
</h2>
</v-container>
</v-list>
</v-card>

<v-card>
<v-list class="admin__recent" two-line>
<v-subheader class="primary--text">
<v-icon class="mr-1" color="primary">mdi-account-alert</v-icon> Recent User Reports
</v-subheader>

<v-list-tile v-for="i in 5" :key="`user-${i}`" avatar @click="void 0">
<v-list-tile-avatar>
<img src="https://placeimg.com/128/128/people" alt="icon">
</v-list-tile-avatar>

<v-list-tile-content>
<v-list-tile-title>Title</v-list-tile-title>
<v-list-tile-sub-title>*screams*</v-list-tile-sub-title>
</v-list-tile-content>

<v-list-tile-action>
<v-btn color="primary" depressed ripple>View</v-btn>
</v-list-tile-action>
</v-list-tile>

<div class="mx-3 mb-2">
<v-btn color="accent" to="/admin/user-reports" block flat nuxt>View all reports</v-btn>
</div>
</v-list>
</v-card>
</div>
</template>

<script>
import NavCard from '~/components/NavCard.vue';
export default {
layout: 'admin',
components: {NavCard},
middleware: 'admin',
async asyncData({$axios}) {
const [
Expand Down

0 comments on commit 0e37a8c

Please sign in to comment.