Skip to content

Commit 9ff7563

Browse files
author
Uditi Mehta
committed
create preprint card
1 parent 586d4e5 commit 9ff7563

File tree

8 files changed

+523
-3
lines changed

8 files changed

+523
-3
lines changed

‎app/preprints/-components/preprint-card/component.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { tagName } from '@ember-decorators/component';
2+
import Component from '@ember/component';
3+
import { inject as service } from '@ember/service';
4+
import config from 'ember-osf-web/config/environment';
5+
import Store from '@ember-data/store';
6+
7+
import { layout } from 'ember-osf-web/decorators/component';
8+
import Preprint from 'ember-osf-web/models/preprint';
9+
import Analytics from 'ember-osf-web/services/analytics';
10+
import pathJoin from 'ember-osf-web/utils/path-join';
11+
import { Permission } from 'ember-osf-web/models/osf-model';
12+
import Toast from 'ember-toastr/services/toast';
13+
14+
import RouterService from '@ember/routing/router-service';
15+
import Intl from 'ember-intl/services/intl';
16+
import Media from 'ember-responsive';
17+
import template from './template';
18+
import styles from './styles';
19+
20+
const { OSF: { url: baseURL } } = config;
21+
22+
@layout(template, styles)
23+
@tagName('')
24+
export default class PreprintCard extends Component {
25+
@service analytics!: Analytics;
26+
@service router!: RouterService;
27+
@service store!: Store;
28+
@service toast!: Toast;
29+
@service intl!: Intl;
30+
@service media!: Media;
31+
32+
preprint?: Preprint;
33+
delete?: (preprint: Preprint) => void;
34+
showTags = false;
35+
readOnly = false;
36+
37+
searchUrl = pathJoin(baseURL, 'search');
38+
39+
get isMobile() {
40+
return this.media.isMobile;
41+
}
42+
43+
get shouldShowUpdateButton() {
44+
return this.preprint && this.preprint.currentUserPermissions.includes(Permission.Admin);
45+
}
46+
47+
}

