kaverti/frontend
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

general fixes

Browse source
This commit is contained in:
Bytetrex 2021-04-07 17:32:16 +08:00
parent 85c098ee78
commit 308ae85b0e
11 changed files with 1242 additions and 14952 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
src/App.vue
View file

@ -1,68 +1,83 @@
<style lang="scss">
@import './assets/scss/buefy';
@import './assets/scss/editor';
</style>
<style>
@import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
@import '../assets/css/kaverti.css';
</style>
<template> <template>
<div id="app"> <div id="app">
<div id="navigation">
<Navbar /> <Navbar />
</div> <main>
<div id="router content-wrapper">
<router-view /> <router-view />
</div> </main>
<div id="footer">
<Footer /> <Footer />
</div> </div>
</div>
</template> </template>
<script> <script>
import Navbar from './components/Navbar' import Navbar from "./components/Navbar";
import Footer from './components/Footer' import Footer from "./components/Footer";
import axios from "axios"; import axios from "axios";
export default { export default {
name: 'KavertiApp', name: "KavertiApp",
components: { components: {
Navbar, Navbar,
Footer Footer,
}, },
mounted() { mounted() {
if(JSON.parse( if (JSON.parse(localStorage.getItem("token"))) {
localStorage.getItem('token'))) { this.$store.commit("setToken", JSON.parse(localStorage.getItem("token")));
this.$store.commit('setToken', JSON.parse(
localStorage.getItem('token')))
} }
if(JSON.parse( if (JSON.parse(localStorage.getItem("wind404"))) {
localStorage.getItem('wind404'))) { var wind = JSON.parse(localStorage.getItem("wind404"));
var wind = JSON.parse(
localStorage.getItem('wind404'))
} else { } else {
// eslint-disable-next-line no-redeclare // eslint-disable-next-line no-redeclare
var wind = false var wind = false;
} }
this.$store.commit('setWind', wind) this.$store.commit("setWind", wind);
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}}) Object.assign(axios.defaults, {
headers: { Authorization: this.$store.state.user.token },
});
if (this.$store.state.debug) { if (this.$store.state.debug) {
this.$buefy.snackbar.open({message:this.$t('errors.devBuild'), type: 'is-warning'}) this.$buefy.snackbar.open({
message: this.$t("errors.devBuild"),
type: "is-warning",
});
} }
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo') this.axios
.then(res => { .get(
this.$store.commit('setUsername', res.data.username) process.env.VUE_APP_APIENDPOINT +
this.$store.commit('setEmail', res.data.email) process.env.VUE_APP_APIVERSION +
this.$store.commit('setEmailVerified', res.data.emailVerified) "/" +
this.$store.commit('setAdmin', res.data.admin) "userinfo"
this.$store.commit('setKoins', res.data.koins) )
this.$store.commit('setID', res.data.id) .then((res) => {
this.$store.commit('setBot', res.data.bot) this.$store.commit("setUsername", res.data.username);
this.$store.commit('setDescription', res.data.description) this.$store.commit("setEmail", res.data.email);
this.$store.commit('setExecutive', res.data.executive) this.$store.commit("setEmailVerified", res.data.emailVerified);
}).catch(() => { this.$store.commit("setAdmin", res.data.admin);
this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-warning'}) this.$store.commit("setKoins", res.data.koins);
this.$store.commit("setID", res.data.id);
this.$store.commit("setBot", res.data.bot);
this.$store.commit("setDescription", res.data.description);
this.$store.commit("setExecutive", res.data.executive);
}) })
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'awards/eligibility') .catch(() => {
} this.$buefy.snackbar.open({
} message: this.$t("errors.down"),
type: "is-warning",
});
});
this.axios.get(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
"/" +
"awards/eligibility"
);
},
};
</script> </script>
<style lang="scss">
@import "./assets/scss/buefy";
@import "./assets/scss/editor";
</style>
<style lang="css">
@import "https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css";
</style>

56
src/router/index.js
View file

