Leisuretimedock/blessing-skin-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add likes count to items on skinlib page

Browse Source
This commit is contained in:
Pig Fang 2018-08-20 23:30:05 +08:00
parent d30f049111
commit 1c2e3a19ca
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/src/components/skinlib/List.vue
View File

@ -113,6 +113,7 @@
:name="item.name" :name="item.name"
:type="item.type" :type="item.type"
:liked="item.liked" :liked="item.liked"
:likes="item.likes"
:isPublic="item.public" :isPublic="item.public"
:anonymous="anonymous" :anonymous="anonymous"
@like-toggled="onLikeToggled(index, $event)" @like-toggled="onLikeToggled(index, $event)"
@ -244,6 +245,7 @@ export default {
}, },
onLikeToggled(index, action) { onLikeToggled(index, action) {
this.items[index].liked = action; this.items[index].liked = action;
this.items[index].likes += action ? 1 : -1;
} }
} }
}; };

6
resources/assets/src/components/skinlib/SkinLibItem.vue
View File

@ -18,7 +18,10 @@
:class="{ liked, anonymous }" :class="{ liked, anonymous }"
href="#" href="#"
@click.stop="toggleLiked" @click.stop="toggleLiked"
><i class="fas fa-heart"></i></a> >
<i class="fas fa-heart"></i>
<span>{{ likes }}</span>
</a>
<small v-if="!isPublic" class="more private-label"> <small v-if="!isPublic" class="more private-label">
{{ $t('skinlib.private') }} {{ $t('skinlib.private') }}
@ -41,6 +44,7 @@ export default {
validator: value => ['steve', 'alex', 'cape'].includes(value) validator: value => ['steve', 'alex', 'cape'].includes(value)
}, },
liked: Boolean, liked: Boolean,
likes: Number,
anonymous: Boolean, anonymous: Boolean,
isPublic: Boolean // `public` is a reserved keyword isPublic: Boolean // `public` is a reserved keyword
}, },

7
resources/assets/tests/components/skinlib/List.test.js
View File

@ -172,10 +172,15 @@ test('on page changed', () => {
test('on like toggled', async () => { test('on like toggled', async () => {
Vue.prototype.$http.get.mockResolvedValue({ Vue.prototype.$http.get.mockResolvedValue({
items: [{ tid: 1, liked: false }], total_pages: 1, current_uid: 0 items: [{ tid: 1, liked: false, likes: 0 }], total_pages: 1, current_uid: 0
}); });
const wrapper = mount(List); const wrapper = mount(List);
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
wrapper.vm.onLikeToggled(0, true); wrapper.vm.onLikeToggled(0, true);
expect(wrapper.vm.items[0].liked).toBeTrue(); expect(wrapper.vm.items[0].liked).toBeTrue();
expect(wrapper.vm.items[0].likes).toBe(1);
wrapper.vm.onLikeToggled(0, false);
expect(wrapper.vm.items[0].liked).toBeFalse();
expect(wrapper.vm.items[0].likes).toBe(0);
}); });