feat: Adds the ability to delete a portal (#5305)
This commit is contained in:
parent
6e945dd61e
commit
f4fc53b425
19 changed files with 158 additions and 48 deletions
|
@ -9,6 +9,10 @@ class PortalsAPI extends ApiClient {
|
|||
updatePortal({ portalSlug, params }) {
|
||||
return axios.patch(`${this.url}/${portalSlug}`, params);
|
||||
}
|
||||
|
||||
deletePortal(portalSlug) {
|
||||
return axios.delete(`${this.url}/${portalSlug}`);
|
||||
}
|
||||
}
|
||||
|
||||
export default PortalsAPI;
|
||||
|
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
.modal-footer {
|
||||
@include flex;
|
||||
@include flex-align($x: flex-start, $y: middle);
|
||||
@include flex-align($x: flex-end, $y: middle);
|
||||
padding: $space-small $zero;
|
||||
|
||||
button {
|
||||
|
|
|
@ -6,6 +6,9 @@
|
|||
</h2>
|
||||
<p v-if="headerContent" class="small-12 column wrap-content">
|
||||
{{ headerContent }}
|
||||
<span v-if="headerContentValue" class="content-value">
|
||||
{{ headerContentValue }}
|
||||
</span>
|
||||
</p>
|
||||
<slot />
|
||||
</div>
|
||||
|
@ -22,6 +25,10 @@ export default {
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
headerContentValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
headerImage: {
|
||||
type: String,
|
||||
default: '',
|
||||
|
@ -32,5 +39,8 @@ export default {
|
|||
<style scoped lang="scss">
|
||||
.wrap-content {
|
||||
word-wrap: break-word;
|
||||
.content-value {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,9 +5,10 @@
|
|||
{{ $t(`SIDEBAR.${menuItem.label}`) }}
|
||||
</span>
|
||||
<div v-if="isHelpCenterSidebar" class="submenu-icons">
|
||||
<!-- Hidden since this is in V2
|
||||
<div class="submenu-icon">
|
||||
<fluent-icon icon="search" size="16" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="submenu-icon" @click="onClickOpen">
|
||||
<fluent-icon icon="add" size="16" />
|
||||
</div>
|
||||
|
|
|
@ -14,7 +14,9 @@
|
|||
:icon="icon"
|
||||
:icon-size="iconSize"
|
||||
/>
|
||||
<span v-if="$slots.default" class="button__content"><slot /></span>
|
||||
<span v-if="$slots.default" class="button__content">
|
||||
<slot />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
@ -1,13 +1,22 @@
|
|||
<template>
|
||||
<modal :show.sync="show" :on-close="onClose">
|
||||
<woot-modal-header :header-title="title" :header-content="message" />
|
||||
<woot-modal-header
|
||||
:header-title="title"
|
||||
:header-content="message"
|
||||
:header-content-value="messageValue"
|
||||
/>
|
||||
<div class="modal-footer delete-item">
|
||||
<button class="alert button nice text-truncate" @click="onConfirm">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
<button class="button clear text-truncate" @click="onClose">
|
||||
<woot-button variant="clear" class="action-button" @click="onClose">
|
||||
{{ rejectText }}
|
||||
</button>
|
||||
</woot-button>
|
||||
<woot-button
|
||||
color-scheme="alert"
|
||||
class="action-button"
|
||||
variant="smooth"
|
||||
@click="onConfirm"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
@ -25,8 +34,14 @@ export default {
|
|||
onConfirm: { type: Function, default: () => {} },
|
||||
title: { type: String, default: '' },
|
||||
message: { type: String, default: '' },
|
||||
messageValue: { type: String, default: '' },
|
||||
confirmText: { type: String, default: '' },
|
||||
rejectText: { type: String, default: '' },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.action-button {
|
||||
max-width: var(--space-giga);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -84,7 +84,8 @@
|
|||
"COUNT_LABEL": "articles",
|
||||
"ADD": "Add locale",
|
||||
"VISIT": "Visit site",
|
||||
"SETTINGS": "Settings"
|
||||
"SETTINGS": "Settings",
|
||||
"DELETE": "Delete"
|
||||
},
|
||||
"PORTAL_CONFIG": {
|
||||
"TITLE": "Portal Configurations",
|
||||
|
@ -109,6 +110,16 @@
|
|||
"DEFAULT_LOCALE": "Default"
|
||||
}
|
||||
}
|
||||
},
|
||||
"DELETE_PORTAL": {
|
||||
"TITLE": "Delete portal",
|
||||
"MESSAGE": "Are you sure you want to delete this portal",
|
||||
"YES": "Yes, delete portal",
|
||||
"NO": "No, keep portal",
|
||||
"API": {
|
||||
"DELETE_SUCCESS": "Portal deleted successfully",
|
||||
"DELETE_ERROR": "Error while deleting portal"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ADD": {
|
||||
|
|
|
@ -131,7 +131,8 @@
|
|||
:on-close="closeDelete"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
|
||||
:message="confirmDeleteMessage"
|
||||
:message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
|
||||
:message-value="confirmDeleteMessage"
|
||||
:confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
|
||||
:reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
|
||||
/>
|
||||
|
@ -215,9 +216,7 @@ export default {
|
|||
},
|
||||
// Delete Modal
|
||||
confirmDeleteMessage() {
|
||||
return `${this.$t('DELETE_CONTACT.CONFIRM.MESSAGE')} ${
|
||||
this.contact.name
|
||||
} ?`;
|
||||
return ` ${this.contact.name}?`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
:on-close="closeDeletePopup"
|
||||
:on-confirm="deleteSavedCustomViews"
|
||||
:title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"
|
||||
:message="deleteMessage"
|
||||
:message="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE')"
|
||||
:message-value="deleteMessage"
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
|
@ -51,9 +52,7 @@ export default {
|
|||
return '';
|
||||
},
|
||||
deleteMessage() {
|
||||
return `${this.$t(
|
||||
'FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE'
|
||||
)} ${this.activeCustomView && this.activeCustomView.name} ?`;
|
||||
return ` ${this.activeCustomView && this.activeCustomView.name}?`;
|
||||
},
|
||||
deleteConfirmText() {
|
||||
return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.YES')}`;
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
>
|
||||
{{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
|
||||
</woot-button>
|
||||
<!-- Hidden since this is in V2
|
||||
<woot-button
|
||||
class-names="article--buttons"
|
||||
icon="add"
|
||||
|
@ -35,7 +36,7 @@
|
|||
@click="onClickAdd"
|
||||
>
|
||||
{{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
|
||||
</woot-button>
|
||||
</woot-button> -->
|
||||
<woot-button
|
||||
v-if="!isSidebarOpen"
|
||||
v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
|
||||
|
|
|
@ -6,7 +6,9 @@
|
|||
<header>
|
||||
<div>
|
||||
<div class="title-status--wrap">
|
||||
<h2 class="portal-title block-title">{{ portal.name }}</h2>
|
||||
<h2 class="portal-title block-title">
|
||||
{{ portal.name }}
|
||||
</h2>
|
||||
<Label
|
||||
:title="status"
|
||||
:color-scheme="labelColor"
|
||||
|
@ -59,6 +61,17 @@
|
|||
color-scheme="secondary"
|
||||
@click="openSettings"
|
||||
/>
|
||||
<woot-button
|
||||
v-tooltip.top-end="
|
||||
$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.DELETE')
|
||||
"
|
||||
variant="hollow"
|
||||
color-scheme="alert"
|
||||
size="small"
|
||||
icon="delete"
|
||||
class="header-action-buttons"
|
||||
@click="onClickOpenDeleteModal(portal)"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<div class="portal-locales">
|
||||
|
@ -77,7 +90,9 @@
|
|||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">{{ portal.name }}</span>
|
||||
<span class="text-block-title">
|
||||
{{ portal.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="configuration-item">
|
||||
<label>{{
|
||||
|
@ -85,7 +100,9 @@
|
|||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">{{ portal.custom_domain }}</span>
|
||||
<span class="text-block-title">
|
||||
{{ portal.custom_domain }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="configuration-items">
|
||||
|
@ -95,7 +112,9 @@
|
|||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">{{ portal.slug }}</span>
|
||||
<span class="text-block-title">
|
||||
{{ portal.slug }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="configuration-item">
|
||||
<label>{{
|
||||
|
@ -103,7 +122,9 @@
|
|||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">{{ portal.page_title }}</span>
|
||||
<span class="text-block-title">
|
||||
{{ portal.page_title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="configuration-items">
|
||||
|
@ -126,7 +147,9 @@
|
|||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
|
||||
)
|
||||
}}</label>
|
||||
<span class="text-block-title">{{ portal.header_text }}</span>
|
||||
<span class="text-block-title">
|
||||
{{ portal.header_text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -148,6 +171,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeleteConfirmationPopup"
|
||||
:on-close="closeDeletePopup"
|
||||
:on-confirm="onClickDeletePortal"
|
||||
:title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"
|
||||
:message="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.MESSAGE')"
|
||||
:message-value="deleteMessageValue"
|
||||
:confirm-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.YES')"
|
||||
:reject-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.NO')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -155,12 +188,14 @@
|
|||
import thumbnail from 'dashboard/components/widgets/Thumbnail';
|
||||
import Label from 'dashboard/components/ui/Label';
|
||||
import LocaleItemTable from './PortalListItemTable';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
export default {
|
||||
components: {
|
||||
thumbnail,
|
||||
Label,
|
||||
LocaleItemTable,
|
||||
},
|
||||
mixins: [alertMixin],
|
||||
props: {
|
||||
portal: {
|
||||
type: Object,
|
||||
|
@ -172,6 +207,13 @@ export default {
|
|||
values: ['archived', 'draft', 'published'],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDeleteConfirmationPopup: false,
|
||||
alertMessage: '',
|
||||
selectedPortalForDelete: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
labelColor() {
|
||||
switch (this.status) {
|
||||
|
@ -181,6 +223,10 @@ export default {
|
|||
return 'success';
|
||||
}
|
||||
},
|
||||
// Delete portal modal
|
||||
deleteMessageValue() {
|
||||
return ` ${this.selectedPortalForDelete.name}?`;
|
||||
},
|
||||
|
||||
locales() {
|
||||
return this.portal ? this.portal.config.allowed_locales : [];
|
||||
|
@ -196,6 +242,34 @@ export default {
|
|||
openSettings() {
|
||||
this.navigateToPortalEdit();
|
||||
},
|
||||
onClickOpenDeleteModal(portal) {
|
||||
this.selectedPortalForDelete = portal;
|
||||
this.showDeleteConfirmationPopup = true;
|
||||
},
|
||||
closeDeletePopup() {
|
||||
this.showDeleteConfirmationPopup = false;
|
||||
},
|
||||
async onClickDeletePortal() {
|
||||
const { slug } = this.selectedPortalForDelete;
|
||||
try {
|
||||
await this.$store.dispatch('portals/delete', {
|
||||
portalSlug: slug,
|
||||
});
|
||||
this.selectedPortalForDelete = {};
|
||||
this.closeDeletePopup();
|
||||
this.alertMessage = this.$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
|
||||
);
|
||||
} catch (error) {
|
||||
this.alertMessage =
|
||||
error?.message ||
|
||||
this.$t(
|
||||
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
|
||||
);
|
||||
} finally {
|
||||
this.showAlert(this.alertMessage);
|
||||
}
|
||||
},
|
||||
swapLocale() {
|
||||
this.$emit('swap');
|
||||
},
|
||||
|
|
|
@ -33,6 +33,7 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import PortalListItem from '../../components/PortalListItem';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
import EmptyState from 'dashboard/components/widgets/EmptyState';
|
||||
|
@ -44,6 +45,7 @@ export default {
|
|||
Spinner,
|
||||
AddPortal,
|
||||
},
|
||||
mixins: [alertMixin],
|
||||
data() {
|
||||
return {
|
||||
isAddModalOpen: false,
|
||||
|
|
|
@ -120,9 +120,6 @@ export default {
|
|||
allowed_locales: ['en'],
|
||||
},
|
||||
});
|
||||
this.alertMessage = this.$t(
|
||||
'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
|
||||
);
|
||||
} catch (error) {
|
||||
this.alertMessage =
|
||||
error?.message ||
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
</label>
|
||||
<div class="logo-container">
|
||||
<thumbnail :username="name" size="56" variant="square" />
|
||||
<!-- Hidden since this is in V2
|
||||
<woot-button
|
||||
class="upload-button"
|
||||
variant="smooth"
|
||||
|
@ -25,7 +26,7 @@
|
|||
size="small"
|
||||
>
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD.LOGO.UPLOAD_BUTTON') }}
|
||||
</woot-button>
|
||||
</woot-button> -->
|
||||
</div>
|
||||
<p class="logo-help--text">
|
||||
{{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
|
||||
|
@ -145,9 +146,6 @@ export default {
|
|||
custom_domain: this.domain,
|
||||
},
|
||||
});
|
||||
this.alertMessage = this.$t(
|
||||
'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
|
||||
);
|
||||
} catch (error) {
|
||||
this.alertMessage =
|
||||
error?.message ||
|
||||
|
|
|
@ -117,7 +117,8 @@
|
|||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('AGENT_MGMT.DELETE.CONFIRM.TITLE')"
|
||||
:message="deleteMessage"
|
||||
:message="$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')"
|
||||
:message-value="deleteMessage"
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
|
@ -167,9 +168,7 @@ export default {
|
|||
}`;
|
||||
},
|
||||
deleteMessage() {
|
||||
return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.MESSAGE')} ${
|
||||
this.currentAgent.name
|
||||
} ?`;
|
||||
return ` ${this.currentAgent.name}?`;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
@ -98,7 +98,8 @@
|
|||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
|
||||
:message="deleteMessage"
|
||||
:message="$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')"
|
||||
:message-value="deleteMessage"
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
|
@ -165,9 +166,7 @@ export default {
|
|||
}`;
|
||||
},
|
||||
deleteMessage() {
|
||||
return `${this.$t('AUTOMATION.DELETE.CONFIRM.MESSAGE')} ${
|
||||
this.selectedResponse.name
|
||||
} ?`;
|
||||
return ` ${this.selectedResponse.name}?`;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
@ -99,7 +99,8 @@
|
|||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('CANNED_MGMT.DELETE.CONFIRM.TITLE')"
|
||||
:message="deleteMessage"
|
||||
:message="$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')"
|
||||
:message-value="deleteMessage"
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
|
@ -144,9 +145,7 @@ export default {
|
|||
}`;
|
||||
},
|
||||
deleteMessage() {
|
||||
return `${this.$t('CANNED_MGMT.DELETE.CONFIRM.MESSAGE')} ${
|
||||
this.selectedResponse.short_code
|
||||
} ?`;
|
||||
return ` ${this.selectedResponse.short_code}?`;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
@ -91,7 +91,8 @@
|
|||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
|
||||
:message="deleteMessage"
|
||||
:message="$t('LABEL_MGMT.DELETE.CONFIRM.MESSAGE')"
|
||||
:message-value="deleteMessage"
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
|
@ -136,9 +137,7 @@ export default {
|
|||
}`;
|
||||
},
|
||||
deleteMessage() {
|
||||
return `${this.$t('LABEL_MGMT.DELETE.CONFIRM.MESSAGE')} ${
|
||||
this.selectedResponse.title
|
||||
} ?`;
|
||||
return ` ${this.selectedResponse.title}?`;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
@ -76,6 +76,7 @@ export const actions = {
|
|||
});
|
||||
}
|
||||
},
|
||||
|
||||
updatePortal: async ({ commit }, portal) => {
|
||||
commit(types.UPDATE_PORTAL_ENTRY, portal);
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue