1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <template>
- <b-overlay :show="filteredNodes === undefined" class="h-100" z-index="0">
- <div class="kit-list">
- <header class="kit-list-header">
- <div class="kit-list-header-intro">
- FIXME Intro
- </div>
- <search-input v-model="search" class="input-search" />
- </header>
- <div class="kit-list-container nodes-grid">
- <node-view
- v-for="node in filteredNodes" :key="'kit-' + node.id"
- :node="node"
- mode="card"
- @click.native.capture="$emit('open-node', node.id)"
- />
- </div>
- </div>
- </b-overlay>
- </template>
- <script>
- import { mapGetters } from 'vuex'
- import { NodeView } from '@/components/nodes'
- import { SearchInput } from '@/components/formItems'
- import { searchInNode } from '@/store/utils'
- export default {
- name: 'KitList',
- components: {
- NodeView,
- SearchInput
- },
- props: {
- },
- data () {
- return {
- search: ''
- }
- },
- computed: {
- ...mapGetters(['sheets']),
- filteredNodes () {
- if (!this.sheets) return
- const search = this.search.toLowerCase()
- return this.sheets.filter(node => searchInNode(search, node))
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .kit-list {
- padding: 1.15rem;
- overflow-y: auto;
- height: 100%;
- @include media-breakpoint-up($size-bp) {
- padding: 2.15rem;
- }
- &-header {
- margin-bottom: 1.15rem;
- @include media-breakpoint-up($size-bp) {
- display: flex;
- justify-content: space-between;
- margin-bottom: 2.15rem;
- }
- .input-search {
- min-width: 30%;
- margin-bottom: 2.15rem;
- margin-top: 1.15rem;
- @include media-breakpoint-up($size-bp) {
- margin: 0;
- margin-left: 1.15rem;
- }
- }
- }
- .node-view {
- cursor: pointer;
- }
- }
- </style>
|