improved spreadsheet editing

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

core/src/main/java/de/srsoftware/umbrella/core/model/Project.java

@@ -17,7 +17,7 @@ public class Project implements Mappable {
 	private final Map<Long,Member> members;
 	private final Collection<Status> allowedStates;
 	private boolean showClosed;
-	private final Long companyId;
+	private Long companyId;
 	private int status;
 	private String name;
 	private final long id;
@@ -96,6 +96,7 @@ public class Project implements Mappable {
 	public Project patch(JSONObject json) {
 		for (var key : json.keySet()){
 			switch (key){
+				case COMPANY_ID:  companyId   = json.getLong(COMPANY_ID); break;
 				case DESCRIPTION: description = json.getString(key); break;
 				case NAME:        name        = json.getString(key); break;
 				case SHOW_CLOSED: showClosed  = json.getBoolean(SHOW_CLOSED); break;

frontend/src/Components/MarkdownDisplay.svelte

@@ -2,7 +2,15 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { t } from '../translations.svelte';
 
-	let { classes='markdown', markdown=$bindable({source:'',rendered:''}), onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props();
+	let {
+		classes='markdown',
+		markdown=$bindable({source:'',rendered:''}),
+		onclick = null,
+		oncontextmenu = e => {},
+		sheet = null,
+		title='',
+		wrapper = 'div'
+	} = $props();
 	let jspreadsheet = null;
 	const regex = /@startsheet[\s\S]*?@endsheet/g;
 	const number = /^[0-9.-]+$/
@@ -31,16 +39,16 @@
 		if (!markdown.rendered) return;
 		let sheets = document.getElementsByClassName('spreadsheet');
 		for (let i = 0; i < sheets.length; i++) {
-			let sheet = sheets[i];
-			let raw = sheet.innerHTML.trim();
+			let current_sheet = sheets[i];
+			let raw = current_sheet.innerHTML.trim();
 			if (!jspreadsheet) {
-				sheet.innerHTML = t('Loading spreadsheet library…');
+				current_sheet.innerHTML = t('Loading spreadsheet library…');
 				let module = await import('jspreadsheet-ce'); // path or package name
 				await import('jspreadsheet-ce/dist/jspreadsheet.css');
 				jspreadsheet = module.default ?? module;
 			}
 			if (!jspreadsheet) break; // break loop if library fails to load
-			sheet.innerHTML = t('Processing spreadsheet data…');
+			current_sheet.innerHTML = t('Processing spreadsheet data…');
 
 
             // Use parseCSV from the helpers
@@ -60,14 +68,25 @@
                 render: formatCell,
                 width:`${len}0px`
             }});
+            var w = window.innerWidth;
+            if (classes == 'preview') w = w/2;
 			let config = {
                 worksheets : [{
                     data:parsed,
-                    columns
+                    columns,
+			        tableOverflow: true,
+			        tableWidth: `${w}px`,
                 }],
-                onchange   : (instance, cell, x, y, value) => update(instance, i)
+                onchange   : (instance, cell, x, y, value) => update(instance, i),
+                oneditionstart : (instance, cell, x, y) => oncontextmenu({sheet:current_sheet.id, x,y})
 			};
-            let wb = jspreadsheet(document.getElementById(sheet.id), config);
+            let wb = jspreadsheet(document.getElementById(current_sheet.id), config);
+            if (sheet && sheet.sheet == current_sheet.id) {
+                let cell = wb[0].getCellFromCoords(sheet.x, sheet.y);
+                cell.scrollIntoView({block:'center'});
+				wb[0].updateSelectionFromCoords(sheet.x, sheet.y);
+				wb[0].openEditor(cell);
+            }
 		}
 	}
 

frontend/src/Components/MarkdownEditor.svelte

@@ -20,6 +20,7 @@
     let start     = 0;
     let stored_source = $state(store_id ? localStorage.getItem(store_id) : null);
     let timer     = null;
+    let sheet     = null;
 
     async function applyEdit(){
         let success = await onSet(editValue.source);
@@ -80,10 +81,13 @@
 
 
     function oncontextmenu(evt){
-         evt.preventDefault();
-         evt.stopPropagation();
-         startEdit();
-         return false;
+        if (evt.target) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+        sheet = evt.sheet ? evt : null; // store position of activated cell to focus after editing starts
+        startEdit();
+        return false;
     }
 
     function onmousedown(evt){
@@ -96,6 +100,10 @@
         measured(evt, evt.timeStamp - start);
     }
 
+    function onresize(evt){
+        console.log('onresize()',evt);
+    }
+
     function ontouchstart(evt){
         evt.preventDefault();
         start = evt.timeStamp;
@@ -137,8 +145,8 @@
     {#if stored_source}
     <span id="restore_markdown" onclick={restore} class="hint">{t('unsaved_content')}</span>
     {/if}
-    <textarea bind:value={editValue.source} onkeyup={typed} autofocus={!simple}></textarea>
-    <Display classes="preview" bind:markdown={editValue} />
+    <textarea bind:value={editValue.source} onkeyup={typed} onresize={onresize} data="test" autofocus={!simple}></textarea>
+    <Display classes="preview" bind:markdown={editValue} sheet={sheet} />
     {#if !simple}
     <div class="buttons">
         <button class="cancel" onclick={e => editing = false}>{t('cancel')}</button>
@@ -146,6 +154,6 @@
     </div>
     {/if}
 {:else}
-    <Display classes={{editable}} markdown={value} {onclick} {oncontextmenu}  title={t('right_click_to_edit')} wrapper={type} />
+    <Display classes={{editable}} markdown={value} {onclick} {oncontextmenu} title={t('right_click_to_edit')} wrapper={type} />
 {/if}
 </div>

frontend/src/routes/project/View.svelte

@@ -6,6 +6,7 @@
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte';
 
+    import CompanySelector   from '../../Components/CompanySelector.svelte';
     import LineEditor        from '../../Components/LineEditor.svelte';
     import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
     import PermissionEditor  from '../../Components/PermissionEditor.svelte';
@@ -211,6 +212,11 @@
     {#if project.company}
         <div>{t('company')}</div>
         <div class="company">{project.company.name}</div>
+    {:else}
+    {#if showSettings}
+        <div>{t('company')}</div>
+        <span><CompanySelector caption={t('select_company')} onselect={c => update({company_id:c.id})} /></span>
+    {/if}
     {/if}
     <div>{t('context')}</div>
     <div>

project/src/main/java/de/srsoftware/umbrella/project/SqliteDb.java

@@ -251,7 +251,7 @@ CREATE TABLE IF NOT EXISTS {0} (
 					}
 					if (prj.isDirty()){
 						update(TABLE_PROJECTS).set(NAME, DESCRIPTION, STATUS, COMPANY_ID, SHOW_CLOSED).where(ID,equal(prj.id())).prepare(db)
-								.apply(prj.name(),prj.description(),prj.status(),prj.companyId(),prj.showClosed())
+								.apply(prj.name(),prj.description(),prj.status(),prj.companyId().orElse(null),prj.showClosed())
 								.execute();
 						prj.clean();
 					}

web/src/main/resources/web/css/bloodshed-color.css

@@ -334,6 +334,10 @@ tr:hover .taglist .tag button {
 	border-left: 1px solid #333 !important;
 }
 
+.jss_worksheet tr:hover td input{
+	color: yellow;
+}
+
 @media screen and (max-width: 900px) {
 	#app nav a{
 		background: black;

web/src/main/resources/web/css/default-color.css

@@ -325,6 +325,10 @@ tr:hover .taglist .tag button {
 	border-left: 1px solid #333 !important;
 }
 
+.jss_worksheet tr:hover td input{
+	color: black;
+}
+
 @media screen and (max-width: 900px) {
 	#app nav a{
 		background: black;