Browse Source

Attempt 1

master
Joshua Rubingh 6 months ago
parent
commit
5826c52b6d
  1. 109
      pages/researchStudies/_studyId/apps/windows-vdi/index.vue
  2. 48
      store/apps.js

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

@ -1,49 +1,44 @@ @@ -1,49 +1,44 @@
<template>
<v-card>
<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-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.title="{ item }">
{{ item.title }}
</template>
<template #item.os="{ item }">
{{ item.os }}
</template>
<template #item.memory="{ item }">
{{ item.memory }}
</template>
<template #item.disk="{ item }">
{{ item.disk }}
</template>
<template #item.actions="{ item }">
<v-radio :key="item.id" :value="item.id" />
</template>
</v-data-table>
</v-radio-group>
<ui-rug-card-title> {{ study.name }} ({{ study.code }}) </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>
<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"
>mdi-plus-circle</v-icon
>
</td>
</tr>
</tbody>
</table>
</v-card-text>
</v-card>
</template>
<script>
/* import { mapActions } from 'vuex' */
import Form from '@/lib/form'
/* import Form from '@/lib/form' */
/* TODO: Make this function system wide available in a general include ?? https://stackoverflow.com/a/55641743 */
const trim = (str, chars) => str.split(chars).filter(Boolean).join(chars)
@ -60,16 +55,32 @@ export default { @@ -60,16 +55,32 @@ export default {
studyId: studyId.toString(),
appType: appType.toString(),
}),
store.dispatch('apps/getStudyApps', {
studyId: studyId.toString(),
appType: appType.toString(),
}),
])
return {
studyId,
study: store.getters['studies/getActiveStudy'],
profiles: store.getters['apps/getAppTypeProfiles'],
apps: store.getters['apps/getStudyApps'],
versions: store.getters['apps/getAppTypeProfilesSelect'],
}
},
data({ route }) {
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,
@ -112,6 +123,7 @@ export default { @@ -112,6 +123,7 @@ export default {
this.localePath(`/researchStudies/${response.data.id}/`)
)
},
}),
search: '',
headers: [
@ -136,20 +148,19 @@ export default { @@ -136,20 +148,19 @@ export default {
value: 'actions',
},
],
*/
}
},
methods: {
navigateToRow() {},
customFilter(_, search, item) {
search = search.toString().toLowerCase()
return (
item.title.toLowerCase().includes(search) ||
item.title.toLowerCase().includes(search) ||
item.os.toLowerCase().includes(search) ||
item.memory.toString().includes(search) ||
item.disk.toString().includes(search)
)
addRow() {
if (this.test.length < this.study.contributors.length) {
this.test.push({ version: '', contributor: '' })
}
},
deleteRow(index) {
this.test.splice(index, 1)
},
/*
...mapActions(['studies/createStudy']),
*/

48
store/apps.js

@ -20,14 +20,13 @@ export const actions = { @@ -20,14 +20,13 @@ export const actions = {
}
}),
/*
getStudyApps: actionCreator({
name: 'getStudyApps',
method({ studyId, appType }) {
return this.$axios.get(`/api/v1/studies/${studyId}/app-types/${appType}/`)
},
}),
*/
getStudyApps: actionCreator({
name: 'getStudyApps',
method({ studyId, appType }) {
return this.$axios.get(`/api/v1/studies/${studyId}/app-types/${appType}/`)
},
}),
getAppTypeProfiles: actionCreator({
name: 'getAppTypeProfiles',
method(data) {
@ -64,6 +63,17 @@ export const mutations = { @@ -64,6 +63,17 @@ export const mutations = {
})
},
getStudyAppsSuccess(state, { result }) {
state.study_apps = result.map((app) => {
return {
id: app.id,
src: app.avatar,
name: app.display_name,
login: app.login_url
}
})
},
getAppTypeProfilesSuccess(state, { result }) {
state.app_profiles = result.map((profile) => {
@ -74,7 +84,15 @@ export const mutations = { @@ -74,7 +84,15 @@ export const mutations = {
disk: profile.disk,
memory: profile.memory
}
})
});
state.app_versions = result.map((profile) => {
return {
text: profile.title,
value: profile.id,
disabled: false
}
});
}
}
@ -84,16 +102,18 @@ export const getters = { @@ -84,16 +102,18 @@ export const getters = {
},
getMyStudyApps(state) {
console.log('getMyStudyApps', state.study_apps)
return state.study_apps;
},
getAppsForStudy: state => studyId => {
// studyId = parseInt(studyId, 10);
// return state.apps.filter(app => app.study.id === studyId)
return []
getStudyApps(state) {
return state.study_apps;
},
getAppTypeProfiles(state) {
return state.app_profiles;
},
getAppTypeProfilesSelect(state) {
return state.app_versions;
},
}

Loading…
Cancel
Save