UNOTOPLYS-150 | UNOTOPLYS-155 : Mise en place des la gestion des responsables...

UNOTOPLYS-150 | UNOTOPLYS-155 : Mise en place des la gestion des responsables d'un workspace et d'un questionnaire.

src/main/java/com/unantes/orientactive/repository/UserRepository.java

@@ -65,4 +65,6 @@ public interface UserRepository extends JpaRepository<User, Long> {
         nativeQuery = true
     )
     List<User> findAllWithPermissionOnForm(@Param("idRole") int idRole, @Param("idForm") Long idForm);
+
+    List<User> findByLoginContaining(String login);
 }

src/main/java/com/unantes/orientactive/service/UserService.java

@@ -401,4 +401,8 @@ public class UserService {
     public List<String> findAllAuthorities(Long idUser) {
         return userRepository.findAllAuthorities(idUser);
     }
+
+    public List<AdminUserDTO> findByLoginContaining(final String login) {
+        return userRepository.findByLoginContaining(login).stream().map(AdminUserDTO::new).collect(Collectors.toList());
+    }
 }

src/main/java/com/unantes/orientactive/web/rest/UserResource.java

@@ -217,4 +217,10 @@ public class UserResource {
         userService.deleteUser(login);
         return ResponseEntity.noContent().headers(HeaderUtil.createAlert(applicationName, "userManagement.deleted", login)).build();
     }
+
+    @GetMapping("/users/autocomplete")
+    @PreAuthorize("hasAuthority(\"" + AuthoritiesConstants.ADMIN + "\")")
+    public ResponseEntity<List<AdminUserDTO>> getUsersAutocomplete(@RequestParam("login") final String login) {
+        return new ResponseEntity<>(userService.findByLoginContaining(login), HttpStatus.OK);
+    }
 }

src/main/webapp/app/admin/user-management/user-management.service.ts

@@ -31,4 +31,8 @@ export default class UserManagementService {
   public retrieveAuthorities(): Promise<any> {
     return axios.get('api/admin/users/authorities');
   }
+
+  public findAllByLoginLike(login: string): Promise<any> {
+    return axios.get(`api/admin/users/autocomplete?login=${login}`);
+  }
 }

src/main/webapp/app/components/table/admin-users-table.component.ts

 import Vue from 'vue';
 import Component from 'vue-class-component';
-import { User } from '@/shared/model/user.model';
-import { Prop } from 'vue-property-decorator';
+import {IUser, User} from '@/shared/model/user.model';
+import {Inject, Prop} from 'vue-property-decorator';
+import OaInput from '@/components/forms/input/oa-input.vue';
+import UserManagementService from '@/admin/user-management/user-management.service';
+import OaButton from '@/components/button/oa-button.vue';
+import Icon from '@/components/icon/icon.vue';
+import {ItemFront} from "@/front/model/item-front.model";
 
-@Component
+@Component({
+  components: {
+    OaInput,
+    OaButton,
+    Icon,
+  }
+})
 export default class AdminUsersTable extends Vue {
   @Prop()
-  public users: User[];
+  public authorizedUsers: User[];
+
+  public loginSearch: string = '';
+
+  private userSelected: IUser = new User();
+
+  public autocompleteUsers: IUser[] = [];
+
+  @Inject('userService')
+  private userManagementService: () => UserManagementService;
 
   public getUserEditLink(userId: string) {
     return `/admin/user/${userId}/edit`;
   }
+
+  public set currentLoginSearch(login: string) {
+    this.loginSearch = login;
+    if (this.loginSearch) {
+      this.userManagementService()
+        .findAllByLoginLike(this.loginSearch)
+        .then(res => {
+          this.autocompleteUsers = res.data;
+        });
+    }
+  }
+
+  public get currentLoginSearch(): string {
+    return this.loginSearch;
+  }
+
+  public getDisplayStringAutocomplete(user: IUser) {
+    return `${user.firstName} ${user.lastName} (${user.login})`;
+  }
+
+  public selectUser(user: IUser) {
+    this.loginSearch = user.login;
+    this.userSelected = user;
+    this.autocompleteUsers = [];
+  }
+
+  public addPermission() {
+    if (this.userSelected) {
+      this.$emit('addPermission', this.userSelected);
+      this.authorizedUsers.push(this.userSelected);
+    }
+  }
+
+  public deletePermission(user: IUser) {
+    this.$emit('removePermission', user);
+    this.authorizedUsers = this.authorizedUsers.filter(value => value.id !== user.id);
+  }
 }

