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

Add locale modal

Browse source
This commit is contained in:
Muhsin Keloth 2022-08-31 18:35:42 +05:30
parent d14beeb654
commit 6d817b2f02
5 changed files with 171 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/javascript/dashboard/i18n/locale/en/helpCenter.json
View file

@ -199,6 +199,24 @@
"ERROR_MESSAGE_FOR_BASIC": "Couldn't create the portal. Try again.",
"ERROR_MESSAGE_FOR_UPDATE": "Couldn't update the portal. Try again."
}
},
"ADD_LOCALE": {
"TITLE": "Add a new locale",
"SUB_TITLE": "This adds a new locale to your available translation list. ",
"PORTAL": "Portal",
"LOCALE": {
"LABEL": "Locale",
"PLACEHOLDER": "Choose a locale",
"ERROR": "Locale is required"
},
"BUTTONS": {
"CREATE": "Create locale",
"CANCEL": "Cancel"
},
"API": {
"SUCCESS_MESSAGE": "Category created successfully",
"ERROR_MESSAGE": "Unable to create category"
}
}
},
"TABLE": {

137
app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue Normal file
View file

@ -0,0 +1,137 @@
<template>
<modal :show.sync="show" :on-close="onClose">
<woot-modal-header
:header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
:header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
/>
<form class="row" @submit.prevent="onCreate">
<div class="medium-12 columns">
<label :class="{ error: $v.selectedLocale.$error }">
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
<select v-model="selectedLocale">
<option
v-for="item in allLocales"
:key="item.name"
:value="item.id"
>
{{ item.name }}
</option>
</select>
<span v-if="$v.selectedLocale.$error" class="message">
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
</span>
</label>
<div class="medium-12 columns">
<div class="modal-footer justify-content-end w-full">
<woot-button class="button clear" @click.prevent="onClose">
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
</woot-button>
<woot-button>
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
</woot-button>
</div>
</div>
</div>
</form>
</modal>
</template>
<script>
import Modal from 'dashboard/components/Modal';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { convertToPortalSlug } from 'dashboard/helper/commons.js';
import allLocales from 'shared/constants/locales.js';
export default {
components: {
Modal,
},
mixins: [alertMixin],
props: {
show: {
type: Boolean,
default: true,
},
portalId: {
type: String,
default: '',
},
},
data() {
return {
selectedLocale: '',
};
},
computed: {
allLocales() {
return Object.keys(allLocales).map(key => {
return {
id: key,
name: allLocales[key],
};
});
},
},
validations: {
selectedLocale: {
required,
},
},
methods: {
onNameChange() {
this.slug = convertToPortalSlug(this.name);
},
async onCreate() {
this.$v.$touch();
// if (this.$v.$invalid) {
// return;
// }
// console.log('onCreate', this.selectedLocale);
// try {
// await this.$store.dispatch('portals/create', {
// portal: {
// name: this.name,
// slug: this.slug,
// custom_domain: this.domain,
// // TODO: add support for choosing color
// color: '#1f93ff',
// homepage_link: this.homePageLink,
// page_title: this.pageTitle,
// header_text: this.headerText,
// config: {
// // TODO: add support for choosing locale
// allowed_locales: ['en'],
// },
// },
// });
// this.alertMessage = this.$t(
// 'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE'
// );
// this.$emit('cancel');
// } catch (error) {
// this.alertMessage =
// error?.message || this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE');
// } finally {
// this.showAlert(this.alertMessage);
// }
},
onClose() {
this.$emit('cancel');
},
},
};
</script>
<style scoped lang="scss">
.input-container::v-deep {
margin: 0 0 var(--space-normal);
input {
margin-bottom: 0;
}
.message {
margin-top: 0;
}
}
</style>

185
app/javascript/dashboard/routes/dashboard/helpcenter/components/AddPortal.vue
View file

@ -1,185 +0,0 @@
<template>
<modal :show.sync="show" :on-close="onClose">
<woot-modal-header
:header-title="$t('HELP_CENTER.PORTAL.ADD.TITLE')"
:header-content="$t('HELP_CENTER.PORTAL.ADD.SUB_TITLE')"
/>
<form class="row" @submit.prevent="onCreate">
<div class="medium-12 columns">
<woot-input
v-model="name"
:class="{ error: $v.name.$error }"
class="medium-12 columns"
:error="$v.name.$error ? $t('HELP_CENTER.PORTAL.ADD.NAME.ERROR') : ''"
:label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
@blur="$v.name.$touch"
@input="onNameChange"
/>
<woot-input
v-model="slug"
:class="{ error: $v.slug.$error }"
class="medium-12 columns"
:error="$v.slug.$error ? $t('HELP_CENTER.PORTAL.ADD.SLUG.ERROR') : ''"
:label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.PORTAL.ADD.SLUG.HELP_TEXT')"
@blur="$v.slug.$touch"
/>
<woot-input
v-model="pageTitle"
class="medium-12 columns"
:label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
/>
<woot-input
v-model="headerText"
class="medium-12 columns"
:label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
/>
<woot-input
v-model="domain"
class="medium-12 columns"
:label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT')"
/>
<woot-input
v-model="homePageLink"
class="medium-12 columns"
:label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT')"
/>
<div class="medium-12 columns">
<div class="modal-footer justify-content-end w-full">
<woot-button
class="button clear"
:is-loading="uiFlags.isCreating"
@click.prevent="onClose"
>
{{ $t('HELP_CENTER.PORTAL.ADD.BUTTONS.CANCEL') }}
</woot-button>
<woot-button>
{{ $t('HELP_CENTER.PORTAL.ADD.BUTTONS.CREATE') }}
</woot-button>
</div>
</div>
</div>
</form>
</modal>
</template>
<script>
import { mapGetters } from 'vuex';
import Modal from 'dashboard/components/Modal';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { convertToPortalSlug } from 'dashboard/helper/commons.js';
export default {
components: {
Modal,
},
mixins: [alertMixin],
props: {
show: {
type: Boolean,
default: true,
},
portalName: {
type: String,
default: '',
},
locale: {
type: String,
default: '',
},
},
data() {
return {
name: '',
slug: '',
domain: '',
homePageLink: '',
pageTitle: '',
headerText: '',
alertMessage: '',
};
},
computed: {
...mapGetters({
uiFlags: 'portals/uiFlagsIn',
}),
},
validations: {
name: {
required,
},
slug: {
required,
},
},
methods: {
onNameChange() {
this.slug = convertToPortalSlug(this.name);
},
async onCreate() {
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
try {
await this.$store.dispatch('portals/create', {
portal: {
name: this.name,
slug: this.slug,
custom_domain: this.domain,
// TODO: add support for choosing color
color: '#1f93ff',
homepage_link: this.homePageLink,
page_title: this.pageTitle,
header_text: this.headerText,
config: {
// TODO: add support for choosing locale
allowed_locales: ['en'],
},
},
});
this.alertMessage = this.$t(
'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE'
);
this.$emit('cancel');
} catch (error) {
this.alertMessage =
error?.message || this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE');
} finally {
this.showAlert(this.alertMessage);
}
},
onClose() {
this.$emit('cancel');
},
},
};
</script>
<style scoped lang="scss">
.input-container::v-deep {
margin: 0 0 var(--space-normal);
input {
margin-bottom: 0;
}
.message {
margin-top: 0;
}
}
</style>

2
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
View file

@ -188,7 +188,7 @@ export default {
},
methods: {
addLocale() {
this.$emit('add');
this.$emit('add-locale', this.portal.id);
},
openSite() {
this.$emit('open-site');

22
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
View file

@ -15,6 +15,7 @@
:key="portal.id"
:portal="portal"
:status="portalStatus"
@add-locale="addLocale"
/>
<div v-if="isFetching" class="portals--loader">
<spinner />
@ -25,8 +26,11 @@
:title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
/>
</div>
<woot-modal :show.sync="isAddModalOpen" :on-close="closeModal">
<add-portal :show="isAddModalOpen" @cancel="closeModal" />
<woot-modal
:show.sync="isAddLocaleModalOpen"
:on-close="closeAddLocaleModal"
>
<add-locale :show="isAddLocaleModalOpen" @cancel="closeAddLocaleModal" />
</woot-modal>
</div>
</template>
@ -36,17 +40,17 @@ import { mapGetters } from 'vuex';
import PortalListItem from '../../components/PortalListItem';
import Spinner from 'shared/components/Spinner.vue';
import EmptyState from 'dashboard/components/widgets/EmptyState';
import AddPortal from '../../components/AddPortal';
import AddLocale from '../../components/AddLocale';
export default {
components: {
PortalListItem,
EmptyState,
Spinner,
AddPortal,
AddLocale,
},
data() {
return {
isAddModalOpen: false,
isAddLocaleModalOpen: false,
};
},
computed: {
@ -66,8 +70,12 @@ export default {
addPortal() {
this.$router.push({ name: 'new_portal_information' });
},
closeModal() {
this.isAddModalOpen = false;
closeAddLocaleModal() {
this.isAddLocaleModalOpen = false;
},
addLocale() {
this.isAddLocaleModalOpen = true;
// this.$router.push({ name: 'new_portal_locale', params: { portalId } });
},
},
};