group wip destroy grups complete

Frontend Angular 4/src/app/layout/grupos/grupos.component.html

@@ -77,6 +77,7 @@
                   <i class="fa fa-arrow-up"></i>
                 </button>
                 <button
+                  *ngIf="roleCanManageUsers()"
                   class="btn btn-sm btn-secondary pull-right"
                   style="cursor: pointer; margin-top: -35px; margin-right: 36px"
                   (click)="openManageGroupUsersModal()"
@@ -88,9 +89,22 @@
                 >
                   <i class="fa fa-users"></i>
                 </button>
+                <button
+                  *ngIf="roleCanDestroyGroup()"
+                  class="btn btn-sm btn-secondary pull-right"
+                  style="cursor: pointer; margin-top: -35px; margin-right: 71px"
+                  (click)="openDestroyGroupModal()"
+                  ngbPopover="{{
+                    'i18n.msg.group.destroyGroupTooltip' | translate | titleCase
+                  }}"
+                  placement="bottom"
+                  triggers="mouseenter:mouseleave"
+                >
+                  <i class="fa fa-close"></i>
+                </button>
                 <p
                   class="pull-right"
-                  style="margin-top: -34px; margin-right: 93px"
+                  style="margin-top: -34px; margin-right: 128px"
                 >
                   {{ grupoSeleccionado.name }}
                 </p>

Frontend Angular 4/src/app/layout/grupos/grupos.component.ts

@@ -11,9 +11,11 @@ import { NgbPopoverConfig, NgbPopover } from "@ng-bootstrap/ng-bootstrap";
 import { NotificacionService } from "../../shared/services/notificacion.service";
 import { TranslateService } from "@ngx-translate/core";
 import { GroupService } from "../../shared/services/group.service";
+import { roleCanManageGroupUsers, roleCanDestroyGroup } from "app/utils";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { CreateGroupModal } from "../../shared/components/create-group-modal/create-group-modal.component";
 import { ManageGroupUsersModal } from "app/shared/components/manage-group-users-modal/manage-group-users-modal.component";
