safavimohadeseh78
e9012e26fb
Apply shared app-page-content-loading layout and theme-aligned spin dots across the app.
74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<template>
|
|
<div class="app-notifications-page-root">
|
|
<DesktopAppNotificationsView v-if="isDesktop" />
|
|
<MobileAppNotificationsView v-else />
|
|
|
|
<BasicActionSheet
|
|
v-model:show="detailVisible"
|
|
:title="selectedItem?.title || 'جزئیات اعلان'"
|
|
width="32rem"
|
|
:show-button="true"
|
|
:show-cancel="false"
|
|
:show-ok="true"
|
|
ok-text="بستن"
|
|
@ok="closeDetail"
|
|
@close="closeDetail"
|
|
@cancel="closeDetail"
|
|
>
|
|
<div v-if="selectedItem" class="app-notif-detail">
|
|
<div class="app-notif-detail__meta">
|
|
<span
|
|
class="app-notif-detail__badge"
|
|
:class="`app-notif-detail__badge--${selectedItem.severity}`"
|
|
>
|
|
{{ severityLabel(selectedItem.severity) }}
|
|
</span>
|
|
</div>
|
|
<p class="app-notif-detail__body">{{ selectedItem.body }}</p>
|
|
</div>
|
|
</BasicActionSheet>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
|
|
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
|
|
import { useAppNotificationsPage } from './composables/useAppNotificationsPage'
|
|
import { severityLabel } from './composables/notificationDisplay'
|
|
import DesktopAppNotificationsView from './desktop/DesktopAppNotificationsView.vue'
|
|
import MobileAppNotificationsView from './mobile/MobileAppNotificationsView.vue'
|
|
|
|
const isDesktop = useDesktopBreakpoint()
|
|
const { detailVisible, selectedItem, closeDetail } = useAppNotificationsPage()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-notifications-page-root {
|
|
min-height: 100%;
|
|
height: 100%;
|
|
}
|
|
.app-notif-detail__meta {
|
|
@apply mb-3 flex items-center;
|
|
}
|
|
.app-notif-detail__badge {
|
|
@apply rounded-md px-2 py-0.5 text-xs font-bold;
|
|
}
|
|
.app-notif-detail__badge--info {
|
|
@apply bg-blue-50 text-blue-700;
|
|
}
|
|
.app-notif-detail__badge--success {
|
|
@apply bg-green-50 text-green-700;
|
|
}
|
|
.app-notif-detail__badge--warning {
|
|
@apply bg-orange-50 text-orange-700;
|
|
}
|
|
.app-notif-detail__badge--danger {
|
|
@apply bg-red-50 text-red-700;
|
|
}
|
|
.app-notif-detail__body {
|
|
@apply m-0 whitespace-pre-wrap text-sm leading-7 text-gray-700;
|
|
max-height: min(60vh, 28rem);
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|