394 lines
11 KiB
Vue
394 lines
11 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<the-sidebar
|
|
:showUserAvatar="!isMajlesBuild"
|
|
:menu="sidbarMenu"
|
|
class="hiddens"
|
|
></the-sidebar>
|
|
<main>
|
|
<header>
|
|
<div class="logo-and-dropdown">
|
|
<img :src="logoPhoto()" alt="" class="logo" />
|
|
</div>
|
|
|
|
<div class="avatar">
|
|
<user-avatar-dropdown class="nav-item rounded-circle">
|
|
<router-link :to="{ name: 'searchAbout' }" class="dropdown-item"
|
|
>درباره ما</router-link
|
|
>
|
|
<router-link :to="{ name: 'searchConnect' }" class="dropdown-item"
|
|
>تماس با ما</router-link
|
|
>
|
|
</user-avatar-dropdown>
|
|
</div>
|
|
</header>
|
|
<div class="dropdown mb-3 mt-2">
|
|
<div class="dropdown me-auto text__13 sortlist" ref="dropdownSortlist">
|
|
<button
|
|
class="btn dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
>
|
|
<span style="color: #adbec4"> افزودن مورد جدید: </span>
|
|
<span> {{ titleSelected }}</span>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<button
|
|
class="dropdown-item text__13"
|
|
v-for="(item, index) in schemasGetter"
|
|
@click.prevent="setItemDropdown(item, item.label)"
|
|
:key="index"
|
|
>
|
|
{{ item.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="mt-3">
|
|
<div>
|
|
<div class="accordion" id="accordionExample">
|
|
<div
|
|
class="card rounded-0"
|
|
v-for="(innerGroupItem, j) in activeSchemaGetter?.property"
|
|
:key="j"
|
|
>
|
|
<div class="card-header" :id="'heading' + j" style="height: 4em">
|
|
<div class="d-flex justify-content-between">
|
|
<p style="font-size: 12px; color: black">
|
|
{{ innerGroupItem.title }}
|
|
</p>
|
|
<button
|
|
class="btn btn-link btn-block text-end collapsed button-meno"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
:data-bs-target="'#collapse' + j"
|
|
aria-expanded="false"
|
|
:aria-controls="'collapse' + j"
|
|
>
|
|
<span class="tavasi tavasi-Component-358--1"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:id="'collapse' + j"
|
|
class="collapse"
|
|
:class="{ show: 'collapse' + j == 'collapse0' }"
|
|
:aria-labelledby="'heading' + j"
|
|
data-parent="#accordionExample"
|
|
>
|
|
<div class="card-body">
|
|
<form>
|
|
<component
|
|
v-for="(formElement, index) in innerGroupItem.items"
|
|
:key="index"
|
|
:formElement="formElement"
|
|
:inputClass="handlerInputClass(formElement)"
|
|
:labelClass="'col-md-3'"
|
|
:rows="formElement.rows"
|
|
:is="
|
|
returnComponentName(innerGroupItem, formElement.type)
|
|
"
|
|
@take-value="saveComponentValue($event, formElement)"
|
|
@keydown="saveKeydown($event)"
|
|
class="component"
|
|
></component>
|
|
<div
|
|
class=""
|
|
style="
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
"
|
|
>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary"
|
|
style="font-size: 11px"
|
|
v-can="innerGroupItem.key + '_edit'"
|
|
@click.prevent="addNewEntity(activeSchemaGetter)"
|
|
>
|
|
ثبت
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState, mapActions } from "pinia";
|
|
import sidbarMenu from "~/pages/search/json/menu.json";
|
|
import newEntityBuilder from "~/pages/search/json/newEntityBuilder.json";
|
|
import searchApi from "~/apis/searchApi";
|
|
import { useStorage } from "@vueuse/core";
|
|
|
|
export default {
|
|
mounted() {
|
|
this.titleSelected = this.activeSchemaGetter.label;
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler: function (to, from) {
|
|
console.log("to", to);
|
|
console.log("from", from);
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
sidbarMenu: sidbarMenu,
|
|
newEntityBuilder: newEntityBuilder,
|
|
listUpdatedText: {},
|
|
titleSelected: "",
|
|
newEntityId: undefined,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
organNameGetter: "organNameGetter",
|
|
schemasGetter: "schemasGetter",
|
|
activeSchemaGetter: "activeSchemaGetter",
|
|
}),
|
|
},
|
|
methods: {
|
|
...mapActions(["schemasSetter", "activeSchemaSetter"]),
|
|
returnComponentName(innerGroupItem, type) {
|
|
if (type == "textarea") return "TextareaComponent";
|
|
else if (type == "select") return "SelectComponent";
|
|
else if (type == "date") return "DateComponent";
|
|
else return "InputComponent";
|
|
},
|
|
saveComponentValue(value, formElement) {
|
|
// console.log("🚀 ~ saveComponentValue ~ formElement:", formElement);
|
|
// console.log("🚀 ~ saveComponentValue ~ value:", value);
|
|
//در صورت تغییر نگهداری می شود تا وقتی کلید ثبت زد، ذخیره شود
|
|
// if (this.activeSchemaGetter[formElement.key] != value) {
|
|
// this.listUpdatedText[formElement.key] = value;
|
|
// }
|
|
if (value !== "") {
|
|
this.listUpdatedText[formElement.key] = value;
|
|
}
|
|
},
|
|
async getSchemas() {
|
|
try {
|
|
const { $api } = useNuxtApp();
|
|
const res = await $api(searchApi.schema.list, {
|
|
baseURL: repoUrl(),
|
|
method: "POST",
|
|
body: {
|
|
organ: this.organNameGetter,
|
|
system: "entityCreate",
|
|
build_state: buildState(),
|
|
},
|
|
});
|
|
let newEntitySchema = useStorage("newEntitySchema", undefined);
|
|
newEntitySchema.value = response.data.entityCreate;
|
|
|
|
this.schemasSetter(response.data.entityCreate);
|
|
|
|
let activeSchema = response.data.entityCreate[0];
|
|
this.activeSchemaSetter(activeSchema);
|
|
|
|
let activeNewEntitySchema = useStorage("activeNewEntitySchema", undefined);
|
|
activeNewEntitySchema.value = activeSchema;
|
|
} catch (err) {
|
|
this.fetchingData = false;
|
|
}
|
|
},
|
|
setItemDropdown(item, title) {
|
|
this.titleSelected = title;
|
|
this.activeSchemaSetter(item);
|
|
console.log("item", item);
|
|
},
|
|
handlerInputClass(item) {
|
|
if (item.type == "textarea") {
|
|
return "col-md-12";
|
|
} else if (item.type == "date" || item.type == "select") {
|
|
return "col-md-3";
|
|
} else {
|
|
return "col-md-8";
|
|
}
|
|
// console.log(item);
|
|
},
|
|
async addNewEntity(item) {
|
|
if (this.newEntityId !== undefined) {
|
|
this.updateNewEntity(item);
|
|
} else {
|
|
let url = searchApi.newEntity.add;
|
|
url = url.replace("{{index_key}}", item.key);
|
|
|
|
const formData = {
|
|
meta: JSON.stringify(this.listUpdatedText),
|
|
};
|
|
|
|
try {
|
|
const { $api } = useNuxtApp();
|
|
const res = await $api(url, {
|
|
baseURL: repoUrl(),
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
this.newEntityId = res._id;
|
|
} catch (err) {
|
|
this.fetchingData = false;
|
|
}
|
|
}
|
|
},
|
|
async updateNewEntity(item) {
|
|
let url = searchApi.newEntity.update;
|
|
url = url.replace("{{index_key}}", item.key);
|
|
url = url.replace("{{id}}", this.newEntityId);
|
|
const formData = {
|
|
meta: JSON.stringify(this.listUpdatedText),
|
|
};
|
|
|
|
try {
|
|
const { $api } = useNuxtApp();
|
|
const res = await $api(url, {
|
|
baseURL: repoUrl(),
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
} catch (err) {
|
|
this.fetchingData = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
main {
|
|
// background-color: red;
|
|
margin-right: 6em;
|
|
height: 100dvh;
|
|
header {
|
|
height: 6em;
|
|
// background-color: green;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #a7a098;
|
|
|
|
.logo-and-dropdown {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.dropdown {
|
|
margin-right: 2em;
|
|
}
|
|
.logo {
|
|
width: 40%;
|
|
}
|
|
}
|
|
}
|
|
section {
|
|
height: calc(100dvh - 10em);
|
|
overflow: auto;
|
|
// background-color: aqua;
|
|
}
|
|
}
|
|
.button-meno {
|
|
font-size: 12px;
|
|
transform: rotate(90deg);
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-top: 15px;
|
|
text-decoration: none;
|
|
span:hover {
|
|
color: #00b6e3;
|
|
}
|
|
}
|
|
// .select-text {
|
|
// text-align: right;
|
|
// background-color: #fff;
|
|
// font-size: 14px;
|
|
// border-radius: 8px;
|
|
// border-color: #f1f1f1;
|
|
// padding: 6px;
|
|
// &:hover {
|
|
// border-color: #afbac6;
|
|
// }
|
|
// }
|
|
.component {
|
|
input {
|
|
border-radius: 0.5rem;
|
|
border-color: var(--primary-color);
|
|
font-size: 14px;
|
|
// color: #afbac6;
|
|
&:focus {
|
|
border-color: var(--primary-color);
|
|
}
|
|
}
|
|
label {
|
|
font-size: 15px;
|
|
&:focus {
|
|
border-color: var(--primary-color);
|
|
}
|
|
}
|
|
select {
|
|
border-radius: 0.5rem;
|
|
border-color: var(--primary-color);
|
|
font-size: 14px;
|
|
// color: #afbac6;
|
|
&:focus {
|
|
border-color: var(--primary-color);
|
|
}
|
|
}
|
|
textarea {
|
|
border-radius: 0.5rem;
|
|
border-color: var(--primary-color);
|
|
padding: 1em;
|
|
&:focus {
|
|
border-color: var(--primary-color);
|
|
}
|
|
}
|
|
}
|
|
.accordion {
|
|
margin: 0 4em;
|
|
}
|
|
@media (max-width: 575.98px) {
|
|
main {
|
|
margin-right: 0;
|
|
header {
|
|
.logo-and-dropdown {
|
|
.logo {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
|
|
main {
|
|
margin-right: 0;
|
|
header {
|
|
.logo-and-dropdown {
|
|
.logo {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
|
main {
|
|
margin-right: 5em;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
|
main {
|
|
margin-right: 5em;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
}
|
|
</style>
|