wbrawner/ffc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor navigationBar component

Browse source 
Co-authored-by: Niko Lockenvitz <nl@nikolockenvitz.de>
This commit is contained in:
Rene Fischer 2020-06-20 01:15:24 +02:00
parent 17fa069aff
commit f2d76fb381
2 changed files with 104 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/components/layout/NavigationBar.vue
View file

@ -29,7 +29,7 @@
<v-btn icon v-else-if="isInLearning" @click="quitLearning">
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
<v-app-bar-nav-icon v-else @click.stop="primaryDrawer.model = !primaryDrawer.model"></v-app-bar-nav-icon>
<v-app-bar-nav-icon v-else @click.stop="togglePrimaryDrawer"></v-app-bar-nav-icon>
<v-toolbar-title>{{ toolbarTitle }}</v-toolbar-title>
@ -60,6 +60,8 @@
</template>
<script>
import * as selectedDeckDialogHelper from "../../helpers/selectedDeckDialogHelper.js";
export default {
name: "NavigationBar",
props: {
@ -111,73 +113,10 @@ export default {
});
},
deleteSelected() {
let options = {
title: `Delete Deck${this.numberOfSelectedDecks > 1 ? "s" : ""}?`,
message: `Do you really want to delete the ${
this.numberOfSelectedDecks > 1 ? this.numberOfSelectedDecks + " " : ""
}selected
deck${this.numberOfSelectedDecks > 1 ? "s" : ""}?`,
buttons: [
{
name: "Cancel",
color: "grey"
},
{
name: "Delete",
color: "red darken-1",
callback: () => {
this.$eventHub.$emit("deleteSelectedDecks");
}
}
]
};
this.$eventHub.$emit("showCustomDialog", options);
selectedDeckDialogHelper.deleteSelected(this);
},
showInfoForSelectedDeck() {
const selectedDeck = this.decks.find(deck => deck.selected);
const options = {
title: selectedDeck.name,
table: [],
buttons: [
{
name: "Close",
color: "indigo",
}
]
};
const infos = [
{
meta: "file",
content: [
{
key: "author",
name: "Author"
}
]
},
{
meta: "deck",
content: [
{
key: "description",
name: "Description"
}
]
}
];
for (const info of infos) {
for (const content of info.content) {
options.table.push({
name: content.name,
value: selectedDeck.meta[info.meta][content.key] || "-"
});
}
}
options.table.push({
name: "Number of Cards",
value: selectedDeck.cards.length
});
this.$eventHub.$emit("showCustomDialog", options);
selectedDeckDialogHelper.showInfoForSelectedDeck(this);
},
showDrawer() {
this.primaryDrawer.model = true;
@ -186,25 +125,11 @@ export default {
this.primaryDrawer.model = false;
},
quitLearning() {
this.$eventHub.$emit("showCustomDialog", {
title: "Quit Learning?",
message: "Do you really want to quit learning? Nevertheless, your progress is saved.",
buttons: [
{
name: "Cancel",
color: "grey",
},
{
name: "Quit",
color: "orange darken-1",
callback: () => {
this.deselectAll();
this.$router.replace("/");
}
}
]
})
}
selectedDeckDialogHelper.quitLearning(this);
},
togglePrimaryDrawer() {
this.primaryDrawer.model = !this.primaryDrawer.model
},
}
};
</script>

94
src/helpers/selectedDeckDialogHelper.js Normal file
View file

@ -0,0 +1,94 @@
export function deleteSelected(context) {
const options = {
title: `Delete Deck${context.numberOfSelectedDecks > 1 ? "s" : ""}?`,
message: `Do you really want to delete the ${
context.numberOfSelectedDecks > 1
? context.numberOfSelectedDecks + " "
: ""
}selected
deck${context.numberOfSelectedDecks > 1 ? "s" : ""}?`,
buttons: [
{
name: "Cancel",
color: "grey",
},
{
name: "Delete",
color: "red darken-1",
callback: () => {
context.$eventHub.$emit("deleteSelectedDecks");
},
},
],
};
context.$eventHub.$emit("showCustomDialog", options);
}
export function showInfoForSelectedDeck(context) {
const selectedDeck = context.decks.find((deck) => deck.selected);
const options = {
title: selectedDeck.name,
table: [],
buttons: [
{
name: "Close",
color: "indigo",
},
],
};
const infos = [
{
meta: "file",
content: [
{
key: "author",
name: "Author",
},
],
},
{
meta: "deck",
content: [
{
key: "description",
name: "Description",
},
],
},
];
for (const info of infos) {
for (const content of info.content) {
options.table.push({
name: content.name,
value: selectedDeck.meta[info.meta][content.key] || "-",
});
}
}
options.table.push({
name: "Number of Cards",
value: selectedDeck.cards.length,
});
context.$eventHub.$emit("showCustomDialog", options);
}
export function quitLearning(context) {
context.$eventHub.$emit("showCustomDialog", {
title: "Quit Learning?",
message:
"Do you really want to quit learning? Nevertheless, your progress is saved.",
buttons: [
{
name: "Cancel",
color: "grey"
},
{
name: "Quit",
color: "orange darken-1",
callback: () => {
context.deselectAll();
context.$router.replace("/");
}
}
]
});
}