feat: Category store integration (#5218)

* 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>
2022-08-10 10:48:41 +05:30
parent 16ad263a3a
commit 9bc75225fe
14 changed files with 196 additions and 80 deletions
--- a/app/javascript/dashboard/components/helpCenter/AddCategory.stories.js
+++ b/app/javascript/dashboard/components/helpCenter/AddCategory.stories.js
@@ -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'),
-};
--- a/app/javascript/dashboard/components/helpCenter/AddCategory.vue
+++ b/app/javascript/dashboard/components/helpCenter/AddCategory.vue
@@ -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>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -5,8 +5,12 @@
        {{ $t(`SIDEBAR.${menuItem.label}`) }}
      </span>
      <div v-if="isHelpCenterSidebar" class="submenu-icons">
-        <fluent-icon icon="search" class="submenu-icon" size="16" />
-        <fluent-icon icon="add" class="submenu-icon" size="16" />
+        <div class="submenu-icon">
+          <fluent-icon icon="search" size="16" />
+        </div>
+        <div class="submenu-icon" @click="onClickOpen">
+          <fluent-icon icon="add" size="16" />
+        </div>
      </div>
    </div>
    <router-link
@@ -71,6 +75,9 @@
          </a>
        </li>
      </router-link>
+      <p v-if="isHelpCenterSidebar && isCategoryEmpty" class="empty-text">
+        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
+      </p>
    </ul>
  </li>
 </template>
@@ -98,6 +105,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    isCategoryEmpty: {
+      type: Boolean,
+      default: false,
+    },
  },
  computed: {
    ...mapGetters({ activeInbox: 'getSelectedInbox' }),
@@ -134,11 +145,8 @@ export default {
        this.menuItem.toStateName === 'settings_applications'
      );
    },
-    isAllArticles() {
-      return (
-        this.$store.state.route.name === 'list_all_locale_articles' &&
-        this.menuItem.toStateName === 'all_locale_articles'
-      );
+    isArticlesView() {
+      return this.$store.state.route.name === this.menuItem.toStateName;
    },

    computedClass() {
@@ -158,7 +166,7 @@ export default {
        return ' ';
      }
      if (this.isHelpCenterSidebar) {
-        if (this.isAllArticles) {
+        if (this.isArticlesView) {
          return 'is-active';
        }
        return ' ';
@@ -195,6 +203,9 @@ export default {
    showItem(item) {
      return this.isAdmin && item.newLink !== undefined;
    },
+    onClickOpen() {
+      this.$emit('open');
+    },
  },
 };
 </script>
@@ -324,4 +335,10 @@ export default {
    }
  }
 }
+
+.empty-text {
+  color: var(--s-600);
+  font-size: var(--font-size-small);
+  margin: var(--space-smaller) 0;
+}
 </style>
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -70,4 +70,7 @@ export default {
  color: var(--s-600);
  font-style: normal;
 }
+.message {
+  margin-top: 0 !important;
+}
 </style>