feat: adjust notifications plugin to notifications frontend
This commit is contained in:
saparatayev
parent
fffc8edec1
commit
0b97a39d45
|
|
@ -136,6 +136,9 @@ return [
|
|||
'no_user' => 'A user was not found.',
|
||||
'post_delete_confirm' => 'This post has been published. Do you really want to delete this post? The data cannot be recovered',
|
||||
'thanks_for_posting' => 'Thank you for your request!',
|
||||
'new_message' => 'New message',
|
||||
'payment_reviewed' => 'Payment has been reviewed',
|
||||
'product_reviewed' => 'Post has been reviewed',
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -136,6 +136,9 @@ return [
|
|||
'no_user' => 'Пользователь не найден.',
|
||||
'post_delete_confirm' => 'Это объявление уже размещено на сайте. Вы действительно хотите удалить это объявление? Данные нельзя будет восстановить.',
|
||||
'thanks_for_posting' => 'Спасибо за оставленный вами запрос!',
|
||||
'new_message' => 'Новое сообщение',
|
||||
'payment_reviewed' => 'Платеж рассмотрен',
|
||||
'product_reviewed' => 'Объявление рассмотрено',
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -138,6 +138,9 @@ return [
|
|||
'no_user' => 'Beýle ulanyjy ýok.',
|
||||
'post_delete_confirm' => 'Bu bildiriş saýtda ýerleşdirilen. Bu bildirişi pozmak isleýärsiňizmi? Soň bu bildirişi dikeldip bolmaz.',
|
||||
'thanks_for_posting' => 'Ugradan ýüzlenmäňiz üçin sag boluň!',
|
||||
'new_message' => 'Täze hat',
|
||||
'payment_reviewed' => 'Töleg gözden geçirildi',
|
||||
'product_reviewed' => 'Bildiriş gözden geçirildi',
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<?php namespace RainLab\Notify\Models;
|
||||
|
||||
use Guzzle\Http\Url;
|
||||
use Model;
|
||||
use Markdown;
|
||||
use TPS\Birzha\Events\MessageReceivedEvent;
|
||||
use TPS\Birzha\Events\PaymentReviewedEvent;
|
||||
use TPS\Birzha\Events\ProductReviewedEvent;
|
||||
|
||||
/**
|
||||
* Notification Model stored in the database
|
||||
|
|
@ -111,4 +115,54 @@ class Notification extends Model
|
|||
{
|
||||
return Markdown::parse($this->body);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the description of the notification
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getDescriptionAttribute()
|
||||
{
|
||||
$e = new $this->event_type;
|
||||
|
||||
if($e instanceof MessageReceivedEvent) {
|
||||
|
||||
return trans('validation.new_message');
|
||||
|
||||
} elseif($e instanceof ProductReviewedEvent) {
|
||||
|
||||
return trans('validation.product_reviewed');
|
||||
|
||||
} elseif($e instanceof PaymentReviewedEvent) {
|
||||
|
||||
return trans('validation.payment_reviewed');
|
||||
}
|
||||
|
||||
return 'Unknown type notification';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the link where to redirect when the notification is clicked
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getLinkAttribute()
|
||||
{
|
||||
$e = new $this->event_type;
|
||||
|
||||
if($e instanceof MessageReceivedEvent) {
|
||||
|
||||
return \Url::to('/messages');
|
||||
|
||||
} elseif($e instanceof ProductReviewedEvent) {
|
||||
|
||||
return \Url::to('/my-posts');
|
||||
|
||||
} elseif($e instanceof PaymentReviewedEvent) {
|
||||
|
||||
return \Url::to('/balance');
|
||||
}
|
||||
|
||||
return \Url::to('/');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,12 +27,16 @@
|
|||
float: right;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.rainlab-userplus .notifications-content .notifications-loading {
|
||||
.rainlab-userplus .notifications-content .notifications-loading,
|
||||
.notification_area .notifications-loading,
|
||||
.accord_notification .notifications-loading {
|
||||
padding: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.rainlab-userplus .notifications-content .no-notifications {
|
||||
.rainlab-userplus .notifications-content .no-notifications,
|
||||
.notification_area .no-notifications,
|
||||
.accord_notification .no-notifications {
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,13 @@
|
|||
function toggleNotificationsPopover(el) {
|
||||
if ($(el).closest('form').toggleClass('active').hasClass('active')) {
|
||||
|
||||
if($(el).next().hasClass('notification_area')) {
|
||||
$(el).request('onLoadNotifications', {
|
||||
update: { '@notifications-list': '#notificationsContent' }
|
||||
update: { '@notifications-list': '#notification_area' }
|
||||
})
|
||||
} else if($(el).next().hasClass('accord_notification')) {
|
||||
$(el).request('onLoadNotifications', {
|
||||
update: { '@notifications-list': '#accord_notification' }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function loadOlderNotifications(el) {
|
||||
var $form = $(el).closest('form'),
|
||||
height = $('ul.notifications', $form).get(0).scrollHeight
|
||||
|
||||
$(el).request('onLoadOlderNotifications', {
|
||||
update: { '@notifications-list': '#notificationsContent' }
|
||||
}).done(function() {
|
||||
$('ul.notifications', $form).animate({ scrollTop: height }, 200)
|
||||
})
|
||||
}
|
||||
|
||||
function markNotificationsAsRead(el) {
|
||||
$(el).request('onMarkAllNotificationsAsRead', {
|
||||
update: { '@notifications-list': '#notificationsContent' }
|
||||
})
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ use Auth;
|
|||
use Carbon\Carbon;
|
||||
use Cms\Classes\ComponentBase;
|
||||
use ApplicationException;
|
||||
use Illuminate\Support\Facades\Redirect;
|
||||
|
||||
class Notifications extends ComponentBase
|
||||
{
|
||||
|
|
@ -28,6 +29,13 @@ class Notifications extends ComponentBase
|
|||
'comment' => 'Inject the JavaScript and Stylesheet used by the default component markup',
|
||||
'type' => 'checkbox',
|
||||
'default' => true
|
||||
],
|
||||
'frontend' => [
|
||||
'title' => 'Frontend block',
|
||||
'description' => 'Choose where in the page to display',
|
||||
'type' => 'dropdown',
|
||||
'options' => ['desktop','mobile'],
|
||||
'default' => 'desktop'
|
||||
]
|
||||
];
|
||||
}
|
||||
|
|
@ -92,6 +100,15 @@ class Notifications extends ComponentBase
|
|||
$this->page['notifications'] = $this->unreadNotifications();
|
||||
}
|
||||
|
||||
public function onMarkNotificationAsRead()
|
||||
{
|
||||
$this->getUnreadQuery()
|
||||
->where('id', \Input::get('notification_id'))
|
||||
->update(['read_at' => Carbon::now()]);
|
||||
|
||||
return Redirect::to(\Input::get('redirect_link'));
|
||||
}
|
||||
|
||||
//
|
||||
// Helpers
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,28 +1 @@
|
|||
<form class="rainlab-userplus">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default"
|
||||
onclick="toggleNotificationsPopover(this)">
|
||||
View notifications
|
||||
</button>
|
||||
|
||||
<div class="notifications-popover">
|
||||
<div class="notifications-header">
|
||||
<h4>Notifications</h4>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
onclick="toggleNotificationsPopover(this)">×</button>
|
||||
|
||||
<a href="javascript:;" onclick="markNotificationsAsRead(this)" class="mark-all-read">
|
||||
Mark all as read
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="notifications-content" id="notificationsContent">
|
||||
<div class="notifications-loading">
|
||||
<span class="oc-loading"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% partial __SELF__~"::"~__SELF__.property('frontend') %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="notification_box">
|
||||
<div class="notification_header" onclick="toggleNotificationsPopover(this)">
|
||||
<div class="natification_icon">
|
||||
<img src="{{'assets/images/svg/bell.svg'|theme}}" alt="bell">
|
||||
</div>
|
||||
<p>{{ 'auth.notifications'|_ }}</p>
|
||||
</div>
|
||||
|
||||
<div class="notification_area" id="notification_area">
|
||||
<div class="notifications-loading">
|
||||
<span class="oc-loading"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="mobile_user-item accord" onclick="toggleNotificationsPopover(this)">
|
||||
<div class="mobile_user-item-icon">
|
||||
<img src="{{ 'assets/images/svg/bell-b.svg'|theme }}" alt="bell">
|
||||
</div>
|
||||
<p class="mobile_user-item-text">
|
||||
{{ 'auth.notifications'|_ }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="accord_notification" id="accord_notification">
|
||||
<div class="notifications-loading">
|
||||
<span class="oc-loading"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,23 +1,20 @@
|
|||
{% if notifications.total %}
|
||||
<ul class="notifications">
|
||||
{% for notification in notifications %}
|
||||
<li class="type-{{ notification.type }}">
|
||||
<i class="icon-{{ notification.icon|default('star') }}"></i>
|
||||
<div class="parsed-body">{{ notification.parsed_body|raw }}</div>
|
||||
<div class="text-muted date">{{ notification.created_at|date('M d, Y') }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if notifications.lastItem() < notifications.total %}
|
||||
<div class="notifications-footer">
|
||||
<a href="javascript:;" onclick="loadOlderNotifications(this)" class="text-muted">
|
||||
View older messages ({{notifications.total - notifications.lastItem()}})
|
||||
<a
|
||||
href="#"
|
||||
data-request="onMarkNotificationAsRead"
|
||||
data-request-data="redirect_link: '{{notification.link}}', notification_id: '{{notification.id}}'"
|
||||
class="notification_area-item"
|
||||
>
|
||||
<h4 class="notification_are-title">
|
||||
{{ notification.description }}
|
||||
</h4>
|
||||
<p class="notification_area-time">
|
||||
{{ notification.created_at|date('H:s - d.m.Y') }}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<input type="hidden" name="records_per_page" value="{{ recordsToDisplay }}" />
|
||||
{% else %}
|
||||
<p class="text-muted no-notifications">There are no notifications for you</p>
|
||||
<p class="text-muted no-notifications">{{ 'auth.no_notifications'|_ }}</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ en:
|
|||
auth.messages: Messages
|
||||
auth.logout: Logout
|
||||
auth.add_announce: Add announcement
|
||||
auth.notifications: Notifications
|
||||
auth.no_notifications: There are no notifications
|
||||
account.company: Company
|
||||
account.legalization_number: Legalization number
|
||||
account.save: Save
|
||||
|
|
@ -149,6 +151,8 @@ ru:
|
|||
auth.messages: Сообщения
|
||||
auth.logout: Выйти
|
||||
auth.add_announce: Добавить объявление
|
||||
auth.notifications: Уведомления
|
||||
auth.no_notifications: Нет уведомлений
|
||||
account.company: Компания
|
||||
account.legalization_number: Номер легализации
|
||||
account.save: Ýatla
|
||||
|
|
@ -282,6 +286,8 @@ tm:
|
|||
auth.messages: Hatlar
|
||||
auth.logout: Çykyş
|
||||
auth.add_announce: Bildiriş goş
|
||||
auth.notifications: Habarnamalar
|
||||
auth.no_notifications: Habarnamalar ýok
|
||||
account.company: Şereket
|
||||
account.legalization_number: Legalizasiýa nomeri
|
||||
account.save: Ýatla
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ view = "signin"
|
|||
|
||||
[session]
|
||||
security = "all"
|
||||
|
||||
[notifications]
|
||||
recordsPerPage = 7
|
||||
includeAssets = 1
|
||||
==
|
||||
<?php
|
||||
function onStart(){
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ view = "signin"
|
|||
|
||||
[session]
|
||||
security = "all"
|
||||
|
||||
[notifications]
|
||||
recordsPerPage = 7
|
||||
includeAssets = 1
|
||||
==
|
||||
<?php
|
||||
function onStart(){
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ is_hidden = 0
|
|||
|
||||
[viewBag]
|
||||
localeTitle[ru] = "Сообщения"
|
||||
localeUrl[ru] = "/soobshcheniya"
|
||||
localeUrl[ru] = "/messages"
|
||||
|
||||
[messages]
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
[staticMenu]
|
||||
code = "main-top"
|
||||
|
||||
==
|
||||
<!-- Header Top ========================================================= -->
|
||||
<section class="header_top" id="head-top">
|
||||
|
|
@ -209,6 +208,8 @@ code = "main-top"
|
|||
</p>
|
||||
</div>
|
||||
|
||||
{% component 'notifications' frontend='mobile' %}
|
||||
|
||||
<a href="{{ 'kabinet/messages'|page }}" class="mobile_user-item">
|
||||
<div class="mobile_user-item-icon">
|
||||
<img src="{{'assets/images/svg/inbox.svg'|theme}}" alt="">
|
||||
|
|
@ -309,11 +310,19 @@ code = "main-top"
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="languages">
|
||||
{% for code, name in locales %}
|
||||
<a href="#" class="lang_item {{ code == activeLocale ? 'active' : '' }}" data-request="onSwitchLocale" data-request-data="locale: '{{code}}'">{{ code }}</a>
|
||||
{% endfor %}
|
||||
<div class="nav_wrap-box">
|
||||
{% if user %}
|
||||
|
||||
{% component 'notifications' frontend='desktop' %}
|
||||
|
||||
{% endif %}
|
||||
<div class="languages">
|
||||
{% for code, name in locales %}
|
||||
<a href="#" class="lang_item {{ code == activeLocale ? 'active' : '' }}" data-request="onSwitchLocale" data-request-data="locale: '{{code}}'">{{ code }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -368,4 +377,4 @@ code = "main-top"
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
Loading…
Reference in New Issue