nuxt-frontend/components/Learning/ProductOverview/Links.vue

<template>
  <accordion-card :title="$t('learning.product_overview.links')">
    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('general.sharepoint')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          prepend-inner-icon="icon-sharepoint"
          v-model="sharepoint_link"
          placeholder="https://sharepoint.com/"
          outlined
          flat
          class="links"
          v-if="editMode"
        ></v-text-field>
        <v-btn
          v-if="!editMode && sharepoint_link"
          :href="sharepoint_link"
          target="_blank"
          text
          link

          ><v-icon left>icon-sharepoint</v-icon> {{ sharepoint_link }}</v-btn
        >
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <!-- <v-subheader v-if="editMode">{{ $t('general.add_link') }}</v-subheader> -->
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('general.support_site')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          v-model="support_link"
          prepend-inner-icon="icon-link"
          placeholder="https://support.ggzecademy.nl/"
          outlined
          flat
          class="links"
          v-if="editMode"
        />
        <v-btn
          v-if="!editMode && support_link"
          :href="support_link"
          link
          text
          target="_blank"

          ><v-icon left>icon-link</v-icon>{{ support_link }}</v-btn
        >
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <!-- <v-subheader v-if="editMode">{{ $t('general.add_link') }}</v-subheader> -->
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('general.support_tickets')
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <v-text-field
          v-model="support_tickets_link"
          prepend-inner-icon="icon-link"
          placeholder="https://support.ggzecademy.nl/"
          outlined
          flat
          class="links"
          v-if="editMode"
        ></v-text-field>
        <v-btn
          v-if="!editMode && support_tickets_link"
          :href="support_tickets_link"
          text
          target="_blank"
          link
          ><v-icon left>icon-link</v-icon>{{ support_tickets_link }}</v-btn
        >
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <!-- <v-subheader v-if="editMode">{{ $t('general.add_link') }}</v-subheader> -->
      </v-col>
    </v-row>
  </accordion-card>
</template>

<script>
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'

export default {
  components: {
    accordionCard,
  },
  props: {
    editMode: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    local() {
      return this.$store.state.learning.local
    },
    sharepoint_link: {
      get() {
        return this.local.sharepoint_link || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'sharepoint_link',
          value,
        })
      },
    },
    support_link: {
      get() {
        return this.local.support_link || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'support_link',
          value,
        })
      },
    },
    support_tickets_link: {
      get() {
        return this.local.support_tickets_link || ''
      },
      set(value) {
        this.$store.commit('learning/UPDATE_FIELD', {
          field: 'support_tickets_link',
          value,
        })
      },
    },
  },
}
</script>

<style scoped>
.v-input__icon--prepend .v-icon {
  font-size: 15px !important;
}
.links >>> .v-input__icon--prepend-inner {
  margin: auto 12px;
}
.links >>> .v-input__icon--prepend-inner i {
  font-size: 22px;
  font-weight: 600;
  color: var(--v-txt-base) !important;
}
.links >>> .v-input__icon--prepend-inner .icon-sharepoint {
  color: dodgerblue !important;
}

.links >>> .v-text-field__slot {
  border-left: 1px solid var(--v-lines-base) !important;
  padding-left: 15px;
}

.links >>> .v-input__slot:hover .v-text-field__slot {
  border-color: var(--v-secAccent-base) !important;
}
.row{
  overflow: hidden;
}
.row >>> div:nth-child(3) .v-subheader {
  color: var(--v-tertiary-base) !important;
}
</style>