feat: Add ability to display card ages

client/src/components/boards/BoardSettingsModal/PreferencesPane/Others.jsx

@@ -43,6 +43,14 @@ const Others = React.memo(() => {
         className={styles.radio}
         onChange={handleChange}
       />
+      <Radio
+        toggle
+        name="displayCardAges"
+        checked={board.displayCardAges}
+        label={t('common.displayCardAges')}
+        className={styles.radio}
+        onChange={handleChange}
+      />
       <Radio
         toggle
         name="expandTaskListsByDefault"

client/src/components/cards/Card/ProjectContent.jsx

@@ -17,6 +17,7 @@ import { BoardMembershipRoles, BoardViews } from '../../../constants/Enums';
 import TaskList from './TaskList';
 import DueDateChip from '../DueDateChip';
 import StopwatchChip from '../StopwatchChip';
+import TimeAgo from '../../common/TimeAgo';
 import UserAvatar from '../../users/UserAvatar';
 import LabelChip from '../../labels/LabelChip';
 import CustomFieldValueChip from '../../custom-field-values/CustomFieldValueChip';
@@ -75,12 +76,13 @@ const ProjectContent = React.memo(({ cardId }) => {
     return attachment && attachment.data.thumbnailUrls.outside360;
   });
 
-  const { listName, withCreator } = useSelector((state) => {
+  const { listName, withCreator, withAge } = useSelector((state) => {
     const board = selectors.selectCurrentBoard(state);
 
     return {
       listName: list.name && (board.view === BoardViews.KANBAN ? null : list.name),
       withCreator: board.alwaysDisplayCardCreator,
+      withAge: board.displayCardAges,
     };
   }, shallowEqual);
 
@@ -115,6 +117,7 @@ const ProjectContent = React.memo(({ cardId }) => {
     card.dueDate ||
     card.stopwatch ||
     card.commentsTotal > 0 ||
+    withAge ||
     attachmentsTotal > 0 ||
     notificationsTotal > 0 ||
     listName;
@@ -236,6 +239,14 @@ const ProjectContent = React.memo(({ cardId }) => {
               </span>
             </span>
           )}
+          {withAge && card.createdAt && (
+            <span className={classNames(styles.attachment, styles.attachmentLeft)}>
+              <span className={styles.attachmentContent}>
+                <Icon name="history" />
+                <TimeAgo date={card.createdAt} />
+              </span>
+            </span>
+          )}
         </span>
       )}
       {!isCompact && usersNode}

client/src/components/cards/Card/StoryContent.jsx

@@ -6,12 +6,13 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
 import { Icon } from 'semantic-ui-react';
 
 import selectors from '../../../selectors';
 import markdownToText from '../../../utils/markdown-to-text';
 import { BoardViews } from '../../../constants/Enums';
+import TimeAgo from '../../common/TimeAgo';
 import LabelChip from '../../labels/LabelChip';
 import CustomFieldValueChip from '../../custom-field-values/CustomFieldValueChip';
 
@@ -52,19 +53,14 @@ const StoryContent = React.memo(({ cardId }) => {
     selectNotificationsTotalByCardId(state, cardId),
   );
 
-  const listName = useSelector((state) => {
+  const { listName, withAge } = useSelector((state) => {
-    if (!list.name) {
+    const board = selectors.selectCurrentBoard(state);
-      return null;
-    }
 
-    const { view } = selectors.selectCurrentBoard(state);
+    return {
-
+      listName: list.name && (board.view === BoardViews.KANBAN ? null : list.name),
-    if (view === BoardViews.KANBAN) {
+      withAge: board.displayCardAges,
-      return null;
+    };
-    }
+  }, shallowEqual);
-
-    return list.name;
-  });
 
   const coverUrl = useSelector((state) => {
     const attachment = selectAttachmentById(state, card.coverAttachmentId);
@@ -109,7 +105,7 @@ const StoryContent = React.memo(({ cardId }) => {
           {card.name}
         </div>
         {card.description && <div className={styles.descriptionText}>{descriptionText}</div>}
-        {(attachmentsTotal > 0 || notificationsTotal > 0 || listName) && (
+        {(withAge || attachmentsTotal > 0 || notificationsTotal > 0 || listName) && (
           <span className={styles.attachments}>
             {notificationsTotal > 0 && (
               <span
@@ -138,6 +134,14 @@ const StoryContent = React.memo(({ cardId }) => {
                 </span>
               </span>
             )}
+            {withAge && card.createdAt && (
+              <span className={classNames(styles.attachment, styles.attachmentLeft)}>
+                <span className={styles.attachmentContent}>
+                  <Icon name="history" />
+                  <TimeAgo date={card.createdAt} />
+                </span>
+              </span>
+            )}
           </span>
         )}
       </div>

client/src/locales/ar-YE/core.js

@@ -166,6 +166,7 @@ export default {
       deletedUser_title: 'مستخدم محذوف',
       description: 'الوصف',
       display: 'عرض',
+      displayCardAges: 'عرض أعمار البطاقات',
       dropFileToUpload: 'أفلت الملف لرفعه',
       dueDate_title: 'تاريخ الاستحقاق',
       dynamicAndUnevenlySpacedLayout: 'تخطيط ديناميكي وغير متساوي المسافات.',

client/src/locales/bg-BG/core.js

@@ -178,6 +178,7 @@ export default {
       deletedUser_title: 'Изтрит потребител',
       description: 'Описание',
       display: 'Показване',
+      displayCardAges: 'Показвай възрастта на картите',
       dropFileToUpload: 'Пуснете файл за качване',
       dueDate_title: 'Краен срок',
       dynamicAndUnevenlySpacedLayout: 'Динамично и неравномерно разположение.',

client/src/locales/ca-ES/core.js

@@ -177,6 +177,7 @@ export default {
       deletedUser_title: 'Usuari eliminat',
       description: 'Descripció',
       display: 'Mostrar',
+      displayCardAges: "Mostrar l'antiguitat de les targetes",
       dropFileToUpload: 'Arrossega fitxer per pujar-lo',
       dueDate_title: 'Data de venciment',
       dynamicAndUnevenlySpacedLayout: 'Disseny dinàmic i amb espaiat irregular.',

client/src/locales/cs-CZ/core.js

@@ -169,6 +169,7 @@ export default {
       deletedUser_title: 'Smazaný uživatel',
       description: 'Popis',
       display: 'Zobrazit',
+      displayCardAges: 'Zobrazit stáří karet',
       dropFileToUpload: 'Přetažením nahrát soubor',
       dueDate_title: 'Termín',
       dynamicAndUnevenlySpacedLayout: 'Dynamické a nerovnoměrné rozložení.',

client/src/locales/da-DK/core.js

@@ -173,6 +173,7 @@ export default {
       deletedUser_title: 'Slettet bruger',
       description: 'Beskrivelse',
       display: 'Vis',
+      displayCardAges: 'Vis kortalder',
       dropFileToUpload: 'Slip fil for at uploade',
       dueDate_title: 'Frist',
       dynamicAndUnevenlySpacedLayout: 'Dynamisk og ujævnt fordelt layout.',

client/src/locales/de-DE/core.js

@@ -188,6 +188,7 @@ export default {
       deletedUser_title: 'Gelöschter Benutzer',
       description: 'Beschreibung',
       display: 'Anzeige',
+      displayCardAges: 'Kartenalter anzeigen',
       dropFileToUpload: 'Datei für Upload ablegen',
       dueDate_title: 'Fälligkeitsdatum',
       dynamicAndUnevenlySpacedLayout: 'Dynamisches und ungleichmäßig verteiltes Layout.',

client/src/locales/el-GR/core.js

@@ -186,6 +186,7 @@ export default {
       deletedUser_title: 'Διαγραμμένος χρήστης',
       description: 'Περιγραφή',
       display: 'Εμφάνιση',
+      displayCardAges: 'Εμφάνιση ηλικίας καρτών',
       dropFileToUpload: 'Σύρετε το αρχείο για μεταφόρτωση',
       dueDate_title: 'Ημερομηνία λήξης',
       dynamicAndUnevenlySpacedLayout: 'Δυναμική και άνισα κατανεμημένη διάταξη.',

client/src/locales/en-GB/core.js

@@ -172,6 +172,7 @@ export default {
       deletedUser_title: 'Deleted User',
       description: 'Description',
       display: 'Display',
+      displayCardAges: 'Display card ages',
       dropFileToUpload: 'Drop file to upload',
       dueDate_title: 'Due Date',
       dynamicAndUnevenlySpacedLayout: 'Dynamic and unevenly spaced layout.',

client/src/locales/en-US/core.js

@@ -167,6 +167,7 @@ export default {
       deletedUser_title: 'Deleted User',
       description: 'Description',
       display: 'Display',
+      displayCardAges: 'Display card ages',
       dropFileToUpload: 'Drop file to upload',
       dueDate_title: 'Due Date',
       dynamicAndUnevenlySpacedLayout: 'Dynamic and unevenly spaced layout.',

client/src/locales/es-ES/core.js

@@ -178,6 +178,7 @@ export default {
       deletedUser_title: 'Usuario eliminado',
       description: 'Descripción',
       display: 'Mostrar',
+      displayCardAges: 'Mostrar antigüedad de las tarjetas',
       dropFileToUpload: 'Arrastra archivo para subir',
       dueDate_title: 'Fecha de vencimiento',
       dynamicAndUnevenlySpacedLayout: 'Diseño dinámico y con espaciado irregular.',

client/src/locales/et-EE/core.js

@@ -173,6 +173,7 @@ export default {
       deletedUser_title: 'Kustutatud kasutaja',
       description: 'Kirjeldus',
       display: 'Kuva',
+      displayCardAges: 'Näita kaartide vanust',
       dropFileToUpload: 'Lase faili üleslaadida',
       dueDate_title: 'Tähtaeg',
       dynamicAndUnevenlySpacedLayout: 'Dünaamiline ja eirastega kujundus.',

client/src/locales/fa-IR/core.js

@@ -176,6 +176,7 @@ export default {
       deletedUser_title: 'کاربر حذف شده',
       description: 'توضیحات',
       display: 'نمایش',
+      displayCardAges: 'نمایش سن کارت‌ها',
       dropFileToUpload: 'فایل را برای آپلود بکشید',
       dueDate_title: 'تاریخ سررسید',
       dynamicAndUnevenlySpacedLayout: 'طرح‌بندی پویا و نامتقارن.',

client/src/locales/fi-FI/core.js

@@ -169,6 +169,7 @@ export default {
       deletedUser_title: 'Poistettu käyttäjä',
       description: 'Kuvaus',
       display: 'Näyttö',
+      displayCardAges: 'Näytä korttien ikä',
       dropFileToUpload: 'Pudota tiedosto ladattavaksi',
       dueDate_title: 'Määräpäivä',
       dynamicAndUnevenlySpacedLayout: 'Dynaaminen ja epätasaisesti jaettu asettelu.',

client/src/locales/fr-FR/core.js

@@ -177,6 +177,7 @@ export default {
       deletedUser_title: 'Utilisateur supprimé',
       description: 'Description',
       display: 'Affichage',
+      displayCardAges: "Afficher l'âge des cartes",
       dropFileToUpload: 'Déposer le fichier à télécharger',
       dueDate_title: "Date d'échéance",
       dynamicAndUnevenlySpacedLayout: 'Mise en page dynamique et inégalement espacée.',

client/src/locales/hu-HU/core.js

@@ -167,6 +167,7 @@ export default {
       deletedUser_title: 'Törölt felhasználó',
       description: 'Leírás',
       display: 'Megjelenítés',
+      displayCardAges: 'Kártyák korának megjelenítése',
       dropFileToUpload: 'Dobja ide a fájlt a feltöltéshez',
       dueDate_title: 'Esedékesség dátuma',
       dynamicAndUnevenlySpacedLayout: 'Dinamikus és asszimetrikus kiosztás.',

client/src/locales/id-ID/core.js

@@ -174,6 +174,7 @@ export default {
       deletedUser_title: 'Pengguna yang dihapus',
       description: 'Deskripsi',
       display: 'Tampilan',
+      displayCardAges: 'Tampilkan usia kartu',
       dropFileToUpload: 'Tarik berkas untuk menggungah',
       dueDate_title: 'Tenggat waktu',
       dynamicAndUnevenlySpacedLayout: 'Tata letak dinamis dan tidak merata.',

client/src/locales/it-IT/core.js

@@ -174,6 +174,7 @@ export default {
       deletedUser_title: 'Utente eliminato',
       description: 'Descrizione',
       display: 'Mostra',
+      displayCardAges: 'Mostra età delle schede',
       dropFileToUpload: 'Trascina il file da caricare',
       dueDate_title: 'Data di scadenza',
       dynamicAndUnevenlySpacedLayout: 'Layout dinamico e irregolarmente distribuito.',

client/src/locales/ja-JP/core.js

@@ -170,6 +170,7 @@ export default {
       deletedUser_title: '削除されたユーザー',
       description: '説明',
       display: '表示',
+      displayCardAges: 'カードの経過時間を表示',
       dropFileToUpload: 'ファイルをドロップしてアップロード',
       dueDate_title: '期限',
       dynamicAndUnevenlySpacedLayout: '動的で不均等な間隔のレイアウト。',

client/src/locales/ko-KR/core.js

@@ -164,6 +164,7 @@ export default {
       deletedUser_title: '삭제된 사용자',
       description: '설명',
       display: '표시',
+      displayCardAges: '카드 경과 시간 표시',
       dropFileToUpload: '업로드할 파일을 드롭하세요',
       dueDate_title: '마감일',
       dynamicAndUnevenlySpacedLayout: '동적이고 불균등한 간격의 레이아웃.',

client/src/locales/nl-NL/core.js

@@ -173,6 +173,7 @@ export default {
       deletedUser_title: 'Verwijderde gebruiker',
       description: 'Beschrijving',
       display: 'Weergave',
+      displayCardAges: 'Kaartleeftijd weergeven',
       dropFileToUpload: 'Sleep bestand om te uploaden',
       dueDate_title: 'Vervaldatum',
       dynamicAndUnevenlySpacedLayout: 'Dynamische en ongelijk verdeelde indeling.',

client/src/locales/pl-PL/core.js

@@ -172,6 +172,7 @@ export default {
       deletedUser_title: 'Usunięty użytkownik',
       description: 'Opis',
       display: 'Wyświetlanie',
+      displayCardAges: 'Pokazuj wiek kart',
       dropFileToUpload: 'Upuść plik aby wgrać',
       dueDate_title: 'Termin',
       dynamicAndUnevenlySpacedLayout: 'Dynamiczny i nierówny układ.',

client/src/locales/pt-BR/core.js

@@ -175,6 +175,7 @@ export default {
       deletedUser_title: 'Usuário excluído',
       description: 'Descrição',
       display: 'Exibir',
+      displayCardAges: 'Exibir idade dos cartões',
       dropFileToUpload: 'Solte o arquivo para enviar',
       dueDate_title: 'Data de vencimento',
       dynamicAndUnevenlySpacedLayout: 'Layout dinâmico e desigualmente espaçado.',

client/src/locales/pt-PT/core.js

@@ -177,6 +177,7 @@ export default {
       deletedUser_title: 'Utilizador eliminado',
       description: 'Descrição',
       display: 'Exibir',
+      displayCardAges: 'Mostrar idade dos cartões',
       dropFileToUpload: 'Largue o ficheiro para carregar',
       dueDate_title: 'Data de vencimento',
       dynamicAndUnevenlySpacedLayout: 'Layout dinâmico e espaçamento irregular.',

client/src/locales/ro-RO/core.js

@@ -171,6 +171,7 @@ export default {
       deletedUser_title: 'Utilizator șters',
       description: 'Descriere',
       display: 'Afișare',
+      displayCardAges: 'Afișează vârsta cardurilor',
       dropFileToUpload: 'Aruncă fișierul pentru a încărca',
       dueDate_title: 'Data scadentă',
       dynamicAndUnevenlySpacedLayout: 'Aspect dinamic și spațiat neuniform.',

client/src/locales/ru-RU/core.js

@@ -174,6 +174,7 @@ export default {
       deletedUser_title: 'Удалённый пользователь',
       description: 'Описание',
       display: 'Отображение',
+      displayCardAges: 'Отображать возраст карточек',
       dropFileToUpload: 'Перетяните файл, чтобы загрузить',
       dueDate_title: 'Срок исполнения',
       dynamicAndUnevenlySpacedLayout: 'Динамичное и неравномерно распределённое расположение.',

client/src/locales/sk-SK/core.js

@@ -168,6 +168,7 @@ export default {
       deletedUser_title: 'Zmazaný používateľ',
       description: 'Popis',
       display: 'Zobraziť',
+      displayCardAges: 'Zobraziť vek kariet',
       dropFileToUpload: 'Potiahnutím nahraj súbor',
       dueDate_title: 'Termín do',
       dynamicAndUnevenlySpacedLayout: 'Dynamické a nerovnomerne rozložené usporiadanie.',

client/src/locales/sr-Cyrl-RS/core.js

@@ -171,6 +171,7 @@ export default {
       deletedUser_title: 'Обрисан корисник',
       description: 'Опис',
       display: 'Приказ',
+      displayCardAges: 'Прикажи старост картица',
       dropFileToUpload: 'Превуци датотеку за слање',
       dueDate_title: 'Рок',
       dynamicAndUnevenlySpacedLayout: 'Динамички и неравномерно распоређен изглед.',

client/src/locales/sr-Latn-RS/core.js

@@ -172,6 +172,7 @@ export default {
       deletedUser_title: 'Obrisan korisnik',
       description: 'Opis',
       display: 'Prikaz',
+      displayCardAges: 'Prikaži starost kartica',
       dropFileToUpload: 'Prevuci datoteku za slanje',
       dueDate_title: 'Rok',
       dynamicAndUnevenlySpacedLayout: 'Dinamički i neravnomerno raspoređen izgled.',

client/src/locales/sv-SE/core.js

@@ -178,6 +178,7 @@ export default {
       deletedUser_title: 'Borttagen användare',
       description: 'Beskrivning',
       display: 'Visa',
+      displayCardAges: 'Visa kortålder',
       dropFileToUpload: 'Släpp en fil för att ladda upp',
       dueDate_title: 'Förfallodatum',
       dynamicAndUnevenlySpacedLayout: 'Dynamisk och ojämnt fördelad layout.',

client/src/locales/tr-TR/core.js

@@ -174,6 +174,7 @@ export default {
       deletedUser_title: 'Silinmiş kullanıcı',
       description: 'açıklama',
       display: 'Görüntüle',
+      displayCardAges: 'Kart yaşlarını göster',
       dropFileToUpload: 'Yüklenecek dosyayı buraya bırakın',
       dueDate_title: 'Termin tarihi',
       dynamicAndUnevenlySpacedLayout: 'Dinamik ve düzensiz aralıklı düzen.',

client/src/locales/uk-UA/core.js

@@ -173,6 +173,7 @@ export default {
       deletedUser_title: 'Видалений користувач',
       description: 'Опис',
       display: 'Дисплей',
+      displayCardAges: 'Відображати вік карток',
       dropFileToUpload: 'Перетягніть файл для завантаження',
       dueDate_title: 'Крайній термін',
       dynamicAndUnevenlySpacedLayout: 'Динамічна та нерівномірна верстка.',

client/src/locales/uz-UZ/core.js

@@ -169,6 +169,7 @@ export default {
       deletedUser_title: "O'chirilgan foydalanuvchi",
       description: 'Tavsif',
       display: "Ko'rsatish",
+      displayCardAges: "Kartalar yoshini ko'rsatish",
       dropFileToUpload: 'Faylni yuklash uchun qoldiring',
       dueDate_title: 'Muddati',
       dynamicAndUnevenlySpacedLayout: 'Dinamik va notekis joylashtirilgan tartib.',

client/src/locales/vi-VN/core.js

@@ -173,6 +173,7 @@ export default {
       deletedUser_title: 'Người dùng đã bị xóa',
       description: 'Mô tả',
       display: 'Hiển thị',
+      displayCardAges: 'Hiển thị tuổi thẻ',
       dropFileToUpload: 'Thả tệp vào đây để tải lên',
       dueDate_title: 'Hạn chót',
       dynamicAndUnevenlySpacedLayout: 'Bố cục động và khoảng cách không đều.',

client/src/locales/zh-CN/core.js

@@ -153,6 +153,7 @@ export default {
       deletedUser_title: '已删除用户',
       description: '描述',
       display: '显示',
+      displayCardAges: '显示卡片创建时间',
       dropFileToUpload: '拖放文件以上传',
       dueDate_title: '截止日期',
       dynamicAndUnevenlySpacedLayout: '动态非均匀间隔布局。',

client/src/locales/zh-TW/core.js

@@ -153,6 +153,7 @@ export default {
       deletedUser_title: '已刪除的使用者',
       description: '描述',
       display: '顯示',
+      displayCardAges: '顯示卡片建立時間',
       dropFileToUpload: '拖放文件以上傳',
       dueDate_title: '截止日期',
       dynamicAndUnevenlySpacedLayout: '動態不均勻間距佈局。',

client/src/models/Board.js

@@ -31,6 +31,7 @@ export default class extends BaseModel {
     defaultCardType: attr(),
     limitCardTypesToDefaultOne: attr(),
     alwaysDisplayCardCreator: attr(),
+    displayCardAges: attr(),
     expandTaskListsByDefault: attr(),
     context: attr(),
     view: attr(),

server/api/controllers/boards/update.js

@@ -55,6 +55,10 @@
  *                 type: boolean
  *                 description: Whether to always display card creators
  *                 example: false
+ *               displayCardAges:
+ *                 type: boolean
+ *                 description: Whether to display card ages
+ *                 example: false
  *               expandTaskListsByDefault:
  *                 type: boolean
  *                 description: Whether to expand task lists by default
@@ -120,6 +124,9 @@ module.exports = {
     alwaysDisplayCardCreator: {
       type: 'boolean',
     },
+    displayCardAges: {
+      type: 'boolean',
+    },
     expandTaskListsByDefault: {
       type: 'boolean',
     },
@@ -160,6 +167,7 @@ module.exports = {
         'defaultCardType',
         'limitCardTypesToDefaultOne',
         'alwaysDisplayCardCreator',
+        'displayCardAges',
         'expandTaskListsByDefault',
       );
     }
@@ -178,6 +186,7 @@ module.exports = {
       'defaultCardType',
       'limitCardTypesToDefaultOne',
       'alwaysDisplayCardCreator',
+      'displayCardAges',
       'expandTaskListsByDefault',
       'isSubscribed',
     ]);

server/api/models/Board.js

@@ -25,6 +25,7 @@
  *         - defaultCardType
  *         - limitCardTypesToDefaultOne
  *         - alwaysDisplayCardCreator
+ *         - displayCardAges
  *         - expandTaskListsByDefault
  *         - createdAt
  *         - updatedAt
@@ -67,6 +68,11 @@
  *           default: false
  *           description: Whether to always display the card creator
  *           example: false
+ *         displayCardAges:
+ *           type: boolean
+ *           default: false
+ *           description: Whether to display card ages
+ *           example: false
  *         expandTaskListsByDefault:
  *           type: boolean
  *           default: false
@@ -137,6 +143,11 @@ module.exports = {
       defaultsTo: false,
       columnName: 'always_display_card_creator',
     },
+    displayCardAges: {
+      type: 'boolean',
+      defaultsTo: false,
+      columnName: 'display_card_ages',
+    },
     expandTaskListsByDefault: {
       type: 'boolean',
       defaultsTo: false,

server/db/migrations/20260312000000_add_ability_to_display_card_ages.js

@@ -0,0 +1,19 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+module.exports.up = async (knex) => {
+  await knex.schema.alterTable('board', (table) => {
+    table.boolean('display_card_ages').notNullable().defaultTo(false);
+  });
+
+  return knex.schema.alterTable('board', (table) => {
+    table.boolean('display_card_ages').notNullable().alter();
+  });
+};
+
+module.exports.down = (knex) =>
+  knex.schema.alterTable('board', (table) => {
+    table.dropColumn('display_card_ages');
+  });