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

   1 <template>
   2     <h2 v-if="agreement.agreement_id">Edit agreement</h2>
   3     <h2 v-else>New agreement</h2>
   4     <div>
   5         <form @submit="onSubmit($event)">
   6             <fieldset class="rows">
   7                 <ol>
   8                     <li>
   9                         <label class="required" for="agreement_name"
  10                             >Agreement name:</label
  11                         >
  12                         <input
  13                             id="agreement_name"
  14                             v-model="agreement.name"
  15                             placeholder="Agreement name"
  16                             required
  17                         />
  18                         <span class="required">Required</span>
  19                     </li>
  20                     <li>
  21                         <label for="agreement_vendor_id">Vendor:</label>
  22                         <select
  23                             id="agreement_vendor_id"
  24                             v-model="agreement.vendor_id"
  25                         >
  26                             <option value=""></option>
  27                             <option
  28                                 v-for="vendor in vendors"
  29                                 :key="vendor.vendor_id"
  30                                 :value="vendor.id"
  31                                 :selected="
  32                                     vendor.id == agreement.vendor_id
  33                                         ? true
  34                                         : false
  35                                 "
  36                             >
  37                                 {{ vendor.name }}
  38                             </option>
  39                         </select>
  40                     </li>
  41                     <li>
  42                         <label for="agreement_description">Description: </label>
  43                         <input
  44                             id="agreement_description"
  45                             v-model="agreement.description"
  46                             placeholder="Description"
  47                             required
  48                         />
  49                         <span class="required">Required</span>
  50                     </li>
  51                     <li>
  52                         <label for="agreement_status">Status: </label>
  53                         <select
  54                             id="agreement_status"
  55                             v-model="agreement.status"
  56                             @change="onStatusChange($event)"
  57                             required
  58                         >
  59                             <option value=""></option>
  60                             <option
  61                                 v-for="status in av_statuses"
  62                                 :key="status.authorised_values"
  63                                 :value="status.authorised_value"
  64                                 :selected="
  65                                     status.authorised_value == agreement.status
  66                                         ? true
  67                                         : false
  68                                 "
  69                             >
  70                                 {{ status.lib }}
  71                             </option>
  72                         </select>
  73                         <span class="required">Required</span>
  74                     </li>
  75                     <li>
  76                         <label for="agreement_closure_reason"
  77                             >Closure reason:</label
  78                         >
  79                         <select
  80                             id="agreement_closure_reason"
  81                             v-model="agreement.closure_reason"
  82                             :disabled="
  83                                 agreement.status == 'closed' ? true : false
  84                             "
  85                         >
  86                             <option value=""></option>
  87                             <option
  88                                 v-for="r in av_closure_reasons"
  89                                 :key="r.authorised_values"
  90                                 :value="r.authorised_value"
  91                                 :selected="
  92                                     r.authorised_value ==
  93                                     agreement.closure_reason
  94                                         ? true
  95                                         : false
  96                                 "
  97                             >
  98                                 {{ r.lib }}
  99                             </option>
 100                         </select>
 101                     </li>
 102                     <li>
 103                         <label for="agreement_is_perpetual" class="radio"
 104                             >Is perpetual:</label
 105                         >
 106                         <label for="agreement_is_perpetual_yes">
 107                             <input
 108                                 type="radio"
 109                                 name="is_perpetual"
 110                                 id="agreement_is_perpetual_yes"
 111                                 :value="true"
 112                                 v-model="agreement.is_perpetual"
 113                             />
 114                             Yes
 115                         </label>
 116                         <label for="agreement_is_perpetual_no">
 117                             <input
 118                                 type="radio"
 119                                 name="is_perpetual"
 120                                 id="agreement_is_perpetual_no"
 121                                 :value="false"
 122                                 v-model="agreement.is_perpetual"
 123                             />
 124                             No
 125                         </label>
 126                     </li>
 127                     <li>
 128                         <label for="agreement_renewal_priority"
 129                             >Renewal priority:</label
 130                         >
 131                         <select v-model="agreement.renewal_priority">
 132                             <option value=""></option>
 133                             <option
 134                                 v-for="p in av_renewal_priorities"
 135                                 :key="p.authorised_values"
 136                                 :value="p.authorised_value"
 137                                 :selected="
 138                                     p.authorised_value ==
 139                                     agreement.renewal_priority
 140                                         ? true
 141                                         : false
 142                                 "
 143                             >
 144                                 {{ p.lib }}
 145                             </option>
 146                         </select>
 147                     </li>
 148                     <li>
 149                         <label for="agreement_license_info"
 150                             >License info:
 151                         </label>
 152                         <input
 153                             id="agreement_license_info"
 154                             v-model="agreement.license_info"
 155                             placeholder="License info"
 156                         />
 157                     </li>
 158
 159                     <AgreementPeriods :periods="agreement.periods" />
 160                     <AgreementUserRoles
 161                         :user_roles="agreement.user_roles"
 162                         :av_user_roles="av_user_roles"
 163                     />
 164                 </ol>
 165             </fieldset>
 166             <fieldset class="action">
 167                 <input type="submit" value="Submit" />
 168                 <a href="#" class="cancel" @click="$emit('switch-view', 'list')">Cancel</a>
 169             </fieldset>
 170         </form>
 171     </div>
 172 </template>
 173
 174 <script>
 175 import AgreementPeriods from './AgreementPeriods.vue'
 176 import AgreementUserRoles from './AgreementUserRoles.vue'
 177
 178 export default {
 179     data() {
 180         return {
 181             agreement: {
 182                 agreement_id: null,
 183                 name: '',
 184                 vendor_id: null,
 185                 description: '',
 186                 status: '',
 187                 closure_reason: '',
 188                 is_perpetual: false,
 189                 renewal_priority: '',
 190                 license_info: '',
 191                 periods: [],
 192                 user_roles: [],
 193             }
 194         }
 195     },
 196     created() {
 197         if (!this.agreement_id) return
 198         const apiUrl = '/api/v1/erm/agreements/' + this.agreement_id
 199
 200         fetch(apiUrl, {
 201             headers: {
 202                 'x-koha-embed': 'periods,user_roles,user_roles.patron'
 203             }
 204         })
 205             .then(res => res.json())
 206             .then(
 207                 (result) => {
 208                     this.agreement = result
 209                 }
 210             )
 211     },
 212     methods: {
 213         onSubmit(e) {
 214             e.preventDefault()
 215
 216             //let agreement= Object.assign( {} ,this.agreement); // copy
 217             let agreement = JSON.parse(JSON.stringify(this.agreement)) // copy
 218             let apiUrl = '/api/v1/erm/agreements'
 219
 220             const myHeaders = new Headers()
 221             myHeaders.append('Content-Type', 'application/json')
 222
 223             let method = 'POST'
 224             if (agreement.agreement_id) {
 225                 method = 'PUT'
 226                 apiUrl += '/' + agreement.agreement_id
 227             }
 228             delete agreement.agreement_id
 229             agreement.is_perpetual = agreement.is_perpetual ? true : false
 230
 231             agreement.periods.forEach(p => {
 232                 p.started_on = $date_to_rfc3339(p.started_on)
 233                 p.ended_on = p.ended_on ? $date_to_rfc3339(p.ended_on) : null
 234                 p.cancellation_deadline = p.cancellation_deadline ? $date_to_rfc3339(p.cancellation_deadline) : null
 235             })
 236
 237             agreement.periods = agreement.periods.map(({ agreement_id, agreement_period_id, ...keepAttrs }) => keepAttrs)
 238
 239             agreement.user_roles = agreement.user_roles.map(({ patron, patron_str, ...keepAttrs }) => keepAttrs)
 240
 241             const options = {
 242                 method: method,
 243                 body: JSON.stringify(agreement),
 244                 myHeaders
 245             }
 246
 247             fetch(apiUrl, options)
 248                 .then(response => {
 249                     if (response.status == 200) {
 250                         this.$emit('agreement-updated')
 251                     } else if (response.status == 201) {
 252                         this.$emit('agreement-created')
 253                     } else {
 254                         this.$emit('set-error', response.message || response.statusText)
 255                     }
 256                 }).catch(
 257                     (error) => {
 258                         this.$emit('set-error', error)
 259                     }
 260                 )
 261         },
 262         onStatusChange(status) {
 263             if (status == 'closed') {
 264                 this.agreement.closure_reason = ''
 265             }
 266         }
 267     },
 268     emits: ['agreement-created', 'agreement-updated', 'set-error', 'switch-view'],
 269     props: {
 270         agreement_id: Number,
 271         vendors: Array,
 272         av_statuses: Array,
 273         av_closure_reasons: Array,
 274         av_renewal_priorities: Array,
 275         av_user_roles: Array,
 276     },
 277     components: {
 278         AgreementPeriods,
 279         AgreementUserRoles
 280     },
 281     name: "AgreementsFormAdd",
 282 }
 283 </script>