@ -1,16 +1,16 @@
import Vue from 'vue' import Vue from 'vue';
import VueRouter from 'vue-router' import VueRouter from 'vue-router';
import NProgress from 'nprogress' import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; import 'nprogress/nprogress.css';
Vue.use(VueRouter) Vue.use(VueRouter);
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
function route(view) { function route(view) {
return() => import(`@/views/${view}.vue`) return () =>
import (`@/views/${view}.vue`)
} }
const routes = [ const routes = [{
{
path: '/', path: '/',
name: 'Home', name: 'Home',
component: route('Home') component: route('Home')
@ -25,7 +25,11 @@ const routes = [
name: 'Debug', name: 'Debug',
component: route('Debug') component: route('Debug')
}, },
{ path: '/u/:username', redirect: '/u/:username/awards', component: route('User'), children: [ {
path: '/u/:username',
redirect: '/u/:username/awards',
component: route('User'),
children: [
{ path: 'posts', component: route('UserPosts') }, { path: 'posts', component: route('UserPosts') },
{ path: 'threads', component: route('UserThreads') }, { path: 'threads', component: route('UserThreads') },
{ path: 'items', component: route('UserMarketplace') }, { path: 'items', component: route('UserMarketplace') },
@ -33,7 +37,8 @@ const routes = [
{ path: 'inventory', component: route('UserInventory') }, { path: 'inventory', component: route('UserInventory') },
{ path: 'friends', component: route('UserFriends') }, { path: 'friends', component: route('UserFriends') },
{ path: 'awards', component: route('UserAwards') } { path: 'awards', component: route('UserAwards') }
] }, ]
},
{ {
path: '/users', path: '/users',
name: 'Users', name: 'Users',
@ -61,7 +66,10 @@ const routes = [
name: 'Avatar', name: 'Avatar',
component: route('Avatar') component: route('Avatar')
}, },
{ path: '/t/:username', component: route('Team'), children: [ {
path: '/t/:username',
component: route('Team'),
children: [
{ path: 'posts', component: route('UserPosts') }, { path: 'posts', component: route('UserPosts') },
{ path: 'threads', component: route('UserThreads') }, { path: 'threads', component: route('UserThreads') },
{ path: 'items', component: route('UserMarketplace') }, { path: 'items', component: route('UserMarketplace') },
@ -69,7 +77,8 @@ const routes = [
{ path: 'inventory', component: route('UserInventory') }, { path: 'inventory', component: route('UserInventory') },
{ path: 'friends', component: route('UserFriends') }, { path: 'friends', component: route('UserFriends') },
{ path: 'awards', component: route('UserAwards') } { path: 'awards', component: route('UserAwards') }
] }, ]
},
{ {
path: '/chat', path: '/chat',
component: route('Chat'), component: route('Chat'),
@ -149,33 +158,36 @@ const routes = [
name: 'Stats', name: 'Stats',
component: route('Stats') component: route('Stats')
}, },
{ path: '/admin', component: route('Admin'), children: [ {
path: '/admin',
component: route('Admin'),
children: [
{ path: 'dashboard', component: route('AdminDashboard') }, { path: 'dashboard', component: route('AdminDashboard') },
{ path: 'item', component: route('AdminCreateItem') }, { path: 'item', component: route('AdminCreateItem') },
] }, ]
},
{ {
path: '*', path: '*',
name: '404', name: '404',
component: route('404') component: route('404')
} }
] ];
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes
}) });
router.beforeResolve((to, from, next) => { router.beforeResolve((to, next) => {
// If this isn't an initial page load.
if (to.name) { if (to.name) {
// Start the route progress bar. NProgress.start();
NProgress.start()
} }
next() next();
}) })
router.afterEach(() => { router.afterEach(() => {
NProgress.done() NProgress.done();
}) })
export default router
export default router;

16
src/store/index.js
View file

@ -1,7 +1,9 @@
import Vue from 'vue' import Vue from 'vue';
import Vuex from 'vuex' import Vuex from 'vuex';
import tb from 'to-boolean'; import tb from 'to-boolean';
Vue.use(Vuex)
Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
debug: tb(process.env.VUE_APP_STAGING), debug: tb(process.env.VUE_APP_STAGING),
@ -175,8 +177,6 @@ export default new Vuex.Store({
state.user.currentConversation = id state.user.currentConversation = id
} }
}, },
actions: { actions: {},
}, modules: {}
modules: { });
}
})

208
src/views/Forums.vue
View file

