LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Category store integration (#5218)

Browse Source 
* Add more actions

* Complete sidebar store integration

* Complete portal list store integration

* Fixed the specs

* Added missing specs

* Add comment

* Code cleanup

* Fixed all the spec issues

* Add portal and article API specs

* Add category name in article list

* Add more locales

* Code beautification

* Exclude locale from codeclimate ci

* feat: Category store integration

* chore: Minor fixes

* chore: API call fixes

* chore: Minor fixes

* chore: Minor fixes

* chore: Adds the ability for get articles based on categories

* chore: minor fixes

* chore: Minor fixes

* chore: fixes specs and minor improvements

* chore: Review fixes

* chore: Minor fixes

* chore: Review fixes

* chore: Review fixes

* chore: Spacing fixes

* Code cleanup

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Sivin Varghese
2022-08-10 10:48:41 +05:30
committed by GitHub
parent 16ad263a3a
commit 9bc75225fe
14 changed files with 196 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/javascript/dashboard/components/helpCenter/AddCategory.stories.js
View File

@@ -1,30 +0,0 @@
import AddCategoryComponent from './AddCategory.vue';
import { action } from '@storybook/addon-actions';
export default {
title: 'Components/Help Center',
component: AddCategoryComponent,
argTypes: {
show: {
defaultValue: true,
control: {
type: 'boolean',
},
},
},
};
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { AddCategoryComponent },
template:
'<add-category-component v-bind="$props" @create="onCreate" @cancel="onClose" />',
});
export const AddCategory = Template.bind({});
AddCategory.args = {
portalName: 'Chatwoot help center',
locale: 'En-US',
onCreate: action('create'),
onClose: action('cancel'),
};

168
app/javascript/dashboard/components/helpCenter/AddCategory.vue
View File

@@ -1,168 +0,0 @@
<template>
<modal :show.sync="show" :on-close="onClose">
<woot-modal-header
:header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
:header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
/>
<form class="row" @submit.prevent="onCreate">
<div class="medium-12 columns">
<div class="row article-info">
<div class="columns medium-6">
<label>
<span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
<p class="value">{{ portalName }}</p>
</label>
</div>
<div class="columns medium-6">
<label>
<span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
<p class="value">{{ locale }}</p>
</label>
</div>
</div>
<woot-input
v-model.trim="name"
:class="{ error: $v.name.$error }"
class="medium-12 columns"
:error="nameError"
:label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
:placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
@input="onNameChange"
/>
<woot-input
v-model.trim="slug"
:class="{ error: $v.slug.$error }"
class="medium-12 columns"
:error="slugError"
:label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
:placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
@input="$v.slug.$touch"
/>
<label :class="{ error: $v.description.$error }">
{{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
<textarea
v-model="description"
rows="3"
type="text"
:placeholder="
$t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.PLACEHOLDER')
"
@blur="$v.description.$touch"
/>
<span v-if="$v.description.$error" class="message">
{{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.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.CATEGORY.ADD.BUTTONS.CANCEL') }}
</woot-button>
<woot-button>
{{ $t('HELP_CENTER.CATEGORY.ADD.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, minLength } from 'vuelidate/lib/validators';
import { convertToCategorySlug } 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: '',
description: '',
};
},
validations: {
name: {
required,
minLength: minLength(2),
},
slug: {
required,
},
description: {
required,
},
},
computed: {
nameError() {
if (this.$v.name.$error) {
return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
}
return '';
},
slugError() {
if (this.$v.slug.$error) {
return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
}
return '';
},
},
methods: {
onNameChange() {
this.slug = convertToCategorySlug(this.name);
},
onCreate() {
this.$emit('create');
this.reset();
this.$emit('cancel');
},
onClose() {
this.reset();
this.$emit('cancel');
},
reset() {
this.name = '';
this.slug = '';
this.description = '';
},
},
};
</script>
<style scoped lang="scss">
.article-info {
width: 100%;
margin: 0 0 var(--space-normal);
.value {
color: var(--s-600);
}
}
.input-container::v-deep {
margin: 0 0 var(--space-normal);
input {
margin-bottom: 0;
}
}
</style>