frames/pages/structures/_id.vue

<template>
  <LayoutContainer>
    <header class="mb-4">
      <v-layout>
        <v-btn
          v-if="parent"
          :to="{path: '/structures', query: { parent: parent, view: view, theme: theme }}"
          nuxt
          plain
        >
          <font-awesome-icon class="icon mr-1" :icon="['fas', 'chevron-left']" />
          {{ $t('go_back') }}
        </v-btn>
      </v-layout>
    </header>

    <v-container class="content">
      <v-layout class="flex-row align-center mb-4">
        <v-img
          v-if="structure.logoId"
          :src="'https://api.opentalent.fr/app.php/_internal/secure/files/' + structure.logoId + '/0x60'"
          alt="logo"
          max-width="60"
        />

        <h2 class="flex mx-4 d-flex align-center">
          {{ structure.name }}
        </h2>

        <div class="d-flex flex-row align-center">
          <a v-if="structure.facebook" :href="structure.facebook" class="facebook" target="_blank" :title="$t('find_us_on') + ' Facebook'">
            <font-awesome-icon class="icon social-icon" :icon="['fab', 'facebook']" />
          </a>
          <a v-if="structure.instagram" :href="structure.instagram" class="instagram" target="_blank" :title="$t('find_us_on') + ' Instagram'">
            <font-awesome-icon class="icon social-icon" :icon="['fab', 'instagram-square']" />
          </a>
          <a v-if="structure.twitter" :href="structure.twitter" class="twitter" target="_blank" title="$t('find_us_on') + ' Twitter'">
            <font-awesome-icon class="icon social-icon" :icon="['fab', 'twitter']" />
          </a>
        </div>
      </v-layout>

      <v-row>
        <v-col class="d-flex justify-center" cols="12">
          <img
            v-if="structure.imageId"
            :src="'https://api.opentalent.fr/app.php/_internal/secure/files/' + structure.imageId + '/raw'"
            alt="banner"
            style="max-height: 300px;max-width: 100%"
          >
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <div
            v-if="structure.practices"
            class="d-flex justify-center flex-wrap"
          >
            <v-chip
              v-for="practice in structure.practices"
              :key="practice"
              class="ma-1"
              label
            >
              {{ $t(practice) }}
            </v-chip>
          </div>
        </v-col>
      </v-row>

      <v-row class="mb-4">
        <v-col cols="12" class="d-flex flex-row justify-center">
          <v-btn
            v-for="article in structure.articles"
            :key="article.id"
            :href="(article.link.match(/https?:\/\/.*/) ? '' : 'https://') + article.link "
            target="_blank"
            small
            color="primary"
            class="ma-2"
            :title="article.title"
          >
            <font-awesome-icon class="icon mr-1" :icon="['fas', 'star']" />
            {{ $t('spot_on_from') + ' ' + new Date(article.date).toLocaleDateString($i18n.locale) }}
          </v-btn>
        </v-col>
      </v-row>

      <v-divider class="my-2" />

      <v-row class="my-2 py-2">
        <v-col
          cols="12"
          sm="6"
          class="description"
        >
          <div class="d-flex flex-row mb-3">
            <h4>{{ $t('descriptive') }}</h4>
            <v-spacer />
          </div>
          <div class="pa-2">
            <p v-if="structure.description" class="text-justify">
              {{ structure.description }}
            </p>
            <i v-else>({{ $t('no_description') }})</i>
          </div>
        </v-col>

        <v-col
          cols="12"
          sm="6"
          class="contact"
        >
          <div class="d-flex flex-row mb-3">
            <h4>{{ $t('contact') }}</h4>
            <v-spacer />
          </div>

          <table>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
              </td>
              <td class="mx-2">
                <span v-if="structure.streetAddress">{{ structure.streetAddress }}<br></span>
                <span v-if="structure.postalCode">{{ structure.postalCode }} </span>
                {{ structure.addressCity }}
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'phone-alt']" />
              </td>
              <td class="phone">
                <div v-if="structure.telphone">
                  <a v-if="showTel" :href="'tel:' + structure.telphone" class="neutral">
                    {{ formatPhoneNumber(structure.telphone) }}
                  </a>
                  <v-btn v-else small @click="showTel = 1">
                    {{ $t('show_tel') }}
                  </v-btn>
                </div>
                <span v-else>-</span>
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'at']" />
              </td>
              <td class="mail">
                <div v-if="structure.email">
                  <a v-if="showMail" :href="'mailto:' + structure.email" class="neutral">
                    {{ structure.email }}
                  </a>
                  <v-btn v-else small @click="showMail = 1">
                    {{ $t('show_email') }}
                  </v-btn>
                </div>
                <span v-else>-</span>
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'globe-europe']" />
              </td>
              <td class="website">
                <a class="neutral" :href="structure.website" target="_blank">{{ structure.website }}</a>
              </td>
            </tr>
            <tr>
              <td>
                <font-awesome-icon class="icon" :icon="['fas', 'project-diagram']" />
              </td>
              <td class="network">
                <NuxtLink
                  v-if="parent && (structure.n1Id !== parent)"
                  class="neutral"
                  :to="{path: '/structures/' + structure.n1Id, query: { parent: parent, view: view, theme: theme }}"
                  nuxt
                >
                  {{ structure.n1Name }}
                </NuxtLink>
                <div v-else>
                  {{ structure.n1Name }}
                </div>
              </td>
            </tr>
          </table>
        </v-col>
      </v-row>

      <v-row v-if="structure.latitude && structure.longitude">
        <v-col cols="12">
          <v-responsive width="100%" height="450px">
            <no-ssr>
              <l-map
                id="map"
                :zoom="13"
                :center="[structure.latitude, structure.longitude]"
                :options="{ scrollWheelZoom: false, zoomSnap: 0.25 }"
              >
                <l-tile-layer
                  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                  attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
                />
                <l-marker
                  :key="structure.id"
                  :lat-lng="[structure.latitude, structure.longitude]"
                >
                  <l-popup>
                    <b>{{ structure.name }}</b><br>
                    {{ structure.postalCode }} {{ structure.addressCity }}<br>
                    <a :href="structure.website" target="_blank">{{ structure.website }}</a>
                  </l-popup>
                </l-marker>
              </l-map>
            </no-ssr>
          </v-responsive>
        </v-col>
      </v-row>
    </v-container>
  </LayoutContainer>
