aboutsummaryrefslogtreecommitdiff
path: root/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
blob: ed4b15a49e2ebc95cfd9ab1ceebe703bbfa0faa7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<template>
  <tab-switcher
    :scrollable-tabs="true"
    class="mutes-and-blocks-tab"
  >
    <div :label="$t('settings.blocks_tab')">
      <div class="usersearch-wrapper">
        <Autosuggest
          :filter="filterUnblockedUsers"
          :query="queryUserIds"
          :placeholder="$t('settings.search_user_to_block')"
        >
          <template #default="row">
            <BlockCard
              :user-id="row.item"
            />
          </template>
        </Autosuggest>
      </div>
      <BlockList
        :refresh="true"
        :get-key="i => i"
      >
        <template #header="{selected}">
          <div class="bulk-actions">
            <ProgressButton
              v-if="selected.length > 0"
              class="btn button-default bulk-action-button"
              :click="() => blockUsers(selected)"
            >
              {{ $t('user_card.block') }}
              <template #progress>
                {{ $t('user_card.block_progress') }}
              </template>
            </ProgressButton>
            <ProgressButton
              v-if="selected.length > 0"
              class="btn button-default"
              :click="() => unblockUsers(selected)"
            >
              {{ $t('user_card.unblock') }}
              <template #progress>
                {{ $t('user_card.unblock_progress') }}
              </template>
            </ProgressButton>
          </div>
        </template>
        <template #item="{item}">
          <BlockCard :user-id="item" />
        </template>
        <template #empty>
          {{ $t('settings.no_blocks') }}
        </template>
      </BlockList>
    </div>

    <div :label="$t('settings.mutes_tab')">
      <tab-switcher>
        <div :label="$t('settings.user_mutes')">
          <div class="usersearch-wrapper">
            <Autosuggest
              :filter="filterUnMutedUsers"
              :query="queryUserIds"
              :placeholder="$t('settings.search_user_to_mute')"
            >
              <template #default="row">
                <MuteCard
                  :user-id="row.item"
                />
              </template>
            </Autosuggest>
          </div>
          <MuteList
            :refresh="true"
            :get-key="i => i"
          >
            <template #header="{selected}">
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
                  class="btn button-default"
                  :click="() => muteUsers(selected)"
                >
                  {{ $t('user_card.mute') }}
                  <template #progress>
                    {{ $t('user_card.mute_progress') }}
                  </template>
                </ProgressButton>
                <ProgressButton
                  v-if="selected.length > 0"
                  class="btn button-default"
                  :click="() => unmuteUsers(selected)"
                >
                  {{ $t('user_card.unmute') }}
                  <template #progress>
                    {{ $t('user_card.unmute_progress') }}
                  </template>
                </ProgressButton>
              </div>
            </template>
            <template #item="{item}">
              <MuteCard :user-id="item" />
            </template>
            <template #empty>
              {{ $t('settings.no_mutes') }}
            </template>
          </MuteList>
        </div>

        <div :label="$t('settings.domain_mutes')">
          <div class="domain-mute-form">
            <Autosuggest
              :filter="filterUnMutedDomains"
              :query="queryKnownDomains"
              :placeholder="$t('settings.type_domains_to_mute')"
            >
              <template #default="row">
                <DomainMuteCard
                  :domain="row.item"
                />
              </template>
            </Autosuggest>
          </div>
          <DomainMuteList
            :refresh="true"
            :get-key="i => i"
          >
            <template #header="{selected}">
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
                  class="btn button-default"
                  :click="() => unmuteDomains(selected)"
                >
                  {{ $t('domain_mute_card.unmute') }}
                  <template #progress>
                    {{ $t('domain_mute_card.unmute_progress') }}
                  </template>
                </ProgressButton>
              </div>
            </template>
            <template #item="{item}">
              <DomainMuteCard :domain="item" />
            </template>
            <template #empty>
              {{ $t('settings.no_mutes') }}
            </template>
          </DomainMuteList>
        </div>
      </tab-switcher>
    </div>
  </tab-switcher>
</template>

<script src="./mutes_and_blocks_tab.js"></script>
<style lang="scss" src="./mutes_and_blocks_tab.scss"></style>