master: change repo

src/components/UserNew.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="user-new 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="newUser.userId" />
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column is-5" 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" />
+            </p>
+            <p class="help is-info">Nom utilisé dans ce compte</p>
+            <p
+              class="help is-info"
+            >{{ $tc('validation.max_char', maxChar(newUser), { max: maxChar(newUser) }) }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column is-2" v-if="!isMainUser">
+      <button class="button is-danger" @click="$emit('remove')">supprimer</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 })
+  public newUser!: IUser
+
+  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
+  }
+
+  @Watch('user.email', { immediate: true })
+  public onEmailChange(email: string) {
+    if (this.newUser) {
+      this.newUser.slugEmail = slug(email || '')
+    }
+  }
+}
+</script>