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

   1 <template>
   2     <h2 v-if="license.license_id">Edit license</h2>
   3     <h2 v-else>New license</h2>
   4     <div>
   5         <form @submit="onSubmit($event)">
   6             <fieldset class="rows">
   7                 <ol>
   8                     <li>
   9                         <label class="required" for="license_name"
  10                             >License name:</label
  11                         >
  12                         <input
  13                             id="license_name"
  14                             v-model="license.name"
  15                             placeholder="License name"
  16                             required
  17                         />
  18                         <span class="required">Required</span>
  19                     </li>
  20                     <li>
  21                         <label for="license_description">Description: </label>
  22                         <textarea
  23                             id="license_description"
  24                             v-model="license.description"
  25                             placeholder="Description"
  26                             rows="10"
  27                             cols="50"
  28                             required
  29                         />
  30                         <span class="required">Required</span>
  31                     </li>
  32                     <li>
  33                         <label for="license_type">Type: </label>
  34                         <select
  35                             id="license_type"
  36                             v-model="license.type"
  37                             required
  38                         >
  39                             <option value=""></option>
  40                             <option
  41                                 v-for="type in av_license_types"
  42                                 :key="type.authorised_values"
  43                                 :value="type.authorised_value"
  44                                 :selected="
  45                                     type.authorised_value == license.type
  46                                         ? true
  47                                         : false
  48                                 "
  49                             >
  50                                 {{ type.lib }}
  51                             </option>
  52                         </select>
  53                         <span class="required">Required</span>
  54                     </li>
  55                     <li>
  56                         <label for="license_status">Status: </label>
  57                         <select
  58                             id="license_status"
  59                             v-model="license.status"
  60                             required
  61                         >
  62                             <option value=""></option>
  63                             <option
  64                                 v-for="status in av_license_statuses"
  65                                 :key="status.authorised_values"
  66                                 :value="status.authorised_value"
  67                                 :selected="
  68                                     status.authorised_value == license.status
  69                                         ? true
  70                                         : false
  71                                 "
  72                             >
  73                                 {{ status.lib }}
  74                             </option>
  75                         </select>
  76                         <span class="required">Required</span>
  77                     </li>
  78                     <li>
  79                         <label for="started_on">Start date: </label>
  80                         <flat-pickr
  81                             id="started_on"
  82                             v-model="license.started_on"
  83                             :config="fp_config"
  84                             data-date_to="ended_on"
  85                         />
  86                     </li>
  87                     <li>
  88                         <label for="ended_on">End date: </label>
  89                         <flat-pickr
  90                             id="ended_on"
  91                             v-model="license.ended_on"
  92                             :config="fp_config"
  93                         />
  94                     </li>
  95                 </ol>
  96             </fieldset>
  97             <fieldset class="action">
  98                 <input type="submit" value="Submit" />
  99                 <router-link
 100                     to="/cgi-bin/koha/erm/licenses"
 101                     role="button"
 102                     class="cancel"
 103                     >Cancel</router-link
 104                 >
 105             </fieldset>
 106         </form>
 107     </div>
 108 </template>
 109
 110 <script>
 111 import flatPickr from 'vue-flatpickr-component'
 112 import { useAVStore } from "../../stores/authorised_values"
 113 import { useMainStore } from "../../stores/main"
 114 import { fetchLicense } from '../../fetch'
 115 import { storeToRefs } from "pinia"
 116
 117 export default {
 118
 119     setup() {
 120         const AVStore = useAVStore()
 121         const {
 122             av_license_types,
 123             av_license_statuses,
 124         } = storeToRefs(AVStore)
 125
 126         const mainStore = useMainStore()
 127         const { setMessage, setError, resetMessages } = mainStore
 128
 129         return {
 130             av_license_types,
 131             av_license_statuses,
 132             setMessage, setError, resetMessages,
 133         }
 134     },
 135     data() {
 136         return {
 137             fp_config: flatpickr_defaults, dates_fixed: 0,
 138
 139             license: {
 140                 license_id: null,
 141                 name: '',
 142                 description: '',
 143                 type: '',
 144                 status: '',
 145                 started_on: undefined,
 146                 ended_on: undefined,
 147             }
 148         }
 149     },
 150     beforeUpdate() {
 151         if (!this.dates_fixed) {
 152             this.license.started_on = $date(this.license.started_on)
 153             this.license.ended_on = $date(this.license.ended_on)
 154             this.dates_fixed = 1
 155         }
 156     },
 157     beforeRouteEnter(to, from, next) {
 158         if (to.params.license_id) {
 159             next(vm => {
 160                 vm.license = vm.getLicense(to.params.license_id)
 161             })
 162         } else {
 163             next()
 164         }
 165     },
 166     methods: {
 167         async getLicense(license_id) {
 168             const license = await fetchLicense(license_id)
 169             this.license = license
 170         },
 171         onSubmit(e) {
 172             e.preventDefault()
 173
 174             let license = JSON.parse(JSON.stringify(this.license)) // copy
 175             let apiUrl = '/api/v1/erm/licenses'
 176
 177             let method = 'POST'
 178             if (license.license_id) {
 179                 method = 'PUT'
 180                 apiUrl += '/' + license.license_id
 181             }
 182             delete license.license_id
 183
 184             license.started_on = license.started_on ? $date_to_rfc3339(license.started_on) : null
 185             license.ended_on = license.ended_on ? $date_to_rfc3339(license.ended_on) : null
 186
 187             const options = {
 188                 method: method,
 189                 body: JSON.stringify(license),
 190                 headers: {
 191                     'Content-Type': 'application/json;charset=utf-8'
 192                 },
 193             }
 194
 195             fetch(apiUrl, options)
 196                 .then(response => {
 197                     if (response.status == 200) {
 198                         this.$router.push("/cgi-bin/koha/erm/licenses")
 199                         this.setMessage('License updated')
 200                     } else if (response.status == 201) {
 201                         this.$router.push("/cgi-bin/koha/erm/licenses")
 202                         this.setMessage('License created')
 203                     } else {
 204                         this.setError(response.message || response.statusText)
 205                     }
 206                 }, (error) => {
 207                     this.setError(error)
 208                 }).catch(e => { console.log(e) })
 209         },
 210     },
 211     props: {
 212         license_id: Number,
 213     },
 214     components: {
 215         flatPickr
 216     },
 217     name: "LicensesFormAdd",
 218 }
 219 </script>