Skip to content

Commit c58ef1f

Browse files
schrejschrej
committed
Merge branch 'feature/vuejs-serverlist' into feature/vue-serverview
2 parents a1558fa + 9831adb commit c58ef1f

File tree

7 files changed

+117
-44
lines changed

7 files changed

+117
-44
lines changed

‎resources/assets/scripts/components/Flash.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
2-
<div v-if="notifications.length > 0">
3-
<transition-group tag="div" class="mb-2" name="fade">
4-
<div :class="item.class" class="lg:inline-flex mb-2" role="alert" :key="index" v-for="(item, index) in notifications">
2+
<div v-if="notifications.length > 0" :class="this.container">
3+
<transition-group tag="div" name="fade">
4+
<div class="lg:inline-flex" role="alert" v-for="(item, index) in notifications"
5+
:key="index"
6+
:class="[item.class, {
7+
'mb-2': index < notifications.length - 1
8+
}]"
9+
>
510
<span class="title" v-html="item.title" v-if="item.title.length > 0"></span>
611
<span class="message" v-html="item.message"></span>
712
</div>
@@ -13,6 +18,10 @@
1318
export default {
1419
name: 'flash',
1520
props: {
21+
container: {
22+
type: String,
23+
default: '',
24+
},
1625
timeout: {
1726
type: Number,
1827
default: 0,

‎resources/assets/scripts/components/dashboard/Dashboard.vue‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
<template>
22
<div>
3+
<flash container="mt-4"/>
34
<div class="server-search animate fadein">
4-
<input type="text" placeholder="search for servers..."
5+
<input type="text"
6+
:placeholder="$t('dashboard.index.search')"
57
@input="onChange"
68
v-model="search"
79
ref="search"
810
/>
911
</div>
10-
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start"><div class="server-box" :key="index" v-for="(server, index) in servers.models">
12+
<div v-if="this.loading" class="my-4 animate fadein">
13+
<div class="text-center h-16">
14+
<span class="spinner spinner-xl"></span>
15+
</div>
16+
</div>
17+
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
18+
<div class="server-box animate fadein" :key="index" v-for="(server, index) in servers.models">
1119
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
1220
<div class="float-right">
1321
<div class="indicator"></div>
@@ -19,10 +27,10 @@
1927
</div>
2028
<div class="mb-0 flex">
2129
<div class="usage">
22-
<div class="indicator-title">CPU</div>
30+
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
2331
</div>
24-
<div class="mb-4">
25-
<div class="text-black font-bold text-xl">{{ server.name }}</div>
32+
<div class="usage">
33+
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
2634
</div>
2735
<div class="mb-0 flex">
2836
<div class="usage">
@@ -58,11 +66,14 @@
5866
<script>
5967
import { ServerCollection } from '../../models/server';
6068
import _ from 'lodash';
69+
import Flash from '../Flash';
6170
6271
export default {
6372
name: 'dashboard',
73+
components: { Flash },
6474
data: function () {
6575
return {
76+
loading: true,
6677
search: '',
6778
servers: new ServerCollection,
6879
}
@@ -79,17 +90,34 @@
7990
* @param {string} query
8091
*/
8192
loadServers: function (query = '') {
93+
this.loading = true;
8294
window.axios.get(this.route('api.client.index'), {
8395
params: { query },
8496
})
97+
.finally(() => {
98+
this.clearFlashes();
99+
})
85100
.then(response => {
86101
this.servers = new ServerCollection;
87102
response.data.data.forEach(obj => {
88103
this.servers.add(obj.attributes);
89104
});
105+
106+
if (this.servers.models.length === 0) {
107+
this.info(this.$t('dashboard.index.no_matches'));
108+
}
109+
})
110+
.catch(err => {
111+
console.error(err);
112+
const response = err.response;
113+
if (response.data && _.isObject(response.data.errors)) {
114+
response.data.errors.forEach(function (error) {
115+
this.error(error.detail);
116+
});
117+
}
90118
})
91-
.catch(error => {
92-
console.error(error);
119+
.finally(() => {
120+
this.loading = false;
93121
});
94122
},
95123

‎resources/assets/scripts/models/user.js‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,48 @@
1+
import { Collection, Model } from 'vue-mc';
12
import JwtDecode from 'jwt-decode';
23

3-
const User = function () {
4-
this.id = 0;
5-
this.admin = false;
6-
this.email = '';
7-
};
4+
export class User extends Model {
5+
static defaults() {
6+
return {
7+
id: null,
8+
uuid: '',
9+
username: '',
10+
email: '',
11+
name_first: '',
12+
name_last: '',
13+
language: 'en',
14+
root_admin: false,
15+
}
16+
}
817

9-
/**
10-
* Return a new instance of the user model using a JWT.
11-
*
12-
* @param {string} token
13-
* @returns {User}
14-
*/
15-
User.prototype.fromJwt = function (token) {
16-
return this.newModel(JwtDecode(token));
17-
};
18+
static mutations() {
19+
return {
20+
id: Number,
21+
uuid: String,
22+
username: String,
23+
email: String,
24+
name_first: String,
25+
name_last: String,
26+
language: String,
27+
root_admin: Boolean,
28+
}
29+
}
1830

19-
/**
20-
* Return an instance of this user model with the properties set on it.
21-
*
22-
* @param {object} obj
23-
* @returns {User}
24-
*/
25-
User.prototype.newModel = function (obj) {
26-
this.id = obj.id;
27-
this.admin = obj.admin;
28-
this.email = obj.email;
31+
static fromJWT(token) {
32+
return new User(JwtDecode(token).user || {});
33+
}
34+
}
2935

30-
return this;
31-
};
36+
export class UserCollection extends Collection {
37+
static model() {
38+
return User;
39+
}
3240

33-
export default User;
41+
get todo() {
42+
return this.sum('done');
43+
}
44+
45+
get done() {
46+
return this.todo === 0;
47+
}
48+
}

‎resources/assets/scripts/store.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import User from './models/user';
1+
import { User } from './models/user';
22

33
export const storeData = {
44
state: {
@@ -13,15 +13,25 @@ export const storeData = {
1313
},
1414
},
1515
getters: {
16-
user: function (state) {
16+
getCurrentUser: function (state) {
17+
if (!(state.user instanceof User)) {
18+
state.user = User.fromJWT(localStorage.getItem('token'));
19+
}
20+
1721
return state.user;
1822
},
1923
},
2024
mutations: {
25+
/**
26+
* Log in a user and store them in vuex using the local storage token.
27+
*
28+
* @param state
29+
*/
2130
login: function (state) {
22-
state.user = new User().fromJwt(localStorage.getItem('token'));
31+
state.user = User.fromJWT(localStorage.getItem('token'));
2332
},
2433
logout: function (state) {
34+
console.log('logout');
2535
state.user = null;
2636
}
2737
}

‎resources/assets/styles/components/spinners.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
position: relative;
55

66
&:after {
7+
@apply .border-2 .border-grey-light .absolute .block;
78
animation: spinners--spin 500ms infinite linear;
89
border-radius: 9999px;
9-
@apply .border-2 .border-grey-light;
1010
border-top-color: transparent !important;
1111
border-right-color: transparent !important;
1212
content: '';
13-
display: block;
1413
width: 1em;
1514
height: 1em;
1615
left: calc(50% - (1em / 2));
1716
top: calc(50% - (1em / 2));
18-
position: absolute !important;
17+
}
18+
19+
&.spinner-xl:after {
20+
@apply .h-16 .w-16;
21+
left: calc(50% - (4rem / 2));
1922
}
2023

2124
/**

‎resources/lang/en/dashboard/index.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?php
2+
3+
return [
4+
'search' => 'Search for servers...',
5+
'no_matches' => 'There were no servers found matching the search criteria provided.',
6+
'cpu_title' => 'CPU',
7+
'memory_title' => 'Memory',
8+
];

‎webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ module.exports = {
3939
extensions: ['*', '.js', '.vue', '.json']
4040
},
4141
plugins: [],
42-
devtool: '#source-map',
42+
devtool: 'source-map',
4343
};

0 commit comments

Comments
 (0)