✨ User personalize
This commit is contained in:
parent
f0e24f634b
commit
6b32f47758
6
pkg/views/.eslintrc.js
Normal file
6
pkg/views/.eslintrc.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
extends: ["plugin:vue/vue3-recommended"],
|
||||
rules: {
|
||||
"vue/multi-word-component-names": "off",
|
||||
},
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<v-list-item title="Create account" prepend-icon="mdi-account-plus" :to="{ name: 'auth.sign-up' }" />
|
||||
</v-list>
|
||||
<v-list density="compact" v-else>
|
||||
<v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" />
|
||||
<v-list-item title="User Center" prepend-icon="mdi-account-supervisor" exact :to="{ name: 'dashboard' }" />
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
|
|
|
|||
18
pkg/views/src/layouts/user-center.vue
Normal file
18
pkg/views/src/layouts/user-center.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<v-container class="pt-6 px-6">
|
||||
<v-row>
|
||||
<v-col :xs="12" :sm="12" :md="4" :lg="3">
|
||||
<v-card title="Navigation">
|
||||
<v-list density="comfortable">
|
||||
<v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" exact />
|
||||
<v-list-item title="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'personalize' }" />
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col :xs="12" :sm="12" :md="8" :lg="9">
|
||||
<router-view />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { createRouter, createWebHistory } from "vue-router"
|
||||
import { useUserinfo } from "@/stores/userinfo"
|
||||
import MasterLayout from "@/layouts/master.vue"
|
||||
import UserCenterLayout from "@/layouts/user-center.vue"
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -8,7 +9,16 @@ const router = createRouter({
|
|||
{
|
||||
path: "/",
|
||||
component: MasterLayout,
|
||||
children: [{ path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") }],
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
component: UserCenterLayout,
|
||||
children: [
|
||||
{ path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") },
|
||||
{ path: "/me/personalize", name: "personalize", component: () => import("@/views/personalize.vue") },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/auth",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,31 @@
|
|||
<template>
|
||||
<v-container>Hello, world!</v-container>
|
||||
<div>
|
||||
<v-card class="px-1 mb-3">
|
||||
<v-card-text class="flex gap-3.5">
|
||||
<v-avatar
|
||||
color="grey-lighten-2"
|
||||
icon="mdi-account-circle"
|
||||
class="rounded-card"
|
||||
:size="54"
|
||||
:image="'/api/avatar/' + id.userinfo.data.avatar"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="text-2xl">{{ id.userinfo.displayName }}</h1>
|
||||
<p>What can I help you today?</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserinfo } from "@/stores/userinfo"
|
||||
|
||||
const id = useUserinfo()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rounded-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
185
pkg/views/src/views/personalize.vue
Normal file
185
pkg/views/src/views/personalize.vue
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card class="mb-3" title="Information" prepend-icon="mdi-face-man-profile" :loading="loading">
|
||||
<template #text>
|
||||
<v-form class="mt-1" @submit.prevent="submit">
|
||||
<v-row dense>
|
||||
<v-col :xs="12" :md="6">
|
||||
<v-text-field
|
||||
readonly
|
||||
hide-details
|
||||
label="Username"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
v-model="data.name"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :xs="12" :md="6">
|
||||
<v-text-field
|
||||
hide-details
|
||||
label="Nickname"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
v-model="data.nick"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="12">
|
||||
<v-textarea
|
||||
hide-details
|
||||
label="Description"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
v-model="data.description"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :xs="12" :md="6" :lg="4">
|
||||
<v-text-field
|
||||
hide-details
|
||||
label="First Name"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
v-model="data.first_name"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :xs="12" :md="6" :lg="4">
|
||||
<v-text-field
|
||||
hide-details
|
||||
label="Last Name"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
v-model="data.last_name"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :xs="12" :lg="4">
|
||||
<v-text-field
|
||||
hide-details
|
||||
label="Birthday"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
type="datetime-local"
|
||||
v-model="data.birthday"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-btn type="submit" class="mt-2" variant="text" prepend-icon="mdi-content-save" :disabled="loading">
|
||||
Apply Changes
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
</v-card>
|
||||
|
||||
<v-card>
|
||||
<template #text>
|
||||
<div class="flex items-center gap-3">
|
||||
<v-avatar
|
||||
color="grey-lighten-2"
|
||||
icon="mdi-account-circle"
|
||||
class="rounded-card"
|
||||
size="large"
|
||||
:image="'/api/avatar/' + id.userinfo.data.avatar"
|
||||
/>
|
||||
<v-file-input
|
||||
clearable
|
||||
hide-details
|
||||
label="Upload another avatar"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
accept="image/*"
|
||||
prepend-icon=""
|
||||
append-icon="mdi-upload"
|
||||
v-model="avatar"
|
||||
@click:append="applyAvatar"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar v-model="done" :timeout="3000"> Your personal information has been updated. </v-snackbar>
|
||||
|
||||
<!-- @vue-ignore -->
|
||||
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue"
|
||||
import { useUserinfo, getAtk } from "@/stores/userinfo"
|
||||
import { request } from "@/scripts/request"
|
||||
|
||||
const id = useUserinfo()
|
||||
|
||||
const error = ref<string | null>(null)
|
||||
const done = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
const data = ref<any>({})
|
||||
const avatar = ref<any>(null)
|
||||
|
||||
watch(
|
||||
id,
|
||||
(val) => {
|
||||
if (val.isReady) {
|
||||
data.value.name = id.userinfo.data.name
|
||||
data.value.nick = id.userinfo.data.nick
|
||||
data.value.first_name = id.userinfo.data.profile.first_name
|
||||
data.value.last_name = id.userinfo.data.profile.last_name
|
||||
data.value.birthday = id.userinfo.data.profile.birthday
|
||||
|
||||
if (data.value.birthday) data.value.birthday = data.value.birthday.substring(0, 16)
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
)
|
||||
|
||||
async function submit() {
|
||||
const payload = data.value
|
||||
if (payload.birthday) payload.birthday = new Date(payload.birthday).toISOString()
|
||||
|
||||
loading.value = true
|
||||
const res = await request("/api/users/me", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
if (res.status !== 200) {
|
||||
error.value = await res.text()
|
||||
} else {
|
||||
await id.readProfiles()
|
||||
done.value = true
|
||||
error.value = null
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
async function applyAvatar() {
|
||||
if (!avatar.value) return
|
||||
|
||||
if (loading.value) return
|
||||
|
||||
const payload = new FormData()
|
||||
payload.set("avatar", avatar.value[0])
|
||||
|
||||
loading.value = true
|
||||
const res = await request("/api/avatar", {
|
||||
method: "PUT",
|
||||
headers: { Authorization: `Bearer ${getAtk()}` },
|
||||
body: payload,
|
||||
})
|
||||
if (res.status !== 200) {
|
||||
error.value = await res.text()
|
||||
} else {
|
||||
await id.readProfiles()
|
||||
done.value = true
|
||||
error.value = null
|
||||
avatar.value = null
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rounded-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user