15 changed files with 371 additions and 212 deletions
|
After Width: | Height: | Size: 8.4 KiB |
@ -1,172 +0,0 @@
@@ -1,172 +0,0 @@
|
||||
<template> |
||||
<v-card> |
||||
<v-card-title> |
||||
Virtual machines |
||||
<v-spacer></v-spacer> |
||||
<!-- <v-data-table |
||||
multi-sort |
||||
hide-default-footer |
||||
:headers="headers" |
||||
:items="profiles" |
||||
:search="search" |
||||
:custom-filter="customFilter" |
||||
@click:row="navigateToRow" |
||||
/> --> |
||||
<!-- <windows-vdi-edit-button :studyId="studyId" :virtualMachineId="item.id" /> |
||||
<windows-vdi-delete-button :virtualMachineId="item.id" /> --> |
||||
|
||||
|
||||
data-table: current vm's (name, os, ram, storage, researcher) |
||||
edit button |
||||
add vm page in edit modus |
||||
delete button |
||||
delete action => re-render |
||||
button: add vm |
||||
page: |
||||
pick-profile-input: |
||||
data-table: vm profiles choice |
||||
returns profile-id |
||||
dropdown: researcher |
||||
button: create workspace |
||||
|
||||
<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-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions } from 'vuex'; |
||||
import Form from '@/lib/form'; |
||||
|
||||
export default { |
||||
async asyncData({ store, route }) { |
||||
const studyId = route.params.studyId; |
||||
await store.dispatch('virtualmachines/getProfiles'); |
||||
return { |
||||
studyId, |
||||
profiles: store.getters['virtualmachines/getProfiles'], |
||||
} |
||||
}, |
||||
data ({ route }) { |
||||
return { |
||||
formData: { |
||||
name: '', |
||||
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: 'Operating System', |
||||
value: 'os', |
||||
}, |
||||
{ |
||||
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> |
||||
@ -0,0 +1,153 @@
@@ -0,0 +1,153 @@
|
||||
<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.title }} |
||||
</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> |
||||
</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([ |
||||
store.dispatch('studies/getStudy', { studyId }), |
||||
store.dispatch({ |
||||
type: 'apps/getAppTypeProfiles', |
||||
studyId: studyId.toString(), |
||||
appType: 'windows10-vdi', |
||||
}), |
||||
]) |
||||
|
||||
return { |
||||
studyId, |
||||
study: store.getters['studies/getActiveStudy'], |
||||
profiles: store.getters['apps/getAppTypeProfiles'], |
||||
} |
||||
}, |
||||
data({ route }) { |
||||
return { |
||||
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: 'Operating System', |
||||
value: 'os', |
||||
}, |
||||
{ |
||||
text: 'RAM', |
||||
value: 'ram', |
||||
}, |
||||
{ |
||||
text: 'Storage', |
||||
value: 'storage', |
||||
}, |
||||
{ |
||||
text: 'Kies configuratie', |
||||
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) |
||||
) |
||||
}, |
||||
/* |
||||
...mapActions(['studies/createStudy']), |
||||
*/ |
||||
}, |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue