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