Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Open sidebar
TOUZE Francois
PSPA
Commits
2ea3adf6
Commit
2ea3adf6
authored
Oct 04, 2019
by
TOUZE Francois
Browse files
confirmer la suppression d'un élément (fenêtre modale)
parent
3f4f7ffc
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
124 additions
and
85 deletions
+124
-85
frontend/src/pages/Design.vue
frontend/src/pages/Design.vue
+124
-85
No files found.
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-butt
on>
</div>
</slot>
</secti
on>
</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
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment