303 lines
8.8 KiB
Vue
303 lines
8.8 KiB
Vue
|
<template>
|
||
|
|
<div class="modal" tabindex="-1" id="meta-item-modal">
|
||
|
|
<div
|
||
|
|
class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"
|
||
|
|
>
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">
|
||
|
|
{{
|
||
|
|
selectedItemGetter.title +
|
||
|
|
"(" +
|
||
|
|
selectedItemGetter.meet_code +
|
||
|
|
")"
|
||
|
|
}}
|
||
|
|
</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="close me-auto ms-0"
|
||
|
|
data-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
@click.prevent="closeModal()"
|
||
|
|
>
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-4 d-flex flex-lg-column">
|
||
|
|
<button-component
|
||
|
|
|
||
|
|
classes="btn-default nav-button prev d-lg-none"
|
||
|
|
@click="prevTab()"
|
||
|
|
buttonText=""
|
||
|
|
>
|
||
|
|
<span class="tavasi tavasi-Component-358--1"></span>
|
||
|
|
</button-component>
|
||
|
|
<div
|
||
|
|
ref="nav-tab"
|
||
|
|
class="nav nav-tabs py-4 flex-lg-wrap"
|
||
|
|
id="nav-tab"
|
||
|
|
role="tablist"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
v-for="(groupItem, index) in selectedProjectGetter?.meta"
|
||
|
|
:key="index"
|
||
|
|
@click="setTab(index)"
|
||
|
|
class=" nav-link d-block w-100 mb-lg-2"
|
||
|
|
:class="{ active: index == 0 }"
|
||
|
|
id="nav-myAccount-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
href="#nav-myAccount"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="nav-myAccount"
|
||
|
|
aria-selected="true"
|
||
|
|
>{{ groupItem.title }}</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button-component
|
||
|
|
classes="btn-default nav-button next d-lg-none"
|
||
|
|
@click="nextTab()"
|
||
|
|
buttonText=""
|
||
|
|
>
|
||
|
|
<span class="tavasi tavasi-Component-359--1"></span
|
||
|
|
></button-component>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-8">
|
||
|
|
<form
|
||
|
|
id="meta-item-form"
|
||
|
|
ref="meta-item-form"
|
||
|
|
@submit.prevent="save()"
|
||
|
|
class="text__14"
|
||
|
|
>
|
||
|
|
<div style="height: calc(100vh - 14em);">
|
||
|
|
<div class="d-flex align-items-center">
|
||
|
|
<div v-for="(metaItem, index) in metaItems">
|
||
|
|
<span :key="'meta' + metaItem.id" class="title text__12">
|
||
|
|
{{ metaItem.title }}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
style="color:blue"
|
||
|
|
v-if="index < metaItems.length - 1"
|
||
|
|
class="tavasi tavasi-Component-22--1"
|
||
|
|
></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<keep-alive>
|
||
|
|
<form-builder
|
||
|
|
ref="formBuilder"
|
||
|
|
:formElements="selectedProjectGetter.meta[currentTab]"
|
||
|
|
:formData="selectedItemGetter"
|
||
|
|
@close-modal="closeModal()"
|
||
|
|
></form-builder>
|
||
|
|
</keep-alive>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div class="modal-footer">
|
||
|
|
<div class="d-flex justify-content-between">
|
||
|
|
<div class="d-flex">
|
||
|
|
<button-component
|
||
|
|
type="submit"
|
||
|
|
classes="btn-outline-primary"
|
||
|
|
:buttonText="buttonText"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
></button-component>
|
||
|
|
|
||
|
|
<button-component
|
||
|
|
classes="btn-default"
|
||
|
|
@click="closeModal()"
|
||
|
|
buttonText="انصراف"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
></button-component>
|
||
|
|
</div> -->
|
||
|
|
<!-- <button-component
|
||
|
|
classes="delete-btn btn-outline-danger"
|
||
|
|
@click="deleteItem()"
|
||
|
|
buttonText="حذف"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
>
|
||
|
|
<i class="tavasi tavasi-bin"></i>
|
||
|
|
</button-component> -->
|
||
|
|
<!-- </div> -->
|
||
|
|
<!-- </div> -->
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button-component
|
||
|
|
classes="btn-default"
|
||
|
|
@click="closeModal()"
|
||
|
|
buttonText="انصراف"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
></button-component>
|
||
|
|
<button-component
|
||
|
|
@click="save"
|
||
|
|
classes="btn-outline-primary"
|
||
|
|
:buttonText="buttonText"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
></button-component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import apis from "~/apis/listApi";
|
||
|
|
import { mapState } from "pinia";
|
||
|
|
export default {
|
||
|
|
props: ["metaItems"],
|
||
|
|
emits: ["update-list", "close-modal", "delete-item"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
leftPosition: 0,
|
||
|
|
rightPosition: 0,
|
||
|
|
|
||
|
|
currentTab: 0,
|
||
|
|
fetchingData: false,
|
||
|
|
currentComponent: ["ItemForm", "SubjectForm"],
|
||
|
|
buttonLoading: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState("list", [
|
||
|
|
"selectedProjectGetter",
|
||
|
|
"selectedItemGetter",
|
||
|
|
"listIdGetter",
|
||
|
|
]),
|
||
|
|
buttonText() {
|
||
|
|
return this.selectedItemGetter?.id || this.selectedItemGetter?.guid
|
||
|
|
? "بروزرسانی"
|
||
|
|
: "ثبت";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
prevTab() {
|
||
|
|
const el = this.$refs["nav-tab"];
|
||
|
|
const sLeft = el.scrollLeft;
|
||
|
|
|
||
|
|
if (sLeft * -1 + el.clientWidth <= el.scrollWidth) {
|
||
|
|
el.scrollLeft += 130;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
nextTab() {
|
||
|
|
const el = this.$refs["nav-tab"];
|
||
|
|
const sLeft = el.scrollLeft;
|
||
|
|
|
||
|
|
if (sLeft * -1 + el.clientWidth <= el.scrollWidth) {
|
||
|
|
el.scrollLeft -= 130;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
save() {
|
||
|
|
if (this.buttonLoading) return;
|
||
|
|
this.buttonLoading = true;
|
||
|
|
|
||
|
|
let tmp = this.$refs.formBuilder.localFormData;
|
||
|
|
let diff = {};
|
||
|
|
Object.keys(this.selectedItemGetter).forEach((key) => {
|
||
|
|
if (tmp[key]) {
|
||
|
|
if (typeof tmp[key] == "object") {
|
||
|
|
if (
|
||
|
|
JSON.stringify(tmp[key]) !==
|
||
|
|
JSON.stringify(this.selectedItemGetter[key])
|
||
|
|
)
|
||
|
|
diff[key] = tmp[key];
|
||
|
|
} else if (tmp[key] != this.selectedItemGetter[key])
|
||
|
|
diff[key] = tmp[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const formData = {
|
||
|
|
id: this.selectedItemGetter.id,
|
||
|
|
id_store: this.selectedItemGetter?.id_store,
|
||
|
|
|
||
|
|
projectid: this.selectedProjectGetter?.id,
|
||
|
|
item_state: this.selectedProjectGetter?.item_state,
|
||
|
|
|
||
|
|
meta: JSON.stringify(diff),
|
||
|
|
};
|
||
|
|
|
||
|
|
// remove my manually added active property, if exists.
|
||
|
|
formData.meta = formData.meta.replace(',"active":true', "");
|
||
|
|
this.selectedItemGetter.listid = this.listIdGetter;
|
||
|
|
|
||
|
|
const url = this.selectedItemGetter.id
|
||
|
|
? apis.item.edit
|
||
|
|
: apis.item.addbylist;
|
||
|
|
|
||
|
|
ApiService.formData(url, formData)
|
||
|
|
.then((res) => {
|
||
|
|
this.mySwalToast({
|
||
|
|
title: "تبریک",
|
||
|
|
html: res.data.message,
|
||
|
|
icon: "success",
|
||
|
|
});
|
||
|
|
|
||
|
|
this.$emit("update-list");
|
||
|
|
})
|
||
|
|
|
||
|
|
.finally(() => {
|
||
|
|
this.buttonLoading = false;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
closeModal() {
|
||
|
|
this.$emit("close-modal");
|
||
|
|
},
|
||
|
|
updateList() {
|
||
|
|
this.$emit("update-list");
|
||
|
|
},
|
||
|
|
deleteItem() {
|
||
|
|
this.$emit("delete-item");
|
||
|
|
},
|
||
|
|
setTab(index) {
|
||
|
|
this.currentTab = index;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.nav.nav-tabs {
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
overflow-x: auto;
|
||
|
|
position: relative;
|
||
|
|
.nav-link {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
width: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
||
|
|
& {
|
||
|
|
-ms-overflow-style: none; /* IE and Edge */
|
||
|
|
scrollbar-width: none; /* Firefox */
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-button {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
|
||
|
|
&.prev {
|
||
|
|
right: 0;
|
||
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #fff);
|
||
|
|
}
|
||
|
|
&.next {
|
||
|
|
left: 0;
|
||
|
|
background: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), #fff);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|