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                         <textarea
  44                             id="agreement_description"
  45                             v-model="agreement.description"
  46                             placeholder="Description"
  47                             rows="10"
  48                             cols="50"
  49                             required
  50                         />
  51                         <span class="required">Required</span>
  52                     </li>
  53                     <li>
  54                         <label for="agreement_status">Status: </label>
  55                         <select
  56                             id="agreement_status"
  57                             v-model="agreement.status"
  58                             @change="onStatusChange($event)"
  59                             required
  60                         >
  61                             <option value=""></option>
  62                             <option
  63                                 v-for="status in av_agreement_statuses"
  64                                 :key="status.authorised_values"
  65                                 :value="status.authorised_value"
  66                                 :selected="
  67                                     status.authorised_value == agreement.status
  68                                         ? true
  69                                         : false
  70                                 "
  71                             >
  72                                 {{ status.lib }}
  73                             </option>
  74                         </select>
  75                         <span class="required">Required</span>
  76                     </li>
  77                     <li>
  78                         <label for="agreement_closure_reason"
  79                             >Closure reason:</label
  80                         >
  81                         <select
  82                             id="agreement_closure_reason"
  83                             v-model="agreement.closure_reason"
  84                             :disabled="
  85                                 agreement.status == 'closed' ? false : true
  86                             "
  87                         >
  88                             <option value=""></option>
  89                             <option
  90                                 v-for="r in av_agreement_closure_reasons"
  91                                 :key="r.authorised_values"
  92                                 :value="r.authorised_value"
  93                                 :selected="
  94                                     r.authorised_value ==
  95                                     agreement.closure_reason
  96                                         ? true
  97                                         : false
  98                                 "
  99                             >
 100                                 {{ r.lib }}
 101                             </option>
 102                         </select>
 103                     </li>
 104                     <li>
 105                         <label for="agreement_is_perpetual" class="radio"
 106                             >Is perpetual:</label
 107                         >
 108                         <label for="agreement_is_perpetual_yes">
 109                             <input
 110                                 type="radio"
 111                                 name="is_perpetual"
 112                                 id="agreement_is_perpetual_yes"
 113                                 :value="true"
 114                                 v-model="agreement.is_perpetual"
 115                             />
 116                             Yes
 117                         </label>
 118                         <label for="agreement_is_perpetual_no">
 119                             <input
 120                                 type="radio"
 121                                 name="is_perpetual"
 122                                 id="agreement_is_perpetual_no"
 123                                 :value="false"
 124                                 v-model="agreement.is_perpetual"
 125                             />
 126                             No
 127                         </label>
 128                     </li>
 129                     <li>
 130                         <label for="agreement_renewal_priority"
 131                             >Renewal priority:</label
 132                         >
 133                         <select v-model="agreement.renewal_priority">
 134                             <option value=""></option>
 135                             <option
 136                                 v-for="p in av_agreement_renewal_priorities"
 137                                 :key="p.authorised_values"
 138                                 :value="p.authorised_value"
 139                                 :selected="
 140                                     p.authorised_value ==
 141                                     agreement.renewal_priority
 142                                         ? true
 143                                         : false
 144                                 "
 145                             >
 146                                 {{ p.lib }}
 147                             </option>
 148                         </select>
 149                     </li>
 150                     <li>
 151                         <label for="agreement_license_info"
 152                             >License info:
 153                         </label>
 154                         <textarea
 155                             id="agreement_license_info"
 156                             v-model="agreement.license_info"
 157                             placeholder="License info"
 158                         />
 159                     </li>
 160
 161                     <AgreementPeriods :periods="agreement.periods" />
 162                     <AgreementUserRoles
 163                         :user_roles="agreement.user_roles"
 164                         :av_agreement_user_roles="av_agreement_user_roles"
 165                     />
 166                     <AgreementLicenses
 167                         :agreement_licenses="agreement.agreement_licenses"
 168                         :av_agreement_license_statuses="
 169                             av_agreement_license_statuses
 170                         "
 171                         :av_agreement_license_location="
 172                             av_agreement_license_location
 173                         "
 174                     />
 175                 </ol>
 176             </fieldset>
 177             <fieldset class="action">
 178                 <input type="submit" value="Submit" />
 179                 <a
 180                     role="button"
 181                     class="cancel"
 182                     @click="$emit('switch-view', 'list')"
 183                     >Cancel</a
 184                 >
 185             </fieldset>
 186         </form>
 187     </div>
 188 </template>
 189
 190 <script>
 191 import AgreementPeriods from './AgreementPeriods.vue'
 192 import AgreementUserRoles from './AgreementUserRoles.vue'
 193 import AgreementLicenses from './AgreementLicenses.vue'
 194 import { useVendorStore } from "../../stores/vendors"
 195 import { storeToRefs } from "pinia"
 196
 197 export default {
 198     setup() {
 199         const vendorStore = useVendorStore()
 200         const { vendors } = storeToRefs(vendorStore)
 201         return {
 202             vendors,
 203         }
 204     },
 205     data() {
 206         return {
 207             agreement: {
 208                 agreement_id: null,
 209                 name: '',
 210                 vendor_id: null,
 211                 description: '',
 212                 status: '',
 213                 closure_reason: '',
 214                 is_perpetual: false,
 215                 renewal_priority: '',
 216                 license_info: '',
 217                 periods: [],
 218                 user_roles: [],
 219                 agreement_licenses: [],
 220             }
 221         }
 222     },
 223     created() {
 224         if (!this.agreement_id) return
 225         const apiUrl = '/api/v1/erm/agreements/' + this.agreement_id
 226
 227         fetch(apiUrl, {
 228             headers: {
 229                 'x-koha-embed': 'periods,user_roles,user_roles.patron,agreement_licenses,agreement_licenses.license'
 230             }
 231         })
 232             .then(res => res.json())
 233             .then(
 234                 (result) => {
 235                     this.agreement = result
 236                 }
 237             )
 238     },
 239     methods: {
 240         onSubmit(e) {
 241             e.preventDefault()
 242
 243             //let agreement= Object.assign( {} ,this.agreement); // copy
 244             let agreement = JSON.parse(JSON.stringify(this.agreement)) // copy
 245             let apiUrl = '/api/v1/erm/agreements'
 246
 247             let method = 'POST'
 248             if (agreement.agreement_id) {
 249                 method = 'PUT'
 250                 apiUrl += '/' + agreement.agreement_id
 251             }
 252             delete agreement.agreement_id
 253             agreement.is_perpetual = agreement.is_perpetual ? true : false
 254
 255             agreement.periods.forEach(p => {
 256                 p.started_on = $date_to_rfc3339(p.started_on)
 257                 p.ended_on = p.ended_on ? $date_to_rfc3339(p.ended_on) : null
 258                 p.cancellation_deadline = p.cancellation_deadline ? $date_to_rfc3339(p.cancellation_deadline) : null
 259             })
 260
 261             agreement.periods = agreement.periods.map(({ agreement_id, agreement_period_id, ...keepAttrs }) => keepAttrs)
 262
 263             agreement.user_roles = agreement.user_roles.map(({ patron, patron_str, ...keepAttrs }) => keepAttrs)
 264
 265             agreement.agreement_licenses = agreement.agreement_licenses.map(({ license, agreement_id, agreement_license_id, ...keepAttrs }) => keepAttrs)
 266
 267             const options = {
 268                 method: method,
 269                 body: JSON.stringify(agreement),
 270                 headers: {
 271                     'Content-Type': 'application/json;charset=utf-8'
 272                 },
 273             }
 274
 275             fetch(apiUrl, options)
 276                 .then(response => {
 277                     if (response.status == 200) {
 278                         this.$emit('agreement-updated')
 279                     } else if (response.status == 201) {
 280                         this.$emit('agreement-created')
 281                     } else {
 282                         this.$emit('set-error', response.message || response.statusText)
 283                     }
 284                 }).catch(
 285                     (error) => {
 286                         this.$emit('set-error', error)
 287                     }
 288                 )
 289         },
 290         onStatusChange(event) {
 291             if (event.target.value != 'closed') {
 292                 this.agreement.closure_reason = ''
 293             }
 294         }
 295     },
 296     emits: ['agreement-created', 'agreement-updated', 'set-error', 'switch-view'],
 297     props: {
 298         agreement_id: Number,
 299         av_agreement_statuses: Array,
 300         av_agreement_closure_reasons: Array,
 301         av_agreement_renewal_priorities: Array,
 302         av_agreement_user_roles: Array,
 303         av_agreement_license_statuses: Array,
 304         av_agreement_license_location: Array,
 305     },
 306     components: {
 307         AgreementPeriods,
 308         AgreementUserRoles,
 309         AgreementLicenses,
 310     },
 311     name: "AgreementsFormAdd",
 312 }
 313 </script>