InfoCard.vue

<template>
  <c-card class="employee-info-card" no-border no-hover>
    <div class="heading">
      <slot>
        <c-title class="title" :grey="isMobile && hideContents">
          {{ title }}
        </c-title>

        <div class="actions">
          <slot name="actions">
            <c-button
              v-if="vacation"
              ref-cy="btn-create"
              class="btn"
              :size="isMobile ? '30' : '40'"
              @click="$emit('edit')"
            >
              Solicitar férias
            </c-button>

            <c-button
              v-else
              flat
              class="btn edit"
              icon="pencil"
              :ref-cy="'btn-edit-' + title"
              :size="isMobile ? '30' : '40'"
              :icon-size="isMobile ? '15' : '20'"
              :disabled="loading"
              @click="$emit('edit')"
            />
          </slot>

          <c-button
            v-if="isMobile"
            flat
            size="30"
            icon-size="15"
            icon="chevron-up"
            :class="['btn toggle', { '-reverse': hideContents }]"
            @click="hideContents = !hideContents"
          />
        </div>
      </slot>
    </div>

    <div
      ref="wrapper"
      :style="{ height: isMobile && hideContents ? '0px' : `${contentHeight}px` }"
      :class="['wrapper', { '-hidden': hideContents }]"
    >
      <slot ref="content" name="content">
        <info-chunk :fields="infoFields" />
      </slot>
    </div>
  </c-card>
</template>

<script>
import { is } from 'convenia-components'

import MediaQuery from '@mixins/MediaQuery'
import InfoChunk from '@components/Common/InfoChunk'
import Collapsible from '@mixins/Collapsible'


export default {
  components: { InfoChunk },
  mixins: [ MediaQuery, Collapsible('wrapper') ],
  props: {
    /**
     * The title of the card.
     */
    title: {
      type: String,
      required: true
    },

    /**
     * The info fields to be rendered
     */
    fields: {
      type: Object,
      default: () => ({})
    },

    /**
     * Whether it's contents are loading or not.
     */
    loading: Boolean,

    /**
     * Whether it is editable or not.
     */
    editable: Boolean,
    vacation: Boolean
  },

  computed: {
    infoFields () {
      return Object.keys(this.fields)
        .map(fieldName => {
          const field = this.fields[fieldName]
          const infoCardProps = field.infoCardProps || {}

          return {
            ...field,
            name: fieldName,
            value: this.getFieldValue(field),
            label: infoCardProps.label || field.label,
            hide: is(infoCardProps.hide, 'Function') && infoCardProps.hide(this.fields),
            infoCardProps: {}
          }
        })
    }
  },

  methods: {
    getFieldValue (field) {
      if (is((field.infoCardProps || {}).value, 'Function'))
        return field.infoCardProps.value(this.fields, field.value)

      return field.value
    }
  }
}
</script>

<style lang="scss">
.employee-info-card {
  padding: 10px;
  overflow: hidden;
  margin: 0 10px 20px 10px;

  &:last-child { margin-bottom: 185px; }

  // Maybe move this to the CCard itself.
  @include responsive (tablet, desktop) {
    padding: 20px;
    margin: 0 5px 20px 0;
  }

  & > .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // Card Title
    & > .title > .text { color: map-get($text-color, base-80); }
    & > .actions {
      display: flex;
      // Buttons (actions)
      & > .btn { margin-left: 10px; }
      & > .btn.edit { margin-left: auto; }
      & > .btn.toggle {
        transform: rotate(0deg);
        transition: transform .2s;
        & > .icon { margin-bottom: 1px; }
        &.-reverse { transform: rotate(180deg); }
        &.-reverse > .icon { margin-bottom: 3px; }
      }
    }
  }
  & > .wrapper { transition: height .3s; }
  & > .wrapper > .content {
    display: flex;
    flex-direction: column;
    padding: 30px 0 30px 10px;
    @include responsive (tablet, desktop) { padding: 30px 0 20px; }
    & > .info {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 20px;
      &:not(:last-child) { margin-bottom: 20px; }
      @include responsive (tablet, desktop) {
        flex-direction: row;
        margin-left: 250px;
        &:not(:last-child) { margin-bottom: 10px; }
      }
    }
    & > .info > .label {
      font-size: 11px;
      font-family: $title-font-family;
      font-weight: $title-font-weight;
      color: map-get($text-color, base-50);
      margin-bottom: 5px;
      text-transform: uppercase;
      -webkit-font-smoothing: antialiased;
      @include responsive (tablet, desktop) {
        position: absolute;
        top: 50%;
        margin: 0;
        transform: translate(calc(-100% - 30px), -50%);
      }
    }
    & > .info > .value {
      font-size: 14px;
      color: map-get($text-color, base-80);
      text-transform: capitalize;
    }
  }
}
</style>