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                 <router-link
 180                     to="/cgi-bin/koha/erm/agreements"
 181                     role="button"
 182                     class="cancel"
 183                     >Cancel</router-link
 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 { useAVStore } from "../../stores/authorised_values"
 196 import { useMainStore } from "../../stores/main"
 197 import { fetchAgreement } from '../../fetch'
 198 import { storeToRefs } from "pinia"
 199
 200 export default {
 201     setup() {
 202         const vendorStore = useVendorStore()
 203         const { vendors } = storeToRefs(vendorStore)
 204         const AVStore = useAVStore()
 205         const {
 206             av_agreement_statuses,
 207             av_agreement_closure_reasons,
 208             av_agreement_renewal_priorities,
 209             av_agreement_user_roles,
 210             av_agreement_license_statuses,
 211             av_agreement_license_location,
 212         } = storeToRefs(AVStore)
 213
 214         const mainStore = useMainStore()
 215         const { setMessage, setError, resetMessages } = mainStore
 216
 217         return {
 218             vendors,
 219             av_agreement_statuses,
 220             av_agreement_closure_reasons,
 221             av_agreement_renewal_priorities,
 222             av_agreement_user_roles,
 223             av_agreement_license_statuses,
 224             av_agreement_license_location,
 225             setMessage, setError, resetMessages,
 226         }
 227     },
 228     data() {
 229         return {
 230             agreement: {
 231                 agreement_id: null,
 232                 name: '',
 233                 vendor_id: null,
 234                 description: '',
 235                 status: '',
 236                 closure_reason: '',
 237                 is_perpetual: false,
 238                 renewal_priority: '',
 239                 license_info: '',
 240                 periods: [],
 241                 user_roles: [],
 242                 agreement_licenses: [],
 243             }
 244         }
 245     },
 246     beforeRouteEnter(to, from, next) {
 247         if (to.params.agreement_id) {
 248             next(vm => {
 249                 vm.agreement = vm.getAgreement(to.params.agreement_id)
 250             })
 251         } else {
 252             next()
 253         }
 254     },
 255     methods: {
 256         async getAgreement(agreement_id) {
 257             const agreement = await fetchAgreement(agreement_id)
 258             this.agreement = agreement
 259         },
 260         onSubmit(e) {
 261             e.preventDefault()
 262
 263             //let agreement= Object.assign( {} ,this.agreement); // copy
 264             let agreement = JSON.parse(JSON.stringify(this.agreement)) // copy
 265             let apiUrl = '/api/v1/erm/agreements'
 266
 267             let method = 'POST'
 268             if (agreement.agreement_id) {
 269                 method = 'PUT'
 270                 apiUrl += '/' + agreement.agreement_id
 271             }
 272             delete agreement.agreement_id
 273             agreement.is_perpetual = agreement.is_perpetual ? true : false
 274
 275             agreement.periods.forEach(p => {
 276                 p.started_on = $date_to_rfc3339(p.started_on)
 277                 p.ended_on = p.ended_on ? $date_to_rfc3339(p.ended_on) : null
 278                 p.cancellation_deadline = p.cancellation_deadline ? $date_to_rfc3339(p.cancellation_deadline) : null
 279             })
 280
 281             agreement.periods = agreement.periods.map(({ agreement_id, agreement_period_id, ...keepAttrs }) => keepAttrs)
 282
 283             agreement.user_roles = agreement.user_roles.map(({ patron, patron_str, ...keepAttrs }) => keepAttrs)
 284
 285             agreement.agreement_licenses = agreement.agreement_licenses.map(({ license, agreement_id, agreement_license_id, ...keepAttrs }) => keepAttrs)
 286
 287             const options = {
 288                 method: method,
 289                 body: JSON.stringify(agreement),
 290                 headers: {
 291                     'Content-Type': 'application/json;charset=utf-8'
 292                 },
 293             }
 294
 295             fetch(apiUrl, options)
 296                 .then(response => {
 297                     if (response.status == 200) {
 298                         this.$router.push("/cgi-bin/koha/erm/agreements")
 299                         this.setMessage('Agreement updated')
 300                     } else if (response.status == 201) {
 301                         this.$router.push("/cgi-bin/koha/erm/agreements")
 302                         this.setMessage('Agreement created')
 303                     } else {
 304                         this.setError(response.message || response.statusText)
 305                     }
 306                 }).catch(
 307                     (error) => {
 308                         this.setError(error)
 309                     }
 310                 )
 311         },
 312         onStatusChange(event) {
 313             if (event.target.value != 'closed') {
 314                 this.agreement.closure_reason = ''
 315             }
 316         }
 317     },
 318     props: {
 319         agreement_id: Number,
 320     },
 321     components: {
 322         AgreementPeriods,
 323         AgreementUserRoles,
 324         AgreementLicenses,
 325     },
 326     name: "AgreementsFormAdd",
 327 }
 328 </script>