Add more components + base for history
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
{% load i18n %}
|
||||
|
||||
<div>
|
||||
<template v-if="field_type == 'time'">
|
||||
<v-dialog ref="dialog" v-model="modal" :return-value.sync="item[field.value]" persistent width="290px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="item[field.value]"
|
||||
:label="field.text"
|
||||
:rules="[rules.required]"
|
||||
prepend-icon="mdi-clock-time-four-outline"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-time-picker v-if="modal" v-model="item[field.value]" full-width format="24hr">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text color="primary" @click="modal = false">
|
||||
{% trans "Cancel" %}
|
||||
</v-btn>
|
||||
<v-btn text color="primary" @click="$refs.dialog.save(item[field.value])">
|
||||
{% trans "OK" %}
|
||||
</v-btn>
|
||||
</v-time-picker>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<template v-else-if="field_type == 'date'">
|
||||
<v-dialog ref="dialog" v-model="modal" :return-value.sync="item[field.value]" persistent width="290px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="item[field.value]"
|
||||
:label="field.text"
|
||||
:rules="[rules.required]"
|
||||
prepend-icon="mdi-calendar"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="item[field.value]" scrollable>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text color="primary" @click="modal = false">
|
||||
{% trans "Cancel" %}
|
||||
</v-btn>
|
||||
<v-btn text color="primary" @click="$refs.dialog.save(item[field.value])">
|
||||
{% trans "OK" %}
|
||||
</v-btn>
|
||||
</v-date-picker>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<template v-else-if="field_type == 'date'">
|
||||
TODO both ...
|
||||
</template>
|
||||
|
||||
<template v-else-if="field_type == 'uuid'">
|
||||
<v-text-field ref="test" v-model="item[field.value]" :label="field.text" :rules="[rules.required, rules.uuid]"></v-text-field>
|
||||
</template>
|
||||
|
||||
<template v-else-if="field_type == 'ipv4'">
|
||||
<v-text-field v-model="item[field.value]" :label="field.text" is="v-text-field" :rules="[rules.required, rules.ipv4]"></v-text-field>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<component v-model="item[field.value]" :label="field.text" is="v-text-field" :rules="[rules.required]"></component>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
DynField = {
|
||||
template: "#DynField",
|
||||
router_path: "/",
|
||||
delimiters: ["[[", "]]"],
|
||||
props: {
|
||||
field: {
|
||||
default: null,
|
||||
},
|
||||
item: {
|
||||
default: function() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
test: null,
|
||||
modal: null,
|
||||
rules: {
|
||||
required: value => !!value || "{{_('Required') | escapejs}}",
|
||||
email: value => {
|
||||
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
return pattern.test(value) || "{{_('Invalid E-mail') | escapejs}}"
|
||||
},
|
||||
uuid: value => {
|
||||
const pattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
|
||||
return pattern.test(value) || "{{_('Invalid UUID') | escapejs}}"
|
||||
},
|
||||
ipv4: value => {
|
||||
const pattern = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/
|
||||
return pattern.test(value) || "{{_('Invalid IPv4') | escapejs}}"
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
field_type: function() {
|
||||
if (this.item?.property?.type == undefined) {
|
||||
return "v-textarea"
|
||||
}
|
||||
|
||||
return this.item?.property?.type
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -2,18 +2,40 @@
|
||||
|
||||
<div>
|
||||
<div class="card mt-4 pt-2 ps-lg-2">
|
||||
<h5 class="card-header">{% trans "Properties" %} [[ this.$route.params.id ]]</h5>
|
||||
<h5 class="card-header">{% trans "Item" %} [[ this.$route.params.id ]]</h5>
|
||||
<div class="card-body">
|
||||
<PropertyList
|
||||
:items="properties"
|
||||
:items_headers="properties_headers"
|
||||
:items_relations="{}"
|
||||
:hidden_fields="[]"
|
||||
|
||||
<v-container fluid v-if="object">
|
||||
<template v-for="field in headers">
|
||||
<v-row v-if="field.details">
|
||||
<v-col cols="4">
|
||||
<v-subheader>[[ field.text ]]</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<v-text-field :value="object[field.value]" readonly dense></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4 pt-2 ps-lg-2">
|
||||
<h5 class="card-header">{% trans "Properties" %}</h5>
|
||||
<div class="card-body">
|
||||
<LinkedPropertyList
|
||||
:items="linked_properties"
|
||||
:items_headers="linked_properties_headers"
|
||||
:items_relations="{'property': all_properties}"
|
||||
:hidden_fields="['name', 'description', 'custom_identifier']"
|
||||
:non_editable_fields="['item']"
|
||||
show_item="property"
|
||||
group_by="type"
|
||||
@deleteItem="deleteItem"
|
||||
@createItem="createItem"
|
||||
@editItem="editItem"
|
||||
></PropertyList>
|
||||
@deleteItem="deleteLinkedProperty"
|
||||
@createItem="createLinkedProperty"
|
||||
@editItem="editLinkedProperty"
|
||||
></LinkedPropertyList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,12 +45,12 @@
|
||||
<ItemRelationList
|
||||
:items="children"
|
||||
:items_headers="children_headers"
|
||||
:items_relations="{}"
|
||||
:hidden_fields="['parent__name']"
|
||||
:items_relations="{'parent': [object], 'child': all_items}"
|
||||
group_by="type__name"
|
||||
@deleteItem="deleteItem"
|
||||
@createItem="createItem"
|
||||
@editItem="editItem"
|
||||
@deleteItem="deleteRelation"
|
||||
@createItem="createRelation"
|
||||
@editItem="editRelation"
|
||||
></ItemRelationList>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,13 +60,13 @@
|
||||
<div class="card-body">
|
||||
<ItemRelationList
|
||||
:items="parents"
|
||||
:items_headers="parents_headers"
|
||||
:items_relations="{}"
|
||||
:items_headers="children_headers"
|
||||
:hidden_fields="['child__name']"
|
||||
:items_relations="{'child': [object], 'parent': all_items}"
|
||||
group_by="type__name"
|
||||
@deleteItem="deleteItem"
|
||||
@createItem="createItem"
|
||||
@editItem="editItem"
|
||||
@deleteItem="deleteRelation"
|
||||
@createItem="createRelation"
|
||||
@editItem="editRelation"
|
||||
></ItemRelationList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,95 +3,109 @@ ItemDetail = {
|
||||
router_path: "/ItemDetail/:id",
|
||||
delimiters: ["[[", "]]"],
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
properties: [],
|
||||
linked_properties: [],
|
||||
children: [],
|
||||
parents: [],
|
||||
// TODO: Also remove this tedious things
|
||||
properties_headers: [],
|
||||
linked_properties_headers: [],
|
||||
children_headers: [],
|
||||
parents_headers: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// TODO: Remove this by a generic things at some points, this become tedious and repetitive
|
||||
properties_efields: function() {
|
||||
return this.properties_headers.filter(e => e.encrypted).map(e => e.value)
|
||||
object: function() {
|
||||
return this.$store.state.items.items.find(i => i.id == this.$route.params.id)
|
||||
},
|
||||
|
||||
linked_properties_efields: function() {
|
||||
return this.linked_properties_headers.filter(e => e.encrypted).map(e => e.value)
|
||||
linked_properties: function() {
|
||||
return this.$store.state.linkedProperties.items.filter(lp => lp.item == this.$route.params.id)
|
||||
},
|
||||
|
||||
children_efields: function() {
|
||||
return this.children_headers.filter(e => e.encrypted).map(e => e.value)
|
||||
linked_properties_headers: function() {
|
||||
return this.$store.state.linkedProperties.headers
|
||||
},
|
||||
|
||||
parents_efields: function() {
|
||||
return this.parents_headers.filter(e => e.encrypted).map(e => e.value)
|
||||
properties: function() {
|
||||
return this.$store.state.properties.items.filter(p => this.linked_properties.map(e => e.property).includes(p.id))
|
||||
},
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
properties_headers: function() {
|
||||
return this.$store.state.properties.headers
|
||||
},
|
||||
|
||||
this.reload()
|
||||
children: function() {
|
||||
return this.$store.state.relations.items.filter(p => p.parent == this.$route.params.id)
|
||||
},
|
||||
|
||||
parents: function() {
|
||||
return this.$store.state.relations.items.filter(p => p.child == this.$route.params.id)
|
||||
},
|
||||
|
||||
children_headers: function() {
|
||||
return this.$store.state.relations.headers
|
||||
},
|
||||
|
||||
headers: function() {
|
||||
return this.$store.state.items.headers
|
||||
},
|
||||
|
||||
all_items: function() {
|
||||
return this.$store.state.items.items
|
||||
},
|
||||
|
||||
all_properties: function() {
|
||||
return this.$store.state.properties.items
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async reload () {
|
||||
|
||||
try {
|
||||
|
||||
const response = await this.$http.get(Urls["items:details"](this.$route.params.id))
|
||||
|
||||
this.properties_headers = response.data.properties_headers
|
||||
this.linked_properties_headers = response.data.linked_properties_headers
|
||||
this.children_headers = response.data.children_headers
|
||||
this.parents_headers = response.data.parents_headers
|
||||
|
||||
// TODO: TEDIOUUUUUS
|
||||
response.data.parents.forEach(async e => {
|
||||
this.parents.push(await this.decryptObject(this.parents_efields, e))
|
||||
})
|
||||
|
||||
response.data.children.forEach(async e => {
|
||||
this.children.push(await this.decryptObject(this.children_efields, e))
|
||||
})
|
||||
|
||||
response.data.properties.forEach(async e => {
|
||||
this.properties.push(await this.decryptObject(this.properties_efields, e))
|
||||
})
|
||||
|
||||
response.data.linked_properties.forEach(async e => {
|
||||
this.linked_properties.push(await this.decryptObject(this.linked_properties_efields, e))
|
||||
})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
Swal.fire({title: "{{_('Error during loading of items') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
throw err
|
||||
|
||||
}
|
||||
|
||||
linkedPropertyEdition (method, item) {
|
||||
return this.object_edit("items:linked.property.edit", "items:linked.property.create", 'linkedProperties', method, item)
|
||||
},
|
||||
|
||||
async deleteItem () {
|
||||
|
||||
relationPropertiesEdition (method, item) {
|
||||
return this.object_edit("items:relation.property.edit", "items:relation.property.create", 'relationProperties', method, item)
|
||||
},
|
||||
|
||||
async createItem () {
|
||||
|
||||
relationEdition (method, item) {
|
||||
return this.object_edit("items:relation.edit", "items:relation.create", 'relations', method, item)
|
||||
},
|
||||
|
||||
async editItem() {
|
||||
|
||||
async deleteLinkedProperty (item) {
|
||||
await this.linkedPropertyEdition("delete", item)
|
||||
this.$store.commit("linkedProperties/removeItem", item.id)
|
||||
},
|
||||
|
||||
async createLinkedProperty (item) {
|
||||
item.item = this.$route.params.id
|
||||
const new_item = await this.linkedPropertyEdition("post", item)
|
||||
this.$store.commit("linkedProperties/addItem", new_item)
|
||||
},
|
||||
|
||||
async editLinkedProperty (item) {
|
||||
item.item = this.$route.params.id
|
||||
const new_item = await this.linkedPropertyEdition("post", item)
|
||||
this.$store.commit("linkedProperties/editItem", new_item)
|
||||
},
|
||||
|
||||
async deleteProperty (item) {
|
||||
console.log(item)
|
||||
},
|
||||
|
||||
async createProperty (item) {
|
||||
console.log(item)
|
||||
},
|
||||
|
||||
async editProperty (item) {
|
||||
console.log(item)
|
||||
},
|
||||
|
||||
async deleteRelation (item) {
|
||||
await this.relationEdition("delete", item)
|
||||
this.$store.commit("relations/removeItem", item.id)
|
||||
},
|
||||
|
||||
async createRelation (item) {
|
||||
const new_item = await this.relationEdition("post", item)
|
||||
this.$store.commit("relations/addItem", new_item)
|
||||
},
|
||||
|
||||
async editRelation (item) {
|
||||
const new_item = await this.relationEdition("post", item)
|
||||
this.$store.commit("relations/editItem", new_item)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,55 @@
|
||||
<div>[[ this.$route.params.id ]]</div>
|
||||
{% load i18n %}
|
||||
|
||||
<div>
|
||||
<div class="card mt-4 pt-2 ps-lg-2">
|
||||
<h5 class="card-header">{% trans "Relation" %} [[ this.$route.params.id ]]</h5>
|
||||
<div class="card-body">
|
||||
|
||||
<v-container fluid v-if="object">
|
||||
<template v-for="field in headers">
|
||||
<v-row v-if="field.details">
|
||||
<v-col cols="4">
|
||||
<v-subheader>[[ field.text ]]</v-subheader>
|
||||
</v-col>
|
||||
<template v-if="field.value == 'parent' || field.value == 'child'">
|
||||
<v-col cols="7">
|
||||
<v-text-field :value="object[field.value]" readonly dense></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="1">
|
||||
<v-btn color="primary" dark class="mb-2" @click="showItem(object[field.value])">
|
||||
<v-icon small class="mr-2">mdi-eye</v-icon>
|
||||
{% trans "Link" %}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<v-col cols="8">
|
||||
<v-text-field :value="object[field.value]" readonly dense></v-text-field>
|
||||
</v-col>
|
||||
</template>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4 pt-2 ps-lg-2">
|
||||
<h5 class="card-header">{% trans "Properties" %}</h5>
|
||||
<div class="card-body">
|
||||
<RelationPropertyList
|
||||
:items="relation_properties"
|
||||
:items_headers="relation_properties_headers"
|
||||
:items_relations="{'property': all_properties}"
|
||||
:hidden_fields="['name', 'description', 'custom_identifier', 'relation__name']"
|
||||
:non_editable_fields="['relation']"
|
||||
show_item="property"
|
||||
show_url="PropertyDetail"
|
||||
@deleteItem="deleteRelationProperty"
|
||||
@createItem="createRelationProperty"
|
||||
@editItem="editRelationProperty"
|
||||
></RelationPropertyList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,24 +3,55 @@ ItemRelationDetail = {
|
||||
router_path: "/ItemRelationDetail/:id",
|
||||
delimiters: ["[[", "]]"],
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
data: null
|
||||
computed: {
|
||||
object: function() {
|
||||
return this.$store.state.relations.items.find(i => i.id == this.$route.params.id)
|
||||
},
|
||||
|
||||
headers: function() {
|
||||
return this.$store.state.relations.headers
|
||||
},
|
||||
|
||||
relation_properties: function() {
|
||||
return this.$store.state.relationProperties.items.filter(i => i.relation == this.$route.params.id)
|
||||
},
|
||||
|
||||
relation_properties_headers: function() {
|
||||
return this.$store.state.relationProperties.headers
|
||||
},
|
||||
|
||||
all_properties: function() {
|
||||
return this.$store.state.properties.items
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
|
||||
this.reload()
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async reload () {
|
||||
showItem (id) {
|
||||
this.$router.push({ name: 'ItemDetail', params: { id: id }})
|
||||
},
|
||||
|
||||
const response = await this.$http.get(Urls["items:relation.details"](this.$route.params.id))
|
||||
relationPropertyEdition (method, item) {
|
||||
return this.object_edit("items:relation.property.edit", "items:relation.property.create", 'relationProperties', method, item)
|
||||
},
|
||||
|
||||
async deleteRelationProperty (item) {
|
||||
await this.relationPropertyEdition("delete", item)
|
||||
this.$store.commit("relationProperties/removeItem", item.id)
|
||||
},
|
||||
|
||||
async createRelationProperty (item) {
|
||||
item.relation = this.$route.params.id
|
||||
const new_item = await this.relationPropertyEdition("post", item)
|
||||
this.$store.commit("relationProperties/addItem", new_item)
|
||||
},
|
||||
|
||||
async editRelationProperty (item) {
|
||||
item.relation = this.$route.params.id
|
||||
const new_item = await this.relationPropertyEdition("post", item)
|
||||
this.$store.commit("relationProperties/editItem", new_item)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
:items="items"
|
||||
:items_headers="items_headers"
|
||||
:items_relations="{'type': types}"
|
||||
:hidden_fields="[]"
|
||||
group_by="type__name"
|
||||
@deleteItem="deleteItem"
|
||||
@createItem="createItem"
|
||||
@@ -26,8 +25,6 @@
|
||||
<ItemList
|
||||
:items="types"
|
||||
:items_headers="types_headers"
|
||||
:items_relations="{}"
|
||||
:hidden_fields="[]"
|
||||
group_by="[]"
|
||||
@deleteItem="deleteType"
|
||||
@createItem="createType"
|
||||
|
||||
@@ -4,213 +4,53 @@ ItemView = {
|
||||
delimiters: ["[[", "]]"],
|
||||
props: [],
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
items: [],
|
||||
items_headers: [],
|
||||
types: [],
|
||||
types_headers: [],
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
this.reload()
|
||||
},
|
||||
|
||||
computed: {
|
||||
items_efields: function() {
|
||||
return this.items_headers.filter(e => e.encrypted).map(e => e.value)
|
||||
},
|
||||
|
||||
types_efields: function() {
|
||||
return this.types_headers.filter(e => e.encrypted).map(e => e.value)
|
||||
},
|
||||
...Vuex.mapState({
|
||||
items: state => state.items.items,
|
||||
items_headers: state => state.items.headers,
|
||||
types: state => state.types.items,
|
||||
types_headers: state => state.types.headers,
|
||||
}),
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async reload () {
|
||||
|
||||
try {
|
||||
const response = await this.$http.get(Urls["items:list"]())
|
||||
|
||||
this.items_headers = response.data.result.items_headers
|
||||
this.types_headers = response.data.result.types_headers
|
||||
|
||||
// Decrypt all item the push
|
||||
response.data.result.items.forEach(async item => {
|
||||
const new_item = await this.decryptObject(this.items_efields, item)
|
||||
|
||||
this.items.push(new_item)
|
||||
})
|
||||
|
||||
// Decrypt all type the push
|
||||
response.data.result.types.forEach(async type => {
|
||||
const new_type = await this.decryptObject(this.types_efields, type)
|
||||
|
||||
this.types.push(new_type)
|
||||
})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
Swal.fire({title: "{{_('Error during loading of items') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
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
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
item_edition (method, item) {
|
||||
return this.object_edit("items:edit", "items:create", this.items_efields, method, item)
|
||||
return this.object_edit("items:edit", "items:create", 'items', method, item)
|
||||
},
|
||||
|
||||
type_edition (method, item) {
|
||||
return this.object_edit("items:type.edit", "items:type.create", this.types_efields, method, item)
|
||||
return this.object_edit("items:type.edit", "items:type.create", 'types', method, item)
|
||||
},
|
||||
|
||||
async createItem (item) {
|
||||
|
||||
try {
|
||||
|
||||
const new_item = await this.item_edition("post", item)
|
||||
this.items.push(new_item)
|
||||
|
||||
Swal.fire({title: "{{_('Item successfully created!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
|
||||
const new_item = await this.item_edition("post", item)
|
||||
this.$store.commit("items/addItem", new_item)
|
||||
},
|
||||
|
||||
async editItem (index, item) {
|
||||
|
||||
try {
|
||||
|
||||
// Remove the item
|
||||
this.items.splice(index, 1)
|
||||
|
||||
const new_item = await this.item_edition("post", item)
|
||||
|
||||
// Add the new item
|
||||
this.items.push(new_item)
|
||||
|
||||
Swal.fire({title: "{{_('Item successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
this.items.push(item)
|
||||
|
||||
}
|
||||
|
||||
async editItem (item) {
|
||||
const new_item = await this.item_edition("post", item)
|
||||
this.$store.commit("items/editItem", new_item)
|
||||
},
|
||||
|
||||
async deleteItem (index) {
|
||||
|
||||
var item = this.items[index]
|
||||
|
||||
try {
|
||||
|
||||
// Remove the item
|
||||
this.items.splice(index, 1)
|
||||
await this.item_edition("delete", item)
|
||||
|
||||
Swal.fire({title: "{{_('Item successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
this.items.push(item)
|
||||
|
||||
}
|
||||
|
||||
async deleteItem (item) {
|
||||
await this.item_edition("delete", item)
|
||||
this.$store.commit("items/removeItem", item.id)
|
||||
},
|
||||
|
||||
async createType (type) {
|
||||
|
||||
try {
|
||||
|
||||
const new_type = await this.type_edition("post", type)
|
||||
this.types.push(new_type)
|
||||
|
||||
Swal.fire({title: "{{_('Type successfully created!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
|
||||
const new_type = await this.type_edition("post", type)
|
||||
this.$store.commit("types/addItem", new_type)
|
||||
},
|
||||
|
||||
async editType (index, type) {
|
||||
|
||||
try {
|
||||
|
||||
this.types.splice(index, 1)
|
||||
|
||||
const new_type = await this.type_edition("post", type)
|
||||
|
||||
this.types.push(new_type)
|
||||
|
||||
Swal.fire({title: "{{_('Type successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
this.types.push(type)
|
||||
|
||||
}
|
||||
|
||||
async editType (type) {
|
||||
const new_type = await this.type_edition("post", type)
|
||||
this.$store.commit("types/editItem", new_type)
|
||||
},
|
||||
|
||||
async deleteType (index) {
|
||||
|
||||
var type = this.types[index]
|
||||
|
||||
try {
|
||||
|
||||
// Remove the type
|
||||
this.types.splice(index, 1)
|
||||
|
||||
await this.type_edition("delete", type)
|
||||
|
||||
Swal.fire({title: "{{_('Type successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
this.types.push(type)
|
||||
|
||||
}
|
||||
async deleteType (type) {
|
||||
await this.type_edition("delete", type)
|
||||
this.$store.commit("types/removeItem", type.id)
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{% extends "base_components/glist/template.html" %}
|
||||
@@ -0,0 +1,8 @@
|
||||
{% extends "base_components/glist/vue.js" %}
|
||||
{% load main %}
|
||||
|
||||
{% block component %}
|
||||
{% define 'items' 'items' %}
|
||||
{% define 'show_url' 'PropertyDetail' %}
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
@@ -1 +1,61 @@
|
||||
<div>PropertyDetail</div>
|
||||
{% load i18n %}
|
||||
|
||||
<div>
|
||||
<div class="card mt-4 pt-2 ps-lg-2">
|
||||
<h5 class="card-header">{% trans "Property" %} [[ this.$route.params.id ]]</h5>
|
||||
<div class="card-body">
|
||||
|
||||
<v-container fluid v-if="object">
|
||||
<template v-for="field in headers">
|
||||
<v-row v-if="field.details">
|
||||
<v-col cols="4">
|
||||
<v-subheader>[[ field.text ]]</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<v-text-field :value="object[field.value]" readonly dense></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4 pt-2 ps-lg-2">
|
||||
<h5 class="card-header">{% trans "Item Properties" %}</h5>
|
||||
<div class="card-body">
|
||||
<LinkedPropertyList
|
||||
:items="linked_properties"
|
||||
:items_headers="linked_properties_headers"
|
||||
:items_relations="{'item': all_items, 'property': [object]}"
|
||||
:hidden_fields="['name', 'description', 'custom_identifier']"
|
||||
:non_editable_fields="[]"
|
||||
show_item="item"
|
||||
show_url="ItemDetail"
|
||||
group-by="property__name"
|
||||
@deleteItem="deleteLinkedProperty"
|
||||
@createItem="createLinkedProperty"
|
||||
@editItem="editLinkedProperty"
|
||||
></LinkedPropertyList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4 pt-2 ps-lg-2">
|
||||
<h5 class="card-header">{% trans "Relation Properties" %}</h5>
|
||||
<div class="card-body">
|
||||
<LinkedPropertyList
|
||||
:items="relation_properties"
|
||||
:items_headers="relation_properties_headers"
|
||||
:items_relations="{'item': all_items, 'property': [object]}"
|
||||
:hidden_fields="['name', 'description', 'custom_identifier']"
|
||||
:non_editable_fields="[]"
|
||||
show_item="relation"
|
||||
show_url="ItemRelationDetail"
|
||||
group-by="property__name"
|
||||
@deleteItem="deleteRelationProperty"
|
||||
@createItem="createRelationProperty"
|
||||
@editItem="editRelationProperty"
|
||||
></LinkedPropertyList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,79 @@
|
||||
PropertyDetail = {
|
||||
template: "#PropertyDetail",
|
||||
router_path: "/PropertyDetail/:id",
|
||||
delimiters: ["[[", "]]"],
|
||||
|
||||
computed: {
|
||||
object: function() {
|
||||
return this.$store.state.properties.items.find(i => i.id == this.$route.params.id)
|
||||
},
|
||||
|
||||
headers: function() {
|
||||
return this.$store.state.properties.headers
|
||||
},
|
||||
|
||||
linked_properties: function() {
|
||||
return this.$store.state.linkedProperties.items.filter(i => i.property == this.$route.params.id)
|
||||
},
|
||||
|
||||
linked_properties_headers: function() {
|
||||
return this.$store.state.linkedProperties.headers
|
||||
},
|
||||
|
||||
relation_properties: function() {
|
||||
return this.$store.state.relationProperties.items.filter(i => i.property == this.$route.params.id)
|
||||
},
|
||||
|
||||
relation_properties_headers: function() {
|
||||
return this.$store.state.relationProperties.headers
|
||||
},
|
||||
|
||||
all_items: function() {
|
||||
return this.$store.state.items.items
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkedPropertyEdition (method, item) {
|
||||
return this.object_edit("items:linked.property.edit", "items:linked.property.create", 'linkedProperties', method, item)
|
||||
},
|
||||
|
||||
relationPropertyEdition (method, item) {
|
||||
return this.object_edit("items:relation.property.edit", "items:relation.property.create", 'relationProperties', method, item)
|
||||
},
|
||||
|
||||
async deleteLinkedProperty (item) {
|
||||
await this.linkedPropertyEdition("delete", item)
|
||||
this.$store.commit("linkedProperties/removeItem", item.id)
|
||||
},
|
||||
|
||||
async createLinkedProperty (item) {
|
||||
item.property = this.$route.params.id
|
||||
const new_item = await this.linkedPropertyEdition("post", item)
|
||||
this.$store.commit("linkedProperties/addItem", new_item)
|
||||
},
|
||||
|
||||
async editLinkedProperty (item) {
|
||||
item.property = this.$route.params.id
|
||||
const new_item = await this.linkedPropertyEdition("post", item)
|
||||
this.$store.commit("linkedProperties/editItem", new_item)
|
||||
},
|
||||
|
||||
async deleteRelationProperty (item) {
|
||||
await this.relationPropertyEdition("delete", item)
|
||||
this.$store.commit("relationProperties/removeItem", item.id)
|
||||
},
|
||||
|
||||
async createRelationProperty (item) {
|
||||
item.property = this.$route.params.id
|
||||
const new_item = await this.relationPropertyEdition("post", item)
|
||||
this.$store.commit("relationProperties/addItem", new_item)
|
||||
},
|
||||
|
||||
async editRelationProperty (item) {
|
||||
item.property = this.$route.params.id
|
||||
const new_item = await this.relationPropertyEdition("post", item)
|
||||
this.$store.commit("relationProperties/editItem", new_item)
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
:items="properties"
|
||||
:items_headers="properties_headers"
|
||||
:items_relations="{}"
|
||||
:hidden_fields="[]"
|
||||
group_by="type"
|
||||
@deleteItem="deleteItem"
|
||||
@createItem="createItem"
|
||||
|
||||
@@ -4,21 +4,11 @@ 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)
|
||||
},
|
||||
...Vuex.mapState({
|
||||
properties: state => state.properties.items,
|
||||
properties_headers: state => state.properties.headers,
|
||||
}),
|
||||
|
||||
properties_relations: function() {
|
||||
return this.properties_headers.filter(e => e.choices != null)
|
||||
@@ -27,156 +17,23 @@ PropertyView = {
|
||||
|
||||
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)
|
||||
return this.object_edit("items:property.edit", "items:property.create", "properties", 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) {
|
||||
|
||||
}
|
||||
|
||||
const new_item = await this.property_edition("post", item)
|
||||
this.$store.commit("properties/addItem", new_item)
|
||||
},
|
||||
|
||||
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 editItem (item) {
|
||||
const new_item = await this.property_edition("post", item)
|
||||
this.$store.commit("properties/editItem", new_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)
|
||||
|
||||
}
|
||||
|
||||
async deleteItem (item) {
|
||||
await this.property_edition("delete", item)
|
||||
this.$store.commit("properties/removeItem", item.id)
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{% extends "base_components/glist/template.html" %}
|
||||
@@ -0,0 +1,8 @@
|
||||
{% extends "base_components/glist/vue.js" %}
|
||||
{% load main %}
|
||||
|
||||
{% block component %}
|
||||
{% define 'items' 'items' %}
|
||||
{% define 'show_url' 'ItemDetail' %}
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user