mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-23 16:13:50 +00:00
visgraph: trying to pass value to edit relationship form fields (wip)
This commit is contained in:
@@ -3,35 +3,44 @@
|
||||
<div id="visgraph"></div>
|
||||
|
||||
<teleport to="#visgraph-legend">
|
||||
<div class="list-group mt-4">
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="addRelationshipLink">
|
||||
{{ $t('visgraph.add_link') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
|
||||
<i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
|
||||
<i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="post-menu">
|
||||
<div class="list-group mt-4">
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="newRelationshipLinkButton">
|
||||
{{ $t('visgraph.add_link') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-misc" @click="refreshNetwork">
|
||||
<i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
|
||||
<i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
|
||||
</button>
|
||||
<!--
|
||||
<button
|
||||
type="button" class="list-group-item list-group-item-action btn btn-light" @click="toggleIdPerson">
|
||||
<i class="fa fa-hashtag fa-fw"></i>
|
||||
Voir l'id° des personnes
|
||||
</button>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div v-if="displayHelpMessage" class="alert alert-info mt-3">
|
||||
{{ $t('visgraph.create_link_help') }}
|
||||
</div>
|
||||
<div v-if="displayHelpMessage" class="alert alert-info mt-3">
|
||||
{{ $t('visgraph.create_link_help') }}
|
||||
</div>
|
||||
|
||||
<div class="my-4 post-menu legend">
|
||||
<h3>{{ $t('visgraph.Legend') }}</h3>
|
||||
<div class="list-group">
|
||||
<label class="list-group-item" v-for="layer in legendLayers">
|
||||
<input
|
||||
class="form-check-input me-1"
|
||||
type="checkbox"
|
||||
:value="layer.id"
|
||||
v-model="checkedLayers"
|
||||
@change="toggleLayer"
|
||||
/>
|
||||
{{ layer.label }}
|
||||
</label>
|
||||
<div class="my-4 legend">
|
||||
<h3>{{ $t('visgraph.Legend') }}</h3>
|
||||
<div class="list-group">
|
||||
<label class="list-group-item" v-for="layer in legendLayers">
|
||||
<input
|
||||
class="form-check-input me-1"
|
||||
type="checkbox"
|
||||
:value="layer.id"
|
||||
v-model="checkedLayers"
|
||||
@change="toggleLayer"
|
||||
/>
|
||||
{{ layer.label }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
@@ -51,9 +60,7 @@
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">{{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}</div>
|
||||
<div class="col">
|
||||
<h4>
|
||||
{{ getPerson(modal.data.from).text }}
|
||||
</h4>
|
||||
<h4>{{ getPerson(modal.data.from).text }}</h4>
|
||||
<p class="text-start" v-if="relation && relation.title">
|
||||
<span v-if="reverse">
|
||||
{{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ])}}
|
||||
@@ -64,9 +71,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="col text-end">
|
||||
<h4>
|
||||
{{ getPerson(modal.data.to).text }}
|
||||
</h4>
|
||||
<h4>{{ getPerson(modal.data.to).text }}</h4>
|
||||
<p class="text-end" v-if="relation && relation.title">
|
||||
<span v-if="reverse">
|
||||
{{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}
|
||||
@@ -78,14 +83,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3"><!--
|
||||
:value="relation"
|
||||
-->
|
||||
<VueMultiselect
|
||||
:value="relation"
|
||||
id="relation"
|
||||
label="title"
|
||||
track-by="id"
|
||||
:custom-label="customLabel"
|
||||
:placeholder="$t('Choisissez le lien de parenté')"
|
||||
:placeholder="$t('visgraph.choose_relation')"
|
||||
:close-on-select="true"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
@@ -103,12 +108,18 @@
|
||||
>
|
||||
<label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label>
|
||||
</div>
|
||||
<pre class="debug">
|
||||
modal.data
|
||||
{{ modal.data }}
|
||||
</pre>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<button class="btn" :class="modal.button.class" @click="submitRelationship">
|
||||
{{ $t(modal.button.text)}}</button>
|
||||
{{ $t(modal.button.text)}}
|
||||
</button>
|
||||
<button class="btn btn-delete" v-if="modal.action === 'edit'" @click="dropRelationship"></button>
|
||||
</template>
|
||||
</modal>
|
||||
</teleport>
|
||||
@@ -116,16 +127,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import test from './components/test'
|
||||
import vis from 'vis-network/dist/vis-network'
|
||||
import { mapState, mapGetters } from "vuex"
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal'
|
||||
import VueMultiselect from 'vue-multiselect'
|
||||
import { getRelationsList, postRelationship } from "./api";
|
||||
import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api";
|
||||
import { splitId } from "./vis-network";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
test,
|
||||
Modal,
|
||||
VueMultiselect
|
||||
},
|
||||
@@ -137,6 +150,8 @@ export default {
|
||||
relation: null,
|
||||
reverse: false,
|
||||
displayHelpMessage: false,
|
||||
listenPersonFlag: 'normal',
|
||||
newEdgeData: {},
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-md",
|
||||
@@ -153,7 +168,7 @@ export default {
|
||||
computed: {
|
||||
...mapGetters(['nodes', 'edges',
|
||||
// not used
|
||||
'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getWithFoldedPersons',
|
||||
'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getPersonsGroup',
|
||||
]),
|
||||
...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
|
||||
// not used
|
||||
@@ -197,6 +212,11 @@ export default {
|
||||
return this.checkedLayers
|
||||
},
|
||||
|
||||
toggleIdPerson() {
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
relation: {
|
||||
get() {
|
||||
return this.relation
|
||||
@@ -211,12 +231,12 @@ export default {
|
||||
get() {
|
||||
return this.reverse
|
||||
},
|
||||
set(value) {
|
||||
//console.log('setter reverse', value) // <=== InternalError: too much recursion
|
||||
this.reverse = value
|
||||
set(newValue) {
|
||||
//console.log('setter reverse', newValue) // <=== InternalError: too much recursion
|
||||
this.reverse = newValue
|
||||
}
|
||||
},
|
||||
|
||||
*/
|
||||
|
||||
},
|
||||
mounted() {
|
||||
@@ -244,9 +264,15 @@ export default {
|
||||
case 'person':
|
||||
let person = this.nodes.filter(n => n.id === node)[0]
|
||||
console.log('@@@@@@ event on selected Node', person.id)
|
||||
if (person.folded === true) {
|
||||
this.$store.commit('unfoldPerson', person)
|
||||
this.forceUpdateComponent()
|
||||
if (this.listenPersonFlag === 'normal') {
|
||||
if (person.folded === true) {
|
||||
console.log(' @@> expand mode event')
|
||||
this.$store.commit('unfoldPerson', person)
|
||||
this.forceUpdateComponent()
|
||||
}
|
||||
} else {
|
||||
console.log(' @@> create link mode event')
|
||||
this.listenStepsToAddRelationship(person)
|
||||
}
|
||||
break
|
||||
|
||||
@@ -269,25 +295,58 @@ export default {
|
||||
}
|
||||
})
|
||||
window.network.on('selectEdge', (data) => {
|
||||
if (data.nodes.length !== 0 && data.edges.length !== 1) {
|
||||
return false
|
||||
if (data.nodes.length !== 0 || data.edges.length !== 1) {
|
||||
return false //we don't want to trigger nodeEdge or multiselect !
|
||||
}
|
||||
let linkType = splitId(data.edges[0], 'link') //<------ Uncaught TypeError: id is undefined
|
||||
let link = data.edges[0]
|
||||
let linkType = splitId(link, 'link')
|
||||
console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
|
||||
|
||||
if (linkType.startsWith('relationship')) {
|
||||
console.log('@@@@@ event on selected Edge', data)
|
||||
console.log('linkType relationship')
|
||||
this.editRelationshipModal(data) //<------ you are here, and data is wrong !
|
||||
|
||||
let relationships = this.edges.filter(l => l.id === link)
|
||||
if (relationships.length > 1) {
|
||||
throw 'error: only one link is allowed between two person!'
|
||||
}
|
||||
|
||||
let relationship = relationships[0]
|
||||
console.log(relationship)
|
||||
|
||||
this.editRelationshipModal({
|
||||
from: relationship.from,
|
||||
to: relationship.to,
|
||||
id: relationship.id,
|
||||
relation: relationship.relation,
|
||||
reverse: relationship.reverse
|
||||
})
|
||||
}
|
||||
/* Disabled
|
||||
/* Disabled
|
||||
if (linkType.startsWith('household')) {
|
||||
console.log('linkType household')
|
||||
} else
|
||||
if (linkType.startsWith('accompanying_period')) {
|
||||
console.log('linkType accompanying_period')
|
||||
} else
|
||||
*/
|
||||
*/
|
||||
})
|
||||
},
|
||||
listenStepsToAddRelationship(person) {
|
||||
console.log(' @@> listenStep', this.listenPersonFlag)
|
||||
if (this.listenPersonFlag === 'step2') {
|
||||
console.log(' @@> person 2', person)
|
||||
this.newEdgeData.to = person.id
|
||||
this.addRelationshipModal(this.newEdgeData)
|
||||
this.displayHelpMessage = false
|
||||
this.listenPersonFlag = 'normal'
|
||||
this.newEdgeData = {}
|
||||
}
|
||||
if (this.listenPersonFlag === 'step1') {
|
||||
console.log(' @@> person 1', person)
|
||||
this.newEdgeData.from = person.id
|
||||
this.listenPersonFlag = 'step2'
|
||||
}
|
||||
},
|
||||
forceUpdateComponent() {
|
||||
//console.log('!! forceUpdateComponent !!')
|
||||
this.$forceUpdate()
|
||||
@@ -297,7 +356,7 @@ export default {
|
||||
/// Control Layers
|
||||
toggleLayer(value) {
|
||||
let id = value.target.value
|
||||
console.log('@@@@@ toggle Layer', id)
|
||||
console.log('@@@@@@ toggle Layer', id)
|
||||
this.forceUpdateComponent()
|
||||
if (this.checkedLayers.includes(id)) {
|
||||
this.removeLayer(id)
|
||||
@@ -328,13 +387,16 @@ export default {
|
||||
},
|
||||
editRelationshipModal(edgeData) {
|
||||
this.modal.data = edgeData
|
||||
console.log('==- editRelationshipModal', edgeData)
|
||||
this.relation = this.modal.data.relation
|
||||
this.reverse = this.modal.data.reverse
|
||||
console.log('==- editRelationshipModal', this.modal.data, this.relation, this.reverse)
|
||||
this.modal.action = 'edit'
|
||||
this.modal.title = 'visgraph.edit_relationship_link'
|
||||
this.modal.button.class = 'btn-edit'
|
||||
this.modal.button.text = 'action.edit'
|
||||
this.modal.showModal = true
|
||||
},
|
||||
/*
|
||||
deleteRelationshipModal(edgeData) {
|
||||
this.modal.data = edgeData
|
||||
console.log('==- deleteRelationshipModal', edgeData)
|
||||
@@ -344,6 +406,7 @@ export default {
|
||||
this.modal.button.text = 'action.delete'
|
||||
this.modal.showModal = true
|
||||
},
|
||||
*/
|
||||
|
||||
resetForm() {
|
||||
console.log('==- reset Form')
|
||||
@@ -370,19 +433,16 @@ export default {
|
||||
return person[0]
|
||||
},
|
||||
|
||||
|
||||
addRelationshipLink() {
|
||||
newRelationshipLinkButton() {
|
||||
this.displayHelpMessage = true
|
||||
let edgeData = { from: "person_1617", to: "person_1614" }
|
||||
let callback = (d) => {
|
||||
console.log('d', d)
|
||||
}
|
||||
//open
|
||||
window.network.addEdgeMode()
|
||||
window.network.addEdge
|
||||
|
||||
//close
|
||||
window.network.disableEditMode()
|
||||
this.listenPersonFlag = 'step1'
|
||||
console.log(' @@> switch listener to create link mode:', this.listenPersonFlag)
|
||||
},
|
||||
dropRelationship() {
|
||||
console.log('delete')
|
||||
deleteRelationship(relationship) /// param ?
|
||||
this.modal.showModal = false
|
||||
this.resetForm()
|
||||
},
|
||||
submitRelationship() {
|
||||
console.log('submitRelationship with action', this.modal.action)
|
||||
@@ -402,26 +462,18 @@ export default {
|
||||
.catch()
|
||||
|
||||
case 'edit':
|
||||
/// TODO
|
||||
// récupérer la relationship,
|
||||
// la modifier,
|
||||
// patcher en reconstruisant le body,
|
||||
// récupérer la réponse,
|
||||
// mettre le link (edge) à jour
|
||||
return patchRelationship(relationship)
|
||||
.then(response => new Promise(resolve => {
|
||||
console.log('patch response', response)
|
||||
this.$store.dispatch('updateLinkFromRelationship', response)
|
||||
.then(relationship => new Promise(resolve => {
|
||||
console.log('patch relationship', relationship)
|
||||
this.$store.dispatch('updateLinkFromRelationship', relationship)
|
||||
this.modal.showModal = false
|
||||
this.resetForm()
|
||||
resolve()
|
||||
}))
|
||||
.catch()
|
||||
|
||||
case 'delete':
|
||||
break
|
||||
default:
|
||||
throw "undefined action"
|
||||
throw "uncaught action"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -455,4 +507,10 @@ div#visgraph-legend {
|
||||
.modal-mask {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.debug {
|
||||
margin: 1em; padding: 1em;
|
||||
color: dimgray;
|
||||
font-style: italic;
|
||||
font-size: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user