refactor: use slot name 'actions' in Table component
This commit is contained in:
parent
a458d4f850
commit
54a8445cd4
3 changed files with 40 additions and 35 deletions
|
@ -19,20 +19,21 @@
|
|||
:columns="['uid', 'description', 'box']"
|
||||
:items="loadedItems"
|
||||
:keyName="'uid'"
|
||||
v-slot="{ item }"
|
||||
@itemActivated="openLightboxModalWith($event)"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-success" @click.stop="markItemReturned(item)" title="returned">
|
||||
<font-awesome-icon icon="check"/>
|
||||
</button>
|
||||
<button class="btn btn-secondary" @click.stop="openEditingModalWith(item)" title="edit">
|
||||
<font-awesome-icon icon="edit"/>
|
||||
</button>
|
||||
<button class="btn btn-danger" @click.stop="deleteItem(item)" title="delete">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
</button>
|
||||
</div>
|
||||
<template #actions="{ item }">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-success" @click.stop="markItemReturned(item)" title="returned">
|
||||
<font-awesome-icon icon="check"/>
|
||||
</button>
|
||||
<button class="btn btn-secondary" @click.stop="openEditingModalWith(item)" title="edit">
|
||||
<font-awesome-icon icon="edit"/>
|
||||
</button>
|
||||
<button class="btn btn-danger" @click.stop="deleteItem(item)" title="delete">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -45,21 +46,23 @@
|
|||
@itemActivated="openLightboxModalWith($event)"
|
||||
>
|
||||
<AuthenticatedImage v-if="item.file"
|
||||
:src="`/media/2/256/${item.file}/`"
|
||||
class="card-img-top img-fluid"
|
||||
:src="`/media/2/256/${item.file}/`"
|
||||
class="card-img-top img-fluid"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">{{ item.description }}</h6>
|
||||
<h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
|
||||
<div class="row mx-auto mt-2">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-outline-success" @click.stop="confirm('return Item?') && markItemReturned(item)" title="returned">
|
||||
<button class="btn btn-outline-success"
|
||||
@click.stop="confirm('return Item?') && markItemReturned(item)" title="returned">
|
||||
<font-awesome-icon icon="check"/>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)" title="edit">
|
||||
<font-awesome-icon icon="edit"/>
|
||||
</button>
|
||||
<button class="btn btn-outline-danger" @click.stop="confirm('delete Item?') && deleteItem(item)" title="delete">
|
||||
<button class="btn btn-outline-danger" @click.stop="confirm('delete Item?') && deleteItem(item)"
|
||||
title="delete">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -6,15 +6,16 @@
|
|||
:columns="['id', 'name', 'state', 'last_activity', 'assigned_to']"
|
||||
:items="tickets"
|
||||
:keyName="'id'"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-primary" :href="'/ticket/' + item.id" title="view"
|
||||
@click.prevent="gotoDetail(item)">
|
||||
<font-awesome-icon icon="eye"/>
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
<template #actions="{ item }">
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-primary" :href="'/ticket/' + item.id" title="view"
|
||||
@click.prevent="gotoDetail(item)">
|
||||
<font-awesome-icon icon="eye"/>
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,18 +3,19 @@
|
|||
:columns="['slug', 'name']"
|
||||
:items="events"
|
||||
:keyName="'slug'"
|
||||
v-slot="{ item }"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary" @click.stop="changeEvent(item)">
|
||||
<font-awesome-icon icon="archive"/>
|
||||
use
|
||||
</button>
|
||||
<button class="btn btn-danger" @click.stop="">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
delete
|
||||
</button>
|
||||
</div>
|
||||
<template #actions="{ item }">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary" @click.stop="changeEvent(item)">
|
||||
<font-awesome-icon icon="archive"/>
|
||||
use
|
||||
</button>
|
||||
<button class="btn btn-danger" @click.stop="">
|
||||
<font-awesome-icon icon="trash"/>
|
||||
delete
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
</template>
|
||||
|
||||
|
|
Loading…
Reference in a new issue