koha-dev.rot13.org Git - srvgit/blob - koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsResources.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="`started_on_${counter}`"
  44                         >{{ $t("Start date") }}:
  45                     </label>
  46                     <flat-pickr
  47                         :id="`started_on_${counter}`"
  48                         v-model="resource.started_on"
  49                         :config="fp_config"
  50                         :data-date_to="`ended_on_${counter}`"
  51                     />
  52                 </li>
  53                 <li>
  54                     <label :for="`ended_on_${counter}`"
  55                         >{{ $t("End date") }}:</label
  56                     >
  57                     <flat-pickr
  58                         :id="`ended_on_${counter}`"
  59                         v-model="resource.ended_on"
  60                         :config="fp_config"
  61                     />
  62                 </li>
  63                 <li>
  64                     <label :for="`${counter}`">{{ $t("Proxy") }}:</label>
  65                     <input
  66                         :id="`proxy_${counter}`"
  67                         v-model="resource.proxy"
  68                         :placeholder="$t('Proxy')"
  69                     />
  70                 </li>
  71             </ol>
  72         </fieldset>
  73         <a v-if="packages.length" class="btn btn-default" @click="addPackage"
  74             ><font-awesome-icon icon="plus" />
  75             {{ $t("Add to another package") }}</a
  76         >
  77         <span v-else>{{ $t("There are no packages created yet") }}</span>
  78     </fieldset>
  79 </template>
  80
  81 <script>
  82 import flatPickr from 'vue-flatpickr-component'
  83 import { fetchPackages } from "../../fetch"
  84
  85 export default {
  86     data() {
  87         return {
  88             packages: [],
  89             fp_config: flatpickr_defaults,
  90             dates_fixed: 0,
  91         }
  92     },
  93     beforeCreate() {
  94         fetchPackages().then((packages) => this.packages = packages)
  95         if (!this.dates_fixed) {
  96             this.resources.forEach(r => {
  97                 r.started_on = $date(r.started_on)
  98                 r.ended_on = $date(r.ended_on)
  99             })
 100             this.dates_fixed = 1
 101         }
 102     },
 103     methods: {
 104         addPackage() {
 105             this.resources.push({
 106                 package_id: null,
 107                 started_on: null,
 108                 ended_on: null,
 109                 proxy: '',
 110             })
 111         },
 112         deletePackage(counter) {
 113             this.resources.splice(counter, 1)
 114         },
 115     },
 116     props: {
 117         resources: Array,
 118     },
 119     components: { flatPickr },
 120     name: 'EHoldingsResources',
 121 }
 122 </script>