save json as zip, replace properties panel to camunda

Author: LaviniaStiliadou

package-lock.json

@@ -25,9 +25,12 @@
     "@angular/router": "7.1.1",
     "bpmn-js": "^2.5.2",
     "bpmn-js-properties-panel": "^0.26.2",
+    "camunda-bpmn-moddle": "^4.4.0",
     "core-js": "^2.4.1",
+    "file-saver": "^2.0.2",
     "font-awesome": "^4.7.0",
     "jquery": "^3.5.1",
+    "jszip": "^3.5.0",
     "node-sass": "4.14.1",
     "rxjs": "^6.6.2",
     "rxjs-compat": "^6.6.2",
@@ -39,6 +42,7 @@
     "@angular/cli": "7.1.0",
     "@angular/compiler-cli": "7.1.1",
     "@angular/language-service": "7.1.1",
+    "@types/file-saver": "^2.0.1",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",

package.json

@@ -6,6 +6,8 @@ import {CustomPaletteProvider} from "./props-provider/CustomPaletteProvider";
 import {WineryService} from "./services/winery.service";
 import { ActivatedRoute } from '@angular/router';
 import { PageParameter } from './model/page-parameter';
+import _camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda.json";
+
 
 const customModdle = {
   name: "customModdle",
@@ -52,7 +54,7 @@ export class AppComponent implements OnInit {
       height: '600px',
       additionalModules: [
         PropertiesPanelModule,
-        //OriginalPropertiesProvider,
+        OriginalPropertiesProvider,
 
         {[InjectionNames.bpmnPropertiesProvider]: ['type', OriginalPropertiesProvider.propertiesProvider[1]]},
         {[InjectionNames.propertiesProvider]: ['type', CustomPropsProvider]},
@@ -63,8 +65,8 @@ export class AppComponent implements OnInit {
       propertiesPanel: {
         parent: '#properties'
       },
-      moddleExtension: {
-        custom: customModdle
+      moddleExtensions: {
+        custom: _camundaModdleDescriptor
       }
     });
     this.route.queryParams.subscribe(params => {this.wineryService.setRequestParam(<PageParameter>params);});

src/app/app.component.ts

@@ -1,7 +1,7 @@
 // import _Modeler from 'bpmn-js/lib/Modeler.js';
 import * as _Modeler from "bpmn-js/dist/bpmn-modeler.production.min.js";
 import * as _PropertiesPanelModule from 'bpmn-js-properties-panel';
-import * as _BpmnPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/bpmn';
+import * as _BpmnPropertiesProvider from 'bpmn-js-properties-panel/lib/provider/camunda';
 import * as _EntryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
 import _PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
 
@@ -22,6 +22,7 @@ export const EntryFactory = _EntryFactory;
 export const OriginalPaletteProvider = _PaletteProvider;
 export const OriginalPropertiesProvider = _BpmnPropertiesProvider;
 
+
 export interface IPaletteProvider {
   getPaletteEntries(): any;
 }

src/app/bpmn-js/bpmn-js.ts

@@ -82,7 +82,7 @@ private getFullUrl(relativePath: string) {
                 label : 'Interface',
                 selectOptions: function(element){ 
                   var options = [{name: 'Test', value: 'Test'},{name: 'Test1', value: 'Test1'}];
-                  EntryFactory.loadNodeTemplateInterfaces('http://opentosca.org', 'OpenTOSCAToDoDockerContainer');
+                  //EntryFactory.loadNodeTemplateInterfaces('http://opentosca.org', 'OpenTOSCAToDoDockerContainer');
                   return options;},
                 setControlValue: true,
                 modelProperty : 'example'

src/app/props-provider/CustomPropsProvider.ts

@@ -13,6 +13,7 @@
  *******************************************************************************/
 
 import { Injectable } from '@angular/core';
+import { saveAs } from 'file-saver';
 import { PageParameter } from '../model/page-parameter';
 import { NodeTemplate } from '../model/nodetemplate';
 import { Node } from '../model/workflow/node';
@@ -22,6 +23,7 @@ import { HttpHeaders } from '@angular/common/http';
 import { map } from 'rxjs/internal/operators';
 import { Observable } from 'rxjs/Rx';
 import { ToscaInterface } from '../model/toscaInterface';
+import JSZip from 'jszip';
 
 /**
  * WineryService
@@ -91,16 +93,22 @@ export class WineryService {
     public save(data: string) {
         const url = 'servicetemplates/' + this.encode(this.namespace)
             + '/' + this.encode(this.serviceTemplateId) + '/plans/' + this.encode(this.plan) + '/file';
-        
+        console.log(url);
         const requestData = '-----------------------------7da24f2e50046\r\n'
-            + 'Content-Disposition: form-data; name=\"file\"; filename=\"file.json\"\r\n'
-            + 'Content-type: plain/text\r\n\r\n'
+            + 'Content-Disposition: form-data; name=\"file\"; filename=\"example.zip\"\r\n'
+            + 'Content-type: application/zip\r\n\r\n'
             + data + '\r\n-----------------------------7da24f2e50046--\r\n';
-        
+            var zip = new JSZip();
+            zip.file("file.json", requestData);
+            zip.generateAsync({type:"blob"})
+            .then(function(content) {
+                // see FileSaver.js
+                saveAs(content, "example.zip");
+            });
         const headers = new HttpHeaders({ 'Content-Type': 'multipart/form-data; boundary=---------------------------7da24f2e50046' });
-
+       
         this.httpService.put(this.getFullUrl(url), requestData, { headers: headers })
-            .subscribe(response => console.log('save date success'));
+            .subscribe(response => {console.log('save date success');console.log(this.getFullUrl(url))});
     }
 
     public loadPlan() {

src/app/services/winery.service.ts

@@ -8,6 +8,9 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "target": "es5",
     "typeRoots": [
       "node_modules/@types"