Skip to content

Commit 5047827

Browse files
marySalvimarySalvi
authored
Merge pull request #1292 from microbiomedata/submission_portal-contact-us
Add contact support panel
2 parents cf41c1d + cad8fa5 commit 5047827

File tree

4 files changed

+324
-119
lines changed

4 files changed

+324
-119
lines changed

‎web/src/views/SubmissionPortal/Components/ContactCard.vue

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<script lang="ts">
2+
import { defineComponent } from '@vue/composition-api';
3+
4+
export default defineComponent({
5+
setup() {
6+
function emailTemplate(value: string) {
7+
const subjects: { [key: string]: string } = {
8+
support: 'Support Request',
9+
bug: 'Bug Report',
10+
feature: 'Feature Request',
11+
};
12+
const subject = encodeURIComponent(subjects[value]);
13+
return `mailto:support@microbiomedata.org?subject=${subject}`;
14+
}
15+
return {
16+
emailTemplate,
17+
};
18+
},
19+
});
20+
</script>
21+
<template>
22+
<v-card
23+
elevation="24"
24+
>
25+
<v-toolbar
26+
color="grey lighten-2"
27+
dense
28+
flat
29+
>
30+
We are here to help
31+
</v-toolbar>
32+
<v-list
33+
subheader
34+
>
35+
<v-list-item
36+
two-line
37+
style="background-color: #eeeeee;"
38+
class="ma-2"
39+
href="https://microbiomedata.org/contact/"
40+
>
41+
<v-btn
42+
icon
43+
outlined
44+
color="primary"
45+
class="mr-4"
46+
style="border: solid #4F3B80;"
47+
>
48+
<v-icon
49+
color="primary"
50+
>
51+
mdi-open-in-new
52+
</v-icon>
53+
</v-btn>
54+
<v-list-item-content>
55+
<v-list-item-title
56+
class="text-h6 primary--text"
57+
>
58+
Visit our support page
59+
</v-list-item-title>
60+
</v-list-item-content>
61+
</v-list-item>
62+
<v-list-item
63+
two-line
64+
class="ma-2"
65+
style="background-color: #eeeeee"
66+
:href="emailTemplate('support')"
67+
>
68+
<v-btn
69+
icon
70+
outlined
71+
color="blue"
72+
class="mr-4"
73+
style="border: solid;"
74+
>
75+
<v-icon>mdi-email</v-icon>
76+
</v-btn>
77+
<v-list-item-content>
78+
<v-list-item-title
79+
class="text-h6 blue--text"
80+
>
81+
Send us a message
82+
</v-list-item-title>
83+
<v-list-item-subtitle>
84+
Ask us for help
85+
</v-list-item-subtitle>
86+
</v-list-item-content>
87+
</v-list-item>
88+
<v-list-item
89+
two-line
90+
class="ma-2"
91+
style="background-color: #eeeeee"
92+
:href="emailTemplate('bug')"
93+
>
94+
<v-btn
95+
icon
96+
outlined
97+
color="red"
98+
class="mr-4"
99+
style="border: solid;"
100+
>
101+
<v-icon>mdi-bug</v-icon>
102+
</v-btn>
103+
<v-list-item-content>
104+
<v-list-item-title
105+
class="text-h6 red--text"
106+
>
107+
Report an issue
108+
</v-list-item-title>
109+
<v-list-item-subtitle>
110+
Let us know of any bugs
111+
</v-list-item-subtitle>
112+
</v-list-item-content>
113+
</v-list-item>
114+
<v-list-item
115+
two-line
116+
class="ma-2"
117+
style="background-color: #eeeeee"
118+
:href="emailTemplate('feature')"
119+
>
120+
<v-btn
121+
icon
122+
outlined
123+
color="grey darken-2"
124+
class="mr-4"
125+
style="border: solid;"
126+
>
127+
<v-icon>mdi-plus-circle</v-icon>
128+
</v-btn>
129+
<v-list-item-content>
130+
<v-list-item-title
131+
class="text-h6 grey--text text--darken-2"
132+
>
133+
Request a feature
134+
</v-list-item-title>
135+
<v-list-item-subtitle>
136+
Suggest a new feature
137+
</v-list-item-subtitle>
138+
</v-list-item-content>
139+
</v-list-item>
140+
</v-list>
141+
</v-card>
142+
</template>

