Ajout d'un composant pour le tableau d'administration des utilisateurs.

src/main/webapp/app/components/table/admin-users-table.component.ts

+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { User } from '@/shared/model/user.model';
+import { Prop } from 'vue-property-decorator';
+
+@Component
+export default class AdminUsersTable extends Vue {
+
+  @Prop()
+  public users: User[] = [];
+
+  public getUserEditLink(userId: String) {
+    return `/admin/user/${userId}/edit`;
+  }
+}

src/main/webapp/app/components/table/admin-users-table.vue

+<template>
+  <main>
+    <h2 class="mb-4 text-2xl">Utilisateurs</h2>
+    <table class="w-full bg-white border-t-2">
+      <thead class="font-bold">
+      <tr class="border-b-2">
+        <th class="p-2 text-left">Id</th>
+        <th class="p-2 text-left">Nom</th>
+        <th class="p-2 text-left">Email</th>
+        <th class="p-2 text-left">Actif</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(user, index) in users" class="text-left align-top border-b">
+        <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.id }}</a></td>
+        <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.firstName }} {{ user.lastName }}</a></td>
+        <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.email }}</a></td>
+        <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.activated }}</a></td>
+      </tr>
+      </tbody>
+    </table>
+  </main>
+</template>
+
+<script lang="ts" src="./admin-users-table.component.ts"/>

src/main/webapp/app/components/table/oa-table.component.ts

-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-@Component
-export default class Table extends Vue {}

src/main/webapp/app/components/table/oa-table.vue

-<template>
-  <!--<div class="mb-8">-->
-  <!--<table class="w-full bg-white border-t-2">-->
-  <!--<thead class="font-bold">-->
-  <!--<tr class="border-b-2">-->
-  <!--<th class="p-2 text-left">Hello</th>-->
-  <!--<th class="p-2 text-left">Texte long</th>-->
-  <!--<th class="p-2 text-left">Texte modifiable</th>-->
-  <!--<th class="p-2 text-right">Valeur num&eacute;rique modifiable</th>-->
-  <!--</tr>-->
-  <!--</thead>-->
-  <!--<tbody>-->
-  <!--<tr class="text-left align-top border-b">-->
-  <!--<th class="p-2">Hello</th>-->
-  <!--<td class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi amet veniam expedita. Recusandae, doloribus sit totam ex perferendis inventore ullam cumque, assumenda, ducimus beatae quae. Unde ab obcaecati illo iusto?</td>-->
-  <!--<td class="p-2 focus:ring" contenteditable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi amet veniam expedita.</td>-->
-  <!--<td class="p-2 font-mono text-right focus:ring" contenteditable="true">1&nbsp;023&nbsp;456,45</td>-->
-  <!--</tr>-->
-  <!--<tr class="text-left align-top border-b">-->
-  <!--<th class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit</th>-->
-  <!--<td class="p-2">Hello</td>-->
-  <!--<td class="p-2 focus:ring" contenteditable="true">Ce texte est modifiable !</td>-->
-  <!--<td class="p-2 font-mono text-right focus:ring" contenteditable="true">1&nbsp;123&nbsp;456</td>-->
-  <!--</tr>-->
-  <!--<tr class="text-left align-top border-b">-->
-  <!--<th class="p-2">Hello</th>-->
-  <!--<td class="p-2">Simple texte</td>-->
-  <!--<td class="p-2 focus:ring" contenteditable="true">Ce texte est modifiable !</td>-->
-  <!--<td class="p-2 font-mono text-right focus:ring" contenteditable="true">3&nbsp;456</td>-->
-  <!--</tr>-->
-  <!--</tbody>-->
-  <!--</table>-->
-  <!--</div>-->
-</template>
-
-<script lang="ts" src="./oa-table.component.ts" />

src/main/webapp/app/views/form/form-settings.component.ts

