Skip to content

Commit ff69425

Browse files
authored
Merge pull request #806 from mathematicalthinking/submissionsUpgrade
Submissions upgrade (in progress)
2 parents 89fef33 + 5d9f694 commit ff69425

23 files changed

+1077
-1137
lines changed

UPGRADE_NOTES.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,12 @@ Overview: (from ChatGPT)
211211

212212
There are several README.md files scattered through the /test folder.
213213

214+
# Incomplete functionality
215+
216+
- **error handling**: Although there is an error-handling service (and previously a mixin and a superclass), error handling is generally incompletely and inconsistently implemented throughout the codebase. Sometimes UI::Errorbox is used; sometimes just plain text. Sometimes errors are arrays of information text; sometimes flags. Sometimes they are distinctly named; sometimes different types of errors and lumped together. Often, a couple of errors are handled by the js file but never displayed in template. Rarely the reverse happens because I've been eliminating or implementing those cases. Overall, I think a more consistent approach is needed, perhaps something even more centralized and less dependent on the same code repeated across many components.
217+
- **imports and vmt**: At some point, all the components related to imports and vmt were switched off (i.e., the routes that would lead the user to those components were emptied out; see router.js). I did not upgrade these components because they weren't currently being used, but I did leave them in place for a future developer.
218+
- **workspace-new-XX**: These components seem like they were the beginning of a refactoring of the creation of new workspaces. However, they were never completed. I've left them in the codebase for futue developers.
219+
214220
## Other upgrades
215221

216222
- **Routes** Many of the routes are in the classic style, so should be upgraded to JS classes, although they all seem to work fine in Ember 4.5.

app/components/DragNDrop.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

app/components/bread-crumbs-item.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<li
2-
class='bread-crumbs-item {{if this.isSelected 'active-crumb'}}'
3-
{{action 'onSelect' @item}}
2+
class='bread-crumbs-item {{if this.isSelected "active-crumb"}}'
3+
{{on 'click' (fn this.onSelect @item)}}
44
>
55
<abbr title='{{unbound this.titleText}}'>
66
{{@displayValue}}

