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

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