Add ability to select tag with spending in TransactionWizard component
MODIFY
app/Http/Controllers/TransactionController.php
app/Http/Controllers/TransactionController.php
@@ -6,6 +6,12 @@ use Illuminate\Http\Request;
class TransactionController extends Controller {
public function create() {
- return view('transactions.create');
+ $tags = [];
+
+ foreach (session('space')->tags as $tag) {
+ $tags[] = ['key' => $tag->id, 'label' => $tag->name];
+ }
+
+ return view('transactions.create', compact('tags'));
}
}

MODIFY
resources/assets/js/components/Searchable.vue
resources/assets/js/components/Searchable.vue
this.selected = payload
this.hide()
+
+ // Update parent
+ this.$emit('SelectUpdated', this.selected)
}
}
}

MODIFY
resources/assets/js/components/TransactionWizard.vue
resources/assets/js/components/TransactionWizard.vue
:class="{ 'bg__button--active': type == 'spending' }"
@click="switchType('spending')">Spending</button>
</div>
+ <div class="input" v-if="type == 'spending'">
+ <label>Tag</label>
+ <searchable
+ name="tag"
+ :items="tags"
+ @SelectUpdated="tagUpdated"></searchable>
+ <validation-error v-if="errors.tag_id" :message="errors.tag_id"></validation-error>
+ </div>
<div class="input">
<label>Date</label>
<input type="text" v-model="date" style="background: #FFF;" />
<script>
export default {
+ props: ['tags'],
+
data() {
return {
type: 'earning',
errors: [],
+
+ tag: null,
date: this.getTodaysDate(),
description: '',
amount: '',
+
loading: false
}
},
this.type = type
},
+ tagUpdated(payload) {
+ this.tag = payload.key
+ },
+
getTodaysDate() {
return '2018-11-29'
},
// Reset
let errors = []
- axios.post('/' + this.type + 's', {
+ //
+ let body = {
_token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
date: this.date,
description: this.description,
amount: this.amount
- }).then(response => {
+ }
+
+ if (this.type == 'spending' && this.tag) {
+ body.tag_id = this.tag
+ }
+
+ axios.post('/' + this.type + 's', body).then(response => {
this.loading = false
this.errors = []

MODIFY
resources/views/transactions/create.blade.php
resources/views/transactions/create.blade.php
@section('body')
<div class="wrapper mw-400 my-3">
<h2 class="mb-3">{{ __('actions.create') }} Transaction</h2>
- <transaction-wizard></transaction-wizard>
+ <transaction-wizard :tags='@json($tags)'></transaction-wizard>
</div>
@endsection

Add ability to select tag with spending in TransactionWizard component