project-search-bar.ejs 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <nav class="navbar navbar-expand-lg navbar-light bg-secondary">
  2. <div class="col-auto" style="padding-left: 0px;">
  3. <div class="btn-group align-items-center" role="group" aria-label="Basic example" style="margin-right: 10px;">
  4. <button type="button" class="btn btn-light noselect" v-on:click="view.type = 'thumbnails'"
  5. v-bind:class= "view.type == 'thumbnails' ? 'active' : ''" >
  6. <i class="fas fa-th"></i>
  7. </button>
  8. <button type="button" class="btn btn-light noselect" v-on:click="view.type = 'cards'"
  9. v-bind:class= "view.type == 'cards' ? 'active' : ''" >
  10. <i class="fas fa-th-large"></i>
  11. </button>
  12. <button type="button" class="btn btn-light"><i class="fas fa-bars"></i></button>
  13. <button type="button" class="btn btn-light"><i class="fas fa-couch"></i></i></button>
  14. <button type="button" class="btn btn-light"><i class="fas fa-list"></i></button>
  15. </div>
  16. </div>
  17. <div class="col-6">
  18. <form class="form-inline">
  19. <div class="input-group col-12">
  20. <div class="input-group-prepend">
  21. <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
  22. </div>
  23. <vue-tags-input
  24. v-model="search_query"
  25. :tags="search_tags"
  26. :autocomplete-items="filterSearchTerms"
  27. @tags-changed="newTags => search_tags = newTags"
  28. v-on:change="filterProjects"
  29. class="tags-input"
  30. style="max-width: none; width: 90%;"
  31. >
  32. <div
  33. slot="autocomplete-item"
  34. slot-scope="props"
  35. class="my-item"
  36. @click="props.performAdd(props.item)"
  37. >
  38. <i v-bind:class="getSearchTagIcon(props.item.type)" class="fas"></i> {{ props.item.text }}
  39. </div>
  40. <div
  41. slot="tag-left"
  42. slot-scope="props"
  43. class="my-tag-left"
  44. @click="props.performOpenEdit(props.index)"
  45. >
  46. <i v-bind:class="getSearchTagIcon(props.tag.type)" class="fas space-left"></i>
  47. </div>
  48. </vue-tags-input>
  49. </div>
  50. </form>
  51. </div>
  52. <div class="col-auto">
  53. <div class="dropdown">
  54. <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  55. <i class="fas fa-tags"></i> Tags
  56. </button>
  57. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  58. <a class="dropdown-item" href="#">Action</a>
  59. <a class="dropdown-item" href="#">Another action</a>
  60. <a class="dropdown-item" href="#">Something else here</a>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="col-auto">
  65. <div class="dropdown">
  66. <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  67. <i class="fas fa-filter"></i> Filters
  68. </button>
  69. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  70. <a class="dropdown-item" href="#">Action</a>
  71. <a class="dropdown-item" href="#">Another action</a>
  72. <a class="dropdown-item" href="#">Something else here</a>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="col-auto">
  77. <div class="dropdown">
  78. <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  79. <i class="fas fa-eye"></i> Show
  80. </button>
  81. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  82. <a class="dropdown-item" href="#">Action</a>
  83. <a class="dropdown-item" href="#">Another action</a>
  84. <a class="dropdown-item" href="#">Something else here</a>
  85. </div>
  86. </div>
  87. </div>
  88. </nav>