koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue

   1 <template>
   2     <fieldset class="rows" id="user_roles">
   3         <legend>{{ $__("Users") }}</legend>
   4         <fieldset
   5             class="rows"
   6             v-for="(user_role, counter) in user_roles"
   7             v-bind:key="counter"
   8         >
   9             <legend>
  10                 {{ user_type.format(counter + 1) }}
  11                 <a href="#" @click.prevent="deleteUser(counter)"
  12                     ><i class="fa fa-trash"></i>
  13                     {{ $__("Remove this user") }}</a
  14                 >
  15             </legend>
  16             <ol>
  17                 <li>
  18                     <label :for="`user_id_${counter}`" class="required"
  19                         >{{ $__("User") }}:</label
  20                     >
  21                     <span class="user">
  22                         {{ user_role.patron_str }}
  23                     </span>
  24                     (<a
  25                         href="#patron_search_modal"
  26                         @click="selectUser(counter)"
  27                         class="btn btn-default"
  28                         data-toggle="modal"
  29                         ><i class="fa fa-plus"></i> {{ $__("Select user") }}</a
  30                     >)
  31                     <span class="required">{{ $__("Required") }}</span>
  32                 </li>
  33                 <li>
  34                     <label :for="`user_role_${counter}`" class="required"
  35                         >{{ $__("Role") }}:</label
  36                     >
  37                     <v-select
  38                         :id="`user_role_${counter}`"
  39                         v-model="user_role.role"
  40                         label="description"
  41                         :reduce="av => av.value"
  42                         :options="av_user_roles"
  43                     >
  44                         <template #search="{ attributes, events }">
  45                             <input
  46                                 :required="!user_role.role"
  47                                 class="vs__search"
  48                                 v-bind="attributes"
  49                                 v-on="events"
  50                             />
  51                         </template>
  52                     </v-select>
  53                     <span class="required">{{ $__("Required") }}</span>
  54                 </li>
  55             </ol>
  56         </fieldset>
  57         <input
  58             type="hidden"
  59             name="selected_patron_id"
  60             id="selected_patron_id"
  61         />
  62         <a class="btn btn-default" @click="addUser"
  63             ><font-awesome-icon icon="plus" /> {{ $__("Add new user") }}</a
  64         >
  65     </fieldset>
  66 </template>
  67
  68 <script>
  69 import { APIClient } from "../../fetch/api-client.js"
  70
  71 export default {
  72     name: "UserRoles",
  73     props: {
  74         user_type: String,
  75         av_user_roles: Array,
  76         user_roles: Array,
  77     },
  78     beforeCreate() {
  79         this.user_roles.forEach(u => {
  80             u.patron_str = $patron_to_html(u.patron)
  81         })
  82     },
  83     methods: {
  84         addUser() {
  85             this.user_roles.push({
  86                 user_id: null,
  87                 role: null,
  88                 patron_str: "",
  89             })
  90         },
  91         deleteUser(counter) {
  92             this.user_roles.splice(counter, 1)
  93         },
  94         selectUser(counter) {
  95             // This is a bit dirty, the "select user" window should be rewritten and be a Vue component
  96             // but that's not for now...
  97             $(document).on(
  98                 "hidden.bs.modal",
  99                 "#patron_search_modal",
 100                 this.newUserSelected
 101             )
 102             this.selected_user_counter = counter
 103         },
 104         newUserSelected(e) {
 105             let c = this.selected_user_counter
 106             let selected_patron_id =
 107                 document.getElementById("selected_patron_id").value
 108             let patron
 109             const client = APIClient.patron
 110             // FIXME We are missing a "loading..."
 111             client.patrons.get(selected_patron_id).then(p => {
 112                 patron = p
 113                 this.user_roles[c].patron = patron
 114                 this.user_roles[c].patron_str = $patron_to_html(patron)
 115                 this.user_roles[c].user_id = patron.patron_id
 116             })
 117         },
 118     },
 119 }
 120 </script>