BC-6809 - modify notification about news publication (#3433)

* modify view in news, add helper * implement whole disgn required by UX
hpi-schul-cloud · Apr 8, 2024 · 4294db4 · 4294db4
1 parent ff3c4b5
commit 4294db4
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 80 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}
diff --git a/views/news/article.hbs b/views/news/article.hbs
@@ -1,7 +1,6 @@
 {{#extend "news/news"}}
 {{#content "page"}}
 <p>
-
     {{#if isRSS}}
     {{#userHasPermission "SCHOOL_NEWS_EDIT"}}
     <small class="text-muted">
@@ -13,46 +12,41 @@
     {{/userHasPermission}}
     {{/if}}
 
-</p>
-<div class="ckcontent">
-    {{{news.content}}}
-</div>
-{{#unless isRSS}}
-    <small class="text-muted">
+    {{#unless isRSS}}
+    <small class="text-muted news-title-container">
         {{#if updatedAtNotEqualCreatedAt}}
-        {{$t "news.text.last" }} {{$t "news.text.processed" }}
-        {{/if}}
-        {{#if news.updater}}
-        {{$t "news.text.by" }} {{news.updater.firstName}} {{news.updater.lastName}}
+            <small class="news-custom-style" data-html="true" data-toggle="tooltip" data-placement="bottom" title="{{$t "news.text.edited"}} {{timeFromNowWithRule news.updatedAt}} {{#if news.updater}} | {{news.updater.firstName}} {{news.updater.lastName}}{{/if}}<br>{{$t "news.text.created"}} {{timeFromNowWithRule news.displayAt}} {{#if news.creator}} | {{news.creator.firstName}} {{news.creator.lastName}} {{/if}}">
+                {{> 'news/svg_clock' }}&nbsp;{{timeFromNowWithRule news.updatedAt}}
+            </small>
+            {{#if news.updater}}
+            &nbsp;|&nbsp;{{> 'news/svg_teacher' }}&nbsp;{{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' }}&nbsp; {{timeFromNowWithRule news.displayAt}}
+            {{#if news.creator}}
+            &nbsp;|&nbsp;{{> 'news/svg_teacher' }}&nbsp;{{news.creator.firstName}} {{news.creator.lastName}}
+            {{/if}}
+        {{/unless}}
         {{#if news.target.name}}
         {{#ifCond news.targetModel '===' 'teams'}}
-        {{$t "news.text.inTheTeam" }}
-        <a href="/{{../news.targetModel}}/{{../news.target.id}}">{{../news.target.name}}</a>
+        &nbsp;|&nbsp;{{> 'news/svg_team' }}&nbsp;<a href="/{{../news.targetModel}}/{{../news.target.id}}">{{../news.target.name}}</a>
         {{/ifCond}}
         {{#ifCond news.targetModel '===' 'courses'}}
-        {{$t "news.text.inTheCourse" }}
-         <a href="/{{../news.targetModel}}/{{../news.target.id}}">{{../news.target.name}}</a>
+        &nbsp;|&nbsp;<a href="/{{../news.targetModel}}/{{../news.target.id}}">{{../news.target.name}}</a>
         {{/ifCond}}
         {{#ifCond news.targetModel '===' 'class'}}
-        {{$t "news.text.inTheClass" }}
- <a href="/{{../news.targetModel}}/{{../news.target.id}}">{{../news.target.name}}</a>
+        &nbsp;|&nbsp;<a href="/{{../news.targetModel}}/{{../news.target.id}}">{{../news.target.name}}</a>
         {{/ifCond}}
         {{/if}}
-        </br>
-        {{#ifCond @root.currentUser.schoolId '!==' news.school.id}} {{$t "news.text.atSchool" }} {{../news.school.name}}
+        {{#ifCond @root.currentUser.schoolId '!==' news.school.id}}&nbsp;|&nbsp;{{> 'news/svg_school' }}&nbsp;{{../news.school.name}}
         {{/ifCond}}
     </small>
     {{/unless}}
+</p>
+<div class="ckcontent">
+    {{{news.content}}}
+</div>
 {{#unless isRSS}}
 <div class="mt-1">
     {{#inArray 'NEWS_EDIT' ../news.permissions}}

diff --git a/views/news/svg_clock.hbs b/views/news/svg_clock.hbs
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-custom">
+    <path d="M9.99935 16.6665C11.7674 16.6665 13.4632 15.9641 14.7134 14.7139C15.9636 13.4637 16.666 11.7679 16.666 9.99984C16.666 8.23173 15.9636 6.53604 14.7134 5.2858C13.4632 4.03555 11.7674 3.33317 9.99935 3.33317C8.23124 3.33317 6.53555 4.03555 5.28531 5.2858C4.03506 6.53604 3.33268 8.23173 3.33268 9.99984C3.33268 11.7679 4.03506 13.4637 5.28531 14.7139C6.53555 15.9641 8.23124 16.6665 9.99935 16.6665ZM9.99935 1.6665C11.0937 1.6665 12.1773 1.88205 13.1883 2.30084C14.1994 2.71963 15.1181 3.33346 15.8919 4.10728C16.6658 4.8811 17.2795 5.79976 17.6983 6.81081C18.1171 7.82185 18.3327 8.9055 18.3327 9.99984C18.3327 12.21 17.4547 14.3296 15.8919 15.8924C14.3291 17.4552 12.2095 18.3332 9.99935 18.3332C5.39102 18.3332 1.66602 14.5832 1.66602 9.99984C1.66602 7.7897 2.54399 5.67009 4.10679 4.10728C5.6696 2.54448 7.78922 1.6665 9.99935 1.6665ZM10.416 5.83317V10.2082L14.166 12.4332L13.541 13.4582L9.16602 10.8332V5.83317H10.416Z" fill="#54616E"/>
+</svg>
diff --git a/views/news/svg_school.hbs b/views/news/svg_school.hbs
@@ -0,0 +1,3 @@
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-custom">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.3327 18.3332V9.1665H14.166V1.6665L1.66602 5.83317V18.3332H18.3327ZM3.33268 6.97784L12.4993 4.09322V9.1665H8.33268V16.6665H3.33268V6.97784ZM12.4993 16.6665H9.99935V10.8332H16.666V16.6665H14.166V14.1665H12.4993V16.6665Z" fill="#54616E"/>
+</svg>
diff --git a/views/news/svg_teacher.hbs b/views/news/svg_teacher.hbs
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-custom">
+    <path d="M16.6667 14.1665C17.1087 14.1665 17.5326 13.9909 17.8452 13.6783C18.1578 13.3658 18.3333 12.9418 18.3333 12.4998V3.33317C18.3333 2.89115 18.1578 2.46722 17.8452 2.15466C17.5326 1.8421 17.1087 1.6665 16.6667 1.6665H7.88333C8.175 2.17484 8.33333 2.74984 8.33333 3.33317H16.6667V12.4998H9.16667V14.1665M12.5 5.83317V7.49984H7.5V18.3332H5.83333V13.3332H4.16667V18.3332H2.5V11.6665H1.25V7.49984C1.25 7.05781 1.42559 6.63389 1.73816 6.32133C2.05072 6.00876 2.47464 5.83317 2.91667 5.83317H12.5ZM6.66667 3.33317C6.66667 3.7752 6.49108 4.19912 6.17851 4.51168C5.86595 4.82425 5.44203 4.99984 5 4.99984C4.55798 4.99984 4.13405 4.82425 3.82149 4.51168C3.50893 4.19912 3.33333 3.7752 3.33333 3.33317C3.33333 2.89115 3.50893 2.46722 3.82149 2.15466C4.13405 1.8421 4.55798 1.6665 5 1.6665C5.44203 1.6665 5.86595 1.8421 6.17851 2.15466C6.49108 2.46722 6.66667 2.89115 6.66667 3.33317Z" fill="#54616E"/>
+</svg>
diff --git a/views/news/svg_team.hbs b/views/news/svg_team.hbs
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-custom">
+    <path d="M10 4.1665C9.22642 4.1665 8.48458 4.4738 7.93761 5.02078C7.39063 5.56775 7.08333 6.30962 7.08333 7.08317C7.08333 7.85672 7.39063 8.59859 7.93761 9.14559C8.48458 9.69259 9.22642 9.99984 10 9.99984C10.7736 9.99984 11.5154 9.69259 12.0624 9.14559C12.6094 8.59859 12.9167 7.85672 12.9167 7.08317C12.9167 6.30962 12.6094 5.56775 12.0624 5.02078C11.5154 4.4738 10.7736 4.1665 10 4.1665ZM10 5.83317C10.3315 5.83317 10.6495 5.96487 10.8839 6.19929C11.1183 6.4337 11.25 6.75165 11.25 7.08317C11.25 7.41469 11.1183 7.73264 10.8839 7.96705C10.6495 8.20147 10.3315 8.33317 10 8.33317C9.6685 8.33317 9.3505 8.20147 9.11608 7.96705C8.88167 7.73264 8.75 7.41469 8.75 7.08317C8.75 6.75165 8.88167 6.4337 9.11608 6.19929C9.3505 5.96487 9.6685 5.83317 10 5.83317ZM4.58333 6.6665C4.0308 6.6665 3.50089 6.886 3.11019 7.2767C2.71949 7.6674 2.5 8.1973 2.5 8.74984C2.5 9.53317 2.94167 10.2082 3.575 10.5665C3.875 10.7332 4.21667 10.8332 4.58333 10.8332C4.95 10.8332 5.29167 10.7332 5.59167 10.5665C5.9 10.3915 6.15833 10.1415 6.35 9.8415C5.74167 9.04984 5.41667 8.08317 5.41667 7.08317C5.41667 7.00817 5.41667 6.92484 5.41667 6.84984C5.16667 6.73317 4.88333 6.6665 4.58333 6.6665ZM15.4167 6.6665C15.1167 6.6665 14.8333 6.73317 14.5833 6.84984C14.5833 6.92484 14.5833 7.00817 14.5833 7.08317C14.5833 8.08317 14.2583 9.04984 13.65 9.8415C13.75 9.99984 13.8583 10.1248 13.9833 10.2498C14.1167 10.3748 14.25 10.4832 14.4083 10.5665C14.7083 10.7332 15.05 10.8332 15.4167 10.8332C15.7833 10.8332 16.125 10.7332 16.425 10.5665C17.0583 10.2082 17.5 9.53317 17.5 8.74984C17.5 8.1973 17.2805 7.6674 16.8898 7.2767C16.4991 6.886 15.9692 6.6665 15.4167 6.6665ZM10 11.6665C8.05 11.6665 4.16667 12.6415 4.16667 14.5832V15.8332H15.8333V14.5832C15.8333 12.6415 11.95 11.6665 10 11.6665ZM3.925 12.1248C2.31667 12.3165 0 13.1332 0 14.5832V15.8332H2.5V14.2248C2.5 13.3832 3.075 12.6832 3.925 12.1248ZM16.075 12.1248C16.925 12.6832 17.5 13.3832 17.5 14.2248V15.8332H20V14.5832C20 13.1332 17.6833 12.3165 16.075 12.1248ZM10 13.3332C11.275 13.3332 12.7 13.7498 13.525 14.1665H6.475C7.3 13.7498 8.725 13.3332 10 13.3332Z" fill="#54616E"/>
+</svg>