src/main/webapp/app/components/table/admin-users-table.vue

 <template>
   <main>
-    <h2 class="mb-4 text-2xl" v-text="$t('user.table.titre')">Utilisateurs</h2>
+    <h2 class="mb-4 text-2xl" v-text="$t('user.table.titre')">Reponsables</h2>
+    <p class="mb-4" v-text="$t('user.table.info')">Vous pouvez ajouter ou supprimer des responsables sur cet espace.</p>
+    <div class="flex items-center">
+      <input class="w-full px-6 py-4 text-lg transition bg-white border rounded-md outline-none ring-inset focus:ring" :placeholder="$t('user.actions.addContrib')" v-model="currentLoginSearch">
+      <oa-button variant="primary" :label="$t('user.actions.addUser')" @click="addPermission"></oa-button>
+    </div>
+    <div class="mb-8">
+      <datalist v-if="autocompleteUsers" class="bg-white block">
+        <option v-for="(user, index) in autocompleteUsers" :key="index" @click="selectUser(user)">{{ getDisplayStringAutocomplete(user)}}</option>
+      </datalist>
+    </div>
     <table class="w-full bg-white border-t-2">
       <thead class="font-bold">
         <tr class="border-b-2">
@@ -8,10 +18,11 @@
           <th class="p-2 text-left" v-text="$t('user.table.nom')">Nom</th>
           <th class="p-2 text-left" v-text="$t('user.table.email')">Email</th>
           <th class="p-2 text-left" v-text="$t('user.table.actif')">Actif</th>
+          <th class="p-2 text-center" v-text="$t('user.table.actions')">Actions</th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(user, index) in users" :key="index" class="text-left align-top border-b">
+        <tr v-for="(user, index) in authorizedUsers" :key="index" class="text-left align-top border-b">
           <td class="p-2">
             <a :href="getUserEditLink(user.id)">{{ user.id }}</a>
           </td>
@@ -24,6 +35,11 @@
           <td class="p-2">
             <a :href="getUserEditLink(user.id)">{{ user.activated }}</a>
           </td>
+          <td class="p-2">
+            <button class="flex items-center p-2 text-red-600 transition ml-auto mr-auto hover:bg-red-600 focus:ring hover:text-red-100" @click="deletePermission(user)">
+              <icon name="trash"></icon>
+            </button>
+          </td>
         </tr>
       </tbody>
     </table>

src/main/webapp/app/entities/form/form.service.ts

@@ -108,4 +108,12 @@ export default class FormService {
         });
     });
   }
+
+  public addRoleWithPermission(loginUser: string, idForm: number): Promise<any>{
+    return axios.get(`${baseApiUrl}/addRoleWithPermission/${loginUser}/${idForm}`);
+  }
+
+  public removePermission(loginUser: string, idForm: number): Promise<any>{
+    return axios.get(`${baseApiUrl}/removePermission/${loginUser}/${idForm}`);
+  }
 }

src/main/webapp/app/entities/workspace/workspace.service.ts

@@ -95,4 +95,12 @@ export default class WorkspaceService {
         });
     });
   }
+
+  public addRoleWithPermission(loginUser: string, idWorkspace: number): Promise<any>{
+    return axios.get(`${baseApiUrl}/addRoleWithPermission/${loginUser}/${idWorkspace}`);
+  }
+
+  public removePermission(loginUser: string, idWorkspace: number): Promise<any>{
+    return axios.get(`${baseApiUrl}/removePermission/${loginUser}/${idWorkspace}`);
+  }
 }

src/main/webapp/app/views/form/form-settings.component.ts

@@ -8,6 +8,7 @@ import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
 import OaButton from '@/components/button/oa-button.vue';
 import AdminUsersTable from '@/components/table/admin-users-table.vue';
 import HeaderService from '@/shared/service/header-service';
