[ENG-4887] [ENG-5293] [ENG-5294] Preprints: Select Page

app/preprints/-components/preprint-provider-display/component.ts

@@ -0,0 +1,24 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
+
+
+interface InputArgs {
+    provider: PreprintProviderModel;
+    updateSelectedProvider: (provider: PreprintProviderModel) => void;
+    selectedProviderId: string;
+}
+
+
+export default class PreprintProviderDisplay extends Component<InputArgs> {
+    provider: PreprintProviderModel = this.args.provider;
+
+    public get isSelected(): boolean {
+        return this.args.provider.id === this.args.selectedProviderId;
+    }
+
+    @action
+    onProviderSelect(): void {
+        this.args.updateSelectedProvider(this.provider);
+    }
+}

app/preprints/-components/preprint-provider-display/styles.scss

@@ -0,0 +1,56 @@
+.provider-container {
+    width: 264px;
+    height: 150px;
+    margin: 10px;
+    padding: 10px;
+    border: 1px solid $color-border-gray;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    .image-container {
+        width: 60px;
+        height: 60px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .image {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    .name-container {
+        width: 100%;
+        margin-top: 5px;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .description-container {
+        width: 100%;
+        margin-top: 5px;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &:hover {
+        border-color: $color-border-blue-dark;
+        background-color: $color-bg-gray-blue-light;
+    }
+
+    &.mobile {
+        width: 300px;
+    }
+
+    &.selected {
+        border-color: $color-border-blue-dark;
+        background-color: $color-bg-gray-blue-light;
+    }
+}

app/preprints/-components/preprint-provider-display/template.hbs

@@ -0,0 +1,26 @@
+{{!-- template-lint-disable no-invalid-interactive --}}
+<div
+    data-test-provider-id='{{this.provider.id}}'
+    local-class='provider-container {{if (is-mobile) 'mobile'}} {{if this.isSelected 'selected'}}'
+    {{ on 'click' (action this.onProviderSelect) }}
+>
+    <div local-class='image-container'>
+        <img
+            data-test-image
+            local-class='image'
+            src={{this.provider.assets.square_color_no_transparent}}
+            alt={{this.headerText}} />
+    </div>
+    <div
+        data-test-name
+        local-class='name-container'
+    >
+        {{this.provider.name}}
+    </div>
+    <div
+        data-test-description
+        local-class='description-container'
+    >
+        {{html-safe this.provider.description}}
+    </div>
+</div>

app/preprints/-components/preprint-provider-selection/component.ts

@@ -0,0 +1,44 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { serviceLinks } from 'ember-osf-web/const/service-links';
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
+import RouterService from '@ember/routing/router-service';
+
+
+interface InputArgs {
+    submissionProviders: PreprintProviderModel[];
+}
+
+
+export default class PreprintProviderSelection extends Component<InputArgs> {
+    @service router!: RouterService;
+
+    submissionProviders: PreprintProviderModel[] = this.args.submissionProviders;
+    learnMoreUrl: string = serviceLinks.preprintsSupport;
+    @tracked selectedProvider?: PreprintProviderModel;
+
+    public get isDisabled(): boolean {
+        return !this.selectedProvider;
+    }
+
+    public get selectedProviderId(): string | undefined {
+        if (this.selectedProvider) {
+            return this.selectedProvider.id;
+        }
+        return undefined;
+    }
+
+    @action
+    onCreateButtonClick(): void {
+        if (this.selectedProvider !== undefined) {
+            this.router.transitionTo('preprints.submit', this.selectedProvider.id);
+        }
+    }
+
+    @action
+    updateSelectedProvider(provider: PreprintProviderModel): void {
+        this.selectedProvider = provider;
+    }
+}

app/preprints/-components/preprint-provider-selection/styles.scss

@@ -0,0 +1,96 @@
+// stylelint-disable max-nesting-depth
+
+@import 'app/styles/layout';
+
+.provider-selection-container {
+    @include clamp-width;
+    width: 100%;
+    display: flex;
+    padding: 15px 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    font-style: normal;
+
+    .heading-container {
+        width: 100%;
+        padding: 15px 0;
+
+        .heading {
+            margin: 5px 10px;
+            font-size: 24px;
+            font-weight: bold;
+        }
+    }
+
+    .paragraph-container {
+        width: 100%;
+        padding: 15px 0;
+
+        .paragraph {
+            margin: 5px 10px;
+            font-size: 16px;
+            font-weight: 400;
+        }
+    }
+
+    .provider-list-container {
+        width: 100%;
+        padding: 15px 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-content: flex-start;
+    }
+
+    .create-button-container {
+        width: 100%;
+        padding: 15px 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .create-button {
+            width: 175px;
+            height: 40px;
+            border-radius: 5px;
+            background-color: $color-bg-blue-dark;
+            font-size: 16px;
+            font-weight: bold;
+            color: $color-text-white;
+            border-style: hidden;
+
+            &:hover {
+                background-color: $color-bg-blue-highlight;
+            }
+
+            &.disabled {
+                background-color: $color-bg-gray;
+            }
+        }
+    }
+
+    &.mobile {
+        min-width: 330px;
+
+        .heading-container {
+            .heading {
+                margin: 5px 20px;
+                font-size: 20px;
+            }
+        }
+
+        .paragraph-container {
+            .paragraph {
+                margin: 5px 20px;
+            }
+        }
+
+        .provider-list-container {
+            justify-content: center;
+            align-content: center;
+        }
+    }
+}

app/preprints/-components/preprint-provider-selection/template.hbs

@@ -0,0 +1,39 @@
+<div local-class='provider-selection-container {{if (is-mobile) 'mobile'}}'>
+    <div local-class='heading-container'>
+        <h1
+            data-test-heading
+            local-class='heading'
+        >
+            {{t 'preprints.select.heading'}}
+        </h1>
+    </div>
+    <div local-class='paragraph-container'>
+        <p
+            data-test-paragraph
+            local-class='paragraph'
+        >
+            {{t 'preprints.select.paragraph' link=this.learnMoreUrl htmlSafe=true}}
+        </p>
+    </div>
+    <div local-class='provider-list-container'>
+        {{#each this.submissionProviders as |provider| }}
+            <Preprints::-Components::PreprintProviderDisplay
+                data-test-provider
+                @provider={{provider}}
+                @updateSelectedProvider={{this.updateSelectedProvider}}
+                @selectedProviderId={{this.selectedProviderId}}
+            />
+        {{/each}}
+    </div>
+    <div local-class='create-button-container'>
+        <Button
+            data-test-create-preprints
+            local-class='create-button {{if this.isDisabled 'disabled'}}'
+            disabled={{this.isDisabled}}
+            @type='create'
+            {{ on 'click' (action this.onCreateButtonClick) }}
+        >
+            {{t 'preprints.select.create_button'}}
+        </Button>
+    </div>
+</div>

app/preprints/select/route.ts

@@ -0,0 +1,17 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import Store from '@ember-data/store';
+import PreprintProviderModel from 'ember-osf-web/models/preprint-provider';
+
+
+export default class PreprintSelectRoute extends Route {
+    @service store!: Store;
+
+    async model(){
+        const allProviders: PreprintProviderModel[] = await this.store.findAll('preprint-provider', {reload: true});
+        const submissionProviders: PreprintProviderModel[] = allProviders.filter(item => item.allowSubmissions);
+        return {
+            submissionProviders,
+        };
+    }
+}

app/preprints/select/styles.scss

@@ -0,0 +1,43 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
+@import 'app/styles/layout';
+
+.select-page-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .header-container {
+        padding: 30px 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        background: url('assets/images/default-brand/bg-dark.jpg') top center $color-bg-color-grey;
+
+        .header-clamp-width-container {
+            @include clamp-width;
+
+            .header {
+                margin: 5px 10px;
+                font-size: 48px;
+                color: $color-text-white;
+            }
+        }
+    }
+
+    &.mobile {
+        .header-container {
+            text-align: center;
+
+            .header-clamp-width-container {
+                .header {
+                    font-size: 36px;
+                }
+            }
+        }
+    }
+}

app/preprints/select/template.hbs

@@ -0,0 +1,17 @@
+{{page-title (t 'preprints.select.page_title')}}
+
+<div local-class='select-page-container {{if (is-mobile) 'mobile'}}'>
+    {{!-- placehodler for header component --}}
+    {{!-- local-class 'header-container' and 'header' will be replaced by the component's own local-class --}}
+    <div local-class='header-container'>
+        <div local-class='header-clamp-width-container'>
+            <p
+                data-test-header
+                local-class='header'
+            >
+                {{t 'preprints.select.title'}}
+            </p>
+        </div>
+    </div>
+    <Preprints::-Components::PreprintProviderSelection @submissionProviders={{this.model.submissionProviders}} />
+</div>

app/router.ts

@@ -32,6 +32,7 @@ Router.map(function() {
         this.route('discover', { path: '/:provider_id/discover' });
         this.route('detail', { path: '/:provider_id/:guid' });
         this.route('submit', { path: '/:provider_id/submit' });
+        this.route('select');
     });
 
 

app/styles/_variables.scss

@@ -48,6 +48,7 @@ $color-border-gray-dark: #e5e5e5;
 $color-border-gray: #ddd;
 $color-border-gray-light: #d9d9d9;
 $color-border-gray-cool: #d6dbdc;
+$color-border-blue-dark: #263947;
 
 $color-gradient-primary: #eee;
 $color-gradient-secondary: #ccc;
@@ -84,6 +85,7 @@ $color-bg-blue-dark: #337ab7;
 $color-bg-blue-darker: #214661;
 $color-bg-blue-light: #def;
 $color-bg-blue-lighter: rgba($color-bg-blue-dark, 0.2);
+$color-bg-blue-highlight: #15a5eb;
 $color-bg-red: #a00;
 $color-bg-white-transparent: rgba(255, 255, 255, 0.49);