migration: edit user

This commit is contained in:
Phan An 2022-04-24 00:46:25 +03:00
parent 2485346f3c
commit 43d8e1fad9
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
4 changed files with 23 additions and 23 deletions

View file

@ -1,10 +1,10 @@
import Component from '@/components/user/edit-form.vue'
import Component from '@/components/user/UserEditForm.vue'
import { userStore } from '@/stores'
import factory from '@/__tests__/factory'
import { mock } from '@/__tests__/__helpers__'
import { shallow, mount } from '@/__tests__/adapter'
describe('components/user/edit-form', () => {
describe('components/user/UserEditForm', () => {
afterEach(() => {
jest.resetModules()
jest.clearAllMocks()

View file

@ -40,7 +40,7 @@ declare type ModalName =
const CreateSmartPlaylistForm = defineAsyncComponent(() => import('@/components/playlist/smart-playlist/SmartPlaylistCreateForm.vue'))
const EditSmartPlaylistForm = defineAsyncComponent(() => import('@/components/playlist/smart-playlist/SmartPlaylistEditForm.vue'))
const AddUserForm = defineAsyncComponent(() => import('@/components/user/UserAddForm.vue'))
const EditUserForm = defineAsyncComponent(() => import('@/components/user/edit-form.vue'))
const EditUserForm = defineAsyncComponent(() => import('@/components/user/UserEditForm.vue'))
const EditSongForm = defineAsyncComponent(() => import('@/components/song/SongEditForm.vue'))
const AboutDialog = defineAsyncComponent(() => import('@/components/meta/about-dialog.vue'))

View file

@ -1,7 +1,7 @@
<template>
<div class="edit-user" @keydown.esc="maybeClose">
<SoundBar v-if="loading"/>
<form class="user-edit" @submit.prevent="submit" v-else data-testid="edit-user-form">
<form v-else class="user-edit" data-testid="edit-user-form" @submit.prevent="submit">
<header>
<h1>Edit User</h1>
</header>
@ -9,26 +9,26 @@
<div>
<div class="form-row">
<label>Name</label>
<input title="Name" type="text" name="name" v-model="updateData.name" required v-koel-focus>
<input v-model="updateData.name" v-koel-focus name="name" required title="Name" type="text">
</div>
<div class="form-row">
<label>Email</label>
<input title="Email" type="email" name="email" v-model="updateData.email" required>
<input v-model="updateData.email" name="email" required title="Email" type="email">
</div>
<div class="form-row">
<label>Password</label>
<input
v-model="updateData.password"
autocomplete="new-password"
name="password"
placeholder="Leave blank for no changes"
type="password"
v-model="updateData.password"
autocomplete="new-password"
>
<p class="help">Min. 10 characters. Must be a mix of characters, numbers, and symbols.</p>
<p class="help">Min. 10 characters. Should be a mix of characters, numbers, and symbols.</p>
</div>
<div class="form-row">
<label>
<input type="checkbox" name="is_admin" v-model="updateData.is_admin"> User is an admin
<input v-model="updateData.is_admin" name="is_admin" type="checkbox"> User is an admin
<TooltipIcon title="Admins can perform administrative tasks like managing users and uploading songs."/>
</label>
</div>
@ -43,8 +43,8 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { isEqual } from 'lodash'
import { defineAsyncComponent, reactive, ref, toRefs } from 'vue'
import { alerts, parseValidationError } from '@/utils'
import { UpdateUserData, userStore } from '@/stores'
@ -55,9 +55,15 @@ const TooltipIcon = defineAsyncComponent(() => import('@/components/ui/TooltipIc
const props = defineProps<{ user: User }>()
const { user } = toRefs(props)
const originalData: UpdateUserData = {
name: user.value.name,
email: user.value.email,
is_admin: user.value.is_admin
}
const updateData = reactive<UpdateUserData>(Object.assign({}, originalData))
const loading = ref(false)
const updateData = reactive({} as unknown as UpdateUserData)
const originalData = reactive({} as unknown as UpdateUserData)
const submit = async () => {
loading.value = true
@ -86,16 +92,6 @@ const maybeClose = () => {
alerts.confirm('Discard all changes?', close)
}
onMounted(() => {
Object.assign(updateData, {
name: user.value.name,
email: user.value.email,
is_admin: user.value.is_admin
})
Object.assign(originalData, updateData)
})
</script>
<style lang="scss" scoped>

View file

@ -107,6 +107,10 @@ const destroy = () => {
display: none;
margin-top: .5rem;
> * + * {
margin-left: .25rem;
}
@media (hover: none) {
display: block;
}