2021-10-05 05:11:42 +02:00
|
|
|
<template>
|
|
|
|
<div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
|
|
|
|
<div class="flex items-center mb-2">
|
|
|
|
<h1 class="text-xl">Users</h1>
|
|
|
|
<div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
|
|
|
|
<span class="material-icons" style="font-size: 1.4rem">add</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="h-0.5 bg-primary bg-opacity-50 w-full" /> -->
|
|
|
|
<div class="text-center">
|
|
|
|
<table id="accounts">
|
|
|
|
<tr>
|
|
|
|
<th>Username</th>
|
2021-10-13 03:07:42 +02:00
|
|
|
<th class="w-20">Type</th>
|
2021-11-04 23:35:59 +01:00
|
|
|
<th class="hidden lg:table-cell">Activity</th>
|
|
|
|
<th class="w-32 hidden sm:table-cell">Last Seen</th>
|
|
|
|
<th class="w-32 hidden sm:table-cell">Created</th>
|
2021-10-13 03:07:42 +02:00
|
|
|
<th class="w-32"></th>
|
2021-10-05 05:11:42 +02:00
|
|
|
</tr>
|
2021-10-23 03:08:02 +02:00
|
|
|
<tr v-for="user in users" :key="user.id" class="cursor-pointer" :class="user.isActive ? '' : 'bg-error bg-opacity-20'" @click="$router.push(`/config/users/${user.id}`)">
|
2021-10-05 05:11:42 +02:00
|
|
|
<td>
|
2021-10-13 03:07:42 +02:00
|
|
|
<div class="flex items-center">
|
2021-10-23 03:08:02 +02:00
|
|
|
<widgets-online-indicator :value="!!usersOnline[user.id]" />
|
2021-12-29 22:53:19 +01:00
|
|
|
<p class="pl-2 truncate">{{ user.username }}</p>
|
2021-10-13 03:07:42 +02:00
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td class="text-sm">{{ user.type }}</td>
|
2021-11-04 23:35:59 +01:00
|
|
|
<td class="hidden lg:table-cell">
|
2021-10-13 03:07:42 +02:00
|
|
|
<div v-if="usersOnline[user.id] && usersOnline[user.id].stream && usersOnline[user.id].stream.audiobook && usersOnline[user.id].stream.audiobook.book">
|
|
|
|
<p class="truncate text-xs">Reading: {{ usersOnline[user.id].stream.audiobook.book.title || '' }}</p>
|
|
|
|
</div>
|
|
|
|
<div v-else-if="user.audiobooks && getLastRead(user.audiobooks)">
|
|
|
|
<p class="truncate text-xs">Last: {{ getLastRead(user.audiobooks) }}</p>
|
|
|
|
</div>
|
2021-10-05 05:11:42 +02:00
|
|
|
</td>
|
2021-11-04 23:35:59 +01:00
|
|
|
<td class="text-xs font-mono hidden sm:table-cell">
|
2021-10-13 03:07:42 +02:00
|
|
|
<ui-tooltip v-if="user.lastSeen" direction="top" :text="$formatDate(user.lastSeen, 'MMMM do, yyyy HH:mm')">
|
|
|
|
{{ $dateDistanceFromNow(user.lastSeen) }}
|
|
|
|
</ui-tooltip>
|
|
|
|
</td>
|
2021-11-04 23:35:59 +01:00
|
|
|
<td class="text-xs font-mono hidden sm:table-cell">
|
2021-10-13 03:07:42 +02:00
|
|
|
<ui-tooltip direction="top" :text="$formatDate(user.createdAt, 'MMMM do, yyyy HH:mm')">
|
|
|
|
{{ $formatDate(user.createdAt, 'MMM d, yyyy') }}
|
|
|
|
</ui-tooltip>
|
2021-10-05 05:11:42 +02:00
|
|
|
</td>
|
2021-10-23 03:08:02 +02:00
|
|
|
<td class="py-0">
|
2021-10-05 05:11:42 +02:00
|
|
|
<div class="w-full flex justify-center">
|
2021-10-23 03:08:02 +02:00
|
|
|
<!-- <span class="material-icons hover:text-gray-400 cursor-pointer text-base pr-2" @click.stop="editUser(user)">edit</span> -->
|
|
|
|
<div class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-opacity-100 cursor-pointer" @click.stop="editUser(user)">
|
|
|
|
<span class="material-icons text-base">edit</span>
|
|
|
|
</div>
|
|
|
|
<div v-show="user.type !== 'root'" class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-error cursor-pointer" @click.stop="deleteUserClick(user)">
|
|
|
|
<span class="material-icons text-base">delete</span>
|
|
|
|
</div>
|
2021-10-05 05:11:42 +02:00
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<modals-account-modal v-model="showAccountModal" :account="selectedAccount" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
users: [],
|
|
|
|
selectedAccount: null,
|
|
|
|
showAccountModal: false,
|
|
|
|
isDeletingUser: false
|
|
|
|
}
|
|
|
|
},
|
2021-10-13 03:07:42 +02:00
|
|
|
computed: {
|
|
|
|
currentUserId() {
|
|
|
|
return this.$store.state.user.user.id
|
|
|
|
},
|
|
|
|
userStream() {
|
|
|
|
return this.$store.state.streamAudiobook
|
|
|
|
},
|
|
|
|
usersOnline() {
|
2021-10-23 03:08:02 +02:00
|
|
|
var usermap = {}
|
|
|
|
this.$store.state.users.users.forEach((u) => (usermap[u.id] = { online: true, stream: u.stream }))
|
2021-10-13 03:07:42 +02:00
|
|
|
return usermap
|
|
|
|
}
|
|
|
|
},
|
2021-10-05 05:11:42 +02:00
|
|
|
methods: {
|
2021-10-13 03:07:42 +02:00
|
|
|
getLastRead(audiobooks) {
|
2022-03-05 17:10:42 +01:00
|
|
|
var abs = Object.values(audiobooks).filter((ab) => {
|
|
|
|
return ab.progress > 0
|
|
|
|
})
|
2021-10-13 03:07:42 +02:00
|
|
|
if (abs.length) {
|
2022-03-05 17:10:42 +01:00
|
|
|
abs = abs.sort((a, b) => b.lastUpdate - a.lastUpdate)
|
2021-10-23 03:08:02 +02:00
|
|
|
// Book object is attached on request
|
|
|
|
if (abs[0].book) return abs[0].book.title
|
|
|
|
return abs[0].audiobookTitle ? abs[0].audiobookTitle : null
|
2021-10-13 03:07:42 +02:00
|
|
|
}
|
|
|
|
return null
|
|
|
|
},
|
2021-10-05 05:11:42 +02:00
|
|
|
deleteUserClick(user) {
|
|
|
|
if (this.isDeletingUser) return
|
|
|
|
if (confirm(`Are you sure you want to permanently delete user "${user.username}"?`)) {
|
|
|
|
this.isDeletingUser = true
|
|
|
|
this.$axios
|
2021-11-22 03:00:40 +01:00
|
|
|
.$delete(`/api/users/${user.id}`)
|
2021-10-05 05:11:42 +02:00
|
|
|
.then((data) => {
|
|
|
|
this.isDeletingUser = false
|
|
|
|
if (data.error) {
|
|
|
|
this.$toast.error(data.error)
|
|
|
|
} else {
|
|
|
|
this.$toast.success('User deleted')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed to delete user', error)
|
|
|
|
this.$toast.error('Failed to delete user')
|
|
|
|
this.isDeletingUser = false
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
clickAddUser() {
|
|
|
|
this.selectedAccount = null
|
|
|
|
this.showAccountModal = true
|
|
|
|
},
|
|
|
|
editUser(user) {
|
|
|
|
this.selectedAccount = user
|
|
|
|
this.showAccountModal = true
|
|
|
|
},
|
|
|
|
loadUsers() {
|
|
|
|
this.$axios
|
|
|
|
.$get('/api/users')
|
|
|
|
.then((users) => {
|
2021-10-23 03:08:02 +02:00
|
|
|
this.users = users.sort((a, b) => {
|
|
|
|
return a.createdAt - b.createdAt
|
|
|
|
})
|
2021-10-05 05:11:42 +02:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed', error)
|
|
|
|
})
|
|
|
|
},
|
|
|
|
addUpdateUser(user) {
|
|
|
|
if (!this.users) return
|
|
|
|
var index = this.users.findIndex((u) => u.id === user.id)
|
|
|
|
if (index >= 0) {
|
|
|
|
this.users.splice(index, 1, user)
|
|
|
|
} else {
|
|
|
|
this.users.push(user)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
userRemoved(user) {
|
|
|
|
this.users = this.users.filter((u) => u.id !== user.id)
|
|
|
|
},
|
|
|
|
init(attempts = 0) {
|
|
|
|
if (!this.$root.socket) {
|
|
|
|
if (attempts > 10) {
|
|
|
|
return console.error('Failed to setup socket listeners')
|
|
|
|
}
|
|
|
|
setTimeout(() => {
|
|
|
|
this.init(++attempts)
|
|
|
|
}, 250)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
this.$root.socket.on('user_added', this.addUpdateUser)
|
|
|
|
this.$root.socket.on('user_updated', this.addUpdateUser)
|
|
|
|
this.$root.socket.on('user_removed', this.userRemoved)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.loadUsers()
|
|
|
|
this.init()
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
if (this.$root.socket) {
|
|
|
|
this.$root.socket.off('user_added', this.newUserAdded)
|
|
|
|
this.$root.socket.off('user_updated', this.userUpdated)
|
|
|
|
this.$root.socket.off('user_removed', this.userRemoved)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-10-09 00:30:20 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
#accounts {
|
|
|
|
table-layout: fixed;
|
|
|
|
border-collapse: collapse;
|
2021-10-23 03:08:02 +02:00
|
|
|
border: 1px solid #474747;
|
2021-10-09 00:30:20 +02:00
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#accounts td,
|
|
|
|
#accounts th {
|
2021-10-23 03:08:02 +02:00
|
|
|
/* border: 1px solid #2e2e2e; */
|
2021-10-09 00:30:20 +02:00
|
|
|
padding: 8px 8px;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
2021-10-23 03:08:02 +02:00
|
|
|
#accounts td.py-0 {
|
|
|
|
padding: 0px 8px;
|
|
|
|
}
|
|
|
|
|
2021-10-09 00:30:20 +02:00
|
|
|
#accounts tr:nth-child(even) {
|
|
|
|
background-color: #3a3a3a;
|
|
|
|
}
|
|
|
|
|
|
|
|
#accounts tr:hover {
|
|
|
|
background-color: #444;
|
|
|
|
}
|
|
|
|
|
|
|
|
#accounts th {
|
|
|
|
font-size: 0.8rem;
|
|
|
|
font-weight: 600;
|
|
|
|
padding-top: 5px;
|
|
|
|
padding-bottom: 5px;
|
|
|
|
background-color: #333;
|
|
|
|
}
|
|
|
|
</style>
|