chatwoot/app/javascript/dashboard/components/helpCenter/Portal/Switch/Index.vue

<template>
  <div class="portal" :class="{ active }">
    <thumbnail :username="portal.name" variant="square" />
    <div class="actions-container">
      <header>
        <div>
          <h2 class="portal-title block-title">{{ portal.name }}</h2>
          <p class="portal-count">
            {{ portal.articles_count }}
            {{ $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">
        <h2 class="locale-title sub-block-title">
          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
        </h2>
        <ul>
          <li
            v-for="locale in portal.config.allowed_locales"
            :key="locale.code"
          >
            <label :for="`locale-${locale.code}`" class="locale-item">
              <input
                :id="`locale-${locale.code}`"
                v-model="selectedLocale"
                type="radio"
                name="locale"
                :value="locale.code"
              />
              <div>
                <p>{{ locale.name }}</p>
                <span>
                  {{ locale.articles_count }}
                  {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
                  {{ locale.code }}
                </span>
              </div>
            </label>
          </li>
          <li>
            <a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import thumbnail from 'dashboard/components/widgets/Thumbnail';
export default {
  components: {
    thumbnail,
  },
  props: {
    portal: {
      type: Object,
      default: () => ({}),
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectedLocale: '',
    };
  },
  mounted() {
    this.selectedLocale = this.portal.config.allowed_locales[0].code;
  },
};
</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-small);
    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 {
        font-weight: var(--font-weight-bold);
        margin-bottom: 0;
      }

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

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

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

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

          &:hover {
            background-color: var(--w-25);
          }

          p {
            margin-bottom: 0;
          }

          span {
            color: var(--s-500);
            font-size: var(--font-size-small);
          }
        }
      }
    }
  }
}
label > [type='radio'] {
  margin-bottom: 0;
  margin-top: var(--space-smaller);
  margin-right: var(--space-one);
}
</style>