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

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>