c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

open modal when selecting an item in cards

Browse source
This commit is contained in:
busti 2019-12-12 19:52:23 +01:00
parent 4bb8900d3a
commit 8981b99f6e
5 changed files with 925 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/views/Items.vue
View file

@ -1,24 +1,38 @@
<template>
<div class="container-fluid px-xl-5 mt-3">
<Modal title="Edit Item" v-if="selectedItem" @close="closeModal()">
<template #body>
<EditItem
:item="selectedItem"
badge="item_uid"
:fields="['bezeichnung', 'container']"
/>
</template>
<template #buttons>
<button type="button" class="btn btn-secondary" @click="closeModal()">Cancel</button>
<button type="button" class="btn btn-success">Save Changes</button>
</template>
</Modal>
<div class="row" v-if="layout === 'table'">
<div class="col-xl-8 offset-xl-2">
<Table
:columns="['uid', 'description', 'box']"
:items="loadedItems"
:keyName="'uid'"
:columns="['uid', 'description', 'box']"
:items="loadedItems"
:keyName="'uid'"
/>
</div>
</div>
<Cards
v-if="layout === 'cards'"
:columns="['uid', 'description', 'box']"
:items="loadedItems"
:keyName="'uid'"
v-slot="{ item }"
v-if="layout === 'cards'"
:columns="['uid', 'description', 'box']"
:items="loadedItems"
:keyName="'uid'"
v-slot="{ item }"
@itemActivated="selectedItem = $event"
>
<img
:src="`https://c3lf.de/api/1/thumbs/${item.file}`"
class="card-img-top img-fluid"
:src="`https://c3lf.de/api/1/thumbs/${item.file}`"
class="card-img-top img-fluid"
>
<div class="card-body">
<h6 class="card-title">{{ item.description }}</h6>
@ -31,13 +45,22 @@
<script>
import Table from '@/components/Table';
import Cards from '@/components/Cards';
import Modal from '@/components/Modal';
import EditItem from '@/components/EditItem';
import { mapState } from 'vuex';
export default {
name: 'Items',
components: { Table, Cards },
data: () => ({
selectedItem: null
}),
components: { Table, Cards, Modal, EditItem },
computed: mapState(['loadedItems', 'layout']),
methods: {
closeModal: function () {
console.log('asdasd');
this.selectedItem = null;
}
}
};
</script>