open modal when selecting an item in cards

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

1035
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -30,7 +30,12 @@
</div> </div>
<div class="col-lg-9 col-xl-8"> <div class="col-lg-9 col-xl-8">
<div class="card-columns"> <div class="card-columns">
<div class="card-list-item card bg-dark text-light" v-for="item in internalItems" :key="item[keyName]"> <div
class="card-list-item card bg-dark text-light"
v-for="item in internalItems"
:key="item[keyName]"
@click="$emit('itemActivated', item)"
>
<slot v-bind:item="item"/> <slot v-bind:item="item"/>
</div> </div>
</div> </div>

View file

@ -0,0 +1,22 @@
<template>
<div>
<img class="img-fluid rounded mx-auto d-block mb-3" :src="`https://c3lf.de/api/1/thumbs/${item.file}`"/>
<h6>Editing Item <span class="badge badge-secondary">#{{ item[badge] }}</span></h6>
<form>
<div class="form-group" v-for="field in fields" :key="field">
<label>{{ field }}</label>
<input type="text" class="form-control" v-model="item[field]">
</div>
</form>
</div>
</template>
<script>
export default {
name: 'Add',
props: ['item', 'badge', 'fields']
};
</script>
<style>
</style>

View file

@ -1,19 +1,26 @@
<template> <template>
<div class="modal" tabindex="-1"> <div class="modal" tabindex="-1">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-xl">
<div class="modal-content bg-dark text-light border-secondary"> <div class="modal-content bg-dark text-light border-secondary">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Modal title</h5> <h5 class="modal-title">{{ title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" @click="$emit('close')" aria-label="Close">
<font-awesome-icon icon="window-close" class="text-light"></font-awesome-icon> <font-awesome-icon icon="window-close" class="text-light"/>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Modal body text goes here.</p> <slot name="body">
<div class="alert alert-danger">
Modal body is empty
</div>
</slot>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <slot name="buttons">
<button type="button" class="btn btn-primary">Save changes</button> <div class="alert alert-danger">
Modal footer is empty
</div>
</slot>
</div> </div>
</div> </div>
</div> </div>
@ -22,7 +29,8 @@
<script> <script>
export default { export default {
name: 'Modal' name: 'Modal',
props: ['title']
}; };
</script> </script>

View file

@ -1,5 +1,18 @@
<template> <template>
<div class="container-fluid px-xl-5 mt-3"> <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="row" v-if="layout === 'table'">
<div class="col-xl-8 offset-xl-2"> <div class="col-xl-8 offset-xl-2">
<Table <Table
@ -15,6 +28,7 @@
:items="loadedItems" :items="loadedItems"
:keyName="'uid'" :keyName="'uid'"
v-slot="{ item }" v-slot="{ item }"
@itemActivated="selectedItem = $event"
> >
<img <img
:src="`https://c3lf.de/api/1/thumbs/${item.file}`" :src="`https://c3lf.de/api/1/thumbs/${item.file}`"
@ -31,13 +45,22 @@
<script> <script>
import Table from '@/components/Table'; import Table from '@/components/Table';
import Cards from '@/components/Cards'; import Cards from '@/components/Cards';
import Modal from '@/components/Modal';
import EditItem from '@/components/EditItem';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
export default { export default {
name: 'Items', name: 'Items',
components: { Table, Cards }, data: () => ({
selectedItem: null
}),
components: { Table, Cards, Modal, EditItem },
computed: mapState(['loadedItems', 'layout']), computed: mapState(['loadedItems', 'layout']),
methods: { methods: {
closeModal: function () {
console.log('asdasd');
this.selectedItem = null;
}
} }
}; };
</script> </script>