From 806bb296419278d2a15b2a6980491b3391f399f6 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 19 Sep 2024 20:34:50 +0000
Subject: [PATCH] feat: create/delete projects, edit project names and default
 map positions

---
 uvdat/core/rest/project.py                |  13 +-
 uvdat/core/rest/serializers.py            |   2 +-
 web/src/api/auth.js                       |   4 +-
 web/src/api/rest.ts                       |  13 +-
 web/src/components/DatasetList.vue        |   3 +
 web/src/components/MainDrawerContents.vue |  73 +++++-
 web/src/components/ProjectConfig.vue      | 273 ++++++++++++++++------
 web/src/components/ProjectContents.vue    |   2 +-
 web/src/components/map/Map.vue            |   4 +-
 web/src/storeFunctions.ts                 |  11 +-
 10 files changed, 293 insertions(+), 105 deletions(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 3858a61f..58ade39e 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -20,11 +20,16 @@ def perform_create(self, serializer):
 
     def partial_update(self, request, id):
         project = self.get_object()
-        project.datasets.set(
-            Dataset.objects.filter(
-                id__in=request.data.get('dataset_ids')
+        dataset_ids = request.data.pop('dataset_ids', None)
+        if dataset_ids is not None:
+            project.datasets.set(
+                Dataset.objects.filter(
+                    id__in=dataset_ids
+                )
             )
-        )
+        serializer = ProjectSerializer(project, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
         project.save()
         response = ProjectSerializer(project).data
         response.update(datasets=[
diff --git a/uvdat/core/rest/serializers.py b/uvdat/core/rest/serializers.py
index 696e9fc9..a2f41a06 100644
--- a/uvdat/core/rest/serializers.py
+++ b/uvdat/core/rest/serializers.py
@@ -51,7 +51,7 @@ def to_internal_value(self, data):
         center = data.get('default_map_center')
         data = super().to_internal_value(data)
         if isinstance(center, list):
-            data['default_map_center'] = Point(center[1], center[0])
+            data['default_map_center'] = Point(*center)
         return data
 
     class Meta:
diff --git a/web/src/api/auth.js b/web/src/api/auth.js
index d02dbc6d..40799381 100644
--- a/web/src/api/auth.js
+++ b/web/src/api/auth.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import OauthClient from "@resonant/oauth-client";
 import { currentError, currentUser, currentProject } from "@/store";
-import { clearState, clearMap } from "@/storeFunctions";
+import { clearState, resetMap } from "@/storeFunctions";
 
 export const baseURL = `${process.env.VUE_APP_API_ROOT}api/v1/`;
 
@@ -61,5 +61,5 @@ export const logout = async () => {
   currentUser.value = undefined;
   currentProject.value = undefined;
   clearState();
-  clearMap();
+  resetMap(undefined);
 };
diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
index f7c7fb5a..f38eb42e 100644
--- a/web/src/api/rest.ts
+++ b/web/src/api/rest.ts
@@ -39,7 +39,7 @@ export async function patchProject(
   projectId: number,
   data: object
 ): Promise<Project> {
-  return await apiClient.patch(`projects/${projectId}/`, data);
+  return (await apiClient.patch(`projects/${projectId}/`, data)).data;
 }
 
 export async function deleteProject(projectId: number): Promise<Project> {
@@ -52,17 +52,6 @@ export async function getProjectDatasets(
   return (await apiClient.get(`datasets?project=${projectId}`)).data.results;
 }
 
-export async function setProjectDatasets(
-  projectId: number,
-  datasetIds: number[]
-): Promise<Project> {
-  return (
-    await apiClient.patch(`projects/${projectId}/`, {
-      dataset_ids: datasetIds,
-    })
-  ).data;
-}
-
 export async function getProjectCharts(projectId: number): Promise<Chart[]> {
   return (await apiClient.get(`charts?project=${projectId}`)).data.results;
 }
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index b2d783dc..38a8f5b8 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -282,6 +282,9 @@ export default {
 </template>
 
 <style scoped>
+.v-list-item--active > * {
+  background: transparent !important;
+}
 .group {
   border-bottom: 1px solid lightgray;
 }
diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 0c270439..aa991f28 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -1,12 +1,16 @@
 <script lang="ts">
-import { ref, computed } from "vue";
+import { ref, Ref, computed } from "vue";
 import { availableProjects, currentProject, projectConfigMode } from "@/store";
 import ProjectContents from "./ProjectContents.vue";
+import { getCurrentMapPosition, resetMap } from "@/storeFunctions";
+import { Project } from "@/types";
+import { patchProject } from "@/api/rest";
 
 export default {
   components: { ProjectContents },
   setup() {
     const searchText = ref();
+    const saving: Ref<string | boolean> = ref(false);
     const filteredProjects = computed(() => {
       return availableProjects.value.filter((proj) => {
         return (
@@ -20,11 +24,33 @@ export default {
       projectConfigMode.value = create ? "new" : true;
     }
 
+    function saveProjectMapLocation(project: Project) {
+      const { center, zoom } = getCurrentMapPosition();
+      saving.value = true;
+      patchProject(project.id, {
+        default_map_center: center,
+        default_map_zoom: zoom,
+      }).then((project) => {
+        availableProjects.value = availableProjects.value.map((p) => {
+          if (p.id == project.id) {
+            p.default_map_center = project.default_map_center;
+            p.default_map_zoom = project.default_map_zoom;
+          }
+          return p;
+        });
+        resetMap(project);
+        saving.value = "done";
+      });
+    }
+
     return {
       filteredProjects,
       currentProject,
       searchText,
+      saving,
       openProjectConfig,
+      resetMap,
+      saveProjectMapLocation,
     };
   },
 };
@@ -96,6 +122,39 @@ export default {
               <span class="mr-3">{{ project.item_counts.simulations }}</span>
             </div>
           </div>
+          <div class="location-menu">
+            <v-icon icon="mdi-map-marker-right" size="small" color="primary" />
+            <v-menu
+              activator="parent"
+              location="end"
+              open-on-hover
+              :close-on-content-click="false"
+              @update:model-value="saving = false"
+            >
+              <v-card width="250">
+                <v-list selectable>
+                  <v-list-item @click="resetMap(project)">
+                    Go to project default map position
+                  </v-list-item>
+                  <v-list-item @click="saveProjectMapLocation(project)">
+                    Set current map position as project default
+                    <v-icon
+                      v-if="saving == 'done'"
+                      icon="mdi-check"
+                      color="green"
+                      style="float: right"
+                    />
+                    <v-progress-circular
+                      v-else-if="saving"
+                      size="15"
+                      indeterminate
+                      style="float: right"
+                    />
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-menu>
+          </div>
         </v-expansion-panel-title>
         <v-expansion-panel-text class="pa-0">
           <v-card rounded="0" flat color="grey-lighten-2" class="pa-2">
@@ -114,20 +173,24 @@ export default {
 .v-expansion-panel-text__wrapper {
   padding: 0 !important;
 }
-
 .v-checkbox .v-selection-control {
   max-width: 100%;
 }
-
 .expand-icon {
   float: right;
 }
-
 .v-expansion-panel-title__overlay {
   background-color: transparent !important;
 }
-
 .v-expansion-panel:not(:first-child)::after {
   border-top-width: 0px !important;
 }
+.v-expansion-panel-title__icon {
+  align-self: flex-start;
+}
+.location-menu {
+  position: absolute;
+  right: 25px;
+  bottom: 15px;
+}
 </style>
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 0d038a2b..f21f1235 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -1,14 +1,22 @@
 <script lang="ts">
-import { ref, Ref, computed, onMounted, ComputedRef } from "vue";
-import { availableProjects, projectConfigMode, currentProject } from "@/store";
+import { ref, Ref, computed, onMounted, ComputedRef, watch } from "vue";
+import {
+  availableProjects,
+  projectConfigMode,
+  currentProject,
+  currentUser,
+} from "@/store";
 import DatasetList from "./DatasetList.vue";
 import {
   getUsers,
   getDatasets,
   getProjectDatasets,
-  setProjectDatasets,
+  createProject,
+  deleteProject,
+  patchProject,
 } from "@/api/rest";
 import { User, Project, Dataset } from "@/types";
+import { getCurrentMapPosition, loadProjects } from "@/storeFunctions";
 
 export default {
   components: { DatasetList },
@@ -25,65 +33,81 @@ export default {
     });
     const selectedProject: Ref<Project | undefined> = ref();
     const allDatasets: Ref<Dataset[]> = ref([]);
-    const projDatasets: Ref<Dataset[]> = ref([]);
+    const projDatasets: Ref<Dataset[] | undefined> = ref();
     const projSelectedDatasetIds: Ref<number[]> = ref([]);
     const otherDatasets: ComputedRef<Dataset[]> = computed(() => {
       return allDatasets.value.filter(
-        (d1) => !projDatasets.value.map((d2) => d2.id).includes(d1.id)
+        (d1) => !projDatasets.value?.map((d2) => d2.id).includes(d1.id)
       );
     });
     const otherSelectedDatasetIds: Ref<number[]> = ref([]);
     const allUsers: Ref<User[]> = ref([]);
+    const permissions = computed(() => {
+      const ret = Object.fromEntries(
+        availableProjects.value.map((p) => {
+          let perm = "view";
+          if (
+            p.owner?.id == currentUser.value?.id ||
+            currentUser.value?.is_superuser
+          ) {
+            perm = "own";
+          } else if (
+            currentUser.value &&
+            p.collaborators.map((u) => u.id).includes(currentUser.value.id)
+          ) {
+            perm = "edit";
+          }
+          return [p.id, perm];
+        })
+      );
+      return ret;
+    });
     const saving: Ref<boolean> = ref(false);
+    const newProjectName = ref();
+    const projectToEdit: Ref<Project | undefined> = ref();
+    const projectToDelete: Ref<Project | undefined> = ref();
 
-    // const newProjectName = ref();
-    // const savedPosition = ref(false);
-
-    // function create() {
-    //   const { center, zoom } = getCurrentMapPosition();
-    //   createProject(newProjectName.value, center, zoom).then(() => {
-    //     newProjectName.value = undefined;
-    //     loadProjects();
-    //   });
-    // }
-
-    // function del() {
-    //   if (currentProject.value) {
-    //     deleteProject(currentProject.value.id).then(() => {
-    //       currentProject.value = undefined;
-    //       loadProjects();
-    //     });
-    //   }
-    // }
+    function create() {
+      const { center, zoom } = getCurrentMapPosition();
+      createProject(newProjectName.value, center, zoom).then(() => {
+        newProjectName.value = undefined;
+        projectConfigMode.value = true;
+        loadProjects();
+      });
+    }
 
-    // function savePosition() {
-    //   if (currentProject.value) {
-    //     const { center, zoom } = getCurrentMapPosition();
-    //     patchProject(currentProject.value.id, {
-    //       default_map_center: center,
-    //       default_map_zoom: zoom,
-    //     }).then((proj) => {
-    //       if (proj) {
-    //         if (currentProject.value) {
-    //           currentProject.value.default_map_center = proj.default_map_center;
-    //           currentProject.value.default_map_zoom = proj.default_map_zoom;
-    //         }
-    //         savedPosition.value = true;
-    //       }
-    //     });
-    //   }
-    // }
+    function del() {
+      if (projectToDelete.value) {
+        deleteProject(projectToDelete.value.id).then(() => {
+          projectToDelete.value = undefined;
+          loadProjects();
+        });
+      }
+    }
 
-    // watch(currentProject, () => {
-    //   newProjectName.value = undefined;
-    //   savedPosition.value = false;
-    // });
+    function saveProjectName() {
+      saving.value = true;
+      if (projectToEdit.value) {
+        patchProject(projectToEdit.value.id, {
+          name: newProjectName.value,
+        }).then(() => {
+          projectToEdit.value = undefined;
+          newProjectName.value = undefined;
+          saving.value = false;
+          loadProjects();
+        });
+      }
+    }
 
     function selectProject(v: Record<string, unknown>) {
-      getProjectDatasets(v.id as number).then((data) => {
-        projDatasets.value = data;
-      });
-      selectedProject.value = availableProjects.value.find((p) => p.id == v.id);
+      if (selectedProject.value?.id != v.id) {
+        getProjectDatasets(v.id as number).then((data) => {
+          projDatasets.value = data;
+        });
+        selectedProject.value = availableProjects.value.find(
+          (p) => p.id == v.id
+        );
+      }
     }
 
     function loadSelectedProject() {
@@ -131,32 +155,45 @@ export default {
     }
 
     function addAllSelectionToProject() {
-      saveDatasetsToProject([
-        ...projDatasets.value.map((d) => d.id),
-        ...otherSelectedDatasetIds.value,
-      ]);
-      otherSelectedDatasetIds.value = [];
+      if (projDatasets.value) {
+        saveDatasetsToProject([
+          ...projDatasets.value.map((d) => d.id),
+          ...otherSelectedDatasetIds.value,
+        ]);
+        otherSelectedDatasetIds.value = [];
+      }
     }
 
     function removeProjSelectionFromProject() {
-      saveDatasetsToProject(
-        projDatasets.value
-          .map((d) => d.id)
-          .filter((id) => !projSelectedDatasetIds.value.includes(id))
-      );
-      projSelectedDatasetIds.value = [];
+      if (projDatasets.value) {
+        saveDatasetsToProject(
+          projDatasets.value
+            .map((d) => d.id)
+            .filter((id) => !projSelectedDatasetIds.value.includes(id))
+        );
+        projSelectedDatasetIds.value = [];
+      }
     }
 
     function saveDatasetsToProject(ids: number[]) {
       saving.value = true;
       if (selectedProject.value) {
-        setProjectDatasets(selectedProject.value.id, ids).then((project) => {
+        patchProject(selectedProject.value.id, {
+          dataset_ids: ids,
+        }).then((project) => {
           projDatasets.value = project.datasets;
           saving.value = false;
         });
       }
     }
 
+    watch(selectedProject, () => {
+      projectConfigMode.value = true;
+      newProjectName.value = undefined;
+      projectToDelete.value = undefined;
+      projectToEdit.value = undefined;
+    });
+
     onMounted(() => {
       getUsers().then((data) => {
         allUsers.value = data;
@@ -177,21 +214,20 @@ export default {
       projDatasets,
       projSelectedDatasetIds,
       allUsers,
+      permissions,
       saving,
+      newProjectName,
+      projectToEdit,
+      projectToDelete,
+      create,
+      del,
+      saveProjectName,
       selectProject,
       loadSelectedProject,
       toggleOtherDatasetSelection,
       toggleProjDatasetSelection,
       addAllSelectionToProject,
       removeProjSelectionFromProject,
-      // currentUser,
-      // availableProjects,
-      // newProjectName,
-      // savedPosition,
-      // currentTab,
-      // create,
-      // del,
-      // savePosition,
     };
   },
 };
@@ -234,7 +270,72 @@ export default {
           color="primary"
           selectable
           @click:select="selectProject"
-        />
+        >
+          <template v-slot:title="{ title, item }">
+            <v-text-field
+              v-if="projectToEdit?.id == item.id"
+              v-model="newProjectName"
+              :placeholder="item.name"
+              label="Project Name"
+              density="compact"
+              hide-details
+              autofocus
+              @keydown.stop
+              @keydown.enter="saveProjectName"
+            />
+            <span v-else>{{ title }}</span>
+          </template>
+          <template v-slot:append="{ item }">
+            <div
+              v-if="['own', 'edit'].includes(permissions[item.id])"
+              class="text-grey-darken-1"
+            >
+              <v-icon
+                icon="mdi-pencil"
+                v-if="!projectToEdit && !projectToDelete"
+                @click.stop="projectToEdit = item"
+              />
+              <v-btn
+                v-else-if="projectToEdit?.id == item.id"
+                color="primary"
+                variant="flat"
+                style="min-width: 40px; min-height: 40px"
+                :disabled="!newProjectName"
+                @click="saveProjectName"
+              >
+                <v-icon icon="mdi-content-save" />
+              </v-btn>
+            </div>
+            <div
+              v-if="['own'].includes(permissions[item.id])"
+              class="text-grey-darken-1"
+            >
+              <v-icon
+                icon="mdi-trash-can"
+                v-if="!projectToEdit && !projectToDelete"
+                @click.stop="projectToDelete = item"
+              />
+            </div>
+          </template>
+        </v-list>
+        <div class="pa-2 d-flex" v-if="projectConfigMode == 'new'">
+          <v-text-field
+            v-model="newProjectName"
+            label="Project Name"
+            density="compact"
+            autofocus
+            @keydown.enter="create"
+          />
+          <v-btn
+            color="primary"
+            variant="flat"
+            style="min-width: 40px; min-height: 40px"
+            :disabled="!newProjectName"
+            @click="create"
+          >
+            <v-icon icon="mdi-arrow-right" />
+          </v-btn>
+        </div>
         <v-btn
           v-if="selectedProject"
           class="options"
@@ -248,10 +349,9 @@ export default {
         <v-tabs v-model="currentTab" color="primary">
           <v-tab value="datasets" class="text-grey">Dataset Selection</v-tab>
           <v-tab value="users" class="text-grey">Access Control</v-tab>
-          <v-tab value="map" class="text-grey">Default Map Position</v-tab>
         </v-tabs>
         <div
-          v-if="currentTab == 'datasets' && projDatasets.length"
+          v-if="currentTab == 'datasets' && projDatasets"
           class="py-3 px-6 d-flex"
         >
           <div style="width: 30%">
@@ -308,9 +408,36 @@ export default {
           </div>
         </div>
         <div v-if="currentTab == 'users'" class="py-3 px-6">Users</div>
-        <div v-if="currentTab == 'map'" class="py-3 px-6">Map</div>
       </div>
     </v-card-text>
+    <v-dialog :model-value="!!projectToDelete" width="300">
+      <v-card v-if="projectToDelete">
+        <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
+          Delete project
+          <v-btn
+            class="close-button transparent"
+            variant="flat"
+            icon
+            @click="projectToDelete = undefined"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          Are you sure you want to delete "{{ projectToDelete.name }}"?
+        </v-card-text>
+        <v-card-actions class="d-flex" style="justify-content: space-evenly">
+          <v-btn color="red" @click="del">Delete</v-btn>
+          <v-btn
+            color="primary"
+            @click="projectToDelete = undefined"
+            variant="tonal"
+          >
+            Cancel
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index 5f4f2f4b..0944aabb 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -197,7 +197,7 @@ export default {
   </v-expansion-panels>
 </template>
 
-<style>
+<style scoped>
 .v-expansion-panel--active
   > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
   min-height: 30px;
diff --git a/web/src/components/map/Map.vue b/web/src/components/map/Map.vue
index 1d433266..811bb95d 100644
--- a/web/src/components/map/Map.vue
+++ b/web/src/components/map/Map.vue
@@ -9,7 +9,7 @@ import {
   clickedFeature,
   showMapBaseLayer,
 } from "@/store";
-import { clearMap } from "@/storeFunctions";
+import { resetMap } from "@/storeFunctions";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 import ActiveLayers from "./ActiveLayers.vue";
@@ -151,7 +151,7 @@ export default {
 
     onMounted(() => {
       createMap();
-      clearMap();
+      resetMap(undefined);
     });
 
     return {
diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index ae994a4b..b8da205c 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -38,6 +38,7 @@ import {
   styleNetworkVectorTileLayer,
   updateBaseLayer,
 } from "./layers";
+import { Project } from "./types";
 
 export function clearState() {
   availableDatasets.value = undefined;
@@ -86,12 +87,12 @@ export function loadProjects() {
   });
 }
 
-export function clearMap() {
+export function resetMap(project: Project | undefined) {
   let center: [number, number] = [0, 30];
   let zoom = 1;
-  if (currentProject.value) {
-    center = currentProject.value.default_map_center;
-    zoom = currentProject.value.default_map_zoom;
+  if (project) {
+    center = project.default_map_center;
+    zoom = project.default_map_zoom;
   }
   const map = getMap();
   map.setCenter(center);
@@ -166,7 +167,7 @@ export function clearCurrentNetwork() {
 
 watch(currentProject, () => {
   clearState();
-  clearMap();
+  resetMap(currentProject.value);
   clearMapLayers();
 });
 watch(currentDataset, () => {