mirror of
https://github.com/crater-invoice/crater.git
synced 2025-11-01 14:11:09 -04:00
init crater
This commit is contained in:
Mohit Panjwani
126
resources/assets/js/views/settings/currency/Index.vue
Normal file
126
resources/assets/js/views/settings/currency/Index.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<div class="page-header">
|
||||
<h3 class="page-title">{{ $tc('navigation.currency', 2) }}</h3>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<router-link
|
||||
slot="item-title"
|
||||
to="/admin/dashboard">
|
||||
{{ $t('navigation.home') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<router-link
|
||||
slot="item-title"
|
||||
to="#">
|
||||
{{ $tc('navigation.currency', 2) }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="caption">
|
||||
<h6>{{ $t('settings.currencies.select_currency') }}:</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<select
|
||||
v-model.trim="currencyId"
|
||||
class="form-control"
|
||||
@change="selectCurrency()"
|
||||
>
|
||||
<option
|
||||
v-for="(currency, index) in currencies"
|
||||
:key="index"
|
||||
:value="currency.id"
|
||||
>
|
||||
{{ currency.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="caption">
|
||||
<h6>{{ $t('settings.currencies.currencies_list') }}</h6>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<router-link slot="item-title" to="currencies/create">
|
||||
<base-button icon="plus" color="theme" size="small">
|
||||
{{ $t('navigation.add') }} {{ $t('navigation.new') }}
|
||||
</base-button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table-component
|
||||
ref="table"
|
||||
:data="currencies"
|
||||
table-class="table"
|
||||
sort-by="name"
|
||||
sort-order="asc"
|
||||
>
|
||||
<table-column :label="$t('settings.currencies.name')" show="name" />
|
||||
<table-column :label="$t('settings.currencies.code')" show="code" />
|
||||
<table-column :label="$t('settings.currencies.symbol')" show="symbol" />
|
||||
<table-column :label="$t('settings.currencies.precision')" show="precision" />
|
||||
<table-column :label="$t('settings.currencies.thousand_separator')" show="thousand_separator" />
|
||||
<table-column :label="$t('settings.currencies.decimal_separator')" show="decimal_separator" />
|
||||
<table-column
|
||||
:sortable="false"
|
||||
:filterable="false"
|
||||
:label="$t('settings.currencies.position')"
|
||||
>
|
||||
<template slot-scope="row">
|
||||
<span v-if="row.swap_currency_symbol === 0">{{ $t('settings.currencies.right') }}</span>
|
||||
<span v-if="row.swap_currency_symbol === 1">{{ $t('settings.currencies.left') }}</span>
|
||||
</template>
|
||||
</table-column>
|
||||
<table-column
|
||||
:sortable="false"
|
||||
:filterable="false"
|
||||
:label="$t('settings.currencies.action')"
|
||||
>
|
||||
<template slot-scope="row">
|
||||
<div class="table__actions">
|
||||
<router-link slot="item-title" :to="{path: `currencies/${row.id}/edit`}">{{ $t('navigation.edit') }}</router-link>
|
||||
<div class="table__item--cursor-pointer" @click="removeItems(row.id)">{{ $t('navigation.delete') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</table-column>
|
||||
</table-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return this.$store.state.currency
|
||||
},
|
||||
mounted () {
|
||||
this.indexLoadData()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('currency', [
|
||||
'indexLoadData',
|
||||
'removeItems',
|
||||
'selectCurrency'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
185
resources/assets/js/views/settings/currency/currency.vue
Normal file
185
resources/assets/js/views/settings/currency/currency.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="main-content currencycreate">
|
||||
<div class="page-header">
|
||||
<h3 class="page-title">{{ $t('settings.currencies.add_currency') }}</h3>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><router-link slot="item-title" to="/admin/dashboard">{{ $t('general.home') }}</router-link></li>
|
||||
<li class="breadcrumb-item"><router-link slot="item-title" to="/admin/settings/currencies">{{ $tc('settings.currencies.currency',2) }}</router-link></li>
|
||||
<li class="breadcrumb-item"><a href="#">{{ $t('navigation.add') }}</a></li>
|
||||
</ol>
|
||||
<div class="page-actions">
|
||||
<router-link slot="item-title" to="/admin/settings/currencies">
|
||||
<base-button icon="backward" color="theme">
|
||||
{{ $t('navigation.go_back') }}
|
||||
</base-button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<form action="" @submit.prevent="submiteCurrency">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="control-label">{{ $t('settings.currencies.name') }}:</label><span class="required text-danger"> *</span>
|
||||
<input
|
||||
:class="{ error: $v.formData.name.$error }"
|
||||
v-model.trim="formData.name"
|
||||
type="text"
|
||||
name="name"
|
||||
class="form-control"
|
||||
@input="$v.formData.name.$touch()"
|
||||
>
|
||||
<div v-if="$v.formData.name.$error">
|
||||
<span v-if="!$v.formData.name.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">{{ $t('settings.currencies.code') }}:</label><span class="required"> *</span>
|
||||
<input
|
||||
:class="{ error: $v.formData.code.$error }"
|
||||
v-model="formData.code"
|
||||
type="text"
|
||||
name="code"
|
||||
class="form-control"
|
||||
@input="$v.formData.code.$touch()"
|
||||
>
|
||||
<div v-if="$v.formData.code.$error">
|
||||
<span v-if="!$v.formData.code.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">{{ $t('settings.currencies.symbol') }}:</label>
|
||||
<input
|
||||
v-model="formData.symbol"
|
||||
type="text"
|
||||
name="symbol"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">{{ $t('settings.currencies.precision') }}:</label>
|
||||
<input
|
||||
v-model="formData.precision"
|
||||
type="text"
|
||||
name="precision"
|
||||
class="form-control"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">{{ $t('settings.currencies.thousand_separator') }}:</label><span class="required"> *</span>
|
||||
<input
|
||||
:class="{ error: $v.formData.thousand_separator.$error }"
|
||||
v-model="formData.thousand_separator"
|
||||
type="text"
|
||||
name="thousand_separator"
|
||||
class="form-control"
|
||||
@input="$v.formData.thousand_separator.$touch()"
|
||||
>
|
||||
<div v-if="$v.formData.thousand_separator.$error">
|
||||
<span v-if="!$v.formData.thousand_separator.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label">{{ $t('settings.currencies.decimal_separator') }}:</label><span class="required"> *</span>
|
||||
<input
|
||||
:class="{ error: $v.formData.decimal_separator.$error }"
|
||||
v-model="formData.decimal_separator"
|
||||
type="text"
|
||||
name="decimal_separator"
|
||||
class="form-control"
|
||||
@input="$v.formData.decimal_separator.$touch()"
|
||||
>
|
||||
<div v-if="$v.formData.decimal_separator.$error">
|
||||
<span v-if="!$v.formData.decimal_separator.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>{{ $t('settings.currencies.position_of_symbol') }}:</label><span class="required"> *</span>
|
||||
<select
|
||||
v-model="formData.swap_currency_symbol"
|
||||
:class="{ error: $v.formData.swap_currency_symbol.$error }"
|
||||
class="form-control ls-select2"
|
||||
name="swap_currency_symbol"
|
||||
@select="$v.formData.swap_currency_symbol.$touch()"
|
||||
>
|
||||
<option value="0">{{ $t('settings.currencies.right') }}</option>
|
||||
<option value="1">{{ $t('settings.currencies.left') }}</option>
|
||||
</select>
|
||||
<div v-if="$v.formData.swap_currency_symbol.$error">
|
||||
<span v-if="!$v.formData.swap_currency_symbol.required" class="text-danger">{{ $tc('validation.required') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<base-button color="theme" type="submit">
|
||||
{{ $t('navigation.add') }}
|
||||
</base-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
const { required } = require('vuelidate/lib/validators')
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return this.$store.state.currency
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
if (this.$route.name === 'currencyedit') {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required
|
||||
},
|
||||
code: {
|
||||
required
|
||||
},
|
||||
thousand_separator: {
|
||||
required
|
||||
},
|
||||
decimal_separator: {
|
||||
required
|
||||
},
|
||||
swap_currency_symbol: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (!this.isEdit) {
|
||||
return true
|
||||
}
|
||||
this.loadData(this.$route.params.id)
|
||||
},
|
||||
methods: {
|
||||
...mapActions('currency', [
|
||||
'loadData',
|
||||
'addCurrency',
|
||||
'editCurrency'
|
||||
]),
|
||||
async submiteCurrency () {
|
||||
this.$v.formData.$touch()
|
||||
if (this.$v.$invalid) {
|
||||
return false
|
||||
}
|
||||
if (this.isEdit) {
|
||||
this.editCurrency(this.$route.params.id)
|
||||
return true
|
||||
}
|
||||
this.addCurrency()
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user