Browse Source

Step 2 creating apps for contributors

master
Joshua Rubingh 5 months ago
parent
commit
46e0c49ac0
  1. 2
      components/app/list/item.vue
  2. 8
      components/contributors/list.vue
  3. 185
      pages/researchStudies/_studyId/apps/windows-vdi/index.vue
  4. 11
      store/apps.js

2
components/app/list/item.vue

@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
</div>
</v-card>
<v-card v-else>
<v-card v-else outlined class="grey lighten-1">
<v-avatar>
<v-img :src="app.src" :alt="`${app.name}`" height="100" width="100" />
</v-avatar>

8
components/contributors/list.vue

@ -59,6 +59,10 @@ @@ -59,6 +59,10 @@
{{ owner.id === item.researcher.id }}
</template>
<template #item.active="{ item }">
{{ item.active }}
</template>
<template #item.actions="{ item }">
<contributors-delete-button :contributor="item" :study-id="studyId" />
</template>
@ -119,6 +123,10 @@ export default { @@ -119,6 +123,10 @@ export default {
text: 'Owner',
value: 'isOwner',
},
{
text: 'Active',
value: 'active',
},
{
text: '',
value: 'actions',

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

@ -1,37 +1,73 @@ @@ -1,37 +1,73 @@
<template>
<v-card>
<ui-rug-card-title> {{ study.name }} ({{ study.code }}) </ui-rug-card-title>
<ui-rug-card-title>
{{ study.name }} ({{ study.code }})
<!--
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
:label="$t('form.search')"
single-line
hide-details
></v-text-field>
-->
</ui-rug-card-title>
<v-card-text class="d-flex flex-row mb-6">
<table>
<thead>
<tr>
<th>Profile</th>
<th>User</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(app, index) in test" :key="index">
<td>
<v-select :items="versions" dense></v-select>
</td>
<td>
<v-select :items="study.contributors" dense></v-select>
</td>
<v-card-text class="flex-row mb-6">
<v-data-table
multi-sort
hide-default-footer
:headers="headers"
:items="test"
:search="search"
:custom-filter="customFilter"
>
<template #item.version="{ item }">
<v-select
:items="versions"
:item-text="
(row) => {
return `${row.os} ${row.name} (${row.memory}, ${row.disk})`
}
"
:value="item.version"
dense
>
</v-select>
</template>
<template #item.contributor="{ item }">
<!-- TODO: Ad some kind of realtime filter to filter out the already selected researchers -->
<v-select
:items="active_contributors"
:item-text="
(row) => {
return `${row.researcher.display_name} (${row.researcher.email_address})`
}
"
:value="item.contributor"
dense
></v-select>
</template>
<template #item.actions="{}">
<v-icon v-if="test.length > 1" @click="deleteRow(index)"
>mdi-minus-circle</v-icon
>
</template>
<template slot="body.append">
<tr v-if="test.length < active_contributors.length">
<td colspan="2"></td>
<td>
<v-icon @click="deleteRow(index)">mdi-minus-circle</v-icon>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: right">
<v-icon @click="addRow" style="margin-right: 1rem"
<v-icon style="margin-right: 1rem" @click="addRow"
>mdi-plus-circle</v-icon
>
</td>
</tr>
</tbody>
</table>
</template>
</v-data-table>
</v-card-text>
</v-card>
</template>
@ -64,101 +100,54 @@ export default { @@ -64,101 +100,54 @@ export default {
return {
studyId,
study: store.getters['studies/getActiveStudy'],
active_contributors: store.getters[
'studies/getActiveStudy'
].contributors.filter((contributor) => {
return contributor.active
}),
profiles: store.getters['apps/getAppTypeProfiles'],
apps: store.getters['apps/getStudyApps'],
versions: store.getters['apps/getAppTypeProfilesSelect'],
versions: store.getters['apps/getAppTypeProfiles'],
test: [{ version: '', contributor: '' }],
}
},
data({ route }) {
data() {
return {
test: [],
// test2: this.apps.map((app) => {
// return {
// id: app.id,
// src: app.avatar,
// name: app.display_name,
// login: app.login_url,
// }
// }),
/*
formData: {
title: '',
studyId: null, // route.params.studyId,
profileId: null,
// TODO bespreken, is allemaal nu deel van het profile ik denk dat dit weg kan
provider: null, // [vrw, openstack]
operating_systemId: null,
base_memory_type: null,
base_storage_type: null,
},
form: new Form({
vm: this,
action: this['studies/createStudy'],
schema: {
type: 'object',
properties: {
profileId: {
type: 'integer',
},
description: {
type: 'string',
maxLength: 2048,
},
code: {
type: 'string',
maxLength: 50,
},
human_subject: {
type: 'boolean',
},
field: {
type: 'integer',
},
},
required: ['profileId', 'code', 'field'],
},
onResponse(response) {
this.vm.$router.push(
this.localePath(`/researchStudies/${response.data.id}/`)
)
},
}),
search: '',
headers: [
{
text: 'Name',
value: 'name',
text: 'Version',
value: 'version',
},
{
text: 'Operating System',
value: 'os',
text: 'Contributor',
value: 'contributor',
},
{
text: 'RAM',
value: 'ram',
},
{
text: 'Storage',
value: 'storage',
},
{
text: 'Kies configuratie',
text: 'Action',
value: 'actions',
},
],
*/
}
},
methods: {
customFilter(_, search, item) {
search = search.toString().toLowerCase()
// TODO: Not able to search based on the selected values... need to figure this out...
return (
item.version.toLowerCase().includes(search) ||
item.contributor.toLowerCase().includes(search)
)
},
addRow() {
if (this.test.length < this.study.contributors.length) {
if (this.test.length < this.active_contributors.length) {
this.test.push({ version: '', contributor: '' })
}
},
deleteRow(index) {
this.test.splice(index, 1)
if (this.test.length > 1) {
this.test.splice(index, 1)
}
},
/*

11
store/apps.js

@ -85,14 +85,6 @@ export const mutations = { @@ -85,14 +85,6 @@ export const mutations = {
memory: profile.memory
}
});
state.app_versions = result.map((profile) => {
return {
text: profile.title,
value: profile.id,
disabled: false
}
});
}
}
@ -113,7 +105,4 @@ export const getters = { @@ -113,7 +105,4 @@ export const getters = {
return state.app_profiles;
},
getAppTypeProfilesSelect(state) {
return state.app_versions;
},
}

Loading…
Cancel
Save