From 2640fcc3653c4c188cc22e0d44495391e064d6ef Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 20 Sep 2024 19:40:19 +0000
Subject: [PATCH] feat: add Access Control interface

---
 uvdat/core/rest/project.py           |  10 +
 web/src/App.vue                      |   1 +
 web/src/components/AccessControl.vue | 375 +++++++++++++++++++++++++++
 web/src/components/DatasetList.vue   |  17 +-
 web/src/components/ProjectConfig.vue |  47 +++-
 5 files changed, 437 insertions(+), 13 deletions(-)
 create mode 100644 web/src/components/AccessControl.vue

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 9b963a06..01d29964 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -1,3 +1,4 @@
+from django.contrib.auth.models import User
 from django.http import HttpResponse
 from rest_framework.decorators import action
 from rest_framework.response import Response
@@ -21,8 +22,17 @@ def perform_create(self, serializer):
     def partial_update(self, request, id):
         project = self.get_object()
         dataset_ids = request.data.pop('dataset_ids', None)
+        owner_id = request.data.pop('owner', None)
+        collaborator_ids = request.data.pop('collaborators', None)
+        follower_ids = request.data.pop('followers', None)
         if dataset_ids is not None:
             project.datasets.set(Dataset.objects.filter(id__in=dataset_ids))
+        if owner_id is not None:
+            project.owner = User.objects.get(id=owner_id)
+        if collaborator_ids is not None:
+            project.collaborators.set(User.objects.filter(id__in=collaborator_ids))
+        if follower_ids is not None:
+            project.followers.set(User.objects.filter(id__in=follower_ids))
         serializer = ProjectSerializer(project, data=request.data, partial=True)
         if serializer.is_valid():
             serializer.save()
