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

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