Create TransactionWizard component
MODIFY
resources/assets/js/app.js
resources/assets/js/app.js
+window.axios = require('axios')
+
window.Vue = require('vue')
Vue.component('datepicker', require('./components/DatePicker.vue'))
Vue.component('barchart', require('./components/BarChart.vue'))
Vue.component('dropdown', require('./components/Dropdown.vue'))
+Vue.component('transaction-wizard', require('./components/TransactionWizard.vue'))
const app = new Vue({
el: '#app'

ADD
resources/assets/js/components/TransactionWizard.vue
+<template>
+ <div>
+ <div class="bg mb-2">
+ <button
+ class="bg__button"
+ :class="{ 'bg__button--active': type == 'earning' }"
+ @click="switchType('earning')">Earning</button>
+ <button
+ class="bg__button"
+ :class="{ 'bg__button--active': type == 'spending' }"
+ @click="switchType('spending')">Spending</button>
+ </div>
+ <div class="input input--small">
+ <label>Date</label>
+ <input type="text" v-model="date" />
+ </div>
+ <div class="input input--small">
+ <label>Description</label>
+ <input type="text" v-model="description" />
+ </div>
+ <div class="input input--small">
+ <label>Amount</label>
+ <input type="text" v-model="amount" />
+ </div>
+ <button
+ class="button"
+ @click="createEarning">
+ <span v-if="loading">Loading</span>
+ <span v-if="!loading">Create</span>
+ </button>
+ </div>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ type: 'earning',
+ date: '',
+ description: '',
+ amount: '',
+ loading: false
+ }
+ },
+
+ methods: {
+ switchType(type) {
+ this.type = type
+ },
+
+ createEarning() {
+ if (!this.loading) {
+ this.loading = true
+
+ axios.post('/' + this.type, {
+ _token: '33lp59tlzHIMCJ1aojp2CT4qZUttdCIWfkgFu1yk',
+ date: this.date,
+ description: this.description,
+ amount: this.amount
+ }).then(() => {
+ this.date = ''
+ this.description = ''
+ this.amount = ''
+
+ this.loading = false
+
+ alert('Success')
+ }).catch(() => {
+ this.loading = false
+
+ alert('Something went wrong')
+ })
+ }
+ }
+ }
+ }
+</script>

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -26,3 +26,38 @@ body {
canvas {
width: 100%;
}
+
+.bg {
+ display: flex;
+
+ button.bg__button {
+ padding: 10px 20px;
+ font: inherit;
+ font-size: 14px;
+ border: 1px solid $colors-light-border;
+ border-left: 0;
+ border-right: 0;
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:first-child {
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ border-left: 1px solid $colors-light-border;
+ }
+
+ &:last-child {
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-right: 1px solid $colors-light-border;
+ }
+
+ &:hover, &.bg__button--active {
+ cursor: pointer;
+ background: $colors-primary;
+ color: #FFF;
+ }
+ }
+}

MODIFY
resources/views/transactions/create.blade.php
resources/views/transactions/create.blade.php
-Here comes the money
+@extends('layout')
+
+@section('title', __('actions.create') . ' Transaction')
+
+@section('body')
+ <div class="wrapper my-3">
+ <h2 class="mb-3">{{ __('actions.create') }} Transaction</h2>
+ <transaction-wizard></transaction-wizard>
+ </div>
+@endsection

Create TransactionWizard component