upccrt/resources/js/components/Credential.vue

<template>
<div class="bg-lightgray m-1 p-2 border rounded container-fluid">
    <credential-form-modal :descriptions="creddescList" :modal-id="'credential'+this.data.credid+'editModal'" :populateWith="this.data"></credential-form-modal>
    <modal :id="'credential'+this.data.credid+'deleteModal'" tabindex="-1">
        <h5 slot="header" class="modal-title" :id="'credential'+this.data.credid+'deleteModalLabel'">
            Delete Credential
        </h5>
        <div slot="body">
            Are you sure?
        </div>
        <div slot="footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-danger" @click=deleteCredential()>
                <div v-if="!credentialDeleting">Confirm</div>
                <circle-spinner v-else :size="2"></circle-spinner>
            </button>
        </div>
    </modal>
    <div class="row no-gutters">
        <div class="h5 col-3 text-left">{{this.data.creddesc}}</div>
        <div class="col-9 text-right">{{this.data.creddate}}</div>
    </div>
    <div class="row">
        <div class="col-lg-9">
            <div>
                <label for="username"><i class="fas fa-fw fa-user"></i></label>
                <input type="text" v-bind:id="'username' + this.data.credid" class="border-0 credential" v-bind:value=this.data.creduser readonly/>
                <button v-bind:id="'btn-username' + this.data.credid" class="btn-clip btn btn-sm btn-primary rounded-pill" v-bind:data-clipboard-target="'#username' + this.data.credid">
                    <i class="far fa-clone"></i>
                </button>
            </div>
            <div>
                <label for="password"><i class="fas fa-fw fa-key"></i></label>
                <input type="text" v-bind:id="'password' + this.data.credid" class="border-0 credential" v-bind:value=this.data.credpass readonly/>
                <button v-bind:id="'btn-password' + this.data.credid" class="btn-clip btn btn-sm btn-primary rounded-pill" v-bind:data-clipboard-target="'#password' + this.data.credid">
                    <i class="far fa-clone"></i>
                </button>
            </div>
        </div>
        <div class="btn-group col-lg-2 align-self-end w-25 w-lg-auto" role="group" aria-label="Edit and Delete">
            <button type="button" class="btn btn-sm btn-secondary p-lg-1" data-toggle="modal" :data-target="'#credential'+this.data.credid+'editModal'"><i class="fas fa-fw fa-edit"></i></button>
            <button type="button" class="btn btn-sm btn-danger p-lg-1" data-toggle="modal" :data-target="'#credential'+this.data.credid+'deleteModal'"><i class="fas fa-fw fa-trash-alt"></i></button>
        </div>
    </div>
</div>
</template>
<script>
import CredentialFormModal from '../components/CredentialFormModal.vue'
import Modal from '../components/Modal.vue'
import CircleSpinner from '../components/CircleSpinner.vue'
export default {
    components: {
        CredentialFormModal,
        Modal,
        CircleSpinner,
    },
    props: {
        credential: {
            type: Object,
            required: true,
        },
        descriptions: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            data: this.credential,
            creddescList: this.descriptions,
            credentialDeleting: false,
        }
    },
    mounted() {
        Echo.channel('credential.'+this.data.credid)
            .listen('CredentialUpdated', (e) => {
                this.data = e.credential;
            });
    },
    methods: {
        deleteCredential() {
            this.credentialDeleting = true
            axios.delete('/api/credentials/' + this.data.credid, this.data)
                .then(response => {
                    this.credentialDeleting = false
                    $('#credential'+this.data.credid+'deleteModal').modal('hide');
                }).catch(error => { 
                    this.credentialDeleting = false
                    console.error(error)
                })
        }
    }
}
</script>