SHARE
TWEET

Untitled

a guest Jun 15th, 2019 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ```<template>
  2.   <c-card
  3.     no-border
  4.     no-hover
  5.     :class="['employee-info-card-group', { '-collapse': isMobile && hideContents }]"
  6.   >
  7.  
  8.     <div class="heading">
  9.       <c-title class="title" :grey="isMobile && hideContents">
  10.         {{ title }}
  11.       </c-title>
  12.  
  13.       <div v-if="Object.keys(infoChunks || {}).length" class="actions">
  14.         <template v-if="isMobile">
  15.           <c-button
  16.             size="30"
  17.             icon="plus"
  18.             class="action"
  19.             icon-size="15"
  20.             :ref-cy="`btn-add-${title}`"
  21.             @click="$emit('add')"
  22.           />
  23.  
  24.           <c-button
  25.             flat
  26.             size="30"
  27.             icon-size="15"
  28.             icon="chevron-up"
  29.             :ref-cy="`btn-hide-${title}`"
  30.             :class="['action toggle', { '-reverse': hideContents } ]"
  31.             @click="hideContents = !hideContents"
  32.           />
  33.         </template>
  34.  
  35.         <c-button
  36.           v-else
  37.           primary
  38.           class="action"
  39.           icon-size="12"
  40.           icon="plus"
  41.           :ref-cy="`btn-add-${title}`"
  42.           @click="$emit('add')"
  43.         >
  44.           Adicionar
  45.         </c-button>
  46.       </div>
  47.     </div>
  48.  
  49.     <div
  50.       ref="wrapper"
  51.       :style="{ height: isMobile && hideContents ? '0px' : `${contentHeight}px` }"
  52.       class="wrapper"
  53.     >
  54.       <div
  55.         v-if="Object.keys(infoChunks || {}).length"
  56.         ref="items"
  57.         class="items"
  58.       >
  59.         <div
  60.           v-for="(infoChunk, chunkName, index) in infoChunks"
  61.           :key="(infoChunk.id || {}).value"
  62.           ref-cy="info-card-group-item"
  63.           :data-cy="(infoChunk.id || {}).value"
  64.           class="item"
  65.         >
  66.           <div class="heading">
  67.             <div class="type">
  68.               <c-flag
  69.                 grey
  70.                 class="icon"
  71.                 ref-cy="info-card-group-item-heading"
  72.                 :data-cy="(infoChunk.icon || {}).name"
  73.                 :icon="(infoChunk.icon || {}).name"
  74.               />
  75.  
  76.               <span class="name" ref-cy="info-card-group-item-name">
  77.                 {{ (infoChunk && infoChunk[titleItem] && infoChunk[titleItem].value) || '-' }}
  78.               </span>
  79.             </div>
  80.  
  81.             <div class="actions">
  82.               <c-button
  83.                 flat
  84.                 size="30"
  85.                 icon="pencil"
  86.                 icon-size="14"
  87.                 class="action"
  88.                 :ref-cy="`btn-edit-${title}`"
  89.                 @click="$emit('edit', `${title}.${index}`)"
  90.               />
  91.  
  92.               <c-button
  93.                 flat
  94.                 error
  95.                 size="30"
  96.                 icon="cross"
  97.                 icon-size="14"
  98.                 class="action"
  99.                 :ref-cy="`btn-delete-${title}`"
  100.                 @click="$emit('delete', (infoChunk.id || {}).value)"
  101.               />
  102.             </div>
  103.           </div>
  104.  
  105.           <info-chunk :fields="infoChunk" class="infos" />
  106.         </div>
  107.       </div>
  108.  
  109.       <div
  110.         v-if="!Object.keys(infoChunks || {}).length"
  111.         ref="items"
  112.         class="empty"
  113.         ref-cy="info-card-group-empty-state"
  114.       >
  115.         <c-button
  116.           v-if="isMobile"
  117.           primary
  118.           class="action"
  119.           icon-size="12"
  120.           icon="plus"
  121.           :ref-cy="`btn-add-${title}`"
  122.           @click="$emit('add')"
  123.         />
  124.  
  125.         <c-button
  126.           v-else
  127.           class="action"
  128.           icon-size="12"
  129.           icon="plus"
  130.           :ref-cy="`btn-add-${title}`"
  131.           @click="$emit('add')"
  132.         >
  133.           {{ callToAction }}
  134.         </c-button>
  135.       </div>
  136.     </div>
  137.   </c-card>
  138. </template>
  139.  
  140. <script>
  141. import MediaQuery from '@mixins/MediaQuery'
  142. import InfoChunk from '@components/Common/InfoChunk'
  143.  
  144.  
  145. export default {
  146.   components: { InfoChunk },
  147.  
  148.   mixins: [ MediaQuery ],
  149.  
  150.   props: {
  151.     title: {
  152.       type: String,
  153.       required: true
  154.     },
  155.  
  156.     titleItem: {
  157.       type: String
  158.     },
  159.  
  160.     fields: {
  161.       type: Array,
  162.       required: true
  163.     },
  164.  
  165.     // The text the goes inside the button present in the empty-state
  166.     callToAction: String,
  167.  
  168.     loading: Boolean,
  169.  
  170.     editable: Boolean,
  171.   },
  172.  
  173.   data () {
  174.     return {
  175.       hideContents: false,
  176.       contentObs: null,
  177.       contentHeight: 0
  178.     }
  179.   },
  180.  
  181.   computed: {
  182.     infoChunks () {
  183.       return this.fields.reduce((acc, field, index) => {
  184.         const fieldHighlight = Object.keys(field || {})
  185.           .find(fieldName => (field[fieldName].infoCardProps || {}).highlight)
  186.  
  187.         return {
  188.           ...acc,
  189.           [index + 1]: {
  190.             ...field,
  191.             index: { hide: true, value: index },
  192.             [fieldHighlight]: { ...field[fieldHighlight], hide: true },
  193.             icon: { hide: true, name: field[fieldHighlight].infoCardProps.icon }
  194.           }
  195.         }
  196.       }, {})
  197.     }
  198.   },
  199.  
  200.   mounted () {
  201.     this.contentObs = new ResizeObserver(ev => {
  202.       this.contentHeight = ev[0].target.scrollHeight
  203.     })
  204.  
  205.     this.contentObs.observe(this.$refs.items)
  206.   }
  207. }
  208. </script>
  209.  
  210. <style lang="scss">
  211.  
  212. .employee-info-card-group {
  213.   padding: 10px;
  214.   margin: 0 10px 20px 10px;
  215.  
  216.   &:last-child { margin-bottom: 185px; }
  217.  
  218.   &.-collapse > .heading { margin-bottom: 0px; }
  219.  
  220.   @include responsive (tablet, desktop) {
  221.     padding: 20px;
  222.     padding-bottom: 30px;
  223.  
  224.     margin: 0 5px 20px 0;
  225.   }
  226.  
  227.   & > .wrapper { transition: height .3s; overflow: hidden; }
  228.  
  229.   & > .heading {
  230.     display: flex;
  231.     align-items: center;
  232.     justify-content: space-between;
  233.  
  234.     margin-bottom: 20px;
  235.     transition: margin .3s;
  236.  
  237.     & > .title > .text { color: map-get($text-color, base-80); }
  238.  
  239.     & > .actions {
  240.       display: flex;
  241.  
  242.       @include responsive (tablet, desktop) {
  243.         & > .action { width: 100%; max-width: 180px; }
  244.       }
  245.  
  246.       & > .action.toggle {
  247.         transform: rotate(0deg);
  248.         transition: transform .2s;
  249.  
  250.         & > .icon { margin-bottom: 1px; }
  251.  
  252.         &.-reverse { transform: rotate(180deg); }
  253.         &.-reverse > .icon { margin-bottom: 3px; }
  254.       }
  255.  
  256.       & > .action:not(:last-child) { margin-right: 10px; }
  257.     }
  258.   }
  259.  
  260.   & > .wrapper > .empty {
  261.     display: flex;
  262.     align-items: center;
  263.     justify-content: center;
  264.  
  265.     width: 100%;
  266.     height: 256px;
  267.  
  268.     border-radius: 5px;
  269.     border: 1px dashed map-get($text-color, base-20);
  270.   }
  271.  
  272.   & > .wrapper > .items > .item {
  273.     display: flex;
  274.     flex-direction: column;
  275.     &:not(:first-child) { margin-top: 40px; }
  276.  
  277.     & > .heading {
  278.       display: flex;
  279.       align-items: center;
  280.       justify-content: space-between;
  281.  
  282.       // Ugly, rite?
  283.       height: 40px;
  284.  
  285.       & > .type {
  286.         display: flex;
  287.         align-items: center;
  288.         position: relative;
  289.         margin-left: 65px;
  290.  
  291.         @include responsive (tablet, desktop) { margin-left: 250px; }
  292.       }
  293.  
  294.       & > .type > .icon {
  295.         position: absolute;
  296.         top: 50%;
  297.  
  298.         width: 40px;
  299.         height: 40px;
  300.         box-shadow: -2px 3px 17px -3px rgba(18, 30, 72, 0.12);
  301.  
  302.         transform: translate(calc(-100% - 15px), -50%);
  303.  
  304.         @include responsive (tablet, desktop) {
  305.           transform: translate(calc(-100% - 30px), -50%);
  306.         }
  307.  
  308.         & > .c-icon { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)); }
  309.       }
  310.  
  311.       & > .type > .name {
  312.         font-size: 16px;
  313.         font-family: $title-font-family;
  314.         font-weight: $title-font-weight;
  315.         color: map-get($text-color, base-80);
  316.       }
  317.  
  318.       & > .actions {
  319.         display: flex;
  320.  
  321.          & > .action.toggle {
  322.            transform: rotate 0deg;
  323.            transition: transform .2;
  324.  
  325.            & > .icon { margin-bottom: 1px; }
  326.  
  327.            &.-reverse { transform: rotate(180deg); }
  328.            &.-reverse > .icon { margin-bottom: 3px; }
  329.          }
  330.  
  331.         & > .action:not(:last-child) { margin-right: 10px; }
  332.       }
  333.     }
  334.  
  335.     &:not(:last-child) {
  336.       border-bottom: $base-border;
  337.       & > .infos { padding-top: 20px; padding-bottom: 50px; }
  338.     }
  339.   }
  340. }
  341.  
  342. </style>
  343. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top