470 lines
14 KiB
Vue
470 lines
14 KiB
Vue
<template>
|
|
<NuxtLayout name="default" :menu="adminMenu">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center">
|
|
<template v-if="canView">
|
|
<div class="col-12">
|
|
<div class="sub-header mb-3">
|
|
<div class="d-flex">
|
|
<div class="d-flex">
|
|
<label class="ms-2" for="form_id">فرم: </label>
|
|
<select
|
|
name="form_id"
|
|
id="form_id"
|
|
v-model="formId"
|
|
class="form-control text__14"
|
|
@change="showFormItem"
|
|
>
|
|
<template v-if="forms.length">
|
|
<option disabled :value="undefined" selected>
|
|
انتخاب مورد
|
|
</option>
|
|
|
|
<option
|
|
v-for="(form, index) in forms"
|
|
:key="index"
|
|
:value="form.id"
|
|
>
|
|
{{ form.title }}
|
|
</option>
|
|
</template>
|
|
|
|
<option v-else :value="undefined" selected>
|
|
موردی ثبت نشده است.
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="select-diplay-mode">
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="displayMode"
|
|
id="table"
|
|
:value="0"
|
|
v-model="selectedForm.listType"
|
|
/>
|
|
<label class="form-check-label" for="table">جدولی</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="displayMode"
|
|
id="list"
|
|
:value="1"
|
|
v-model="selectedForm.listType"
|
|
/>
|
|
<label class="form-check-label" for="list">فهرستی</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="subset-sub-header">
|
|
<button-component
|
|
title="ایجاد"
|
|
classes="btn d-inline-flex px-2 "
|
|
@click="openForm"
|
|
buttonText=""
|
|
>
|
|
<span class="tavasi tavasi-Component-212--1"
|
|
><span class="path1"></span><span class="path2"></span
|
|
><span class="path3"></span
|
|
></span>
|
|
</button-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="list-and-actions-container">
|
|
<my-table
|
|
:key="changeDetectionCounter"
|
|
height="auto"
|
|
maxHeight="calc(100vh - 15em)"
|
|
:isDraggable="true"
|
|
:isSortable="true"
|
|
:items="
|
|
selectedForm[LIST_TYPES[selectedForm.listType]]?.items ?? []
|
|
"
|
|
:fetchingData="fetchingData"
|
|
:tableColumns="tableColumns"
|
|
:tableActions="tableActions"
|
|
:paginationInfo="pagination"
|
|
@edit-table-item="editItem"
|
|
@delete-table-item="deleteItem"
|
|
@onSort="onSort"
|
|
@on-linked-title-click="onLinkedTitleClick"
|
|
/>
|
|
|
|
<div
|
|
class="d-flex justify-content-end mt-5 ms-3 form-actions"
|
|
v-if="showSaveButton"
|
|
>
|
|
<!-- <button
|
|
@click.prevent="resetForm()"
|
|
type="button"
|
|
class="btn btn-secondary mx-2"
|
|
data-dismiss="modal"
|
|
>
|
|
باز نشانی
|
|
</button> -->
|
|
<button
|
|
@click.prevent="saveFinalForm()"
|
|
type="button"
|
|
class="btn btn-primary"
|
|
>
|
|
ذخیره
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- new form item to create new element -->
|
|
<div class="col-auto" v-if="shwoPreviewForm">
|
|
<table-column-select-form
|
|
:selectedItem="rowItem"
|
|
:selectedForm="selectedForm"
|
|
@close-form-show="closeFormShow"
|
|
@update-column="updateColumn"
|
|
></table-column-select-form>
|
|
</div>
|
|
</template>
|
|
|
|
<no-data v-else>
|
|
<the-content-loading v-if="fetchingData"></the-content-loading>
|
|
|
|
<div v-else class="d-flex justify-content-center align-items-center">
|
|
<div
|
|
class="alert alert-warning d-flex justify-content-center align-items-center"
|
|
>
|
|
<span
|
|
class="tavasi tavasi-warning-circle color-inherit ms-1 text__32"
|
|
></span>
|
|
عدم دسترسی
|
|
</div>
|
|
</div>
|
|
</no-data>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</template>
|
|
<script>
|
|
import apis from "~/apis/adminApi";
|
|
import adminMenu from "~/json/admin/json/menu.json";
|
|
import { mapState, mapActions } from "pinia";
|
|
import { useCommonStore } from "~/stores/commonStore";
|
|
import { defineAsyncComponent } from "vue";
|
|
// import HttpService from "@services/httpService";
|
|
import tableActions from "~/json/admin/json/selectListColumnAction.json";
|
|
// import { mapActions } from "vuex";
|
|
|
|
const LIST_TYPES = {
|
|
0: "table_columns",
|
|
1: "list_columns",
|
|
};
|
|
|
|
export default {
|
|
name: "selectListColumnsCreate",
|
|
setup() {
|
|
definePageMeta({
|
|
name: "selectListColumnsCreate",
|
|
layout: false,
|
|
});
|
|
},
|
|
mounted() {
|
|
// this.httpService = new HttpService();
|
|
this.httpService = useNuxtApp()["$http"];
|
|
this.checkPermisionBeforGetList();
|
|
},
|
|
data() {
|
|
return {
|
|
canView: false,
|
|
adminMenu: adminMenu,
|
|
changeDetectionCounter: 0,
|
|
LIST_TYPES: LIST_TYPES,
|
|
rowItem: {},
|
|
shwoPreviewForm: false,
|
|
httpService: undefined,
|
|
|
|
pagination: {
|
|
pages: 0,
|
|
total: 0,
|
|
page: 1,
|
|
offset: 0,
|
|
limit: 100,
|
|
},
|
|
|
|
tableColumns: [
|
|
{ key: "title", title: "عنوان", width: "2", isLink: true },
|
|
{ key: "key", title: "کلیدواژه", width: "2" },
|
|
{ key: "width", title: "وزن پهنا", width: "2" },
|
|
],
|
|
tableActions: tableActions,
|
|
fetchingData: false,
|
|
buttonLoading: false,
|
|
forms: [],
|
|
formItems: [],
|
|
formId: undefined,
|
|
items: [],
|
|
selectedForm: {},
|
|
rowItemIndex: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
computedItems() {
|
|
return (
|
|
this.selectedForm[LIST_TYPES[this.selectedForm.listType]]?.items ?? []
|
|
);
|
|
},
|
|
showSaveButton() {
|
|
return this.selectedForm.table_columns?.items?.length > 0;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(useCommonStore, ["checkPermissions"]),
|
|
// ...mapActions(["checkPermissions"]),
|
|
checkPermisionBeforGetList() {
|
|
this.checkPermissions({
|
|
permission: "forms_select-list-columns",
|
|
_this: this,
|
|
})
|
|
.then(() => {
|
|
this.getForms()
|
|
.then(() => {
|
|
this.canView = true;
|
|
})
|
|
.catch(() => {
|
|
this.canView = false;
|
|
})
|
|
.finally(() => {
|
|
this.fetchingData = false;
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.canView = false;
|
|
});
|
|
},
|
|
onLinkedTitleClick({ rowItem, tableColumn, index }) {
|
|
this.editItem(index);
|
|
},
|
|
/*
|
|
summary: change the sort of form items(elements)
|
|
|
|
description: changing the sort of the form items
|
|
in the table by drag and drop them.
|
|
|
|
@param {Event} Sortable sort event.
|
|
@param {newIndex} String dropped into index.
|
|
@param {oldIndex} String dragged from index.
|
|
|
|
@return void.
|
|
*/
|
|
onSort({ newIndex, oldIndex }) {
|
|
const tempItem =
|
|
this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]].items[
|
|
newIndex
|
|
];
|
|
|
|
this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]].items[
|
|
newIndex
|
|
] =
|
|
this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]].items[
|
|
oldIndex
|
|
];
|
|
this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]].items[
|
|
oldIndex
|
|
] = tempItem;
|
|
},
|
|
saveFinalForm() {
|
|
if (this.buttonLoading) return;
|
|
this.buttonLoading = true;
|
|
|
|
const url = this.keyValueMicroServiceName + apis.projectForm.edit;
|
|
const formData = structuredClone(this.selectedForm);
|
|
|
|
formData.table_columns = JSON.stringify(formData.table_columns);
|
|
formData.list_columns = JSON.stringify(formData.list_columns);
|
|
formData.meta = JSON.stringify(formData.meta);
|
|
|
|
this.httpService
|
|
.postRequest(url, formData)
|
|
.then((res) => {
|
|
mySwalToast({
|
|
title: res.message,
|
|
html: null,
|
|
icon: "success",
|
|
});
|
|
})
|
|
|
|
.finally(() => {
|
|
this.buttonLoading = false;
|
|
});
|
|
},
|
|
resetForm() {},
|
|
async getForms() {
|
|
const formId = this.$route.params.id;
|
|
|
|
if (this.fetchingData) return;
|
|
this.fetchingData = true;
|
|
|
|
const formData = {
|
|
isown: 3,
|
|
sortby: "created",
|
|
type: 1,
|
|
|
|
...this.pagination,
|
|
};
|
|
let url = keyValueUrl() + apis.projectForm.list;
|
|
return await this.httpService
|
|
.postRequest(url, formData)
|
|
.then((response) => {
|
|
this.forms = response.data;
|
|
|
|
this.forms.forEach((element) => {
|
|
element.meta = element.meta ? JSON.parse(element.meta) : null;
|
|
element.table_columns = element.table_columns
|
|
? JSON.parse(element.table_columns)
|
|
: null;
|
|
// element.list_columns = JSON.parse(element['list_columns']);
|
|
|
|
element.list_columns = {
|
|
key: "list_columns",
|
|
items: [],
|
|
};
|
|
|
|
element.flatedItems = element.meta
|
|
? element.meta.flatMap((item) => item.items)
|
|
: [];
|
|
});
|
|
|
|
if (formId) {
|
|
this.formId = formId;
|
|
this.selectedForm = this.forms.find((item) => item.id == formId);
|
|
} else {
|
|
this.formId = response.data[0].id;
|
|
this.selectedForm = response.data[0];
|
|
}
|
|
})
|
|
.catch((error) => {});
|
|
},
|
|
showFormItem($event) {
|
|
const form = this.forms.find((item) => item.id == $event.target.value);
|
|
this.selectedForm = form;
|
|
this.changeDetectionCounter += 1;
|
|
},
|
|
|
|
updateColumn(updatedColumn) {
|
|
if (this.rowItemIndex)
|
|
this.$set(
|
|
this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]].items,
|
|
this.rowItemIndex,
|
|
updatedColumn
|
|
);
|
|
else {
|
|
// find new item in the forms table columns items.
|
|
// if exist => continue
|
|
// else catch block executs and create new table columns.
|
|
|
|
try {
|
|
const res = this.selectedForm[
|
|
this.LIST_TYPES[this.selectedForm.listType]
|
|
].items.filter((item) => item.key == updatedColumn.key);
|
|
|
|
if (res.length)
|
|
mySwalToast({
|
|
title: "ستونی با چنین مشخصاتی قبلا ایجاد شده است.",
|
|
html: null,
|
|
icon: "error",
|
|
});
|
|
else {
|
|
// const items = this.selectedForm[
|
|
// this.LIST_TYPES[this.selectedForm.listType]
|
|
// ].items;
|
|
|
|
// this.$set(
|
|
// this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]]
|
|
// .items,
|
|
// items.length,
|
|
// updatedColumn
|
|
// );
|
|
|
|
this.selectedForm[
|
|
this.LIST_TYPES[this.selectedForm.listType]
|
|
].items.push(updatedColumn);
|
|
this.changeDetectionCounter += 1;
|
|
}
|
|
} catch (msg) {
|
|
this.selectedForm[[this.LIST_TYPES[this.selectedForm.listType]]] = {
|
|
items: [updatedColumn],
|
|
title: this.selectedForm.title,
|
|
};
|
|
this.changeDetectionCounter += 1;
|
|
}
|
|
}
|
|
},
|
|
openForm() {
|
|
this.rowItem = {};
|
|
this.rowItemIndex = undefined;
|
|
|
|
this.shwoPreviewForm = true;
|
|
},
|
|
editItem(formIndex) {
|
|
this.rowItem =
|
|
this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]].items[
|
|
formIndex
|
|
];
|
|
this.rowItemIndex = formIndex;
|
|
this.shwoPreviewForm = true;
|
|
},
|
|
deleteItem(index) {
|
|
if (
|
|
this.selectedForm[this.LIST_TYPES[this.selectedForm.listType]].items
|
|
.length > 1
|
|
) {
|
|
mySwalConfirm({
|
|
title: "هشدار!!!",
|
|
html: "از حذف این مورد مطمئن هستید؟",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
this.selectedForm[
|
|
this.LIST_TYPES[this.selectedForm.listType]
|
|
].items.splice(index, 1);
|
|
}
|
|
});
|
|
} else
|
|
mySwalToast({
|
|
title: "حداقل تعداد ستون های جدول یک می باشد.",
|
|
html: null,
|
|
icon: "error",
|
|
});
|
|
},
|
|
|
|
closeFormShow() {
|
|
this.shwoPreviewForm = false;
|
|
},
|
|
},
|
|
components: {
|
|
TableColumnSelectForm: defineAsyncComponent(() =>
|
|
import("@components/forms/TableColumnSelectForm.vue")
|
|
),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list-and-actions-container {
|
|
position: relative;
|
|
|
|
.form-actions {
|
|
// position: absolute;
|
|
// bottom: 1em;
|
|
// left: 2em;
|
|
|
|
background-image: linear-gradient(to bottom, transparent, #fff);
|
|
}
|
|
}
|
|
</style>
|
|
height="auto" maxHeight="calc(100vh - 15em)"
|