File: /home/slfopp7cb1df/www/inventorypacket.com/resources/src/views/app/pages/settings/pos_settings.vue
<template>
<div class="main-content">
<breadcumb :page="$t('pos_settings')" :folder="$t('Settings')"/>
<div v-if="isLoading" class="loading_page spinner spinner-primary mr-3"></div>
<!-- Reciept Pos Settings -->
<validation-observer ref="Submit_Pos_Settings" v-if="!isLoading">
<b-form @submit.prevent="Submit_Pos_Settings">
<b-row class="mt-5">
<b-col lg="12" md="12" sm="12">
<b-card no-body :header="$t('Pos_Settings')">
<b-card-body>
<b-row>
<!-- Note to customer -->
<b-col lg="12" md="12" sm="12">
<validation-provider
name="note"
:rules="{ required: true}"
v-slot="validationContext"
>
<b-form-group :label="$t('Note_to_customer') + ' ' + '*'">
<b-form-input
:state="getValidationState(validationContext)"
aria-describedby="note-feedback"
label="Note to customer"
:placeholder="$t('Note_to_customer')"
v-model="pos_settings.note_customer"
></b-form-input>
<b-form-invalid-feedback
id="note-feedback"
>{{ validationContext.errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<!-- Show Phone-->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_Phone')}}
<input type="checkbox" v-model="pos_settings.show_phone">
<span class="slider"></span>
</label>
</b-col>
<!-- Show Address -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_Address')}}
<input type="checkbox" v-model="pos_settings.show_address">
<span class="slider"></span>
</label>
</b-col>
<!-- Show Email -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_Email')}}
<input type="checkbox" v-model="pos_settings.show_email">
<span class="slider"></span>
</label>
</b-col>
<!-- Show Customer -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_Customer')}}
<input type="checkbox" v-model="pos_settings.show_customer">
<span class="slider"></span>
</label>
</b-col>
<!-- Show_Warehouse -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_Warehouse')}}
<input type="checkbox" v-model="pos_settings.show_Warehouse">
<span class="slider"></span>
</label>
</b-col>
<!-- Show Tax & Discount -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_Tax_and_Discount')}}
<input type="checkbox" v-model="pos_settings.show_discount">
<span class="slider"></span>
</label>
</b-col>
<!-- Show barcode -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_barcode')}}
<input type="checkbox" v-model="pos_settings.show_barcode">
<span class="slider"></span>
</label>
</b-col>
<!-- Show Note_to_customer -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Show_Note_to_customer')}}
<input type="checkbox" v-model="pos_settings.show_note">
<span class="slider"></span>
</label>
</b-col>
<!-- Enable_Print_Invoice -->
<b-col md="4" class="mt-3 mb-3">
<label class="switch switch-primary mr-3">
{{$t('Enable_Print_Invoice')}}
<input type="checkbox" v-model="pos_settings.is_printable">
<span class="slider"></span>
</label>
</b-col>
<!-- products_per_page -->
<b-col lg="4" md="4" sm="12">
<validation-provider
name="products_per_page"
:rules="{ required: true}"
v-slot="validationContext"
>
<b-form-group label="How many items do you want to display *">
<b-form-input
:state="getValidationState(validationContext)"
aria-describedby="products_per_page-feedback"
label="How many items do you want to display."
placeholder="How many items do you want to display."
v-model="pos_settings.products_per_page"
type="number"
></b-form-input>
<b-form-invalid-feedback
id="products_per_page-feedback"
>{{ validationContext.errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<b-col md="12">
<b-form-group>
<b-button variant="primary" type="submit"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
</b-form-group>
</b-col>
</b-row>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-form>
</validation-observer>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import NProgress from "nprogress";
export default {
metaInfo: {
title: "POS Settings"
},
data() {
return {
isLoading: true,
pos_settings:{
note_customer:"",
show_note:"",
show_barcode:"",
show_discount:"",
show_phone:"",
show_email:"",
show_address:"",
show_customer:"",
show_Warehouse:"",
is_printable:'',
products_per_page:'',
},
};
},
methods: {
...mapActions(["refreshUserPermissions"]),
//------------- Submit Validation Pos Setting
Submit_Pos_Settings() {
this.$refs.Submit_Pos_Settings.validate().then(success => {
if (!success) {
this.makeToast(
"danger",
this.$t("Please_fill_the_form_correctly"),
this.$t("Failed")
);
} else {
this.Update_Pos_Settings();
}
});
},
//------ Toast
makeToast(variant, msg, title) {
this.$root.$bvToast.toast(msg, {
title: title,
variant: variant,
solid: true
});
},
getValidationState({ dirty, validated, valid = null }) {
return dirty || validated ? valid : null;
},
//---------------------------------- Update_Pos_Settings ----------------\\
Update_Pos_Settings() {
NProgress.start();
NProgress.set(0.1);
axios
.put("pos_settings/" + this.pos_settings.id, {
note_customer: this.pos_settings.note_customer,
show_note: this.pos_settings.show_note,
show_barcode: this.pos_settings.show_barcode,
show_discount: this.pos_settings.show_discount,
show_phone: this.pos_settings.show_phone,
show_email: this.pos_settings.show_email,
show_address: this.pos_settings.show_address,
show_customer: this.pos_settings.show_customer,
show_Warehouse: this.pos_settings.show_Warehouse,
is_printable: this.pos_settings.is_printable,
products_per_page: this.pos_settings.products_per_page,
})
.then(response => {
Fire.$emit("Event_Pos_Settings");
this.makeToast(
"success",
this.$t("Successfully_Updated"),
this.$t("Success")
);
NProgress.done();
})
.catch(error => {
NProgress.done();
this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
});
},
//---------------------------------- Get_pos_Settings ----------------\\
get_pos_Settings() {
axios
.get("get_pos_Settings")
.then(response => {
this.pos_settings = response.data.pos_settings;
this.isLoading = false;
})
.catch(error => {
this.isLoading = false;
});
},
}, //end Methods
//----------------------------- Created function-------------------
created: function() {
this.get_pos_Settings();
Fire.$on("Event_Pos_Settings", () => {
this.get_pos_Settings();
});
}
};
</script>