base_ui/layouts/jahat/layout/EntityContent.vue

357 lines
11 KiB
Vue
Raw Permalink Normal View History

2025-02-01 09:34:55 +00:00
<template>
<div>
<div
:class="mode == 1 ? 'jahat__content_list' : 'jahat__content-container'"
>
<div class="jahat__content">
<div class="search-list firefox-scrollbar">
<filter-list
v-if="subjectFilters.size"
:filters="subjectFilters.values()"
@remove-filter="removeFromFilters"
></filter-list>
<filter-list
v-if="subjectFilters.size"
:filters="creationFilters.values()"
@remove-filter="removeFromFilters"
></filter-list>
<div
v-for="(entity, index) in entities"
:key="index"
class="search-list__item"
>
<div class="search-list__content">
<div class="search-list__header">
<span
:disabled="true"
:to="{ name: 'issues' }"
class="label text__14"
>{{ getEntityName(entity._source.type_id) }}</span
>
<a
href="javascript:void(0)"
@click.prevent="routeTo(entity)"
class="search-list__title text__16"
v-html="getTitle(entity)"
>
</a>
<!-- <router-link
:title="entity._source.title"
:to="{
name: 'issuesShow',
params: { id: entity._source.id,parentRouteName:$route.name },
}"
class="search-list__title text__16"
>
{{ entity._source.title }}
</router-link> -->
</div>
<div class="search-list__meta">
<!-- <div class="search-list__sub-item text__14">با {{ entity.sub_issue_count ? entity.sub_issue_count : 0 }}
زیر مساله، با {{ entity.responses_count ? entity.responses_count : 0 }} پاسخ
</div> -->
<!-- <div class="search-list__sub-item text__14" v-if="entity.criterions && entity.criterions.length > 0">
<span> معیارها : </span>
<span class="text__semibold"> {{ (entity.criterions && entity.criterions.length > 0) ? entity.criterions[0].value_json.text : '' }}</span>
</div> -->
</div>
<div
v-if="entity._source?.favorite"
class="search-list__content text__14 text__gray"
v-html="getText(entity).unfavoriteText"
></div>
<div
v-if="entity._source?.unfavorite"
class="search-list__content text__14 text__gray"
v-html="getText(entity).text"
></div>
<div
v-if="entity._source.subject && entity._source.subject.length"
class="search-list__content text__14 text__gray"
>
<span :disabled="true" class="text__16 text__blue"
>موضوع :
</span>
<a
v-for="(subject, index) in entity._source.subject"
:key="index"
href="javascript:void(0)"
@click.prevent="addToFilters(subject)"
class="search-list__title text__16"
>
{{ subject.title }}،
</a>
</div>
<div class="search-item__actions" v-if="showActions">
<span class="tavasi tavasi-more-vert"></span>
<!-- v-can="$route.name + '_subject'" -->
<button
v-can="$route.name + '_subject'"
@click="$emit('open-subject-modal', entity)"
title="موضوع زنی"
class="btn show-detail-btn px-1"
type="button"
>
<span class="tavasi tavasi-doc-outline"></span>
</button>
<button
v-can="$route.name + '_update'"
@click="$emit('edit-entity', entity)"
title="ویرایش مسئله"
class="btn show-detail-btn px-1"
type="button"
>
<span class="tavasi tavasi-Component-242--1"></span>
</button>
<button
v-can="$route.name + '_delete'"
@click="$emit('delete-entity', entity)"
title="حذف"
class="btn show-detail-btn px-1"
type="button"
>
<span class="tavasi tavasi-Component-295--1"></span>
</button>
<button-component
title=" کپی لینک مساله"
buttonText=""
class="btn show-detail-btn px-1"
@click="copyToClipboard(entity._source.id)"
>
<svg class="icon icon-copy2 fz-8">
<use xlink:href="#icon-copy2"></use>
</svg>
</button-component>
</div>
</div>
</div>
</div>
<div class="paginations">
<!-- <jahat-pagination
:paginationInfo="paginationInfo"
@page-changed="pageChanged"
@page-limit-changed="pageLimitChanged"
>
</jahat-pagination> -->
</div>
</div>
</div>
</div>
</template>
<script>
import { commonMixin } from "~/jahat/mixins/commonMixin";
// import { apiMixin } from "~/jahat/mixins/apiMixin";
import { mapState } from "pinia";
export default {
name: "EntityContent",
mixins: [commonMixin],
mounted() {
this.pagination = this.paginationInfo;
},
data() {
return {
pagination: {
page: 1,
pages: 0,
total: 0,
offset: 0, // page * per_page
limit: 10, //per_page
},
maxlenText: 300,
};
},
props: {
subjectFilters: { type: Map, default: () => new Map() },
creationFilters: { type: Map, default: () => new Map() },
entities: { type: Array, default: () => [] },
paginationInfo: { default: () => {} },
mode: { type: Number, default: 1 },
},
computed: {
...mapState(["userPermisionGetter"]),
showActions() {
const canUpdate = this.userPermisionGetter?.includes(
this.$route.name + "_update"
);
const canDelete = this.userPermisionGetter?.includes(
this.$route.name + "_delete"
);
const canSubject = this.userPermisionGetter?.includes(
this.$route.name + "_subject"
);
const canCopy = true;
return canUpdate || canDelete || canSubject || canCopy;
},
},
methods: {
pageLimitChanged(paging) {
this.$emit("pageLimitChanged", paging);
},
pageChanged(paging) {
this.$emit("pageChanged", paging);
},
sortChanged(sorting) {
this.$emit("sortChanged", sorting);
},
resetPagination() {
this.$emit("resetPagination", sorting);
},
addToFilters(filter) {
this.$emit("add-filter", filter);
},
removeFromFilters(filter) {
this.$emit("remove-filter", filter);
},
routeTo(entity) {
this.$emit("close");
let url = "";
if (entity._source.type_id == this.getEntityTypeId("issue")) {
url = "issuesShow";
this.$router.push({
name: url,
params: {
id: entity._source.id,
parentRouteName: this.$router.name,
},
});
} else if (entity._source.type_id == this.getEntityTypeId("answer")) {
url = "answersShow";
this.$router.push({
name: url,
params: {
entityId: entity._source.entities.entity_id,
// parentRouteName: this.$router.name,
answerId: entity._source.id,
},
});
} else if (entity._source.type_id == this.getEntityTypeId("crition")) {
url = "critionsShow";
this.$router.push({
name: url,
params: {
id: entity._source.id,
parentRouteName: this.$router.name,
critionId: entity._source.id,
},
});
}
},
getTitle(entity) {
if (entity._source.type_id == this.getEntityTypeId("issue"))
return entity._source.title;
else if (
entity._source.type_id == this.getEntityTypeId("answer") &&
entity._source.entities
) {
if (Array.isArray(entity._source.entities))
return entity._source.entities[0]?.entity_title;
else return entity._source.entities.entity_title;
}
return entity._source.title;
},
getText(entity) {
let text = "";
let unfavoriteText = "";
if (entity._source.type_id == this.getEntityTypeId("issue")) {
if (entity._source.summary) text = entity._source.summary;
else text = entity._source.description;
}
if (entity._source.type_id == this.getEntityTypeId("crition")) {
if (entity._source.favorite)
text = "مطلوب : " + entity._source.favorite;
if (entity._source.unfavorite)
unfavoriteText = "\n" + "نامطلوب : " + entity._source.unfavorite;
}
if (
(text == "" ||
entity._source.type_id == this.getEntityTypeId("answer")) &&
entity._source.summary
)
text = entity._source.summary;
if (text == "" && entity._source.summary) text = entity._source.summary;
if (text == "" && entity._source.description)
text = entity._source.description;
text =
text?.length > this.maxlenText
? text.substr(0, this.maxlenText) + "..."
: text;
return {
text,
unfavoriteText,
};
},
},
};
</script>
<style lang="scss" scoped>
.search-list__item {
position: relative;
padding: 1em;
overflow: hidden;
&:not(:last-child) {
margin-bottom: 30px;
}
&:hover,
&.active {
background-color: #e8fcff;
.search-item__actions {
// width: 6.5em;
width: auto;
transition: width 0.5s;
background: #fff;
border-radius: 0 0.5em 0.5em 0;
.tavasi-more-vert {
transition: all 0.2s;
display: none;
}
}
}
}
.search-item__actions {
position: absolute;
left: 0;
width: 1.6em;
top: 1em;
// overflow: hidden;
transition: all 0.5s;
display: flex;
align-items: center;
.btn {
display: flex;
align-items: center;
justify-content: center;
&:hover {
filter: brightness(0.7);
}
.tavasi,
.icon-copy2 {
color: #adbec4;
}
.icon-copy2 {
font-size: 0.8rem;
}
}
}
</style>