@burh/nuxt-core 1.0.288 → 1.0.290

package/components/burh-ds/Lists/VagasSimple.vue

@@ -1,404 +1,404 @@
-<template>
-    <div class="list-simple">
-        <!-- faz as coisas aqui -->
-            <div class="text-center">
-                <h3>Oportunidades abertas recentemente</h3>  
-                <h6>Alinhados a estratégia de investir nos melhores profissionais para o alto desempenho das equipes e excelência em nosso processos voltados ao Sucesso de Nossos Clientes, é com grande satisfação que lhe convidamos a fazer parte do time {{companyName}}.</h6>    
-            </div>
-            <hr />
-            <div class="row">
-                <div class="col-12 col-lg-4">
-                    <base-input>
-                        <el-select 
-                            v-model="selects.city"
-                            filterable
-                            clearable
-                            placeholder="Filtrar cidade"
-                            class="select-primary">
-                            <el-option v-for="option in cities"
-                                        :key="option.label"
-                                        :label="option.label"
-                                        :value="option.value">
-                            </el-option>
-                        </el-select>
-                    </base-input>
-                </div>
-                <div class="col-12 col-lg-4">
-                    <base-input placeholder="Nome da vaga" v-model="selects.jobName"></base-input>
-                </div>
-                <div class="col-12 col-lg-4">
-                    <base-input>
-                        <el-select 
-                            v-model="selects.hiringType" 
-                            filterable
-                            clearable=""
-                            placeholder="Tipo de contratação"
-                            class="select-primary">
-                            <el-option v-for="option in hiringTypes"
-                                        :key="option.label"
-                                        :label="option.label"
-                                        :value="option.value">
-                            </el-option>
-                        </el-select>
-                    </base-input>
-                </div>
-            </div>
-            <table class="table table--card">
-                <thead>
-                    <tr>
-                        <th width="40%">Nome da Vaga</th>
-                        <th width="20%">Cidade</th>
-                        <th width="20%">Tipo de Contratação</th>
-                        <th width="20%">Ações</th>
-                    </tr>
-                </thead>
-                <tr class="" v-for="job in getJobsFiltered()" @click="redirectToJob(job)" v-bind:key="job.job_id" >
-                    <td class="job-name">
-                        <div class="mobile-content">
-                            <span class="avatar avatar-xl rounded-circle table-icon">
-                                <img alt="Laponia Veiculos" :src="companyLogo">
-                             </span>
-                            <ul class="list-inline">
-                                <!-- <li class="list-inline-item" v-on:click.prevent="callSaveJob(job.job_id)"><font-awesome-icon :icon="[!fullHeart ? 'far' : 'fas', 'heart']" class="mr-2"/></li> -->
-                                <li class="list-inline-item" v-on:click.prevent="callShareJob(job.job_id)"><font-awesome-icon :icon="['fas', 'share']" class="mr-0"/></li>
-                            </ul>
-                            <div class="text-uppercase">{{companyName}}</div>
-                        </div>
-                        <span>{{job.title}} </span>
-                        &nbsp;
-                        <badge tag="span" type="primary" class="bg-lighter" v-if="job.handicapped == 1">
-                            <font-awesome-icon :icon="['fas', 'wheelchair']" class=""/>
-                        </badge>
-                    </td>
-                    <td class="job-city">{{job.address.city_name}}</td>
-                    <td class="job-type">{{hiringType(job.type_hiring)}}
-                        <div class="mobile-content">
-                            <badge rounded tag="span" type="primary" class="bg-lighter">{{ fromNow(job.starting_date) }}</badge>
-                        </div>
-                    </td>
-                    <td class="text-right"><a :href="baseUrl + '/' +job.link" target="_blank" class="btn btn-outline-default">Ver vaga</a></td>
-                </tr>
-
-                <tr v-if="getJobsFiltered().length <= 0">
-                    <td colspan="4" class="text-center">Nenhuma vaga encontrada</td>
-                </tr>
-            </table>
-            <share-modal
-                :show="modals"
-                :url="jobLinkShare"
-            />
-        <slot></slot>
-    </div>
-</template>
-<script>
-import moment from 'moment';
-import 'moment/locale/pt-br';
-import { Select, Option } from 'element-ui';
-import ShareModal from "~/components/burh-ds/Modals/ShareModal.vue";
-import { userSaveJob } from '~/services/user';
-
-export default {
-  name: "list-vagas",
-  components: {
-    [Select.name]: Select,
-    [Option.name]: Option,
-    ShareModal
-  },
-  props: {
-      sm: Boolean,
-      md: Boolean,
-      img: String,
-      bg: String,
-      fullHeart: {
-        type: Boolean,
-        default: false
-      },
-      jobs: {
-        type: Array,
-        default: function() { return [] }
-      },
-      companyName: String,
-      companyLogo: String
-  },
-  methods: {
-      async callSaveJob(id) {
-          this.childClickPrevent = true;
-          let res = await userSaveJob(id);
-          
-      },
-
-      callShareJob(jobId){
-          this.childClickPrevent = true;
-          this.jobLinkShare = process.env.baseAppUrl + '/vagas/' + jobId;
-          this.modals.modal0 = true;
-      },
-      
-      redirectToJob(job) {
-        if(!this.childClickPrevent){
-            if(window.innerWidth <= 768) {
-                window.open(this.baseUrl + '/' + job.link);
-            }
-        }else{
-            this.childClickPrevent = false;
-        }
-      },
-      fromNow(date, format = "YYYY-MM-DD") {
-          return moment(date, format).locale('pt-BR').fromNow()
-      },
-
-      hiringType(number) {
-          if(number == 2) {
-              return "CLT";
-          } else if(number == 3) {
-              return "CNPJ";
-          } else if(number == 4) {
-              return "Estágio";
-          } else if(number == 5) {
-              return 'RPA';
-          } else if(number == 6) {
-              return 'Temporário';
-          } else {
-              return '';
-          }
-      },
-
-      getJobsFiltered() {
-          return this.jobs.filter((job) => {
-            let filterByJobName = (this.selects.jobName != null && this.selects.jobName != '');
-            let filterByCityName = (this.selects.city != null && this.selects.city != '');
-            let filterByHiringType = (this.selects.hiringType != null && this.selects.hiringType != '');
-            
-            let condition =    (filterByCityName    ? job.address.city_name == this.selects.city : true)
-                            && (filterByJobName     ? job.title.toLowerCase().indexOf(this.selects.jobName.toLowerCase()) > -1 : true)
-                            && (filterByHiringType  ? job.type_hiring == this.selects.hiringType : true)
-
-            return condition;
-          });
-      }
-  },
-  data() {
-    return {
-        baseUrl: process.env.baseAppUrl,
-        selects: {
-          simple: 'Badges',
-          city: '',
-          jobName: '',
-          hiringType: ''
-        },
-        cities: [],
-        hiringTypes: [],
-        modals: {
-            modal0: false
-        },
-        jobLinkShare: '', 
-        childClickPrevent: false
-        
-    }
-  },
-
-  mounted() {
-    let cities = [];
-
-    for(let job of this.jobs) {
-        if(cities.filter((city) => {
-            return city.value == job.address.city_name
-        }).length <= 0) {
-            cities.push({
-                label: job.address.city_name,
-                value: job.address.city_name
-            })
-        }
-    }
-
-    this.cities = cities;
-
-    let hiringTypes = [];
-
-    for(let job of this.jobs) {
-        if(hiringTypes.filter((hp) => {
-            return this.hiringType(hp.value) == this.hiringType(job.type_hiring)
-        }).length <= 0) {
-            hiringTypes.push({
-                label: this.hiringType(job.type_hiring),
-                value: job.type_hiring
-            })
-        }
-    }
-
-    this.hiringTypes = hiringTypes;
-  }
-};
-</script>
-<style lang="scss">
-
-.list-simple {
-    @media screen and (min-width: 1440px) {
-        max-width: 1440px;
-        margin: 0 auto;
-    }
-    .avatar-xl{
-        border: 1px solid #E5E5E5;
-    }
-}
-
-.table--card {
-    thead {
-        display: none;
-        height: 0;
-        border: 0;
-        overflow: hidden;
-
-        th {
-            border-top: 0;
-            opacity: 0;
-        }
-        @media screen and (min-width: 768px) {
-            display: table-header-group;
-        }
-    }
-    .mobile-content {
-        @media screen and (min-width: 768px) {
-            display: none;
-        }
-    }
-    > tr {
-        position: relative;
-        display: block;
-        margin: 1rem auto;
-
-        border: 1px solid #E5E5E5;
-        border-radius: 7px;
-        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
-
-        @media screen and (min-width: 768px) { 
-            display: table-row;
-            margin-bottom: initial;
-            padding-top: initial;
-
-            border: 0;
-            border-radius: 0;
-            box-shadow: none;
-        }
-        
-        &:first-child {
-            td {
-                border-top: 0;
-            }
-        }
-
-        &:last-child {
-            td:last-child {
-                border-bottom: 1px solid #E5E5E5;
-            }
-
-            @media screen and (min-width: 768px) {
-                td {
-                    border-bottom: 1px solid #E5E5E5;
-                }
-            }
-        }
-
-        & > a:first-child {
-            position: absolute;
-            top: 1.5rem;
-            left: 1.5rem;
-            border: 1px solid #E5E5E5;
-
-            @media screen and (min-width: 768px) {
-                display: none;
-            }   
-        }
-
-        ul {
-            position: absolute;
-            top: 2.75rem;
-            right: 2rem;
-            color: #1DA1F1; 
-        }
-
-        li { 
-            font-size: 1.25rem;
-        }
-
-    }
-    td {
-        display: inline-block;
-        vertical-align: middle;
-        width: 100%;
-        white-space: normal;
-        font-size: 1rem;
-        color: #394550;
-        border-top-width: 0;
-
-        @media screen and (min-width: 768px) {
-            display: table-cell;
-            width: initial;
-            border-top-width: 1px;   
-        }
-
-        &:first-child {
-            div{
-                div{
-                    margin-top: 1rem;
-                    font-size: 0.9rem;
-                }
-            }
-            padding-bottom: 0;
-            font-size: 1.25rem;
-            @media screen and (min-width: 768px) {
-                padding-bottom: 1rem;
-                font-size: initial;
-            }
-        }
-
-        &:nth-child(2){
-           padding-top: 0;
-           padding-bottom: 0;
-           color: #668EB5;
-            @media screen and (min-width: 768px) {
-                padding-top: 1rem;
-                padding-bottom: 1rem;
-                color: #394550;
-            }
-        }
-
-        &:nth-child(3){
-           padding-top: 0;
-           div {
-               span {
-                   margin-top: 2rem;
-               }
-           }
-
-            @media screen and (min-width: 768px) {
-                padding-top: 1rem;
-            }
-        }
-
-        &:last-child {
-            display: none;
-            @media screen and (min-width: 768px) {
-                display: table-cell;
-            }
-        }
-        
-        .btn {
-            display: block;
-
-            @media screen and (min-width: 768px) {
-                display: inline-block;
-            }
-        }
-
-        span {
-            svg {
-                font-size: 0.83rem;
-            }
-        }
-        
-    }
-    .btn {
-        margin: 0;
-    }
-}
-</style>
+<template>
+    <div class="list-simple">
+        <!-- faz as coisas aqui -->
+            <div class="text-center">
+                <h3>Oportunidades abertas recentemente</h3>
+                <h6>Alinhados a estratégia de investir nos melhores profissionais para o alto desempenho das equipes e excelência em nosso processos voltados ao Sucesso de Nossos Clientes, é com grande satisfação que lhe convidamos a fazer parte do time {{companyName}}.</h6>
+            </div>
+            <hr />
+            <div class="row">
+                <div class="col-12 col-lg-4">
+                    <base-input>
+                        <el-select
+                            v-model="selects.city"
+                            filterable
+                            clearable
+                            placeholder="Filtrar cidade"
+                            class="select-primary">
+                            <el-option v-for="option in cities"
+                                        :key="option.label"
+                                        :label="option.label"
+                                        :value="option.value">
+                            </el-option>
+                        </el-select>
+                    </base-input>
+                </div>
+                <div class="col-12 col-lg-4">
+                    <base-input placeholder="Nome da vaga" v-model="selects.jobName"></base-input>
+                </div>
+                <div class="col-12 col-lg-4">
+                    <base-input>
+                        <el-select
+                            v-model="selects.hiringType"
+                            filterable
+                            clearable=""
+                            placeholder="Tipo de contratação"
+                            class="select-primary">
+                            <el-option v-for="option in hiringTypes"
+                                        :key="option.label"
+                                        :label="option.label"
+                                        :value="option.value">
+                            </el-option>
+                        </el-select>
+                    </base-input>
+                </div>
+            </div>
+            <table class="table table--card">
+                <thead>
+                    <tr>
+                        <th width="40%">Nome da Vaga</th>
+                        <th width="20%">Cidade</th>
+                        <th width="20%">Tipo de Contratação</th>
+                        <th width="20%">Ações</th>
+                    </tr>
+                </thead>
+                <tr class="" v-for="job in getJobsFiltered()" @click="redirectToJob(job)" v-bind:key="job.job_id" >
+                    <td class="job-name">
+                        <div class="mobile-content">
+                            <span class="avatar avatar-xl rounded-circle table-icon">
+                                <img alt="Laponia Veiculos" :src="companyLogo">
+                             </span>
+                            <ul class="list-inline">
+                                <!-- <li class="list-inline-item" v-on:click.prevent="callSaveJob(job.job_id)"><font-awesome-icon :icon="[!fullHeart ? 'far' : 'fas', 'heart']" class="mr-2"/></li> -->
+                                <li class="list-inline-item" v-on:click.prevent="callShareJob(job.job_id)"><font-awesome-icon :icon="['fas', 'share']" class="mr-0"/></li>
+                            </ul>
+                            <div class="text-uppercase">{{companyName}}</div>
+                        </div>
+                        <span>{{job.title}} </span>
+                        &nbsp;
+                        <badge tag="span" type="primary" class="bg-lighter" v-if="job.handicapped == 1">
+                            <font-awesome-icon :icon="['fas', 'wheelchair']" class=""/>
+                        </badge>
+                    </td>
+                    <td class="job-city">{{job.address.city_name}}</td>
+                    <td class="job-type">{{hiringType(job.type_hiring)}}
+                        <div class="mobile-content">
+                            <badge rounded tag="span" type="primary" class="bg-lighter">{{ fromNow(job.starting_date) }}</badge>
+                        </div>
+                    </td>
+                    <td class="text-right"><a :href="baseUrl + '/' +job.link" target="_blank" class="btn btn-outline-default">Ver vaga</a></td>
+                </tr>
+
+                <tr v-if="getJobsFiltered().length <= 0">
+                    <td colspan="4" class="text-center">Nenhuma vaga encontrada</td>
+                </tr>
+            </table>
+            <share-modal
+                :show="modals"
+                :url="jobLinkShare"
+            />
+        <slot></slot>
+    </div>
+</template>
+<script>
+import moment from 'moment';
+import 'moment/locale/pt-br';
+import { Select, Option } from 'element-ui';
+import ShareModal from "~/components/burh-ds/Modals/ShareModal.vue";
+import { userSaveJob } from '~/services/user';
+
+export default {
+  name: "list-vagas",
+  components: {
+    [Select.name]: Select,
+    [Option.name]: Option,
+    ShareModal
+  },
+  props: {
+      sm: Boolean,
+      md: Boolean,
+      img: String,
+      bg: String,
+      fullHeart: {
+        type: Boolean,
+        default: false
+      },
+      jobs: {
+        type: Array,
+        default: function() { return [] }
+      },
+      companyName: String,
+      companyLogo: String
+  },
+  methods: {
+      async callSaveJob(id) {
+          this.childClickPrevent = true;
+          let res = await userSaveJob(id);
+
+      },
+
+      callShareJob(jobId){
+          this.childClickPrevent = true;
+          this.jobLinkShare = process.env.baseAppUrl + '/vagas/' + jobId;
+          this.modals.modal0 = true;
+      },
+
+      redirectToJob(job) {
+        if(!this.childClickPrevent){
+            if(window.innerWidth <= 768) {
+                window.open(this.baseUrl + '/' + job.link);
+            }
+        }else{
+            this.childClickPrevent = false;
+        }
+      },
+      fromNow(date, format = "YYYY-MM-DD") {
+          return moment(date, format).locale('pt-BR').fromNow()
+      },
+
+      hiringType(number) {
+          if(number == 2) {
+              return "CLT";
+          } else if(number == 3) {
+              return "CNPJ";
+          } else if(number == 4) {
+              return "Estágio";
+          } else if(number == 5) {
+              return 'RPA';
+          } else if(number == 6) {
+              return 'Temporário';
+          } else {
+              return '';
+          }
+      },
+
+      getJobsFiltered() {
+          return this.jobs.filter((job) => {
+            let filterByJobName = (this.selects.jobName != null && this.selects.jobName != '');
+            let filterByCityName = (this.selects.city != null && this.selects.city != '');
+            let filterByHiringType = (this.selects.hiringType != null && this.selects.hiringType != '');
+
+            let condition =    (filterByCityName    ? job.address.city_name == this.selects.city : true)
+                            && (filterByJobName     ? job.title.toLowerCase().indexOf(this.selects.jobName.toLowerCase()) > -1 : true)
+                            && (filterByHiringType  ? job.type_hiring == this.selects.hiringType : true)
+
+            return condition;
+          });
+      }
+  },
+  data() {
+    return {
+        baseUrl: process.env.baseAppUrl,
+        selects: {
+          simple: 'Badges',
+          city: '',
+          jobName: '',
+          hiringType: ''
+        },
+        cities: [],
+        hiringTypes: [],
+        modals: {
+            modal0: false
+        },
+        jobLinkShare: '',
+        childClickPrevent: false
+
+    }
+  },
+
+  mounted() {
+    let cities = [];
+
+    for(let job of this.jobs) {
+        if(cities.filter((city) => {
+            return city.value == job.address.city_name
+        }).length <= 0) {
+            cities.push({
+                label: job.address.city_name,
+                value: job.address.city_name
+            })
+        }
+    }
+
+    this.cities = cities;
+
+    let hiringTypes = [];
+
+    for(let job of this.jobs) {
+        if(hiringTypes.filter((hp) => {
+            return this.hiringType(hp.value) == this.hiringType(job.type_hiring)
+        }).length <= 0) {
+            hiringTypes.push({
+                label: this.hiringType(job.type_hiring),
+                value: job.type_hiring
+            })
+        }
+    }
+
+    this.hiringTypes = hiringTypes;
+  }
+};
+</script>
+<style lang="scss">
+
+.list-simple {
+    @media screen and (min-width: 1440px) {
+        max-width: 1440px;
+        margin: 0 auto;
+    }
+    .avatar-xl{
+        border: 1px solid #E5E5E5;
+    }
+}
+
+.table--card {
+    thead {
+        display: none;
+        height: 0;
+        border: 0;
+        overflow: hidden;
+
+        th {
+            border-top: 0;
+            opacity: 0;
+        }
+        @media screen and (min-width: 768px) {
+            display: table-header-group;
+        }
+    }
+    .mobile-content {
+        @media screen and (min-width: 768px) {
+            display: none;
+        }
+    }
+    > tr {
+        position: relative;
+        display: block;
+        margin: 1rem auto;
+
+        border: 1px solid #E5E5E5;
+        border-radius: 7px;
+        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
+
+        @media screen and (min-width: 768px) {
+            display: table-row;
+            margin-bottom: initial;
+            padding-top: initial;
+
+            border: 0;
+            border-radius: 0;
+            box-shadow: none;
+        }
+
+        &:first-child {
+            td {
+                border-top: 0;
+            }
+        }
+
+        &:last-child {
+            td:last-child {
+                border-bottom: 1px solid #E5E5E5;
+            }
+
+            @media screen and (min-width: 768px) {
+                td {
+                    border-bottom: 1px solid #E5E5E5;
+                }
+            }
+        }
+
+        & > a:first-child {
+            position: absolute;
+            top: 1.5rem;
+            left: 1.5rem;
+            border: 1px solid #E5E5E5;
+
+            @media screen and (min-width: 768px) {
+                display: none;
+            }
+        }
+
+        ul {
+            position: absolute;
+            top: 2.75rem;
+            right: 2rem;
+            color: #2a5ee8;
+        }
+
+        li {
+            font-size: 1.25rem;
+        }
+
+    }
+    td {
+        display: inline-block;
+        vertical-align: middle;
+        width: 100%;
+        white-space: normal;
+        font-size: 1rem;
+        color: #394550;
+        border-top-width: 0;
+
+        @media screen and (min-width: 768px) {
+            display: table-cell;
+            width: initial;
+            border-top-width: 1px;
+        }
+
+        &:first-child {
+            div{
+                div{
+                    margin-top: 1rem;
+                    font-size: 0.9rem;
+                }
+            }
+            padding-bottom: 0;
+            font-size: 1.25rem;
+            @media screen and (min-width: 768px) {
+                padding-bottom: 1rem;
+                font-size: initial;
+            }
+        }
+
+        &:nth-child(2){
+           padding-top: 0;
+           padding-bottom: 0;
+           color: #668EB5;
+            @media screen and (min-width: 768px) {
+                padding-top: 1rem;
+                padding-bottom: 1rem;
+                color: #394550;
+            }
+        }
+
+        &:nth-child(3){
+           padding-top: 0;
+           div {
+               span {
+                   margin-top: 2rem;
+               }
+           }
+
+            @media screen and (min-width: 768px) {
+                padding-top: 1rem;
+            }
+        }
+
+        &:last-child {
+            display: none;
+            @media screen and (min-width: 768px) {
+                display: table-cell;
+            }
+        }
+
+        .btn {
+            display: block;
+
+            @media screen and (min-width: 768px) {
+                display: inline-block;
+            }
+        }
+
+        span {
+            svg {
+                font-size: 0.83rem;
+            }
+        }
+
+    }
+    .btn {
+        margin: 0;
+    }
+}
+</style>