admin-users-table.vue 2.21 KB
Newer Older
1
2
<template>
  <main>
3
4
    <h2 class="mb-4 text-2xl">{{ $t('user.table.titre') }}</h2>
    <p class="mb-4">{{ $t('user.table.info') }}</p>
5
    <div class="flex items-center">
6
      <input class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring" :placeholder="$t('user.actions.addContrib')" v-model="currentLoginSearch" list="user-choice">
7
8
9
      <oa-button variant="primary" :label="$t('user.actions.addUser')" @click="addPermission"></oa-button>
    </div>
    <div class="mb-8">
10
      <datalist v-if="autocompleteUsers" class="bg-white" id="user-choice">
11
12
13
        <option v-for="(user, index) in autocompleteUsers" :key="index" @click="selectUser(user)">{{ getDisplayStringAutocomplete(user)}}</option>
      </datalist>
    </div>
14
15
    <table class="w-full bg-white border-t-2">
      <thead class="font-bold">
16
        <tr class="border-b-2">
17
18
19
20
21
          <th class="p-2 text-left">{{ $t('user.table.id') }}</th>
          <th class="p-2 text-left">{{ $t('user.table.nom') }}</th>
          <th class="p-2 text-left">{{ $t('user.table.email') }}</th>
          <th class="p-2 text-left">{{ $t('user.table.actif') }}</th>
          <th class="p-2 text-center">{{ $t('user.table.actions') }}</th>
22
        </tr>
23
24
      </thead>
      <tbody>
25
        <tr v-for="(user, index) in authorizedUsers" :key="index" class="text-left align-top border-b">
26
27
28
29
30
31
32
33
34
35
36
37
          <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>
38
39
40
41
42
          <td class="p-2">
            <button class="flex items-center p-2 text-red-600 transition ml-auto mr-auto hover:bg-red-600 focus:ring hover:text-red-100" @click="deletePermission(user)">
              <icon name="trash"></icon>
            </button>
          </td>
43
        </tr>
44
45
46
47
48
      </tbody>
    </table>
  </main>
</template>

49
<script lang="ts" src="./admin-users-table.component.ts" />