Musare/frontend/src/pages/Admin/Users/index.vue

<template>
	<div>
		<page-metadata title="Admin | Users" />
		<div class="container">
			<advanced-table
				:column-default="columnDefault"
				:columns="columns"
				:filters="filters"
				data-action="users.getData"
				name="admin-users"
				max-width="1200"
				:events="events"
			>
				<template #column-options="slotProps">
					<div class="row-options">
						<button
							class="button is-primary icon-with-button material-icons"
							@click="edit(slotProps.item._id)"
							:disabled="slotProps.item.removed"
							content="Edit User"
							v-tippy
						>
							edit
						</button>
						<router-link
							:to="{ path: `/u/${slotProps.item.username}` }"
							target="_blank"
							class="button is-primary icon-with-button material-icons"
							:disabled="slotProps.item.removed"
							content="View Profile"
							v-tippy
						>
							person
						</router-link>
					</div>
				</template>
				<template #column-profilePicture="slotProps">
					<profile-picture
						:avatar="slotProps.item.avatar"
						:name="
							slotProps.item.name
								? slotProps.item.name
								: slotProps.item.username
						"
					/>
				</template>
				<template #column-name="slotProps">
					<span :title="slotProps.item.name">{{
						slotProps.item.name
					}}</span>
				</template>
				<template #column-username="slotProps">
					<span :title="slotProps.item.username">{{
						slotProps.item.username
					}}</span>
				</template>
				<template #column-_id="slotProps">
					<span :title="slotProps.item._id">{{
						slotProps.item._id
					}}</span>
				</template>
				<template #column-githubId="slotProps">
					<span
						v-if="slotProps.item.services.github"
						:title="slotProps.item.services.github.id"
						>{{ slotProps.item.services.github.id }}</span
					>
				</template>
				<template #column-hasPassword="slotProps">
					<span :title="slotProps.item.hasPassword">{{
						slotProps.item.hasPassword
					}}</span>
				</template>
				<template #column-role="slotProps">
					<span :title="slotProps.item.role">{{
						slotProps.item.role
					}}</span>
				</template>
				<template #column-emailAddress="slotProps">
					<span :title="slotProps.item.email.address">{{
						slotProps.item.email.address
					}}</span>
				</template>
				<template #column-emailVerified="slotProps">
					<span :title="slotProps.item.email.verified">{{
						slotProps.item.email.verified
					}}</span>
				</template>
				<template #column-songsRequested="slotProps">
					<span :title="slotProps.item.statistics.songsRequested">{{
						slotProps.item.statistics.songsRequested
					}}</span>
				</template>
			</advanced-table>
		</div>
	</div>
</template>

<script>
import { mapState, mapActions } from "vuex";

import AdvancedTable from "@/components/AdvancedTable.vue";
import ProfilePicture from "@/components/ProfilePicture.vue";

