417 lines
10 KiB
Vue
417 lines
10 KiB
Vue
<template>
|
|
<!-- :class="[$attrs.index % 2 == 0 ? 'read' : 'unread']" -->
|
|
<div class="user__item-container">
|
|
<div class="btn user__item w-100" :disabled="buttonLoading">
|
|
<div>
|
|
<svg
|
|
class="icon icon-Component-241--5"
|
|
style="color: var(--primary-color)"
|
|
>
|
|
<use xlink:href="#icon-Component-241--5"></use>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- <div class="user__pic">
|
|
<img
|
|
:src="imageBaseUrl + item._source.attachment[0].link"
|
|
:alt="item._source.username"
|
|
/>
|
|
</div> -->
|
|
<!-- <div class="user__content">
|
|
<div class="user__item-head">
|
|
<div class="user__name">
|
|
{{ item._source.username }}
|
|
<div class="user__status">دیدگاه نوشت</div>
|
|
</div>
|
|
<div class="user__date">
|
|
{{ timeSince(item._source.time_edit) }} پیش
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="showTitle"
|
|
class="user__text"
|
|
v-html="item._source.title"
|
|
></div>
|
|
<div v-else class="user__text" v-html="item._source.description"></div>
|
|
</div> -->
|
|
<div class="user__content">
|
|
<div class="col" @click="$emit('go-to-notification-show-page', item)">
|
|
<!-- <div class="user__item-head">
|
|
{{ item._source.username }}
|
|
</div> -->
|
|
<div
|
|
v-if="showTitle"
|
|
class="user__text"
|
|
:class="{ user__text_show: shortenTitle == true }"
|
|
v-html="item?._source?.title"
|
|
></div>
|
|
<div v-else>
|
|
<div class="user__text" v-html="item?._source?.title"></div>
|
|
<div class="user__text" v-html="item?._source?.description"></div>
|
|
</div>
|
|
<div class="user__date">
|
|
{{ timeSince(item?._source?.time_edit) }} پیش
|
|
</div>
|
|
</div>
|
|
<div v-if="showTools">
|
|
<div class="col-auto">
|
|
<span
|
|
class="badge"
|
|
:class="[($attrs.index as number) % 2 === 0 ? 'badge-success' : 'badge-danger']"
|
|
>جدید</span
|
|
>
|
|
</div>
|
|
<div class="col-auto d-flex">
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn dropdown-toggle"
|
|
type="button"
|
|
id="dropdownMenuButton"
|
|
data-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
دسته بندی
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">دسته یک</a>
|
|
<a class="dropdown-item" href="#">دسته دو</a>
|
|
<a class="dropdown-item" href="#">دسته سه</a>
|
|
</div>
|
|
</div>
|
|
|
|
<button-component
|
|
@click="deleteNotification(item)"
|
|
buttonText=""
|
|
v-tooltip="'حذف'"
|
|
classes="btn"
|
|
>
|
|
<svg class="icon icon-Component-295--1">
|
|
<use xlink:href="#icon-Component-295--1"></use>
|
|
</svg>
|
|
</button-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="showActions" class="search-item__actions">
|
|
<span class="tavasi tavasi-more-vert"></span>
|
|
<button
|
|
@click.pevent="$emit('edit-item')"
|
|
title="ویرایش"
|
|
class="btn"
|
|
type="button"
|
|
>
|
|
<svg class="icon icon-Component-242--1">
|
|
<use xlink:href="#icon-Component-242--1"></use>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
@click="$emit('delete-item')"
|
|
title="حذف"
|
|
class="btn"
|
|
type="button"
|
|
>
|
|
<svg class="icon icon-Component-295--1">
|
|
<use xlink:href="#icon-Component-295--1"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import apis from "~/apis/adminApi";
|
|
import type { listNotification } from "~/types/notificationTypes";
|
|
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object as PropType<listNotification>,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
buttonLoading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
showTools: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
showActions: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
showTitle: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
shortenTitle: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
|
|
// beforeMount() {
|
|
// this.httpService = new HttpService(
|
|
// import.meta.env.VITE_BASE_URL + repoUrl()
|
|
// );
|
|
// },
|
|
data() {
|
|
return {
|
|
// httpService: undefined,
|
|
};
|
|
},
|
|
emits: ["go-to-notification-show-page", "delete-item", "edit-item"],
|
|
computed: {
|
|
imageBaseUrl() {
|
|
return import.meta.env.VITE_BASE_URL;
|
|
},
|
|
},
|
|
methods: {
|
|
timeSince(timeStamp: number) {
|
|
var date = new Date(timeStamp * 1000);
|
|
var seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000); //برای خطا ندادنه تایپ اسکریپت از متد getTime() که تعداد میلیثانیههای معادل یک شیء تاریخ را برمیگرداند باید استفاده کرد
|
|
var interval = seconds / 31536000;
|
|
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " سال";
|
|
}
|
|
interval = seconds / 2592000;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " ماه";
|
|
}
|
|
interval = seconds / 86400;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " روز";
|
|
}
|
|
interval = seconds / 3600;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " ساعت";
|
|
}
|
|
interval = seconds / 60;
|
|
if (interval > 1) {
|
|
return Math.floor(interval) + " دقیقه";
|
|
}
|
|
return Math.floor(seconds) + " ثانیه";
|
|
},
|
|
async deleteNotification(item: {}) {
|
|
// let url = adminApi.notification.delete;
|
|
// url = url.replace("{{id}}", item._id);
|
|
// url = url.replace("{{entity_type}}", "notif");
|
|
|
|
// this.httpService
|
|
// .postRequest(url)
|
|
// .then((res) => {
|
|
// this.mySwalToast({
|
|
// html: res?.message ?? "با موفقیت حذف شد.",
|
|
// });
|
|
// setTimeout(() => {
|
|
// this.$emit("getList");
|
|
// }, 1000);
|
|
// })
|
|
// .catch(() => {})
|
|
|
|
try {
|
|
const { $api } = useNuxtApp();
|
|
const data: resModelTwo = await $api(apis.notification.counts, {
|
|
baseURL: logMicroServiceName(),
|
|
method: "GET",
|
|
});
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user__content {
|
|
display: flex;
|
|
align-items: center;
|
|
// flex-direction: column;
|
|
margin-right: 1em;
|
|
width: 100%;
|
|
.user__text_show {
|
|
max-width: 13em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.user__text {
|
|
color: #1b2733;
|
|
width: 90%;
|
|
}
|
|
.user__date {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
font-size: 0.8rem;
|
|
margin-top: 1em;
|
|
color: #bac4ce;
|
|
}
|
|
|
|
.badge {
|
|
padding: 0.5em;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.2;
|
|
font-size: 1rem;
|
|
background-color: transparent;
|
|
text-shadow: 1px;
|
|
border: 1px solid #eee;
|
|
|
|
&-danger {
|
|
color: red;
|
|
}
|
|
&-success {
|
|
color: #28a745;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.user__item-container {
|
|
position: relative;
|
|
margin-bottom: 1em;
|
|
|
|
border-radius: 1em;
|
|
border: 1px solid #eee;
|
|
padding: 1em;
|
|
|
|
&.read {
|
|
border-right-width: 3px;
|
|
border-right-style: solid;
|
|
border-right-color: #33eb33;
|
|
background-color: #33eb331a;
|
|
border-radius: 1em;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
&.unread {
|
|
border-right-width: 3px;
|
|
border-right-style: solid;
|
|
border-right-color: red;
|
|
background-color: rgba(255, 0, 0, 0.08);
|
|
border-radius: 1em;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
// &::after {
|
|
// content: "";
|
|
// border-bottom: 1px solid #f1f1f1;
|
|
// width: 90%;
|
|
// position: absolute;
|
|
// bottom: 0;
|
|
// right: 5%;
|
|
// }
|
|
.user__item {
|
|
text-align: right;
|
|
display: flex;
|
|
// align-items: center;
|
|
// padding: 0.5em 0;
|
|
margin-bottom: 0.5em;
|
|
border-radius: 0;
|
|
|
|
&:not(:last-child) {
|
|
// border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
// background-color: #eee;
|
|
}
|
|
.user__pic {
|
|
width: 5em;
|
|
height: 5em;
|
|
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 2px solid #eee;
|
|
|
|
img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
// .user__content {
|
|
// margin-right: 0.5em;
|
|
// flex: 1;
|
|
|
|
// .user__item-head {
|
|
// margin-left: 1.5em;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: space-between;
|
|
// }
|
|
// }
|
|
|
|
.user__no-pic {
|
|
border: 2px solid #fff;
|
|
color: white;
|
|
font-size: 10px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
font-size: 10px;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
background-color: var(--list-background-color);
|
|
|
|
.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>
|