jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed an issue caused by storing components on the store, added ability dialog

Browse Source
This commit is contained in:
Stefan Zermatten
2019-01-24 16:45:02 +02:00
parent 8c0edfaa93
commit 77d2f87373
6 changed files with 80 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/imports/ui/dialogStack/DialogComponentIndex.js Normal file
View File

@@ -0,0 +1,5 @@
import AbilityDialog from '/imports/ui/components/AbilityDialog.vue';
export default {
AbilityDialog,
};

6
app/imports/ui/dialogStack/DialogStack.Story.vue
View File

@@ -10,11 +10,13 @@
<script>
import DialogBaseStory from '/imports/ui/dialogStack/DialogBase.Story.vue';
import store from "/imports/ui/vuexStore.js";
export default {
methods: {
openDialog(elementId){
store.commit("pushDialogStack", {
this.$store.commit("pushDialogStack", {
// DO NOT store your component in the store like this outside the storybook
// You should register the dialog component in DialogComponentIndex.js
// and commit it to the store as a string: "dialog-base-story"
component: DialogBaseStory,
elementId,
});

21
app/imports/ui/dialogStack/DialogStack.vue
View File

@@ -25,37 +25,42 @@
:style="getDialogStyle(index)"
:elevation="6"
>
<component :is="dialog.component" :data="dialog.data" @pop="popDialogStack($event)" class="dialog-component"></component>
<component :is="dialog.component" v-bind="dialog.data" @pop="popDialogStack($event)" class="dialog-component"></component>
</v-card>
</transition-group>
</v-layout>
</template>
<script>
import "/imports/ui/dialogStack/dialogStackWindowEvents.js";
import store from "/imports/ui/vuexStore.js";
import anime from "animejs";
import mockElement from '/imports/ui/dialogStack/mockElement.js';
import Vue from "vue";
import anime from "animejs";
import "/imports/ui/dialogStack/dialogStackWindowEvents.js";
import mockElement from '/imports/ui/dialogStack/mockElement.js';
import DialogComponentIndex from '/imports/ui/dialogStack/DialogComponentIndex.js';
const OFFSET = 16;
const MOCK_DURATION = 400; // Keep in sync with css transition of .dialog
export default {
components: DialogComponentIndex,
computed: {
dialogs(){
return store.state.dialogStack.dialogs;
return this.$store.state.dialogStack.dialogs;
},
},
methods: {
logAndReturn(thing){
console.log(thing);
return thing;
},
popDialogStack(result){
store.dispatch("popDialogStack", result);
this.$store.dispatch("popDialogStack", result);
},
backdropClicked(event){
if (event.target === event.currentTarget) this.popDialogStack();
},
getDialogStyle(index){
const length = store.state.dialogStack.dialogs.length;
const length = this.$store.state.dialogStack.dialogs.length;
if (index >= length) return;
const num = length - 1;
const left = (num - index) * -OFFSET;