Skip to content

Commit

Permalink
Merge pull request #1707 from girder/itemlist-dates
Browse files Browse the repository at this point in the history 
Format dates in item lists
  • Loading branch information
@manthey
manthey authored Oct 29, 2024
2 parents 77f114b + dcdbbaf commit 7f51c42
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 12 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Change Log

## 1.30.3

### Improvements

- Format dates in item lists ([#1707](../../pull/1707))

## 1.30.2

### Features
Expand Down
7 changes: 4 additions & 3 deletions docs/girder_annotation_config_options.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ This can be used to specify how annotations are listed on the item page.
columns:
-
# The "record" type is from the default annotation record. The value
# is one of "name", "creator", "created", "updatedId", "updated",
# is one of "name", "creator", "created", "updatedId", "updated".
type: record
value: name
-
Expand All @@ -43,8 +43,9 @@ This can be used to specify how annotations are listed on the item page.
-
type: record
value: created
# A format of date will use the browser's default date format
format: date
# A format of datetime, date, or time will use the browser's default
# date and/or time format
format: datetime
-
# The "metadata" type is taken from the annotations's
# "annotation.attributes" contents. It can be a nested key by using
Expand Down
9 changes: 6 additions & 3 deletions docs/girder_config_options.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,8 @@ This is used to specify how items appear in item lists. There are two settings,
title: Slide Label
-
# The "record" type is from the default item record. The value is
# one of "name", "size", or "controls".
# one of "name", "description", "created", "updated", "size", or
# "controls".
type: record
value: name
-
Expand All @@ -139,8 +140,10 @@ This is used to specify how items appear in item lists. There are two settings,
# can be a nested key by using dots in its name.
type: metadata
value: Stain
# "format" can be "text", "number", "category". Other values may be
# specified later.
# "format" can be "text", "number", "category", "datetime", "date",
# "time". "datetime", "date", and "time" use the user's browser's
# locale to convert the date and/or time to their browser's preferred
# format. Other values may be specified later.
format: text
-
type: metadata
Expand Down
25 changes: 21 additions & 4 deletions girder/girder_large_image/web_client/templates/itemList.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ ul.g-item-list.li-item-list(layout_mode=(itemList.layout || {}).mode || '', meta
- colNames[colidx] = `${column.value.substr(0, 1).toUpperCase()}${column.value.substr(1)}`
= colNames[colidx]
each item in items
li.g-item-list-entry(class=(highlightItem && item.id === selectedItemId ? 'g-selected' : ''), public=(isParentPublic ? 'true' : 'false'), style=(itemList.layout || {}).mode == 'grid' ? ('max-width: ' + parseInt((itemList.layout || {})['max-width'] || 250) + 'px') : '')
li.g-item-list-entry(class=(highlightItem && item.id === selectedItemId ? 'g-selected' : ''), public=(isParentPublic ? 'true' : 'false'), style=(itemList.layout || {}).mode === 'grid' ? ('max-width: ' + parseInt((itemList.layout || {})['max-width'] || 250) + 'px') : '')
if checkboxes
label.li-item-list-cell(for='g-item-cid-' + item.cid)
input.g-list-checkbox(type="checkbox", g-item-cid=item.cid, id='g-item-cid-' + item.cid)
for column, colidx in itemList.columns
if column.type !== 'image' || hasAnyLargeImage
-
var divtype = column.type !== 'record' || column.value !== 'controls' ? 'a' : 'span';
var classes = divtype == 'a' ? ['g-item-list-link']: [];
var classes = divtype === 'a' ? ['g-item-list-link']: [];
if (('' + column.type + column.value).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/)) classes.push(`li-column-${column.type}-${column.value}`);
if (('' + column.type).match(/^[a-zA-Z][a-zA-Z0-9-_]*$/)) classes.push(`li-column-${column.type}`);
var skip = false;
Expand Down Expand Up @@ -69,8 +69,19 @@ ul.g-item-list.li-item-list(layout_mode=(itemList.layout || {}).mode || '', meta
i.icon-link-ext
else if column.value === 'size'
.g-item-size= formatSize(item.get('size'))
else if column.value === 'description'
= item.get(column.value)
else if column.value === 'updated' && item.get('created')
.g-item-datetime= new Date(item.get(column.value) || item.get('created')).toLocaleString()
else if column.value === 'created' && item.get('created')
.g-item-datetime= new Date(item.get('created')).toLocaleString()
else
if column.format === 'datetime' && item.get(column.value)
= new Date(item.get(column.value)).toLocaleString()
else if column.format === 'date' && item.get(column.value)
= new Date(item.get(column.value)).toLocaleDateString()
else if column.format === 'time' && item.get(column.value)
= new Date(item.get(column.value)).toLocaleTimeString()
else
= item.get(column.value)
else if column.type === 'image' && item.get('largeImage')
.large_image_thumbnail(extra-image=column.value !== 'thumbnail' ? column.value : undefined, style=`width: ${column.width || 160}px; height: ${column.height || 100}px`, g-item-cid=column.value === 'thumbnail' ? item.cid : undefined)
- var imageName = column.value === 'thumbnail' ? column.value : `images/${column.value}`;
Expand All @@ -96,6 +107,12 @@ ul.g-item-list.li-item-list(layout_mode=(itemList.layout || {}).mode || '', meta
if column.format === 'text' && value
//- allow long strings to be hyphenated at periods and underscores
!= String(value).replace(/&/g, '&amp;').replace(/</, '&lt;').replace(/>/, '&gt;').replace(/"/, '&quot').replace(/'/, '&#39;').replace(/\./g, '.&shy;').replace(/_/g, '_&shy;')
else if column.format === 'datetime' && value
= new Date(value).toLocaleString()
else if column.format === 'date' && value
= new Date(value).toLocaleDateString()
else if column.format === 'time' && value
= new Date(value).toLocaleTimeString()
else
= value
if value && column.format !== 'count'
Expand Down
10 changes: 8 additions & 2 deletions ...er_annotation/girder_large_image_annotation/web_client/templates/annotationListWidget.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ if annotations.length
if (column.type === 'record' && column.value === 'creator') {
value = creator;
} else if (column.type === 'record' && column.value === 'updatedId') {
value = updater;
value = updater || creator;
} else if (column.type === 'record' && column.value === 'updated') {
value = value || annotation.get('created')
} else if (column.type === 'metadata') {
value = annotation.get('annotation').attributes || {};
column.value.split('.').forEach((part) => {
Expand All @@ -73,8 +75,12 @@ if annotations.length
if column.format === 'user'
a(href=`#user/${annotation.get(column.value) || annotation.get(column.value + 'Id')}`)
= value
else if column.format === 'date'
else if column.format === 'datetime'
= (new Date(value)).toLocaleString()
else if column.format === 'date'
= (new Date(value)).toLocaleDateString()
else if column.format === 'time'
= (new Date(value)).toLocaleTimeString()
else
= value
td.g-annotation-actions
Expand Down

0 comments on commit 7f51c42

Please sign in to comment.