feat: Adds the ability to delete a portal (#5305)

This commit is contained in:
Sivin Varghese 2022-09-01 13:27:08 +05:30 committed by GitHub
parent 6e945dd61e
commit f4fc53b425
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 158 additions and 48 deletions

View file

@ -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;

View file

@ -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 {

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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": {

View file

@ -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: {

View file

@ -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')}`;

View file

@ -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')"

View file

@ -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');
},

View file

@ -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,

View file

@ -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 ||

View file

@ -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 ||

View file

@ -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() {

View file

@ -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() {

View file

@ -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() {

View file

@ -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() {

View file

@ -76,6 +76,7 @@ export const actions = {
});
}
},
updatePortal: async ({ commit }, portal) => {
commit(types.UPDATE_PORTAL_ENTRY, portal);
},