|
1 | 1 | <template> |
2 | 2 |
|
3 | 3 | <div> |
4 | | - <ConfirmationDialog |
5 | | - v-model="restoreDialog" |
6 | | - title="Restore channel" |
7 | | - :text="`Are you sure you want to restore ${name} and make it active again?`" |
8 | | - data-test="confirm-restore" |
9 | | - confirmButtonText="Restore" |
10 | | - @confirm="restoreHandler" |
11 | | - /> |
| 4 | + <KModal |
| 5 | + v-if="activeDialog" |
| 6 | + :title="dialogConfig.title" |
| 7 | + :submitText="dialogConfig.submitText" |
| 8 | + cancelText="Cancel" |
| 9 | + data-test="confirm-dialog" |
| 10 | + :submitDisabled="dialogConfig.submitDisabled" |
| 11 | + @submit="handleSubmit" |
| 12 | + @cancel="activeDialog = null" |
| 13 | + > |
| 14 | + <p>{{ dialogConfig.message }}</p> |
| 15 | + <StudioBanner |
| 16 | + v-if="dialogConfig.errorMessage" |
| 17 | + error |
| 18 | + > |
| 19 | + {{ dialogConfig.errorMessage }} |
| 20 | + </StudioBanner> |
| 21 | + </KModal> |
12 | 22 |
|
13 | | - <ConfirmationDialog |
14 | | - v-model="makePublicDialog" |
15 | | - title="Make channel public" |
16 | | - :text="`All users will be able to view and import content from ${name}.`" |
17 | | - :error-text="communityChannelErrorMessage" |
18 | | - :disable-submit="isCommunityChannel" |
19 | | - data-test="confirm-public" |
20 | | - confirmButtonText="Make public" |
21 | | - @confirm="makePublicHandler" |
22 | | - /> |
23 | | - <ConfirmationDialog |
24 | | - v-model="makePrivateDialog" |
25 | | - title="Make channel private" |
26 | | - :text="`Only users with view-only or edit permissions will be able to access ${name}.`" |
27 | | - data-test="confirm-private" |
28 | | - confirmButtonText="Make private" |
29 | | - @confirm="makePrivateHandler" |
30 | | - /> |
31 | | - <ConfirmationDialog |
32 | | - v-model="deleteDialog" |
33 | | - title="Permanently delete channel" |
34 | | - :text="`Are you sure you want to permanently delete ${name}? This can not be undone.`" |
35 | | - data-test="confirm-delete" |
36 | | - confirmButtonText="Delete permanently" |
37 | | - @confirm="deleteHandler" |
38 | | - /> |
39 | | - <ConfirmationDialog |
40 | | - v-model="softDeleteDialog" |
41 | | - title="Permanently delete channel" |
42 | | - :text="`Are you sure you want to delete ${name}?`" |
43 | | - data-test="confirm-softdelete" |
44 | | - confirmButtonText="Delete" |
45 | | - @confirm="softDeleteHandler" |
46 | | - /> |
47 | 23 | <BaseMenu> |
48 | 24 | <template #activator="{ on }"> |
49 | 25 | <VBtn |
50 | 26 | v-bind="$attrs" |
51 | 27 | v-on="on" |
52 | 28 | > |
53 | | - actions |
| 29 | + Actions |
54 | 30 | <Icon |
55 | 31 | icon="dropdown" |
56 | 32 | class="ml-1" |
|
61 | 37 | <template v-if="channel.deleted"> |
62 | 38 | <VListTile |
63 | 39 | data-test="restore" |
64 | | - @click="restoreDialog = true" |
| 40 | + @click="openDialog('restore')" |
65 | 41 | > |
66 | 42 | <VListTileTitle>Restore</VListTileTitle> |
67 | 43 | </VListTile> |
68 | 44 | <VListTile |
69 | 45 | data-test="delete" |
70 | | - @click="deleteDialog = true" |
| 46 | + @click="openDialog('permanentDelete')" |
71 | 47 | > |
72 | 48 | <VListTileTitle>Delete permanently</VListTileTitle> |
73 | 49 | </VListTile> |
|
94 | 70 | <VListTile |
95 | 71 | v-if="channel.public" |
96 | 72 | data-test="private" |
97 | | - @click="makePrivateDialog = true" |
| 73 | + @click="openDialog('makePrivate')" |
98 | 74 | > |
99 | 75 | <VListTileTitle>Make private</VListTileTitle> |
100 | 76 | </VListTile> |
101 | 77 | <VListTile |
102 | 78 | v-else |
103 | 79 | data-test="public" |
104 | | - @click="makePublicDialog = true" |
| 80 | + @click="openDialog('makePublic')" |
105 | 81 | > |
106 | 82 | <VListTileTitle>Make public</VListTileTitle> |
107 | 83 | </VListTile> |
108 | 84 | <VListTile |
109 | 85 | v-if="!channel.public" |
110 | 86 | data-test="softdelete" |
111 | | - @click="softDeleteDialog = true" |
| 87 | + @click="openDialog('softDelete')" |
112 | 88 | > |
113 | 89 | <VListTileTitle>Delete channel</VListTileTitle> |
114 | 90 | </VListTile> |
|
123 | 99 | <script> |
124 | 100 |
|
125 | 101 | import { mapActions, mapGetters } from 'vuex'; |
126 | | - import ConfirmationDialog from '../../components/ConfirmationDialog'; |
127 | 102 | import { RouteNames } from '../../constants'; |
128 | 103 | import { channelExportMixin } from 'shared/views/channel/mixins'; |
129 | 104 | import { CommunityLibraryStatus } from 'shared/constants'; |
| 105 | + import StudioBanner from 'shared/views/StudioBanner'; |
130 | 106 |
|
131 | 107 | export default { |
132 | 108 | name: 'ChannelActionsDropdown', |
133 | 109 | components: { |
134 | | - ConfirmationDialog, |
| 110 | + StudioBanner, |
135 | 111 | }, |
136 | 112 | mixins: [channelExportMixin], |
137 | 113 | props: { |
|
141 | 117 | }, |
142 | 118 | }, |
143 | 119 | data: () => ({ |
144 | | - deleteDialog: false, |
145 | | - makePublicDialog: false, |
146 | | - makePrivateDialog: false, |
147 | | - restoreDialog: false, |
148 | | - softDeleteDialog: false, |
| 120 | + activeDialog: null, |
149 | 121 | }), |
150 | 122 | computed: { |
151 | 123 | ...mapGetters('channel', ['getChannel']), |
|
163 | 135 | }, |
164 | 136 | }; |
165 | 137 | }, |
| 138 | + dialogConfig() { |
| 139 | + const configs = { |
| 140 | + restore: { |
| 141 | + title: 'Restore channel', |
| 142 | + submitText: 'Restore', |
| 143 | + message: `Are you sure you want to restore ${this.name} and make it active again?`, |
| 144 | + handler: this.restoreHandler, |
| 145 | + }, |
| 146 | + makePublic: { |
| 147 | + title: 'Make channel public', |
| 148 | + submitText: 'Make public', |
| 149 | + message: `All users will be able to view and import content from ${this.name}.`, |
| 150 | + handler: this.makePublicHandler, |
| 151 | + errorMessage: this.communityChannelErrorMessage, |
| 152 | + submitDisabled: this.isCommunityChannel, |
| 153 | + }, |
| 154 | + makePrivate: { |
| 155 | + title: 'Make channel private', |
| 156 | + submitText: 'Make private', |
| 157 | + message: `Only users with view-only or edit permissions will be able to access ${this.name}.`, |
| 158 | + handler: this.makePrivateHandler, |
| 159 | + }, |
| 160 | + permanentDelete: { |
| 161 | + title: 'Permanently delete channel', |
| 162 | + submitText: 'Delete permanently', |
| 163 | + message: `Are you sure you want to permanently delete ${this.name}? This can not be undone.`, |
| 164 | + handler: this.deleteHandler, |
| 165 | + }, |
| 166 | + softDelete: { |
| 167 | + title: 'Delete channel', |
| 168 | + submitText: 'Delete', |
| 169 | + message: `Are you sure you want to delete ${this.name}?`, |
| 170 | + handler: this.softDeleteHandler, |
| 171 | + }, |
| 172 | + }; |
| 173 | + return configs[this.activeDialog] || {}; |
| 174 | + }, |
166 | 175 | isCommunityChannel() { |
167 | 176 | const status = this.channel.latest_community_library_submission_status; |
168 | 177 | return status === CommunityLibraryStatus.APPROVED || status === CommunityLibraryStatus.LIVE; |
|
180 | 189 | 'deleteChannel', |
181 | 190 | 'updateChannel', |
182 | 191 | ]), |
| 192 | + openDialog(type) { |
| 193 | + this.activeDialog = type; |
| 194 | + }, |
| 195 | + handleSubmit() { |
| 196 | + if (this.dialogConfig.handler) { |
| 197 | + this.dialogConfig.handler(); |
| 198 | + } |
| 199 | + this.activeDialog = null; |
| 200 | + }, |
183 | 201 | async downloadPDF() { |
184 | 202 | this.$store.dispatch('showSnackbarSimple', 'Generating PDF...'); |
185 | 203 | const channelList = await this.getAdminChannelListDetails([this.channel.id]); |
|
191 | 209 | return this.generateChannelsCSV(channelList); |
192 | 210 | }, |
193 | 211 | restoreHandler() { |
194 | | - this.restoreDialog = false; |
195 | 212 | this.updateChannel({ |
196 | 213 | id: this.channelId, |
197 | 214 | deleted: false, |
|
200 | 217 | }); |
201 | 218 | }, |
202 | 219 | softDeleteHandler() { |
203 | | - this.softDeleteDialog = false; |
204 | 220 | this.updateChannel({ |
205 | 221 | id: this.channelId, |
206 | 222 | deleted: true, |
|
209 | 225 | }); |
210 | 226 | }, |
211 | 227 | deleteHandler() { |
212 | | - this.deleteDialog = false; |
213 | 228 | this.$emit('deleted'); |
214 | 229 | return this.deleteChannel(this.channelId).then(() => { |
215 | 230 | this.$store.dispatch('showSnackbarSimple', 'Channel deleted permanently'); |
216 | 231 | }); |
217 | 232 | }, |
218 | 233 | makePublicHandler() { |
219 | | - this.makePublicDialog = false; |
220 | 234 | this.updateChannel({ |
221 | 235 | id: this.channelId, |
222 | 236 | isPublic: true, |
|
225 | 239 | }); |
226 | 240 | }, |
227 | 241 | makePrivateHandler() { |
228 | | - this.makePrivateDialog = false; |
229 | 242 | this.updateChannel({ |
230 | 243 | id: this.channelId, |
231 | 244 | isPublic: false, |
|
0 commit comments