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         <b-form @submit="onSubmit">
   6             <b-form-group
   7                 id="agreement_name"
   8                 label="Agreement name:"
   9                 label-for="agreement_name"
  10                 label-cols="4"
  11                 label-cols-lg="2"
  12             >
  13                 <b-form-input
  14                     id="agreement_name"
  15                     v-model="agreement.name"
  16                     placeholder="Agreement name"
  17                     required
  18                 ></b-form-input>
  19                 <span class="required">Required</span>
  20             </b-form-group>
  21             <b-form-group
  22                 id="agreement_vendor_id"
  23                 label="Vendor:"
  24                 label-for="agreement_vendor_id"
  25                 label-cols="4"
  26                 label-cols-lg="2"
  27             >
  28                 <b-form-select v-model="agreement.vendor_id">
  29                     <b-form-select-option value=""></b-form-select-option>
  30                     <b-form-select-option
  31                         v-for="vendor in vendors"
  32                         :key="vendor.vendor_id"
  33                         :value="vendor.id"
  34                         :selected="
  35                             vendor.id == agreement.vendor_id ? true : false
  36                         "
  37                         >{{ vendor.name }}</b-form-select-option
  38                     >
  39                 </b-form-select>
  40             </b-form-group>
  41             <b-form-group
  42                 id="agreement_description"
  43                 label="Description"
  44                 label-for="agreement_description"
  45                 label-cols="4"
  46                 label-cols-lg="2"
  47             >
  48                 <b-form-input
  49                     id="agreement_description"
  50                     v-model="agreement.description"
  51                     placeholder="Description"
  52                     required
  53                 ></b-form-input>
  54                 <span class="required">Required</span>
  55             </b-form-group>
  56             <b-form-group
  57                 id="agreement_status"
  58                 label="Status:"
  59                 label-for="agreement_status"
  60                 label-cols="4"
  61                 label-cols-lg="2"
  62             >
  63                 <b-form-select
  64                     id="agreement_status"
  65                     v-model="agreement.status"
  66                     @change="onStatusChange($event)"
  67                     required
  68                 >
  69                     <b-form-select-option value=""></b-form-select-option>
  70                     <b-form-select-option
  71                         v-for="status in av_statuses"
  72                         :key="status.authorised_values"
  73                         :value="status.authorised_value"
  74                         :selected="
  75                             status.authorised_value == agreement.status
  76                                 ? true
  77                                 : false
  78                         "
  79                         >{{ status.lib }}</b-form-select-option
  80                     >
  81                 </b-form-select>
  82                 <span class="required">Required</span>
  83             </b-form-group>
  84             <b-form-group
  85                 id="agreement_closure_reason"
  86                 label="Closure reason:"
  87                 label-for="agreement_closure_reason"
  88                 label-cols="4"
  89                 label-cols-lg="2"
  90             >
  91                 <b-form-select
  92                     id="agreement_closure_reason"
  93                     v-model="agreement.closure_reason"
  94                     :disabled="agreement.status == 'closed' ? true : false"
  95                 >
  96                     <b-form-select-option value=""></b-form-select-option>
  97                     <b-form-select-option
  98                         v-for="r in av_closure_reasons"
  99                         :key="r.authorised_values"
 100                         :value="r.authorised_value"
 101                         :selected="
 102                             r.authorised_value == agreement.closure_reason
 103                                 ? true
 104                                 : false
 105                         "
 106                         >{{ r.lib }}</b-form-select-option
 107                     >
 108                 </b-form-select>
 109             </b-form-group>
 110             <b-form-group
 111                 label="Is perpetual:"
 112                 label-for="agreement_is_perpetual"
 113                 label-cols="4"
 114                 label-cols-lg="2"
 115             >
 116                 <b-form-radio-group
 117                     id="agreement_is_perpetual"
 118                     label="Is perpetual:"
 119                     label-for="agreement_is_perpetual"
 120                     label-cols="4"
 121                     label-cols-lg="2"
 122                     v-model="agreement.is_perpetual"
 123                     :options="is_perpetual_options"
 124                 >
 125                 </b-form-radio-group>
 126             </b-form-group>
 127             <b-form-group
 128                 id="agreement_renewal_priority"
 129                 label="Renewal priority:"
 130                 label-for="agreement_renewal_priority"
 131                 label-cols="4"
 132                 label-cols-lg="2"
 133             >
 134                 <b-form-select v-model="agreement.renewal_priority">
 135                     <b-form-select-option value=""></b-form-select-option>
 136                     <b-form-select-option
 137                         v-for="p in av_renewal_priorities"
 138                         :key="p.authorised_values"
 139                         :value="p.authorised_value"
 140                         :selected="
 141                             p.authorised_value == agreement.renewal_priority
 142                                 ? true
 143                                 : false
 144                         "
 145                         >{{ p.lib }}</b-form-select-option
 146                     >
 147                 </b-form-select>
 148             </b-form-group>
 149             <b-form-group
 150                 id="agreement_license_info"
 151                 label="License info:"
 152                 label-for="agreement_license_info"
 153                 label-cols="4"
 154                 label-cols-lg="2"
 155             >
 156                 <b-form-input
 157                     id="agreement_license_info"
 158                     v-model="agreement.license_info"
 159                     placeholder="License info"
 160                 ></b-form-input>
 161             </b-form-group>
 162
 163             <AgreementPeriods :periods="agreement.periods" />
 164             <AgreementUserRoles
 165                 :user_roles="agreement.user_roles"
 166                 :av_user_roles="av_user_roles"
 167             />
 168
 169             <b-button type="submit" variant="primary">Submit</b-button>
 170             <a href="#" @click="$emit('switch-view', 'list')">Cancel</a>
 171         </b-form>
 172     </div>
 173 </template>
 174
 175 <script>
 176 import AgreementPeriods from './AgreementPeriods.vue'
 177 import AgreementUserRoles from './AgreementUserRoles.vue'
 178
 179 export default {
 180     data() {
 181         return {
 182             is_perpetual_options: [{ text: "Yes", value: true }, { text: "No", value: false }],
 183             agreement: {
 184                 agreement_id: null,
 185                 name: '',
 186                 vendor_id: null,
 187                 description: '',
 188                 status: '',
 189                 closure_reason: '',
 190                 is_perpetual: false,
 191                 renewal_priority: '',
 192                 license_info: '',
 193                 periods: [],
 194                 user_roles: [],
 195             }
 196         }
 197     },
 198     created() {
 199         if (!this.agreement_id) return
 200         const apiUrl = '/api/v1/erm/agreements/' + this.agreement_id
 201
 202         fetch(apiUrl, {
 203             headers: {
 204                 'x-koha-embed': 'periods,user_roles,user_roles.patron'
 205             }
 206         })
 207             .then(res => res.json())
 208             .then(
 209                 (result) => {
 210                     this.agreement = result
 211                 }
 212             )
 213     },
 214     methods: {
 215         onSubmit() {
 216
 217             //let agreement= Object.assign( {} ,this.agreement); // copy
 218             let agreement = JSON.parse(JSON.stringify(this.agreement)) // copy
 219             let apiUrl = '/api/v1/erm/agreements'
 220
 221             const myHeaders = new Headers()
 222             myHeaders.append('Content-Type', 'application/json')
 223
 224             let method = 'POST'
 225             if (agreement.agreement_id) {
 226                 method = 'PUT'
 227                 apiUrl += '/' + agreement.agreement_id
 228             }
 229             delete agreement.agreement_id
 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>