‎app/preprints/-components/preprint-card/styles.scss‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
.preprint-card {
2+
width: 100%;
3+
margin: 10px 0;
4+
}
5+
6+
.card-contents {
7+
display: flex;
8+
flex-direction: row;
9+
}
10+
11+
.heading {
12+
display: flex;
13+
flex-direction: column;
14+
flex-wrap: wrap;
15+
justify-content: flex-start;
16+
align-items: flex-start;
17+
width: 100%;
18+
}
19+
20+
.ember-content-placeholders-heading__title {
21+
height: 1em;
22+
margin-top: 5px;
23+
margin-bottom: 5px;
24+
25+
&:first-child {
26+
width: 100%;
27+
}
28+
}
29+
30+
.label-danger {
31+
background-color: $brand-danger;
32+
}
33+
34+
.heading > span {
35+
line-height: 1.5;
36+
}
37+
38+
.label-info {
39+
background-color: darken($brand-info, 15%);
40+
}
41+
42+
.label-primary {
43+
background-color: #337ab7;
44+
}
45+
46+
.label {
47+
padding: 0.2em 0.6em 0.3em;
48+
font-size: 75%;
49+
font-weight: 700;
50+
color: #fff;
51+
text-align: center;
52+
white-space: nowrap;
53+
vertical-align: baseline;
54+
border-radius: 0.25em;
55+
display: block;
56+
margin-top: 5px;
57+
}
58+
59+
.osf-link {
60+
margin-left: 5px;
61+
margin-top: 2px;
62+
font-weight: bold;
63+
}
64+
65+
.osf-link.mobile {
66+
margin-left: 0;
67+
}
68+
69+
.body {
70+
width: 80%;
71+
72+
&.mobile {
73+
width: 90%;
74+
}
75+
}
76+
77+
.preprint-body {
78+
width: 100%;
79+
}
80+
81+
.ember-content-placeholders-text__line {
82+
height: 1em;
83+
margin-bottom: 5px;
84+
}
85+
86+
dl {
87+
margin-bottom: 10px;
88+
}
89+
90+
dl div {
91+
display: flex;
92+
}
93+
94+
dl dt {
95+
width: 100px;
96+
margin-right: 5px;
97+
}
98+
99+
dl dd {
100+
flex: 1;
101+
}
102+
103+
.tags {
104+
margin-top: 2px;
105+
}
106+
107+
.description {
108+
text-overflow: ellipsis;
109+
overflow: hidden;
110+
white-space: nowrap;
111+
width: calc(100% - 100px);
112+
}
113+
114+
.link {
115+
composes: Button from 'osf-components/components/button/styles.scss';
116+
composes: SecondaryButton from 'osf-components/components/button/styles.scss';
117+
composes: MediumButton from 'osf-components/components/button/styles.scss';
118+
119+
&:hover {
120+
text-decoration: none !important;
121+
}
122+
}
123+
124+
.open-badges {
125+
width: 20%;
126+
border-left-width: thin;
127+
border-left-color: $color-bg-gray-light;
128+
border-left-style: solid;
129+
padding-left: 10px;
130+
}
131+
132+
.open-badges.mobile {
133+
width: 10%;
134+
padding-left: 0;
135+
}
136+
137+
.dropdown {
138+
padding-left: 5px;
139+
}
140+
141+
.dropdown-button {
142+
padding: 4px 12px;
143+
line-height: 0;
144+
}
145+
146+
.dropdown-list {
147+
background-color: $color-bg-gray-light;
148+
min-width: 180px;
149+
}
150+
151+
.dropdown-list ul {
152+
list-style: none;
153+
padding-inline-start: 0;
154+
}
155+
156+
.dropdown-list li {
157+
margin: 10px 0;
158+
}
159+
160+
.dropdown-link {
161+
color: $color-link-black;
162+
border-color: transparent;
163+
background-color: $color-bg-gray-light;
164+
min-width: 180px;
165+
text-align: left;
166+
padding: 3px 20px;
167+
}
168+
169+
.dropdown-link:hover,
170+
.dropdown-link:focus {
171+
cursor: pointer;
172+
background-image: none;
173+
background-color: $color-bg-gray-dark;
174+
}
175+
176+
.list-group-item-heading {
177+
margin-top: 0;
178+
margin-bottom: 5px;
179+
}
180+
181+
.pull-right {
182+
float: right !important;
183+
}
184+
185+
.update-button {
186+
color: $color-text-blue-dark;
187+
}

‎app/preprints/-components/preprint-card/template.hbs‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<div
2+
data-test-preprint-card
3+
data-analytics-scope='Preprint Card'
4+
local-class='preprint-card'
5+
>
6+
<div local-class='card-contents'>
7+
<div
8+
local-class='card-body {{if this.isMobile 'mobile'}}'
9+
>
10+
<h4 local-class='list-group-item-heading heading' data-test-preprint-card-heading>
11+
{{#if @preprint}}
12+
{{#unless @preprint.public}}
13+
<span>
14+
<FaIcon @icon='lock' />
15+
<EmberTooltip>
16+
{{t 'preprints.preprint_card.private_tooltip'}}
17+
</EmberTooltip>
18+
</span> |
19+
{{/unless}}
20+
<OsfLink
21+
local-class='osf-link {{if this.isMobile 'mobile'}}'
22+
data-analytics-name='Title'
23+
data-test-preprint-title='{{@preprint.id}}'
24+
@route='resolve-guid'
25+
@models={{array @preprint.id}}
26+
>
27+
{{@preprint.title}}
28+
</OsfLink>
29+
{{else}}
30+
<ContentPlaceholders as |placeholder|>
31+
<placeholder.heading @subtitle={{false}} />
32+
</ContentPlaceholders>
33+
{{/if}}
34+
{{#if @preprint}}
35+
<div local-class='status-label'>
36+
{{#if (eq @preprint.reviewsState 'pending')}}
37+
<span local-class='label label-info'>{{t 'preprints.preprint_card.statuses.pending'}}</span>
38+
{{else if (eq @preprint.reviewsState 'accepted')}}
39+
<span local-class='label label-primary'>{{t 'preprints.preprint_card.statuses.accepted'}}</span>
40+
{{else if (eq @preprint.reviewsState 'rejected')}}
41+
<span local-class='label label-danger'>{{t 'preprints.preprint_card.statuses.rejected'}}</span>
42+
{{/if}}
43+
</div>
44+
{{/if}}
45+
</h4>
46+
<div data-test-preprint-card-body local-class='body'>
47+
{{#if @preprint}}
48+
<dl>
49+
<div>
50+
<dt data-test-provider-label>
51+
{{t 'preprints.preprint_card.provider'}}
52+
</dt>
53+
<dd data-test-provider-value>
54+
{{@preprint.provider.name}}
55+
</dd>
56+
</div>
57+
<div>
58+
<dt data-test-created-timestamp-label>
59+
{{t 'preprints.preprint_card.date_created'}}
60+
</dt>
61+
<dd data-test-created-timestamp-value>
62+
{{moment @preprint.dateCreated}}
63+
</dd>
64+
</div>
65+
<div>
66+
<dt data-test-updated-timestamp-label>
67+
{{t 'preprints.preprint_card.date_modified'}}
68+
</dt>
69+
<dd data-test-updated-timestamp-value>
70+
{{moment @preprint.dateModified}}
71+
</dd>
72+
</div>
73+
<div>
74+
<dt data-test-contributors-label>
75+
{{t 'preprints.preprint_card.contributors'}}
76+
</dt>
77+
<dd>
78+
<ContributorList
79+
@model={{@preprint}}
80+
@shouldLinkUsers={{true}}
81+
/>
82+
</dd>
83+
</div>
84+
<div>
85+
<dt data-test-description-label>
86+
{{t 'preprints.preprint_card.description'}}
87+
</dt>
88+
<dd data-test-description local-class='description'>
89+
{{@preprint.description}}
90+
</dd>
91+
</div>
92+
{{#if (and this.showTags @preprint.tags)}}
93+
<div>
94+
<dt local-class='tags' data-test-tags-label>
95+
{{t 'preprints.preprint_card.tags'}}
96+
</dt>
97+
<dd>
98+
<TagsWidget
99+
@taggable={{@preprint}}
100+
@inline={{true}}
101+
/>
102+
</dd>
103+
</div>
104+
{{/if}}
105+
</dl>
106+
<div local-class='PreprintButtons'>
107+
<OsfLink
108+
local-class='link'
109+
data-analytics-name='View Preprint'
110+
data-test-view-button='{{@preprint.id}}'
111+
@route='resolve-guid'
112+
@models={{array @preprint.id}}
113+
>
114+
{{t 'preprints.preprint_card.view_button'}}
115+
</OsfLink>
116+
{{#if this.shouldShowUpdateButton}}
117+
<OsfLink
118+
local-class='link update-button'
119+
data-analytics-name='Edit Preprint'
120+
data-test-update-button='{{@preprint.id}}'
121+
@route='preprints.edit'
122+
@models={{array @preprint.provider.id @preprint.id}}
123+
>
124+
{{t 'preprints.preprint_card.update_button'}}
125+
</OsfLink>
126+
{{/if}}
127+
</div>
128+
129+
{{else}}
130+
<ContentPlaceholders as |placeholder|>
131+
<placeholder.text @lines={{2}} />
132+
</ContentPlaceholders>
133+
{{/if}}
134+
</div>
135+
</div>
136+
</div>
137+
</div>

‎app/preprints/my-preprints/controller.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Controller from '@ember/controller';
2+
3+
export default class PreprintsMyPreprintsController extends Controller {
4+
get preprints() {
5+
return this.model;
6+
}
7+
}

‎app/preprints/my-preprints/route.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Route from '@ember/routing/route';
2+
import requireAuth from 'ember-osf-web/decorators/require-auth';
3+
import { inject as service } from '@ember/service';
4+
import Store from '@ember-data/store';
5+
6+
@requireAuth()
7+
export default class PreprintsMyPreprintsRoute extends Route {
8+
@service store!: Store;
9+
10+
async model() {
11+
const preprints = await this.store.findAll('preprint');
12+
return preprints;
13+
}
14+
}

0 commit comments

Comments
 (0)