Merge branch 'master' into cloudinary-library

MrAPPs-RSM · Sep 5, 2018 · 640794c · 640794c
2 parents a24873e + e9ef876
commit 640794c
Show file tree

Hide file tree

Showing 33 changed files with 1,325 additions and 620 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,10 +41,11 @@
     "ng2-slider-component": "^1.0.9",
     "ng2-styled-directive": "^1.0.6",
     "ngx-color-picker": "^5.3.8",
-    "ngx-modialog": "^5.0.0",
+    "ngx-modialog": "^4.0.0-beta.3",
     "ngx-toastr": "^8.4.0",
     "ngx-tooltip": "0.0.9",
     "ngx-uploader": "^4.2.4",
+    "node-sass": "^4.9.3",
     "nouislider": "^11.1.0",
     "rxjs": "^5.5.10",
     "ssri": "^5.3.0",
@@ -65,7 +66,7 @@
     "karma-coverage-istanbul-reporter": "^1.4.2",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "^5.4.0",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
     "typescript": "2.5.2"

diff --git a/src/app/api/api.service.ts b/src/app/api/api.service.ts
@@ -21,9 +21,10 @@ export class ApiService {
      * Return composed url based on ENV
      * @param endpoint
      * @param addAuth
+     * @param params
      * @returns {string}
      */
-    public composeUrl(endpoint: string, addAuth?: boolean): string {
+    public composeUrl(endpoint: string, addAuth?: boolean, extraParams?: Object): string {
         this.isRedirecting = false;
 
         let url = API_URL + endpoint;
@@ -35,6 +36,11 @@ export class ApiService {
                 url += '?' + authorization;
             }
         }
+
+        if (extraParams) {
+            url += '&filter=' + extraParams['filter'];
+        }
+
         return url;
     }
 

diff --git a/src/app/panel/components/form/form-type-switcher/form-type-switcher.component.html b/src/app/panel/components/form/form-type-switcher/form-type-switcher.component.html
@@ -228,6 +228,15 @@
             [index]="index">
     </app-list-details>
 
+    <app-hotspot
+            *ngSwitchCase="formConfig.types.HOTSPOT"
+            [field]="field"
+            [groupName]="groupName"
+            [form]="form"
+            [isEdit]="isEdit"
+            [index]="index">
+    </app-hotspot>
+
     <!--
 
                      <calendar

diff --git a/src/app/panel/components/form/form.component.ts b/src/app/panel/components/form/form.component.ts
@@ -244,15 +244,22 @@ export class FormComponent implements OnInit, OnDestroy {
                     this.isLoading = false;
 
                     const listDetailKeys = [];
-
                     const listDetailsFields = {};
 
+                    const hotSpotKeys = [];
+                    let hotSpotFields = [];
+
                     Object.keys(response).forEach((key) => {
                         this.settings.fields.base.forEach((field) => {
                             if (field.key === key && field.type === formConfig.types.LIST_DETAILS) {
                                 listDetailKeys.push(key);
                                 listDetailsFields[key] = field.fields;
                             }
+
+                            if (field.key === key && field.type === formConfig.types.HOTSPOT) {
+                                hotSpotKeys.push(key);
+                                hotSpotFields = field.fields;
+                            }
                         });
                     });
 
@@ -266,7 +273,16 @@ export class FormComponent implements OnInit, OnDestroy {
                         });
                     }
 
