Attempt 1

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

@@ -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 {
         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 {
             this.localePath(`/researchStudies/${response.data.id}/`)
           )
         },
+
       }),
       search: '',
       headers: [
@@ -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']),
     */

store/apps.js

@@ -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 = {
     })
   },
 
+  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 = {
         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 = {
   },
 
   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;
+  },
 }