feat: Adds the ability to edit/delete category (#5385)

2022-09-02 22:34:07 +05:30
parent a9801a3c76
commit d47a0ae461
17 changed files with 667 additions and 37 deletions
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -37,6 +37,7 @@
      />
      <add-category
        v-if="showAddCategoryModal"
+        :show.sync="showAddCategoryModal"
        :portal-name="selectedPortalName"
        :locale="selectedPortalLocale"
        @cancel="onClickCloseAddCategoryModal"
@@ -56,7 +57,7 @@ import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
 import portalMixin from '../mixins/portalMixin';
-import AddCategory from '../components/AddCategory.vue';
+import AddCategory from '../pages/categories/AddCategory';

 export default {
  components: {
@@ -182,6 +183,7 @@ export default {
      ];
    },
    additionalSecondaryMenuItems() {
+      if (!this.selectedPortal) return [];
      return [
        {
          icon: 'folder',
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -243,6 +243,7 @@ export default {
      this.$emit('open-site');
    },
    openSettings() {
+      this.fetchPortalsAndItsCategories();
      this.navigateToPortalEdit();
    },
    onClickOpenDeleteModal(portal) {
@@ -252,6 +253,13 @@ export default {
    closeDeletePopup() {
      this.showDeleteConfirmationPopup = false;
    },
+    fetchPortalsAndItsCategories() {
+      this.$store.dispatch('portals/index').then(() => {
+        this.$store.dispatch('categories/index', {
+          portalSlug: this.portal.slug,
+        });
+      });
+    },
    async onClickDeletePortal() {
      const { slug } = this.selectedPortalForDelete;
      try {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@@ -92,8 +92,16 @@ export default {
    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
  },
  methods: {
+    fetchPortalsAndItsCategories() {
+      this.$store.dispatch('portals/index').then(() => {
+        this.$store.dispatch('categories/index', {
+          portalSlug: this.portal.slug,
+        });
+      });
+    },
    onClick(event, code, portal) {
      event.preventDefault();
+      this.fetchPortalsAndItsCategories();
      this.$router.push({
        name: 'list_all_locale_articles',
        params: {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -77,6 +77,12 @@ const portalRoutes = [
        component: EditPortalCustomization,
        roles: ['administrator'],
      },
+      {
+        path: getPortalRoute(':portalSlug/edit/:locale/categories'),
+        name: 'list_all_locale_categories',
+        roles: ['administrator', 'agent'],
+        component: ListAllCategories,
+      },
    ],
  },
 ];
@@ -125,7 +131,7 @@ const articleRoutes = [
 const categoryRoutes = [
  {
    path: getPortalRoute(':portalSlug/:locale/categories'),
-    name: 'list_all_locale_categories',
+    name: 'all_locale_categories',
    roles: ['administrator', 'agent'],
    component: ListAllCategories,
  },
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
@@ -132,11 +132,12 @@ export default {
    },

    async addCategory() {
-      const { name, slug, description } = this;
+      const { name, slug, description, locale } = this;
      const data = {
        name,
        slug,
        description,
+        locale,
      };
      this.$v.$touch();
      if (this.$v.$invalid) {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.NAME') }}
+          </th>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.DESCRIPTION') }}
+          </th>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.LOCALE') }}
+          </th>
+          <th scope="col">
+            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ARTICLE_COUNT') }}
+          </th>
+          <th scope="col" />
+        </tr>
+      </thead>
+      <tr>
+        <td colspan="100%" class="horizontal-line" />
+      </tr>
+      <tbody>
+        <tr v-for="category in categories" :key="category.id">
+          <td>
+            <span>{{ category.name }}</span>
+          </td>
+          <td>
+            <span>{{ category.description }}</span>
+          </td>
+          <td>
+            <span>{{ category.locale }}</span>
+          </td>
+          <td>
+            <span>{{ category.meta.articles_count }}</span>
+          </td>
+          <td>
+            <woot-button
+              v-tooltip.top-end="
+                $t(
+                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT'
+                )
+              "
+              size="tiny"
+              variant="smooth"
+              icon="edit"
+              color-scheme="secondary"
+              @click="editCategory(category)"
+            />
+            <woot-button
+              v-tooltip.top-end="
+                $t(
+                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
+                )
+              "
+              size="tiny"
+              variant="smooth"
+              icon="delete"
+              color-scheme="alert"
+              @click="deleteCategory(category.id)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="categories.length === 0" class="empty-text">
+      {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    categories: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  methods: {
+    editCategory(category) {
+      this.$emit('edit', category);
+    },
+    deleteCategory(categoryId) {
+      this.$emit('delete', categoryId);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  thead tr th {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    text-transform: none;
+    color: var(--s-600);
+    padding-left: 0;
+    padding-top: 0;
+  }
+
+  tbody tr {
+    border-bottom: 0;
+    td {
+      font-size: var(--font-size-small);
+      padding-left: 0;
+    }
+  }
+}
+.horizontal-line {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.empty-text {
+  display: flex;
+  justify-content: center;
+  color: var(--s-500);
+  font-size: var(--font-size-default);
+  margin-top: var(--space-three);
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
@@ -1,3 +1,198 @@
 <template>
-  <div>Component to edit a category</div>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
+      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
+    />
+    <form class="row" @submit.prevent="onUpdate">
+      <div class="medium-12 columns">
+        <div class="row article-info">
+          <div class="columns medium-6">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
+              <p class="value">{{ portalName }}</p>
+            </label>
+          </div>
+          <div class="columns medium-6">
+            <label>
+              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.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.EDIT.NAME.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.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.EDIT.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
+          @input="$v.slug.$touch"
+        />
+        <label>
+          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
+            "
+          />
+        </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.EDIT.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button @click="editCategory">
+              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
 </template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { required, minLength } from 'vuelidate/lib/validators';
+import { convertToCategorySlug } from 'dashboard/helper/commons.js';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    portalName: {
+      type: String,
+      default: '',
+    },
+    locale: {
+      type: String,
+      default: '',
+    },
+    category: {
+      type: Object,
+      default: () => {},
+    },
+    selectedPortalSlug: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      id: this.category.id,
+      name: '',
+      slug: '',
+      description: '',
+    };
+  },
+  validations: {
+    name: {
+      required,
+      minLength: minLength(2),
+    },
+    slug: {
+      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 '';
+    },
+  },
+  mounted() {
+    this.updateDataFromStore();
+  },
+  methods: {
+    updateDataFromStore() {
+      const { category } = this;
+      this.name = category.name;
+      this.slug = category.slug;
+      this.description = category.description;
+    },
+    onNameChange() {
+      this.slug = convertToCategorySlug(this.name);
+    },
+    onUpdate() {
+      this.$emit('update');
+    },
+    onClose() {
+      this.$emit('cancel');
+    },
+    async editCategory() {
+      const { id, name, slug, description } = this;
+      const data = {
+        id,
+        name,
+        slug,
+        description,
+      };
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      try {
+        await this.$store.dispatch('categories/update', {
+          portalSlug: this.selectedPortalSlug,
+          categoryId: id,
+          categoryObj: data,
+        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.CATEGORY.EDIT.API.SUCCESS_MESSAGE'
+        );
+        this.onClose();
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage ||
+          this.$t('HELP_CENTER.CATEGORY.EDIT.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+  },
+};
+</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/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -1,3 +1,194 @@
 <template>
-  <div>Component to list all categories</div>
+  <div class="category-list--container">
+    <header>
+      <div class="header-left--wrap">
+        <label class="sub-block-title header-text">{{
+          $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE')
+        }}</label>
+        <select
+          :value="currentLocaleCode"
+          class="row small-2 select-locale"
+          @change="changeCurrentCategory"
+        >
+          <option
+            v-for="allowedLocaleCode in allowedLocaleCodes"
+            :key="allowedLocaleCode"
+            :value="allowedLocaleCode"
+          >
+            {{ allowedLocaleCode }}
+          </option>
+        </select>
+      </div>
+      <div class="header-right--wrap">
+        <woot-button
+          size="small"
+          variant="smooth"
+          color-scheme="primary"
+          icon="add"
+          @click="openAddCategoryModal"
+        >
+          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.NEW_CATEGORY') }}
+        </woot-button>
+      </div>
+    </header>
+    <div class="category-list">
+      <category-list-item
+        :categories="categoryByLocaleCode"
+        @delete="deleteCategory"
+        @edit="openEditCategoryModal"
+      />
+    </div>
+    <edit-category
+      v-if="showEditCategoryModal"
+      :show.sync="showEditCategoryModal"
+      :portal-name="currentPortalName"
+      :locale="selectedCategory.locale"
+      :category="selectedCategory"
+      :selected-portal-slug="currentPortalSlug"
+      @cancel="closeEditCategoryModal"
+    />
+    <add-category
+      v-if="showAddCategoryModal"
+      :show.sync="showAddCategoryModal"
+      :portal-name="currentPortalName"
+      :locale="currentLocaleCode"
+      @cancel="closeAddCategoryModal"
+    />
+  </div>
 </template>
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import portalMixin from '../../mixins/portalMixin';
+
+import CategoryListItem from './CategoryListItem';
+import AddCategory from './AddCategory';
+import EditCategory from './EditCategory';
+
+export default {
+  components: {
+    CategoryListItem,
+    AddCategory,
+    EditCategory,
+  },
+  mixins: [alertMixin, portalMixin],
+  data() {
+    return {
+      selectedCategory: {},
+      selectedLocaleCode: '',
+      currentLocaleCode: 'en',
+      showEditCategoryModal: false,
+      showAddCategoryModal: false,
+      alertMessage: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      portals: 'portals/allPortals',
+      meta: 'portals/getMeta',
+      isFetching: 'portals/isFetchingPortals',
+    }),
+    currentPortalSlug() {
+      return this.$route.params.portalSlug;
+    },
+    categoryByLocaleCode() {
+      return this.$store.getters['categories/categoriesByLocaleCode'](
+        this.currentLocaleCode
+      );
+    },
+    currentPortal() {
+      const slug = this.currentPortalSlug;
+      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
+
+      return this.$store.getters['portals/allPortals'][0];
+    },
+    currentPortalName() {
+      return this.currentPortal ? this.currentPortal.name : '';
+    },
+    currentPortalLocale() {
+      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
+    },
+    allLocales() {
+      return this.currentPortal
+        ? this.currentPortal.config.allowed_locales
+        : [];
+    },
+    allowedLocaleCodes() {
+      return this.allLocales.map(locale => locale.code);
+    },
+  },
+  methods: {
+    openAddCategoryModal() {
+      this.showAddCategoryModal = true;
+    },
+    openEditCategoryModal(category) {
+      this.selectedCategory = category;
+      this.showEditCategoryModal = true;
+    },
+    closeAddCategoryModal() {
+      this.showAddCategoryModal = false;
+    },
+    closeEditCategoryModal() {
+      this.showEditCategoryModal = false;
+    },
+    async deleteCategory(categoryId) {
+      try {
+        await this.$store.dispatch('categories/delete', {
+          portalSlug: this.currentPortalSlug,
+          categoryId: categoryId,
+        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE'
+        );
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage ||
+          this.$t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+    changeCurrentCategory(event) {
+      const localeCode = event.target.value;
+      this.currentLocaleCode = localeCode;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.category-list--container {
+  width: 100%;
+  padding-left: var(--space-normal);
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-normal);
+
+    .header-left--wrap {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .header-text {
+        font-weight: var(--font-weight-normal);
+        margin-right: var(--space-slab);
+        margin-bottom: 0;
+      }
+    }
+
+    .header-right--wrap {
+      flex: none;
+      align-items: center;
+    }
+    .select-locale {
+      height: var(--space-large);
+      margin-bottom: 0;
+      padding-top: var(--space-micro);
+      padding-bottom: var(--space-micro);
+    }
+  }
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -49,7 +49,8 @@ export default {
    }),
    currentPortal() {
      const slug = this.$route.params.portalSlug;
-      return this.$store.getters['portals/portalBySlug'](slug);
+      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
+      return this.$store.getters['portals/allPortals'][0];
    },
    tabs() {
      const tabs = [
@@ -64,7 +65,7 @@ export default {
          ),
        },
        {
-          key: 'categories',
+          key: `list_all_locale_categories`,
          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.CATEGORY_SETTINGS.TITLE'),
        },
        {
@@ -81,6 +82,9 @@ export default {
    portalName() {
      return this.currentPortal ? this.currentPortal.name : '';
    },
+    currentPortalLocale() {
+      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
+    },
  },
  methods: {
    onTabChange(index) {
@@ -89,7 +93,7 @@ export default {

      this.$router.push({
        name: nextRoute,
-        params: { portalSlug: slug },
+        params: { portalSlug: slug, locale: this.currentPortalLocale },
      });
    },
  },
@@ -99,14 +103,7 @@ export default {
 .wrapper {
  flex: 1;
 }
-.container {
-  display: flex;
-  flex: 1;
-}
-.wizard-box {
-  border-right: 1px solid var(--s-25);
-  ::v-deep .item {
-    background: var(--white);
-  }
+::v-deep .tabs {
+  padding-left: 0;
 }
 </style>