96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
|
<div class="user-new box columns">
|
|
<div class="column is-5" v-if="user">
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label" v-t="'user.pseudo'"></label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control">
|
|
<input :readonly="isMainUser" class="input" type="text" v-model="userId" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6" v-if="newUser">
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label" v-t="'user.alias'"></label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control">
|
|
<input
|
|
required
|
|
class="input"
|
|
type="text"
|
|
maxlength="20"
|
|
v-model="newUser.alias"
|
|
:placeholder="newUser.userId"
|
|
/>
|
|
</p>
|
|
<p class="help is-primary">Nom utilisé sur ce compte</p>
|
|
<p
|
|
class="help is-primary"
|
|
>{{ $tc('validation.max_char', maxChar(newUser), { max: maxChar(newUser) }) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-1" v-if="!isMainUser">
|
|
<button class="button is-danger" @click="$emit('remove')">
|
|
<awe-icon icon="trash" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Model, Vue, Watch } from 'vue-property-decorator'
|
|
import { Getter } from 'vuex-class'
|
|
import IUser from '@/models/IUser'
|
|
import { slug } from '@/utils'
|
|
|
|
@Component
|
|
export default class UserNew extends Vue {
|
|
@Getter
|
|
public user!: IUser | null
|
|
@Model('input', { type: Object, required: true })
|
|
public newUser!: IUser
|
|
private localeUserId = (this.newUser.userId || '').toLowerCase()
|
|
|
|
public maxChar(user: IUser): number {
|
|
return 20 - (user.alias ? user.alias.length : 0)
|
|
}
|
|
|
|
public get isMainUser(): boolean {
|
|
if (!this.newUser) {
|
|
return false
|
|
}
|
|
return !!this.user && this.user.userId === this.newUser.userId
|
|
}
|
|
|
|
public set userId(newUserId: string) {
|
|
this.localeUserId = (newUserId || '').toLowerCase()
|
|
}
|
|
public get userId(): string {
|
|
return this.localeUserId
|
|
}
|
|
|
|
@Watch('localeUserId', { immediate: true })
|
|
public onLocaleUserIdChange(userId: string) {
|
|
if (this.newUser.userId !== userId) {
|
|
this.newUser.userId = userId
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.user-new {
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|