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="#"
  26                         @click="selectUser(counter)"
  27                         class="btn btn-default"
  28                         >{{ $__("Select user") }}</a
  29                     >)
  30                     <span class="required">{{ $__("Required") }}</span>
  31                 </li>
  32                 <li>
  33                     <label :for="`user_role_${counter}`" class="required"
  34                         >{{ $__("Role") }}:</label
  35                     >
  36                     <v-select
  37                         :id="`user_role_${counter}`"
  38                         v-model="user_role.role"
  39                         label="description"
  40                         :reduce="av => av.value"
  41                         :options="av_user_roles"
  42                     >
  43                         <template #search="{ attributes, events }">
  44                             <input
  45                                 :required="!user_role.role"
  46                                 class="vs__search"
  47                                 v-bind="attributes"
  48                                 v-on="events"
  49                             />
  50                         </template>
  51                     </v-select>
  52                     <span class="required">{{ $__("Required") }}</span>
  53                 </li>
  54             </ol>
  55         </fieldset>
  56         <input
  57             type="hidden"
  58             name="selected_patron_id"
  59             id="selected_patron_id"
  60         />
  61         <a class="btn btn-default" @click="addUser"
  62             ><font-awesome-icon icon="plus" /> {{ $__("Add new user") }}</a
  63         >
  64     </fieldset>
  65 </template>
  66
  67 <script>
  68 import { APIClient } from "../../fetch/api-client.js"
  69
  70 export default {
  71     name: "UserRoles",
  72     props: {
  73         user_type: String,
  74         av_user_roles: Array,
  75         user_roles: Array,
  76     },
  77     beforeCreate() {
  78         this.user_roles.forEach(u => {
  79             u.patron_str = $patron_to_html(u.patron)
  80         })
  81     },
  82     methods: {
  83         addUser() {
  84             this.user_roles.push({
  85                 user_id: null,
  86                 role: null,
  87                 patron_str: "",
  88             })
  89         },
  90         deleteUser(counter) {
  91             this.user_roles.splice(counter, 1)
  92         },
  93         selectUser(counter) {
  94             let select_user_window = window.open(
  95                 "/cgi-bin/koha/members/search.pl?columns=cardnumber,name,category,branch,action&selection_type=select&filter=erm_users",
  96                 "PatronPopup",
  97                 "width=740,height=450,location=yes,toolbar=no," +
  98                     "scrollbars=yes,resize=yes"
  99             )
 100             // This is a bit dirty, the "select user" window should be rewritten and be a Vue component
 101             // but that's not for now...
 102             select_user_window.addEventListener(
 103                 "beforeunload",
 104                 this.newUserSelected,
 105                 false
 106             )
 107             select_user_window.counter = counter
 108         },
 109         newUserSelected(e) {
 110             let c = e.currentTarget.counter
 111             let selected_patron_id =
 112                 document.getElementById("selected_patron_id").value
 113             let patron
 114             const client = APIClient.patron
 115             // FIXME We are missing a "loading..."
 116             client.patrons.get(selected_patron_id).then(p => {
 117                 patron = p
 118                 this.user_roles[c].patron = patron
 119                 this.user_roles[c].patron_str = $patron_to_html(patron)
 120                 this.user_roles[c].user_id = patron.patron_id
 121             })
 122         },
 123     },
 124 }
 125 </script>