Sharkey/src/client/app/desktop/views/pages/user/user.profile.vue

163 lines
3.6 KiB
Vue
Raw Normal View History

2018-02-14 17:32:13 +02:00
<template>
<div class="profile" v-if="$store.getters.isSignedIn">
<div class="friend-form" v-if="$store.state.i.id != user.id">
2018-11-13 09:19:46 +02:00
<mk-follow-button :user="user" block/>
<p class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</p>
2018-04-26 10:10:01 +03:00
<p class="stalk" v-if="user.isFollowing">
2018-11-09 17:30:58 +02:00
<span v-if="user.isStalking">{{ $t('stalking') }} <a @click="unstalk"><fa icon="meh"/> {{ $t('unstalk') }}</a></span>
<span v-if="!user.isStalking"><a @click="stalk"><fa icon="user-secret"/> {{ $t('stalk') }}</a></span>
2018-04-19 06:43:25 +03:00
</p>
2018-02-14 17:32:13 +02:00
</div>
2018-04-26 10:10:01 +03:00
<div class="action-form">
2018-10-20 09:37:17 +03:00
<ui-button @click="user.isMuted ? unmute() : mute()" v-if="$store.state.i.id != user.id">
<span v-if="user.isMuted"><fa icon="eye"/> {{ $t('unmute') }}</span>
<span v-else><fa :icon="['far', 'eye-slash']"/> {{ $t('mute') }}</span>
2018-10-20 09:37:17 +03:00
</ui-button>
<ui-button @click="user.isBlocking ? unblock() : block()" v-if="$store.state.i.id != user.id">
2018-11-14 11:03:38 +02:00
<span v-if="user.isBlocking"><fa icon="ban"/> {{ $t('unblock') }}</span>
<span v-else><fa icon="ban"/> {{ $t('block') }}</span>
</ui-button>
<ui-button @click="list"><fa icon="list"/> {{ $t('push-to-a-list') }}</ui-button>
2018-04-26 10:10:01 +03:00
</div>
2018-02-14 17:32:13 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
2018-04-26 10:10:01 +03:00
import MkUserListsWindow from '../../components/user-lists-window.vue';
2018-02-14 17:32:13 +02:00
export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.profile.vue'),
2018-02-14 17:32:13 +02:00
props: ['user'],
2018-06-23 17:18:39 +03:00
methods: {
2018-04-19 06:43:25 +03:00
stalk() {
2018-11-09 01:13:34 +02:00
this.$root.api('following/stalk', {
2018-04-19 06:43:25 +03:00
userId: this.user.id
}).then(() => {
this.user.isStalking = true;
}, () => {
alert('error');
});
},
unstalk() {
2018-11-09 01:13:34 +02:00
this.$root.api('following/unstalk', {
2018-04-19 06:43:25 +03:00
userId: this.user.id
}).then(() => {
this.user.isStalking = false;
}, () => {
alert('error');
});
},
2018-02-14 17:32:13 +02:00
mute() {
2018-11-09 01:13:34 +02:00
this.$root.api('mute/create', {
2018-03-29 08:48:47 +03:00
userId: this.user.id
2018-02-14 17:32:13 +02:00
}).then(() => {
2018-03-29 08:48:47 +03:00
this.user.isMuted = true;
2018-02-19 16:37:09 +02:00
}, () => {
2018-02-14 17:32:13 +02:00
alert('error');
});
},
unmute() {
2018-11-09 01:13:34 +02:00
this.$root.api('mute/delete', {
2018-03-29 08:48:47 +03:00
userId: this.user.id
2018-02-14 17:32:13 +02:00
}).then(() => {
2018-03-29 08:48:47 +03:00
this.user.isMuted = false;
2018-02-19 16:37:09 +02:00
}, () => {
2018-02-14 17:32:13 +02:00
alert('error');
});
2018-04-26 10:10:01 +03:00
},
block() {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 13:36:15 +02:00
type: 'warning',
text: this.$t('block-confirm'),
showCancelButton: true
2018-12-02 13:10:53 +02:00
}).then(({ canceled }) => {
if (canceled) return;
2018-11-14 13:36:15 +02:00
this.$root.api('blocking/create', {
userId: this.user.id
}).then(() => {
this.user.isBlocking = true;
}, () => {
alert('error');
});
});
},
unblock() {
2018-11-09 01:13:34 +02:00
this.$root.api('blocking/delete', {
userId: this.user.id
}).then(() => {
this.user.isBlocking = false;
}, () => {
alert('error');
});
},
2018-04-26 10:10:01 +03:00
list() {
2018-11-09 01:13:34 +02:00
const w = this.$root.new(MkUserListsWindow);
2018-04-26 10:10:01 +03:00
w.$once('choosen', async list => {
w.close();
2018-11-09 01:13:34 +02:00
await this.$root.api('users/lists/push', {
2018-04-26 10:10:01 +03:00
listId: list.id,
userId: this.user.id
});
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-12-02 08:26:56 +02:00
type: 'success',
2018-04-26 10:10:01 +03:00
title: 'Done!',
2018-12-02 08:26:56 +02:00
text: this.$t('list-pushed', {
user: this.user.name,
list: list.title
})
2018-04-26 10:10:01 +03:00
});
});
2018-02-14 17:32:13 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 08:26:20 +03:00
.profile
2018-09-26 14:28:13 +03:00
background var(--face)
2018-09-22 14:39:12 +03:00
box-shadow var(--shadow)
border-radius var(--round)
2018-02-14 17:32:13 +02:00
> *:first-child
border-top none !important
> .friend-form
padding 16px
2018-04-26 10:10:01 +03:00
text-align center
2018-09-28 08:26:20 +03:00
border-bottom solid 1px var(--faceDivider)
2018-02-14 17:32:13 +02:00
> .followed
margin 12px 0 0 0
padding 0
text-align center
line-height 24px
font-size 0.8em
color #71afc7
background #eefaff
border-radius 4px
2018-04-26 10:10:01 +03:00
> .stalk
margin 12px 0 0 0
> .action-form
padding 16px
text-align center
> *
width 100%
&:not(:last-child)
margin-bottom 12px
2018-02-14 17:32:13 +02:00
</style>