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

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