shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CardForm component add cards list styling..

Browse Source
This commit is contained in:
Cüneyt Şentürk 2021-01-20 01:31:20 +03:00
parent 68bf544ba3
commit 633fc0e2fc
1 changed files with 166 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
resources/assets/js/components/CreditCard/CardForm.vue
View File

@ -1,41 +1,41 @@
<template>
<div>
<div class="row align-items-center" v-if="Object.keys(cards).length">
<div class="row align-items-center">
<div class="col-md-12">
<div class="form-group">
<label for="item_name" class="form-control-label">Cards</label>
<div class="input-group-invoice-text" v-for="(name, key, id) in cards">
<div class="custom-control custom-radio mb-2">
<input
type="radio"
:name="'card-' + key"
<div class="custom-radio mb-2">
<button type="button"
:id="'card-'+ key + '-' + id"
:value="key"
v-model="card_id"
class="custom-control-input">
<label :for="'card-'+ key + '-' + id" class="custom-control-label">
class="btn btn-outline-default w-100"
@click="onSelectedCard(key)"
:disabled="loading">
<div v-if="loading" class="aka-loader-frame">
<div class="aka-loader"></div>
</div>
{{ name }}
</label>
</button>
</div>
</div>
<div class="input-group-invoice-text">
<div class="custom-control custom-radio mb-2">
<input
type="radio"
name="card-new"
<div class="custom-radio mb-2">
<button type="button"
id="card-new-card"
value="new_card"
v-model="card_id"
class="custom-control-input">
<label for="card-new-card" class="custom-control-label">
New Card
</label>
class="btn btn-outline-default w-100"
data-toggle="collapse"
data-target="#collapseNewCard"
aria-expanded="false"
aria-controls="collapseNewCard"
:disabled="loading">New Card</button>
</div>
</div>
</div>
</div>
<div class="collapse w-100" id="collapseNewCard">
<div class="row">
<div class="col-md-6 p-5">
<div class="form-group">
<label for="cardName" class="form-control-label">{{ textCardName }}</label>
@ -146,12 +146,26 @@
</div>
</div>
<button class="btn btn-icon btn-success" v-on:click="invaildCard">
<span class="btn-inner--text">{{ textButton }}</span>
</button>
<div class="form-group" v-if="storeCard">
<div class="custom-control custom-checkbox">
<input @input="changeStoreCard" id="store_card" name="store_card" type="checkbox" value="true" class="custom-control-input">
<label for="store_card" class="custom-control-label">
<strong>{{ textStoreCard }}</strong>
</label>
</div>
</div>
<div class="col-md-6 mt--3">
<div class="form-group">
<button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
<div v-if="loading" class="aka-loader-frame">
<div class="aka-loader"></div>
</div>
<span v-if="!loading" class="btn-inner--text">{{ textButton }}</span>
</button>
</div>
</div>
<div class="col-md-6 mt-6">
<Card
:fields="fields"
:labels="formData"
@ -162,6 +176,7 @@
</div>
</div>
</div>
</div>
<div class="row align-items-center" v-if="!Object.keys(cards).length">
<div class="col-md-6 p-5">
@ -516,6 +531,13 @@ export default {
},
methods: {
onSelectedCard(card_id) {
this.card_id = card_id;
this.formData.card_id = card_id;
this.invaildCard();
},
changeStoreCard(e) {
this.formData.storeCard = false;