Commit 2ea3adf6 authored by TOUZE Francois's avatar TOUZE Francois
Browse files

confirmer la suppression d'un élément (fenêtre modale)

parent 3f4f7ffc
<template> <template>
<div class="bg-grey">
<div id="project-container"> <div class="bg-grey">
<div class="dropzone-holder">
<div class="dropzone-section"> <div id="project-container">
<div class="design-page-menu d-flex flex-row justify-content-between header-menu">
<span class="design-page-title" v-if="selectedView == LINEAR_VIEW">Linear view</span> <div class="dropzone-holder">
<span class="design-page-title" v-if="selectedView == TREE_VIEW">Tree view</span>
<div class="dropzone-section">
<div class="sector-actions" v-if="selectedElements.length">
<div v-if="isSectorSelected()" @click="reverseSector"> <div class="design-page-menu d-flex flex-row justify-content-between header-menu">
<img src="@/assets/reverse-picto.png" class="mr-1">
Reverse <span class="design-page-title" v-if="selectedView == LINEAR_VIEW">Linear view</span>
</div> <span class="design-page-title" v-if="selectedView == TREE_VIEW">Tree view</span>
<div v-if="isSectorSelected()" @click="duplicateSector">
<img src="@/assets/duplicate-picto.png" class="mr-1"> <div class="sector-actions" v-if="selectedElements.length">
Duplicate
</div> <div v-if="isSectorSelected()" @click="reverseSector">
<div class="delete" @click="deleteElement"> <img src="@/assets/reverse-picto.png" class="mr-1">
<img src="@/assets/red-trash.png" class="mr-1"> Reverse
Delete </div>
</div>
<div v-if="isSectorSelected()" @click="duplicateSector">
<img src="@/assets/duplicate-picto.png" class="mr-1">
Duplicate
</div> </div>
<zoom-linear v-show="selectedView == LINEAR_VIEW" :tree="tree" @selectedLevelChanged="val => selectedLevel = val"></zoom-linear>
<!--
<span class="switch-field"> <div class="delete" @click="deleteElement">
<p>View</p> -->
<div class="colle"> <div class="delete" @click="pourVoir=true">
<label class="radio__label__container left-label" for="switch_left_linear"> <img src="@/assets/red-trash.png" class="mr-1">
<input type="radio" id="switch_left_linear" name="switch" value="linear" checked v-model="selectedView"/> Delete
<span class="checkmark"></span> </div>
</label>
</div> <!-- 10 class="sector-actions" -->
<div class="colle">
<label class="radio__label__container right-label" for="switch_right_linear">
<input type="radio" id="switch_right_linear" name="switch" value="tree" v-model="selectedView" />
<span class="checkmark"></span>
</label>
</div>
</span>
</div> </div>
<zoom-linear v-show="selectedView == LINEAR_VIEW" :tree="tree" @selectedLevelChanged="val => selectedLevel = val"></zoom-linear>
<span class="switch-field">
<p>View</p>
<div class="colle">
<label class="radio__label__container left-label" for="switch_left_linear">
<input type="radio" id="switch_left_linear" name="switch" value="linear" checked v-model="selectedView"/>
<span class="checkmark"></span>
</label>
</div>
<div class="colle">
<label class="radio__label__container right-label" for="switch_right_linear">
<input type="radio" id="switch_right_linear" name="switch" value="tree" v-model="selectedView" />
<span class="checkmark"></span>
</label>
</div>
</span>
<!-- 8 class="design-page-menu -->
</div>
<template v-if="selectedView == TREE_VIEW"> <template v-if="selectedView == TREE_VIEW">
<div id="dropzone" class="dropzone"> <div id="dropzone" class="dropzone">
<TreeView <TreeView
:treeModel="getTreeModel()" :treeModel="getTreeModel()"
...@@ -52,9 +68,9 @@ ...@@ -52,9 +68,9 @@
:level="1"> :level="1">
</TreeView> </TreeView>
</div> </div>
</template> </template>
<template v-if="selectedView == LINEAR_VIEW"> <template v-if="selectedView == LINEAR_VIEW">
<div id="dropzone" class="dropzone linear-view-dropzone" v-bind:class="{'small-size': isElementsPickerActive}"> <div id="dropzone" class="dropzone linear-view-dropzone" v-bind:class="{'small-size': isElementsPickerActive}">
<LinearView <LinearView
id="root" id="root"
...@@ -66,57 +82,69 @@ ...@@ -66,57 +82,69 @@
:level="1"> :level="1">
</LinearView> </LinearView>
</div> </div>
</template> </template>
<div v-if="isElementsPickerActive" class="element-picker"> <div v-if="isElementsPickerActive" class="element-picker">
<ItemsPicker <ItemsPicker
@add="addElement" @add="addElement"
@close="hideItemsPicker"> @close="hideItemsPicker">
</ItemsPicker> </ItemsPicker>
</div>
<div v-if="!isElementsPickerActive" class="button-actions">
<router-link to="/Simulate">
<b-button size="md" type="button" id="set-simulation" class=" btn new-sector border border-success text-white bg-success float-right mr-3">Set the simulation</b-button>
</router-link>
<b-button size="md" class="white-button ml-4" @click="displayAddSectorModal">Add New Sector</b-button>
<div class="modal-backdrop" v-if="isAddSectorModalVisible" @close="closeAddSectorModal">
<div class="sectorModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold" id="modalTitle">
<slot name="header">
New Sector
<button type="button" class="btn-close" @click="closeAddSectorModal" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body" id="modalDescription">
<slot name="body">
<div class="dialog-sector" title ="Name new sector">
<input v-model="sectorName" type="text">
<button id="get-sector-name" @click="addSector(sectorName)">OK</button>
</div>
</slot>
</section>
</div>
</div> </div>
<b-button size="md" class="new-element element-button ml-3" @click="displayItemsPicker">New Element</b-button>
</div>
<div v-if="!isElementsPickerActive" class="button-actions"> <div class="modal-backdrop" v-show="pourVoir" @close="pourVoirModal">
<router-link to="/Simulate"> <div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<b-button size="md" type="button" id="set-simulation" class=" btn new-sector border border-success text-white bg-success float-right mr-3">Set the simulation</b-button> <section class="modal-body" id="modalDescription">
</router-link> <slot name="body">
<div class="mb-2">
<b-button size="md" class="white-button ml-4" @click="displayAddSectorModal">Add New Sector</b-button> Caution: are you sure you want to delete?<br/><br/>
<div class="modal-backdrop" v-if="isAddSectorModalVisible" @close="closeAddSectorModal"> <b-button variant="outline-danger" @click="deleteElement">YES</b-button> | <b-button squared variant="secondary" @click="pourVoir=false">CANCEL</b-button>
<div class="sectorModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold" id="modalTitle">
<slot name="header">
New Sector
<button type="button" class="btn-close" @click="closeAddSectorModal" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body" id="modalDescription">
<slot name="body">
<div class="dialog-sector" title ="Name new sector">
<input v-model="sectorName" type="text">
<button id="get-sector-name" @click="addSector(sectorName)">OK</button>
</div>
</slot>
</section>
</div>
</div> </div>
</slot>
<b-button size="md" class="new-element element-button ml-3" @click="displayItemsPicker">New Element</b-button> </section>
</div> </div>
</div> </div>
<!-- 6 class="dropzone-section" -->
</div> </div>
<div class="design-aside"> <!-- 4 class="dropzone-holder -->
<div class="dropzone-section"> </div>
<div class="elements-area-header d-flex flex-row justify-content-between">
<h1>Layout View</h1>
</div>
<div class="layout-view-container" v-bind:class="{'small-size': selectedElements.length && isItemSelected}"> <div class="design-aside">
<div class="dropzone-section">
<div class="elements-area-header d-flex flex-row justify-content-between">
<h1>Layout View</h1>
</div>
<div class="layout-view-container" v-bind:class="{'small-size': selectedElements.length && isItemSelected}">
<LayoutView :treeModel="getTreeModel()"></LayoutView> <LayoutView :treeModel="getTreeModel()"></LayoutView>
</div> </div>
<div v-if="selectedElements.length && isItemSelected" class="elements-edition-container">
<div v-if="selectedElements.length && isItemSelected" class="elements-edition-container">
<ElementEdition <ElementEdition
:element="selectedElements.first()" :element="selectedElements.first()"
:selectedElements="selectedElements" :selectedElements="selectedElements"
...@@ -124,12 +152,14 @@ ...@@ -124,12 +152,14 @@
@updateLastClickedElement="updateLastClickedElement" @updateLastClickedElement="updateLastClickedElement"
@update="updateSelectedElements"> @update="updateSelectedElements">
</ElementEdition> </ElementEdition>
</div> </div>
</div> </div>
</div>
</div>
</div> <!-- 2 id="project-container" -->
</div> </div>
<!-- 1 class="bg-grey" -->
</div>
</template> </template>
<script> <script>
...@@ -176,7 +206,9 @@ export default { ...@@ -176,7 +206,9 @@ export default {
tree: null, tree: null,
machine: this.$store.state.machine, machine: this.$store.state.machine,
shouldBeToggled: {}, // Config pour la TreeView, shouldBeToggled: {}, // Config pour la TreeView,
selectedLevel: 1 selectedLevel: 1,
isResultModalVisible: false,
pourVoir: false
}; };
}, },
props: { props: {
...@@ -296,7 +328,13 @@ export default { ...@@ -296,7 +328,13 @@ export default {
this.$saveMachine(); this.$saveMachine();
this.$updateView(); this.$updateView();
}, },
pourVoirModal: function() {
this.pourVoir= false;
},
deleteElement: function() { deleteElement: function() {
const elementsLabel = this.selectedElements.first().displayName; const elementsLabel = this.selectedElements.first().displayName;
const nodesToDelete = this.$getNodesByLabel(elementsLabel); const nodesToDelete = this.$getNodesByLabel(elementsLabel);
...@@ -314,6 +352,7 @@ export default { ...@@ -314,6 +352,7 @@ export default {
this.$saveMachine(); this.$saveMachine();
this.$updateView(); this.$updateView();
this.pourVoir= false;
}, },
$updateView: function() { $updateView: function() {
this.tree = _.cloneDeep(this.tree); this.tree = _.cloneDeep(this.tree);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment