Skip to content

Add contact support panel #1292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 15, 2024
Merged

Add contact support panel #1292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14abf8b
Add contact support panel
marySalvi Jul 9, 2024
cad8fa5
Make support button fixed on screen for scrolling
marySalvi Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 142 additions & 0 deletions web/src/views/SubmissionPortal/Components/ContactCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
setup() {
function emailTemplate(value: string) {
const subjects: { [key: string]: string } = {
support: 'Support Request',
bug: 'Bug Report',
feature: 'Feature Request',
};
const subject = encodeURIComponent(subjects[value]);
return `mailto:support@microbiomedata.org?subject=${subject}`;
}
return {
emailTemplate,
};
},
});
</script>
<template>
<v-card
elevation="24"
>
<v-toolbar
color="grey lighten-2"
dense
flat
>
We are here to help
</v-toolbar>
<v-list
subheader
>
<v-list-item
two-line
style="background-color: #eeeeee;"
class="ma-2"
href="https://microbiomedata.org/contact/"
>
<v-btn
icon
outlined
color="primary"
class="mr-4"
style="border: solid #4F3B80;"
>
<v-icon
color="primary"
>
mdi-open-in-new
</v-icon>
</v-btn>
<v-list-item-content>
<v-list-item-title
class="text-h6 primary--text"
>
Visit our support page
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
two-line
class="ma-2"
style="background-color: #eeeeee"
:href="emailTemplate('support')"
>
<v-btn
icon
outlined
color="blue"
class="mr-4"
style="border: solid;"
>
<v-icon>mdi-email</v-icon>
</v-btn>
<v-list-item-content>
<v-list-item-title
class="text-h6 blue--text"
>
Send us a message
</v-list-item-title>
<v-list-item-subtitle>
Ask us for help
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item
two-line
class="ma-2"
style="background-color: #eeeeee"
:href="emailTemplate('bug')"
>
<v-btn
icon
outlined
color="red"
class="mr-4"
style="border: solid;"
>
<v-icon>mdi-bug</v-icon>
</v-btn>
<v-list-item-content>
<v-list-item-title
class="text-h6 red--text"
>
Report an issue
</v-list-item-title>
<v-list-item-subtitle>
Let us know of any bugs
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item
two-line
class="ma-2"
style="background-color: #eeeeee"
:href="emailTemplate('feature')"
>
<v-btn
icon
outlined
color="grey darken-2"
class="mr-4"
style="border: solid;"
>
<v-icon>mdi-plus-circle</v-icon>
</v-btn>
<v-list-item-content>
<v-list-item-title
class="text-h6 grey--text text--darken-2"
>
Request a feature
</v-list-item-title>
<v-list-item-subtitle>
Suggest a new feature
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</template>
179 changes: 103 additions & 76 deletions web/src/views/SubmissionPortal/Components/SubmissionList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import OrcidId from '../../../components/Presentation/OrcidId.vue';
import TitleBanner from '@/views/SubmissionPortal/Components/TitleBanner.vue';
import IconBar from '@/views/SubmissionPortal/Components/IconBar.vue';
import IntroBlurb from '@/views/SubmissionPortal/Components/IntroBlurb.vue';
import ContactCard from '@/views/SubmissionPortal/Components/ContactCard.vue';

