https://tpi-moritzburg.de/assets/js/watchlist-form-component.js-82f65ba4.js

1'use strict';
2
3const WatchlistFormComponent = Vue.component('watchlist-form', {
4    data: function () {
5        return {
6            items: 1,
7            hasItems: false
8        };
9    },
10    methods: {
11        getButtonLabel: function () {
12            if (this.hasItems) {
13                return this.buttonRemoveLabel;
14            }
15            return this.buttonAddLabel;
16        },
17        updateWishlist: function () {
18            let parameter = {
19                data: this.data,
20                items: this.items
21            };
22            this.$http.post('/catalog-manager/watchlist/update', parameter, {
23                emulateJSON: true,
24            }).then(function (res) {
25                this.hasItems = !!res.body.id;
26                this.items = res.body.units;
27            }.bind(this));
28        },
29        deleteOrAdd: function () {
30            if (this.hasItems) {
31                this.items = 0;
32            }
33            this.updateWishlist();
34        },
35        onChange: function () {
36            //
37        }
38    },
39    mounted: function () {
40        this.items = this.units;
41        this.hasItems = this.added;
42    },
43    props: {
44        data: {
45            type: String,
46            required: true
47        },
48        units: {
49            type: Number,
50            required: false,
51            default: 1
52        },
53        added: {
54            type: Boolean,
55            required: false,
56            default: false
57        },
58        buttonAddLabel: {
59            type: String,
60            required: false,
61            default: '',
62        },
63        buttonRemoveLabel: {
64            type: String,
65            required: false,
66            default: '',
67        },
68        buttonUnitsLabel: {
69            type: String,
70            required: false,
71            default: '',
72        },
73        useUnits: {
74            type: Boolean,
75            required: false,
76            default: true
77        }
78    },
79    template:
80        '<div class="ce_watchlist-form" v-bind:class="{added:hasItems}">' +
81            '<div class="watchlist-form">' +
82                '<div class="watchlist-units" v-if="useUnits">' +
83                    '<input type="number"  v-model="items" min="0">' +
84                    '<button v-if="hasItems" @click="updateWishlist" class="watchlist-update-button"><span v-html="buttonUnitsLabel"></span></button>' +
85                '</div>' +
86                '<button @click="deleteOrAdd" class="watchlist-button" v-bind:class="{\'remove-button\':hasItems, \'add-button\':!hasItems}"><span v-html="getButtonLabel()"></span></button>' +
87            '</div>' +
88        '</div>'
89});