‎web/src/views/SubmissionPortal/Components/SubmissionList.vue

Lines changed: 103 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import OrcidId from '../../../components/Presentation/OrcidId.vue';
1414
import TitleBanner from '@/views/SubmissionPortal/Components/TitleBanner.vue';
1515
import IconBar from '@/views/SubmissionPortal/Components/IconBar.vue';
1616
import IntroBlurb from '@/views/SubmissionPortal/Components/IntroBlurb.vue';
17+
import ContactCard from '@/views/SubmissionPortal/Components/ContactCard.vue';
1718
1819
const headers: DataTableHeader[] = [
1920
{
@@ -51,7 +52,7 @@ const headers: DataTableHeader[] = [
5152
5253
export default defineComponent({
5354
components: {
54-
IconBar, IntroBlurb, OrcidId, TitleBanner,
55+
IconBar, IntroBlurb, OrcidId, TitleBanner, ContactCard,
5556
},
5657
setup() {
5758
const router = useRouter();
@@ -99,81 +100,107 @@ export default defineComponent({
99100
</script>
100101

101102
<template>
102-
<v-card flat>
103-
<v-card-text class="pt-0 px-0">
104-
<v-container>
105-
<v-row>
106-
<v-col class="pb-0">
107-
<TitleBanner />
108-
<IconBar />
109-
</v-col>
110-
</v-row>
111-
<v-row v-if="submission.data.results.count === 0">
112-
<v-col>
113-
<IntroBlurb />
114-
</v-col>
115-
</v-row>
116-
</v-container>
117-
</v-card-text>
118-
<v-card-text>
119-
<v-btn
120-
color="primary"
121-
@click="createNewSubmission"
122-
>
123-
<v-icon>mdi-plus</v-icon>
124-
Create New Submission
125-
</v-btn>
126-
</v-card-text>
127-
<v-card-title class="text-h4">
128-
Past submissions
129-
</v-card-title>
130-
<v-card-text>
131-
Pick up where you left off or review a previous submission.
132-
</v-card-text>
133-
<v-card outlined>
134-
<v-data-table
135-
:headers="headers"
136-
:items="submission.data.results.results"
137-
:server-items-length="submission.data.results.count"
138-
:options.sync="options"
139-
:loading="submission.loading.value"
140-
:items-per-page.sync="submission.data.limit"
141-
:footer-props="{ itemsPerPageOptions: [10, 20, 50] }"
142-
>
143-
<template #[`item.author.name`]="{ item }">
144-
<orcid-id
145-
:orcid-id="item.author.orcid"
146-
:name="item.author.name"
147-
:width="14"
148-
:authenticated="true"
149-
/>
150-
</template>
151-
<template #[`item.metadata_submission.templates`]="{ item }">
152-
{{ item.metadata_submission.templates.map((template) => HARMONIZER_TEMPLATES[template].displayName).join(' + ') }}
153-
</template>
154-
<template #[`item.created`]="{ item }">
155-
{{ new Date(item.created).toLocaleString() }}
156-
</template>
157-
<template #[`item.status`]="{ item }">
158-
<v-chip
159-
:color="getStatus(item).color"
103+
<div>
104+
<v-menu
105+
offset-x
106+
left
107+
>
108+
<template #activator="{on, attrs}">
109+
<v-btn
110+
color="primary"
111+
large
112+
class="mr-0"
113+
style="transform:translateY(-50%) rotate(-90deg); right: -50px; top: 50%; position: fixed; z-index: 100;"
114+
v-bind="attrs"
115+
v-on="on"
116+
>
117+
support
118+
<v-icon
119+
class="ml-2"
120+
style="transform: rotate(90deg);"
160121
>
161-
{{ getStatus(item).text }}
162-
</v-chip>
163-
</template>
164-
<template #[`item.action`]="{ item }">
165-
<v-btn
166-
small
167-
color="primary"
168-
@click="() => resume(item)"
169-
>
170-
Resume
171-
<v-icon class="pl-1">
172-
mdi-arrow-right-circle
173-
</v-icon>
174-
</v-btn>
175-
</template>
176-
</v-data-table>
122+
mdi-message-question
123+
</v-icon>
124+
</v-btn>
125+
</template>
126+
<ContactCard />
127+
</v-menu>
128+
<v-card flat>
129+
<v-card-text class="pt-0 px-0">
130+
<v-container>
131+
<v-row>
132+
<v-col class="pb-0">
133+
<TitleBanner />
134+
<IconBar />
135+
</v-col>
136+
</v-row>
137+
<v-row v-if="submission.data.results.count === 0">
138+
<v-col>
139+
<IntroBlurb />
140+
</v-col>
141+
</v-row>
142+
</v-container>
143+
</v-card-text>
144+
<v-card-text>
145+
<v-btn
146+
color="primary"
147+
@click="createNewSubmission"
148+
>
149+
<v-icon>mdi-plus</v-icon>
150+
Create New Submission
151+
</v-btn>
152+
</v-card-text>
153+
<v-card-title class="text-h4">
154+
Past submissions
155+
</v-card-title>
156+
<v-card-text>
157+
Pick up where you left off or review a previous submission.
158+
</v-card-text>
159+
<v-card outlined>
160+
<v-data-table
161+
:headers="headers"
162+
:items="submission.data.results.results"
163+
:server-items-length="submission.data.results.count"
164+
:options.sync="options"
165+
:loading="submission.loading.value"
166+
:items-per-page.sync="submission.data.limit"
167+
:footer-props="{ itemsPerPageOptions: [10, 20, 50] }"
168+
>
169+
<template #[`item.author.name`]="{ item }">
170+
<orcid-id
171+
:orcid-id="item.author.orcid"
172+
:name="item.author.name"
173+
:width="14"
174+
:authenticated="true"
175+
/>
176+
</template>
177+
<template #[`item.metadata_submission.templates`]="{ item }">
178+
{{ item.metadata_submission.templates.map((template) => HARMONIZER_TEMPLATES[template].displayName).join(' + ') }}
179+
</template>
180+
<template #[`item.created`]="{ item }">
181+
{{ new Date(item.created).toLocaleString() }}
182+
</template>
183+
<template #[`item.status`]="{ item }">
184+
<v-chip
185+
:color="getStatus(item).color"
186+
>
187+
{{ getStatus(item).text }}
188+
</v-chip>
189+
</template>
190+
<template #[`item.action`]="{ item }">
191+
<v-btn
192+
small
193+
color="primary"
194+
@click="() => resume(item)"
195+
>
196+
Resume
197+
<v-icon class="pl-1">
198+
mdi-arrow-right-circle
199+
</v-icon>
200+
</v-btn>
201+
</template>
202+
</v-data-table>
203+
</v-card>
177204
</v-card>
178-
</v-card>
205+
</div>
179206
</template>

‎web/src/views/SubmissionPortal/HarmonizerView.vue

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
canEditSampleMetadata,
3333
isOwner,
3434
} from './store';
35+
import ContactCard from '@/views/SubmissionPortal/Components/ContactCard.vue';
3536
import FindReplace from './Components/FindReplace.vue';
3637
import SubmissionStepper from './Components/SubmissionStepper.vue';
3738
import SubmissionDocsLink from './Components/SubmissionDocsLink.vue';
@@ -93,6 +94,7 @@ const ALWAYS_READ_ONLY_COLUMNS = [
9394
9495
export default defineComponent({
9596
components: {
97+
ContactCard,
9698
FindReplace,
9799
SubmissionStepper,
98100
SubmissionDocsLink,
@@ -797,6 +799,29 @@ export default defineComponent({
797799
{{ HARMONIZER_TEMPLATES[templateKey].displayName }}
798800
</span>
799801
</v-tooltip>
802+
<v-spacer />
803+
<v-menu
804+
offset-x
805+
left
806+
z-index="300"
807+
>
808+
<template #activator="{on, attrs}">
809+
<v-btn
810+
color="primary"
811+
small
812+
class="my-2 py-4"
813+
v-bind="attrs"
814+
v-on="on"
815+
>
816+
<v-icon
817+
class="mt-1"
818+
>
819+
mdi-message-question
820+
</v-icon>
821+
</v-btn>
822+
</template>
823+
<ContactCard />
824+
</v-menu>
800825
</v-tabs>
801826

802827
<div v-if="schemaLoading">
@@ -1131,7 +1156,7 @@ html {
11311156
11321157
.sidebar-toggle {
11331158
background: white;
1134-
z-index: 500;
1159+
z-index: 200;
11351160
position: absolute;
11361161
top: 0;
11371162
left: 0;

0 commit comments

Comments
 (0)