Skip to content

Commit 4fd7952

Browse files
dk981234dk981234
committed
Use survey-angular-ui and survey-creator-angular packages
1 parent 1113709 commit 4fd7952

15 files changed

+147
-79
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
/dist
55
/tmp
66
/out-tsc
7+
.angular/
78

89
# dependencies
910
/node_modules
@@ -40,3 +41,4 @@ testem.log
4041
# System Files
4142
.DS_Store
4243
Thumbs.db
44+
package-lock.json

‎angular.json‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
22
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"cli": {
4+
"analytics": false
5+
},
36
"version": 1,
47
"newProjectRoot": "projects",
58
"projects": {
@@ -22,8 +25,7 @@
2225
],
2326
"styles": [
2427
"src/styles.css",
25-
"node_modules/bootstrap/dist/css/bootstrap.min.css",
26-
"node_modules/survey-angular/defaultV2.min.css",
28+
"node_modules/survey-core/defaultV2.min.css",
2729
"node_modules/survey-creator-core/survey-creator-core.min.css",
2830
"node_modules/survey-analytics/survey.analytics.min.css",
2931
"node_modules/survey-analytics/survey.analytics.tabulator.min.css",
@@ -76,6 +78,14 @@
7678
]
7779
},
7880
"configurations": {
81+
"development": {
82+
"buildOptimizer": false,
83+
"optimization": false,
84+
"vendorChunk": true,
85+
"extractLicenses": false,
86+
"sourceMap": true,
87+
"namedChunks": true
88+
},
7989
"production": {
8090
"optimization": true,
8191
"outputHashing": "all",
@@ -103,8 +113,12 @@
103113
"configurations": {
104114
"production": {
105115
"browserTarget": "surveyjs-angular-cli:build:production"
116+
},
117+
"development": {
118+
"browserTarget": "surveyjs-angular-cli:build:development"
106119
}
107-
}
120+
},
121+
"defaultConfiguration": "development"
108122
},
109123
"extract-i18n": {
110124
"builder": "@angular-devkit/build-angular:extract-i18n",
@@ -126,8 +140,7 @@
126140
"node_modules/jquery-bar-rating/dist/jquery.barrating.min.js"],
127141
"styles": [
128142
"src/styles.css",
129-
"node_modules/bootstrap/dist/css/bootstrap.min.css",
130-
"node_modules/survey-angular/defaultV2.css",
143+
"node_modules/survey-core/defaultV2.css",
131144
"node_modules/survey-creator-core/survey-creator-core.css",
132145
"node_modules/jquery-ui/themes/base/theme.css",
133146
"node_modules/jquery-ui/themes/base/datepicker.css",

‎package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/animations": "^12.2.0",
16-
"@angular/common": "^12.2.0",
17-
"@angular/compiler": "^12.2.0",
18-
"@angular/core": "^12.2.0",
19-
"@angular/forms": "^12.2.0",
20-
"@angular/platform-browser": "^12.2.0",
21-
"@angular/platform-browser-dynamic": "^12.2.0",
22-
"@angular/router": "^12.2.0",
15+
"@angular/animations": "^13.0.0",
16+
"@angular/common": "^13.0.0",
17+
"@angular/compiler": "^13.0.0",
18+
"@angular/core": "^13.0.0",
19+
"@angular/cdk": "^13.0.0",
20+
"@angular/forms": "^13.0.0",
21+
"@angular/platform-browser": "^13.0.0",
22+
"@angular/platform-browser-dynamic": "^13.0.0",
23+
"@angular/router": "^13.0.0",
2324
"ace-builds": "^1.4.13",
2425
"acorn": "^6.0.5",
2526
"bootstrap": "^3.3.6",
@@ -28,24 +29,23 @@
2829
"jspdf-autotable": "3.0.10",
2930
"jspdf1": "npm:[email protected]",
3031
"survey-analytics": "latest",
31-
"survey-angular": "latest",
3232
"survey-core": "latest",
33-
"survey-knockout-ui": "latest",
33+
"survey-angular-ui": "latest",
3434
"survey-creator-core": "latest",
35-
"survey-creator-knockout": "latest",
35+
"survey-creator-angular": "latest",
3636
"survey-pdf": "latest",
3737
"surveyjs-widgets": "latest",
3838
"core-js": "^3.21.1",
3939
"xlsx": "^0.16.6",
40-
"rxjs": "6.6.3",
40+
"rxjs": "~7.4.0",
4141
"tslib": "2.1.0",
4242
"zone.js": "0.11.4"
4343
},
4444
"devDependencies": {
45-
"@angular-devkit/build-angular": "^12.2.0",
46-
"@angular/cli": "^12.2.0",
47-
"@angular/compiler-cli": "^12.2.0",
48-
"@angular/language-service": "^12.2.0",
45+
"@angular-devkit/build-angular": "^13.0.0",
46+
"@angular/cli": "^13.0.0",
47+
"@angular/compiler-cli": "^13.0.0",
48+
"@angular/language-service": "^13.0.0",
4949
"@types/jasmine": "3.6.3",
5050
"@types/jasminewd2": "2.0.8",
5151
"@types/node": "14.14.28",
@@ -63,6 +63,6 @@
6363
"style-loader": "^3.3.1",
6464
"ts-node": "9.1.1",
6565
"tslint": "~6.1.3",
66-
"typescript": "4.2.3"
66+
"typescript": "4.4.2"
6767
}
6868
}

