#37 - Write SP2 files

src/Gui/sp-gui.html/sp-gui-angular/@sp/dbmanager/src/lib/dbmanager.service.ts

@@ -94,7 +94,7 @@ export class DbmanagerService {
     private oneDriveFS: OneDriveService,
     private localDriveFS: LocalDriveService,
     private snackBar: MatSnackBar
-  ) {}
+  ) { }
 
   private get fileService(): FileService | null {
     switch (this.currentFile?.source) {
@@ -127,21 +127,22 @@ export class DbmanagerService {
     return result;
   }
   public async LoadFromService({ meta, source }: RecentFileInfo): Promise<Error | null> {
-    this.workInProgress.next(true);
-    this.currentFile = { meta, source };
-    if (source == "unknown") {
-      this.workInProgress.next(false);
-      return null;
-    }
-    const file = await this.fileService?.getFileContent(meta);
-    if (!file) {
-      this.workInProgress.next(false);
-      return new Error("Unable to load file content from service!");
-    }
     try {
+      this.workInProgress.next(true);
+      this.currentFile = { meta, source };
+      if (source == "unknown") {
+        this.workInProgress.next(false);
+        return null;
+      }
+      const file = await this.fileService?.getFileContent(meta);
+      if (!file) {
+        return new Error("Unable to load file content from service!");
+      }
       return this.Load({ file, meta, source });
     } catch (err) {
       return err as Error;
+    } finally {
+      this.workInProgress.next(false);
     }
   }
 
@@ -200,7 +201,7 @@ export class DbmanagerService {
     const root = doc.querySelector("ScacchiPainterDatabase") as Element;
     root.setAttribute("version", "0.1.0.2");
     root.setAttribute("name", "Scacchi Painter 2 Database");
-    root.setAttribute("lastIndex", this.CurrentIndex.toFixed(1));
+    root.setAttribute("lastIndex", this.CurrentIndex.toFixed(0));
     problems.forEach((p) => root.appendChild(p));
     return doc;
   }

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/app.component.less

@@ -1,4 +1,4 @@
-@import "../../../mediaquery";
+@import "../../../mediaquery.less";
 
 .sidenav-container {
   display: contents;
@@ -15,9 +15,11 @@
 
 .container {
   display: block;
+  .containerMinHeight();
 }
 
 .app-title{
+  flex: 1 1 0px;
   user-select: none;
   -webkit-user-select: none;
   -webkit-app-region: drag;

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/database-list/database-list.component.less

@@ -3,8 +3,8 @@
 
 :host{
   position: relative;
-  min-height: calc(100vh - @maintoolbarH);
   display: grid;
+  .containerMinHeight();
 
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/edit-problem/edit-problem.component.less

@@ -32,7 +32,7 @@
 .toolbar();
 
 .problem-editor {
-  min-height: calc(100vh - @maintoolbarH);
+  .containerMinHeight();
   display: flex;
   flex-direction: column;
 

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/edit-problem/edit-problem.component.ts

@@ -188,7 +188,7 @@ export class EditProblemComponent implements OnInit, OnDestroy, AfterViewInit {
     this.subscribe = this.engine.solution$.pipe(
       skip(1) // skip first execution to avoid the reset of text at load
     ).subscribe((msg) => {
-      this.rows.push(...msg.replace(/\r/g, "").split("\n"));
+      this.rows.push(...msg.replace(/[\r\n]+/g, "\n").split("\n"));
       this.rows$ubject.next(this.rows);
       if (this.current.Problem) {
         this.current.Problem.htmlSolution = this.toHtml(this.rows);

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/landing/landing.component.html

@@ -1,8 +1,8 @@
-<div fullscreen class="landing">
-  <section role="cell" class="recents">
+<div class="landing">
+  <section role="listbox" class="recents">
     <app-recents></app-recents>
   </section>
-  <section role="cell" class="news">
+  <section role="article" class="news">
     <div [innerHTML]="news | markdown"></div>
   </section>
 </div>

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/landing/landing.component.less

@@ -1,14 +1,21 @@
+@import "../../../../mediaquery.less";
+
 .landing{
   display: flex;
   flex-direction: row;
+  .containerMinHeight();
+
+  @media (max-width: (@smallScreen)){
+    flex-direction: column;
+  }
 
   .recents{
     padding: 1rem;
     flex: 0 0 auto;
     width: 30rem;
     border-right: solid 1px rgba(255,255,255,.2);
   }
-  .news{
+  .news {
     padding: 1rem;
     flex: 1 1 auto;
   }

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/recents/recents.component.html

@@ -2,6 +2,6 @@ <h1>Recent files</h1>
 <ul>
   <li *ngFor="let recent of recents" (click)="clickOnRecent(recent)">
     <lib-dbsource [source]="recent.source"></lib-dbsource>
-    <span>{{recent.meta.itemName}}</span>
+    <span class="filename">{{fullpath(recent)}}</span>
   </li>
 </ul>

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/recents/recents.component.less

@@ -23,3 +23,11 @@ li {
     background-color: alpha(#144e6c, 0.5);
   }
 }
+
+.filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: right;
+  white-space: nowrap;
+}

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/app/recents/recents.component.ts

@@ -10,6 +10,9 @@ import { RecentFileInfo } from "@sp/host-bridge/src/lib/fileService";
 })
 export class RecentsComponent implements OnInit {
   recents: RecentFileInfo[] = [];
+  fullpath(recent: RecentFileInfo) {
+    return recent.meta.fullPath.replace(/^\//, "");
+  }
   constructor(private db: DbmanagerService, private router: Router) {
     this.recents = JSON.parse(localStorage.getItem("spx.recents") ?? "[]") as RecentFileInfo[];
   }
@@ -18,9 +21,13 @@ export class RecentsComponent implements OnInit {
   }
 
   async clickOnRecent(fInfo: RecentFileInfo) {
-    const result = await this.db.LoadFromService(fInfo);
-    if (!(result instanceof Error)) {
-      this.router.navigate(["/list"]);
+    try {
+      const result = await this.db.LoadFromService(fInfo);
+      if (!(result instanceof Error)) {
+        this.router.navigate(["/list"]);
+      }
+    } catch(err) {
+
     }
   }
 }

src/Gui/sp-gui.html/sp-gui-angular/@sp/gui/src/assets/release-notes.md

@@ -1,5 +1,17 @@
 # Release Notes
 
+## 0.0.9
+
+- Fixed Save to local file: [#129](https://github.com/dardino/scacchi-painter/issues/129) 
+- Menu item `Configuration` now is always visible
+- The button `Save` in `save-as` page is now aligned to the field
+- Main toolbar is positioned as stiky
+- Better layout management for landing page
+- "Recent files" section is now as tall as its container
+- Clicking in one of the recent files now does not crash if any error occurs
+- Engine toolbar now scrolls in small devices
+- Added the ability to open an sp2 file and save it, However, since not all possible cases have been tested, it is a good idea to make a copy of the file before opening it
+
 ## 0.0.8
 
 - Added this relase-note page

src/Gui/sp-gui.html/sp-gui-angular/@sp/mediaquery.less

@@ -3,3 +3,7 @@
 
 @boardwidthSM: 60vh;
 @maintoolbarH: 4rem;
+
+.containerMinHeight() {
+  min-height: calc(100vh - @maintoolbarH);
+}

src/Gui/sp-gui.html/sp-gui-angular/@sp/ui-elements/src/lib/dbsource/dbsource.component.html

@@ -1 +1 @@
-<span [ngClass]="source">{{sourceDesc}}</span>
+<span class="source" [ngClass]="source">{{sourceDesc}}</span>

src/Gui/sp-gui.html/sp-gui-angular/@sp/ui-elements/src/lib/dbsource/dbsource.component.css → src/Gui/sp-gui.html/sp-gui-angular/@sp/ui-elements/src/lib/dbsource/dbsource.component.less

@@ -1,11 +1,13 @@
 
-.unknown,.dropbox,.onedrive, .local {
+.source {
   display: inline-block;
   border: solid 1px #c2c2c2;
   margin: 0;
-  padding: .2rem;
-  border-radius:.2rem;
+  padding: .2em;
+  border-radius: 1em .2em 1em .2em;
   font-size: smaller;
+  width: 5em;
+  text-align: center;
 }
 .unknown {
   background-color: rgba(0, 0, 0, 0.5);

src/Gui/sp-gui.html/sp-gui-angular/@sp/ui-elements/src/lib/dbsource/dbsource.component.ts

@@ -4,7 +4,7 @@ import { AvaliableFileServices } from '@sp/host-bridge/src/lib/fileService';
 @Component({
   selector: 'lib-dbsource',
   templateUrl: './dbsource.component.html',
-  styleUrl: './dbsource.component.css'
+  styleUrl: './dbsource.component.less'
 })
 export class DbsourceComponent {
 

src/Gui/sp-gui.html/sp-gui-angular/CHANGELOG.md

@@ -2,11 +2,17 @@
 
 ## Next
 
+## 0.0.9
+
 - [x] BugFix: [#129](https://github.com/dardino/scacchi-painter/issues/129) Save to local file
 - [x] Some other smells:
-  - [ ] Menu item `Configuration` now is always visible
-  - [ ] The button `Save` in `save-as` page is now aligned to the field
+  - [x] Menu item `Configuration` now is always visible
+  - [x] The button `Save` in `save-as` page is now aligned to the field
 - [x] Main toolbar as stiky
+- [x] Better layout management
+- [x] "Recent files" section is now as tall as its container
+- [x] Clicking in one of the recent files now does not crash if any error occurs
+- [x] Fix [#37](https://github.com/dardino/scacchi-painter/issues/37) Write SP2 files
 
 ## 0.0.8
 

src/Gui/sp-gui.html/sp-gui-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sp-gui-angular",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "engines": {
     "node": ">=20"
   },

src/Gui/sp-gui.html/sp-gui-electron/backend/solver/PopeyeSolver.ts

@@ -1,18 +1,18 @@
-import { ISolver } from "./Solver";
-import { IApplicationConfig } from "../settings/IApplicationConfig";
+import child, { spawn } from "child_process";
+import fs from "fs";
+import os from "os";
+import path from "path";
+import {
+  TwinModes,
+  TwinTypes,
+} from "../../../sp-gui-angular/@sp/dbmanager/src/lib/helpers";
 import {
-  Problem,
   Piece,
+  Problem,
 } from "../../../sp-gui-angular/@sp/dbmanager/src/lib/models";
 import { EOF } from "../../../sp-gui-angular/@sp/host-bridge/src/lib/bridge-global";
-import {
-  TwinTypes,
-  TwinModes,
-} from "../../../sp-gui-angular/@sp/dbmanager/src/lib/helpers";
-import child, { spawn } from "child_process";
-import fs from "fs";
-import path from "path";
-import os from "os";
+import { IApplicationConfig } from "../settings/IApplicationConfig";
+import { ISolver } from "./Solver";
 
 const txtName = `problem.txt`;
 
@@ -53,7 +53,7 @@ export class PopeyeSolver implements ISolver {
 
     this.writeTempFile(problem)
       .then(async (textContent) => {
-        cbOut(textContent.join("\r"));
+        cbOut(textContent.join("\n"));
         this.childProcess = await this.runProcess();
 
         if (!this.childProcess) {