aelve/guide
1
1
Fork 0
mirror of https://github.com/aelve/guide.git synced 2024-11-25 18:56:52 +03:00
Code Issues Projects Releases Wiki Activity

Category description component refactor

Browse Source
This commit is contained in:
Avele 2019-09-03 21:38:17 +04:00
parent 38725ca37c
commit 9b3a9cb15f
2 changed files with 23 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
front/client/components/CategoryDescription.vue
View File

@ -1,30 +1,32 @@
<template> <template>
<div class="category-description"> <div class="category-description">
<div v-if="!editDescriptionShown"> <div v-if="!isEditDescription">
<p v-if="!categoryDescription">This category has no description yet, you can contribute to the category by adding description</p> <p v-if="!categoryDescription">This category has no description yet, you can contribute to the category by adding description</p>
<div class="category-description__content" v-else v-html="categoryDescription" /> <div
v-else
v-html="categoryDescription"
class="category-description__content"
/>
</div> </div>
<markdown-editor <markdown-editor
v-if="editDescriptionShown" v-else
class="mb-2"
toolbar toolbar
:value="categoryDscMarkdown" :value="categoryDescriptionRaw"
@cancel="toggleEditDescription" @cancel="toggleEditDescription"
@save="updateDescription({original: originalDescription, modified: $event})" @save="updateDescription({ original: categoryDescriptionRaw, modified: $event})"
/> />
<v-btn <v-btn
v-if="!editDescriptionShown" text
depressed v-if="!isEditDescription"
small color="grey darken-2"
light class="mt-3"
:title="descriptionBtnText" :title="descriptionBtnText"
color="lightgrey"
@click="toggleEditDescription" @click="toggleEditDescription"
> >
<v-icon size="14" class="mr-1" left>{{descriptionBtnIcon}}</v-icon> <v-icon size="14" class="mr-1" left>{{ descriptionBtnIcon }}</v-icon>
{{descriptionBtnText}} {{ descriptionBtnText }}
</v-btn> </v-btn>
</div> </div>
</template> </template>
@ -32,7 +34,6 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import Component from 'vue-class-component' import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import _get from 'lodash/get' import _get from 'lodash/get'
import MarkdownEditor from 'client/components/MarkdownEditor.vue' import MarkdownEditor from 'client/components/MarkdownEditor.vue'
import conflictDialogMixin from 'client/mixins/conflictDialogMixin' import conflictDialogMixin from 'client/mixins/conflictDialogMixin'
@ -45,17 +46,13 @@ import CatchConflictDecorator from 'client/helpers/CatchConflictDecorator'
mixins: [conflictDialogMixin] mixins: [conflictDialogMixin]
}) })
export default class CategoryDescription extends Vue { export default class CategoryDescription extends Vue {
editDescriptionShown: boolean = false isEditDescription: boolean = false
originalDescription: string = _get(this, '$store.state.category.category.description.text')
modified: string = ''
descriptionButtonIcon: string = ''
descriptionButtonText: string = ''
get categoryDescription () { get categoryDescription () {
return _get(this, '$store.state.category.category.description.html') return _get(this, '$store.state.category.category.description.html')
} }
get categoryDscMarkdown () { get categoryDescriptionRaw () {
return _get(this, '$store.state.category.category.description.text') return _get(this, '$store.state.category.category.description.text')
} }
@ -63,19 +60,16 @@ export default class CategoryDescription extends Vue {
return this.$store.state.category.category.id return this.$store.state.category.category.id
} }
// TODO refactor
get descriptionBtnIcon () { get descriptionBtnIcon () {
const description = _get(this, '$store.state.category.category.description.html') return this.categoryDescription ? '$vuetify.icons.pen' : '$vuetify.icons.plus'
return description ? this.descriptionButtonIcon = '$vuetify.icons.pen' : this.descriptionButtonIcon = '$vuetify.icons.plus'
} }
get descriptionBtnText () { get descriptionBtnText () {
const description = _get(this, '$store.state.category.category.description.html') return this.categoryDescription ? 'Edit description' : 'Add description'
return description ? this.descriptionButtonText = 'Edit description' : this.descriptionButtonText = 'Add description'
} }
toggleEditDescription () { toggleEditDescription () {
this.editDescriptionShown = !this.editDescriptionShown this.isEditDescription = !this.isEditDescription
} }
@CatchConflictDecorator @CatchConflictDecorator
@ -85,15 +79,15 @@ export default class CategoryDescription extends Vue {
original, original,
modified modified
}) })
this.originalDescription = modified
this.toggleEditDescription() this.toggleEditDescription()
this.$store.dispatch('category/reloadCategory')
} }
} }
</script> </script>
<style lang="postcss" scoped> <style lang="postcss" scoped>
.category-description { .category-description {
margin: 0 0 40px; margin: 0 0 30px;
} }
.category-description__content > :first-child { .category-description__content > :first-child {
margin-top: 0; margin-top: 0;

2
front/client/store/modules/categoryItem.ts
View File

@ -132,7 +132,7 @@ const actions: ActionTree<ICategoryItemState, any> = {
original, original,
modified modified
}) })
dispatch('category/reloadCategory', null, { root: true })
return createdDescription return createdDescription
} }
} }