Merge branch '227-manage-blocks-mutes' into 'develop'

Add Blocks / Mutes management tabs under user settings page

See merge request pleroma/pleroma-fe!578

src/components/basic_user_card/basic_user_card.js

@@ -0,0 +1,28 @@
+import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
+const BasicUserCard = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  components: {
+    UserCardContent,
+    UserAvatar
+  },
+  methods: {
+    toggleUserExpanded () {
+      this.userExpanded = !this.userExpanded
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    }
+  }
+}
+
+export default BasicUserCard

src/components/basic_user_card/basic_user_card.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="user-card">
+    <router-link :to="userProfileLink(user)">
+      <UserAvatar class="avatar" :compact="true" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
+    </router-link>
+    <div class="user-card-expanded-content" v-if="userExpanded">
+      <user-card-content :user="user" :switcher="false"></user-card-content>
+    </div>
+    <div class="user-card-collapsed-content" v-else>
+      <div class="user-card-primary-area">
+        <div :title="user.name" class="user-name">
+          <span v-if="user.name_html" v-html="user.name_html"></span>
+          <span v-else>{{ user.name }}</span>
+        </div>
+        <div>
+          <router-link class='user-screen-name' :to="userProfileLink(user)">
+            @{{user.screen_name}}
+          </router-link>
+        </div>
+      </div>
+      <div class="user-card-secondary-area">
+        <slot name="secondary-area"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./basic_user_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.user-card {
+  display: flex;
+  flex: 1 0;
+  padding-top: 0.6em;
+  padding-right: 1em;
+  padding-bottom: 0.6em;
+  padding-left: 1em;
+  border-bottom: 1px solid;
+  margin: 0;
+  border-bottom-color: $fallback--border;
+  border-bottom-color: var(--border, $fallback--border);
+
+  &-collapsed-content {
+    margin-left: 0.7em;
+    text-align: left;
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &-primary-area {
+    flex: 1;
+    .user-name {
+      img {
+        object-fit: contain;
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &-secondary-area {
+    flex: none;
+  }
+
+  &-expanded-content {
+    flex: 1;
+    margin: 0.2em 0 0 0.7em;
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-style: solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-width: 1px;
+    overflow: hidden;
+
+    .panel-heading {
+      background: transparent;
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

src/components/block_card/block_card.js

@@ -0,0 +1,37 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const BlockCard = {
+  props: ['userId'],
+  data () {
+    return {
+      progress: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.userById(this.userId)
+    },
+    blocked () {
+      return this.user.statusnet_blocking
+    }
+  },
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    unblockUser () {
+      this.progress = true
+      this.$store.dispatch('unblockUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    },
+    blockUser () {
+      this.progress = true
+      this.$store.dispatch('blockUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    }
+  }
+}
+
+export default BlockCard

src/components/block_card/block_card.vue

@@ -0,0 +1,24 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
+        <template v-if="progress">
+          {{ $t('user_card.unblock_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.unblock') }}
+        </template>
+      </button>
+      <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
+        <template v-if="progress">
+          {{ $t('user_card.block_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.block') }}
+        </template>
+      </button>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./block_card.js"></script>

src/components/mute_card/mute_card.js

@@ -0,0 +1,37 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const MuteCard = {
+  props: ['userId'],
+  data () {
+    return {
+      progress: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.userById(this.userId)
+    },
+    muted () {
+      return this.user.muted
+    }
+  },
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    unmuteUser () {
+      this.progress = true
+      this.$store.dispatch('unmuteUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    },
+    muteUser () {
+      this.progress = true
+      this.$store.dispatch('muteUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    }
+  }
+}
+
+export default MuteCard

src/components/mute_card/mute_card.vue

@@ -0,0 +1,24 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
+        <template v-if="progress">
+          {{ $t('user_card.unmute_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.unmute') }}
+        </template>
+      </button>
+      <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else>
+        <template v-if="progress">
+          {{ $t('user_card.mute_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.mute') }}
+        </template>
+      </button>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./mute_card.js"></script>

src/components/user_settings/user_settings.js

@@ -1,9 +1,33 @@
-import { unescape } from 'lodash'
+import { compose } from 'vue-compose'
+import unescape from 'lodash/unescape'
+import get from 'lodash/get'
 
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
+import BlockCard from '../block_card/block_card.vue'
+import MuteCard from '../mute_card/mute_card.vue'
+import withSubscription from '../../hocs/with_subscription/with_subscription'
+import withList from '../../hocs/with_list/with_list'
+
+const BlockList = compose(
+  withSubscription({
+    fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+    select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+    childPropName: 'entries'
+  }),
+  withList({ getEntryProps: userId => ({ userId }) })
+)(BlockCard)
+
+const MuteList = compose(
+  withSubscription({
+    fetch: (props, $store) => $store.dispatch('fetchMutes'),
+    select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+    childPropName: 'entries'
+  }),
+  withList({ getEntryProps: userId => ({ userId }) })
+)(MuteCard)
 
 const UserSettings = {
   data () {
@@ -41,7 +65,9 @@ const UserSettings = {
   components: {
     StyleSwitcher,
     TabSwitcher,
-    ImageCropper
+    ImageCropper,
+    BlockList,
+    MuteList
   },
   computed: {
     user () {

src/components/user_settings/user_settings.vue

@@ -162,6 +162,12 @@
             <h2>{{$t('settings.follow_export_processing')}}</h2>
           </div>
         </div>
+
+        <div :label="$t('settings.blocks_tab')">
+          <block-list :refresh="true">
+            <template slot="empty">{{$t('settings.no_blocks')}}</template>
+          </block-list>
+        </div>
       </tab-switcher>
     </div>
   </div>