Toggle visibility of edit & delete icons

This commit is contained in:
Bubka 2020-01-06 23:11:18 +01:00
parent 3350da4927
commit 59952237bd
3 changed files with 15 additions and 7 deletions

View File

@ -11,10 +11,10 @@ import Create from './views/Create'
import Edit from './views/Edit' import Edit from './views/Edit'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlusCircle, faQrcode, faImage } from '@fortawesome/free-solid-svg-icons' import { faPlusCircle, faQrcode, faImage, faTrash, faEdit } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faPlusCircle, faQrcode, faImage); library.add(faPlusCircle, faQrcode, faImage, faTrash, faEdit);
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

View File

@ -6,9 +6,6 @@
<p class="is-size-4 has-text-grey-light">{{ service }}</p> <p class="is-size-4 has-text-grey-light">{{ service }}</p>
<p class="is-size-6 has-text-grey">{{ account }}</p> <p class="is-size-6 has-text-grey">{{ account }}</p>
<slot></slot> <slot></slot>
<div class="modal-action-links has-text-grey">
<router-link :to="{ name: 'edit', params: { twofaccountId: twofaccountid }}">Edit</router-link>
</div>
</div> </div>
</template> </template>

View File

@ -1,6 +1,10 @@
<template> <template>
<div> <div>
<div class="container"> <div class="container">
<div class="has-text-centered">
<a class="button is-dark" @click="editMode = true" v-if="!editMode">Manage</a>
<a class="button is-dark" @click="editMode = false" v-if="editMode">Done</a>
</div>
<div class="buttons are-large is-centered"> <div class="buttons are-large is-centered">
<span v-for="account in accounts" class="button is-black twofaccount" > <span v-for="account in accounts" class="button is-black twofaccount" >
<span @click.stop="getAccount(account.id)"> <span @click.stop="getAccount(account.id)">
@ -8,7 +12,13 @@
{{ account.service }} {{ account.service }}
<span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span> <span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span>
</span> </span>
<a v-on:click="deleteAccount(account.id)">Delete</a> <span v-if="editMode">
<a v-on:click="deleteAccount(account.id)" class="is-size-6 has-text-grey-dark">
<font-awesome-icon :icon="['fas', 'trash']" />
</a> <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="is-size-6 has-text-grey-dark">
<font-awesome-icon :icon="['fas', 'edit']" />
</router-link>
</span>
</span> </span>
</div> </div>
</div> </div>
@ -35,7 +45,8 @@
return { return {
accounts : [], accounts : [],
ShowTwofaccountInModal : false, ShowTwofaccountInModal : false,
twofaccount: {} twofaccount: {},
editMode : false,
} }
}, },
mounted(){ mounted(){