‎src/app/app.component.css‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,27 @@
11
.app-content {
2-
height: calc(100vh - 80px);
2+
height: calc(100vh - 56px);
33
overflow-y: auto;
4+
}
5+
.navbar {
6+
background-color: #f3f3f3;
7+
padding: 16px;
8+
}
9+
.navbar-nav {
10+
display: flex;
11+
flex-wrap: wrap;
12+
gap: 40px;
13+
align-items: center;
14+
}
15+
.navbar a {
16+
line-height: 24px;
17+
text-decoration: none;
18+
color: #777;
19+
}
20+
.navbar a:hover {
21+
color: #404040;
22+
}
23+
.navbar ul {
24+
margin: 0;
25+
list-style-type: none;
26+
padding: 0;
427
}

‎src/app/app.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<div id="app">
22
<nav class="navbar navbar-default">
3-
<div class="container-fluid">
4-
<div class="navbar-header">
5-
<a class="navbar-brand" href="/">{{ title }}</a>
6-
</div>
73
<ul class="nav navbar-nav">
4+
<li>
5+
<a class="navbar-brand" href="/">{{ title }}</a>
6+
</li>
87
<li>
98
<a routerLink="">Home</a>
109
</li>
@@ -27,7 +26,8 @@
2726
<a routerLink="/analyticsdatatables">Results Table (IE Support)</a>
2827
</li>
2928
</ul>
30-
</div>
3129
</nav>
32-
<router-outlet class="app-content"></router-outlet>
30+
<div class="app-content">
31+
<router-outlet ></router-outlet>
32+
</div>
3333
</div>

‎src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { AnalyticsTabulatorPage } from "./pages/analytics.tabulator.page";
1919
import { AnalyticsDatatablesPage } from "./pages/analytics.datatables.page";
2020

2121
import { PdfExportPage } from "./pages/pdfexport.page";
22+
import { SurveyAngularModule } from "survey-angular-ui";
23+
import { SurveyCreatorAngularModule } from "survey-creator-angular";
2224

2325
@NgModule({
2426
declarations: [
@@ -36,7 +38,7 @@ import { PdfExportPage } from "./pages/pdfexport.page";
3638
AnalyticsTabulatorPage,
3739
AnalyticsDatatablesPage,
3840
],
39-
imports: [BrowserModule, FormsModule, HttpClientModule, AppRoutingModule],
41+
imports: [BrowserModule, HttpClientModule, AppRoutingModule, SurveyAngularModule, SurveyCreatorAngularModule],
4042
providers: [],
4143
bootstrap: [AppComponent],
4244
})

