koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsFormAdd.vue

   1 <template>
   2     <div v-if="!initialized">{{ $__("Loading") }}</div>
   3     <div v-else id="trains_add">
   4         <h2 v-if="train.train_id">
   5             {{ $__("Edit train #%s").format(train.train_id) }}
   6         </h2>
   7         <h2 v-else>{{ $__("New train") }}</h2>
   8         <div>
   9             <form @submit="onSubmit($event)">
  10                 <fieldset class="rows">
  11                     <ol>
  12                         <li>
  13                             <label class="required" for="train_name"
  14                                 >{{ $__("name") }}:</label
  15                             >
  16                             <input
  17                                 id="train_name"
  18                                 v-model="train.name"
  19                                 :placeholder="$__('Name')"
  20                                 required
  21                             />
  22                             <span class="required">{{ $__("Required") }}</span>
  23                         </li>
  24                         <li>
  25                             <label class="required" for="train_description"
  26                                 >{{ $__("Description") }}:
  27                             </label>
  28                             <textarea
  29                                 id="train_description"
  30                                 v-model="train.description"
  31                                 :placeholder="$__('Description')"
  32                                 required
  33                                 rows="10"
  34                                 cols="50"
  35                             />
  36                             <span class="required">{{ $__("Required") }}</span>
  37                         </li>
  38                         <li>
  39                             <label for="not_for_loan_waiting_list_in"
  40                                 >{{
  41                                     $__("Status for item added to this train")
  42                                 }}:</label
  43                             >
  44                             <v-select
  45                                 :disabled="train.train_id ? true : false"
  46                                 id="not_for_loan"
  47                                 v-model="train.not_for_loan"
  48                                 label="description"
  49                                 :reduce="av => av.value"
  50                                 :options="av_notforloan"
  51                             />
  52                         </li>
  53                         <li>
  54                             <label
  55                                 class="required"
  56                                 for="train_default_processing"
  57                                 >{{ $__("Default processing") }}:
  58                             </label>
  59                             <v-select
  60                                 id="train_default_processing"
  61                                 label="name"
  62                                 v-model="train.default_processing_id"
  63                                 :reduce="p => p.processing_id"
  64                                 :options="processings"
  65                                 :required="!train.default_processing_id"
  66                             >
  67                                 <template #search="{ attributes, events }">
  68                                     <input
  69                                         :required="!train.default_processing_id"
  70                                         class="vs__search"
  71                                         v-bind="attributes"
  72                                         v-on="events"
  73                                     />
  74                                 </template>
  75                             </v-select>
  76                         </li>
  77                     </ol>
  78                 </fieldset>
  79                 <fieldset class="action">
  80                     <input type="submit" value="Submit" />
  81                     <router-link
  82                         :to="{ name: 'TrainsList' }"
  83                         role="button"
  84                         class="cancel"
  85                         >{{ $__("Cancel") }}</router-link
  86                     >
  87                 </fieldset>
  88             </form>
  89         </div>
  90     </div>
  91 </template>
  92
  93 <script>
  94 import { inject } from "vue"
  95 import { storeToRefs } from "pinia"
  96 import { APIClient } from "../../fetch/api-client.js"
  97
  98 export default {
  99     setup() {
 100         const AVStore = inject("AVStore")
 101         const { av_notforloan } = storeToRefs(AVStore)
 102
 103         const { setMessage, setWarning } = inject("mainStore")
 104
 105         const PreservationStore = inject("PreservationStore")
 106         const { config } = PreservationStore
 107
 108         return { av_notforloan, setMessage, setWarning, config }
 109     },
 110     data() {
 111         return {
 112             train: {
 113                 train_id: null,
 114                 name: "",
 115                 description: "",
 116                 not_for_loan:
 117                     this.config.settings.not_for_loan_default_train_in,
 118                 default_processing_id: null,
 119                 created_on: null,
 120                 closed_on: null,
 121                 sent_on: null,
 122                 received_on: null,
 123             },
 124             processings: [],
 125             initialized: false,
 126         }
 127     },
 128     beforeRouteEnter(to, from, next) {
 129         next(vm => {
 130             if (to.params.train_id) {
 131                 vm.train = vm.getTrain(to.params.train_id)
 132             } else {
 133                 vm.initialized = true
 134             }
 135         })
 136     },
 137     beforeCreate() {
 138         const client = APIClient.preservation
 139         client.processings.getAll().then(
 140             processings => {
 141                 this.processings = processings
 142             },
 143             error => {}
 144         )
 145     },
 146     methods: {
 147         async getTrain(train_id) {
 148             const client = APIClient.preservation
 149             client.trains.get(train_id).then(train => {
 150                 this.train = train
 151                 this.initialized = true
 152             })
 153         },
 154         checkForm(train) {
 155             let errors = []
 156
 157             errors.forEach(function (e) {
 158                 setWarning(e)
 159             })
 160             return !errors.length
 161         },
 162         onSubmit(e) {
 163             e.preventDefault()
 164
 165             let train = JSON.parse(JSON.stringify(this.train)) // copy
 166             let train_id = train.train_id
 167             if (!this.checkForm(train)) {
 168                 return false
 169             }
 170
 171             delete train.train_id
 172             delete train.default_processing
 173             delete train.items
 174
 175             const client = APIClient.preservation
 176             if (train_id) {
 177                 client.trains.update(train, train_id).then(
 178                     success => {
 179                         this.setMessage(this.$__("Train updated"))
 180                         this.$router.push({ name: "TrainsList" })
 181                     },
 182                     error => {}
 183                 )
 184             } else {
 185                 client.trains.create(train).then(
 186                     success => {
 187                         this.setMessage(this.$__("Train created"))
 188                         this.$router.push({ name: "TrainsList" })
 189                     },
 190                     error => {}
 191                 )
 192             }
 193         },
 194     },
 195     components: {},
 196     name: "TrainsFormAdd",
 197 }
 198 </script>