export default {
	components: {
		AdvancedTable,
		ProfilePicture
	},
	data() {
		return {
			columnDefault: {
				sortable: true,
				hidable: true,
				defaultVisibility: "shown",
				draggable: true,
				resizable: true,
				minWidth: 150,
				maxWidth: 600
			},
			columns: [
				{
					name: "options",
					displayName: "Options",
					properties: ["_id", "username"],
					sortable: false,
					hidable: false,
					resizable: false,
					minWidth: 85,
					defaultWidth: 85
				},
				{
					name: "profilePicture",
					displayName: "Image",
					properties: ["avatar", "name", "username"],
					sortable: false,
					resizable: false,
					minWidth: 71,
					defaultWidth: 71
				},
				{
					name: "name",
					displayName: "Display Name",
					properties: ["name"],
					sortProperty: "name"
				},
				{
					name: "username",
					displayName: "Username",
					properties: ["username"],
					sortProperty: "username"
				},
				{
					name: "_id",
					displayName: "User ID",
					properties: ["_id"],
					sortProperty: "_id",
					minWidth: 230,
					defaultWidth: 230
				},
				{
					name: "githubId",
					displayName: "GitHub ID",
					properties: ["services.github.id"],
					sortProperty: "services.github.id",
					minWidth: 115,
					defaultWidth: 115
				},
				{
					name: "hasPassword",
					displayName: "Has Password",
					properties: ["hasPassword"],
					sortProperty: "hasPassword"
				},
				{
					name: "role",
					displayName: "Role",
					properties: ["role"],
					sortProperty: "role",
					minWidth: 90,
					defaultWidth: 90
				},
				{
					name: "emailAddress",
					displayName: "Email Address",
					properties: ["email.address"],
					sortProperty: "email.address",
					defaultVisibility: "hidden"
				},
				{
					name: "emailVerified",
					displayName: "Email Verified",
					properties: ["email.verified"],
					sortProperty: "email.verified",
					defaultVisibility: "hidden",
					minWidth: 140,
					defaultWidth: 140
				},
				{
					name: "songsRequested",
					displayName: "Songs Requested",
					properties: ["statistics.songsRequested"],
					sortProperty: "statistics.songsRequested",
					minWidth: 170,
					defaultWidth: 170
				}
			],
			filters: [
				{
					name: "_id",
					displayName: "User ID",
					property: "_id",
					filterTypes: ["exact"],
					defaultFilterType: "exact"
				},
				{
					name: "name",
					displayName: "Display Name",
					property: "name",
					filterTypes: ["contains", "exact", "regex"],
					defaultFilterType: "contains"
				},
				{
					name: "username",
					displayName: "Username",
					property: "username",
					filterTypes: ["contains", "exact", "regex"],
					defaultFilterType: "contains"
				},
				{
					name: "githubId",
					displayName: "GitHub ID",
					property: "services.github.id",
					filterTypes: ["contains", "exact", "regex"],
					defaultFilterType: "contains"
				},
				{
					name: "hasPassword",
					displayName: "Has Password",
					property: "hasPassword",
					filterTypes: ["boolean"],
					defaultFilterType: "boolean"
				},
				{
					name: "role",
					displayName: "Role",
					property: "role",
					filterTypes: ["exact"],
					defaultFilterType: "exact",
					dropdown: [
						["admin", "Admin"],
						["default", "Default"]
					]
				},
				{
					name: "emailAddress",
					displayName: "Email Address",
					property: "email.address",
					filterTypes: ["contains", "exact", "regex"],
					defaultFilterType: "contains"
				},
				{
					name: "emailVerified",
					displayName: "Email Verified",
					property: "email.verified",
					filterTypes: ["boolean"],
					defaultFilterType: "boolean"
				},
				{
					name: "songsRequested",
					displayName: "Songs Requested",
					property: "statistics.songsRequested",
					filterTypes: [
						"numberLesserEqual",
						"numberLesser",
						"numberGreater",
						"numberGreaterEqual",
						"numberEquals"
					],
					defaultFilterType: "numberLesser"
				}
			],
			events: {
				adminRoom: "users",
				updated: {
					event: "admin.user.updated",
					id: "user._id",
					item: "user"
				},
				removed: {
					event: "user.removed",
					id: "userId"
				}
			}
		};
	},
	computed: {
		...mapState("modalVisibility", {
			modals: state => state.modals
		})
	},
	mounted() {
		if (this.$route.query.userId) this.edit(this.$route.query.userId);
	},
	methods: {
		edit(userId) {
			this.openModal({ modal: "editUser", data: { userId } });
		},
		...mapActions("modalVisibility", ["openModal"])
	}
};
</script>

<style lang="less" scoped>
.profile-picture {
	max-width: 50px !important;
	max-height: 50px !important;
}

:deep(.profile-picture.using-initials span) {
	font-size: 20px; // 2/5th of .profile-picture height/width
}
</style>