const headers: DataTableHeader[] = [
{
Expand Down Expand Up @@ -51,7 +52,7 @@ const headers: DataTableHeader[] = [

export default defineComponent({
components: {
IconBar, IntroBlurb, OrcidId, TitleBanner,
IconBar, IntroBlurb, OrcidId, TitleBanner, ContactCard,
},
setup() {
const router = useRouter();
Expand Down Expand Up @@ -99,81 +100,107 @@ export default defineComponent({
</script>

<template>
<v-card flat>
<v-card-text class="pt-0 px-0">
<v-container>
<v-row>
<v-col class="pb-0">
<TitleBanner />
<IconBar />
</v-col>
</v-row>
<v-row v-if="submission.data.results.count === 0">
<v-col>
<IntroBlurb />
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-text>
<v-btn
color="primary"
@click="createNewSubmission"
>
<v-icon>mdi-plus</v-icon>
Create New Submission
</v-btn>
</v-card-text>
<v-card-title class="text-h4">
Past submissions
</v-card-title>
<v-card-text>
Pick up where you left off or review a previous submission.
</v-card-text>
<v-card outlined>
<v-data-table
:headers="headers"
:items="submission.data.results.results"
:server-items-length="submission.data.results.count"
:options.sync="options"
:loading="submission.loading.value"
:items-per-page.sync="submission.data.limit"
:footer-props="{ itemsPerPageOptions: [10, 20, 50] }"
>
<template #[`item.author.name`]="{ item }">
<orcid-id
:orcid-id="item.author.orcid"
:name="item.author.name"
:width="14"
:authenticated="true"
/>
</template>
<template #[`item.metadata_submission.templates`]="{ item }">
{{ item.metadata_submission.templates.map((template) => HARMONIZER_TEMPLATES[template].displayName).join(' + ') }}
</template>
<template #[`item.created`]="{ item }">
{{ new Date(item.created).toLocaleString() }}
</template>
<template #[`item.status`]="{ item }">
<v-chip
:color="getStatus(item).color"
<div>
<v-menu
offset-x
left
>
<template #activator="{on, attrs}">
<v-btn
color="primary"
large
class="mr-0"
style="transform:translateY(-50%) rotate(-90deg); right: -50px; top: 50%; position: fixed; z-index: 100;"
v-bind="attrs"
v-on="on"
>
support
<v-icon
class="ml-2"
style="transform: rotate(90deg);"
>
{{ getStatus(item).text }}
</v-chip>
</template>
<template #[`item.action`]="{ item }">
<v-btn
small
color="primary"
@click="() => resume(item)"
>
Resume
<v-icon class="pl-1">
mdi-arrow-right-circle
</v-icon>
</v-btn>
</template>
</v-data-table>
mdi-message-question
</v-icon>
</v-btn>
</template>
<ContactCard />
</v-menu>
<v-card flat>
<v-card-text class="pt-0 px-0">
<v-container>
<v-row>
<v-col class="pb-0">
<TitleBanner />
<IconBar />
</v-col>
</v-row>
<v-row v-if="submission.data.results.count === 0">
<v-col>
<IntroBlurb />
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-text>
<v-btn
color="primary"
@click="createNewSubmission"
>
<v-icon>mdi-plus</v-icon>
Create New Submission
</v-btn>
</v-card-text>
<v-card-title class="text-h4">
Past submissions
</v-card-title>
<v-card-text>
Pick up where you left off or review a previous submission.
</v-card-text>
<v-card outlined>
<v-data-table
:headers="headers"
:items="submission.data.results.results"
:server-items-length="submission.data.results.count"
:options.sync="options"
:loading="submission.loading.value"
:items-per-page.sync="submission.data.limit"
:footer-props="{ itemsPerPageOptions: [10, 20, 50] }"
>
<template #[`item.author.name`]="{ item }">
<orcid-id
:orcid-id="item.author.orcid"
:name="item.author.name"
:width="14"
:authenticated="true"
/>
</template>
<template #[`item.metadata_submission.templates`]="{ item }">
{{ item.metadata_submission.templates.map((template) => HARMONIZER_TEMPLATES[template].displayName).join(' + ') }}
</template>
<template #[`item.created`]="{ item }">
{{ new Date(item.created).toLocaleString() }}
</template>
<template #[`item.status`]="{ item }">
<v-chip
:color="getStatus(item).color"
>
{{ getStatus(item).text }}
</v-chip>
</template>
<template #[`item.action`]="{ item }">
<v-btn
small
color="primary"
@click="() => resume(item)"
>
Resume
<v-icon class="pl-1">
mdi-arrow-right-circle
</v-icon>
</v-btn>
</template>
</v-data-table>
</v-card>
</v-card>
</v-card>
</div>
</template>
27 changes: 26 additions & 1 deletion web/src/views/SubmissionPortal/HarmonizerView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
canEditSampleMetadata,
isOwner,
} from './store';
import ContactCard from '@/views/SubmissionPortal/Components/ContactCard.vue';
import FindReplace from './Components/FindReplace.vue';
import SubmissionStepper from './Components/SubmissionStepper.vue';
import SubmissionDocsLink from './Components/SubmissionDocsLink.vue';
Expand Down Expand Up @@ -93,6 +94,7 @@ const ALWAYS_READ_ONLY_COLUMNS = [
export default defineComponent({
components: {
ContactCard,
FindReplace,
SubmissionStepper,
SubmissionDocsLink,
Expand Down Expand Up @@ -797,6 +799,29 @@ export default defineComponent({
{{ HARMONIZER_TEMPLATES[templateKey].displayName }}
</span>
</v-tooltip>
<v-spacer />
<v-menu
offset-x
left
z-index="300"
>
<template #activator="{on, attrs}">
<v-btn
color="primary"
small
class="my-2 py-4"
v-bind="attrs"
v-on="on"
>
<v-icon
class="mt-1"
>
mdi-message-question
</v-icon>
</v-btn>
</template>
<ContactCard />
</v-menu>
</v-tabs>

<div v-if="schemaLoading">
Expand Down Expand Up @@ -1131,7 +1156,7 @@ html {
.sidebar-toggle {
background: white;
z-index: 500;
z-index: 200;
position: absolute;
top: 0;
left: 0;
Expand Down
Loading
Loading