diff --git a/package.json b/package.json index d50b6cc..90ac322 100644 --- a/package.json +++ b/package.json @@ -79,5 +79,8 @@ }, "lint-staged": { "*.{js,css,md,ts}": "prettier --write" + }, + "volta": { + "node": "12.22.12" } } diff --git a/src/app/Services/storage/session.service.ts b/src/app/Services/storage/session.service.ts index d17ba52..4c1b80a 100644 --- a/src/app/Services/storage/session.service.ts +++ b/src/app/Services/storage/session.service.ts @@ -1,13 +1,11 @@ -import { catchError } from 'rxjs/operators'; import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; import { SessionStorageService } from './session-storage.service'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Constants } from '../constants'; -// TODO inject service @Injectable() export class SessionService { - private url; + private sessionUrl; constructor( private http: HttpClient, @@ -15,22 +13,18 @@ export class SessionService { ) {} public getUrl(): string { - return this.url; + return this.sessionUrl; } public getSession(credentials: any = null, baseUrl: string) { - this.url = baseUrl + '/ws/rest/v1/session'; + this.sessionUrl = baseUrl + '/ws/rest/v1/session'; + if (credentials && credentials.username) { const base64 = btoa(credentials.username + ':' + credentials.password); this.sessionStorageService.setItem(Constants.CREDENTIALS_KEY, base64); } - return this.http.get(this.url).pipe( - catchError((error) => { - console.log(error); - return error; - }) - ); + return this.http.get(this.sessionUrl); } public deleteSession() { diff --git a/src/app/form-editor/audit-info/audit-info.component.css b/src/app/form-editor/audit-info/audit-info.component.css index 1d58678..a3b4398 100644 --- a/src/app/form-editor/audit-info/audit-info.component.css +++ b/src/app/form-editor/audit-info/audit-info.component.css @@ -1,3 +1,5 @@ .row { - margin-top: 10px; + display: flex; + align-items: baseline; + margin: 0.625rem; } diff --git a/src/app/form-editor/audit-info/audit-info.component.html b/src/app/form-editor/audit-info/audit-info.component.html index 05ac1b7..b10b31f 100644 --- a/src/app/form-editor/audit-info/audit-info.component.html +++ b/src/app/form-editor/audit-info/audit-info.component.html @@ -1,6 +1,6 @@
-

Form Name

+

Form name

-

UUID

+

Form UUID

-

Version

+

Form version

-

Date

+

Date created

-

Date

+

Date changed

+
- + - - + - Form Builder + + AMPATH logo +
-
-
-
+
+ +
+
-
-
- -
@@ -106,11 +174,29 @@ - -
@@ -126,15 +212,28 @@ Question Editor - highlight_off + highlight_off - + @@ -142,8 +241,13 @@ - + @@ -161,18 +265,30 @@
-

+

Question Editor

- highlight_off + highlight_off
- +
@@ -180,7 +296,11 @@

Schema Editor

- +
@@ -197,16 +317,23 @@

