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

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