leadchat/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue

<template>
  <div class="portal" :class="{ active }">
    <thumbnail :username="portal.name" variant="square" />
    <div class="actions-container">
      <header>
        <div>
          <h3 class="text-block-title portal-title">{{ portal.name }}</h3>
          <p class="portal-count">
            {{ articlesCount }}
            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
          </p>
        </div>
        <span v-if="active" class="badge">{{
          $t('HELP_CENTER.PORTAL.ACTIVE_BADGE')
        }}</span>
      </header>
      <div class="portal-locales">
        <h5 class="locale-title">
          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
        </h5>
        <ul>
          <li v-for="locale in locales" :key="locale.code">
            <woot-button
              class="locale-item"
              variant="clear"
              size="large"
              color-scheme="secondary"
              @click="event => onClick(event, locale.code, portal)"
            >
              <div class="locale-content">
                <input
                  :id="`locale-${locale.code}`"
                  v-model="selectedLocale"
                  type="radio"
                  name="locale"
                  :value="locale.code"
                  class="locale__radio"
                  :checked="isLocaleActive(locale.code)"
                />
                <div>
                  <p>{{ localeName(locale.code) }}</p>
                  <span>
                    {{ locale.articles_count }}
                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
                    {{ locale.code }}
                  </span>
                </div>
              </div>
            </woot-button>
          </li>
          <li class="add-locale-wrap">
            <a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import thumbnail from 'dashboard/components/widgets/Thumbnail';
import portalMixin from '../mixins/portalMixin';
export default {
  components: {
    thumbnail,
  },
  mixins: [portalMixin],
  props: {
    portal: {
      type: Object,
      default: () => ({}),
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectedLocale: null,
    };
  },
  computed: {
    locales() {
      return this.portal?.config?.allowed_locales;
    },
    articlesCount() {
      return this.portal?.meta?.all_articles_count;
    },
  },
  mounted() {
    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: {
          portalSlug: portal.slug,
          locale: code,
        },
      });
      this.$emit('open-portal-page');
    },
    isLocaleActive(code) {
      const isPortalActive = this.portalSlug === this.portal.slug;
      const isLocaleActive = this.portal?.meta?.default_locale === code;

      return isPortalActive && isLocaleActive;
    },
  },
};
</script>

<style lang="scss" scoped>
.portal {
  background-color: var(--white);
  padding: var(--space-normal);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius-medium);
  position: relative;
  display: flex;
  margin-bottom: var(--space-normal);

  &.active {
    border: 1px solid var(--w-400);
  }

  .actions-container {
    margin-left: var(--space-one);
    flex-grow: 1;

    header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: var(--space-one);

      .badge {
        font-size: var(--font-size-mini);
        background-color: var(--w-100);
        color: var(--w-600);
        padding: var(--space-smaller) var(--space-small);
      }

      .portal-title {
        margin-bottom: 0;
        color: var(--s-700);
      }

      .portal-count {
        font-size: var(--font-size-mini);
        margin-bottom: 0;
        color: var(--s-500);
      }
    }

    .portal-locales {
      .locale-title {
        color: var(--s-600);
        font-size: var(--font-size-default);
        font-weight: var(--font-weight-medium);
      }

      .locale-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .locale-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: var(--space-smaller);
        padding: var(--space-smaller);
        border-radius: var(--border-radius-normal);

        p {
          margin-bottom: 0;
          text-align: left;
        }

        span {
          color: var(--s-500);
          font-size: var(--font-size-small);
        }
      }

      .locale__radio {
        width: var(--space-large);
        margin-top: var(--space-tiny);
      }

      .add-locale-wrap {
        margin-top: var(--spacing-small);
      }
    }
  }
}
</style>