+import { DestroyGroupModal } from "app/shared";
 
 @Component({
   selector: "grupos",
@@ -102,6 +104,8 @@ export class GruposComponent {
     // let cedula = this.authService.getUser().cedula; // cedula
     this.confirmGroupCreation = this.confirmGroupCreation.bind(this);
     this.confirmGroupUpdated = this.confirmGroupUpdated.bind(this);
+    this.confirmGroupDestroyed = this.confirmGroupDestroyed.bind(this);
+
     this.loading = true;
     // this.haskellService.getGrupos(cedula).subscribe(
     //   (grupos) => {
@@ -213,6 +217,61 @@ export class GruposComponent {
     this.tipoArchivo = "entrega";
   }
 
+  roleCanManageUsers(): boolean {
+    return (
+      !!this.grupoSeleccionado &&
+      roleCanManageGroupUsers(this.grupoSeleccionado.role)
+    );
+  }
+
+  roleCanDestroyGroup(): boolean {
+    return (
+      !!this.grupoSeleccionado &&
+      roleCanDestroyGroup(this.grupoSeleccionado.role)
+    );
+  }
+
+  openDestroyGroupModal() {
+    if (!this.grupoSeleccionado) {
+      this.showNotification("warning", "i18n.warning.group.noSelected");
+      return;
+    }
+
+    if (!roleCanDestroyGroup(this.grupoSeleccionado.role)) {
+      this.showNotification("error", "i18n.warning.group.noPermission");
+      return;
+    }
+
+    this.createModalRef = this.modalService.open(DestroyGroupModal);
+
+    this.createModalRef.componentInstance.groupName =
+      this.grupoSeleccionado.name;
+    this.createModalRef.componentInstance.groupId = this.grupoSeleccionado.id;
+    this.createModalRef.componentInstance.confirmGroupDestroyed =
+      this.confirmGroupDestroyed;
+
+    // this.translateService
+    //   .get("i18n.warning.group.destroy", {
+    //     group: this.grupoSeleccionado.name,
+    //   })
+    //   .subscribe((res) => {
+    //     if (confirm(res)) {
+    //       this.groupService.destroyGroup(this.grupoSeleccionado.id).subscribe(
+    //         (data) => {
+    //           this.loadGroups();
+    //           this.grupoSeleccionado = undefined;
+    //         },
+    //         (error) => {
+    //           this.notifService.error(error);
+    //         }
+    //       );
+  }
+
+  confirmGroupDestroyed() {
+    this.desseleccionarGrupo();
+    this.loadGroups();
+  }
+
   mostrarModalCalificarEntrega() {
     // Mostrar el modal
     this.modalQualifyDelivery = true;

Frontend Angular 4/src/app/shared/components/action-confirmation-modal/action-confirmation-modal.component.html

+<div class="modal-header">
+  <span class="modal-title font-bold" id="modal-title">{{ title }}</span>
+  <button
+    aria-label="Cerrar diálogo"
+    (click)="cancelAction()"
+    part="close-button"
+    class="close-button fa fa-close"
+    type="button"
+  ></button>
+</div>
+<div class="modal-body">
+  <div class="mb-3">
+    {{ message }}
+  </div>
+  <div class="flex justify-end">
+    <button
+      (click)="cancelAction()"
+      class="btn btn-secondary mr-3"
+      slot="secondary"
+    >
+      Cancelar
+    </button>
+    <button (click)="confirmAction()" class="btn btn-primary" slot="primary">
+      Confirmar
+    </button>
+  </div>
+</div>

Frontend Angular 4/src/app/shared/components/action-confirmation-modal/action-confirmation-modal.component.ts

+import { Component, ChangeDetectionStrategy, Input } from "@angular/core";
+
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+
+@Component({
+  selector: "app-action-confirmation-modal",
+  templateUrl: "./action-confirmation-modal.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionConfirmationModal {
+  @Input() title: string;
+  @Input() message: string;
+  @Input() confirmAction: () => void;
+  @Input() cancelAction: () => void;
+}

Frontend Angular 4/src/app/shared/components/destroy-group-modal/destroy-group-modal.component.html

+<app-action-confirmation-modal
+  [title]="title"
+  [message]="message"
+  [confirmAction]="destroyGroup"
+  [cancelAction]="cancel"
+></app-action-confirmation-modal>

Frontend Angular 4/src/app/shared/components/destroy-group-modal/destroy-group-modal.component.ts

+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  OnInit,
+} from "@angular/core";
+
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+
+import { GroupService } from "../../services/group.service";
+
+@Component({
+  selector: "app-destroy-group-modal",
+  templateUrl: "./destroy-group-modal.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DestroyGroupModal implements OnInit {
+  @Input() groupName: string;
+  @Input() groupId: number;
+  /**
+   * Se dispara cuando se quiere administrar los usuarios del grupo
+   */
+  @Input() confirmGroupDestroyed: () => void;
+  title = "Destruir Grupo";
+  message: string;
+
+  constructor(
+    public modal: NgbActiveModal,
+    private groupService: GroupService
+  ) {}
+
+  ngOnInit(): void {
+    this.groupName = `${this.groupName}`;
+
+    this.message = `¿Estás seguro de que deseas destruir el grupo ${this.groupName}?`;
+    this.destroyGroup = this.destroyGroup.bind(this);
+    this.cancel = this.cancel.bind(this);
+  }
+
+  destroyGroup(): void {
+    this.groupService.destroyGroup(this.groupId).subscribe({
+      next: (_) => {
+        this.confirmGroupDestroyed();
+        this.modal.close();
+      },
+      error: (error) => console.log(error),
+    });
+  }
+
+  cancel(): void {
+    this.modal.dismiss();
+  }
+}

Frontend Angular 4/src/app/shared/components/index.ts

@@ -10,3 +10,5 @@ export * from "./select/select.component";
 export * from "./add-users-modal/add-users-modal.component";
 export * from "./create-group-modal/create-group-modal.component";
 export * from "./manage-group-users-modal/manage-group-users-modal.component";
+export * from "./action-confirmation-modal/action-confirmation-modal.component";
+export * from "./destroy-group-modal/destroy-group-modal.component";

Frontend Angular 4/src/app/shared/objects/grupo.ts

@@ -6,4 +6,5 @@ export class Group {
   name: string;
   files?: MFile[];
   users?: User[];
+  role?: string;
 }

Frontend Angular 4/src/app/shared/services/group.service.ts

@@ -10,7 +10,6 @@ import {
 import { Archivo, Evaluacion, MFile } from "../objects/archivo-types";
 import { Group } from "../objects/grupo";
 
-import { SERVER } from "../config";
 import { TranslateService } from "@ngx-translate/core";
 import { AuthenticationService } from "./authentication.service";
 import { catchError } from "rxjs/operators";
@@ -198,12 +197,12 @@ export class GroupService {
     );
   }
 
-  // deleteFile(file_id): Observable<HttpResponse<Object>> {
-  //   return this.http.delete<Object>(`${DELETE_FILE}/${file_id}`, {
-  //     observe: "response",
-  //     headers: this.postHeaders(),
-  //   });
-  // }
+  destroyGroup(group_id): Observable<HttpResponse<Object>> {
+    return this.http.delete<Object>(`${DELETE_GROUP}/${group_id}`, {
+      observe: "response",
+      headers: this.postHeaders(),
+    });
+  }
 
   // destroyAuxFile(): void {
   //   this.http.delete<Object>(DESTROY_AUX_DOCUMENT, {

Frontend Angular 4/src/app/shared/shared.module.ts

@@ -17,7 +17,8 @@ import { MatChipsModule } from "@angular/material/chips";
 import { MatIconModule } from "@angular/material/icon";
 import { NgbDropdownModule } from "@ng-bootstrap/ng-bootstrap";
 import { AddUsersModal } from "./components";
-
+import { ActionConfirmationModal } from "./components";
+import { DestroyGroupModal } from "./components";
 @NgModule({
   imports: [
     TitleCaseModule,
@@ -40,6 +41,8 @@ import { AddUsersModal } from "./components";
     ChipInputComponent,
     SelectComponent,
     AddUsersModal,
+    ActionConfirmationModal,
+    DestroyGroupModal,
   ],
   exports: [MainButtonComponent, CreateFileModal],
 })

Frontend Angular 4/src/app/utils.ts

@@ -41,3 +41,11 @@ export function findInTree<T extends MFile | Archivo>(
 export function roleCanShareFile(role: string): boolean {
   return role === "owner" || role === "manager";
 }
+
+export function roleCanManageGroupUsers(role: string): boolean {
+  return role === "owner" || role === "manager";
+}
+
+export function roleCanDestroyGroup(role: string): boolean {
+  return role === "owner";
+}

Frontend Angular 4/src/assets/i18n/en.json

@@ -135,7 +135,8 @@
         "error": "An error occurred while sending the email"
       },
       "group": {
-        "manageGroupUsers": "Manage group users"
+        "manageGroupUsers": "Manage group users",
+        "destroyGroupTooltip": "Destroy Group"
       },
       "updatePassword": {
         "success": "Your password has been updated, you will be redirected shortly",

Frontend Angular 4/src/assets/i18n/es.json

@@ -135,7 +135,8 @@
         "error": "Error al enviar el email"
       },
       "group": {
-        "manageGroupUsers": "Administrar usuarios del grupo"
+        "manageGroupUsers": "Administrar usuarios del grupo",
+        "destroyGroupTooltip": "Destruir Grupo"
       },
       "updatePassword": {
         "success": "Su contraseña ha sido actualizada, será redirigido en 5 segundos",