Commit a7cdb072 authored by Kevin Robert's avatar Kevin Robert
Browse files

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

parent c987c375
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`;
}
}
<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"/>
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class Table extends 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" />
......@@ -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;
}
......
......@@ -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>
......
......@@ -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;
}
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment