List, filter, cards with vue.js

index.html

<div class="container">
  <!--Beginning of content-->
  <div id="draf-load" class="content">    
    <div class="col2 folder">      
      <section>        
        <div id="search-by-name">
          <span class="textprev">
            <input 
                   placeholder="Buscar nombre"
                   v-model="searchbyname"
                   id="elem528"
                   type="text">
            <i class="el el-search el-lg"></i>
          </span>
        </div>
        <div class="title">
          Cooperativos
        </div>
        <ul>
          <li v-for="item in folderFilterSystem" 
              v-on:click="selectFolder(item.id)"
              :key="item.id" 
              v-bind:class="{ folderSelect: item.state  }">
            {{item.name}}
          </li>
        </ul>
        <div class="title">
          Personales
          <span v-on:click="showCreateFolder()"
                class="iconfolder">
          <i class="el el-plus"></i>
          </span>
        </div>
        <ul>
          <li v-for="item in folderFilterPerson" 
              v-on:click="selectFolder(item.id)"
              :key="item.id" 
              v-bind:class="{ folderSelect: item.state  }">
            {{item.name}}
            <span v-on:click="deleteFolder(item.id)"
              class="iconfolder">
              <i class="el el-minus"></i>
            </span>
          </li>
          
          <li class="inputNewFolder"
              v-bind:class="{ newFolder: stateNewFolder }">
            <input type='text' 
                   placeholder="Nombre"
                   v-model="nameNewFolder">
            <span v-on:click="hideCreateFolder()">
              <i class="el el-trash"></i>
            </span>
            <span v-on:click="createFolder()">
              <i class="el el-ok"></i>
            </span>

          </li>
        </ul>
      </section>
    </div>
    <div class="col3 removeMargin">
      <section>
        <div class="generalMenu"><div>
      </section>
      <section class="draftlist">
        <div class="filterdraft">
          <input class="allselect" v-bind:class="{ inputMark: inputMark }" v-model="markAllInput" v-on:change="markInputAll" type="checkbox" />
          <div class="dropdown">
            <div class="filterbutton">
              Marcar <i class="el el-chevron-down"></i>
            </div>
            <div class="dropdown-content">
              <div class='titleFilter'>Marcar</div>
              <a v-on:click="markDraft('Sin leer')">Sin leer</a>
              <a v-on:click="markDraft('Leidos')">Leidos</a>
            </div>
          </div>
          
          <div class="dropdown">
            <div class="filterbutton">
              Filtrar <i class="el el-chevron-down"></i>
            </div>
            <div class="dropdown-content">
              <div class='titleFilter'>Filtrar </div>
              <a v-on:click="filterKey = 'Todos'">Todos</a>
              <a v-on:click="filterKey = 'Sin Leer'">Sin leer</a>
              <a v-on:click="filterKey = 'Leidos'">Leidos</a>
            </div>
          </div>
          
          <div class="dropdown">
            <div class="filterbutton">
              Mover <i class="el el-chevron-down"></i>
            </div>
            <div class="dropdown-content">
              <div class='titleFilter'>Mover </div>
              <a  v-for="folder in systemFolder" :key="folder.id" v-on:click="moveDraft(folder.value)">{{folder.name}}</a>
            </div>
          </div>
        </div>
        <div class="stateData">
          <span><i class="el el-folder-open"></i>
 {{nameNewFolder}}</span>
          <br>
          <span><i class="el el-filter"></i>
 {{filterKey}}</span>
          <span v-if=searchbyname> <i class="el el-filter"></i> {{searchbyname}} </span>
        </div>
        <ul class="draft">
          <li v-for="item in draftFilter" :key="item.id" v-bind:class="{ draftselect: item.isSelect, draftselectRead: item.read }" v-on:click="selectDraft(item.id)">
            <div class='highlight'></div>
            <input type="checkbox" class='inputHidden' v-model='item.isChecked' v-on:change="showAllinput(item.isChecked)" v-bind:class="{ inputMark: inputMark ,draftselect: item.isSelect }" />
            <div class='titleDraft'>
              {{ item.id }} {{ item.pasto }} {{ item.user }}
            </div>

            <div class='segline'>
              <span class='name'>
          {{ item.name }}
        </span>
              <span class='date'>
          {{ item.date }}
        </span>
            </div>
            <div class='thiline'>
              {{ item.depe }}
            </div>
          </li>
        </ul>
      </section>
    </div>
    <div class="col7"></div>
  </div>
  <!-- /content -->