@ -1,78 +1,98 @@
<template> <template>
<main class="section"> <div id="forums">
<div class="columns is-multiline has-text-centered"> <section class="section">
<div class="column is-2" v-if="!loadingCategory && categories.length"> <div class="container">
<b-button @click="$router.push('/forums/create')" class="is-info">Create thread</b-button> <div class="columns is-centered">
<br><br> <div class="column is-3" v-if="!loadingCategory && categories.length">
<div class="box"> <router-link to="/forums/create">
<router-link <b-button type="is-info">Create Thread</b-button>
:to='"/forums/ALL"' </router-link>
> <br />
<p class="subtitle is-link">All</p> <b-menu>
<b-menu-list label="Categories">
<router-link to="/forums/ALL">
<b-menu-item label="All"></b-menu-item>
</router-link> </router-link>
<router-link <router-link
v-for='(category, $index) in categories' v-for="(category, $index) in categories"
:key='"category-link-" + $index' :key="'category-link-' + $index"
:to='"/forums/" + category.value' :to="'/forums/' + category.value"
> >
<p class="subtitle is-link">{{category.name}}</p> <b-menu-item :label="category.name"></b-menu-item>
</router-link> </router-link>
</b-menu-list>
</b-menu>
</div> </div>
<div class="column is-3" v-if="loadingCategory">
<b-skeleton></b-skeleton>
<b-skeleton></b-skeleton>
<b-skeleton></b-skeleton>
<b-skeleton></b-skeleton>
</div> </div>
<div class="column is-2" v-if="loadingCategory"> <div
<div class="box"> class="column is-3"
<p><b-skeleton></b-skeleton></p> v-if="!loadingCategory && !categories.length"
<p><b-skeleton></b-skeleton></p> >
<p><b-skeleton></b-skeleton></p>
<p><b-skeleton></b-skeleton></p>
</div>
</div>
<div class="column is-2" v-if="!loadingCategory && !categories.length">
<div class="box">
<NoItems connection="true"></NoItems> <NoItems connection="true"></NoItems>
</div> </div>
</div> <div class="column is-7" v-if="!threads.length && !loadingThreads">
<div class="column box" v-if="!threads.length && !loadingThreads"> <div class="box">
<NoItems type="forum threads"></NoItems> <NoItems type="forum threads"></NoItems>
</div> </div>
<div class="column column is-9" v-if="threads.length"> </div>
<div class="column is-7" v-if="threads.length">
<div class="content"> <div class="content">
<article class='thread_display box' v-for='(thread) in threads' :key='"thread-" + thread.id' @click="goToThread(thread)"> <article
<div style='width: calc(100% - 3rem);'> class="thread_display box"
<div class='thread_display__header'> v-for="thread in threads"
<span class='thread_display__name'> :key="'thread-' + thread.id"
@click="goToThread(thread)"
>
<div style="width: calc(100% - 3rem)">
<div class="thread_display__header">
<span class="thread_display__name">
{{ thread.name }} {{ thread.name }}
</span> </span>
<div class='thread_display__meta_bar'> <div class="thread_display__meta_bar">
<div> <div>
By By
<span class='thread_display__username' ref='username'>{{thread.User.username}}</span> <span class="thread_display__username" ref="username">
{{ thread.User.username }}
</span>
in in
<span class='thread_display__category' ref='category'>{{thread.Category.name}}</span> <span class="thread_display__category" ref="category">
{{ thread.Category.name }}
</span>
&middot; &middot;
<span class='thread_display__date'>{{thread.createdAt | formatDate}}</span> <span class="thread_display__date">
{{ thread.createdAt | formatDate }}
</span>
</div> </div>
</div> </div>
</div> </div>
<div class='thread_display__replies_bar'> <div class="thread_display__replies_bar">
<div <div
class='thread_display__latest_reply' class="thread_display__latest_reply"
v-if='thread.Posts.length === 2' v-if="thread.Posts.length === 2"
> >
<font-awesome-icon :icon='["fa", "reply"]' fixed-width /> <font-awesome-icon :icon="['fa', 'reply']" fixed-width />
<span class='thread_display__latest_reply__text'>Latest reply by &nbsp;</span> <span class="thread_display__latest_reply__text"
<span class='thread_display__username'>{{replyUsername}}</span> >Latest reply by &nbsp;</span
>
<span class="thread_display__username">{{
replyUsername
}}</span>
&middot; &middot;
<span class='thread_display__date'>{{thread.Posts[1].createdAt | formatDate}}</span> <span class="thread_display__date">{{
thread.Posts[1].createdAt | formatDate
}}</span>
</div> </div>
<span title='Replies to thread' v-if="thread.Posts[0]"> <span title="Replies to thread" v-if="thread.Posts[0]">
Replies: {{ thread.postsCount - 1 }} Replies: {{ thread.postsCount - 1 }}
</span> </span>
<span title='Replies to thread' v-else> <span title="Replies to thread" v-else> Replies: 0 </span>
Replies: 0
</span>
</div> </div>
<div class='thread_display__content'> <div class="thread_display__content">
{{ thread.Posts[0].plainText }} {{ thread.Posts[0].plainText }}
</div> </div>
</div> </div>
@ -80,16 +100,19 @@
</div> </div>
</div> </div>
</div> </div>
</main> </div>
</section>
</div>
</template> </template>
<script> <script>
import AjaxErrorHandler from "../../assets/js/errorHandler"; import AjaxErrorHandler from "../../assets/js/errorHandler";
import NoItems from "../components/NoItems" import NoItems from "../components/NoItems";
export default { export default {
name: 'Forums', name: "Forums",
props: ['username'], props: ["username"],
components: { components: {
NoItems NoItems,
}, },
data() { data() {
return { return {
@ -97,73 +120,84 @@ export default {
loadingCategory: true, loadingCategory: true,
loadingThreads: true, loadingThreads: true,
threads: [], threads: [],
selectedCategory: 'ALL' selectedCategory: "ALL",
} };
}, },
methods: { methods: {
goToThread(thread) { goToThread(thread) {
this.$router.push('/forums/thread/' + thread.id) this.$router.push("/forums/thread/" + thread.id);
}, },
getThreads(initial) { getThreads(initial) {
if(this.nextURL === null && !initial) return if (this.nextURL === null && !initial) return;
this.loadingThreads = true this.loadingThreads = true;
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/category/' + this.selectedCategory) .get(
.then(res => { process.env.VUE_APP_APIENDPOINT +
this.loadingThreads = false process.env.VUE_APP_APIVERSION +
"/" +
"forums/category/" +
this.selectedCategory
)
.then((res) => {
this.loadingThreads = false;
if (initial) { if (initial) {
this.threads = res.data.Threads this.threads = res.data.Threads;
} else { } else {
this.threads.push(...res.data.Threads) this.threads.push(...res.data.Threads);
} }
this.nextURL = res.data.meta.nextURL this.nextURL = res.data.meta.nextURL;
this.nextThreadsCount = res.data.meta.nextThreadsCount this.nextThreadsCount = res.data.meta.nextThreadsCount;
}) })
.catch((e) => { .catch((e) => {
this.loadingThreads = false this.loadingThreads = false;
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
}) });
}, },
}, },
watch: { watch: {
selectedCategory(newValue) { selectedCategory(newValue) {
this.$router.push('/forums/' + newValue.toLowerCase()); this.$router.push("/forums/" + newValue.toLowerCase());
}, },
$route() { $route() {
this.selectedCategory = this.$route.path.split('/')[2].toUpperCase() this.selectedCategory = this.$route.path.split("/")[2].toUpperCase();
this.getThreads(true) this.getThreads(true);
} },
}, },
mounted() { mounted() {
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'forums/category') .get(
.then(res => { process.env.VUE_APP_APIENDPOINT +
this.categories = res.data process.env.VUE_APP_APIVERSION +
this.loadingCategory = false `/` +
}) "forums/category"
.catch(e => { )
this.loadingCategory = false .then((res) => {
let invalidId = e.response.data.errors.find(error => { this.categories = res.data;
return error.name === 'accountDoesNotExist' this.loadingCategory = false;
}) })
.catch((e) => {
this.loadingCategory = false;
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
}
})
this.getThreads(true)
}
} }
});
this.getThreads(true);
},
};
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@import '../assets/scss/variables'; @import "../assets/scss/variables";
.thread_display { .thread_display {
cursor: pointer; cursor: pointer;

4
src/views/Team.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<main> <div id="team">
</main> </div>
</template> </template>

581
src/views/User.vue
View file

@ -1,47 +1,140 @@
<style>
.limit{
margin-top: 0.5rem;
word-break: break-all;
}
</style>
<template> <template>
<main class="section"> <div id="user">
<section class="section">
<div class="container">
<div class="columns is-centered" v-if="exists"> <div class="columns is-centered" v-if="exists">
<div class="column is-4 is-vcentered has-text-centered"> <div class="column is-3 is-vcentered has-text-centered">
<h1 class="title">{{user.username}}&nbsp;<Badges :username="user.username" :system="user.system" :hidden="user.hidden" :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges></h1> <h1 class="title">
{{ user.username }}&nbsp;<Badges
:username="user.username"
:system="user.system"
:hidden="user.hidden"
:admin="user.admin"
:booster="user.booster"
:bot="user.bot"
></Badges>
</h1>
<div class="box"> <div class="box">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + user.picture + '.png'" :alt="user.username + '\'s avatar'" width="50%"> <img
:src="
'https://cdn.kaverti.com/user/avatars/full/' +
user.picture +
'.png'
"
:alt="user.username + '\'s avatar'"
width="50%"
/>
</div> </div>
<div class="buttons is-centered"> <div class="buttons is-centered">
<b-button @click="doRelationship" class="is-success" v-if="relationships.type === 'notFriends' && user.username !== $store.state.user.username"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.notFriends')}}</b-button> <b-button
<b-button @click="removeFriend" class="is-warning" v-if="relationships.type === 'pending'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.pending')}}</b-button> @click="doRelationship"
<b-button @click="doRelationshipAccept" class="is-info" v-if="relationships.type === 'pendingCanAccept'"><i class="fas fa-plus"></i> &nbsp;{{$t('relationships.pendingCanAccept')}}</b-button> class="is-success"
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'ignore'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.ignore')}}</b-button> v-if="
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'accepted'"><i class="fas fa-minus"></i> &nbsp;{{$t('relationships.accepted')}}</b-button> relationships.type === 'notFriends' &&
<b-button class="is-info" v-if="relationships.type === ''" disabled><i class="fas fa-spin"></i> &nbsp;<i class="fas fa-circle-notch fa-spin"></i>&nbsp;{{ $t('generic.loading') }}</b-button> user.username !== $store.state.user.username
"
><i class="fas fa-plus"></i> &nbsp;{{
$t("relationships.notFriends")
}}</b-button
>
<b-button
@click="removeFriend"
class="is-warning"
v-if="relationships.type === 'pending'"
><i class="fas fa-minus"></i> &nbsp;{{
$t("relationships.pending")
}}</b-button
>
<b-button
@click="doRelationshipAccept"
class="is-info"
v-if="relationships.type === 'pendingCanAccept'"
><i class="fas fa-plus"></i> &nbsp;{{
$t("relationships.pendingCanAccept")
}}</b-button
>
<b-button
@click="removeFriend"
class="is-danger"
v-if="relationships.type === 'ignore'"
><i class="fas fa-minus"></i> &nbsp;{{
$t("relationships.ignore")
}}</b-button
>
<b-button
@click="removeFriend"
class="is-danger"
v-if="relationships.type === 'accepted'"
><i class="fas fa-minus"></i> &nbsp;{{
$t("relationships.accepted")
}}</b-button
>
<b-button
class="is-info"
v-if="relationships.type === ''"
disabled
><i class="fas fa-spin"></i> &nbsp;<i
class="fas fa-circle-notch fa-spin"
></i
>&nbsp;{{ $t("generic.loading") }}</b-button
>
</div> </div>
<h1 class="subtitle"> <h1 class="subtitle">{{ $t("user.about") }} {{ user.username }}</h1>
{{ $t('user.about') }} {{user.username}}
</h1>
<div class="box limit"> <div class="box limit">
<div v-if="user.description">{{ $t('user.description') }}: {{user.description}}</div><br> <div v-if="user.description">
<div v-if="!user.description">{{$t('user.description')}}: {{$t('user.defaultDesc')}} {{user.username}}</div> {{ $t("user.description") }}: {{ user.description }}
{{ $t('user.created') }}: {{user.createdAt | formatDate()}}<br> </div>
{{ $t('user.marketplace') }}: <br />
<div v-if="!user.description">
{{ $t("user.description") }}: {{ $t("user.defaultDesc") }}
{{ user.username }}
</div>
{{ $t("user.created") }}: {{ user.createdAt | formatDate()
}}<br />
{{ $t("user.marketplace") }}:
</div> </div>
</div> </div>
<div class="column is-6 is-vcentered has-text-centered"> <div class="column is-6 is-vcentered has-text-centered">
<h1 class="title">{{ $t('user.more') }} {{user.username}}</h1> <h1 class="title">{{ $t("user.more") }} {{ user.username }}</h1>
<div> <div>
<div class="tabs"> <div class="tabs">
<ul> <ul>
<router-link tag="li" :to="'/u/' + user.username + '/wall'" exact><a>{{ $t('user.wall') }}</a></router-link> <router-link
<router-link tag="li" :to="'/u/' + user.username + '/items'" exact><a>{{ $t('user.items') }}</a></router-link> tag="li"
<router-link tag="li" :to="'/u/' + user.username + '/inventory'" exact><a>{{ $t('user.inventory') }}</a></router-link> :to="'/u/' + user.username + '/wall'"
<router-link tag="li" :to="'/u/' + user.username + '/awards'" exact><a>{{ $t('user.awards') }}</a></router-link> exact
<router-link tag="li" :to="'/u/' + user.username + '/wearing'" exact><a>{{ $t('user.wearing') }}</a></router-link> ><a>{{ $t("user.wall") }}</a></router-link
<router-link tag="li" :to="'/u/' + user.username + '/friends'" exact><a>{{ $t('user.relationships') }}</a></router-link> >
<router-link
tag="li"
:to="'/u/' + user.username + '/items'"
exact
><a>{{ $t("user.items") }}</a></router-link
>
<router-link
tag="li"
:to="'/u/' + user.username + '/inventory'"
exact
><a>{{ $t("user.inventory") }}</a></router-link
>
<router-link
tag="li"
:to="'/u/' + user.username + '/awards'"
exact
><a>{{ $t("user.awards") }}</a></router-link
>
<router-link
tag="li"
:to="'/u/' + user.username + '/wearing'"
exact
><a>{{ $t("user.wearing") }}</a></router-link
>
<router-link
tag="li"
:to="'/u/' + user.username + '/friends'"
exact
><a>{{ $t("user.relationships") }}</a></router-link
>
</ul> </ul>
</div> </div>
</div> </div>
@ -55,19 +148,21 @@
<div class="column" v-if="!exists"> <div class="column" v-if="!exists">
<NoItems notFound="true"></NoItems> <NoItems notFound="true"></NoItems>
</div> </div>
</main> </div>
</section>
</div>
</template> </template>
<script> <script>
import AjaxErrorHandler from '../../assets/js/errorHandler' import AjaxErrorHandler from "../../assets/js/errorHandler";
import Badges from '../components/Badges' import Badges from "../components/Badges";
import NoItems from '../components/NoItems' import NoItems from "../components/NoItems";
export default { export default {
name: 'User', name: "User",
components: { components: {
Badges, Badges,
NoItems NoItems,
}, },
data() { data() {
return { return {
@ -75,43 +170,49 @@ export default {
user: { user: {
username: "Loading", username: "Loading",
description: "Loading", description: "Loading",
createdAt: "2020-01-01T00:00:00.000Z" createdAt: "2020-01-01T00:00:00.000Z",
}, },
exists: true, exists: true,
relationship: false, relationship: false,
relationships: { relationships: {
type: '' type: "",
} },
} };
}, },
watch: { watch: {
'$route.params.username' () { "$route.params.username"() {
this.user = [{ this.user = [
{
username: "Loading", username: "Loading",
description: "Loading", description: "Loading",
createdAt: "2020-01-01T00:00:00.000Z" createdAt: "2020-01-01T00:00:00.000Z",
}] },
this.relationship = false ];
this.relationships.type = '' this.relationship = false;
this.fetchData() this.relationships.type = "";
} this.fetchData();
},
}, },
computed: { computed: {
userColor() { userColor() {
if (this.user) { if (this.user) {
return this.user.color return this.user.color;
} else { } else {
return null return null;
} }
}, },
userPicture() { userPicture() {
if (this.user && this.user.picture) { if (this.user && this.user.picture) {
return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png' return (
"https://cdn.kaverti.com/user/avatars/full/" +
this.user.picture +
".png"
);
} else { } else {
return null return null;
}
} }
}, },
},
methods: { methods: {
resetFetchData() { resetFetchData() {
this.offset = 0; this.offset = 0;
@ -121,234 +222,326 @@ export default {
}, },
fetchData() { fetchData() {
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}`) .get(
.then(res => this.user = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `user/${this.$route.params.username}`
}) )
.then((res) => (this.user = res.data))
.catch((e) => {
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.exists = false this.exists = false;
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'relationships/get/' + this.$route.params.username) .get(
.then(res => this.relationships.type = res.data.type) process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
"relationships/get/" +
this.$route.params.username
)
.then((res) => (this.relationships.type = res.data.type));
}, },
scrubDesc() { scrubDesc() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/scrub', { .put(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
"/" +
"admin/user/scrub",
{
description: "descscram", description: "descscram",
user: this.username user: this.username,
}) }
)
.then(() => { .then(() => {
this.resetFetchData() this.resetFetchData();
}) })
.catch(AjaxErrorHandler(this.$store)) .catch(AjaxErrorHandler(this.$store));
}, },
refreshAvatar() { refreshAvatar() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/avatar', { .put(
user: this.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
"/" +
"admin/user/avatar",
{
user: this.username,
}
)
.then(() => { .then(() => {
this.resetFetchData() this.resetFetchData();
}) })
.catch(AjaxErrorHandler(this.$store)) .catch(AjaxErrorHandler(this.$store));
}, },
scrubUsername() { scrubUsername() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/scrub', { .put(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
"/" +
"admin/user/scrub",
{
username: "usernamescram", username: "usernamescram",
user: this.username user: this.username,
}) }
)
.then(() => { .then(() => {
this.description.loading = false this.description.loading = false;
}) })
.catch(AjaxErrorHandler(this.$store)) .catch(AjaxErrorHandler(this.$store));
}, },
refreshFriend() { refreshFriend() {
this.relationships.type === '' this.relationships.type === "";
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationships.type = res.data.type) process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`relationships/get/${this.$route.params.username}`
)
.then((res) => (this.relationships.type = res.data.type));
}, },
removeFriend() { removeFriend() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', { .put(
friend: this.$route.params.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
"/" +
"relationships/remove",
{
friend: this.$route.params.username,
}
)
.then(() => { .then(() => {
this.refreshFriend() this.refreshFriend();
this.description.loading = false this.description.loading = false;
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data, this.refreshFriend()) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
this.refreshFriend() `/` +
let invalidId = e.response.data.errors.find(error => { `relationships/get/${this.$route.params.username}`
return error.name === 'accountDoesNotExist' )
}) .then((res) => (this.relationship = res.data), this.refreshFriend())
.catch((e) => {
this.refreshFriend();
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
});
}) })
}) .catch((e) => {
.catch(e => { this.refreshFriend();
this.refreshFriend() this.description.loading = false;
this.description.loading = false
AjaxErrorHandler(this.$store)(e, error => { AjaxErrorHandler(this.$store)(e, (error) => {
this.description.error = error.message this.description.error = error.message;
}) });
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data, this.refreshFriend()) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
this.refreshFriend() `/` +
let invalidId = e.response.data.errors.find(error => { `relationships/get/${this.$route.params.username}`
return error.name === 'accountDoesNotExist' )
}) .then((res) => (this.relationship = res.data), this.refreshFriend())
.catch((e) => {
this.refreshFriend();
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) });
}, },
doRelationship() { doRelationship() {
this.axios this.axios
.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/send', { .post(
friend: this.$route.params.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
"/" +
"relationships/send",
{
friend: this.$route.params.username,
}
)
.then(() => { .then(() => {
this.refreshFriend() this.refreshFriend();
this.description.loading = false this.description.loading = false;
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `relationships/get/${this.$route.params.username}`
}) )
.then((res) => (this.relationship = res.data))
.catch((e) => {
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
});
}) })
}) .catch((e) => {
.catch(e => { this.refreshFriend();
this.refreshFriend() this.description.loading = false;
this.description.loading = false
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `relationships/get/${this.$route.params.username}`
}) )
.then((res) => (this.relationship = res.data))
.catch((e) => {
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) });
}, },
doRelationshipAccept() { doRelationshipAccept() {
this.axios this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', { .put(
friend: this.$route.params.username process.env.VUE_APP_APIENDPOINT +
}) process.env.VUE_APP_APIVERSION +
"/" +
"relationships/accept",
{
friend: this.$route.params.username,
}
)
.then(() => { .then(() => {
this.refreshFriend() this.refreshFriend();
this.description.loading = false this.description.loading = false;
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `relationships/get/${this.$route.params.username}`
}) )
.then((res) => (this.relationship = res.data))
.catch((e) => {
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
});
}) })
}) .catch((e) => {
.catch(e => { this.refreshFriend();
this.refreshFriend() this.description.loading = false;
this.description.loading = false
AjaxErrorHandler(this.$store)(e, error => { AjaxErrorHandler(this.$store)(e, (error) => {
this.description.error = error.message this.description.error = error.message;
}) });
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `relationships/get/${this.$route.params.username}`
}) )
.then((res) => (this.relationship = res.data))
.catch((e) => {
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
} }
}) });
}) });
}, },
getIndexFromRoute(path) { getIndexFromRoute(path) {
let selectedIndex let selectedIndex;
let route = path.split('/')[3] let route = path.split("/")[3];
this.menuItems.forEach((item, index) => { this.menuItems.forEach((item, index) => {
if (item.route === route) { if (item.route === route) {
selectedIndex = index selectedIndex = index;
} }
}) });
return selectedIndex return selectedIndex;
} },
}, },
mounted() { mounted() {
this.resetFetchData() this.resetFetchData();
this.selected = this.getIndexFromRoute(this.$route.path) this.selected = this.getIndexFromRoute(this.$route.path);
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}`) .get(
.then(res => this.user = res.data) process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`user/${this.$route.params.username}`
)
.then((res) => (this.user = res.data));
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`) .get(
.then(res => this.relationship = res.data) process.env.VUE_APP_APIENDPOINT +
.catch(e => { process.env.VUE_APP_APIVERSION +
let invalidId = e.response.data.errors.find(error => { `/` +
return error.name === 'accountDoesNotExist' `relationships/get/${this.$route.params.username}`
}) )
.then((res) => (this.relationship = res.data))
.catch((e) => {
let invalidId = e.response.data.errors.find((error) => {
return error.name === "accountDoesNotExist";
});
if (invalidId) { if (invalidId) {
this.$store.commit('set404Page', true) this.$store.commit("set404Page", true);
} else { } else {
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
}
})
}
} }
});
},
};
</script> </script>

6
src/views/UserItems.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<main> <div id="user-items">
TEST
</main> </div>
</template> </template>

4
src/views/UserThreads.vue
View file

@ -1,3 +1,5 @@
<template> <template>
<main>TEST</main> <div id="user-threads">
TEST
</div>
</template> </template>

4
src/views/UserWall.vue
View file

@ -1,3 +1,5 @@
<template> <template>
<main>TEST</main> <div id="user-wall">
TEST
</div>
</template> </template>

142
src/views/Users.vue
View file

@ -1,24 +1,49 @@
<template> <template>
<main class="section"> <div id="users">
<div class="columns is-multiline" v-if="!loading"> <section class="section">
<div class="container">
<div class="columns is-centered is-multiline" v-if="!loading">
<div v-if="!users.length" class="column"> <div v-if="!users.length" class="column">
<br> <br />
<NoItems :connection="true" type="users"> <NoItems :connection="true" type="users"> </NoItems>
</NoItems>
</div> </div>
<Pagination <Pagination
class='columns is-multiline' class="columns is-multiline"
v-if='users.length' v-if="users.length"
:loading='loading' :loading="loading"
:paginate="paginate" :paginate="paginate"
:wait="wait" :wait="wait"
@loadNext='getUsers(false)' @loadNext="getUsers(false)"
>
<div
class="column is-3"
v-for="user in users"
:key="'user-' + user.id"
> >
<div class="column is-3" v-for='(user) in users' :key='"user-" + user.id'>
<div class="box"> <div class="box">
<h1 class="title">{{user.username}}&nbsp;<Badges :username="user.username" :system="user.system" :hidden="user.hidden" :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges></h1> <h1 class="title">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + user.picture + '.png'"><br> {{ user.username }}&nbsp;<Badges
<b-button tag="router-link" :to='"/u/" + user.username' class="is-centered is-info">View Profile</b-button> :username="user.username"
:system="user.system"
:hidden="user.hidden"
:admin="user.admin"
:booster="user.booster"
:bot="user.bot"
></Badges>
</h1>
<img
:src="
'https://cdn.kaverti.com/user/avatars/full/' +
user.picture +
'.png'
"
/><br />
<b-button
tag="router-link"
:to="'/u/' + user.username"
class="is-centered is-info"
>View Profile</b-button
>
</div> </div>
</div> </div>
</Pagination> </Pagination>
@ -39,7 +64,16 @@
</h1> </h1>
<b-skeleton height="100px"></b-skeleton> <b-skeleton height="100px"></b-skeleton>
</div> </div>
</div> <div class="column is-4"> </div>
<div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div>
</div>
<div class="column is-4">
<div class="box"> <div class="box">
<h1 class="title"> <h1 class="title">
<b-skeleton></b-skeleton> <b-skeleton></b-skeleton>
@ -62,21 +96,16 @@
</h1> </h1>
<b-skeleton height="100px"></b-skeleton> <b-skeleton height="100px"></b-skeleton>
</div> </div>
</div> <div class="column is-4"> </div>
<div class="column is-4">
<div class="box"> <div class="box">
<h1 class="title"> <h1 class="title">
<b-skeleton></b-skeleton> <b-skeleton></b-skeleton>
</h1> </h1>
<b-skeleton height="100px"></b-skeleton> <b-skeleton height="100px"></b-skeleton>
</div> </div>
</div> <div class="column is-4">
<div class="box">
<h1 class="title">
<b-skeleton></b-skeleton>
</h1>
<b-skeleton height="100px"></b-skeleton>
</div> </div>
</div> <div class="column is-4"> <div class="column is-4">
<div class="box"> <div class="box">
<h1 class="title"> <h1 class="title">
<b-skeleton></b-skeleton> <b-skeleton></b-skeleton>
@ -93,19 +122,23 @@
</div> </div>
</div> </div>
</div> </div>
</main> </div>
</section>
</div>
</template> </template>
<script> <script>
import AjaxErrorHandler from "../../assets/js/errorHandler"; import AjaxErrorHandler from "../../assets/js/errorHandler";
import Badges from "../components/Badges" import Badges from "../components/Badges";
import NoItems from "../components/NoItems" import NoItems from "../components/NoItems";
import Pagination from "../components/Pagination" import Pagination from "../components/Pagination";
export default { export default {
name: 'Users', name: "Users",
components: { components: {
Badges, Badges,
NoItems, NoItems,
Pagination Pagination,
}, },
data() { data() {
return { return {
@ -114,49 +147,56 @@ export default {
paginate: true, paginate: true,
limit: 30, limit: 30,
loading: true, loading: true,
wait: true wait: true,
} };
}, },
methods: { methods: {
getUsers(initial) { getUsers(initial) {
if (initial) { if (initial) {
this.users = [] this.users = [];
this.loading = true this.loading = true;
this.offset = 0 this.offset = 0;
this.paginate = true this.paginate = true;
} }
if (!initial) { if (!initial) {
this.wait = true this.wait = true;
} }
this.axios this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'user/' + '?offset=' + this.offset) .get(
.then(res => { process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
"/" +
"user/" +
"?offset=" +
this.offset
)
.then((res) => {
if (res.data < this.limit) { if (res.data < this.limit) {
this.offset = null; this.offset = null;
} else { } else {
this.offset += this.limit; this.offset += this.limit;
} }
if (!initial && !res.data.length) { if (!initial && !res.data.length) {
this.paginate = false this.paginate = false;
} }
if (initial) { if (initial) {
this.users = res.data this.users = res.data;
} else { } else {
this.users.push(...res.data) this.users.push(...res.data);
} }
this.loading = false this.loading = false;
this.wait = false this.wait = false;
}) })
.catch((e) => { .catch((e) => {
this.loading = false this.loading = false;
this.wait = false this.wait = false;
AjaxErrorHandler(this.$store)(e) AjaxErrorHandler(this.$store)(e);
}) });
} },
}, },
mounted() { mounted() {
this.loading = true this.loading = true;
this.getUsers() this.getUsers();
} },
} };
</script> </script>

14008
yarn.lock
View file

File diff suppressed because it is too large Load diff