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

use slot in table too

Browse source
This commit is contained in:
j3d1 2019-12-24 14:40:01 +01:00
parent 52dcab03ba
commit 6290eee156
3 changed files with 18 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Table.vue
View file

@ -24,16 +24,14 @@
>
</div>
</th>
<th>actions</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="item in internalItems" :key="item[keyName]" @click="$emit('itemActivated', item)">
<td v-for="(column, index) in columns" :key="index">{{ item[column] }}</td>
<td>
<div class="btn-group">
<button class="btn btn-outline-secondary" v-for="(action, a_index) in actions" :key="a_index" @click.stop="action.fun&&action.fun(item)" >{{action.name}}</button>
</div>
<slot v-bind:item="item"/>
</td>
</tr>
</tbody>

13
src/views/Boxes.vue
View file

@ -4,14 +4,15 @@
<div class="col-xl-8 offset-xl-2">
<Table
:columns="['cid', 'name']"
:actions="[
{name:'enlarge'},
{name:'content', fun: item => showBoxContent(item.name)},
{name:'delete'},
]"
:items="loadedBoxes"
:keyName="'cid'"
/>
v-slot="{ item }"
>
<div class="btn-group">
<button class="btn btn-outline-secondary" @click.stop="showBoxContent(item.name)" >content</button>
<button class="btn btn-outline-secondary" @click.stop="" >delete</button>
</div>
</Table>
</div>
</div>
</div>

19
src/views/Items.vue
View file

@ -17,22 +17,21 @@
<div class="col-xl-8 offset-xl-2">
<Table
:columns="['uid', 'description', 'box']"
:actions="[
{name: 'enlarge', fun: item => openEditingModalWith(item)},
{name: 'delete',fun: item => deleteItem(item)}
]"
:items="loadedItems"
:keyName="'uid'"
v-slot="{ item }"
@itemActivated="openLightboxModalWith($event)"
/>
>
<div class="btn-group">
<button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)" >edit</button>
<button class="btn btn-outline-secondary" @click.stop="deleteItem(item)" >delete</button>
</div>
</Table>
</div>
</div>
<Cards
v-if="layout === 'cards'"
:columns="['uid', 'description', 'box']"
:actions="[
{name: 'delete'}
]"
:items="loadedItems"
:keyName="'uid'"
v-slot="{ item }"
@ -48,10 +47,10 @@
<div class="row mx-auto mt-2">
<div class="btn-group">
<button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)">
Edit
edit
</button>
<button class="btn btn-outline-secondary" @click.stop="deleteItem(item)">
Delete
delete
</button>
</div>
</div>