c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 26 Pull requests Releases Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

1035
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

7
src/components/Cards.vue
View file

@ -30,7 +30,12 @@
</div>
<div class="col-lg-9 col-xl-8">
<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"/>
</div>
</div>

22
src/components/EditItem.vue Normal file
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>

24
src/components/Modal.vue
View file

@ -1,19 +1,26 @@
<template>
<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-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<font-awesome-icon icon="window-close" class="text-light"></font-awesome-icon>
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="close" @click="$emit('close')" aria-label="Close">
<font-awesome-icon icon="window-close" class="text-light"/>
</button>
</div>
<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 class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<slot name="buttons">
<div class="alert alert-danger">
Modal footer is empty
</div>
</slot>
</div>
</div>
</div>
@ -22,7 +29,8 @@
<script>
export default {
name: 'Modal'
name: 'Modal',
props: ['title']
};
</script>

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>