diff --git a/web/src/App.vue b/web/src/App.vue
index 75a93fc2..1fbf6a93 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -44,6 +44,7 @@ export default defineComponent({
 
     onMounted(onReady);
     watch(currentUser, onReady);
+    watch(projectConfigMode, loadProjects);
 
     return {
       login,
diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
new file mode 100644
index 00000000..cd63f3e3
--- /dev/null
+++ b/web/src/components/AccessControl.vue
@@ -0,0 +1,375 @@
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { onMounted, ref, Ref } from "vue";
+import { User } from "@/types";
+import { getUsers, patchProject } from "@/api/rest";
+
+export default {
+  props: {
+    project: {
+      required: true,
+      type: Object,
+    },
+    permissions: {
+      required: true,
+      type: Object,
+    },
+  },
+  emits: ["updateSelectedProject"],
+  setup(props: any, { emit }: any) {
+    const allUsers: Ref<User[]> = ref([]);
+    const showUserSelectDialog: Ref<boolean> = ref(false);
+    const userSelectDialogMode: Ref<string> = ref("add");
+    const selectedUsers: Ref<User[]> = ref([]);
+    const selectedPermissionLevel: Ref<string> = ref("follower");
+    const permissionLevels = ["follower", "collaborator"];
+    const userToRemove: Ref<User | undefined> = ref();
+
+    function savePermissions() {
+      const newPermissions = {
+        owner: props.project.owner?.id,
+        collaborators: props.project.collaborators.map((u: User) => u.id),
+        followers: props.project.followers.map((u: User) => u.id),
+      };
+      if (userToRemove.value) {
+        newPermissions.collaborators = newPermissions.collaborators.filter(
+          (uid: number) => uid != userToRemove.value?.id
+        );
+        newPermissions.followers = newPermissions.followers.filter(
+          (uid: number) => uid != userToRemove.value?.id
+        );
+      } else if (
+        ["transfer", "claim"].includes(userSelectDialogMode.value) &&
+        selectedUsers.value.length == 1
+      ) {
+        if (!newPermissions.collaborators.includes(newPermissions.owner)) {
+          newPermissions.collaborators.push(newPermissions.owner);
+        }
+        if (newPermissions.collaborators.includes(selectedUsers.value[0].id)) {
+          newPermissions.collaborators = newPermissions.collaborators.filter(
+            (uid: number) => uid != selectedUsers.value[0].id
+          );
+        }
+        if (newPermissions.followers.includes(selectedUsers.value[0].id)) {
+          newPermissions.followers = newPermissions.followers.filter(
+            (uid: number) => uid != selectedUsers.value[0].id
+          );
+        }
+        newPermissions.owner = selectedUsers.value[0].id;
+      } else if (selectedPermissionLevel.value == "collaborator") {
+        selectedUsers.value.forEach((u: User) => {
+          if (!newPermissions.collaborators.includes(u.id)) {
+            newPermissions.collaborators.push(u.id);
+          }
+        });
+      } else if (selectedPermissionLevel.value == "follower") {
+        selectedUsers.value.forEach((u: User) => {
+          if (!newPermissions.followers.includes(u.id)) {
+            newPermissions.followers.push(u.id);
+          }
+        });
+      }
+      patchProject(props.project.id, newPermissions).then((project) => {
+        emit("updateSelectedProject", project);
+        selectedUsers.value = [];
+        selectedPermissionLevel.value = "follower";
+        showUserSelectDialog.value = false;
+        userToRemove.value = undefined;
+      });
+    }
+
+    onMounted(() => {
+      getUsers().then((data) => {
+        allUsers.value = data;
+      });
+    });
+
+    return {
+      allUsers,
+      showUserSelectDialog,
+      userSelectDialogMode,
+      selectedUsers,
+      selectedPermissionLevel,
+      permissionLevels,
+      userToRemove,
+      savePermissions,
+    };
+  },
+};
+</script>
+
+<template>
+  <div style="max-width: 500px">
+    <v-list>
+      <v-list-subheader>
+        Owner
+        <v-tooltip activator="parent" location="end">
+          Permissions: Read, Write, Delete, Access Control
+        </v-tooltip>
+      </v-list-subheader>
+      <v-list-item
+        v-if="project.owner"
+        :title="
+          project.owner.first_name && project.owner.last_name
+            ? project.owner.first_name + ' ' + project.owner.last_name
+            : project.owner.username
+        "
+        :subtitle="project.owner.email"
+      >
+        <template v-slot:prepend>
+          <v-btn
+            flat
+            icon
+            color="primary"
+            size="small"
+            class="mx-3 user-circle"
+            :ripple="false"
+          >
+            {{ project.owner.first_name[0] }}
+            {{ project.owner.last_name[0] }}
+            <v-tooltip activator="parent" location="end">
+              {{ project.owner.first_name }}
+              {{ project.owner.last_name }}
+            </v-tooltip>
+          </v-btn>
+        </template>
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-pencil"
+            @click="
+              showUserSelectDialog = true;
+              userSelectDialogMode = 'transfer';
+            "
+          />
+        </template>
+      </v-list-item>
+      <v-list-item v-else class="mx-4" subtitle="No owner">
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-pencil"
+            @click="
+              showUserSelectDialog = true;
+              userSelectDialogMode = 'claim';
+            "
+          />
+        </template>
+      </v-list-item>
+      <v-list-subheader>
+        Collaborators
+        <v-tooltip activator="parent" location="end">
+          Permissions: Read, Write
+        </v-tooltip>
+      </v-list-subheader>
+      <v-list-item
+        v-for="collaborator in project.collaborators"
+        :key="collaborator.id"
+        :title="
+          collaborator.first_name && collaborator.last_name
+            ? collaborator.first_name + ' ' + collaborator.last_name
+            : collaborator.username
+        "
+        :subtitle="collaborator.email"
+      >
+        <template v-slot:prepend>
+          <v-btn
+            flat
+            icon
+            color="primary"
+            size="small"
+            class="mx-3 user-circle"
+            :ripple="false"
+          >
+            {{ collaborator.first_name[0] }}
+            {{ collaborator.last_name[0] }}
+            <v-tooltip activator="parent" location="end">
+              {{ collaborator.first_name }}
+              {{ collaborator.last_name }}
+            </v-tooltip>
+          </v-btn>
+        </template>
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-trash-can"
+            @click="userToRemove = collaborator"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item
+        v-if="!project.collaborators.length"
+        subtitle="No collaborators"
+        class="mx-4"
+      />
+      <v-list-subheader>
+        Followers
+        <v-tooltip activator="parent" location="end">
+          Permissions: Read, Write
+        </v-tooltip>
+      </v-list-subheader>
+      <v-list-item
+        v-for="follower in project.followers"
+        :key="follower.id"
+        :title="
+          follower.first_name && follower.last_name
+            ? follower.first_name + ' ' + follower.last_name
+            : follower.username
+        "
+        :subtitle="follower.email"
+      >
+        <template v-slot:prepend>
+          <v-btn
+            flat
+            icon
+            color="primary"
+            size="small"
+            class="mx-3 user-circle"
+            :ripple="false"
+          >
+            {{ follower.first_name[0] }}
+            {{ follower.last_name[0] }}
+            <v-tooltip activator="parent" location="end">
+              {{ follower.first_name }}
+              {{ follower.last_name }}
+            </v-tooltip>
+          </v-btn>
+        </template>
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-trash-can"
+            @click="userToRemove = follower"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item
+        v-if="!project.followers.length"
+        subtitle="No followers"
+        class="mx-4"
+      />
+    </v-list>
+    <v-btn
+      v-if="permissions[project.id] == 'own'"
+      color="primary"
+      @click="
+        showUserSelectDialog = true;
+        userSelectDialogMode = 'add';
+      "
+    >
+      Add Users
+    </v-btn>
+    <v-dialog v-model="showUserSelectDialog" width="500">
+      <v-card>
+        <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
+          {{ userSelectDialogMode == "add" ? "Add Users" : "Select New Owner" }}
+          <v-btn
+            class="close-button transparent"
+            variant="flat"
+            icon
+            @click="showUserSelectDialog = false"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-messages
+          color="red"
+          :active="userSelectDialogMode == 'transfer'"
+          :messages="[
+            'Warning: After transferring ownership to another user, you will no \
+            longer be able to make changes to permissions or delete the project. \
+            You will be added as a collaborator with read/write permissions.',
+          ]"
+          class="pa-3"
+        />
+        <v-card-text>
+          <v-select
+            v-model="selectedUsers"
+            :items="allUsers"
+            :label="
+              userSelectDialogMode == 'add'
+                ? 'Users to add'
+                : 'New project owner'
+            "
+            item-title="username"
+            :rules="[
+              (v) =>
+                !(
+                  ['transfer', 'claim'].includes(userSelectDialogMode) &&
+                  v.length > 1
+                ) || 'Must select one new owner',
+            ]"
+            return-object
+            multiple
+            clearable
+            chips
+            closable-chips
+          >
+            <template v-slot:item="{ props, item }">
+              <v-list-item
+                v-bind="props"
+                :title="
+                  item.raw.first_name && item.raw.last_name
+                    ? item.raw.first_name + ' ' + item.raw.last_name
+                    : item.raw.username
+                "
+                :subtitle="item.raw.email"
+              ></v-list-item>
+            </template>
+          </v-select>
+          <v-select
+            v-if="userSelectDialogMode == 'add'"
+            v-model="selectedPermissionLevel"
+            :items="permissionLevels"
+            label="Permission Level"
+          />
+          <v-card-actions>
+            <v-btn
+              color="primary"
+              @click="savePermissions"
+              :disabled="!selectedUsers.length"
+            >
+              Submit
+            </v-btn>
+          </v-card-actions>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+    <v-dialog :model-value="!!userToRemove" width="500">
+      <v-card>
+        <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
+          Remove User
+          <v-btn
+            class="close-button transparent"
+            variant="flat"
+            icon
+            @click="userToRemove = undefined"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text v-if="userToRemove">
+          Are you sure you want to remove {{ userToRemove.username }} from this
+          project?
+        </v-card-text>
+        <v-card-actions class="d-flex" style="justify-content: space-evenly">
+          <v-btn color="red" @click="savePermissions">Delete</v-btn>
+          <v-btn
+            color="primary"
+            @click="userToRemove = undefined"
+            variant="tonal"
+          >
+            Cancel
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<style scoped>
+.user-circle {
+  letter-spacing: -2px;
+  font-weight: bold;
+}
+</style>
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index 38a8f5b8..fdd24cfa 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { onMounted, ref, Ref, computed, ComputedRef } from "vue";
+import { onMounted, ref, Ref, computed, ComputedRef, watch } from "vue";
 import { Dataset } from "@/types";
 import { getDatasetLayers } from "@/api/rest";
 
@@ -27,6 +27,7 @@ export default {
   setup(props: any, { emit }: any) {
     const groupByOptions = ["category", "dataset_type"];
     const groupByKey = ref(["category"]);
+    const numDatasets = computed(() => props.datasets.length);
     const filterMenuItems: ComputedRef<Record<string, string[]>> = computed(
       () => {
         const menuItems: Record<string, string[]> = Object.fromEntries(
@@ -87,6 +88,12 @@ export default {
       emit("toggleDatasets", { show, datasets });
     }
 
+    watch(numDatasets, () => {
+      filters.value = Object.fromEntries(
+        groupByOptions.map((opt) => [opt, []])
+      );
+    });
+
     onMounted(fetchAllLayers);
 
     return {
@@ -104,7 +111,11 @@ export default {
 
 <template>
   <div class="px-1" style="width: 100%">
-    <div class="d-flex position-sticky top-0" style="align-items: center">
+    <v-card
+      flat
+      class="d-flex position-sticky top-0 pa-2"
+      style="align-items: center; z-index: 2"
+    >
       <v-text-field
         v-model="searchText"
         label="Search Datasets"
@@ -205,7 +216,7 @@ export default {
           </v-list>
         </v-card>
       </v-menu>
-    </div>
+    </v-card>
     <div
       v-for="groupName in Object.keys(datasetGroups)"
       :key="groupName"
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index f21f1235..201cc3e1 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -7,19 +7,19 @@ import {
   currentUser,
 } from "@/store";
 import DatasetList from "./DatasetList.vue";
+import AccessControl from "./AccessControl.vue";
 import {
-  getUsers,
   getDatasets,
   getProjectDatasets,
   createProject,
   deleteProject,
   patchProject,
 } from "@/api/rest";
-import { User, Project, Dataset } from "@/types";
+import { Project, Dataset } from "@/types";
 import { getCurrentMapPosition, loadProjects } from "@/storeFunctions";
 
 export default {
-  components: { DatasetList },
+  components: { AccessControl, DatasetList },
   setup() {
     const currentTab = ref();
     const searchText = ref();
@@ -41,11 +41,14 @@ export default {
       );
     });
     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.id == selectedProject.value?.id) {
+            p = selectedProject.value;
+          }
           if (
             p.owner?.id == currentUser.value?.id ||
             currentUser.value?.is_superuser
@@ -79,13 +82,20 @@ export default {
     function del() {
       if (projectToDelete.value) {
         deleteProject(projectToDelete.value.id).then(() => {
-          projectToDelete.value = undefined;
           loadProjects();
+          if (selectedProject.value?.id == projectToDelete.value?.id) {
+            selectedProject.value = undefined;
+          }
+          projectToDelete.value = undefined;
         });
       }
     }
 
     function saveProjectName() {
+      if (!newProjectName.value) {
+        projectToEdit.value = undefined;
+        return;
+      }
       saving.value = true;
       if (projectToEdit.value) {
         patchProject(projectToEdit.value.id, {
@@ -187,6 +197,11 @@ export default {
       }
     }
 
+    function updateSelectedProject(newProjectData: Project) {
+      loadProjects();
+      selectedProject.value = newProjectData;
+    }
+
     watch(selectedProject, () => {
       projectConfigMode.value = true;
       newProjectName.value = undefined;
@@ -195,9 +210,6 @@ export default {
     });
 
     onMounted(() => {
-      getUsers().then((data) => {
-        allUsers.value = data;
-      });
       getDatasets().then((data) => {
         allDatasets.value = data;
       });
@@ -213,7 +225,6 @@ export default {
       otherSelectedDatasetIds,
       projDatasets,
       projSelectedDatasetIds,
-      allUsers,
       permissions,
       saving,
       newProjectName,
@@ -228,6 +239,7 @@ export default {
       toggleProjDatasetSelection,
       addAllSelectionToProject,
       removeProjSelectionFromProject,
+      updateSelectedProject,
     };
   },
 };
@@ -325,6 +337,7 @@ export default {
             density="compact"
             autofocus
             @keydown.enter="create"
+            @keydown.esc="projectConfigMode = true"
           />
           <v-btn
             color="primary"
@@ -336,6 +349,13 @@ export default {
             <v-icon icon="mdi-arrow-right" />
           </v-btn>
         </div>
+        <v-btn
+          v-else
+          variant="tonal"
+          width="100%"
+          @click="projectConfigMode = 'new'"
+          >+ New</v-btn
+        >
         <v-btn
           v-if="selectedProject"
           class="options"
@@ -407,7 +427,13 @@ export default {
             </v-btn>
           </div>
         </div>
-        <div v-if="currentTab == 'users'" class="py-3 px-6">Users</div>
+        <div v-if="currentTab == 'users'" class="py-3 px-6">
+          <access-control
+            :project="selectedProject"
+            :permissions="permissions"
+            @updateSelectedProject="updateSelectedProject"
+          />
+        </div>
       </div>
     </v-card-text>
     <v-dialog :model-value="!!projectToDelete" width="300">
@@ -462,6 +488,7 @@ export default {
 .options {
   position: absolute !important;
   bottom: 0px;
+  left: 0px;
   width: inherit;
 }
 .tab-content {