Form Viewer
+
- Form Builder + Form Builder This schema contains errors and cannot be properly compiled. Please try to - correct the errors in the schema and re-compile it. + correct the errors in the schema and recompile it.
- +
diff --git a/src/app/form-editor/form-editor/form-editor.component.ts b/src/app/form-editor/form-editor/form-editor.component.ts index b9bf21c..0eff9aa 100644 --- a/src/app/form-editor/form-editor/form-editor.component.ts +++ b/src/app/form-editor/form-editor/form-editor.component.ts @@ -267,7 +267,7 @@ export class FormEditorComponent this.strSchema = JSON.stringify(this.schema, null, '\t'); this.saveDraft(this.schema); this.saveFormMetadata(this.formMetadata); - this.showSuccessToast('Schema Updated!'); + this.showSuccessToast('Schema updated'); }); this.subscription = this.navigatorService diff --git a/src/app/form-editor/form-renderer/form-renderer.component.html b/src/app/form-editor/form-renderer/form-renderer.component.html index ee23fd0..fb90831 100644 --- a/src/app/form-editor/form-renderer/form-renderer.component.html +++ b/src/app/form-editor/form-renderer/form-renderer.component.html @@ -1,13 +1,13 @@
-
+
diff --git a/src/app/form-editor/reference-forms/reference-forms.component.html b/src/app/form-editor/reference-forms/reference-forms.component.html index 3fc6d99..48a1ccb 100644 --- a/src/app/form-editor/reference-forms/reference-forms.component.html +++ b/src/app/form-editor/reference-forms/reference-forms.component.html @@ -1,6 +1,6 @@
diff --git a/src/app/form-editor/schema-editor/schema-editor.component.css b/src/app/form-editor/schema-editor/schema-editor.component.css index 69ba86f..1b11e39 100644 --- a/src/app/form-editor/schema-editor/schema-editor.component.css +++ b/src/app/form-editor/schema-editor/schema-editor.component.css @@ -1,23 +1,57 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + src: local(''), url('../../../assets/roboto-mono.woff') format('woff'); +} + +.editorContainer { + padding: 0rem 1rem 1rem; + background-color: rgb(243 244 246); +} + +.m-4 { + margin: 1rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.text-base { + font-size: 16px; +} -a { - cursor: pointer; - margin: 5px; +.errorContainer { + display: flex; + align-items: center; + justify-content: center; } -a:hover { - color: #01a9ff; +.flexCenter { + display: flex; + align-items: center; } -a > i.material-icons.yellow { - color: #ffa500 !important; +.errorIcon { + font-size: 16px; + margin-right: 0.5rem; } -.material-icons:hover { - color: #5cb85c; +.editor { + height: 100vh; + width: 100%; + overflow: auto; } -.btn-primary { - padding: 10px; - margin-bottom: 10px; +.actionButtons { + display: flex; + align-items: center; + justify-content: space-between; + text-align: center; + padding: 1rem; } diff --git a/src/app/form-editor/schema-editor/schema-editor.component.html b/src/app/form-editor/schema-editor/schema-editor.component.html index 86aae1b..83e6022 100644 --- a/src/app/form-editor/schema-editor/schema-editor.component.html +++ b/src/app/form-editor/schema-editor/schema-editor.component.html @@ -1,67 +1,57 @@ -
-
-
- +
+
+ + error{{ errorMessage }} - code - visibility - +
+
+
+
-
- -
-
-
-
-
- {{ errorMessage }} -
+
+
+
+
+
diff --git a/src/app/form-editor/schema-editor/schema-editor.component.ts b/src/app/form-editor/schema-editor/schema-editor.component.ts index c7c6637..08e9355 100644 --- a/src/app/form-editor/schema-editor/schema-editor.component.ts +++ b/src/app/form-editor/schema-editor/schema-editor.component.ts @@ -124,6 +124,7 @@ export class SchemaEditorComponent implements OnInit, OnDestroy { .getReferencedFormsSchemasArray() .subscribe((refFormArray) => (this.referencedForms = refFormArray)); + this.editor.getEditor().setFontSize(16); this.editor.getEditor().setOptions({ fontFamily: 'Roboto Mono', printMargin: false, @@ -131,7 +132,6 @@ export class SchemaEditorComponent implements OnInit, OnDestroy { }); this.editor.setTheme('chrome'); this.editor.setMode('json'); - this.editor.getEditor().setFontSize(16); this.ns.getRawSchema().subscribe((schema) => { if (!_.isEmpty(schema) && !this.correctSchemaMode) { @@ -172,7 +172,7 @@ export class SchemaEditorComponent implements OnInit, OnDestroy { ); } catch (e) { compiledSchema = e; - this.errorMessage = 'Invalid JSON schema. ' + e; + this.errorMessage = `${e}`; } const schema = JSON.parse(JSON.stringify(compiledSchema)); @@ -186,7 +186,7 @@ export class SchemaEditorComponent implements OnInit, OnDestroy { } } - reCompile() { + recompileSchema() { const editedSchema = this.editor.getEditor().getValue(); const rawSchema = _.cloneDeep(editedSchema); const referencedForms = JSON.parse(rawSchema).referencedForms; @@ -214,7 +214,7 @@ export class SchemaEditorComponent implements OnInit, OnDestroy { } showSnackbar() { - this.snackbar.open('Copied to clipboard', '', { duration: 1200 }); + this.snackbar.open('Schema copied to clipboard', '', { duration: 1200 }); } ngOnDestroy() {} diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index f182847..9c75acc 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -18,9 +18,13 @@ export class LoginComponent implements OnInit { hasInvalidCredentials = false; selectedValue: string; message: string; - corsError: string; selectedBaseUrl = ''; - baseUrls: string[] = ['https://ngx.ampath.or.ke/amrs', 'Enter a custom URL']; + baseUrls: string[] = [ + 'Enter a custom URL', + 'https://ngx.ampath.or.ke/amrs', + 'https://data.kenyahmis.org:8500/openmrs', + 'https://dev3.openmrs.org/openmrs' + ]; ngOnInit() {} diff --git a/src/app/view-forms/view-forms.component.css b/src/app/view-forms/view-forms.component.css index 623f9bf..cb6cb48 100644 --- a/src/app/view-forms/view-forms.component.css +++ b/src/app/view-forms/view-forms.component.css @@ -1,8 +1,19 @@ +.addButton > span { + display: flex !important; + align-items: center !important; +} + +.container-f { + margin-top: 4rem; +} + .panel { background-color: #fff; box-shadow: 0px 2px 2px #aaa; border-color: lightgray; + font-family: 'Inter', sans-serif; } + .panel-table .panel-body { padding: 0; /* background-color:#fff; @@ -14,8 +25,12 @@ margin: 0; } +.panel-table .panel-body .table-bordered > thead > tr { + font-weight: 900 !important; +} + .panel-table .panel-body .table-bordered > thead > tr > th:first-of-type { - text-align: center; + text-align: left; width: 100px; } @@ -43,8 +58,11 @@ .panel-primary > .panel-heading { color: #fff; - background-color: #3f51b5; - border-color: #808080; + /* background-color: #3f51b5; */ + background-color: rgb(243 244 246); + /* background-color: rgb(229 231 235); */ + /* border-color: #808080; */ + border-color: lightgray; } /* @@ -71,18 +89,22 @@ .stylish-input-group .input-group-addon { background: white !important; } + .stylish-input-group .form-control { border-right: 0; box-shadow: 0 0 0; border-color: #ccc; } + .stylish-input-group button { border: 0; background: transparent; } + .material-icons.edit { color: green; } + .navbar-btn { margin: 5px 5px 0px 5px; } @@ -90,24 +112,29 @@ .btn.btn-circle { border-radius: 5px; } + .btn-create { color: #1ac91a; } + /* .navbar-nav.navbar-right .btn:not(.collapsed) { background-color: rgb(111, 84, 153); border-color: rgb(111, 84, 153); color: rgb(255, 255, 255); } */ + a:hover { text-decoration: none; } + .panel-title { color: black; } + .restoreMsg { - margin-top: 10px; - padding-left: 30px; - padding-right: 30px; + display: flex; + justify-content: center; + margin: 2rem; } .menuItem { @@ -122,23 +149,34 @@ a:hover { color: white; font-weight: 600; } + .space { margin-left: 50px; } + mat-card { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; margin: 5px 5px 5px 50px; } + .fill { flex: 1 1 auto; } + .dropdown-menu { color: black; font-family: 'Roboto'; font-weight: 500; } + .dropdown-menu > li { margin-left: 5px; + display: flex; + align-items: center; +} + +.logoutLink:hover { + background-color: rgba(243, 244, 246); } diff --git a/src/app/view-forms/view-forms.component.html b/src/app/view-forms/view-forms.component.html index 12be3b3..31f243b 100644 --- a/src/app/view-forms/view-forms.component.html +++ b/src/app/view-forms/view-forms.component.html @@ -1,56 +1,153 @@ - Form Builder - - - - - - - - + + AMPATH logo +
+ + + + +
+ +
+
+
+
+ + {{ fullName }} + +
+ + + Sign out + + +
+
+ +
- -
- - - {{ restoreMessage }} - -
-
- - + +
+

+ Draft form found +

+

+ {{ draftForm || 'An untitled form' }} was last edited on + {{ dateDraftWasLastOpened | date: 'medium' }}. +

+
+ + +
-
+
+
+ +
+
+ +
- @@ -59,20 +156,38 @@
- - + +
-
@@ -88,64 +203,102 @@ Version Published Retired - Actions + Form Actions - - + + " + > {{ form.name }} {{ form.version }} - - + + - - + + - - - note_add - + " + > + - 0 || form.resources[0]?.valueReference - "> - - mode_edit - - - get_app - + " + > +
+ + +
- - - {{ loadingMessage }} - - - - - - -
- +
diff --git a/src/app/view-forms/view-forms.component.ts b/src/app/view-forms/view-forms.component.ts index a0230ae..bc1312b 100644 --- a/src/app/view-forms/view-forms.component.ts +++ b/src/app/view-forms/view-forms.component.ts @@ -25,14 +25,17 @@ export class ViewFormsComponent implements OnInit { loggingOut = false; searchValue = ''; loadingMessage = 'Loading Forms...'; - restoreMessage = ''; draftAvailable = false; draft: any; rawDraft: any; formsWithoutSchemas: any[] = []; subscription: Subscription; + draftForm = ''; username: string; + fullName: string; searchFilter: string; + isMenuExpanded = false; + dateDraftWasLastOpened: Date; constructor( private fetchAllFormsService: FetchAllFormsService, private router: Router, @@ -44,6 +47,7 @@ export class ViewFormsComponent implements OnInit { ) { const user = sessionStorageService.getObject('user'); this.username = user.username; + this.fullName = user.person.display; } ngOnInit() { @@ -65,14 +69,10 @@ export class ViewFormsComponent implements OnInit { if (this.ls.getObject(Constants.TIME_STAMP)) { timestamp = this.ls.getObject(Constants.TIME_STAMP); } - this.restoreMessage = `Form ${ - this.ls.getObject(Constants.FORM_METADATA).name - } was last worked on at ${new Date( - parseInt(timestamp, 10) - ).toLocaleDateString()} - ${new Date( - parseInt(timestamp, 10) - ).toLocaleTimeString()} Would you like to continue working on this?`; + + this.dateDraftWasLastOpened = new Date(parseInt(timestamp, 10)); + + this.draftForm = this.ls.getObject(Constants.FORM_METADATA).name; } } @@ -119,6 +119,10 @@ export class ViewFormsComponent implements OnInit { } } + toggleMenu() { + this.isMenuExpanded = !this.isMenuExpanded; + } + fetchPOCForms() { this.subscription = this.fetchAllFormsService .fetchAllPOCForms() diff --git a/src/assets/inter.woff b/src/assets/inter.woff new file mode 100644 index 0000000..4fcb4b5 Binary files /dev/null and b/src/assets/inter.woff differ diff --git a/src/assets/logo.svg b/src/assets/logo.svg index d297292..186f032 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,24 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/src/assets/roboto-mono.woff b/src/assets/roboto-mono.woff new file mode 100644 index 0000000..f319fbf Binary files /dev/null and b/src/assets/roboto-mono.woff differ