general fixes
This commit is contained in:
Bytetrex
parent
85c098ee78
commit
308ae85b0e
11 changed files with 1242 additions and 14952 deletions
107
src/App.vue
107
src/App.vue
|
|
@ -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>
|
||||
<div id="app">
|
||||
<div id="navigation">
|
||||
<Navbar />
|
||||
</div>
|
||||
<div id="router content-wrapper">
|
||||
<main>
|
||||
<router-view />
|
||||
</div>
|
||||
<div id="footer">
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from './components/Navbar'
|
||||
import Footer from './components/Footer'
|
||||
import Navbar from "./components/Navbar";
|
||||
import Footer from "./components/Footer";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'KavertiApp',
|
||||
name: "KavertiApp",
|
||||
components: {
|
||||
Navbar,
|
||||
Footer
|
||||
Footer,
|
||||
},
|
||||
mounted() {
|
||||
if(JSON.parse(
|
||||
localStorage.getItem('token'))) {
|
||||
this.$store.commit('setToken', JSON.parse(
|
||||
localStorage.getItem('token')))
|
||||
if (JSON.parse(localStorage.getItem("token"))) {
|
||||
this.$store.commit("setToken", JSON.parse(localStorage.getItem("token")));
|
||||
}
|
||||
if(JSON.parse(
|
||||
localStorage.getItem('wind404'))) {
|
||||
var wind = JSON.parse(
|
||||
localStorage.getItem('wind404'))
|
||||
if (JSON.parse(localStorage.getItem("wind404"))) {
|
||||
var wind = JSON.parse(localStorage.getItem("wind404"));
|
||||
} else {
|
||||
// eslint-disable-next-line no-redeclare
|
||||
var wind = false
|
||||
var wind = false;
|
||||
}
|
||||
this.$store.commit('setWind', wind)
|
||||
Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
|
||||
this.$store.commit("setWind", wind);
|
||||
Object.assign(axios.defaults, {
|
||||
headers: { Authorization: this.$store.state.user.token },
|
||||
});
|
||||
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')
|
||||
.then(res => {
|
||||
this.$store.commit('setUsername', res.data.username)
|
||||
this.$store.commit('setEmail', res.data.email)
|
||||
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
||||
this.$store.commit('setAdmin', res.data.admin)
|
||||
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)
|
||||
}).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 +
|
||||
"/" +
|
||||
"userinfo"
|
||||
)
|
||||
.then((res) => {
|
||||
this.$store.commit("setUsername", res.data.username);
|
||||
this.$store.commit("setEmail", res.data.email);
|
||||
this.$store.commit("setEmailVerified", res.data.emailVerified);
|
||||
this.$store.commit("setAdmin", res.data.admin);
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import NProgress from 'nprogress'
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
Vue.use(VueRouter)
|
||||
Vue.use(VueRouter);
|
||||
NProgress.configure({ showSpinner: false });
|
||||
|
||||
function route(view) {
|
||||
return() => import(`@/views/${view}.vue`)
|
||||
return () =>
|
||||
import (`@/views/${view}.vue`)
|
||||
}
|
||||
|
||||
const routes = [
|
||||
{
|
||||
const routes = [{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: route('Home')
|
||||
|
|
@ -25,7 +25,11 @@ const routes = [
|
|||
name: '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: 'threads', component: route('UserThreads') },
|
||||
{ path: 'items', component: route('UserMarketplace') },
|
||||
|
|
@ -33,7 +37,8 @@ const routes = [
|
|||
{ path: 'inventory', component: route('UserInventory') },
|
||||
{ path: 'friends', component: route('UserFriends') },
|
||||
{ path: 'awards', component: route('UserAwards') }
|
||||
] },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/users',
|
||||
name: 'Users',
|
||||
|
|
@ -61,7 +66,10 @@ const routes = [
|
|||
name: 'Avatar',
|
||||
component: route('Avatar')
|
||||
},
|
||||
{ path: '/t/:username', component: route('Team'), children: [
|
||||
{
|
||||
path: '/t/:username',
|
||||
component: route('Team'),
|
||||
children: [
|
||||
{ path: 'posts', component: route('UserPosts') },
|
||||
{ path: 'threads', component: route('UserThreads') },
|
||||
{ path: 'items', component: route('UserMarketplace') },
|
||||
|
|
@ -69,7 +77,8 @@ const routes = [
|
|||
{ path: 'inventory', component: route('UserInventory') },
|
||||
{ path: 'friends', component: route('UserFriends') },
|
||||
{ path: 'awards', component: route('UserAwards') }
|
||||
] },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/chat',
|
||||
component: route('Chat'),
|
||||
|
|
@ -149,33 +158,36 @@ const routes = [
|
|||
name: 'Stats',
|
||||
component: route('Stats')
|
||||
},
|
||||
{ path: '/admin', component: route('Admin'), children: [
|
||||
{
|
||||
path: '/admin',
|
||||
component: route('Admin'),
|
||||
children: [
|
||||
{ path: 'dashboard', component: route('AdminDashboard') },
|
||||
{ path: 'item', component: route('AdminCreateItem') },
|
||||
] },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
name: '404',
|
||||
component: route('404')
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
});
|
||||
|
||||
router.beforeResolve((to, from, next) => {
|
||||
// If this isn't an initial page load.
|
||||
router.beforeResolve((to, next) => {
|
||||
if (to.name) {
|
||||
// Start the route progress bar.
|
||||
NProgress.start()
|
||||
NProgress.start();
|
||||
}
|
||||
next()
|
||||
next();
|
||||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done()
|
||||
NProgress.done();
|
||||
})
|
||||
export default router
|
||||
|
||||
export default router;
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import tb from 'to-boolean';
|
||||
Vue.use(Vuex)
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
debug: tb(process.env.VUE_APP_STAGING),
|
||||
|
|
@ -175,8 +177,6 @@ export default new Vuex.Store({
|
|||
state.user.currentConversation = id
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
actions: {},
|
||||
modules: {}
|
||||
});
|
||||
|
|
@ -1,78 +1,98 @@
|
|||
<template>
|
||||
<main class="section">
|
||||
<div class="columns is-multiline has-text-centered">
|
||||
<div class="column is-2" v-if="!loadingCategory && categories.length">
|
||||
<b-button @click="$router.push('/forums/create')" class="is-info">Create thread</b-button>
|
||||
<br><br>
|
||||
<div class="box">
|
||||
<router-link
|
||||
:to='"/forums/ALL"'
|
||||
>
|
||||
<p class="subtitle is-link">All</p>
|
||||
<div id="forums">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-3" v-if="!loadingCategory && categories.length">
|
||||
<router-link to="/forums/create">
|
||||
<b-button type="is-info">Create Thread</b-button>
|
||||
</router-link>
|
||||
<br />
|
||||
<b-menu>
|
||||
<b-menu-list label="Categories">
|
||||
<router-link to="/forums/ALL">
|
||||
<b-menu-item label="All"></b-menu-item>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-for='(category, $index) in categories'
|
||||
:key='"category-link-" + $index'
|
||||
:to='"/forums/" + category.value'
|
||||
v-for="(category, $index) in categories"
|
||||
:key="'category-link-' + $index"
|
||||
:to="'/forums/' + category.value"
|
||||
>
|
||||
<p class="subtitle is-link">{{category.name}}</p>
|
||||
<b-menu-item :label="category.name"></b-menu-item>
|
||||
</router-link>
|
||||
</b-menu-list>
|
||||
</b-menu>
|
||||
</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 class="column is-2" v-if="loadingCategory">
|
||||
<div class="box">
|
||||
<p><b-skeleton></b-skeleton></p>
|
||||
<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">
|
||||
<div
|
||||
class="column is-3"
|
||||
v-if="!loadingCategory && !categories.length"
|
||||
>
|
||||
<NoItems connection="true"></NoItems>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column box" v-if="!threads.length && !loadingThreads">
|
||||
<div class="column is-7" v-if="!threads.length && !loadingThreads">
|
||||
<div class="box">
|
||||
<NoItems type="forum threads"></NoItems>
|
||||
</div>
|
||||
<div class="column column is-9" v-if="threads.length">
|
||||
</div>
|
||||
<div class="column is-7" v-if="threads.length">
|
||||
<div class="content">
|
||||
<article class='thread_display box' v-for='(thread) in threads' :key='"thread-" + thread.id' @click="goToThread(thread)">
|
||||
<div style='width: calc(100% - 3rem);'>
|
||||
<div class='thread_display__header'>
|
||||
<span class='thread_display__name'>
|
||||
<article
|
||||
class="thread_display box"
|
||||
v-for="thread in threads"
|
||||
: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 }}
|
||||
</span>
|
||||
<div class='thread_display__meta_bar'>
|
||||
<div class="thread_display__meta_bar">
|
||||
<div>
|
||||
By
|
||||
<span class='thread_display__username' ref='username'>{{thread.User.username}}</span>
|
||||
<span class="thread_display__username" ref="username">
|
||||
{{ thread.User.username }}
|
||||
</span>
|
||||
in
|
||||
<span class='thread_display__category' ref='category'>{{thread.Category.name}}</span>
|
||||
<span class="thread_display__category" ref="category">
|
||||
{{ thread.Category.name }}
|
||||
</span>
|
||||
·
|
||||
<span class='thread_display__date'>{{thread.createdAt | formatDate}}</span>
|
||||
<span class="thread_display__date">
|
||||
{{ thread.createdAt | formatDate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='thread_display__replies_bar'>
|
||||
<div class="thread_display__replies_bar">
|
||||
<div
|
||||
class='thread_display__latest_reply'
|
||||
v-if='thread.Posts.length === 2'
|
||||
class="thread_display__latest_reply"
|
||||
v-if="thread.Posts.length === 2"
|
||||
>
|
||||
<font-awesome-icon :icon='["fa", "reply"]' fixed-width />
|
||||
<span class='thread_display__latest_reply__text'>Latest reply by </span>
|
||||
<span class='thread_display__username'>{{replyUsername}}</span>
|
||||
<font-awesome-icon :icon="['fa', 'reply']" fixed-width />
|
||||
<span class="thread_display__latest_reply__text"
|
||||
>Latest reply by </span
|
||||
>
|
||||
<span class="thread_display__username">{{
|
||||
replyUsername
|
||||
}}</span>
|
||||
·
|
||||
<span class='thread_display__date'>{{thread.Posts[1].createdAt | formatDate}}</span>
|
||||
<span class="thread_display__date">{{
|
||||
thread.Posts[1].createdAt | formatDate
|
||||
}}</span>
|
||||
</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 }}
|
||||
</span>
|
||||
<span title='Replies to thread' v-else>
|
||||
Replies: 0
|
||||
</span>
|
||||
<span title="Replies to thread" v-else> Replies: 0 </span>
|
||||
</div>
|
||||
<div class='thread_display__content'>
|
||||
<div class="thread_display__content">
|
||||
{{ thread.Posts[0].plainText }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,16 +100,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
import NoItems from "../components/NoItems"
|
||||
import NoItems from "../components/NoItems";
|
||||
export default {
|
||||
name: 'Forums',
|
||||
props: ['username'],
|
||||
name: "Forums",
|
||||
props: ["username"],
|
||||
components: {
|
||||
NoItems
|
||||
NoItems,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -97,73 +120,84 @@ export default {
|
|||
loadingCategory: true,
|
||||
loadingThreads: true,
|
||||
threads: [],
|
||||
selectedCategory: 'ALL'
|
||||
}
|
||||
selectedCategory: "ALL",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goToThread(thread) {
|
||||
this.$router.push('/forums/thread/' + thread.id)
|
||||
this.$router.push("/forums/thread/" + thread.id);
|
||||
},
|
||||
getThreads(initial) {
|
||||
if(this.nextURL === null && !initial) return
|
||||
if (this.nextURL === null && !initial) return;
|
||||
|
||||
this.loadingThreads = true
|
||||
this.loadingThreads = true;
|
||||
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/category/' + this.selectedCategory)
|
||||
.then(res => {
|
||||
this.loadingThreads = false
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
"/" +
|
||||
"forums/category/" +
|
||||
this.selectedCategory
|
||||
)
|
||||
.then((res) => {
|
||||
this.loadingThreads = false;
|
||||
|
||||
if (initial) {
|
||||
this.threads = res.data.Threads
|
||||
this.threads = res.data.Threads;
|
||||
} else {
|
||||
this.threads.push(...res.data.Threads)
|
||||
this.threads.push(...res.data.Threads);
|
||||
}
|
||||
|
||||
this.nextURL = res.data.meta.nextURL
|
||||
this.nextThreadsCount = res.data.meta.nextThreadsCount
|
||||
this.nextURL = res.data.meta.nextURL;
|
||||
this.nextThreadsCount = res.data.meta.nextThreadsCount;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loadingThreads = false
|
||||
this.loadingThreads = false;
|
||||
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
})
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedCategory(newValue) {
|
||||
this.$router.push('/forums/' + newValue.toLowerCase());
|
||||
this.$router.push("/forums/" + newValue.toLowerCase());
|
||||
},
|
||||
$route() {
|
||||
this.selectedCategory = this.$route.path.split('/')[2].toUpperCase()
|
||||
this.getThreads(true)
|
||||
}
|
||||
this.selectedCategory = this.$route.path.split("/")[2].toUpperCase();
|
||||
this.getThreads(true);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'forums/category')
|
||||
.then(res => {
|
||||
this.categories = res.data
|
||||
this.loadingCategory = false
|
||||
})
|
||||
.catch(e => {
|
||||
this.loadingCategory = false
|
||||
let invalidId = e.response.data.errors.find(error => {
|
||||
return error.name === 'accountDoesNotExist'
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
"forums/category"
|
||||
)
|
||||
.then((res) => {
|
||||
this.categories = res.data;
|
||||
this.loadingCategory = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loadingCategory = false;
|
||||
let invalidId = e.response.data.errors.find((error) => {
|
||||
return error.name === "accountDoesNotExist";
|
||||
});
|
||||
|
||||
if (invalidId) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
}
|
||||
})
|
||||
this.getThreads(true)
|
||||
}
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
});
|
||||
this.getThreads(true);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables';
|
||||
@import "../assets/scss/variables";
|
||||
|
||||
.thread_display {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<main>
|
||||
<div id="team">
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,47 +1,140 @@
|
|||
<style>
|
||||
.limit{
|
||||
margin-top: 0.5rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<main class="section">
|
||||
<div id="user">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered" v-if="exists">
|
||||
<div class="column is-4 is-vcentered has-text-centered">
|
||||
<h1 class="title">{{user.username}} <Badges :username="user.username" :system="user.system" :hidden="user.hidden" :admin="user.admin" :booster="user.booster" :bot="user.bot"></Badges></h1>
|
||||
<div class="column is-3 is-vcentered has-text-centered">
|
||||
<h1 class="title">
|
||||
{{ user.username }} <Badges
|
||||
:username="user.username"
|
||||
:system="user.system"
|
||||
:hidden="user.hidden"
|
||||
:admin="user.admin"
|
||||
:booster="user.booster"
|
||||
:bot="user.bot"
|
||||
></Badges>
|
||||
</h1>
|
||||
<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 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> {{$t('relationships.notFriends')}}</b-button>
|
||||
<b-button @click="removeFriend" class="is-warning" v-if="relationships.type === 'pending'"><i class="fas fa-minus"></i> {{$t('relationships.pending')}}</b-button>
|
||||
<b-button @click="doRelationshipAccept" class="is-info" v-if="relationships.type === 'pendingCanAccept'"><i class="fas fa-plus"></i> {{$t('relationships.pendingCanAccept')}}</b-button>
|
||||
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'ignore'"><i class="fas fa-minus"></i> {{$t('relationships.ignore')}}</b-button>
|
||||
<b-button @click="removeFriend" class="is-danger" v-if="relationships.type === 'accepted'"><i class="fas fa-minus"></i> {{$t('relationships.accepted')}}</b-button>
|
||||
<b-button class="is-info" v-if="relationships.type === ''" disabled><i class="fas fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> {{ $t('generic.loading') }}</b-button>
|
||||
<b-button
|
||||
@click="doRelationship"
|
||||
class="is-success"
|
||||
v-if="
|
||||
relationships.type === 'notFriends' &&
|
||||
user.username !== $store.state.user.username
|
||||
"
|
||||
><i class="fas fa-plus"></i> {{
|
||||
$t("relationships.notFriends")
|
||||
}}</b-button
|
||||
>
|
||||
<b-button
|
||||
@click="removeFriend"
|
||||
class="is-warning"
|
||||
v-if="relationships.type === 'pending'"
|
||||
><i class="fas fa-minus"></i> {{
|
||||
$t("relationships.pending")
|
||||
}}</b-button
|
||||
>
|
||||
<b-button
|
||||
@click="doRelationshipAccept"
|
||||
class="is-info"
|
||||
v-if="relationships.type === 'pendingCanAccept'"
|
||||
><i class="fas fa-plus"></i> {{
|
||||
$t("relationships.pendingCanAccept")
|
||||
}}</b-button
|
||||
>
|
||||
<b-button
|
||||
@click="removeFriend"
|
||||
class="is-danger"
|
||||
v-if="relationships.type === 'ignore'"
|
||||
><i class="fas fa-minus"></i> {{
|
||||
$t("relationships.ignore")
|
||||
}}</b-button
|
||||
>
|
||||
<b-button
|
||||
@click="removeFriend"
|
||||
class="is-danger"
|
||||
v-if="relationships.type === 'accepted'"
|
||||
><i class="fas fa-minus"></i> {{
|
||||
$t("relationships.accepted")
|
||||
}}</b-button
|
||||
>
|
||||
<b-button
|
||||
class="is-info"
|
||||
v-if="relationships.type === ''"
|
||||
disabled
|
||||
><i class="fas fa-spin"></i> <i
|
||||
class="fas fa-circle-notch fa-spin"
|
||||
></i
|
||||
> {{ $t("generic.loading") }}</b-button
|
||||
>
|
||||
</div>
|
||||
<h1 class="subtitle">
|
||||
{{ $t('user.about') }} {{user.username}}
|
||||
</h1>
|
||||
<h1 class="subtitle">{{ $t("user.about") }} {{ user.username }}</h1>
|
||||
<div class="box limit">
|
||||
<div v-if="user.description">{{ $t('user.description') }}: {{user.description}}</div><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 v-if="user.description">
|
||||
{{ $t("user.description") }}: {{ user.description }}
|
||||
</div>
|
||||
<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 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 class="tabs">
|
||||
<ul>
|
||||
<router-link tag="li" :to="'/u/' + user.username + '/wall'" exact><a>{{ $t('user.wall') }}</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>
|
||||
<router-link
|
||||
tag="li"
|
||||
:to="'/u/' + user.username + '/wall'"
|
||||
exact
|
||||
><a>{{ $t("user.wall") }}</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,19 +148,21 @@
|
|||
<div class="column" v-if="!exists">
|
||||
<NoItems notFound="true"></NoItems>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AjaxErrorHandler from '../../assets/js/errorHandler'
|
||||
import Badges from '../components/Badges'
|
||||
import NoItems from '../components/NoItems'
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
import Badges from "../components/Badges";
|
||||
import NoItems from "../components/NoItems";
|
||||
|
||||
export default {
|
||||
name: 'User',
|
||||
name: "User",
|
||||
components: {
|
||||
Badges,
|
||||
NoItems
|
||||
NoItems,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -75,43 +170,49 @@ export default {
|
|||
user: {
|
||||
username: "Loading",
|
||||
description: "Loading",
|
||||
createdAt: "2020-01-01T00:00:00.000Z"
|
||||
createdAt: "2020-01-01T00:00:00.000Z",
|
||||
},
|
||||
exists: true,
|
||||
relationship: false,
|
||||
relationships: {
|
||||
type: ''
|
||||
}
|
||||
}
|
||||
type: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.params.username' () {
|
||||
this.user = [{
|
||||
"$route.params.username"() {
|
||||
this.user = [
|
||||
{
|
||||
username: "Loading",
|
||||
description: "Loading",
|
||||
createdAt: "2020-01-01T00:00:00.000Z"
|
||||
}]
|
||||
this.relationship = false
|
||||
this.relationships.type = ''
|
||||
this.fetchData()
|
||||
}
|
||||
createdAt: "2020-01-01T00:00:00.000Z",
|
||||
},
|
||||
];
|
||||
this.relationship = false;
|
||||
this.relationships.type = "";
|
||||
this.fetchData();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
userColor() {
|
||||
if (this.user) {
|
||||
return this.user.color
|
||||
return this.user.color;
|
||||
} else {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
},
|
||||
userPicture() {
|
||||
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 {
|
||||
return null
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resetFetchData() {
|
||||
this.offset = 0;
|
||||
|
|
@ -121,234 +222,326 @@ export default {
|
|||
},
|
||||
fetchData() {
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `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'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`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) {
|
||||
this.exists = false
|
||||
this.exists = false;
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
})
|
||||
});
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'relationships/get/' + this.$route.params.username)
|
||||
.then(res => this.relationships.type = res.data.type)
|
||||
.get(
|
||||
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() {
|
||||
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",
|
||||
user: this.username
|
||||
})
|
||||
user: this.username,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.resetFetchData()
|
||||
this.resetFetchData();
|
||||
})
|
||||
.catch(AjaxErrorHandler(this.$store))
|
||||
.catch(AjaxErrorHandler(this.$store));
|
||||
},
|
||||
refreshAvatar() {
|
||||
this.axios
|
||||
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/user/avatar', {
|
||||
user: this.username
|
||||
})
|
||||
.put(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
"/" +
|
||||
"admin/user/avatar",
|
||||
{
|
||||
user: this.username,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.resetFetchData()
|
||||
this.resetFetchData();
|
||||
})
|
||||
.catch(AjaxErrorHandler(this.$store))
|
||||
.catch(AjaxErrorHandler(this.$store));
|
||||
},
|
||||
scrubUsername() {
|
||||
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",
|
||||
user: this.username
|
||||
})
|
||||
user: this.username,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.description.loading = false
|
||||
this.description.loading = false;
|
||||
})
|
||||
.catch(AjaxErrorHandler(this.$store))
|
||||
.catch(AjaxErrorHandler(this.$store));
|
||||
},
|
||||
refreshFriend() {
|
||||
this.relationships.type === ''
|
||||
this.relationships.type === "";
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
|
||||
.then(res => this.relationships.type = res.data.type)
|
||||
.get(
|
||||
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() {
|
||||
this.axios
|
||||
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', {
|
||||
friend: this.$route.params.username
|
||||
})
|
||||
.put(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
"/" +
|
||||
"relationships/remove",
|
||||
{
|
||||
friend: this.$route.params.username,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.refreshFriend()
|
||||
this.description.loading = false
|
||||
this.refreshFriend();
|
||||
this.description.loading = false;
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
|
||||
.then(res => this.relationship = res.data, this.refreshFriend())
|
||||
.catch(e => {
|
||||
this.refreshFriend()
|
||||
let invalidId = e.response.data.errors.find(error => {
|
||||
return error.name === 'accountDoesNotExist'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`relationships/get/${this.$route.params.username}`
|
||||
)
|
||||
.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) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
this.refreshFriend()
|
||||
this.description.loading = false
|
||||
.catch((e) => {
|
||||
this.refreshFriend();
|
||||
this.description.loading = false;
|
||||
|
||||
AjaxErrorHandler(this.$store)(e, error => {
|
||||
this.description.error = error.message
|
||||
})
|
||||
AjaxErrorHandler(this.$store)(e, (error) => {
|
||||
this.description.error = error.message;
|
||||
});
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `relationships/get/${this.$route.params.username}`)
|
||||
.then(res => this.relationship = res.data, this.refreshFriend())
|
||||
.catch(e => {
|
||||
this.refreshFriend()
|
||||
let invalidId = e.response.data.errors.find(error => {
|
||||
return error.name === 'accountDoesNotExist'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`relationships/get/${this.$route.params.username}`
|
||||
)
|
||||
.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) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
doRelationship() {
|
||||
this.axios
|
||||
.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/send', {
|
||||
friend: this.$route.params.username
|
||||
})
|
||||
.post(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
"/" +
|
||||
"relationships/send",
|
||||
{
|
||||
friend: this.$route.params.username,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.refreshFriend()
|
||||
this.description.loading = false
|
||||
this.refreshFriend();
|
||||
this.description.loading = false;
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `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'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`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) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
this.refreshFriend()
|
||||
this.description.loading = false
|
||||
.catch((e) => {
|
||||
this.refreshFriend();
|
||||
this.description.loading = false;
|
||||
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `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'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`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) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
doRelationshipAccept() {
|
||||
this.axios
|
||||
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', {
|
||||
friend: this.$route.params.username
|
||||
})
|
||||
.put(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
"/" +
|
||||
"relationships/accept",
|
||||
{
|
||||
friend: this.$route.params.username,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.refreshFriend()
|
||||
this.description.loading = false
|
||||
this.refreshFriend();
|
||||
this.description.loading = false;
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `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'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`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) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
this.refreshFriend()
|
||||
this.description.loading = false
|
||||
.catch((e) => {
|
||||
this.refreshFriend();
|
||||
this.description.loading = false;
|
||||
|
||||
AjaxErrorHandler(this.$store)(e, error => {
|
||||
this.description.error = error.message
|
||||
})
|
||||
AjaxErrorHandler(this.$store)(e, (error) => {
|
||||
this.description.error = error.message;
|
||||
});
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `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'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`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) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
getIndexFromRoute(path) {
|
||||
let selectedIndex
|
||||
let route = path.split('/')[3]
|
||||
let selectedIndex;
|
||||
let route = path.split("/")[3];
|
||||
|
||||
this.menuItems.forEach((item, index) => {
|
||||
if (item.route === route) {
|
||||
selectedIndex = index
|
||||
selectedIndex = index;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return selectedIndex
|
||||
}
|
||||
return selectedIndex;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetFetchData()
|
||||
this.selected = this.getIndexFromRoute(this.$route.path)
|
||||
this.resetFetchData();
|
||||
this.selected = this.getIndexFromRoute(this.$route.path);
|
||||
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}`)
|
||||
.then(res => this.user = res.data)
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`user/${this.$route.params.username}`
|
||||
)
|
||||
.then((res) => (this.user = res.data));
|
||||
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `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'
|
||||
})
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
`/` +
|
||||
`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) {
|
||||
this.$store.commit('set404Page', true)
|
||||
this.$store.commit("set404Page", true);
|
||||
} else {
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<div id="user-items">
|
||||
TEST
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
<template>
|
||||
<main>TEST</main>
|
||||
<div id="user-threads">
|
||||
TEST
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
<template>
|
||||
<main>TEST</main>
|
||||
<div id="user-wall">
|
||||
TEST
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,24 +1,49 @@
|
|||
<template>
|
||||
<main class="section">
|
||||
<div class="columns is-multiline" v-if="!loading">
|
||||
<div id="users">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered is-multiline" v-if="!loading">
|
||||
<div v-if="!users.length" class="column">
|
||||
<br>
|
||||
<NoItems :connection="true" type="users">
|
||||
</NoItems>
|
||||
<br />
|
||||
<NoItems :connection="true" type="users"> </NoItems>
|
||||
</div>
|
||||
<Pagination
|
||||
class='columns is-multiline'
|
||||
v-if='users.length'
|
||||
:loading='loading'
|
||||
class="columns is-multiline"
|
||||
v-if="users.length"
|
||||
:loading="loading"
|
||||
:paginate="paginate"
|
||||
: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">
|
||||
<h1 class="title">{{user.username}} <Badges :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>
|
||||
<h1 class="title">
|
||||
{{ user.username }} <Badges
|
||||
: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>
|
||||
</Pagination>
|
||||
|
|
@ -39,7 +64,16 @@
|
|||
</h1>
|
||||
<b-skeleton height="100px"></b-skeleton>
|
||||
</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">
|
||||
<h1 class="title">
|
||||
<b-skeleton></b-skeleton>
|
||||
|
|
@ -62,21 +96,16 @@
|
|||
</h1>
|
||||
<b-skeleton height="100px"></b-skeleton>
|
||||
</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">
|
||||
<h1 class="title">
|
||||
<b-skeleton></b-skeleton>
|
||||
</h1>
|
||||
<b-skeleton height="100px"></b-skeleton>
|
||||
</div>
|
||||
</div> <div class="column is-4">
|
||||
<div class="column is-4">
|
||||
<div class="box">
|
||||
<h1 class="title">
|
||||
<b-skeleton></b-skeleton>
|
||||
|
|
@ -93,19 +122,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
import Badges from "../components/Badges"
|
||||
import NoItems from "../components/NoItems"
|
||||
import Pagination from "../components/Pagination"
|
||||
import Badges from "../components/Badges";
|
||||
import NoItems from "../components/NoItems";
|
||||
import Pagination from "../components/Pagination";
|
||||
|
||||
export default {
|
||||
name: 'Users',
|
||||
name: "Users",
|
||||
components: {
|
||||
Badges,
|
||||
NoItems,
|
||||
Pagination
|
||||
Pagination,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -114,49 +147,56 @@ export default {
|
|||
paginate: true,
|
||||
limit: 30,
|
||||
loading: true,
|
||||
wait: true
|
||||
}
|
||||
wait: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getUsers(initial) {
|
||||
if (initial) {
|
||||
this.users = []
|
||||
this.loading = true
|
||||
this.offset = 0
|
||||
this.paginate = true
|
||||
this.users = [];
|
||||
this.loading = true;
|
||||
this.offset = 0;
|
||||
this.paginate = true;
|
||||
}
|
||||
if (!initial) {
|
||||
this.wait = true
|
||||
this.wait = true;
|
||||
}
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'user/' + '?offset=' + this.offset)
|
||||
.then(res => {
|
||||
.get(
|
||||
process.env.VUE_APP_APIENDPOINT +
|
||||
process.env.VUE_APP_APIVERSION +
|
||||
"/" +
|
||||
"user/" +
|
||||
"?offset=" +
|
||||
this.offset
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data < this.limit) {
|
||||
this.offset = null;
|
||||
} else {
|
||||
this.offset += this.limit;
|
||||
}
|
||||
if (!initial && !res.data.length) {
|
||||
this.paginate = false
|
||||
this.paginate = false;
|
||||
}
|
||||
if (initial) {
|
||||
this.users = res.data
|
||||
this.users = res.data;
|
||||
} else {
|
||||
this.users.push(...res.data)
|
||||
this.users.push(...res.data);
|
||||
}
|
||||
this.loading = false
|
||||
this.wait = false
|
||||
this.loading = false;
|
||||
this.wait = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loading = false
|
||||
this.wait = false
|
||||
AjaxErrorHandler(this.$store)(e)
|
||||
})
|
||||
}
|
||||
this.loading = false;
|
||||
this.wait = false;
|
||||
AjaxErrorHandler(this.$store)(e);
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true
|
||||
this.getUsers()
|
||||
}
|
||||
}
|
||||
this.loading = true;
|
||||
this.getUsers();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in a new issue