KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Add locales under portal settings (#5386)

Browse source 
* Add locales under portal settings

* Fix path issue

* chore: Updated category route

* chore: Updated category route

Co-authored-by: iamsivin <iamsivin@gmail.com>
This commit is contained in:
Muhsin Keloth 2022-09-05 15:32:14 +05:30 committed by GitHub
parent 80180a60c5
commit 1c590160bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 162 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
View file

@ -8,6 +8,7 @@ const EditPortal = () => import('./pages/portals/EditPortal');
const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
const EditPortalCustomization = () =>
import('./pages/portals/EditPortalCustomization');
const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
const ShowPortal = () => import('./pages/portals/ShowPortal');
const PortalDetails = () => import('./pages/portals/PortalDetails');
const PortalCustomization = () => import('./pages/portals/PortalCustomization');
@ -78,7 +79,13 @@ const portalRoutes = [
roles: ['administrator'],
},
{
path: getPortalRoute(':portalSlug/edit/:locale/categories'),
path: 'locales',
name: 'edit_portal_locales',
component: EditPortalLocales,
roles: ['administrator'],
},
{
path: 'categories',
name: 'list_all_locale_categories',
roles: ['administrator', 'agent'],
component: ListAllCategories,

4
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
View file

@ -25,7 +25,7 @@
</woot-tabs>
</setting-intro-banner>
</div>
<div class="row content-box full-height">
<div class="row content-box">
<router-view />
</div>
</div>
@ -69,7 +69,7 @@ export default {
name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.CATEGORY_SETTINGS.TITLE'),
},
{
key: 'locales',
key: 'edit_portal_locales',
name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.LOCALE_SETTINGS.TITLE'),
},
];

152
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue Normal file
View file

@ -0,0 +1,152 @@
<template>
<div class="portal-locales">
<div class="button-container">
<woot-button
variant="smooth"
size="small"
color-scheme="primary"
class="header-action-buttons"
@click="addLocale"
>
{{ $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD') }}
</woot-button>
</div>
<div class="locale-container">
<locale-item-table
:locales="locales"
:selected-locale-code="currentPortal.meta.default_locale"
@change-default-locale="changeDefaultLocale"
@delete="deletePortalLocale"
/>
</div>
<woot-modal
:show.sync="isAddLocaleModalOpen"
:on-close="closeAddLocaleModal"
>
<add-locale
:show="isAddLocaleModalOpen"
:portal="currentPortal"
@cancel="closeAddLocaleModal"
/>
</woot-modal>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale';
export default {
components: {
LocaleItemTable,
AddLocale,
},
mixins: [alertMixin],
data() {
return {
isAddLocaleModalOpen: false,
lastPortalSlug: undefined,
alertMessage: '',
};
},
computed: {
...mapGetters({
uiFlags: 'portals/uiFlagsIn',
}),
currentPortalSlug() {
return this.$route.params.portalSlug;
},
currentPortal() {
return this.$store.getters['portals/portalBySlug'](
this.currentPortalSlug
);
},
locales() {
return this.currentPortal.config.allowed_locales;
},
allowedLocales() {
return Object.keys(this.locales).map(key => {
return this.locales[key].code;
});
},
},
mounted() {
this.lastPortalSlug = this.currentPortalSlug;
},
methods: {
changeDefaultLocale({ localeCode }) {
this.updatePortalLocales({
allowedLocales: this.allowedLocales,
defaultLocale: localeCode,
successMessage: this.$t(
'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
),
errorMessage: this.$t(
'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
),
});
},
deletePortalLocale({ localeCode }) {
const updatedLocales = this.allowedLocales.filter(
code => code !== localeCode
);
const defaultLocale = this.currentPortal.meta.default_locale;
this.updatePortalLocales({
allowedLocales: updatedLocales,
defaultLocale,
successMessage: this.$t(
'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
),
errorMessage: this.$t(
'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
),
});
},
async updatePortalLocales({
allowedLocales,
defaultLocale,
successMessage,
errorMessage,
}) {
try {
await this.$store.dispatch('portals/update', {
portalSlug: this.currentPortal.slug,
config: {
default_locale: defaultLocale,
allowed_locales: allowedLocales,
},
});
this.alertMessage = successMessage;
} catch (error) {
this.alertMessage = error?.message || errorMessage;
} finally {
this.showAlert(this.alertMessage);
}
},
closeAddLocaleModal() {
this.isAddLocaleModalOpen = false;
this.selectedPortal = {};
},
addLocale() {
this.isAddLocaleModalOpen = true;
},
},
};
</script>
<style lang="scss" scoped>
.portal-locales {
padding: var(--space-small) var(--space-normal);
width: 100%;
background: var(--white);
height: 100%;
padding: 0 var(--space-medium);
.button-container {
display: flex;
justify-content: flex-end;
}
.locale-container {
margin-top: var(--space-large);
}
}
</style>