mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-10 03:49:24 +00:00
News moderation buttons directly on the home page
This commit is contained in:
imperosol
39
com/static/bundled/com/components/moderation-alert-index.ts
Normal file
39
com/static/bundled/com/components/moderation-alert-index.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { exportToHtml } from "#core:utils/globals";
|
||||
import Alpine from "alpinejs";
|
||||
import { newsDeleteNews, newsModerateNews } from "#openapi";
|
||||
|
||||
// This will be used in jinja templates,
|
||||
// so we cannot use real enums as those are purely an abstraction of Typescript
|
||||
const AlertState = {
|
||||
// biome-ignore lint/style/useNamingConvention: this feels more like an enum
|
||||
PENDING: 1,
|
||||
// biome-ignore lint/style/useNamingConvention: this feels more like an enum
|
||||
MODERATED: 2,
|
||||
// biome-ignore lint/style/useNamingConvention: this feels more like an enum
|
||||
DELETED: 3,
|
||||
};
|
||||
exportToHtml("AlertState", AlertState);
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("moderationAlert", (newsId: number) => ({
|
||||
state: AlertState.PENDING,
|
||||
newsId: newsId as number,
|
||||
loading: false,
|
||||
|
||||
async moderateNews() {
|
||||
this.loading = true;
|
||||
// biome-ignore lint/style/useNamingConvention: api is snake case
|
||||
await newsModerateNews({ path: { news_id: this.newsId } });
|
||||
this.state = AlertState.MODERATED;
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
async deleteNews() {
|
||||
this.loading = true;
|
||||
// biome-ignore lint/style/useNamingConvention: api is snake case
|
||||
await newsDeleteNews({ path: { news_id: this.newsId } });
|
||||
this.state = AlertState.DELETED;
|
||||
this.loading = false;
|
||||
},
|
||||
}));
|
||||
});
|
||||
@ -171,7 +171,9 @@
|
||||
}
|
||||
|
||||
.news_event {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
padding: 1em;
|
||||
|
||||
header {
|
||||
|
||||
73
com/templates/com/macros.jinja
Normal file
73
com/templates/com/macros.jinja
Normal file
@ -0,0 +1,73 @@
|
||||
{% macro news_moderation_alert(news, user, alpineState = None) %}
|
||||
{# An alert to display on top of non moderated news,
|
||||
with actions to either moderate or delete them.
|
||||
|
||||
The current state of the alert is accessible through
|
||||
the given `alpineState` variable.
|
||||
This state is a `AlertState`, as defined in `moderation-alert-index.ts`
|
||||
|
||||
Example :
|
||||
```jinja
|
||||
<div x-data="{state: AlertState.PENDING}">
|
||||
{{ news_moderation_alert(news, user, "state") }}
|
||||
</div>
|
||||
```
|
||||
|
||||
Args:
|
||||
news: The `News` object to which this alert is related
|
||||
user: The request.user
|
||||
alpineState: An alpine variable name
|
||||
|
||||
Warning:
|
||||
If you use this macro, you must also include `moderation-alert-index.ts`
|
||||
in your template.
|
||||
#}
|
||||
<div
|
||||
x-data="moderationAlert({{ news.id }})"
|
||||
{% if alpineState %}
|
||||
x-modelable="{{ alpineState }}"
|
||||
x-model="state"
|
||||
{% endif %}
|
||||
>
|
||||
<template x-if="state === AlertState.PENDING">
|
||||
<div class="alert alert-yellow">
|
||||
<div class="alert-main">
|
||||
<strong>{% trans %}Waiting moderation{% endtrans %}</strong>
|
||||
<p>
|
||||
{% trans trimmed %}
|
||||
This news isn't moderated and is visible
|
||||
only by its author and the communication admins.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans trimmed %}
|
||||
It will stay hidden for other users until it has been moderated.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
</div>
|
||||
{% if user.has_perm("com.moderate_news") %}
|
||||
<span class="alert-aside" :aria-busy="loading">
|
||||
<button class="btn btn-green" @click="moderateNews()" :disabled="loading">
|
||||
<i class="fa fa-check"></i> {% trans %}Moderate{% endtrans %}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if user.has_perm("com.delete_news") %}
|
||||
<button class="btn btn-red" @click="deleteNews()" :disabled="loading">
|
||||
<i class="fa fa-trash-can"></i> {% trans %}Delete{% endtrans %}
|
||||
</button>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="state === AlertState.MODERATED">
|
||||
<div class="alert alert-green">
|
||||
{% trans %}News moderated{% endtrans %}
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="state === AlertState.DELETED">
|
||||
<div class="alert alert-red">
|
||||
{% trans %}News deleted{% endtrans %}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
@ -1,5 +1,6 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
{% from 'core/macros.jinja' import user_profile_link, facebook_share, tweet, link_news_logo, gen_news_metatags %}
|
||||
{% from "com/macros.jinja" import news_moderation_alert %}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}News{% endtrans %} -
|
||||
@ -16,39 +17,49 @@
|
||||
<link rel="stylesheet" href="{{ static('com/css/news-detail.scss') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_js %}
|
||||
<script type="module" src={{ static("bundled/com/components/moderation-alert-index.ts") }}></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<p><a href="{{ url('com:news_list') }}">{% trans %}Back to news{% endtrans %}</a></p>
|
||||
<section id="news_details">
|
||||
<div class="club_logo">
|
||||
<img src="{{ link_news_logo(news)}}" alt="{{ news.club }}" />
|
||||
<a href="{{ news.club.get_absolute_url() }}">{{ news.club }}</a>
|
||||
</div>
|
||||
<h4>{{ news.title }}</h4>
|
||||
<p class="date">
|
||||
<span>{{ date.start_date|localtime|date(DATETIME_FORMAT) }}
|
||||
{{ date.start_date|localtime|time(DATETIME_FORMAT) }}</span> -
|
||||
<span>{{ date.end_date|localtime|date(DATETIME_FORMAT) }}
|
||||
{{ date.end_date|localtime|time(DATETIME_FORMAT) }}</span>
|
||||
</p>
|
||||
<div class="news_content">
|
||||
<div><em>{{ news.summary|markdown }}</em></div>
|
||||
<br/>
|
||||
<div>{{ news.content|markdown }}</div>
|
||||
{{ facebook_share(news) }}
|
||||
{{ tweet(news) }}
|
||||
<div class="news_meta">
|
||||
<p>{% trans %}Author: {% endtrans %}{{ user_profile_link(news.author) }}</p>
|
||||
{% if news.moderator %}
|
||||
<p>{% trans %}Moderator: {% endtrans %}{{ user_profile_link(news.moderator) }}</p>
|
||||
{% elif user.is_com_admin %}
|
||||
<p> <a href="{{ url('com:news_moderate', news_id=news.id) }}">{% trans %}Moderate{% endtrans %}</a></p>
|
||||
{% endif %}
|
||||
{% if user.can_edit(news) %}
|
||||
<p> <a href="{{ url('com:news_edit', news_id=news.id) }}">{% trans %}Edit (will be moderated again){% endtrans %}</a></p>
|
||||
{% endif %}
|
||||
<div x-data="{newsState: AlertState.PENDING}">
|
||||
|
||||
{% if not news.is_moderated %}
|
||||
{{ news_moderation_alert(news, user, "newsState") }}
|
||||
{% endif %}
|
||||
<article id="news_details" x-show="newsState !== AlertState.DELETED">
|
||||
<div class="club_logo">
|
||||
<img src="{{ link_news_logo(news)}}" alt="{{ news.club }}" />
|
||||
<a href="{{ news.club.get_absolute_url() }}">{{ news.club }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h4>{{ news.title }}</h4>
|
||||
<p class="date">
|
||||
<span>{{ date.start_date|localtime|date(DATETIME_FORMAT) }}
|
||||
{{ date.start_date|localtime|time(DATETIME_FORMAT) }}</span> -
|
||||
<span>{{ date.end_date|localtime|date(DATETIME_FORMAT) }}
|
||||
{{ date.end_date|localtime|time(DATETIME_FORMAT) }}</span>
|
||||
</p>
|
||||
<div class="news_content">
|
||||
<div><em>{{ news.summary|markdown }}</em></div>
|
||||
<br/>
|
||||
<div>{{ news.content|markdown }}</div>
|
||||
{{ facebook_share(news) }}
|
||||
{{ tweet(news) }}
|
||||
<div class="news_meta">
|
||||
<p>{% trans %}Author: {% endtrans %}{{ user_profile_link(news.author) }}</p>
|
||||
{% if news.moderator %}
|
||||
<p>{% trans %}Moderator: {% endtrans %}{{ user_profile_link(news.moderator) }}</p>
|
||||
{% elif user.is_com_admin %}
|
||||
<p> <a href="{{ url('com:news_moderate', news_id=news.id) }}">{% trans %}Moderate{% endtrans %}</a></p>
|
||||
{% endif %}
|
||||
{% if user.can_edit(news) %}
|
||||
<p> <a href="{{ url('com:news_edit', news_id=news.id) }}">{% trans %}Edit (will be moderated again){% endtrans %}</a></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
{% from "com/macros.jinja" import news_moderation_alert %}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}News{% endtrans %}
|
||||
@ -14,6 +15,7 @@
|
||||
|
||||
{% block additional_js %}
|
||||
<script type="module" src={{ static("bundled/com/components/ics-calendar-index.ts") }}></script>
|
||||
<script type="module" src={{ static("bundled/com/components/moderation-alert-index.ts") }}></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
@ -46,32 +48,39 @@
|
||||
</div>
|
||||
<div class="news_events_group_items">
|
||||
{% for date in dates_group %}
|
||||
<article class="news_event">
|
||||
<header class="row gap">
|
||||
{% if date.news.club.logo %}
|
||||
<img src="{{ date.news.club.logo.url }}" alt="{{ date.news.club }}"/>
|
||||
{% else %}
|
||||
<img src="{{ static("com/img/news.png") }}" alt="{{ date.news.club }}"/>
|
||||
{% endif %}
|
||||
<div class="header_content">
|
||||
<h4>
|
||||
<a href="{{ url('com:news_detail', news_id=date.news_id) }}">
|
||||
{{ date.news.title }}
|
||||
</a>
|
||||
</h4>
|
||||
<a href="{{ date.news.club.get_absolute_url() }}">{{ date.news.club }}</a>
|
||||
<div class="news_date">
|
||||
<time datetime="{{ date.start_date.isoformat(timespec="seconds") }}">
|
||||
{{ date.start_date|localtime|time(DATETIME_FORMAT) }}
|
||||
</time> -
|
||||
<time datetime="{{ date.end_date.isoformat(timespec="seconds") }}">
|
||||
{{ date.end_date|localtime|time(DATETIME_FORMAT) }}
|
||||
</time>
|
||||
<article class="news_event" x-data="{newsState: AlertState.PENDING}">
|
||||
{% if not date.news.is_moderated %}
|
||||
{# if a non moderated news is in the object list,
|
||||
the logged user is either an admin or the news author #}
|
||||
{{ news_moderation_alert(date.news, user, "newsState") }}
|
||||
{% endif %}
|
||||
<div x-show="newsState !== AlertState.DELETED">
|
||||
<header class="row gap">
|
||||
{% if date.news.club.logo %}
|
||||
<img src="{{ date.news.club.logo.url }}" alt="{{ date.news.club }}"/>
|
||||
{% else %}
|
||||
<img src="{{ static("com/img/news.png") }}" alt="{{ date.news.club }}"/>
|
||||
{% endif %}
|
||||
<div class="header_content">
|
||||
<h4>
|
||||
<a href="{{ url('com:news_detail', news_id=date.news_id) }}">
|
||||
{{ date.news.title }}
|
||||
</a>
|
||||
</h4>
|
||||
<a href="{{ date.news.club.get_absolute_url() }}">{{ date.news.club }}</a>
|
||||
<div class="news_date">
|
||||
<time datetime="{{ date.start_date.isoformat(timespec="seconds") }}">
|
||||
{{ date.start_date|localtime|time(DATETIME_FORMAT) }}
|
||||
</time> -
|
||||
<time datetime="{{ date.end_date.isoformat(timespec="seconds") }}">
|
||||
{{ date.end_date|localtime|time(DATETIME_FORMAT) }}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="news_content markdown">
|
||||
{{ date.news.summary|markdown }}
|
||||
</div>
|
||||
</header>
|
||||
<div class="news_content markdown">
|
||||
{{ date.news.summary|markdown }}
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user