feat: Adds the ability to add new locale in portal (#5363)

2022-09-01 22:19:30 +05:30
parent 7f3f6f7129
commit 504d339dd7
11 changed files with 193 additions and 206 deletions
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
@@ -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="locale in locales"
+              :key="locale.name"
+              :value="locale.id"
+            >
+              {{ locale.name }}-{{ locale.code }}
+            </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 allLocales from 'shared/constants/locales.js';
+export default {
+  components: {
+    Modal,
+  },
+  mixins: [alertMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    portal: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      selectedLocale: '',
+      isUpdating: false,
+    };
+  },
+  computed: {
+    addedLocales() {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      return allowedLocales.map(locale => locale.code);
+    },
+    locales() {
+      const addedLocales = this.portal.config.allowed_locales.map(
+        locale => locale.code
+      );
+      return Object.keys(allLocales)
+        .map(key => {
+          return {
+            id: key,
+            name: allLocales[key],
+            code: key,
+          };
+        })
+        .filter(locale => {
+          return !addedLocales.includes(locale.code);
+        });
+    },
+  },
+  validations: {
+    selectedLocale: {
+      required,
+    },
+  },
+  methods: {
+    async onCreate() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      const updatedLocales = this.addedLocales;
+      updatedLocales.push(this.selectedLocale);
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('portals/update', {
+          portalSlug: this.portal.slug,
+          config: { allowed_locales: updatedLocales },
+        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.PORTAL.ADD_LOCALE.API.SUCCESS_MESSAGE'
+        );
+        this.onClose();
+      } catch (error) {
+        this.alertMessage =
+          error?.message ||
+          this.$t('HELP_CENTER.PORTAL.ADD_LOCALE.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+        this.isUpdating = false;
+      }
+    },
+    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>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddPortal.vue
@@ -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>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -28,6 +28,7 @@
      </woot-button>
      <!-- Hidden since this is in V2
      <woot-button
+        v-if="shouldShowAddLocaleButton"
        class-names="article--buttons"
        icon="add"
        color-scheme="secondary"
@@ -88,6 +89,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    shouldShowAddLocaleButton: {
+      type: Boolean,
+      default: false,
+    },
  },
  data() {
    return {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
@@ -234,7 +234,7 @@ export default {
  },
  methods: {
    addLocale() {
-      this.$emit('add');
+      this.$emit('add-locale', this.portal.id);
    },
    openSite() {
      this.$emit('open-site');
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -6,7 +6,6 @@
      :sub-title="subTitle"
      @open-popover="openPortalPopover"
    />
-    <sidebar-search @input="onSearch" />
    <transition-group name="menu-list" tag="ul" class="menu vertical">
      <secondary-nav-item
        v-for="menuItem in accessibleMenuItems"
@@ -28,13 +27,11 @@

 <script>
 import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem';
-import SidebarSearch from './SidebarSearch';
 import SidebarHeader from './SidebarHeader';

 export default {
  components: {
    SecondaryNavItem,
-    SidebarSearch,
    SidebarHeader,
  },
  props: {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -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,15 @@
        :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"
+        :portal="selectedPortal"
+        @cancel="closeAddLocaleModal"
+      />
    </woot-modal>
  </div>
 </template>
@@ -37,18 +45,19 @@ import alertMixin from 'shared/mixins/alertMixin';
 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,
  },
  mixins: [alertMixin],
  data() {
    return {
-      isAddModalOpen: false,
+      isAddLocaleModalOpen: false,
+      selectedPortal: {},
    };
  },
  computed: {
@@ -68,8 +77,13 @@ export default {
    addPortal() {
      this.$router.push({ name: 'new_portal_information' });
    },
-    closeModal() {
-      this.isAddModalOpen = false;
+    closeAddLocaleModal() {
+      this.isAddLocaleModalOpen = false;
+      this.selectedPortal = {};
+    },
+    addLocale(portalId) {
+      this.isAddLocaleModalOpen = true;
+      this.selectedPortal = this.portals.find(portal => portal.id === portalId);
    },
  },
 };