Skip to content

GitLab

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

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

parent 3f4f7ffc
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 85 deletions
frontend/src/pages/Design.vue
View file @ 2ea3adf6
<template>
<div class="bg-grey">
<div id="project-container">
<div class="dropzone-holder">
<div class="dropzone-section">
<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>
<span class="design-page-title" v-if="selectedView == TREE_VIEW">Tree view</span>
<div class="sector-actions" v-if="selectedElements.length">
<div v-if="isSectorSelected()" @click="reverseSector">
<img src="@/assets/reverse-picto.png" class="mr-1">
Reverse
</div>
<div v-if="isSectorSelected()" @click="duplicateSector">
<img src="@/assets/duplicate-picto.png" class="mr-1">
Duplicate
</div>
<div class="delete" @click="deleteElement">
<img src="@/assets/red-trash.png" class="mr-1">
Delete
</div>
<div class="bg-grey">
<div id="project-container">
<div class="dropzone-holder">
<div class="dropzone-section">
<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>
<span class="design-page-title" v-if="selectedView == TREE_VIEW">Tree view</span>
<div class="sector-actions" v-if="selectedElements.length">
<div v-if="isSectorSelected()" @click="reverseSector">
<img src="@/assets/reverse-picto.png" class="mr-1">
Reverse
</div>
<div v-if="isSectorSelected()" @click="duplicateSector">
<img src="@/assets/duplicate-picto.png" class="mr-1">
Duplicate
</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>
<!--
<div class="delete" @click="deleteElement">
-->
<div class="delete" @click="pourVoir=true">
<img src="@/assets/red-trash.png" class="mr-1">
Delete
</div>
<!-- 10 class="sector-actions" -->
</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">
<TreeView
:treeModel="getTreeModel()"
......@@ -52,9 +68,9 @@
:level="1">
</TreeView>
</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}">
<LinearView
id="root"
......@@ -66,57 +82,69 @@
:level="1">
</LinearView>
</div>
</template>
</template>
<div v-if="isElementsPickerActive" class="element-picker">
<div v-if="isElementsPickerActive" class="element-picker">
<ItemsPicker
@add="addElement"
@close="hideItemsPicker">
</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>
<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">
<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 class="modal-backdrop" v-show="pourVoir" @close="pourVoirModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<section class="modal-body" id="modalDescription">
<slot name="body">
<div class="mb-2">
Caution: are you sure you want to delete?<br/><br/>
<b-button variant="outline-danger" @click="deleteElement">YES</b-button> | <b-button squared variant="secondary" @click="pourVoir=false">CANCEL</b-button>
</div>
<b-button size="md" class="new-element element-button ml-3" @click="displayItemsPicker">New Element</b-button>
</div>
</slot>
</section>
</div>
</div>
<!-- 6 class="dropzone-section" -->
</div>
<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>
<!-- 4 class="dropzone-holder -->
</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>
</div>
<div v-if="selectedElements.length && isItemSelected" class="elements-edition-container">
</div>
<div v-if="selectedElements.length && isItemSelected" class="elements-edition-container">
<ElementEdition
:element="selectedElements.first()"
:selectedElements="selectedElements"
......@@ -124,12 +152,14 @@
@updateLastClickedElement="updateLastClickedElement"
@update="updateSelectedElements">
</ElementEdition>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2 id="project-container" -->
</div>
<!-- 1 class="bg-grey" -->
</div>
</template>
<script>
......@@ -176,7 +206,9 @@ export default {
tree: null,
machine: this.$store.state.machine,
shouldBeToggled: {}, // Config pour la TreeView,
selectedLevel: 1
selectedLevel: 1,
isResultModalVisible: false,
pourVoir: false
};
},
props: {
......@@ -296,7 +328,13 @@ export default {
this.$saveMachine();
this.$updateView();
},
pourVoirModal: function() {
this.pourVoir= false;
},
deleteElement: function() {
const elementsLabel = this.selectedElements.first().displayName;
const nodesToDelete = this.$getNodesByLabel(elementsLabel);
......@@ -314,6 +352,7 @@ export default {
this.$saveMachine();
this.$updateView();
this.pourVoir= false;
},
$updateView: function() {
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