From 4294db4202a7ba97b339ef93cb79c30c3f0650ce Mon Sep 17 00:00:00 2001 From: WojciechGrancow <116577704+WojciechGrancow@users.noreply.github.com> Date: Mon, 8 Apr 2024 13:00:33 +0200 Subject: [PATCH] BC-6809 - modify notification about news publication (#3433) * modify view in news, add helper * implement whole disgn required by UX --- controllers/news.js | 2 +- helpers/handlebars/helpers/index.js | 1 + helpers/momentHelper.js | 50 +++++++++++++++++------------ helpers/timesHelper.js | 17 ++++++++++ locales/calendar/de.json | 2 +- locales/calendar/uk.json | 12 +++---- locales/de.json | 6 +--- locales/en.json | 6 +--- locales/es.json | 6 +--- locales/uk.json | 12 +++---- static/styles/news/news.scss | 13 ++++++++ views/news/article.hbs | 50 +++++++++++++---------------- views/news/svg_clock.hbs | 3 ++ views/news/svg_school.hbs | 3 ++ views/news/svg_teacher.hbs | 3 ++ views/news/svg_team.hbs | 3 ++ 16 files changed, 109 insertions(+), 80 deletions(-) create mode 100644 views/news/svg_clock.hbs create mode 100644 views/news/svg_school.hbs create mode 100644 views/news/svg_teacher.hbs create mode 100644 views/news/svg_team.hbs diff --git a/controllers/news.js b/controllers/news.js index 1982a932fd..25b0552dea 100644 --- a/controllers/news.js +++ b/controllers/news.js @@ -124,7 +124,7 @@ router.get('/:newsId', (req, res, next) => { api(req, { version: VERSION }) .get(`/news/${req.params.newsId}`) .then((news) => { - const updatedAtNotEqualCreatedAt = !(news.updatedAt === news.createdAt); + const updatedAtNotEqualCreatedAt = !(news.updatedAt === news.createdAt) && (news.updatedAt !== undefined); res.render('news/article', { title: news.title, news, diff --git a/helpers/handlebars/helpers/index.js b/helpers/handlebars/helpers/index.js index 9da6398386..538e9aa237 100644 --- a/helpers/handlebars/helpers/index.js +++ b/helpers/handlebars/helpers/index.js @@ -193,6 +193,7 @@ const helpers = () => ({ userIds: (users) => (users || []).map((user) => user._id).join(','), getAssetPath: (assetPath) => getStaticAssetPath(assetPath), timeFromNow: (date) => timesHelper.fromNow(date), + timeFromNowWithRule: (date) => timesHelper.fromNowWithRule(date), datePickerTodayMinus: (years, months, days, format) => { if (typeof (format) !== 'string') { format = 'YYYY.MM.DD'; diff --git a/helpers/momentHelper.js b/helpers/momentHelper.js index f016f1bd51..3cfa6fff19 100644 --- a/helpers/momentHelper.js +++ b/helpers/momentHelper.js @@ -23,36 +23,44 @@ const relativeTime = { }; */ -const createCustomRelativeTimeConfig = (localFile) => ({ - d: `${localFile['moment.relativeTime.aDay']}`, - dd: `%d ${localFile['moment.relativeTime.days']}`, - future: `${localFile['moment.relativeTime.futureIn']} %s`, - h: `${localFile['moment.relativeTime.anHour']}`, - hh: `%d ${localFile['moment.relativeTime.hours']}`, - m: `${localFile['moment.relativeTime.aMinute']}`, - M: `${localFile['moment.relativeTime.aMonths']}`, - mm: `%d ${localFile['moment.relativeTime.minutes']}`, - MM: `%d ${localFile['moment.relativeTime.months']}`, - past: `%s ${localFile['moment.relativeTime.pastAgo']}`, - s: `${localFile['moment.relativeTime.aFewSecondes']}`, - ss: `%d ${localFile['moment.relativeTime.seconds']}`, - w: `${localFile['moment.relativeTime.aWeek']}`, - ww: `%d ${localFile['moment.relativeTime.weeks']}`, - y: `${localFile['moment.relativeTime.aYear']}`, - yy: `%d ${localFile['moment.relativeTime.years']}`, -}); +const createCustomRelativeTimeConfig = (localFile, lang) => { + const commonConfig = { + d: `${localFile['moment.relativeTime.aDay']}`, + dd: `%d ${localFile['moment.relativeTime.days']}`, + future: `${localFile['moment.relativeTime.futureIn']} %s`, + h: `${localFile['moment.relativeTime.anHour']}`, + hh: `%d ${localFile['moment.relativeTime.hours']}`, + m: `${localFile['moment.relativeTime.aMinute']}`, + M: `${localFile['moment.relativeTime.aMonths']}`, + mm: `%d ${localFile['moment.relativeTime.minutes']}`, + MM: `%d ${localFile['moment.relativeTime.months']}`, + past: `%s ${localFile['moment.relativeTime.pastAgo']}`, + s: `${localFile['moment.relativeTime.aFewSecondes']}`, + ss: `%d ${localFile['moment.relativeTime.seconds']}`, + w: `${localFile['moment.relativeTime.aWeek']}`, + ww: `%d ${localFile['moment.relativeTime.weeks']}`, + y: `${localFile['moment.relativeTime.aYear']}`, + yy: `%d ${localFile['moment.relativeTime.years']}`, + }; + + if (lang === 'de' || lang === 'es') { + commonConfig.past = `${localFile['moment.relativeTime.pastAgo']} %s`; + } + + return commonConfig; +}; const selectMomentOptions = (langAttribute) => { const options = {}; if (langAttribute === 'uk') { - options.relativeTime = createCustomRelativeTimeConfig(uk); + options.relativeTime = createCustomRelativeTimeConfig(uk, 'uk'); } if (langAttribute === 'es') { - options.relativeTime = createCustomRelativeTimeConfig(es); + options.relativeTime = createCustomRelativeTimeConfig(es, 'es'); } if (langAttribute === 'de') { - options.relativeTime = createCustomRelativeTimeConfig(de); + options.relativeTime = createCustomRelativeTimeConfig(de, 'de'); } return options; diff --git a/helpers/timesHelper.js b/helpers/timesHelper.js index 4fd5413c2b..3f41f52662 100644 --- a/helpers/timesHelper.js +++ b/helpers/timesHelper.js @@ -100,6 +100,22 @@ const now = () => { */ const fromNow = (date) => moment(date).fromNow(); +/** + * + * @param date + * @returns {string} + */ +const fromNowWithRule = (date) => { + let result; + const diff = moment() - moment(date); + if (moment.duration(diff).asDays() < -6 || moment.duration(diff).asDays() > 6) { + result = moment(date).format('DD.MM.YYYY'); + } else { + result = moment(date).fromNow(); + } + return result; +}; + /** * @param {Date} date Date object * @param dateFormat date format @@ -217,6 +233,7 @@ module.exports = { currentDate, now, fromNow, + fromNowWithRule, timeToString, splitDate, formatDate, diff --git a/locales/calendar/de.json b/locales/calendar/de.json index b8b789e3da..58a4fc91ca 100644 --- a/locales/calendar/de.json +++ b/locales/calendar/de.json @@ -1,7 +1,7 @@ { "moment.relativeTime.aDay": "ein Tag", "moment.relativeTime.days": "Tage", - "moment.relativeTime.futureIn": "auf", + "moment.relativeTime.futureIn": "in", "moment.relativeTime.anHour": "eine Stunde", "moment.relativeTime.hours": "Stunden", "moment.relativeTime.aMinute": "eine Minute", diff --git a/locales/calendar/uk.json b/locales/calendar/uk.json index 652088f39a..9f82ad0a56 100644 --- a/locales/calendar/uk.json +++ b/locales/calendar/uk.json @@ -11,14 +11,14 @@ "calendar.eventLimitText": "Далі", "calendar.noEventsMessage": "Немає подій для показу", "calendar.weekLabel": "тиждень", - "moment.relativeTime.aDay": "за останній день", - "moment.relativeTime.days": "днів", - "moment.relativeTime.futureIn": "в", + "moment.relativeTime.aDay": "день", + "moment.relativeTime.days": "дні (-в)", + "moment.relativeTime.futureIn": "через", "moment.relativeTime.anHour": "годину", - "moment.relativeTime.hours": "годин", - "moment.relativeTime.aMinute": "хвилина", + "moment.relativeTime.hours": "годин (-и)", + "moment.relativeTime.aMinute": "хвилинy", "moment.relativeTime.aMonths": "місяць", - "moment.relativeTime.minutes": "хвилин", + "moment.relativeTime.minutes": "хвилин (-и)", "moment.relativeTime.months": "місяців", "moment.relativeTime.pastAgo": "тому", "moment.relativeTime.aFewSecondes": "кілька секунд", diff --git a/locales/de.json b/locales/de.json index ba33fab592..4d00ccf62e 100644 --- a/locales/de.json +++ b/locales/de.json @@ -2645,17 +2645,13 @@ "searchForNews": "Suche nach Neuigkeiten" }, "text": { - "atSchool": "an der Schule", - "atYourSchool": "an deiner Schule ", "created": "erstellt", - "by": "von", + "edited": "bearbeitet", "inTheClass": "in der Klasse", "inTheCourse": "im Kurs", - "inTheTeam": "im Team", "last": "zuletzt", "newsNeedContent": "News benötigen Inhalt!", "newsNeedTitle": "News benötigen einen Titel!", - "processed": "bearbeitet", "released": "Veröffentlicht", "unpublished": "Unveröffentlicht" } diff --git a/locales/en.json b/locales/en.json index ef320b28cc..fc8efc7d24 100644 --- a/locales/en.json +++ b/locales/en.json @@ -2645,17 +2645,13 @@ "searchForNews": "Search for news" }, "text": { - "atSchool": "at school", - "atYourSchool": "at your school ", - "by": "by", "created": "created", + "edited": "edited", "inTheClass": "in the class", "inTheCourse": "in the course", - "inTheTeam": "in the team", "last": "last", "newsNeedContent": "News need content!", "newsNeedTitle": "News need a title!", - "processed": "edited", "released": "Released", "unpublished": "Unpublished" } diff --git a/locales/es.json b/locales/es.json index 004675ca76..9bc400738d 100644 --- a/locales/es.json +++ b/locales/es.json @@ -2645,17 +2645,13 @@ "searchForNews": "Buscar noticias" }, "text": { - "atSchool": "en la escuela", - "atYourSchool": "en tu escuela", "created": "creado", - "by": "por", + "edited": "editado", "inTheClass": "en la clase", "inTheCourse": "en el curso", - "inTheTeam": "en el equipo", "last": "últimamente", "newsNeedContent": "¡Las noticias necesitan contenido!", "newsNeedTitle": "¡Las noticias necesitan un título!", - "processed": "editado", "released": "Publicado", "unpublished": "Sin publicar" } diff --git a/locales/uk.json b/locales/uk.json index 5714d0bbfb..995ef8b014 100644 --- a/locales/uk.json +++ b/locales/uk.json @@ -1674,19 +1674,15 @@ "searchForNews": "Пошук новин" }, "text": { - "atSchool": "у школі", - "atYourSchool": "у вашій школі ", "created": "створено", - "by": "", + "edited": "відредаговано", "inTheClass": "в класі", "inTheCourse": "в курсі", - "inTheTeam": "в команді", "last": "останній раз було", - "processed": "відредаговано", - "released": "Випущено", - "unpublished": "Не опубліковано", "newsNeedContent": "Новинам потрібний контент!", - "newsNeedTitle": "Новинам потрібна назва!" + "newsNeedTitle": "Новинам потрібна назва!", + "released": "Випущено", + "unpublished": "Не опубліковано" }, "_news": { "headline": { diff --git a/static/styles/news/news.scss b/static/styles/news/news.scss index 302bf6e215..0f65503b8f 100644 --- a/static/styles/news/news.scss +++ b/static/styles/news/news.scss @@ -33,3 +33,16 @@ .tabContainer { clear: both; } +.news-title-container { + display: flex; + align-items: center; +} +.news-custom-style { + display: flex; + align-items: center; + font-size: 100% !important; +} +.tooltip-inner { + max-width: 100%; + text-align: left !important; +} \ No newline at end of file diff --git a/views/news/article.hbs b/views/news/article.hbs index 803a0c7eaf..2207d5adbe 100644 --- a/views/news/article.hbs +++ b/views/news/article.hbs @@ -1,7 +1,6 @@ {{#extend "news/news"}} {{#content "page"}}

- {{#if isRSS}} {{#userHasPermission "SCHOOL_NEWS_EDIT"}} @@ -13,46 +12,41 @@ {{/userHasPermission}} {{/if}} -

-
- {{{news.content}}} -
-{{#unless isRSS}} - + {{#unless isRSS}} + {{#if updatedAtNotEqualCreatedAt}} - {{$t "news.text.last" }} {{$t "news.text.processed" }} - {{/if}} - {{#if news.updater}} - {{$t "news.text.by" }} {{news.updater.firstName}} {{news.updater.lastName}} + {{$t "news.text.created"}} {{timeFromNowWithRule news.displayAt}} {{#if news.creator}} | {{news.creator.firstName}} {{news.creator.lastName}} {{/if}}"> + {{> 'news/svg_clock' }} {{timeFromNowWithRule news.updatedAt}} + + {{#if news.updater}} +  | {{> 'news/svg_teacher' }} {{news.updater.firstName}} {{news.updater.lastName}} + {{/if}} {{/if}} - {{#if updatedAtNotEqualCreatedAt}} - {{timeFromNow news.updatedAt}} - {{/if}} - {{#if updatedAtNotEqualCreatedAt}} | {{/if}} - {{$t "news.text.created" }} - {{#if news.creator}} - {{$t "news.text.by" }} {{news.creator.firstName}} {{news.creator.lastName}} - {{/if}} - {{timeFromNow news.displayAt}} + {{#unless updatedAtNotEqualCreatedAt}} + {{> 'news/svg_clock' }}  {{timeFromNowWithRule news.displayAt}} + {{#if news.creator}} +  | {{> 'news/svg_teacher' }} {{news.creator.firstName}} {{news.creator.lastName}} + {{/if}} + {{/unless}} {{#if news.target.name}} {{#ifCond news.targetModel '===' 'teams'}} - {{$t "news.text.inTheTeam" }} - {{../news.target.name}} +  | {{> 'news/svg_team' }} {{../news.target.name}} {{/ifCond}} {{#ifCond news.targetModel '===' 'courses'}} - {{$t "news.text.inTheCourse" }} - {{../news.target.name}} +  | {{../news.target.name}} {{/ifCond}} {{#ifCond news.targetModel '===' 'class'}} - {{$t "news.text.inTheClass" }} - {{../news.target.name}} +  | {{../news.target.name}} {{/ifCond}} {{/if}} -
- {{#ifCond @root.currentUser.schoolId '!==' news.school.id}} {{$t "news.text.atSchool" }} {{../news.school.name}} + {{#ifCond @root.currentUser.schoolId '!==' news.school.id}} | {{> 'news/svg_school' }} {{../news.school.name}} {{/ifCond}} {{/unless}} +

+
+ {{{news.content}}} +
{{#unless isRSS}}
{{#inArray 'NEWS_EDIT' ../news.permissions}} diff --git a/views/news/svg_clock.hbs b/views/news/svg_clock.hbs new file mode 100644 index 0000000000..1c0867dba7 --- /dev/null +++ b/views/news/svg_clock.hbs @@ -0,0 +1,3 @@ + + + diff --git a/views/news/svg_school.hbs b/views/news/svg_school.hbs new file mode 100644 index 0000000000..4b034b0dee --- /dev/null +++ b/views/news/svg_school.hbs @@ -0,0 +1,3 @@ + + + diff --git a/views/news/svg_teacher.hbs b/views/news/svg_teacher.hbs new file mode 100644 index 0000000000..6bba72209d --- /dev/null +++ b/views/news/svg_teacher.hbs @@ -0,0 +1,3 @@ + + + diff --git a/views/news/svg_team.hbs b/views/news/svg_team.hbs new file mode 100644 index 0000000000..4a5439a2ec --- /dev/null +++ b/views/news/svg_team.hbs @@ -0,0 +1,3 @@ + + +