-                    console.log(response);
+                    if (hotSpotKeys.length > 0) {
+                        hotSpotKeys.forEach((key) => {
+                            for (let i = 0; i < response[key]['hotSpots'].length; i++) {
+                                ((this.form.controls[key] as any).controls['hotSpots'] as FormArray).push(
+                                    new FormGroup(this._formGenerator.generateFormFields(hotSpotFields))
+                                );
+                            }
+                        });
+                    }
+
                     this.form.patchValue(response);
                 })
                 .catch((response: ErrorResponse) => {
@@ -382,10 +398,15 @@ export class FormComponent implements OnInit, OnDestroy {
         this.isLoading = true;
         if (this.settings.isEdit) {
 
-            const endpoint = this.settings.submit && this.settings.submit.endpoint ?
+            let endpoint = this.settings.submit && this.settings.submit.endpoint ?
                 this.settings.submit.endpoint : this.settings.api.endpoint;
 
-            this._apiService.patch(endpoint + '/' + this._route.snapshot.params['id'], value)
+            const id = this._route.snapshot.params['id'];
+            if (id) {
+                endpoint = endpoint + '/' + id;
+            }
+
+            this._apiService.patch(endpoint, value)
                 .then((response) => {
                     this.isLoading = false;
                     this.dataStored = true;

diff --git a/src/app/panel/components/form/form.config.ts b/src/app/panel/components/form/form.config.ts
@@ -20,10 +20,11 @@ export let formConfig = {
         PREVIEW: 'preview',
         GEOSEARCH: 'geosearch',
         CLOUDINARY: 'cloudinary',
+        HOTSPOT: 'hotspot'
     },
     noInputTypes: {
         SEPARATOR: 'separator',
-        GALLERY: 'gallery'
+        GALLERY: 'gallery',
     },
     validators: {
         REQUIRED: 'required',

diff --git a/src/app/panel/components/form/interfaces/form-field-file.ts b/src/app/panel/components/form/interfaces/form-field-file.ts
@@ -18,6 +18,7 @@ export interface UploadedFile {
     id: number;
     url?: string;
     type: string;
+    name?: string;
 }
 
 export interface MediaLibraryOptions {

diff --git a/src/app/panel/components/form/interfaces/form-field-hotspot.ts b/src/app/panel/components/form/interfaces/form-field-hotspot.ts
@@ -0,0 +1,6 @@
+import {FormField} from './form-field';
+
+export interface FormFieldHotspot extends FormField {
+    fields: FormField[];
+    saveEndpoint?: string;
+}
diff --git a/src/app/panel/components/form/interfaces/form-field-textarea.ts b/src/app/panel/components/form/interfaces/form-field-textarea.ts
@@ -3,5 +3,6 @@ import {FormField} from './form-field';
 export interface FormFieldTextarea extends FormField {
     options?: {
         editor?: boolean;
+        disable?: string[];
     };
 }
diff --git a/src/app/panel/components/form/types/date-picker/date-picker.component.ts b/src/app/panel/components/form/types/date-picker/date-picker.component.ts
@@ -48,7 +48,9 @@ export class DatePickerComponent extends BaseInputComponent implements OnInit, O
 
     setValue(value: any, options?: {emitEvent: boolean}) {
         if (value) {
-            this.getControl().setValue(new Date(value), options);
+            const date = new Date(value);
+            date.setSeconds(0);
+            this.getControl().setValue(date, options);
         } else {
             this.clearValue(options);
         }

diff --git a/src/app/panel/components/form/types/date-range-picker/date-range-picker.component.ts b/src/app/panel/components/form/types/date-range-picker/date-range-picker.component.ts
@@ -27,7 +27,7 @@ export class DateRangePickerComponent extends BaseInputComponent implements OnIn
             if (fromValue) {
                 this._toSubscription = this.getControl(this.field.toKey).valueChanges.first().subscribe((toValue) => {
                     if (toValue) {
-                        this.getControl().setValue([new Date(fromValue), new Date(toValue)]);
+                        this.getControl().setValue([new Date(fromValue).setSeconds(0), new Date(toValue).setSeconds(0)]);
                         this._toSubscription.unsubscribe();
                     }
                 });

diff --git a/src/app/panel/components/form/types/file-upload/file-upload.component.html b/src/app/panel/components/form/types/file-upload/file-upload.component.html
@@ -78,6 +78,7 @@
                             <i *ngSwitchCase="'text/csv'" class="fa fa-file-code-o code"></i>
                             <i *ngSwitchCase="'application/pdf'" class="fa fa-file-pdf-o pdf"></i>
                             <i *ngSwitchCase="'application/zip'" class="fa fa-file-zip-o zip"></i>
+                            <i *ngSwitchCase="'video/mp4'" class="fa fa-file-video-o video"></i>
                             <i *ngSwitchDefault class="fa fa-file-o default"></i>
                             <img *ngSwitchCase="'image/jpeg'" [src]="file.url" (error)="retryUrl($event, file.url)"/>
                             <img *ngSwitchCase="'image/jpg'" [src]="file.url" (error)="retryUrl($event, file.url)"/>
@@ -88,6 +89,7 @@
                         </div>
                     </div>
                     <span class="file-name" *ngIf="!onlyView">
+                        <span *ngIf="file.type == 'video/mp4'">{{file.name}}&nbsp;&nbsp;</span>
                         <span class="remove"
                               (click)="removeUploadedFile(file)">×</span>
                     </span>

diff --git a/src/app/panel/components/form/types/file-upload/file-upload.component.scss b/src/app/panel/components/form/types/file-upload/file-upload.component.scss
@@ -82,6 +82,9 @@ app-file-upload {
                   &.default {
                     color: $default;
                   }
+                  &.video {
+                    color: $purple;
+                  }
                 }
               }
             }
@@ -97,10 +100,10 @@ app-file-upload {
               padding: 2px 3px;
               background-color: #ffffff;
               margin-right: 5px;
-              > span{
+
+              span {
                 &:not(.remove) {
-                  max-width: 50px;
-                  display: inline-block;
+                  display: block;
                 }
                 &.remove {
                   cursor: pointer;

diff --git a/src/app/panel/components/form/types/file-upload/file-upload.component.ts b/src/app/panel/components/form/types/file-upload/file-upload.component.ts
@@ -231,7 +231,8 @@ export class FileUploadComponent extends BaseInputComponent implements OnInit, O
                 this.updateFormValue({
                     id: response.id,
                     url: response.url,
-                    type: response.type
+                    type: response.type,
+                    name: response.name
                 }, false);
             }
         }

diff --git a/src/app/panel/components/form/types/hotspot/hotspot.component.html b/src/app/panel/components/form/types/hotspot/hotspot.component.html
@@ -0,0 +1,57 @@
+<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+    <div class="form-group">
+        <div class="hotSpot-wrapper">
+            <div class="header">
+                Hotspot
+            </div>
+
+            <div class="img-wrapper" #imageWrapper
+                 (dragover)="onDragOver($event)"
+                 (drop)="onDrop($event)"
+            >
+                <img [src]="getControl().value.image" #image (click)="add($event)">
+                <div *ngFor="let hotSpot of getFormArray().controls; let i = index"
+                     class="hotSpot"
+                     [draggable]="true"
+                     [id]="'hotSpot_' + i"
+                     (dragstart)="onDragStart($event, i)"
+                     (drag)="onDrag($event, i)"
+                     (dragend)="onDragEnd($event, i)"
+                     [style.top]="hotSpot.value.y + 'px'"
+                     [style.left]="hotSpot.value.x + 'px'"
+                ><i class="fa fa-arrows"></i>
+                    <div class="edit" (click)="onEdit($event, i)"
+                         data-toggle="modal" data-target="#myModal">
+                        <i class="fa fa-pencil"></i>
+                    </div>
+                </div>
+            </div>
+
+            <div id="myModal" class="modal fade" role="dialog" *ngIf="activeHotSpot != null">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Hotspot</h4>
+                        </div>
+                        <div class="modal-body">
+                            <div *ngFor="let controlField of field.fields" class="row">
+                                <app-form-type-switcher [form]="getActiveForm()"
+                                                        [isSubField]="true"
+                                                        [field]="controlField"
+                                                        [isEdit]="isEdit">
+                                </app-form-type-switcher>
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-default" data-dismiss="modal" (click)="onClose($event)">Close</button>
+                            <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="onDelete($event)">Delete</button>
+                            <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="onSave($event)">Save</button>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/app/panel/components/form/types/hotspot/hotspot.component.scss b/src/app/panel/components/form/types/hotspot/hotspot.component.scss
@@ -0,0 +1,39 @@
+@import '../../../../../../assets/sass/partials/imports';
+
+app-hotspot {
+  .hotSpot-wrapper {
+    > .header {
+      margin-bottom: 10px;
+      font-size: 13px;
+      color: $default;
+    }
+    .img-wrapper {
+      max-height: 800px;
+      overflow: scroll;
+      position: relative;
+      > img {
+      }
+      > .hotSpot {
+        position: absolute;
+        background: $sidebarDark;
+        padding: 6px 9px;
+        font-size: 16px;
+        border-radius: 50%;
+        color: #fff;
+        cursor: move;
+
+        > div.edit {
+          position: absolute;
+          background: $warning;
+          color: #ffffff;
+          border-radius: 50%;
+          cursor: pointer;
+          padding: 2px 3px 0;
+          font-size: 12px;
+          top: -5px;
+          right: -5px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/panel/components/form/types/hotspot/hotspot.component.spec.ts b/src/app/panel/components/form/types/hotspot/hotspot.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HotspotComponent } from './hotspot.component';
+
+describe('HotspotComponent', () => {
+  let component: HotspotComponent;
+  let fixture: ComponentFixture<HotspotComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HotspotComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HotspotComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});