Browse Source

Bunch of gui updates

master
Joshua Rubingh 5 months ago
parent
commit
05b183c835
  1. 2
      .gitignore
  2. 2
      .nvmrc
  3. 45
      components/contributor/list/item.vue
  4. 42
      locales/en.js
  5. 8
      pages/researchStudies/_studyId/apps/index.vue
  6. 207
      pages/researchStudies/_studyId/apps/windows-vdi/create.vue
  7. 9
      pages/researchStudies/_studyId/apps/windows-vdi/index.vue
  8. 65
      pages/researchStudies/_studyId/contributors/_contributorId/detail.vue
  9. 29
      pages/researchStudies/_studyId/contributors/index.vue
  10. 119
      pages/researchStudies/_studyId/index.vue
  11. 3
      store/apps.js
  12. 4
      store/studies.js

2
.gitignore vendored

@ -89,3 +89,5 @@ sw.* @@ -89,3 +89,5 @@ sw.*
# Vim swap files
*.swp
.vscode/launch.json
.vscode/settings.json
.vscode/extensions.json

2
.nvmrc

@ -1 +1 @@ @@ -1 +1 @@
16.9.1
16

45
components/contributor/list/item.vue

@ -2,12 +2,8 @@ @@ -2,12 +2,8 @@
<v-list-item
class="px-2"
link
:to="
localePath(
`/researchStudies/${studyId}/contributors/${contributor.id}/detail`
)
"
>
:to="localePath(`/researchStudies/${studyId}/contributors/${contributor.id}/detail`)"
>
<v-list-item-avatar>
<v-img
:src="contributor.researcher.avatar || require('~/assets/avatar.png')"
@ -21,39 +17,8 @@ @@ -21,39 +17,8 @@
contributor.researcher.email_address
}}</v-list-item-subtitle>
<v-list-item-subtitle
>{{
$t(
'page.researchStudies.studyId.contributors.index.table.heading.faculty'
)
}}:
<span v-if="contributor.researcher.faculty">
{{ contributor.researcher.faculty.name }}
</span>
<span v-else>
{{
$t(
'page.researchStudies.studyId.contributors.index.table.no_faculty'
)
}}
</span>
</v-list-item-subtitle>
<v-list-item-subtitle>
{{
$t(
'page.researchStudies.studyId.contributors.index.table.heading.role'
)
}}: {{ contributor.role
}}<span v-if="contributor.isOwner"
>,
{{
$t(
'page.researchStudies.studyId.contributors.index.table.heading.owner'
)
}}</span
>
{{ $t('page.researchStudies.studyId.contributors.index.table.heading.role' ) }}: {{ (contributor.researcher.id === ownerId ? $t('page.researchStudies.studyId.contributors.index.table.heading.owner' ) : contributor.role) }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
@ -66,6 +31,10 @@ export default { @@ -66,6 +31,10 @@ export default {
type: [String, Number],
default: '',
},
ownerId: {
type: [String, Number],
default: '',
},
contributor: {
type: Object,
default: () => ({

42
locales/en.js

@ -21,13 +21,32 @@ export default { @@ -21,13 +21,32 @@ export default {
},
studyId: {
index: {
title: 'Study detail: {study_name}',
title: 'Study {study_name}',
created: 'Created',
lastUpdated: 'Last update',
access: {
title: 'Study access',
restricted: 'restricted',
public: 'public'
},
studyField: {
title: 'Study field'
},
contributors: {
title: 'Contributors'
},
},
apps: {
header: 'Available applications',
index: {
title: 'Apps for study {study_name}',
delete_modal: {
title: 'Delete app',
text: 'Are you sure you want to remove the {app_name} app for researcher {researcher_name}?',
ok: 'Yes',
cancel: 'No'
}
}
},
contributors: {
index: {
@ -74,6 +93,9 @@ export default { @@ -74,6 +93,9 @@ export default {
}
},
},
overview : {
header: 'Overview'
},
settings: {
title: 'Study settings',
button: 'Delete study',
@ -83,17 +105,6 @@ export default { @@ -83,17 +105,6 @@ export default {
ok: 'Yes',
cancel: 'No'
},
},
apps: {
index: {
title: 'Apps for study {study_name}',
delete_modal: {
title: 'Delete app',
text: 'Are you sure you want to remove the {app_name} app for researcher {researcher_name}?',
ok: 'Yes',
cancel: 'No'
}
}
}
}
},
@ -182,6 +193,9 @@ export default { @@ -182,6 +193,9 @@ export default {
role: {
label: 'Role'
},
active: {
label: 'Active'
},
},
apps: {
header: 'Create a new app',
@ -195,4 +209,4 @@ export default { @@ -195,4 +209,4 @@ export default {
},
'ui.rug.form.action.save': 'Save',
'ui.rug.form.action.cancel': 'Cancel',
}
}

8
pages/researchStudies/_studyId/apps/index.vue

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
<template>
<v-card>
<ui-rug-card-title> {{ study.name }} ({{ study.code }}) </ui-rug-card-title>
<ui-rug-card-title> {{ $t('page.researchStudies.studyId.index.title', {study_name: `${study.name} (${study.code})`}) }} </ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6">
<apps-list :apps="apps" :study-id="studyId" />
@ -26,10 +26,8 @@ export default { @@ -26,10 +26,8 @@ export default {
head() {
const $t = this.$t.bind(this)
return {
title: $t('page.researchStudies.studyId.apps.title', {
study_name: this.study.name,
}),
title: $t('page.researchStudies.studyId.index.title', {study_name: `${this.study.name} (${this.study.code})`}) ,
}
},
}
</script>
</script>

207
pages/researchStudies/_studyId/apps/windows-vdi/create.vue

@ -1,207 +0,0 @@ @@ -1,207 +0,0 @@
<template>
<v-card>
<v-card-title>
Virtual machines
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
/>
</v-card-title>
<v-radio-group v-model="formData.profileId">
<v-data-table
multi-sort
hide-default-footer
:headers="headers"
:items="profiles"
:search="search"
:custom-filter="customFilter"
@click:row="navigateToRow"
>
<template #item.name="{ item }">
{{item.name}}
</template>
<template #item.os="{ item }">
{{item.os.name}}
</template>
<template #item.ram="{ item }">
{{item.memory_amount}} x {{item.memory_type.name}}
</template>
<template #item.storage="{ item }">
{{item.storage_amount}} x {{item.storage_type.name}}
</template>
<template #item.actions="{ item }">
<v-radio
:key="item.id"
:value="item.id"
/>
</template>
</v-data-table>
</v-radio-group>
<v-autocomplete
v-model="formData.contributorId"
:items="study.contributors"
filled
chips
label="Kies researcher"
item-text="name"
item-value="id"
>
<template #selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
@click="data.select"
@click:close="remove(data.item)"
>
<v-avatar left>
<v-img :src="data.item.avatar"></v-img>
</v-avatar>
{{ data.item.name }}
</v-chip>
</template>
</v-autocomplete>
<v-autocomplete
v-model="friends"
:disabled="isUpdating"
:items="people"
filled
chips
color="blue-grey lighten-2"
label="Select"
item-text="name"
item-value="name"
multiple
>
<template #selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
@click="data.select"
@click:close="remove(data.item)"
>
<v-avatar left>
<v-img :src="data.item.avatar"></v-img>
</v-avatar>
{{ data.item.name }}
</v-chip>
</template>
<template #item="data">
<template v-if="typeof data.item !== 'object'">
<v-list-item-content v-text="data.item"></v-list-item-content>
</template>
<template v-else>
<v-list-item-avatar>
<img :src="data.item.avatar">
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{data.item.name}}></v-list-item-title>
<v-list-item-subtitle>{{data.item.group}}</v-list-item-subtitle>
</v-list-item-content>
</template>
</template>
</v-autocomplete>
contributorId
CREATE FORM
kies profile
kies contributor
</v-card>
</template>
<script>
import { mapActions } from 'vuex';
import Form from '@/lib/form';
export default {
async asyncData({ store, route }) {
const studyId = route.params.studyId;
await Promise.all([
// TODO vm?
store.dispatch('virtualmachines/getProfiles'),
store.dispatch('study/getStudy', {studyId}),
])
return {
studyId,
// TODO vm?
profiles: store.getters['virtualmachines/getProfiles'],
study: store.getters['study/getActiveStudy'],
}
},
data ({ $route }) {
return {
formData: {
studyId: $route.params.studyId,
profileId: null,
contributorId: null,
},
form: new Form({
vm: this,
// TODO changeme
action: this['studies/createStudy'],
schema: {
type: 'object',
properties: {
profileId: {
type: 'integer',
},
studyId: {
type: 'integer',
},
contributorId: {
type: 'integer',
},
},
required: ['profileId', 'studyId', 'contributorId', ],
},
onResponse() {
this.vm.$router.push(this.localePath(`/researchStudies/${$route.params.studyId}/apps/windows-vdi/`))
}
}),
search: '',
headers: [
{
text: 'Name',
value: 'name',
},
{
text: 'RAM',
value: 'ram'
},
{
text: 'Storage',
value: 'storage'
},
{
text: 'Kies configuratie',
value: 'actions'
}
],
}
},
methods: {
navigateToRow() {},
customFilter(_, search, item) {
search = search.toString().toLowerCase();
return (
item.name.toLowerCase().includes(search)
|| item.name.toLowerCase().includes(search)
|| item.os.name.toLowerCase().includes(search)
|| item.memory_amount.toString().includes(search)
|| item.storage_amount.toString().includes(search)
)
},
...mapActions(['studies/createStudy']),
}
}
</script>

9
pages/researchStudies/_studyId/apps/windows-vdi/index.vue

@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
<v-container>
<ui-rug-card-form :form="form">
<ui-rug-card-title>
{{ study.name }} ({{ study.code }})
{{ $t('page.researchStudies.studyId.index.title', {study_name: `${study.name} (${study.code})`}) }}
<!--
<v-spacer></v-spacer>
<v-text-field
@ -181,9 +181,7 @@ export default { @@ -181,9 +181,7 @@ export default {
head() {
const $t = this.$t.bind(this)
return {
title: $t('page.researchStudies.studyId.apps.index.title', {
study_name: this.study.name,
}),
title: $t('page.researchStudies.studyId.index.title', {study_name: `${this.study.name} (${this.study.code})`})
}
},
methods: {
@ -195,8 +193,7 @@ export default { @@ -195,8 +193,7 @@ export default {
item.contributor.toLowerCase().includes(search)
)
},
...mapActions(['apps/createNewStudyApp']),
},
}
</script>
</script>

65
pages/researchStudies/_studyId/contributors/_contributorId/detail.vue

@ -1,64 +1,42 @@ @@ -1,64 +1,42 @@
<template>
<v-card>
<ui-rug-card-title>
{{
$t(
'page.researchStudies.studyId.contributors.contributorId.detail.title'
)
}}
{{ contributor.researcher.display_name }}
{{ $t('page.researchStudies.studyId.index.title', {study_name: `${study.name} (${study.code})`}) }}
</ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6">
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>
{{ $t('form.researchStudy.studyName.label') }}
</td>
<td>{{ study.name }}</td>
<td rowspan="7">
<td class="pt-2">{{ $t('form.profile.firstName.label').toUpperCase() }}</td>
<td class="pt-2">{{ contributor.researcher.first_name }}</td>
<td class="pt-2" rowspan="7">
<v-avatar size="200">
<v-img
:src="
contributor.researcher.avatar ||
require('~/assets/avatar.png')
"
></v-img>
<v-img :src="contributor.researcher.avatar || require('~/assets/avatar.png')"></v-img>
</v-avatar>
</td>
</tr>
<tr>
<td>
{{ $t('form.profile.firstName.label') }}
<h4>Available apps</h4>
DEZE DATA IS NIET AANWEZIG OP DE API!!!
</td>
<td>{{ contributor.researcher.first_name }}</td>
</tr>
<tr>
<td>
{{ $t('form.profile.lastName.label') }}
<td class="pt-2">
{{ $t('form.profile.lastName.label').toUpperCase() }}
</td>
<td>{{ contributor.researcher.last_name }}</td>
<td class="pt-2">{{ contributor.researcher.last_name }}</td>
</tr>
<tr>
<td>
{{ $t('form.contributorInvite.email_address.label') }}
<td class="pt-2">
{{ $t('form.contributorInvite.email_address.label').toUpperCase() }}
</td>
<td>{{ contributor.researcher.email_address }}</td>
<td class="pt-2">{{ contributor.researcher.email_address }}</td>
</tr>
<tr>
<td>
{{ $t('form.profile.university.label') }}
<td class="pt-2">
{{ $t('form.profile.university.label').toUpperCase() }}
</td>
<td>
<td class="pt-2">
{{
contributor.researcher.university
? contributor.researcher.university.name
@ -69,7 +47,7 @@ @@ -69,7 +47,7 @@
<tr>
<td>
{{ $t('form.profile.faculty.label') }}
{{ $t('form.profile.faculty.label').toUpperCase() }}
</td>
<td>
{{
@ -82,10 +60,17 @@ @@ -82,10 +60,17 @@
<tr>
<td>
{{ $t('form.contributorInvite.role.label') }}
{{ $t('form.contributorInvite.role.label').toUpperCase() }}
</td>
<td>{{ contributor.role }}</td>
</tr>
<tr>
<td>
{{ $t('form.contributorInvite.active.label').toUpperCase() }}
</td>
<td>{{ contributor.active }}</td>
</tr>
</table>
</v-card-text>
<contributor-edit-button

29
pages/researchStudies/_studyId/contributors/index.vue

@ -1,13 +1,24 @@ @@ -1,13 +1,24 @@
<template>
<div>
<contributors-list
:contributors="study.contributors"
:owner="study.owner"
:study-id="study.id"
:is-admin="studyAdmin"
/>
<contributors-invite-button v-if="studyAdmin" :study-id="study.id" />
</div>
<v-card>
<ui-rug-card-title>
{{ $t('page.researchStudies.studyId.index.title', {study_name: `${study.name} (${study.code})`}) }}
</ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6 mt-6" style="width: 100%">
<div style="width: 100%">
<contributors-list
:contributors="study.contributors"
:owner="study.owner"
:study-id="study.id"
:is-admin="studyAdmin"
/>
<contributors-invite-button v-if="studyAdmin" :study-id="study.id" />
</div>
</v-card-text>
</v-card>
</template>
<script>

119
pages/researchStudies/_studyId/index.vue

@ -1,65 +1,68 @@ @@ -1,65 +1,68 @@
<template>
<v-card>
<ui-rug-card-title> {{ study.name }} ({{ study.code }}) </ui-rug-card-title>
<ui-rug-card-title>
{{ $t('page.researchStudies.studyId.index.title', {study_name: `${study.name} (${study.code})`}) }}
</ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6">
<v-list v-for="app in apps" :key="app.id">
<app-list-item :app="app" :study-id="studyId" />
</v-list>
<v-container fluid>
<v-row dense class="mt-2">
<v-card class="col-9">
<ui-rug-card-title>{{ $t('page.researchStudies.studyId.apps.header') }}</ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6">
<v-list v-for="app in apps" :key="app.id">
<app-list-item :app="app" :study-id="studyId" />
</v-list>
</v-card-text>
</v-card>
<v-list
v-for="contributor in study.contributors"
:key="contributor.researcher.id"
>
<contributor-list-item :contributor="contributor" :study-id="studyId" />
</v-list>
<v-card class="col-3">
<v-card-title> {{ study.name }} ({{ study.code }}) </v-card-title>
<v-card-subtitle>
{{ study.description }}
</v-card-subtitle>
<v-card-text>
{{ $t('page.researchStudies.studyId.index.access.title') }}:
<span v-if="study.human_subject" class="warning--text">{{
$t('page.researchStudies.studyId.index.access.restricted')
}}</span>
<span v-else>{{
$t('page.researchStudies.studyId.index.access.public')
}}</span>
<br />
{{ $t('form.researchStudy.studyField.label') }}:
{{ study.field.name }}
<br />
{{ $t('form.profile.faculty.label') }}:
<span v-if="study.field.faculty">
{{ study.field.faculty.name }}
</span>
<span v-else class="text--lighten-10">
{{
$t('page.researchStudies.studyId.contributors.table.no_faculty')
}}
</span>
<br />
{{ $t('form.profile.university.label') }}:
<span v-if="study.field.faculty">
{{ study.field.faculty.university.name }}
</span>
<span v-else class="text--lighten-10">
{{
$t(
'page.researchStudies.studyId.contributors.table.no_university'
)
}}
</span>
<br />
{{ $t('form.researchStudy.created_at') }}:
{{ $d(new Date(study.created_at), 'long') }}
<br />
{{ $t('form.researchStudy.updated_at') }}:
{{ $d(new Date(study.updated_at), 'long') }}
</v-card-text>
</v-card>
<v-card class="col-3">
<ui-rug-card-title>{{ $t('page.researchStudies.studyId.overview.header') }}</ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6">
<table>
<tr>
<td class="pt-2">{{ $t('page.researchStudies.studyId.index.access.title').toUpperCase() }}</td>
</tr>
<tr>
<td :class="study.human_subject ? 'warning--text' : 'success--text'">
{{ $t(`page.researchStudies.studyId.index.access.${(study.human_subject ? 'restricted' : 'public')}`) }}</td>
</tr>
<tr>
<td class="pt-2">{{ $t('page.researchStudies.studyId.index.studyField.title').toUpperCase() }}</td>
</tr>
<tr>
<td>{{ study.field.name }}</td>
</tr>
<tr>
<td class="pt-2">{{ $t('page.researchStudies.studyId.index.contributors.title').toUpperCase() }}</td>
</tr>
<tr>
<td>
<v-list
v-for="contributor in study.contributors"
:key="contributor.researcher.id"
>
<contributor-list-item :contributor="contributor" :study-id="studyId" :owner-id="study.owner.id" />
</v-list>
</td>
</tr>
<tr>
<td class="pt-2">{{ $t('page.researchStudies.studyId.index.created').toUpperCase() }}</td>
</tr>
<tr>
<td>{{ $d(new Date(study.created_at), 'long') }}</td>
</tr>
<tr>
<td class="pt-2">{{ $t('page.researchStudies.studyId.index.lastUpdated').toUpperCase() }}</td>
</tr>
<tr>
<td>{{ $d(new Date(study.updated_at), 'long') }}</td>
</tr>
</table>
</v-card-text>
</v-card>
</v-row>
</v-container>
</v-card-text>
</v-card>
</template>
@ -83,7 +86,7 @@ export default { @@ -83,7 +86,7 @@ export default {
const $t = this.$t.bind(this)
return {
title: $t('page.researchStudies.studyId.index.title', {
study_name: this.study.name,
study_name: `${this.study.name} (${this.study.code})`,
}),
}
},

3
store/apps.js

@ -64,6 +64,9 @@ export const mutations = { @@ -64,6 +64,9 @@ export const mutations = {
available: app.has_apps > 0,
slug: app.slug
}
}).sort((a, b) => {
// Sort based on available == true first
return b.available - a.available
})
},

4
store/studies.js

@ -121,11 +121,11 @@ export const mutations = { @@ -121,11 +121,11 @@ export const mutations = {
},
detailContributorSuccess(state, { result }) {
console.log('detailContributorSuccess result', result)
// console.log('detailContributorSuccess result', result)
state.activeContributor = result;
},
joinContributorSuccess(state, { result }) {
console.log('Join result', result)
// console.log('Join result', result)
state.join = result;
}
}

Loading…
Cancel
Save