feat(ui): add select for project users' role

semaphoreui · Jul 8, 2023 · 7fac4d3 · 7fac4d3
1 parent 9c9c005
commit 7fac4d3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git a/api/projects/users.go b/api/projects/users.go
@@ -131,21 +131,22 @@ func RemoveUser(w http.ResponseWriter, r *http.Request) {
 	w.WriteHeader(http.StatusNoContent)
 }
 
-// MakeUserAdmin writes the admin flag to the users account
-func MakeUserAdmin(w http.ResponseWriter, r *http.Request) {
+func UpdateUser(w http.ResponseWriter, r *http.Request) {
 	project := context.Get(r, "project").(db.Project)
 	user := context.Get(r, "projectUser").(db.User)
-	role := db.ProjectOwner
 
-	if r.Method == "DELETE" {
-		// strip admin
-		role = db.ProjectTaskRunner
+	var projectUser struct {
+		Role db.ProjectUserRole `json:"role"`
+	}
+
+	if !helpers.Bind(w, r, &projectUser) {
+		return
 	}
 
 	err := helpers.Store(r).UpdateProjectUser(db.ProjectUser{
 		UserID:    user.ID,
 		ProjectID: project.ID,
-		Role:      role,
+		Role:      projectUser.Role,
 	})
 
 	if err != nil {

diff --git a/api/router.go b/api/router.go
@@ -170,8 +170,7 @@ func Route() *mux.Router {
 	projectUserManagement.Use(projects.UserMiddleware)
 
 	projectUserManagement.HandleFunc("/{user_id}", projects.GetUsers).Methods("GET", "HEAD")
-	projectUserManagement.HandleFunc("/{user_id}/admin", projects.MakeUserAdmin).Methods("POST")
-	projectUserManagement.HandleFunc("/{user_id}/admin", projects.MakeUserAdmin).Methods("DELETE")
+	projectUserManagement.HandleFunc("/{user_id}", projects.UpdateUser).Methods("PUT")
 	projectUserManagement.HandleFunc("/{user_id}", projects.RemoveUser).Methods("DELETE")
 
 	projectKeyManagement := projectUserAPI.PathPrefix("/keys").Subrouter()

diff --git a/web/src/views/project/Team.vue b/web/src/views/project/Team.vue
@@ -25,14 +25,15 @@
       @yes="deleteItem(itemId)"
     />
 
-    <v-toolbar flat >
+    <v-toolbar flat>
       <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
       <v-toolbar-title>Team</v-toolbar-title>
       <v-spacer></v-spacer>
       <v-btn
         color="primary"
         @click="editItem('new')"
-      >New Team Member</v-btn>
+      >New Team Member
+      </v-btn>
     </v-toolbar>
 
     <v-data-table
@@ -42,14 +43,15 @@
       class="mt-4"
       :items-per-page="Number.MAX_VALUE"
     >
-      <template v-slot:item.admin="{ item }">
-
-        <v-switch
-          v-model="item.admin"
-          inset
-          :disabled="!isUserAdmin()"
-          @change="item.admin ? grantAdmin(item.id) : refuseAdmin(item.id)"
-        ></v-switch>
+      <template v-slot:item.role="{ item }">
+        <v-select
+          v-model="item.role"
+          :items="roles"
+          item-value="slug"
+          item-text="title"
+          :style="{width: '200px'}"
+          @change="updateProjectUser(item)"
+        />
       </template>
 
       <template v-slot:item.actions="{ item }">
@@ -73,23 +75,29 @@ import axios from 'axios';
 export default {
   components: { TeamMemberForm },
   mixins: [ItemListPageBase],
+  data() {
+    return {
+      roles: [{
+        slug: 'owner',
+        title: 'Owner',
+      }, {
+        slug: 'task_runner',
+        title: 'Task Runner',
+      }],
+    };
+  },
+
   methods: {
-    async grantAdmin(userId) {
+    async updateProjectUser(user) {
       await axios({
-        method: 'post',
-        url: `/api/project/${this.projectId}/users/${userId}/admin`,
-        responseType: 'json',
-      });
-      await this.loadItems();
-    },
-    async refuseAdmin(userId) {
-      await axios({
-        method: 'delete',
-        url: `/api/project/${this.projectId}/users/${userId}/admin`,
+        method: 'put',
+        url: `/api/project/${this.projectId}/users/${user.id}`,
         responseType: 'json',
+        data: user,
       });
       await this.loadItems();
     },
+
     getHeaders() {
       return [
         {
@@ -107,8 +115,8 @@ export default {
           width: '50%',
         },
         {
-          text: 'Admin',
-          value: 'admin',
+          text: 'Role',
+          value: 'role',
         },
         {
           text: 'Actions',