Skip to content

Instantly share code, notes, and snippets.

@ashishakya

ashishakya/Vue.vue

Created August 10, 2023 04:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ashishakya/2141dc3d0a9dcdac6297b283ba4addb4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ashishakya/2141dc3d0a9dcdac6297b283ba4addb4 to your computer and use it in GitHub Desktop.
Download ZIP
inspection
Raw
Vue.vue
<template>
<!-- <div class="page-content"> -->
<div class="object-detail m-b-40">
<div>
<div class="card-body page-content-inspect-block-card-body">
<form
enctype="multipart/form-data"
@submit.prevent="submitForm"
>
herhee
<AppDropDown
v-if="templates.length"
v-model="inspection.template_id"
:options="templates"
label="name"
:placeholder="trans('Please select an option or search')"
:paginator="messageTemplatesPaginator"
:enable-infinite-scroll="true"
@load-more="handleLoadMoreTemplateList"
/>
<!-- @search="handleMessageTemplateSearch"-->
<!-- Inspect number and save row -->
<div class="page-content-inspect-block mt-5">
<div class="d-flex justify-content-between align-items-center">
<div class="">
<ul>
<li class="active">
<div class="page-content-tab">
<span class="inspect-tab-number">1</span>
<span class="insect-tab-text">Gegevens</span>
</div>
</li>
<li>
<div class="page-content-tab">
<span class="inspect-tab-number">2</span>
<span class="insect-tab-text">Inspectie</span>
</div>
</li>
<li>
<div class="page-content-tab">
<span class="inspect-tab-number">3</span>
<span class="insect-tab-text">Ondertekenen</span>
</div>
</li>
</ul>
</div>
<div class="text-right">
<div class="h5">
<!-- <a href="#">Opslaan</a> -->
<button
type="submit"
class="btn btn-secondary btn-secondary-transparency"
>
{{ trans("Save") }}
</button>
</div>
</div>
</div>
</div>
<div class="card rounded-10 shadow-sm border-0 m-b-0 card-inspect">
<div class="card-body">
<div class="card card-light m-b-15 d-none">
<div class="p-y-10 p-x-15">
<div class="row justify-content-around">
<div class="col-6 col-md-auto">
<div class="row gutter-5 align-items-center">
<div class="col-auto">
<div
class="mdi mdi-emoticon-happy text-good f-18"
></div>
</div>
<div class="col-auto">-</div>
<div class="col">Happy</div>
</div>
</div>
<div class="col-6 col-md-auto">
<div class="row gutter-5 align-items-center">
<div class="col-auto">
<div
class="mdi mdi-emoticon-neutral text-neutral f-18"
></div>
</div>
<div class="col-auto">-</div>
<div class="col">Neutral</div>
</div>
</div>
<div class="col-6 col-md-auto">
<div class="row gutter-5 align-items-center">
<div class="col-auto">
<div
class="mdi mdi-emoticon-sad text-bad f-18"
></div>
</div>
<div class="col-auto">-</div>
<div class="col">Bad</div>
</div>
</div>
<div class="col-6 col-md-auto">
<div class="row gutter-5 align-items-center">
<div class="col-auto">
<div class="mdi mdi-block-helper f-18"></div>
</div>
<div class="col-auto">-</div>
<div class="col">N/A</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-inspect-inner">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<div class="col-md-3 col-12">
<div class="form-group form-group-focus">
<label>Object</label>
<v-select
:options="objectList"
v-model="selectObject"
@input="objectSelect"
></v-select>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12" v-if="unitList.length">
<div class="row">
<div class="col-md-3 col-12">
<div class="form-group form-group-focus">
<label>Unit</label>
<v-select
:options="unitList"
v-model="selectUnit"
@input="unitSelect"
></v-select>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12">
<div class="row">
<div class="col-md-3 col-12">
<div class="form-group form-group-focus">
<label>Inspectie</label>
<select
class="form-control"
v-model="inspection.template_id"
required
@change="getTemplateData"
>
<option
v-for="template in templates"
:key="template.id"
:value="template.id"
>
{{ template.name }}
</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12">
<div class="row">
<div class="col-md-3 col-12">
<div class="form-group form-group-focus">
<label>{{ trans("Inspection name") }}</label>
<input
class="form-control"
type="text"
v-model="inspection.name"
required
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inspect button -->
<div class="card card-secondary rounded-10 card-inspect-button-row" v-if="is('admin')">
<div class="row no-gutters text-center">
<div class="col-6">
<button
type="button"
@click="previous"
class="btn btn-back btn-back-disable"
>
Vorige
</button>
</div>
<div class="col-6">
<button type="button" @click="next" class="btn btn-submit">
Volgende
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script>
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";
import AppDropDown from "../../utilities/AppDropDown"
export default {
name: "ObjectInspectionCreate",
props: ["type"],
components: {
vSelect,
AppDropDown
},
data() {
return {
object: {
id: this.$route.params.id,
},
unit: {
id: 0
},
selectObject: {
label: "None",
value: 0,
},
selectUnit: {
label: "None",
value: 0,
},
unitList: [],
templates: [],
fields: [],
inspection: {
id: "",
name: "Rename it",
date: new Date().toLocaleDateString("en-NZ"),
template_id: "",
object_id: '',
comment: "",
images: {},
inputs: {},
status: 0,
},
isCreate: true,
isDisabled: false,
isCreateFromDashboard: false,
objectList: [{ label: this.$root.trans("None"), value: "" }],
step: "step-1",
messageTemplatesPaginator:null
};
},
created() {
if (this.$route.params.id) {
this.getObject();
} else {
this.isCreateFromDashboard = true;
}
this.getObjectList();
this.isCreate = true;
this.getTemplates();
},
methods: {
handleLoadMoreTemplateList(){
alert("ok");
},
getTemplates() {
this.$parent.$parent
.axiosGET(`/api/inspectiontemplates?limit=2`)
.then((response) => {
console.log("res>>", response)
this.templates = response.data.templates.data;
this.messageTemplatesPaginator = {
current_page:response.data.templates.current_page,
total_pages:response.data.templates.last_page
}
});
},
getObject() {
this.$parent.$parent
.axiosGET(`/api/objects/summary/${this.$route.params.id}`)
.then((response) => {
this.object = response.data.object;
this.selectObject.label = this.object.address;
this.selectObject.value = this.object.id;
// Determine object or unit
if (this.object.parent_id > 0) {
this.getUnitList(this.object.parent_id)
this.selectUnit.label = this.object.unit_id
this.selectUnit.value = this.object.id
this.selectObject.value = this.object.parent_id
} else {
this.getUnitList(this.object.id)
}
// this.$root.$emit("object_update", this.object);
// Emit breadcrumbs
this.$root.$emit(
"breadcrumb_update",
this.breadcrumb_generator(this.object, "object")
);
});
},
getObjectList() {
this.$parent.$parent
.axiosGET(`/api/objects/objectdropdown`)
.then((response) => {
response.data.objects.forEach((obj) => {
this.objectList.push({ label: obj.address, value: obj.id });
});
});
},
getUnitList(id) {
this.selectUnit.label = 'None';
this.selectUnit.value = 0;
this.unitList = [];
if (! id) {
return false;
}
this.$parent.$parent
.axiosGET(`/api/objects/${id}/unitdropdown`)
.then((response) => {
response.data.objects.forEach((obj) => {
this.unitList.push({ label: obj.unit_id, value: obj.id });
});
});
},
objectSelect(e) {
this.selectObject.label = e.label;
this.selectObject.value = e.value;
this.object.id = e.value;
this.getUnitList(e.value);
},
unitSelect(e) {
this.selectUnit.label = e.label;
this.selectUnit.value = e.value;
this.unit.id = e.value;
},
switchStep(step) {
this.step = step;
if (step == 'step-2') {
console.log('Step 2', this.inspection.images)
} else if (step == 'step-3') {
console.log('Step 3', this.inspection.images)
}
},
next() {
this.inspection.object_id = this.unit.id > 0 ? this.unit.id : this.object.id;
if (! this.inspection.object_id) {
this.$swal({
text: this.trans("You need to select an object"),
showConfirmButton: true,
});
return false;
}
if (! this.inspection.template_id) {
this.$swal({
text: this.trans("You need to select the template"),
showConfirmButton: true,
});
return false;
}
this.submitForm()
},
previous() {
console.log('Clicked previous');
},
getTemplateData(e) {
var selectTemplate = this.templates.filter((item) => {
return item.id == e.target.value
})
this.inspection.name = selectTemplate[0].name
},
submitForm() {
if (! this.inspection.object_id) {
this.$swal({
text: this.trans("You need to select an object"),
showConfirmButton: true,
});
return false;
}
if (! this.inspection.template_id) {
this.$swal({
text: this.trans("You need to select the template"),
showConfirmButton: true,
});
return false;
}
const data = new FormData();
data.append("name", this.inspection.name);
data.append("date", this.inspection.date);
data.append("template_id", this.inspection.template_id);
if (this.unit.id > 0) {
data.append("object_id", this.unit.id);
} else {
data.append("object_id", this.object.id);
}
if (this.inspection.comment != null) {
data.append("comment", this.inspection.comment);
}
if (this.inspection.id != "") {
data.append("id", this.inspection.id);
}
var images = {};
data.append("images", JSON.stringify(images));
data.append("inputs", JSON.stringify(this.inspection.inputs));
var postURL = "/api/inspections";
this.$parent.$parent
.axiosPOST(postURL, data)
.then((response) => {
this.$notify({
group: "foo",
type: response.data.status ? "success" : "error",
title: response.data.status
? this.$root.trans("Success")
: this.$root.trans("Error"),
text: response.data.message,
});
this.$router.push({
name: "ObjectInspectionInspect",
params: { id: this.unit.id > 0 ? this.unit.id : this.object.id, inspectionId: response.data.id },
});
})
.catch((error) => {
this.$notify({
group: "foo",
type: "error",
title: this.$root.trans("Error"),
text: error.message,
});
})
.finally(() => {
this.loading = false;
});
}
},
mounted() {
this.$root.$emit("page_title", "Inspections");
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment