diff --git a/rubberduckvba.client/src/app/routes/indenter/indenter.component.html b/rubberduckvba.client/src/app/routes/indenter/indenter.component.html index f09964e..d2ec415 100644 --- a/rubberduckvba.client/src/app/routes/indenter/indenter.component.html +++ b/rubberduckvba.client/src/app/routes/indenter/indenter.component.html @@ -1,4 +1,3 @@ -

Online Indenter

@@ -14,7 +13,7 @@

Online Indenter

-
+
@@ -411,16 +410,16 @@

Looking for a programmatic approach?

Try the API:
    -
  1. Request (GET) api.rubberduckvba.com/indenter/defaults to get a JSON object for the model (or copy it from below);
    2. +
  2. Request (GET) {{apiBaseUrl}}indenter/defaults to get a JSON object for the model (or copy it from below);
  3. Provide the code to be indented in the 'Code' property; use \n for newline characters;
    4. -
  4. Post (POST) the JSON object to api.rubberduckvba.com/indenter/indent to get the indented code back as an array of strings.
    5. +
  5. Post (POST) the JSON object to {{apiBaseUrl}}indenter/indent to get the indented code back as an array of strings.
-
@@ -428,7 +427,7 @@

Looking for a programmatic approach?

-
+

Try it right here!

@@ -444,20 +443,30 @@

Try it right here!

Indent
- - - - - - +
- +
+
 Reset to defaults
