mirror of
https://github.com/aelve/guide.git
synced 2024-11-23 12:15:06 +03:00
Rss icon and link added (#274)
* rss link added * separate file for categroy information * removed lodash functions from CategroyInfoEdit component * RSS tooltip added * move category info logic to the separate component * Rss refactored * minor bug fix
This commit is contained in:
Gigiman
avele
parent
22a4039413
commit
3c74057616
@ -1,45 +1,16 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<div class="category-wrapper">
|
||||
<div class="category-top">
|
||||
<div
|
||||
v-if="category"
|
||||
class="category-top-data"
|
||||
>
|
||||
<p class="category-top-group mr-3"> {{category.group}} </p>
|
||||
<v-icon size="8" class="mr-3" left>$vuetify.icons.circle</v-icon>
|
||||
<router-link
|
||||
class="category-top-link mr-3"
|
||||
:to="categoryUrl"
|
||||
>
|
||||
{{category.title}}
|
||||
</router-link>
|
||||
<category-item-btn
|
||||
title="edit item info"
|
||||
icon="cog"
|
||||
@click="openCategoryInfoDialog"
|
||||
/>
|
||||
</div>
|
||||
<v-btn
|
||||
class="ma-0 px-1"
|
||||
flat
|
||||
color="grey"
|
||||
@click="openAddItemDialog"
|
||||
>
|
||||
<v-icon size="14" class="mr-1" left>$vuetify.icons.plus</v-icon>
|
||||
Add new item
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
flat
|
||||
class="ma-0 pa-0"
|
||||
color="grey"
|
||||
title="Delete category"
|
||||
@click="deleteCategory"
|
||||
>
|
||||
<v-icon size="14">$vuetify.icons.trash-alt</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<template v-if="category">
|
||||
<category-info
|
||||
:category="category"
|
||||
:categoryId="categoryId"
|
||||
:categoryTitle="category.title"
|
||||
:categoryGroup="category.group"
|
||||
:categoryUrl="categoryUrl"
|
||||
@openAddItemDialog="openAddItemDialog"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<category-description />
|
||||
|
||||
@ -61,7 +32,6 @@
|
||||
:kind="value.kind"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-btn
|
||||
flat
|
||||
class="ml-2"
|
||||
@ -72,11 +42,7 @@
|
||||
Add new item
|
||||
</v-btn>
|
||||
<add-item-dialog
|
||||
v-model="isDialogOpen"
|
||||
:categoryId="categoryId"
|
||||
/>
|
||||
<category-info-edit
|
||||
v-model="isCategoryInfoEdit"
|
||||
v-model="isAddItemDialogOpen"
|
||||
:categoryId="categoryId"
|
||||
/>
|
||||
</div>
|
||||
@ -90,27 +56,23 @@ import Vue from 'vue'
|
||||
import Component from 'vue-class-component'
|
||||
import { Prop } from 'vue-property-decorator'
|
||||
import CategoryItem from 'client/components/CategoryItem.vue'
|
||||
import AddItemDialog from 'client/components/AddItemDialog.vue'
|
||||
import CategoryDescription from 'client/components/CategoryDescription.vue'
|
||||
import CategoryItemBtn from 'client/components/CategoryItemBtn.vue'
|
||||
import category from 'client/store/modules/category'
|
||||
import CategoryInfoEdit from 'client/components/CategoryInfoEdit.vue'
|
||||
import Confirm from 'client/helpers/ConfirmDecorator'
|
||||
import CategoryInfo from 'client/components/CategoryInfo.vue'
|
||||
import AddItemDialog from 'client/components/AddItemDialog.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
CategoryItem,
|
||||
AddItemDialog,
|
||||
CategoryDescription,
|
||||
CategoryItemBtn,
|
||||
CategoryInfoEdit
|
||||
CategoryInfo,
|
||||
AddItemDialog,
|
||||
}
|
||||
})
|
||||
export default class Category extends Vue {
|
||||
@Prop(String) categoryId!: string
|
||||
|
||||
isDialogOpen: boolean = false
|
||||
isCategoryInfoEdit: boolean = false
|
||||
isAddItemDialogOpen: boolean = false
|
||||
|
||||
get category () {
|
||||
return this.$store.state.category.category
|
||||
@ -133,67 +95,12 @@ export default class Category extends Vue {
|
||||
}
|
||||
|
||||
openAddItemDialog () {
|
||||
this.isDialogOpen = true
|
||||
}
|
||||
|
||||
@Confirm({ text: 'delete this category' })
|
||||
async deleteCategory () {
|
||||
if (!this.category) {
|
||||
return
|
||||
}
|
||||
|
||||
await this.$store.dispatch('category/deleteCategory', this.categoryId)
|
||||
this.$router.back()
|
||||
}
|
||||
|
||||
openCategoryInfoDialog () {
|
||||
this.isCategoryInfoEdit = true
|
||||
this.isAddItemDialogOpen = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.category-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
.category-top-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.category-top >>> i {
|
||||
margin-right: 15px;
|
||||
font-size: 18px;
|
||||
color: #979797;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.25s;
|
||||
}
|
||||
|
||||
.category-top >>> i:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.category-top-link {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: #979797;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.25s;
|
||||
}
|
||||
|
||||
.category-top-link:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.category-top-group {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.category-wrapper {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
145
front/client/components/CategoryInfo.vue
Normal file
145
front/client/components/CategoryInfo.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="category-top">
|
||||
<div
|
||||
class="category-top-data"
|
||||
>
|
||||
<a-link
|
||||
openInNewTab
|
||||
:url="`https://guide.aelve.com/haskell/feed/category/${categoryId}`"
|
||||
>
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon size="14" class="mr-3" left v-on="on">$vuetify.icons.rss</v-icon>
|
||||
</template>
|
||||
<span>{{`RSS feed of ${categoryTitle} category`}}</span>
|
||||
</v-tooltip>
|
||||
</a-link>
|
||||
<p class="category-top-group mr-3"> {{categoryGroup}} </p>
|
||||
<v-icon size="8" class="mr-3" left>$vuetify.icons.circle</v-icon>
|
||||
<router-link
|
||||
class="category-top-link mr-3"
|
||||
:to="categoryUrl"
|
||||
>
|
||||
{{categoryTitle}}
|
||||
</router-link>
|
||||
<category-item-btn
|
||||
title="edit item info"
|
||||
icon="cog"
|
||||
iconSize="18"
|
||||
@click="openCategoryInfoDialog"
|
||||
/>
|
||||
</div>
|
||||
<v-btn
|
||||
class="ma-0 px-1"
|
||||
flat
|
||||
color="grey"
|
||||
@click="openDialog"
|
||||
>
|
||||
<v-icon size="14" class="mr-1" left>$vuetify.icons.plus</v-icon>
|
||||
Add new item
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
flat
|
||||
class="ma-0 pa-0"
|
||||
color="grey"
|
||||
title="Delete category"
|
||||
@click="deleteCategory"
|
||||
>
|
||||
<v-icon size="14">$vuetify.icons.trash-alt</v-icon>
|
||||
</v-btn>
|
||||
<category-info-edit
|
||||
v-model="isCategoryInfoEdit"
|
||||
:categoryId="categoryId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import Component from 'vue-class-component'
|
||||
import { Prop } from 'vue-property-decorator'
|
||||
import CategoryInfoEdit from 'client/components/CategoryInfoEdit.vue'
|
||||
import ALink from 'client/components/ALink.vue'
|
||||
import Confirm from 'client/helpers/ConfirmDecorator'
|
||||
import CategoryItemBtn from 'client/components/CategoryItemBtn.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
CategoryInfoEdit,
|
||||
ALink,
|
||||
CategoryItemBtn,
|
||||
}
|
||||
})
|
||||
export default class CategoryInfo extends Vue {
|
||||
@Prop(Object) category!: object
|
||||
@Prop(String) categoryId!: string
|
||||
@Prop(String) categoryTitle!: string
|
||||
@Prop(String) categoryGroup!: string
|
||||
@Prop(String) categoryUrl!: string
|
||||
|
||||
isCategoryInfoEdit: boolean = false
|
||||
isAddItemDialogOpen: boolean = false
|
||||
|
||||
openCategoryInfoDialog () {
|
||||
this.isCategoryInfoEdit = true
|
||||
}
|
||||
|
||||
openDialog () {
|
||||
this.$emit('openAddItemDialog');
|
||||
}
|
||||
|
||||
@Confirm({ text: 'delete this category' })
|
||||
async deleteCategory () {
|
||||
if (!this.category) {
|
||||
return
|
||||
}
|
||||
await this.$store.dispatch('category/deleteCategory', this.categoryId)
|
||||
this.$router.back()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.category-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
.category-top-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.category-top >>> i {
|
||||
margin-right: 15px;
|
||||
font-size: 18px;
|
||||
color: #979797;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.25s;
|
||||
}
|
||||
|
||||
.category-top >>> i:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.category-top-link {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: #979797;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.25s;
|
||||
}
|
||||
|
||||
.category-top-link:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.category-top-group {
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,7 +26,7 @@ export default class CategoryItemBtn extends Vue {
|
||||
@Prop(String) icon: string
|
||||
@Prop(Boolean) small: boolean
|
||||
@Prop(String) size: string
|
||||
@Prop(Number) iconSize: number
|
||||
@Prop(String) iconSize: string
|
||||
|
||||
get style () {
|
||||
// Size prop overlaps small prop
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<category-item-btn
|
||||
slot="activator"
|
||||
size="22px"
|
||||
:iconSize="14"
|
||||
iconSize="14"
|
||||
icon="ellipsis-v"
|
||||
/>
|
||||
<v-list dense>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user