@@ -6,12 +6,14 @@ import FormService from '@/entities/form/form.service';
 import OaInput from '@/components/forms/input/oa-input.vue';
 import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
 import OaButton from '@/components/button/oa-button.vue';
+import AdminUsersTable from '@/components/table/admin-users-table.vue';
 
 @Component({
   components: {
     OaInput,
     OaTextarea,
-    OaButton
+    OaButton,
+    AdminUsersTable
   }
 })
 export default class FormSettings extends Vue {
@@ -60,10 +62,6 @@ export default class FormSettings extends Vue {
       });
   }
 
-  public getUserEditLink(userId: String) {
-    return `/admin/user/${userId}/edit`;
-  }
-
   setName(name: String) {
     this.form.name = name;
   }

src/main/webapp/app/views/form/form-settings.vue

@@ -9,25 +9,7 @@
                 <oa-textarea id="description" label="Description" :value="form.description" @update="setDescription"></oa-textarea>
                 <oa-button type="submit" variant="primary" label="Enregistrer" ></oa-button>
             </form>
-            <h2 class="mb-4 text-2xl">Utilisateurs</h2>
-            <table class="w-full bg-white border-t-2">
-                <thead class="font-bold">
-                <tr class="border-b-2">
-                    <th class="p-2 text-left">Id</th>
-                    <th class="p-2 text-left">Nom</th>
-                    <th class="p-2 text-left">Email</th>
-                    <th class="p-2 text-left">Actif</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="(user, index) in authorizedUsers" class="text-left align-top border-b">
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.id }}</a></td>
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.firstName }} {{ user.lastName }}</a></td>
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.email }}</a></td>
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.activated }}</a></td>
-                </tr>
-                </tbody>
-            </table>
+          <admin-users-table :users="authorizedUsers"></admin-users-table>
         </section>
     </main>
 </template>

src/main/webapp/app/views/workspace/workspace-settings.component.ts

@@ -6,12 +6,14 @@ import {IWorkspace, Workspace} from '@/shared/model/workspace.model';
 import OaInput from '@/components/forms/input/oa-input.vue';
 import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
 import OaButton from '@/components/button/oa-button.vue';
+import AdminUsersTable from '@/components/table/admin-users-table.vue';
 
 @Component({
   components: {
     OaInput,
     OaTextarea,
-    OaButton
+    OaButton,
+    AdminUsersTable
   }
 })
 export default class WorkspaceSettings extends Vue {
@@ -60,10 +62,6 @@ export default class WorkspaceSettings extends Vue {
       });
   }
 
-  public getUserEditLink(userId: String) {
-    return `/admin/user/${userId}/edit`;
-  }
-
   public setName(name: String) {
     this.workspace.name = name;
   }

src/main/webapp/app/views/workspace/workspace-settings.vue

@@ -8,27 +8,7 @@
                 <oa-textarea id="description" label="Description" :value="workspace.description" @update="setDescription"></oa-textarea>
                 <oa-button type="submit" variant="primary" label="Enregistrer" ></oa-button>
             </form>
-
-            <h2 class="mb-4 text-2xl">Utilisateurs</h2>
-            <table class="w-full bg-white border-t-2">
-                <thead class="font-bold">
-                <tr class="border-b-2">
-                    <th class="p-2 text-left">Id</th>
-                    <th class="p-2 text-left">Nom</th>
-                    <th class="p-2 text-left">Email</th>
-                    <th class="p-2 text-left">Actif</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="(user, index) in authorizedUsers" class="text-left align-top border-b">
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.id }}</a></td>
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.firstName }} {{ user.lastName }}</a></td>
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.email }}</a></td>
-                    <td class="p-2"><a :href="getUserEditLink(user.id)">{{ user.activated }}</a></td>
-                </tr>
-                </tbody>
-            </table>
-
+            <admin-users-table :users="authorizedUsers"></admin-users-table>
         </section>
     </main>
 </template>