Skip to content
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

Jump to bottom

#285 User Datasets #286

Closed
wants to merge 3 commits into from
Closed

#285 User Datasets #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
670c65e
#285: Dataset page and user dataset page
aswallace Dec 8, 2022
ccf56c6
Fix linting errors
aswallace Dec 8, 2022
bf3f860
#285: Add unit tests
aswallace Dec 8, 2022
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
13 changes: 13 additions & 0 deletions app/src/assets/css/base/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,19 @@
grid-gap: 1rem;
cursor: pointer;
}
&-datasets {
display: grid;
grid-template-columns: repeat(4, 1fr);
@include respond(laptop) {
grid-template-columns: repeat(3, 1fr);
}
@include respond(tab-land) {
grid-template-columns: repeat(2, 1fr);
}
@include respond(phone) {
grid-template-columns: repeat(1, 1fr);
}
}
}

&_gap {
Expand Down
65 changes: 65 additions & 0 deletions app/src/assets/css/modules/_pages.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,71 @@
padding: 0 7rem;
display: flex;
flex-direction: column;
&-actions {
&_lg {
@include respond(tab-land) {
visibility: hidden;
display: none;
}
}
&_sm {
visibility: hidden;
display: none;
@include respond(tab-land) {
visibility: visible;
display: block;
}
}
}

&-grid {
.md-card {
.md-title {
@include respond(phone) {
font-size: 20px;
}
}
margin: 1.5rem;
padding-bottom: 1rem;
&-content {
overflow: auto;
}
};
&-icons {
max-width: 100%;
max-height: 28rem;
overflow: auto;
.md-button {
height: 10rem;
max-width: 10rem !important;
.label {
font-size: 9px;
color: $primary;
}
@include respond(phone){
.md-ripple {
justify-content: left;
}
height: 6rem;
max-width: 100% !important;
width: 40rem !important;
.label {
font-size: 14px;
top: 2.8rem;
left: 10rem;
position: absolute;
}
.md-icon {
font-size: 7rem !important;
width: 7rem;
height: 7rem;
min-width: 7rem;
max-height: 7rem;
}
}
}
}
}
}

.image-detail-page {
Expand Down
11 changes: 10 additions & 1 deletion app/src/assets/css/modules/_visualize.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,18 @@

@include respond(phone){
font-size: 2.8rem;
margin-bottom: 1rem;
margin: 1rem 0 1rem 0;
}
}
&-h2 {
font-size: 3.4rem;
font-weight: 300;
line-height: 1.2;
background-image: linear-gradient(to right bottom, $primary, rgba($primary-light, 0.4));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
&_accordion {
margin-bottom: 6rem;
Expand Down
75 changes: 75 additions & 0 deletions app/src/modules/gql/dataset-gql.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import gql from 'graphql-tag'

export const VERIFY_AUTH_QUERY = gql`
query verifyAuth {
verifyUser {
isAuth
user {
id
username
}
}
}`

export const USER_DATASETS_QUERY = gql`
query GetUserDataset($input: datasetStatusInput) {
getUserDataset(input: $input) {
totalItems
pageSize
pageNumber
totalPages
hasNextPage
hasPreviousPage
datasets {
datasetGroupId
status
title
filesetInfo {
filesetName
files {
id
filename
contentType
}
}
createdAt
updatedAt
}
}
}
`

export const USER_DATASET_IDS_QUERY = gql`
query userDatasetIds($input: datasetStatusInput) {
getUserDataset(input: $input) {
datasets {
datasetGroupId
updatedAt
title
}
}
}
`

export const FILESET_QUERY = gql`
query getFilesets($input: filesetQueryInput!) {
getFilesets(input: $input) {
... on FilesetsGroup {
totalItems
filesets {
files {
id
filename
contentType
}
filesetName
}
pageSize
pageNumber
totalPages
hasPreviousPage
hasNextPage
}
}
}
`
3 changes: 3 additions & 0 deletions app/src/pages/explorer/curate/CurateBase.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<router-view />
</template>
118 changes: 118 additions & 0 deletions app/src/pages/explorer/curate/edit/Dataset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<template>
<div>
<div>
<div v-if="!verifyUser.isAuth">
</div>
<div v-else>

<div class="section_loader u--margin-toplg" v-if="$apollo.loading">
<spinner :loading="$apollo.loading" text='Loading Dataset Info'/>
</div>

<div v-else>
<div class="curate">
<div class="md-layout md-gutter md-alignment-left-bottom" style="margin: 1rem 0rem;">
<div class="md-layout-item md-size-70 md-medium-size-100" style="display:block; height:100%">
<h2 class="visualize_header-h2">Dataset Group ID: {{this.id}}</h2>
</div>
<div class="md-layout-item md-size-15 curate-actions_lg">
<md-button class="md-button-lightbg" @click="goToEdit">+ Create new fileset </md-button>
</div>
<div class="md-layout-item md-size-15 curate-actions_lg">
<md-button class="md-button-lightbg">+ Edit metadata </md-button>
</div>
</div>
<hr>
<div class="curate-actions_sm" >
<md-button class="md-button-lightbg" @click="goToEdit">+ Create new fileset </md-button>
<md-button class="md-button-lightbg">+ Edit metadata </md-button>
</div>
<h2 style="margin-top:2rem;margin-bottom:2rem">Metadata</h2>
<h2 style="margin-top:2rem;margin-bottom:2rem">Filesets</h2>
</div>
<div class="utility-roverflow">
<div class="grid_explorer-datasets curate-grid">
<md-card
v-for="(fileset, index) in getFilesets.filesets"
:key="index"
class="btn--animated"
>
<md-card-header>
<router-link :to="{ name: 'FilesetSingleView', params: { filesetId: fileset.filesetName}}">
<div class="md-title"><a>{{fileset.filesetName}}</a></div>
</router-link>
</md-card-header>
<md-card-content class="grid grid_col-3 curate-grid-icons">
<div v-for="(file, index) in fileset.files" :key="index" >
<router-link :to="{ name: 'FileSingleView', params: { filesetId: fileset.filesetName, file: file.filename}}">
<md-button>
<md-icon class="md-size-3x" >insert_drive_file</md-icon>
<div class="label">{{file.filename}}</div>
</md-button>
</router-link>
</div>
</md-card-content>
</md-card>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import Spinner from '@/components/Spinner'
import { VERIFY_AUTH_QUERY, FILESET_QUERY } from '@/modules/gql/dataset-gql'
export default {
name: 'CurateHome',
components: {
Spinner
},
props: {
id: {
type: String
}
},
data () {
return {
radio: false,
verifyUser: {},
getFilesets: {},
navRoutes: [
{
label: 'Curate',
path: '/explorer/curate'
},
{
label: 'Select Dataset',
path: '/explorer/curate/edit'
}
]
}
},
methods: {
navBack () {
this.$router.back()
},
goToEdit () {
this.$router.push({ name: 'CurateSpreadsheet', params: { datasetId: this.id } })
}
},
apollo: {
verifyUser: {
query: VERIFY_AUTH_QUERY,
fetchPolicy: 'cache-and-network'
},
getFilesets: {
query: FILESET_QUERY,
variables () {
return {
input: { datasetId: `${this.id}` }
}
},
fetchPolicy: 'cache-and-network'
}
}
}
</script>
Loading