#122: list user's workspaces under each case

frontend/src/components/CasesContainer.vue

@@ -100,15 +100,13 @@
     </div>
     <b-card>
       <b-table :items="caseItems" :fields="caseFields">
+        <template #cell(title)="data">
+          <span class="text-break">{{ data.value }}</span>
+          <div class="text-muted">
+            <small>{{ data.item.description }}</small>
+          </div>
+        </template>
         <template #cell(actions)="data">
-          <b-link
-            class="btn btn-primary"
-            role="button"
-            :href="`/maptool/build?case=${data.item.id}`"
-          >
-            <i class="fa fa-map" aria-hidden="true"></i>
-            Use</b-link
-          >
           <b-button
             variant="secondary"
             :to="{ name: 'case', params: { id: data.item.id } }"
@@ -135,16 +133,44 @@
             Claim
           </b-button>
         </template>
+        <template #row-details="row">
+          <b-card
+            class="my-workspaces-card"
+            title="My Workspaces"
+            title-tag="h6"
+            v-if="getWorkspacesForCase(row.item).length > 0"
+          >
+            <my-workspaces :workspaces="getWorkspacesForCase(row.item)" />
+            <b-button
+              @click="newWorkspace(row.item)"
+              variant="primary"
+              :title="`Create new workspace using the ${row.item.title} case`"
+            >
+              <i class="fa fa-map" aria-hidden="true"></i>
+              New Workspace</b-button
+            >
+          </b-card>
+          <b-button
+            v-else
+            @click="newWorkspace(row.item)"
+            variant="primary"
+            :title="`Create new workspace using the ${row.item.title} case`"
+          >
+            <i class="fa fa-map" aria-hidden="true"></i>
+            Create New Workspace</b-button
+          >
+        </template>
       </b-table>
     </b-card>
   </div>
 </template>
 
 <script>
 import DatasetTypeBadge from "./DatasetTypeBadge.vue";
-const { utils } = AiravataAPI;
+import MyWorkspaces from "./MyWorkspaces.vue";
+const { session, utils } = AiravataAPI;
 export default {
-  components: { DatasetTypeBadge },
+  components: { DatasetTypeBadge, MyWorkspaces },
   name: "cases-container",
   props: {
     projectId: {
@@ -158,6 +184,7 @@ export default {
       deletedDatasets: null,
       cases: null,
       showDeletedDatasets: false,
+      userWorkspaces: null,
     };
   },
   created() {
@@ -185,6 +212,13 @@ export default {
       ).then((cases) => {
         this.cases = cases;
       });
+      utils.FetchUtils.get(
+        `/maptool/api/workspaces/?project=${encodeURIComponent(
+          this.projectId
+        )}&owner=${encodeURIComponent(session.Session.username)}`
+      ).then((workspaces) => {
+        this.userWorkspaces = workspaces;
+      });
     },
     claimCase(caseId) {
       utils.FetchUtils.post(
@@ -196,6 +230,32 @@ export default {
       const url = `/maptool/api/datasets/${datasetId}/undelete/`;
       utils.FetchUtils.put(url, {}).then(this.fetchData);
     },
+    getWorkspacesForCase(aCase) {
+      if (this.userWorkspaces) {
+        return this.userWorkspaces.filter((w) => w.case === aCase.id);
+      } else {
+        return [];
+      }
+    },
+    newWorkspace(aCase) {
+      const workspace = {
+        name: `Workspace for ${aCase.title}, ${new Date().toLocaleString(
+          "en-US",
+          {
+            dateStyle: "short",
+            timeStyle: "short",
+          }
+        )}`,
+        description: "",
+        case: aCase.id,
+        scenarios: [],
+      };
+      utils.FetchUtils.post("/maptool/api/workspaces/", workspace).then(
+        (ws) => {
+          window.location = `/maptool/build?workspace=${ws.id}`;
+        }
+      );
+    },
   },
   computed: {
     datasetFields() {
@@ -215,7 +275,7 @@ export default {
       }
     },
     caseFields() {
-      return ["title", "description", "owner", "actions"];
+      return ["title", "owner", "actions"];
     },
     caseItems() {
       if (!this.cases) {
@@ -230,6 +290,7 @@ export default {
             userHasWriteAccess: aCase.userHasWriteAccess,
             userIsProjectOwner: aCase.userIsProjectOwner,
             actions: null,
+            _showDetails: true,
           };
         });
       }
@@ -241,4 +302,8 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+.my-workspaces-card {
+  margin-bottom: 0px;
+}
+</style>

frontend/src/components/MyWorkspaces.vue

@@ -0,0 +1,41 @@
+<template>
+  <b-table :items="workspaces" :fields="fields" sort-by="updated" :sort-desc="true" small borderless>
+    <template #cell(name)="data">
+      <b-link :href="`/maptool/build?workspace=${data.item.id}`">{{
+        data.value
+      }}</b-link>
+    </template>
+    <template #cell(updated)="data">
+      {{
+        new Date(data.value).toLocaleString("en-US", {
+          dateStyle: "short",
+          timeStyle: "short",
+        })
+      }}
+    </template>
+    <template #cell(scenarios)="data">
+      {{ data.value.length }}
+    </template>
+    <template #cell(experiments)="data">
+      {{
+        data.item.scenarios.reduce(
+          (acc, item) => acc + item.experiments.length,
+          0
+        )
+      }}
+    </template>
+  </b-table>
+</template>
+
+<script>
+export default {
+  props: ["workspaces"],
+  computed: {
+    fields() {
+      return ["name", "updated", "scenarios", "experiments"];
+    },
+  },
+};
+</script>
+
+<style></style>

simccs_maptool/views.py

@@ -692,4 +692,7 @@ def get_queryset(self):
         simccs_project = self.request.query_params.get('project', None)
         if simccs_project is not None:
             queryset = queryset.filter(case__simccs_project=simccs_project)
+        owner = self.request.query_params.get('owner', None)
+        if owner is not None:
+            queryset = queryset.filter(owner__username=owner)
         return queryset