+import { IUser } from '@/shared/model/user.model';
 
 @Component({
   components: {
@@ -26,6 +27,8 @@ export default class FormSettings extends Vue {
 
   public form: IForm = new Form();
 
+  private currentIdForm: number = -1;
+
   private isSaving = false;
 
   public authorizedUsers: Object[] = [];
@@ -55,6 +58,7 @@ export default class FormSettings extends Vue {
     this.formService()
       .find(idForm)
       .then(res => {
+        this.currentIdForm = idForm;
         this.form = res;
       });
   }
@@ -78,4 +82,16 @@ export default class FormSettings extends Vue {
   setReference(reference: string) {
     this.form.reference = reference;
   }
+
+  public addPermision(user: IUser) {
+    this.formService().addRoleWithPermission(user.login, this.currentIdForm)
+      .then(() => console.log("Ajout de permission réussi."))
+      .catch(() => console.log("Erreur dans l'ajout des permissions."));
+  }
+
+  public removePermision(user: IUser) {
+    this.formService().removePermission(user.login, this.currentIdForm)
+      .then(() => console.log("Suppression des permissions réussi."))
+      .catch(() => console.log("Erreur dans la suppression des permissions."));
+  }
 }

src/main/webapp/app/views/form/form-settings.vue

@@ -21,7 +21,7 @@
         ></oa-textarea>
         <oa-button type="submit" variant="primary" :label="$t('button.save')"></oa-button>
       </form>
-      <admin-users-table :users="authorizedUsers"></admin-users-table>
+      <admin-users-table :authorizedUsers="authorizedUsers" @addPermission="addPermision" @removePermission="removePermision"></admin-users-table>
     </section>
   </main>
 </template>

src/main/webapp/app/views/workspace/workspace-settings.component.ts

@@ -8,6 +8,7 @@ import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
 import OaButton from '@/components/button/oa-button.vue';
 import AdminUsersTable from '@/components/table/admin-users-table.vue';
 import HeaderService from '@/shared/service/header-service';
+import { IUser } from '@/shared/model/user.model';
 
 @Component({
   components: {
@@ -30,6 +31,8 @@ export default class WorkspaceSettings extends Vue {
 
   private isSaving = false;
 
+  private currentWorkspaceId: number = -1;
+
   beforeRouteEnter(to, from, next) {
     next(vm => {
       if (to.params.idWorkspace) {
@@ -55,6 +58,7 @@ export default class WorkspaceSettings extends Vue {
     this.workspaceService()
       .find(idWorkspace)
       .then(res => {
+        this.currentWorkspaceId = idWorkspace;
         this.workspace = res;
       });
   }
@@ -74,4 +78,16 @@ export default class WorkspaceSettings extends Vue {
   public setDescription(description: string) {
     this.workspace.description = description;
   }
+
+  public addPermision(user: IUser) {
+    this.workspaceService().addRoleWithPermission(user.login, this.currentWorkspaceId)
+      .then(() => console.log("Ajout de permission réussi."))
+      .catch(() => console.log("Erreur dans l'ajout des permissions"));
+  }
+
+  public removePermision(user: IUser) {
+    this.workspaceService().removePermission(user.login, this.currentWorkspaceId)
+      .then(() => console.log("Suppression des permissions réussi."))
+      .catch(() => console.log("Erreur dans la suppression des permissions."));
+  }
 }

src/main/webapp/app/views/workspace/workspace-settings.vue

@@ -20,7 +20,7 @@
         ></oa-textarea>
         <oa-button type="submit" variant="primary" :label="$t('button.save')"></oa-button>
       </form>
-      <admin-users-table :users="authorizedUsers"></admin-users-table>
+      <admin-users-table :authorizedUsers="authorizedUsers" @addPermission="addPermision" @removePermission="removePermision"></admin-users-table>
     </section>
   </main>
 </template>

src/main/webapp/i18n/fr/user.json

 {
   "user": {
     "table": {
-      "titre": "Utilisateurs",
+      "titre": "Responsables",
       "id": "ID",
       "nom": "Nom",
       "email": "Email",
-      "actif": "Actif"
+      "actif": "Actif",
+      "info": "Vous pouvez ajouter ou supprimer des responsables sur cet espace.",
+      "actions": "actions"
     },
     "actions": {
-      "nouveau": "Ajouter un utilisateur"
+      "nouveau": "Ajouter un utilisateur",
+      "addUser": "Ajouter",
+      "addContrib": "Ajouter un contributeur"
     }
   }
 }