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