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

   1 <template>
   2     <fieldset class="rows" id="eholding_packages">
   3         <legend>{{ $t("Packages") }}</legend>
   4         <fieldset
   5             class="rows"
   6             v-for="(eholding_package, counter) in eholding_packages"
   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
  19                         :for="`eholding_package_id_${counter}`"
  20                         class="required"
  21                         >{{ $t("Package") }}:
  22                     </label>
  23                     <select
  24                         v-model="eholding_package.package_id"
  25                         :id="`eholding_package_id_${counter}`"
  26                         required
  27                     >
  28                         <option value=""></option>
  29                         <option
  30                             v-for="p in packages"
  31                             :key="p.package_id"
  32                             :value="p.package_id"
  33                             :selected="
  34                                 p.package_id == eholding_package.package_id
  35                                     ? true
  36                                     : false
  37                             "
  38                         >
  39                             {{ p.name }}
  40                         </option>
  41                     </select>
  42                     <span class="required">{{ $t("Required") }}</span>
  43                 </li>
  44                 <li>
  45                     <label :for="`started_on_${counter}`"
  46                         >{{ $t("Start date") }}:
  47                     </label>
  48                     <flat-pickr
  49                         :id="`started_on_${counter}`"
  50                         v-model="eholding_package.started_on"
  51                         :config="fp_config"
  52                         :data-date_to="`ended_on_${counter}`"
  53                     />
  54                 </li>
  55                 <li>
  56                     <label :for="`ended_on_${counter}`"
  57                         >{{ $t("End date") }}:</label
  58                     >
  59                     <flat-pickr
  60                         :id="`ended_on_${counter}`"
  61                         v-model="eholding_package.ended_on"
  62                         :config="fp_config"
  63                     />
  64                 </li>
  65                 <li>
  66                     <label :for="`${counter}`">{{ $t("Proxy") }}:</label>
  67                     <input
  68                         :id="`proxy_${counter}`"
  69                         v-model="eholding_package.proxy"
  70                         :placeholder="$t('Proxy')"
  71                     />
  72                 </li>
  73             </ol>
  74         </fieldset>
  75         <a v-if="packages.length" class="btn btn-default" @click="addPackage"
  76             ><font-awesome-icon icon="plus" />
  77             {{ $t("Add to another package") }}</a
  78         >
  79         <span v-else>{{ $t("There are no packages created yet") }}</span>
  80     </fieldset>
  81 </template>
  82
  83 <script>
  84 import flatPickr from 'vue-flatpickr-component'
  85 import { fetchPackages } from "../../fetch"
  86
  87 export default {
  88     data() {
  89         return {
  90             packages: [],
  91             fp_config: flatpickr_defaults,
  92             dates_fixed: 0,
  93         }
  94     },
  95     beforeCreate() {
  96         fetchPackages().then((packages) => this.packages = packages)
  97     },
  98     methods: {
  99         addPackage() {
 100             this.eholding_packages.push({
 101                 package_id: null,
 102                 started_on: null,
 103                 ended_on: null,
 104                 proxy: '',
 105             })
 106         },
 107         deletePackage(counter) {
 108             this.eholding_packages.splice(counter, 1)
 109         },
 110     },
 111     props: {
 112         eholding_packages: Array,
 113     },
 114     components: { flatPickr },
 115     name: 'EHoldingPackages',
 116 }
 117 </script>