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

   1 <template>
   2     <fieldset class="rows" id="resources">
   3         <legend>{{ $__("Packages") }}</legend>
   4         <fieldset
   5             class="rows"
   6             v-for="(resource, counter) in resources"
   7             v-bind:key="counter"
   8         >
   9             <legend>
  10                 {{ $__("Package %s").format(counter + 1) }}
  11                 <a href="#" @click.prevent="deletePackage(counter)"
  12                     ><i class="fa fa-trash"></i>
  13                     {{ $__("Remove from this package") }}</a
  14                 >
  15             </legend>
  16             <ol>
  17                 <li>
  18                     <label
  19                         :for="`resource_package_id_${counter}`"
  20                         class="required"
  21                         >{{ $__("Package") }}:
  22                     </label>
  23                     <!-- Parse to integer, resource.package_id is an integer, but GET /packages return package_id as string -->
  24                     <v-select
  25                         :id="`resource_package_id_${counter}`"
  26                         v-model="resource.package_id"
  27                         label="name"
  28                         :reduce="p => parseInt(p.package_id)"
  29                         :options="packages"
  30                     >
  31                         <template #search="{ attributes, events }">
  32                             <input
  33                                 :required="!resource.package_id"
  34                                 class="vs__search"
  35                                 v-bind="attributes"
  36                                 v-on="events"
  37                             />
  38                         </template>
  39                     </v-select>
  40                     <span class="required">{{ $__("Required") }}</span>
  41                 </li>
  42                 <li>
  43                     <label :for="`resource_vendor_id_${counter}`"
  44                         >{{ $__("Vendor") }}:</label
  45                     >
  46                     <v-select
  47                         :id="`resource_vendor_id_${counter}`"
  48                         v-model="resource.vendor_id"
  49                         label="name"
  50                         :reduce="vendor => vendor.id"
  51                         :options="vendors"
  52                     />
  53                 </li>
  54
  55                 <li>
  56                     <label :for="`started_on_${counter}`"
  57                         >{{ $__("Start date") }}:
  58                     </label>
  59                     <flat-pickr
  60                         :id="`started_on_${counter}`"
  61                         v-model="resource.started_on"
  62                         :config="fp_config"
  63                         :data-date_to="`ended_on_${counter}`"
  64                     />
  65                 </li>
  66                 <li>
  67                     <label :for="`ended_on_${counter}`"
  68                         >{{ $__("End date") }}:</label
  69                     >
  70                     <flat-pickr
  71                         :id="`ended_on_${counter}`"
  72                         v-model="resource.ended_on"
  73                         :config="fp_config"
  74                     />
  75                 </li>
  76                 <li>
  77                     <label :for="`${counter}`">{{ $__("Proxy") }}:</label>
  78                     <input
  79                         :id="`proxy_${counter}`"
  80                         v-model="resource.proxy"
  81                         :placeholder="$__('Proxy')"
  82                     />
  83                 </li>
  84             </ol>
  85         </fieldset>
  86         <a v-if="packages.length" class="btn btn-default" @click="addPackage"
  87             ><font-awesome-icon icon="plus" />
  88             {{ $__("Add to another package") }}</a
  89         >
  90         <span v-else>{{ $__("There are no packages created yet") }}</span>
  91     </fieldset>
  92 </template>
  93
  94 <script>
  95 import { inject } from "vue"
  96 import flatPickr from "vue-flatpickr-component"
  97 import { storeToRefs } from "pinia"
  98 import { APIClient } from "../../fetch/api-client.js"
  99
 100 export default {
 101     setup() {
 102         const vendorStore = inject("vendorStore")
 103         const { vendors } = storeToRefs(vendorStore)
 104         return { vendors }
 105     },
 106     data() {
 107         return {
 108             packages: [],
 109             fp_config: flatpickr_defaults,
 110         }
 111     },
 112     beforeCreate() {
 113         const client = APIClient.erm
 114         client.localPackages.getAll().then(
 115             packages => {
 116                 this.packages = packages
 117                 this.initialized = true
 118             },
 119             error => {}
 120         )
 121     },
 122     methods: {
 123         addPackage() {
 124             this.resources.push({
 125                 package_id: null,
 126                 vendor_id: null,
 127                 started_on: null,
 128                 ended_on: null,
 129                 proxy: "",
 130             })
 131         },
 132         deletePackage(counter) {
 133             this.resources.splice(counter, 1)
 134         },
 135     },
 136     props: {
 137         resources: Array,
 138     },
 139     components: { flatPickr },
 140     name: "EHoldingsLocalTitlesFormAddResources",
 141 }
 142 </script>