Step 2 creating apps for contributors

components/app/list/item.vue

@@ -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>

components/contributors/list.vue

@@ -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 {
           text: 'Owner',
           value: 'isOwner',
         },
+        {
+          text: 'Active',
+          value: 'active',
+        },
         {
           text: '',
           value: 'actions',

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

@@ -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 {
     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)
+      }
     },
 
     /*

store/apps.js

@@ -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 = {
     return state.app_profiles;
   },
 
-  getAppTypeProfilesSelect(state) {
-    return state.app_versions;
-  },
 }