diff --git a/com/static/bundled/com/components/moderation-alert-index.ts b/com/static/bundled/com/components/moderation-alert-index.ts new file mode 100644 index 00000000..ba933b63 --- /dev/null +++ b/com/static/bundled/com/components/moderation-alert-index.ts @@ -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; + }, + })); +}); diff --git a/com/static/com/css/news-list.scss b/com/static/com/css/news-list.scss index b068fb45..0df403b4 100644 --- a/com/static/com/css/news-list.scss +++ b/com/static/com/css/news-list.scss @@ -171,7 +171,9 @@ } .news_event { - display: block; + display: flex; + flex-direction: column; + gap: .5em; padding: 1em; header { diff --git a/com/templates/com/macros.jinja b/com/templates/com/macros.jinja new file mode 100644 index 00000000..388267d2 --- /dev/null +++ b/com/templates/com/macros.jinja @@ -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 +
+ {% trans trimmed %} + This news isn't moderated and is visible + only by its author and the communication admins. + {% endtrans %} +
++ {% trans trimmed %} + It will stay hidden for other users until it has been moderated. + {% endtrans %} +
+{% trans %}Back to news{% endtrans %}
-- {{ date.start_date|localtime|date(DATETIME_FORMAT) }} - {{ date.start_date|localtime|time(DATETIME_FORMAT) }} - - {{ date.end_date|localtime|date(DATETIME_FORMAT) }} - {{ date.end_date|localtime|time(DATETIME_FORMAT) }} -
-