V0.1

k356/items/templates/components/PropertyView/template.html

@@ -0,0 +1,22 @@
+{% load i18n %}
+
+<div>
+    <div class="card mt-4 pt-2 ps-lg-2">
+        <h5 class="card-header">{% trans "Your properties" %}</h5>
+        <div class="card-body">
+
+            <PropertyList
+                :items="properties"
+                :items_headers="properties_headers"
+                :items_relations="{}"
+                :hidden_fields="[]"
+                group_by="type"
+                @deleteItem="deleteItem"
+                @createItem="createItem"
+                @editItem="editItem"
+            ></PropertyList>
+
+        </div>
+    </div>
+
+</div>

k356/items/templates/components/PropertyView/vue.js

@@ -0,0 +1,183 @@
+PropertyView = {
+    template: "#PropertyView",
+    router_path: "/PropertyView",
+    delimiters: ["[[", "]]"],
+    props: [],
+
+    data: function() {
+        return {
+            properties: [],
+            properties_headers: [],
+        }
+    },
+
+    mounted: function() {
+        this.reload()
+    },
+
+    computed: {
+        properties_encrypted_fields: function() {
+            return this.properties_headers.filter(e => e.encrypted).map(e => e.value)
+        },
+
+        properties_relations: function() {
+            return this.properties_headers.filter(e => e.choices != null)
+        },
+    },
+
+    methods: {
+
+        async reload () {
+
+            try {
+                const response = await this.$http.get(Urls["items:property.list"]())
+
+                this.properties_headers = response.data.result.properties_headers
+
+                // Decrypt all item the push
+                response.data.result.properties.forEach(async item => {
+                    const new_item = await this.decryptObject(this.properties_encrypted_fields, item)
+
+                    this.properties.push(new_item)
+                })
+
+            } catch (err) {
+
+                Swal.fire({title: "{{_('Error during loading of properties') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+
+                throw err
+
+            }
+
+        },
+
+        async decryptObject (encrypted_fields, obj) {
+            // Decrypt all fields and return a new object
+
+            var newobj = {}
+            await Promise.all(Object.keys(obj).map(async field => {
+                if (encrypted_fields.includes(field) && obj[field] != null) {
+                    newobj[field] = await this.decrypt(obj[field])
+                } else {
+                    newobj[field] = obj[field]
+                }
+            }))
+
+            return newobj
+
+        },
+
+        async encryptObject (encrypted_fields, obj) {
+            // Encrypt all fields and return a new object
+
+            var newobj = {}
+
+            await Promise.all(Object.keys(obj).map(async field => {
+                if (encrypted_fields.includes(field) && obj[field] != null) {
+                    newobj[field] = await this.encrypt(obj[field])
+                } else {
+                    newobj[field] = obj[field]
+                }
+            }))
+
+            return newobj
+
+        },
+
+        async object_edit(url_edit, url_create, encrypted_fields, method, obj) {
+
+            let url = null
+
+            if (obj.id == undefined || obj.id == null) {
+                url = Urls[url_create]()
+            } else {
+                url = Urls[url_edit](obj.id)
+            }
+
+            try {
+
+                const newobj = await this.encryptObject(encrypted_fields, obj)
+                const response = await this.$http[method](url, newobj)
+
+                if (method != "delete") {
+                    return await this.decryptObject(encrypted_fields, response.data.object)
+                }
+
+            } catch (err) {
+
+                let msg = "{{_('Error during edition') | escapejs}}"
+                if (method == "delete") {
+                    msg = "{{_('Error during deletion') | escapejs}}"
+                }
+
+                Swal.fire({title: msg, icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+
+                throw err
+
+            }
+
+        },
+
+        property_edition (method, item) {
+            return this.object_edit("items:property.edit", "items:property.create", this.properties_encrypted_fields, method, item)
+        },
+
+        async createItem (item) {
+
+            try {
+
+                const new_item = await this.property_edition("post", item)
+                this.properties.push(new_item)
+
+                Swal.fire({title: "{{_('Item successfully created!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+
+            } catch (err) {
+
+            }
+
+        },
+
+        async editItem (index, item) {
+
+            try {
+
+                // Remove the item
+                this.properties.splice(index, 1)
+
+                const new_item = await this.property_edition("post", item)
+
+                // Add the new item
+                this.properties.push(new_item)
+
+                Swal.fire({title: "{{_('Item successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+
+            } catch (err) {
+
+                this.properties.push(item)
+
+            }
+
+        },
+        
+        async deleteItem (index) {
+
+            var item = this.properties[index]
+
+            try {
+
+                // Remove the item
+                this.properties.splice(index, 1)
+                await this.property_edition("delete", item)
+
+                Swal.fire({title: "{{_('Item successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+
+            } catch (err) {
+
+                this.properties.push(item)
+
+            }
+
+        },
+
+    },
+}