‎src/app/components/survey.analytics.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
2-
import { Model } from "survey-angular";
2+
import { Model } from "survey-core";
33
import { VisualizationPanel } from "survey-analytics";
44

55
@Component({

‎src/app/components/survey.component.ts‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
11
import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
2-
import { StylesManager, Model, SurveyNG } from "survey-angular";
3-
4-
StylesManager.applyTheme("defaultV2");
5-
2+
import { SurveyModel } from "survey-core";
63
@Component({
7-
selector: "survey",
8-
template: `
9-
<div class="survey-container contentcontainer codecontainer">
10-
<div id="surveyElement"></div>
11-
</div>
12-
`,
4+
selector: "survey-container",
5+
template: `<survey [model]='survey'></survey>`,
136
})
147
export class SurveyComponent implements OnInit {
158
@Output() submitSurvey = new EventEmitter<any>();
16-
@Input()
17-
json: object;
9+
10+
@Input() json: object;
1811
result: any;
12+
survey: SurveyModel
1913

2014
ngOnInit() {
21-
const survey = new Model(this.json);
22-
survey.onComplete.add(result => {
15+
this.survey = new SurveyModel(this.json);
16+
this.survey.onComplete.add(result => {
2317
this.submitSurvey.emit(result.data);
2418
this.result = result.data;
2519
});
26-
SurveyNG.render("surveyElement", { model: survey });
2720
}
2821
}

‎src/app/components/survey.creator.component.ts‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, Input, Output, EventEmitter } from "@angular/core";
22
import * as Survey from "survey-core";
33
// import * as SurveyKo from "survey-knockout-ui";
4-
import { SurveyCreator } from "survey-creator-knockout";
4+
import { CreatorBase } from "survey-creator-core";
55
import * as widgets from "surveyjs-widgets";
66
import { init as initCustomWidget } from "./customwidget";
77

@@ -21,30 +21,29 @@ widgets.bootstrapslider(Survey);
2121
initCustomWidget(Survey);
2222

2323
@Component({
24-
selector: "survey-creator",
25-
template: `
26-
<div id="surveyCreatorContainer"></div>
27-
`,
28-
styles: [`
24+
selector: "survey-creator-container",
25+
template: `<div id='surveyCreatorContainer'><svc-creator [model]='creator'></svc-creator></div>`,
26+
styles: [
27+
`
2928
#surveyCreatorContainer {
30-
height: calc(100vh - 125px);
31-
width: 100vw;
29+
height: calc(100vh - 132px);
30+
width: 100%;
3231
}
33-
`]
32+
`
33+
]
3434
})
3535
export class SurveyCreatorComponent {
36-
creator: SurveyCreator;
36+
creator: CreatorBase;
3737
@Input() json: any;
3838
@Output() surveySaved: EventEmitter<Object> = new EventEmitter();
3939
ngOnInit() {
4040
Survey.Serializer.addProperty("questionbase", "popupdescription:text");
4141
Survey.Serializer.addProperty("page", "popupdescription:text");
4242

4343
const options = { showPreviewTab: true, showLogicTab: true };
44-
this.creator = new SurveyCreator(options);
44+
this.creator = new CreatorBase(options);
4545
this.creator.JSON = this.json;
4646
this.creator.saveSurveyFunc = this.saveMySurvey;
47-
this.creator.render("surveyCreatorContainer");
4847
}
4948

5049
saveMySurvey = () => {

‎src/app/pages/creator.page.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<h1>Survey Creator / Form Builder</h1>
2-
<survey-creator
2+
<survey-creator-container
33
[json]="json"
44
(surveySaved)="onSurveySaved($event)"
5-
></survey-creator>
5+
></survey-creator-container>
6+

0 commit comments

Comments
 (0)