Skip to content

Commit

Permalink
[#30] split note view in own views (one for edit one for creating new…
Browse files Browse the repository at this point in the history
… one)
  • Loading branch information
rainu committed Dec 3, 2019
1 parent 2949f50 commit 5c3ac1e
Show file tree
Hide file tree
Showing 11 changed files with 194 additions and 112 deletions.
2 changes: 1 addition & 1 deletion components/note/form/Camera.vue
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
clearAfterSubmit: {
type: Boolean,
required: false,
default: true
default: false
}
},
data() {
Expand Down
2 changes: 1 addition & 1 deletion components/note/form/Credentials.vue
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
clearAfterSubmit: {
type: Boolean,
required: false,
default: true
default: false
}
},
data() {
Expand Down
2 changes: 1 addition & 1 deletion components/note/form/Picture.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
clearAfterSubmit: {
type: Boolean,
required: false,
default: true
default: false
}
},
data() {
Expand Down
2 changes: 1 addition & 1 deletion components/note/form/Reminder.vue
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
clearAfterSubmit: {
type: Boolean,
required: false,
default: true
default: false
}
},
data() {
Expand Down
2 changes: 1 addition & 1 deletion components/note/form/Template.vue
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@
clearAfterSubmit: {
type: Boolean,
required: false,
default: true
default: false
}
},
data() {
Expand Down
2 changes: 1 addition & 1 deletion components/note/form/Text.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
clearAfterSubmit: {
type: Boolean,
required: false,
default: true
default: false
}
},
data() {
Expand Down
15 changes: 1 addition & 14 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

102 changes: 11 additions & 91 deletions pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,48 +43,6 @@
</v-col>
</v-row>

<v-dialog v-model="dialog.new.open" scrollable>
<v-card v-if="dialog.new.type">
<v-card-title>
<span class="headline">{{$t(dialog.new.type.text)}}</span>
</v-card-title>
<v-card-text>
<NoteFormText form-id="note-new-form" v-if="dialog.new.type.id === 'text'" @onSubmit="onSaveNewNote"></NoteFormText>
<NoteFormReminder form-id="note-new-form" v-if="dialog.new.type.id === 'reminder'" @onSubmit="onSaveNewNote"></NoteFormReminder>
<NoteFormPicture form-id="note-new-form" v-if="dialog.new.type.id === 'picture'" @onSubmit="onSaveNewNote"></NoteFormPicture>
<NoteFormTemplate form-id="note-new-form" v-if="dialog.new.type.id === 'template'" @onSubmit="onSaveNewNote"></NoteFormTemplate>
<NoteFormCredentials form-id="note-new-form" v-if="dialog.new.type.id === 'credentials'" @onSubmit="onSaveNewNote"></NoteFormCredentials>
<NoteFormCamera form-id="note-new-form" v-if="dialog.new.type.id === 'camera'" @onSubmit="onSaveNewNote"></NoteFormCamera>
</v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<v-btn color="error" @click="dialog.new.open = false">{{$t('note.actions.abort')}}</v-btn>
<v-btn color="primary" type="submit" form="note-new-form">{{$t('note.actions.save')}}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

<v-dialog v-model="dialog.edit.open" scrollable>
<v-card v-if="dialog.edit.note">
<v-card-title>
<span class="headline">{{$t('note.edit.title')}}</span>
</v-card-title>
<v-card-text>
<NoteFormText form-id="note-edit-form" v-if="dialog.edit.note.type === 'text'" :data="dialog.edit.note" @onSubmit="onSaveNote"></NoteFormText>
<NoteFormReminder form-id="note-edit-form" v-if="dialog.edit.note.type === 'reminder'" :data="dialog.edit.note" @onSubmit="onSaveNote"></NoteFormReminder>
<NoteFormPicture form-id="note-edit-form" v-if="dialog.edit.note.type === 'picture'" :data="dialog.edit.note" @onSubmit="onSaveNote"></NoteFormPicture>
<NoteFormTemplate form-id="note-edit-form" v-if="dialog.edit.note.type === 'template'" :data="dialog.edit.note" @onSubmit="onSaveNote"></NoteFormTemplate>
<NoteFormCredentials form-id="note-edit-form" v-if="dialog.edit.note.type === 'credentials'" :data="dialog.edit.note" @onSubmit="onSaveNote"></NoteFormCredentials>
<NoteFormCamera form-id="note-edit-form" v-if="dialog.edit.note.type === 'camera'" :data="dialog.edit.note" @onSubmit="onSaveNote"></NoteFormCamera>
</v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<v-btn color="error" @click="dialog.edit.open = false">{{$t('note.actions.abort')}}</v-btn>
<v-btn color="primary" type="submit" form="note-edit-form">{{$t('note.actions.save')}}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

<v-dialog v-model="dialog.delete.open" max-width="290">
<v-card>
<v-card-title class="headline">{{$t('common.confirmation.title')}}</v-card-title>
Expand All @@ -108,12 +66,6 @@
<v-icon>close</v-icon>
</v-btn>
</v-snackbar>
<v-snackbar v-model="snackbar.saved" color="success" class="text-center" :timeout="1000">
{{$t('note.saved.successful')}}
<v-btn text @click="snackbar.saved = false" >
<v-icon>close</v-icon>
</v-btn>
</v-snackbar>

<v-footer app class="pa-0">
<v-toolbar dense color="footer">
Expand Down Expand Up @@ -155,7 +107,7 @@
<v-list-item v-for="type in note.types" :key="type.id">
<v-btn block @click="onNewNote(type)">
<v-icon left>{{type.icon}}</v-icon>
{{$t(type.text)}}
{{$t(`note.${type.id}.title`)}}
</v-btn>
</v-list-item>
</v-list>
Expand All @@ -170,7 +122,6 @@
import { mapGetters, mapState, mapMutations } from 'vuex';
import Vue from 'vue'
import copy from 'copy-to-clipboard';
import uuid4 from 'uuid4';
import { readBoardQuery } from '../common/boardQuery'
import NoteCardText from "../components/note/card/Text";
Expand Down Expand Up @@ -208,14 +159,6 @@ export default {
data(){
return {
dialog: {
new: {
open: false,
type: null
},
edit: {
open: false,
note: null
},
delete: {
open: false,
noteId: null
Expand All @@ -230,19 +173,18 @@ export default {
},
snackbar: {
copied: false,
saved: false,
copied: false
},
note: {
data: {},
types: [
{ id: 'template', icon: 'ballot', text: 'note.template.title' },
{ id: 'credentials', icon: 'fingerprint', text: 'note.credentials.title' },
{ id: 'picture', icon: 'photo', text: 'note.picture.title' },
{ id: 'camera', icon: 'camera', text: 'note.camera.title' },
{ id: 'reminder', icon: 'alarm', text: 'note.reminder.title' },
{ id: 'text', icon: 'notes', text: 'note.text.title' },
{ id: 'template', icon: 'ballot' },
{ id: 'credentials', icon: 'fingerprint' },
{ id: 'picture', icon: 'photo' },
{ id: 'camera', icon: 'camera' },
{ id: 'reminder', icon: 'alarm' },
{ id: 'text', icon: 'notes' },
]
}
}
Expand Down Expand Up @@ -310,21 +252,13 @@ export default {
},
methods: {
...mapMutations({
addNote: 'note/addNote',
editNote: 'note/editNote',
deleteNote: 'note/deleteNote',
}),
onNewNote(type) {
this.dialog.new.open = true
this.dialog.new.type = type
this.$router.push("/notes/new/" + type.id)
},
onSaveNewNote(note){
this.addNote({
id: uuid4(),
type: this.dialog.new.type.id,
...note
})
this.dialog.new.open = false
onEditRequest(note) {
this.$router.push("/notes/edit/" + note.id)
},
onDeleteRequest(id) {
this.dialog.delete.open = true
Expand All @@ -335,20 +269,6 @@ export default {
this.dialog.delete.open = false
this.dialog.delete.noteId = null
},
onEditRequest(note) {
this.dialog.edit.note = note
this.dialog.edit.open = true
},
onSaveNote(note) {
this.snackbar.saved = false
this.editNote({
id: this.dialog.edit.note.id,
type: this.dialog.edit.note.type,
...note,
})
this.dialog.edit.open = false
this.snackbar.saved = true
},
onCopyNote(content) {
this.snackbar.copied = false
copy(content)
Expand Down
88 changes: 88 additions & 0 deletions pages/notes/edit/_id.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<v-container fluid>
<v-card>
<v-card-title>
<span class="headline">{{$t('note.edit.title')}}</span>
</v-card-title>
<v-card-text>
<NoteFormText form-id="note-edit-form" v-if="note.type === 'text'" :data="note" @onSubmit="onSaveNote" ></NoteFormText>
<NoteFormReminder form-id="note-edit-form" v-if="note.type === 'reminder'" :data="note" @onSubmit="onSaveNote" ></NoteFormReminder>
<NoteFormPicture form-id="note-edit-form" v-if="note.type === 'picture'" :data="note" @onSubmit="onSaveNote" ></NoteFormPicture>
<NoteFormTemplate form-id="note-edit-form" v-if="note.type === 'template'" :data="note" @onSubmit="onSaveNote" ></NoteFormTemplate>
<NoteFormCredentials form-id="note-edit-form" v-if="note.type === 'credentials'" :data="note" @onSubmit="onSaveNote" ></NoteFormCredentials>
<NoteFormCamera form-id="note-edit-form" v-if="note.type === 'camera'" :data="note" @onSubmit="onSaveNote" ></NoteFormCamera>
</v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<v-btn color="error" @click="onAbort">{{$t('note.actions.abort')}}</v-btn>
<v-btn color="primary" type="submit" form="note-edit-form">{{$t('note.actions.save')}}</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template>

<script>
import { mapMutations } from 'vuex';
import NoteCardText from "../../../components/note/card/Text";
import NoteCardPicture from "../../../components/note/card/Picture";
import NoteFormText from "../../../components/note/form/Text";
import NoteFormPicture from "../../../components/note/form/Picture";
import NoteFormTemplate from "../../../components/note/form/Template";
import NoteCardTemplate from "../../../components/note/card/Template";
import HelpFirstSteps from "../../../components/help/FirstSteps";
import NoteOrderConfig from "../../../components/note/OrderConfig";
import NoteFormCredentials from "../../../components/note/form/Credentials";
import NoteCardCredentials from "../../../components/note/card/Credentials";
import NoteFormCamera from "../../../components/note/form/Camera";
import NoteCardCamera from "../../../components/note/card/Camera";
import NoteFormReminder from "../../../components/note/form/Reminder";
import NoteCardReminder from "../../../components/note/card/Reminder";
export default {
components: {
NoteCardReminder,
NoteFormReminder,
NoteOrderConfig,
HelpFirstSteps,
NoteCardTemplate,
NoteFormTemplate,
NoteCardText,
NoteFormText,
NoteCardPicture,
NoteFormPicture,
NoteCardCredentials,
NoteFormCredentials,
NoteCardCamera,
NoteFormCamera
},
data(){
return {
snackbar: {
saved: false,
},
}
},
computed: {
note(){
return this.$store.getters['note/getNoteById'](this.$route.params.id)
},
},
methods: {
...mapMutations({
editNote: 'note/editNote',
}),
onAbort(){
this.$router.back()
},
onSaveNote(note) {
this.editNote({
id: this.note.id,
type: this.note.type,
...note,
})
this.$router.back()
}
}
}
</script>
Loading

0 comments on commit 5c3ac1e

Please sign in to comment.