</template>

<script lang="ts">
import Vue from 'vue'
// eslint-disable-next-line import/no-named-as-default
import parsePhoneNumber from 'libphonenumber-js'
import StructuresProvider from '~/services/data/StructuresProvider'

export default Vue.extend({
  async asyncData ({
    params, $axios
  }): Promise<{ structure: Structure }> {
    return await new StructuresProvider($axios).getById(Number(params.id)).then((res) => {
      return { structure: res }
    })
  },
  data (): object {
    return {
      parent: this.$route.query.parent ? parseInt(this.$route.query.parent as string) : null,
      view: this.$route.query.view ?? 'map',
      theme: this.$route.query.theme ?? 'orange',
      showTel: false,
      showMail: false
    }
  },
  methods: {
    formatPhoneNumber (number: string): string {
      const parsed = parsePhoneNumber(number)
      return parsed ? parsed.formatNational() : ''
    }
  }
})
</script>

<style scoped lang="scss">
  @import 'assets/style/variables.scss';

  .content {
    margin: 18px 10%;
    max-width: 80%;
  }

  h2 {
    color: var(--v-primary-base);
    font-size: 22px;
  }

  h4 {
    color: #666;
    border-bottom: solid 1px var(--v-primary-base);
    font-size: 22px;
  }

  .social-icon {
    font-size: 22px;
    color: #808080;
    margin: auto 8px;
  }

  .social-icon:hover {
    color: #595959;
  }

  .content {
    color: #4d4d4d;
  }

  @media screen and (min-width: 600px) {
    .description {
      border-right: solid 2px var(--v-primary-base);
      width: 45%;
      padding-right: 5%;
    }

    .contact {
      width: 45%;
      padding-left: 5%;
    }
  }

  .contact td {
    padding: 6px 12px;
  }

  .contact .icon {
    color: var(--v-primary-base);
  }
</style>