agreacion de botones compartir encuesta

package.json

@@ -58,7 +58,8 @@
     "preci:e2e:server:start": "npm run docker:db:await --if-present && npm run docker:others:await --if-present",
     "ci:e2e:server:start": "java -jar target/e2e.$npm_package_config_packaging --spring.profiles.active=$npm_package_config_default_environment -Dlogging.level.ROOT=OFF -Dlogging.level.org.zalando=OFF -Dlogging.level.tech.jhipster=OFF -Dlogging.level.org.datasurvey=OFF -Dlogging.level.org.springframework=OFF -Dlogging.level.org.springframework.web=OFF -Dlogging.level.org.springframework.security=OFF --logging.level.org.springframework.web=ERROR",
     "ci:frontend:build": "npm run webapp:build:$npm_package_config_default_environment",
-    "ci:frontend:test": "npm run ci:frontend:build && npm test"
+    "ci:frontend:test": "npm run ci:frontend:build && npm test",
+    "postinstall": "ngcc"
   },
   "config": {
     "backend_port": 8080,
@@ -66,6 +67,7 @@
     "packaging": "jar"
   },
   "dependencies": {
+    "@angular/cdk": "^12.1.4",
     "@angular/common": "12.0.5",
     "@angular/compiler": "12.0.5",
     "@angular/core": "12.0.5",
@@ -74,9 +76,10 @@
     "@angular/platform-browser": "12.0.5",
     "@angular/platform-browser-dynamic": "12.0.5",
     "@angular/router": "12.0.5",
-    "@fortawesome/angular-fontawesome": "0.9.0",
+    "@fortawesome/angular-fontawesome": "^0.9.0",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@ng-bootstrap/ng-bootstrap": "9.1.3",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "6.0.0",
@@ -85,7 +88,9 @@
     "bootstrap": "4.6.0",
     "dayjs": "1.10.5",
     "jquery": "^3.6.0",
+    "jw-angular-social-buttons": "^1.0.0",
     "ngx-infinite-scroll": "10.0.1",
+    "ngx-sharebuttons": "^8.0.5",
     "ngx-webstorage": "8.0.0",
     "rxjs": "6.6.7",
     "sockjs-client": "1.5.0",

src/main/webapp/app/app.module.ts

@@ -34,6 +34,9 @@ import { ErrorComponent } from './layouts/error/error.component';
 import { SidebarComponent } from './layouts/sidebar/sidebar.component';
 import { PaginaPrincipalComponent } from './pagina-principal/pagina-principal.component';
 
+import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
+import { ShareIconsModule } from 'ngx-sharebuttons/icons';
+
 @NgModule({
   imports: [
     NgxWebstorageModule.forRoot(),
@@ -41,6 +44,10 @@ import { PaginaPrincipalComponent } from './pagina-principal/pagina-principal.co
     SharedModule,
     HomeModule,
     PaginaPrincipalModule,
+    ShareButtonsModule.withConfig({
+      debug: true,
+    }),
+    ShareIconsModule,
     // jhipster-needle-angular-add-module JHipster will add new module here
     EntityRoutingModule,
     AppRoutingModule,

src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.html

@@ -1 +1,28 @@
-<p>encuesta-compartir-dialog works!</p>
+<form class="ds-form" name="deleteForm">
+  <div class="modal-header">
+    <h2 class="ds-title" data-cy="encuestaDeleteDialogHeading">Compartir encuesta</h2>
+  </div>
+
+  <div class="modal-body">
+    <p class="ds-subtitle" id="jhi-delete-encuesta-heading">Puede copiar el enlace o compartirlo en redes sociales</p>
+
+    <hr />
+    <input class="compartir" readonly type="url" id="inputCompartir" [value]="baseURL" /> <br />
+    <share-buttons
+      [theme]="'circles-dark'"
+      [include]="['facebook', 'twitter']"
+      [show]="2"
+      [size]="1"
+      [url]="baseURL"
+      [image]="'../../../content/img_datasurvey/datasurvey-logo-text-white-PNG.png'"
+      [autoSetMeta]="false"
+      [title]="'Encuesta en DataSurvey'"
+    ></share-buttons>
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal" (click)="cancel()">
+      <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+    </button>
+  </div>
+</form>

src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.scss

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+
+@import '~ngx-sharebuttons/themes/circles/circles-dark-theme';
+
+.compartir {
+  width: 100% !important;
+}

src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EncuestaCompartirDialogComponent } from './encuesta-compartir-dialog.component';
-
-describe('EncuestaCompartirDialogComponent', () => {
-  let component: EncuestaCompartirDialogComponent;
-  let fixture: ComponentFixture<EncuestaCompartirDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [EncuestaCompartirDialogComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EncuestaCompartirDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { IEncuesta } from '../encuesta.model';
 
 @Component({
   selector: 'jhi-encuesta-compartir-dialog',
@@ -6,7 +8,20 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./encuesta-compartir-dialog.component.scss'],
 })
 export class EncuestaCompartirDialogComponent implements OnInit {
-  constructor() {}
+  encuesta?: IEncuesta;
+  baseURL: string = '';
+  imagen: string = '';
+  name = 'ngx sharebuttons';
 
-  ngOnInit(): void {}
+  constructor(protected activeModal: NgbActiveModal) {}
+
+  ngOnInit(): void {
+    this.baseURL = location.origin + '/' + this.encuesta?.id + '/complete';
+  }
+
+  compartir(): void {}
+
+  cancel(): void {
+    this.activeModal.dismiss();
+  }
 }

src/main/webapp/app/entities/encuesta/encuesta-publish-dialog/encuesta-publish-dialog.component.html

@@ -1,6 +1,6 @@
 <form *ngIf="encuesta" name="deleteForm" (ngSubmit)="confirmPublish(encuesta!)">
   <div class="modal-header">
-    <!-- <h4 class="modal-title" data-cy="encuestaDeleteDialogHeading" jhiTranslate="entity.publish.title">Confirm delete operation</h4>-->
+    <h4 class="modal-title" data-cy="encuestaDeleteDialogHeading">Publique su encuesta</h4>
   </div>
 
   <div class="modal-body">
@@ -48,13 +48,7 @@
       <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
     </button>
 
-    <button
+    <button id="jhi-confirm-delete-encuesta" data-cy="entityConfirmDeleteButton" type="submit" class="ds-btn ds-btn--primary">
-      [disabled]="fechaForm.invalid"
-      id="jhi-confirm-delete-encuesta"
-      data-cy="entityConfirmDeleteButton"
-      type="submit"
-      class="ds-btn ds-btn--primary"
-    >
       &nbsp;<span jhiTranslate="entity.action.publish">Delete</span>
     </button>
   </div>

src/main/webapp/app/entities/encuesta/encuesta.module.ts

@@ -11,8 +11,10 @@ import { EncuestaDeleteQuestionDialogComponent } from './encuesta-delete-questio
 import { EncuestaDeleteOptionDialogComponent } from './encuesta-delete-option-dialog/encuesta-delete-option-dialog.component';
 import { EncuestaCompartirDialogComponent } from './encuesta-compartir-dialog/encuesta-compartir-dialog.component';
 
+import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
+
 @NgModule({
-  imports: [SharedModule, EncuestaRoutingModule, FontAwesomeModule],
+  imports: [SharedModule, EncuestaRoutingModule, FontAwesomeModule, ShareButtonsModule],
   declarations: [
     EncuestaComponent,
     EncuestaDetailComponent,

src/main/webapp/app/entities/encuesta/list/encuesta.component.html

@@ -115,9 +115,11 @@
               <fa-icon class="contextmenu__icon" [icon]="faUpload"></fa-icon>Publicar
             </button>
           </li>
-          <!-- <li>
+          <li>
-            <button type="button" id="contextmenu-share"><fa-icon class="contextmenu__icon" [icon]="faShareAlt"></fa-icon>Compartir</button>
+            <button type="button" id="contextmenu-share" (click)="compartir()">
-          </li> -->
+              <fa-icon class="contextmenu__icon" [icon]="faShareAlt"></fa-icon>Compartir
+            </button>
+          </li>
         </div>
         <div class="ds-contextmenu__divider" id="contextmenu-delete--separator">
           <li>

src/main/webapp/app/entities/encuesta/list/encuesta.component.ts

@@ -41,6 +41,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 
 import * as $ from 'jquery';
+import { EncuestaCompartirDialogComponent } from '../encuesta-compartir-dialog/encuesta-compartir-dialog.component';
 
 @Component({
   selector: 'jhi-encuesta',
@@ -491,12 +492,14 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
           document.getElementById('contextmenu-edit')!.style.display = 'block';
           document.getElementById('contextmenu-publish')!.style.display = 'block';
           document.getElementById('contextmenu-duplicate')!.style.display = 'block';
+          document.getElementById('contextmenu-share')!.style.display = 'none';
         } else {
           document.getElementById('contextmenu-edit')!.style.display = 'none';
           document.getElementById('contextmenu-publish')!.style.display = 'none';
           document.getElementById('contextmenu-duplicate')!.style.display = 'none';
+          document.getElementById('contextmenu-share')!.style.display = 'block';
         }
-        // document.getElementById('contextmenu-share')!.style.display = 'block';
+
         document.getElementById('contextmenu-create--separator')!.style.display = 'none';
       }
 
@@ -548,4 +551,16 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
       categoria: this.selectedSurvey!.categoria,
     });
   }
+
+  compartir(): void {
+    const modalRef = this.modalService.open(EncuestaCompartirDialogComponent, { size: 'lg', backdrop: 'static' });
+    modalRef.componentInstance.encuesta = this.selectedSurvey;
+    // unsubscribe not needed because closed completes on modal close
+    modalRef.closed.subscribe(reason => {
+      if (reason === 'published') {
+        this.successPublished = true;
+        this.loadAll();
+      }
+    });
+  }
 }

src/main/webapp/content/scss/global.scss

@@ -2,6 +2,9 @@
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+@import '~ngx-sharebuttons/themes/circles/circles-dark-theme';
+
 /* ==============================================================
 Bootstrap tweaks
 ===============================================================*/

src/main/webapp/content/scss/paper-dashboard.scss

@@ -102,3 +102,6 @@
 @import 'paper-dashboard/datasurvey-home';
 @import 'paper-dashboard/datasurvey-filter';
 @import 'paper-dashboard/datasurvey-survey';
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+@import '~ngx-sharebuttons/themes/circles/circles-dark-theme';