</div>
<!-- /container -->

list-filter-cards-with-vue-js.markdown

List, filter, cards with vue.js

Using vue to create cards with double filters, bring data from services and create responsive application

A Pen by aurigadl on CodePen.

License.

script.js

var vm = new Vue({
  el: "#draf-load",

  data: {
    filterKey: "Todos",
    inputAll: false,
    inputMark: false,
    markAllInput: false,
    stateNewFolder: false,
    nameNewFolder: 'Aprobación',
    searchbyname: '',

    systemFolder: [
      {name:'Aprobación',
       state: true,
       id: 1,
       type: 'system',
       value:'aproved'},
      {name:'Notificados',
       state:false,
       type: 'system',
       id: 2,
       value:'notification'}, 
      {name:'Enviados',
       state:false,
       type: 'system',
       id: 3,
       value:'send'},      
      {name:'Mi colore',
       state:false,
       type: 'person',
       id: 300,
       value:'micolore'},
      {name:'Textos',
       state:false,
       type: 'person',
       id: 400,
       value:'textos'}
    ],
    draft: []
  },

  created() {
    var valData = [
      {
        id: 217,
        date: "22/01/2017 22:22",
        name: "Una mas colores y ",
        user: "El señor de usuario",
        depe: "Sub direccion de zapatos",
        read: false,
        folder: "notification"
      },
      {
        id: 5432,
        date: "22/01/2017 22:22",
        name: "Una mas colores y ",
        user: "El señor de usuario",
        depe: "colores zapatos",
        read: false,
        folder: "send"
      },
      {
        id: 211,
        date: "22/01/2017 22:22",
        name: "Una carta para mi amigo",
        user: "El señor usuario",
        depe: "Sub direccion de zapatos",
        read: false,
        folder: "send"
      },
      {
        id: 111,
        date: "22/01/2017 22:22",
        name: "Este ñ es el comunicado Julian Assange y toda su comitiva",
        user: "El señor pedro paramo buendia de la concepcion izaguirre",
        depe: "Gestión de Documentos para la colombia unida y alrededores",
        read: true,
        folder: "aproved"
      },
      {
        id: 300,
        pasto: "sss",
        date: "22/04/2015 21:22",
        name: "Otra cartaAntes á del mundo",
        user: "Antes de si anillo",
        depe: "Departamento de minas y esferos",
        read: true,
        folder: "aproved"
      },
      {
        id: 360,
        date: "02/01/2011 21:22",
        name: "Antes del mundo",
        user: "Antes de si anillo",
        depe: "Agencia de viajes",
        read: false,
        folder: "notifications"
      }
    ];

    valData.forEach(function(element, index, array) {
      array[index].isSelect = false;
      array[index].isChecked = false;
    });

    this.draft = valData;
  },

  computed: { 
    
    folderFilterSystem: function (){
      return this.systemFolder.filter(function(element){
        return element.type === 'system';
      });
    },
    
    folderFilterPerson: function (){
      return this.systemFolder.filter(function(element){
        return element.type === 'person';
      });
    },
    
    draftFilter: function() {
      var folder = 'aproved';      
      this.systemFolder.forEach(function(element, index, array) {
        if (element.state) {
          folder = element.value;
        }
      });      

      switch (this.filterKey) {
        case "Leidos":
          return this.draft.filter(function(tempDraft){
            return tempDraft.folder === folder;
          }).filter(function(tempDraft) {            
            return tempDraft.read === true;
          }).filter(function(tempDraft){
             return this.filterByName(tempDraft);
          },this);
          break;
        case "Sin Leer":
          return this.draft.filter(function(tempDraft){
            return tempDraft.folder === folder;
          }).filter(function(tempDraft) {
            return tempDraft.read === false;
          }).filter(function(tempDraft){
             return this.filterByName(tempDraft);
          },this);
          break;
        default:
          return this.draft.filter(function(tempDraft){
            return tempDraft.folder === folder;
          }).filter(function(tempDraft){
             return this.filterByName(tempDraft);
          },this);
      }
    }
  },

  // define methods under the `methods` object
  methods: {
    filterByName: function(tempDraft){        
      var lowname = tempDraft.name.toLowerCase();
      var lowsear = this.searchbyname.toLowerCase();
      var patt = new RegExp(lowsear);
      
      if(lowsear.length === 0){     
        return true;
      }else{
        console.log(lowname);
        return patt.test(lowname);
      }
    },
    
    showCreateFolder: function() {
      this.stateNewFolder = true;
    },
    
    hideCreateFolder: function() {
      this.stateNewFolder = false;
      this.nameNewFolder = '';
    },
    
    createFolder: function(){
      var d = new Date();
      var name = this.nameNewFolder.replace(/[^a-zA-Z ]/g, "")
      var id = d.getTime();
      var temp = { name: this.nameNewFolder,
                   state:false,
                   type: 'person',
                   id: id,
                   value:name};
      
      this.systemFolder.push(temp);
      this.stateNewFolder = false;
      this.nameNewFolder = '';
      
    },    
    
    deleteFolder: function(id) {
      this.systemFolder.forEach(function(element, index, array) {
        if (element.id === id) {
          array.splice(index, 1);
        } 
      });
    },
    
    moveDraft: function(folder){
      this.draft.forEach(function(element, index, array) {
        if (element.isChecked) {
          Vue.set(array[index], "folder", folder);
        }
      });
    },
    
    markInputAll: function() {
      const allInput = this.markAllInput;
      this.inputMark = allInput;

      this.draftFilter.forEach(function(element, index, array) {
        element.isChecked = allInput;
      });
    },

    showAllinput: function(e) {
      var tmpState = false;
      this.draft.forEach(function(element) {
        if (element.isChecked) {
          tmpState = true;
        }
      });
      this.inputMark = tmpState;
    },

    markDraft: function(mark) {
      switch (mark) {
        case "Leidos":
          this.draft.forEach(function(element, index, array) {
            if (element.isChecked) {
              Vue.set(array[index], "read", true);
            }
          });
          break;
        case "Sin leer":
          this.draft.forEach(function(element, index, array) {
            if (element.isChecked) {
              Vue.set(array[index], "read", false);
            }
          });
          break;
      }
    },

    selectFolder: function(id) {
      var folderSelected = '';
      this.systemFolder.forEach(function(element, index, array) {
        if (element.id === id) {
          Vue.set(array[index], "state", true);
          folderSelected = element.name;
        } else {
          Vue.set(array[index], "state", false);
        }
      });
      this.nameNewFolder = folderSelected;
    },
    
    selectDraft: function(id) {
      this.draft.forEach(function(element, index, array) {
        if (element.id === id) {
          Vue.set(array[index], "isSelect", true);
          Vue.set(array[index], "read", true);
        } else {
          array[index].isSelect = false;
        }
      });
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

style.scss

//colors
$colo_orange_links_approx: #FF9900;
$color_title_sup_approx: #333;
$color_over_li_approx: #dedede;
$color_select_li_approx: #DCECF9;
$color_select_item: #424140;
$color_background: #f4f4f4;
$color_background_menu_sup: #F4F9FD;
$opacity_input_checkbox: 0.5;
//fonts
$font_0: Verdana;
$font_1: Arial;
$font_2: Helvetica;
$font_3: sans-serif;

/*
Responsive Aeon Grid System v1.0.0
Designed & Built by Fernando Monteiro, http://www.newaeonweb.com.br 
Licensed under MIT license, http://opensource.org/licenses/mit-license.php
Base stylesheet with CSS Reset, grid and progressive responsiveness
*/

/* Simple reset just for Body element  */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: $font_0, $font_1, $font_2, $font_3;
  font-size: 12px;
  color: $color_title_sup_approx;
}
/* Container Bases */

.container {
  margin: 0 auto;
  width: 100%;
}
.content {
  max-width: 100%;
  margin: 0px;
}
/* Grid Variable */
[class*="col"] {
  display: inline;
  float: left;
  position: relative;
  margin-left: 1%;
  margin-right: 1%;
}
[class*="col"]:last-child {
  margin-right: 0;
}
/* General Grid */

.col1 {
  width: 6.333%;
}
.col2 {
  width: 14.667%;
}
.col3 {
  width: 23%;
}
.col4 {
  width: 31.333%;
}
.col5 {
  width: 39.667%;
}
.col6 {
  width: 48%;
}
.col7 {
  width: 56.333%;
}
.col8 {
  width: 64.667%;
}
.col9 {
  width: 73%;
}
.col10 {
  width: 81.333%;
}
.col11 {
  width: 89.667%;
}
.col12 {
  margin-left: 0;
  width: 100%;
}
/* General small screen Mobile  */

@media handheld, only screen and (max-width: 768px) {
  body {
    font-size: 1.0em;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
  }
  .content {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .col1,
  .col2,
  .col3,
  .col4,
  .col5,
  .col6,
  .col7,
  .col8,
  .col9,
  .col10,
  .col11,
  .col12 {
    width: 98%;
  }
}
/* Clear Helpers */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before, .clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
/* Media - Fluid Images - Video */
figure {
  margin: 0;
}
object, embed, video {
  max-width: 100%;
  _width: 100%;
}
/* Fluid images */

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
/* Improve IE's resizing of images */

svg:not(:root) {
  overflow: hidden;
}
/* Correct IE9 overflow */

img {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  _width: 100%;
  height: auto;
  vertical-align: middle;
}
img[src*="maps.gstatic.com"], img[src*="googleapis.com"] {
  max-width: none;
}

/****************************************************/
.transition {
  transition-property: color background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

/***************************************************
Folder
***************************************************/
.removeMargin {
  margin: 0px;
  border-right: 1px #d5d5d5 solid;
  min-width: 320px;
}

.folder {
  position: relative;
  background-color: $color_background;
  margin: 0px;
  min-width: 186px;
  border-right: 1px #d5d5d5 solid;

  .iconfolder {
    position: absolute;
    right: 20px;
    color: $colo_orange_links_approx;
    cursor: pointer !important;
  }

  .title {
    font-size: 16px;
    font-weight: normal;
    height: 30px;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 40px;

    span {
      opacity: 0;
    }

    @extend .transition;

    &:hover {
      span {
        opacity: 1;
      }
    }
  }

  #search-by-name {
    height: 40px;
    margin: 0;
    max-width: 100%;
    background-color: $color_background_menu_sup;
    vertical-align: middle;
    padding-top: 12px;
    position: relative;

    .textprev {
      margin: 15px 6px;
      input[type="text"] {
        padding: 0px;
        padding-left: 17px;
        border: none;
        width: 157px;
        background: transparent;
        font-size: 14px;
        text-transform: lowercase;
      }
      i {
        color: $colo_orange_links_approx;
        margin-left: -10px;
      }
    }
  }

  ul {
    position: relative;
    cursor: default;
    outline: none;
    padding: 0;

    li {
      list-style-type: none;
      position: relative;
      height: 35px;
      padding-top: 10px;
      padding-left: 40px;

      span {
        opacity: 0;
      }
      @extend .transition;
      &:hover {
        background-color: $color_over_li_approx;
        span {
          opacity: 1;
        }
      }
    }
    .inputNewFolder {
      padding-top: 3px;
      padding-right: 18px;
      display: none;

      input[type="text"] {
        width: 70%;
        position: relative;
        height: 27px;
        font-size: 14px;
        font-weight: bold;
      }
      span {
        height: 27px;
        float: right;
        text-align: center;
        margin-left: 4px;
        opacity: 1 !important;
        cursor: pointer !important;
        color: $colo_orange_links_approx;
      }
    }

    .newFolder {
      display: block;
    }
    
    .folderSelect {
      background-color: $color_select_li_approx;
      font-weight: bold;
      @extend .transition;
    }
  }
}

/***************************************************
Select Draft
***************************************************/
.generalMenu{
  height: 30px;
  background-color: $color_background_menu_sup
}

.draftlist {
  position: relative;
  .stateData{
    border-bottom: 1px #d5d5d5 solid;
    padding-left: 12px;
    padding-bottom: 5px;
    padding-top: 20px;
    font-size: 1.1em;
    
  }
}

.filterdraft {
  position: relative;
  padding: 0 25px 0 29px;
  height: 20px;
  margin-top: 5px;
  color: $colo_orange_links_approx;
  font-size: 14px;
  margin-left: 10px;
  &:hover .allselect {
    opacity: $opacity_input_checkbox !important;
  }

  //Select all
  .allselect {
    position: absolute;
    left: 5px;
    outline: 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
  }

  // Dropdown button with pure css
  .filterbutton {
    padding: 0;
    left: 13px;
    cursor: pointer !important;
  }

  .dropdown {
    float: right;
    position: relative;
    display: inline-block;
    margin-left: 10px;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 130px;
    box-shadow: -2px 6px 6px 0px rgba(0, 0, 0, 0.3);
    z-index: 100;
    right: 0px;
  }

  .dropdown-content a {
    color: $color_title_sup_approx;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    display: block;
    line-height: 30px;
    padding-left: 20px;
    padding-right: 10px;
  }
}

.titleFilter {
  line-height: 30px;
  padding-left: 20px;
  padding-right: 10px;
}

.dropdown-content a:hover {
  background-color: $color_over_li_approx;
}

.dropdown:hover .dropdown-content {
  display: block;
}

//list draft select
.draft {
  position: relative;
  cursor: default;
  outline: none;
  padding: 0;
  li {
    list-style-type: none;
    position: relative;
    margin-bottom: 1px;

    height: 77px;
    padding-top: 10px;
    @extend .transition;

    .titleDraft {
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: normal;
      padding-left: 30px;
      width: 80%;
    }

    .segline {
      margin-top: 5px;
      color: $colo_orange_links_approx;
      padding-left: 30px;
      white-space: nowrap;
      overflow: hidden;
      width: 65%;
      @extend .transition;
    }

    .thiline {
      width: auto;
      white-space: nowrap;
      overflow: hidden;
      opacity: $opacity_input_checkbox;
      margin-top: 4px;
      padding-left: 30px;
      width: 75%;
    }

    &:hover {
      background-color: $color_over_li_approx;
    }

    &:hover .highlight {
      background-color: $color_over_li_approx;
    }

    &:hover input {
      opacity: $opacity_input_checkbox;
    }
  }

  .highlight {
    position: absolute;
    left: 0;
    height: 77px;
    width: 3px;
    top: 0;
    align-content: baseline;
    background-color: $colo_orange_links_approx;
  }

  .date {
    text-align: right;
    position: absolute;
    right: 10px;
    font-size: 11px;
    top: 34px;
    width: 66px;
    white-space: pre-line;
  }

  .inputHidden {
    position: absolute;
    outline: 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    top: 10px;
    left: 5px;
    padding: 4px;
  }
}

.draftselect {
  background-color: $color_select_li_approx;
  @extend .transition;
  .highlight {
    background-color: $color_select_li_approx !important;
  }

  opacity: 1 !important;
}

.draftselectRead {
  .highlight {
    background-color: #fff;
  }
  .segline {
    color: $color_select_item !important;
  }
}

.inputMark {
  opacity: $opacity_input_checkbox !important;
}

styles

<link href="https://elusiveicons.com/assets/elusive-icons/css/elusive-icons.css" rel="stylesheet" />