app/components/bread-crumbs-item.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Component from '@glimmer/component';
22
import { action } from '@ember/object';
3-
import moment from 'moment';
3+
import formatDate from 'encompass/helpers/format-date';
44
import isEqual from 'lodash-es/isEqual';
55
import isString from 'lodash-es/isString';
66
import isObject from 'lodash-es/isObject';
@@ -18,8 +18,9 @@ export default class BreadCumbsItemComponent extends Component {
1818
if (isString(this.args.itemTitleText)) {
1919
return this.args.itemTitleText;
2020
}
21-
if (this.args.item && this.args.item.createDate) {
22-
return moment(this.args.item.createDate).format('MMM Do YYYY h:mm A');
21+
if (this.args.item?.createDate) {
22+
const date = new Date(this.args.item.createDate);
23+
return formatDate(date, 'MMM Do YYYY h:mm A');
2324
}
2425
if (isString(this.args.titleTextPath) && isObject(this.args.item)) {
2526
return this.args.item[this.args.titleTextPath];

app/components/bread-crumbs.hbs

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,54 @@
1-
<div class="bread-crumbs-comp">
2-
<div class="breadcrumbs">
1+
<div class='bread-crumbs-comp'>
2+
<div class='breadcrumbs'>
33
{{#if this.showInfoToolTip}}
44
<span class={{this.toolTipClassNames}} data-tooltip={{@infoToolTipText}}>
5-
<i class="fas fa-info-circle info-icon"></i>
5+
<i class='fas fa-info-circle info-icon'></i>
66
</span>
77
{{/if}}
8-
<span class="revisions">{{this.itemsLabelText}}</span>
8+
<span class='revisions'>{{this.itemsLabelText}}</span>
99
{{#if this.showTruncatedView}}
10-
<ul class="breadcrumbs truncated">
11-
{{#let this.itemsList.firstObject as |firstItem|}}
12-
<BreadCrumbsItem @item={{firstItem}} @displayValue={{1}} @onSelect={{action "onItemSelect"}} @selectedItem={{@selectedItem}} @titleTextPath={{@titleTextPath}} @starredItemsList={{this.starredItemsList}} />
13-
{{/let}}
14-
<abbr title="expand">
15-
<span {{action "showAllItems"}} class="truncate">
16-
...
17-
</span>
18-
</abbr>
19-
{{#let this.itemsList.lastObject as |lastItem|}}
20-
<BreadCrumbsItem @item={{this.lastItem}} @displayValue={{this.lastItemValue}} @onSelect={{action "onItemSelect"}} @selectedItem={{@selectedItem}} @titleTextPath={{@titleTextPath}} @starredItemsList={{this.starredItemsList}} />
21-
{{/let}}
10+
<ul class='breadcrumbs truncated'>
11+
{{#let this.itemsList.firstObject as |firstItem|}}
12+
<BreadCrumbsItem
13+
@item={{firstItem}}
14+
@displayValue={{1}}
15+
@onSelect={{this.onItemSelect}}
16+
@selectedItem={{@selectedItem}}
17+
@titleTextPath={{@titleTextPath}}
18+
@starredItemsList={{this.starredItemsList}}
19+
/>
20+
{{/let}}
21+
<abbr title='expand'>
22+
<span {{on 'click' this.showAllItems}} class='truncate'>
23+
...
24+
</span>
25+
</abbr>
26+
{{#let this.itemsList.lastObject as |lastItem|}}
27+
<BreadCrumbsItem
28+
@item={{this.lastItem}}
29+
@displayValue={{this.lastItemValue}}
30+
@onSelect={{this.onItemSelect}}
31+
@selectedItem={{@selectedItem}}
32+
@titleTextPath={{@titleTextPath}}
33+
@starredItemsList={{this.starredItemsList}}
34+
/>
35+
{{/let}}
2236
</ul>
2337
{{else}}
24-
<ul class="breadcrumbs">
38+
<ul class='breadcrumbs'>
2539
{{#each this.itemsList as |item index|}}
26-
<BreadCrumbsItem @item={{item}} @displayValue={{add-to index 1}} @onSelect={{action "onItemSelect"}} @selectedItem={{@selectedItem}} @titleTextPath={{@titleTextPath}} @starredItemsList={{this.starredItemsList}} />
40+
<BreadCrumbsItem
41+
@item={{item}}
42+
@displayValue={{add-to index 1}}
43+
@onSelect={{this.onItemSelect}}
44+
@selectedItem={{@selectedItem}}
45+
@titleTextPath={{@titleTextPath}}
46+
@starredItemsList={{this.starredItemsList}}
47+
/>
2748
{{/each}}
2849
{{#if this.areManyItems}}
29-
<li {{action "collapse"}} title="collapse">
30-
<i class="fas fa-minus-square"></i>
50+
<li {{on 'click' this.collapse}} title='collapse'>
51+
<i class='fas fa-minus-square'></i>
3152
</li>
3253
{{/if}}
3354
</ul>

app/components/bread-crumbs.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default class BreadCrumbsComponent extends Component {
4343
if (!item) {
4444
return;
4545
}
46-
this.args.onSelect(item);
46+
this.args.onSelect?.(item);
4747
}
4848
@action showAllItems() {
4949
this.doTruncate = false;
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div class='draggable-selection'>
2+
<div
3+
class='selectionLink
4+
{{if this.isImage "image-tag"}}
5+
{{if this.isSelected "is-selected"}}'
6+
title='{{this.titleText}} {{if this.isParentWorkspace " by "}} {{if
7+
this.isParentWorkspace
8+
@selection.createdBy.username
9+
}}'
10+
>
11+
12+
{{#if this.modelIdsReady}}
13+
<LinkTo
14+
@route='workspace.submissions.submission.selections.selection'
15+
@models={{this.selectionModelIds}}
16+
class={{this.linkToClassName}}
17+
>
18+
{{#if this.isImage}}
19+
<img
20+
class='img-tag-thmb'
21+
src={{@selection.imageTagLink}}
22+
alt={{@selection.text}}
23+
/>
24+
<div class='overlay'>
25+
<button type='button' {{on 'click' this.expandImage}}><i
26+
class={{this.overlayIcon}}
27+
></i></button>
28+
</div>
29+
{{else}}
30+
{{@selection.text}}
31+
{{/if}}
32+
</LinkTo>
33+
{{/if}}
34+
{{#unless this.isImage}}
35+
<span {{on 'click' (fn this.deleteSelection @selection)}}><i
36+
class='fas fa-minus-circle'
37+
></i></span>
38+
{{/unless}}
39+
</div>
40+
{{#if this.isImage}}
41+
<div class='selection-actions'>
42+
{{#if this.canDelete}}
43+
<span {{on 'click' (fn this.deleteSelection @selection)}}><i
44+
class='fas fa-minus-circle'
45+
></i></span>
46+
{{/if}}
47+
</div>
48+
{{/if}}
49+
{{#if this.isExpanded}}
50+
<div class='full-image'>
51+
<i class='fas fa-times' {{on 'click' this.expandImage}}></i>
52+
<img src={{@selection.imageTagLink}} alt={{@selection.text}} />
53+
</div>
54+
{{/if}}
55+
</div>

app/components/draggable-selection.js

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
import Component from '@glimmer/component';
22
import { tracked } from '@glimmer/tracking';
33
import { action } from '@ember/object';
4-
import { inject as service } from '@ember/service';
5-
import moment from 'moment';
4+
import { service } from '@ember/service';
65

76
export default class DraggableSelectionComponent extends Component {
87
@service('sweet-alert') alert;
98
@service('utility-methods') utils;
10-
@service('current-user') currentUser;
9+
@service currentUser;
1110

1211
@tracked isExpanded = false;
1312
@tracked isDragging = false;
1413

14+
get modelIdsReady() {
15+
return (
16+
this.args.selection &&
17+
this.args.selection.workspace &&
18+
this.args.selection.submission
19+
);
20+
}
21+
22+
get selectionModelIds() {
23+
return [
24+
this.args.selection.workspace?.id,
25+
this.args.selection.submission?.id,
26+
this.args.selection?.id,
27+
];
28+
}
29+
1530
get workspaceType() {
1631
return this.args.selection.workspace.get('workspaceType');
1732
}
@@ -21,7 +36,7 @@ export default class DraggableSelectionComponent extends Component {
2136
}
2237

2338
get canDelete() {
24-
const currentUserId = this.currentUser.user.id;
39+
const currentUserId = this.currentUser.id;
2540
const creatorId = this.args.selection.createdBy.id;
2641
return currentUserId === creatorId || this.args.canDeleteSelections;
2742
}
@@ -46,8 +61,14 @@ export default class DraggableSelectionComponent extends Component {
4661

4762
get titleText() {
4863
if (!this.isVmtClip) {
49-
const createDate = this.args.selection.createDate;
50-
const displayDate = moment(createDate).format('l h:mm');
64+
const createDate = new Date(
65+
this.args.selection?.createDate ?? Date.now()
66+
);
67+
const formatter = new Intl.DateTimeFormat(undefined, {
68+
dateStyle: 'short',
69+
timeStyle: 'short',
70+
});
71+
const displayDate = formatter.format(createDate);
5172
return `Created ${displayDate}`;
5273
}
5374
const { startTime, endTime } = this.args.selection.vmtInfo;

app/components/selectable-area.hbs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div
2+
id='selectable-area'
3+
{{did-insert this.initializeSelectionTools}}
4+
{{did-update this.handleSubmissionChange @model.id}}
5+
{{did-update this.updateSelections @sels}}
6+
{{did-update this.updateShowingSelections @showingSelections}}
7+
{{did-update this.updateMakingSelections @makingSelection}}
8+
{{will-destroy this.cleanup}}
9+
>
10+
{{yield}}
11+
</div>

0 commit comments

Comments
 (0)