K356/k356/items/templates/components/item_list/vue.js

item_list = {
    template: "#item_list",
    delimiters: ["[[", "]]"],
    props: ["crypto_key", "locked"],

    data: function() {
        return {
            dialog: false,
            dialogDelete: false,
            editedIndex: -1,
            defaultItem: {},
            editedItem: {},
            search: null,
            data: {},
        }
    },

    mounted: function() {

        var self = this;

        this.$http.get(Urls["items:list"]()).then(response => {

            Object.keys(response.data.result).forEach(name => {
                self.$set(self.data, name, response.data.result[name]);
            });

            self.data.items.forEach(item => {
                self.decryptItem(item);
            });

        }).catch(err => {

            Swal.fire({title: "{{_('Error during loading of items.') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});

        });

    },

    computed: {
        formTitle () {
            return this.editedIndex === -1 ? "{{_('New item') | escapejs}}" : "{{_('Edit item') | escapejs}}"
        },
    },

    watch: {
        dialog (val) {
            val || this.close()
        },
        dialogDelete (val) {
            val || this.closeDelete()
        },
    },

    methods: {

        decryptItem (item) {
            this.data.items_encrypted.forEach(field => {
                decryptWithKey(this.crypto_key, item[field]).then(dec => {
                    item[field] = dec;
                })
            });
            return item;
        },

        editItem (item) {
            this.editedIndex = this.data.items.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.dialog = true
        },

        deleteItem (item) {
            this.editedIndex = this.data.items.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.dialogDelete = true
        },

        deleteItemConfirm () {
            var item = this.data.items[this.editedIndex];

            this.item_edition("delete", item).then(response => {
                this.data.items.splice(this.data.items.indexOf(item), 1)
                Swal.fire({title: "{{_('Item successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
            });

            this.closeDelete()
        },

        close () {
            this.dialog = false
            this.$nextTick(() => {
                this.editedItem = Object.assign({}, this.defaultItem)
                this.editedIndex = -1
            })
        },

        closeDelete () {
            this.dialogDelete = false
            this.$nextTick(() => {
                this.editedItem = Object.assign({}, this.defaultItem)
                this.editedIndex = -1
            })
        },

        item_edition (method, item) {
            // Return a Promise
            var self = this;

            return new Promise((resolve) => {

                let url = Urls["items:edit"](item.id)

                if (item.id == undefined || item.id == null) {
                    url = Urls["items:create"]()
                }

                let promises = self.data.items_encrypted.map(field => {
                    // Encrypt all necessary fields
                    if (item[field] == null) {
                        return null;
                    }

                    return new Promise((resolve) => {
                        return encryptWithKey(self.crypto_key, item[field]).then(enc => {
                            resolve({field: field, value: enc});
                        });
                    });

                }).filter(e => e != null);

                Promise.all(promises).then(values => {

                    values.forEach(value => {
                        item[value.field] = value.value;
                    });

                    self.$http[method](url, item).then(response => {

                        resolve(response.data);

                    }).catch(err => {

                        let msg = "{{_('Error during edition of item') | escapejs}}";
                        if (method == "delete") {
                            msg = "{{_('Error during deletion of item') | escapejs}}";
                        }

                        Swal.fire({title: msg, icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});

                    });

                });
            });
        },

        save () {
            if (this.editedIndex > -1) {

                var self = this;

                this.item_edition("post", this.editedItem).then(data => {

                    self.data.items.splice(this.data.items.indexOf(self.editedItem), 1)
                    console.log('pre edit', data.item)
                    new_item = self.decryptItem(data.item);
                    console.log('edited item', new_item);
                    // self.data.items.push(self.decryptItem(data.item));

                    Swal.fire({title: "{{_('Item successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});

                });

            } else {

                var self = this;

                this.item_edition("post", this.editedItem).then(data => {
                    new_item = self.decryptItem(data.item);
                    console.log('new item', new_item);
                    // self.data.items.push(self.decryptItem(data.item));

                    // console.log(data.item);

                    Swal.fire({title: "{{_('Item successfully created!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
                });

            }
            this.close()
        },
    }
}