+
+
+
+ +
+
+
+
+
+ Rubberduck logo +
diff --git a/rubberduckvba.client/src/app/routes/indenter/indenter.component.ts b/rubberduckvba.client/src/app/routes/indenter/indenter.component.ts index 78f7244..c5a606f 100644 --- a/rubberduckvba.client/src/app/routes/indenter/indenter.component.ts +++ b/rubberduckvba.client/src/app/routes/indenter/indenter.component.ts @@ -1,16 +1,28 @@ import { Component, OnInit } from "@angular/core"; import { FaIconLibrary } from "@fortawesome/angular-fontawesome"; import { fas } from "@fortawesome/free-solid-svg-icons"; -import { IndenterViewModel } from "../../model/indenter.model"; +import { IndenterViewModel, IndenterViewModelClass } from "../../model/indenter.model"; import { ApiClientService } from "../../services/api-client.service"; +import { environment } from "../../../environments/environment"; + +export interface IndenterOptionGroups { + isExpanded: boolean; + isIndentOptionsExpanded: boolean; + isOutdentOptionsExpanded: boolean; + isAlignmentOptionsExpanded: boolean; + isCommentOptionsExpanded: boolean; + isVerticalOptionsExpanded: boolean; + isApiAboutBoxExpanded: boolean; +} @Component({ selector: 'app-indenter', templateUrl: './indenter.component.html', }) -export class IndenterComponent implements OnInit { +export class IndenterComponent implements OnInit, IndenterOptionGroups { private _model!: IndenterViewModel; public wasCopied: boolean = false; + public wasTemplateCopied: boolean = false; constructor(fa: FaIconLibrary, private service: ApiClientService) { @@ -18,27 +30,136 @@ export class IndenterComponent implements OnInit { } ngOnInit(): void { + const localModel = localStorage.getItem('indenter.model'); + if (localModel) { + this.model = JSON.parse(localModel); + } + + const localOptionGroups = localStorage.getItem('indenter.options'); + if (localOptionGroups) { + const optionGroups = JSON.parse(localOptionGroups); + this.isExpanded = optionGroups.isExpanded; + this.isIndentOptionsExpanded = optionGroups.isIndentOptionsExpanded; + this.isOutdentOptionsExpanded = optionGroups.isOutdentOptionsExpanded; + this.isAlignmentOptionsExpanded = optionGroups.isAlignmentOptionsExpanded; + this.isCommentOptionsExpanded = optionGroups.isCommentOptionsExpanded; + this.isVerticalOptionsExpanded = optionGroups.isVerticalOptionsExpanded; + this.isApiAboutBoxExpanded = optionGroups.isApiAboutBoxExpanded; + } + + this.isLocalStorageOK = localModel != null || localOptionGroups != null; + if (!this.isLocalStorageOK) { + this.getDefaults(); + } + } + + public getDefaults(): void { this.service.getIndenterDefaults().subscribe(model => { - this._model = model; + this.model = model; }); } - public isExpanded: boolean = false; - public isIndentOptionsExpanded: boolean = true; - public isOutdentOptionsExpanded: boolean = false; - public isAlignmentOptionsExpanded: boolean = false; - public isCommentOptionsExpanded: boolean = false; - public isVerticalOptionsExpanded: boolean = false; - public isApiAboutBoxExpanded: boolean = true; + private _isExpanded: boolean = false; + private _isIndentOptionsExpanded: boolean = true; + private _isOutdentOptionsExpanded: boolean = false; + private _isAlignmentOptionsExpanded: boolean = false; + private _isCommentOptionsExpanded: boolean = false; + private _isVerticalOptionsExpanded: boolean = false; + private _isApiAboutBoxExpanded: boolean = false; public isIndenterBusy: boolean = false; + public isLocalStorageOK: boolean = false; public get model(): IndenterViewModel { return this._model; } + private set model(value: IndenterViewModel) { + this._model = value; + this.invalidateClipboard(); + if (this.isLocalStorageOK) { + localStorage.setItem('indenter.model', JSON.stringify(this.model)) + }; + } + public get asJson(): string { - return JSON.stringify(this._model); + const copy = new IndenterViewModelClass(this._model); + copy.indentedCode = ''; + return JSON.stringify(copy); + } + + public get isExpanded(): boolean { + return this._isExpanded; + } + public set isExpanded(value: boolean) { + this._isExpanded = value; + this.saveOptions(); + } + public get isIndentOptionsExpanded(): boolean { + return this._isIndentOptionsExpanded; + } + + public set isIndentOptionsExpanded(value: boolean) { + this._isIndentOptionsExpanded = value; + this.saveOptions(); + } + public get isCommentOptionsExpanded(): boolean { + return this._isCommentOptionsExpanded; + } + public set isCommentOptionsExpanded(value: boolean) { + this._isCommentOptionsExpanded = value; + this.saveOptions(); + } + public get isVerticalOptionsExpanded(): boolean { + return this._isVerticalOptionsExpanded; + } + public set isVerticalOptionsExpanded(value: boolean) { + this._isVerticalOptionsExpanded = value; + this.saveOptions(); + } + + public get isApiAboutBoxExpanded(): boolean { + return this._isApiAboutBoxExpanded; + } + public set isApiAboutBoxExpanded(value: boolean) { + this._isApiAboutBoxExpanded = value; + this.saveOptions(); + } + + public get isOutdentOptionsExpanded(): boolean { + return this._isOutdentOptionsExpanded; + } + public set isOutdentOptionsExpanded(value: boolean) { + this._isOutdentOptionsExpanded = value; + this.saveOptions(); + } + public get isAlignmentOptionsExpanded(): boolean { + return this._isAlignmentOptionsExpanded; + } + public set isAlignmentOptionsExpanded(value: boolean) { + this._isAlignmentOptionsExpanded = value; + this.saveOptions(); + } + + private get asOptionGroups(): IndenterOptionGroups { + return { + isExpanded: this.isExpanded, + isIndentOptionsExpanded: this.isIndentOptionsExpanded, + isAlignmentOptionsExpanded: this.isAlignmentOptionsExpanded, + isApiAboutBoxExpanded: this.isApiAboutBoxExpanded, + isCommentOptionsExpanded: this.isCommentOptionsExpanded, + isOutdentOptionsExpanded: this.isOutdentOptionsExpanded, + isVerticalOptionsExpanded: this.isVerticalOptionsExpanded + }; + } + + private saveModel(): void { + if (this.isLocalStorageOK) { + localStorage.setItem('indenter.model', JSON.stringify(this.model)); + } + } + private saveOptions(): void { + localStorage.setItem('indenter.options', JSON.stringify(this.asOptionGroups)); } public indent(): void { @@ -47,19 +168,32 @@ export class IndenterComponent implements OnInit { this.model.indentedCode = vm.indentedCode; this.model.code = vm.indentedCode; this.isIndenterBusy = false; - }); - } - public clear(): void { - this.model.code = ''; + this.invalidateClipboard(); + this.saveModel(); + this.saveOptions(); + }); } public copy(): void { navigator.clipboard.writeText(this.model.code).then(e => this.wasCopied = true); } + public copyTemplate(): void { + navigator.clipboard.writeText(this.asJson).then(e => this.wasTemplateCopied = true); + } + + private invalidateClipboard(): void { + this.wasCopied = false; + this.wasTemplateCopied = false; + } + + public get apiBaseUrl(): string { + return environment.apiBaseUrl.replace('https://', ''); + } public onModelChanged(code: string): void { this.model.code = code; - this.wasCopied = false; + this.invalidateClipboard(); + this.saveModel(); } }