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

<template>
  <v-card>
    <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' */

/* 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)

export default {
  async asyncData({ store, route }) {
    const studyId = route.params.studyId
    const appType = trim(route.path, '/').split('/').pop()

    await Promise.all([
      store.dispatch('studies/getStudy', { studyId }),
      store.dispatch({
        type: 'apps/getAppTypeProfiles',
        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,
        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: {
    addRow() {
      if (this.test.length < this.study.contributors.length) {
        this.test.push({ version: '', contributor: '' })
      }
    },
    deleteRow(index) {
      this.test.splice(index, 1)
    },

    /*
    ...mapActions(['studies/createStudy']),
    */
  },
}
</script>