Merge branch 'feature/parent_selector' into dev

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

.gitea/workflows/docker.yaml

@@ -53,8 +53,10 @@ jobs:
         run: |
           TAGS="$(curl -s -u "${{ secrets.REGISTRY_USER }}:${{ secrets.REGISTRY_PASS }}" https://${{ secrets.REGISTRY_PATH }}/v2/umbrella/tags/list | jq -r ".tags[]")"
           COUNT=$(echo "$TAGS" | wc -l)
+          echo found $COUNT tags: $TAGS
           if [ $COUNT -gt 10 ]; then
             REMAIN=$((COUNT - 10))
+            echo $REMAIN tags will be kept!
             echo "$TAGS" | head -n $REMAIN > /tmp/old_tags
           else
             echo less than 10 tags, skipping cleanup

core/src/main/java/de/srsoftware/umbrella/core/constants/Field.java

@@ -15,6 +15,7 @@ public class Field {
 	public static final String BODY         = "body";
 
 	public static final String CACHE_CONTROL          = "Cache-Control";
+	public static final String CHILDREN               = "Children";
 	public static final String CODE                   = "code";
 	public static final String COMMENT                = "comment";
 	public static final String COMPANY                = "company";

core/src/main/java/de/srsoftware/umbrella/core/constants/Path.java

@@ -34,6 +34,7 @@ public class Path {
 	public static final String OPTION = "option";
 
 	public static final String PAGE              = "page";
+	public static final String PARENT_CANDIDATES = "parent_candidates";
 	public static final String PASSWORD          = "password";
 	public static final String PERMISSIONS       = "permissions";
 	public static final String PROJECT           = "project";

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

@@ -144,4 +144,9 @@ public class Project implements Mappable {
 		map.put(TAG_COLORS,tagColors);
 		return map;
 	}
+
+	@Override
+	public String toString() {
+		return name();
+	}
 }

frontend/src/routes/notes/Index.svelte

@@ -33,6 +33,7 @@
             authors    = {...authors, ...data.authors};
             loader.offset += loader.limit;
             loader.active  = false;
+            console.log({authors});
             yikes();
             if (Object.keys(data.notes).length) onscroll(null); // when notes were received, check whether they fill up the page
 
@@ -78,4 +79,4 @@
 </svelte:head>
 
 <svelte:window {onscroll} />
-<List {notes} />
+<List {notes} {authors} />

frontend/src/routes/notes/List.svelte

@@ -64,6 +64,7 @@
     <legend class="entity" onclick={() => goToEntity(note)}>{title(note)}</legend>
     {/if}
     <legend class="time">
+        {#if !module} {authors[note.user_id].name} – {/if}
         {note.timestamp.replace('T',' ')}
         {#if user.id == note.user_id}
         <button class="symbol" onclick={() => drop(note.id)}></button>

frontend/src/routes/project/View.svelte

@@ -2,7 +2,7 @@
     import { onMount, onDestroy }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api, eventStream } from '../../urls.svelte';
+    import { api, eventStream, patch, post } from '../../urls.svelte';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte';
 
@@ -35,11 +35,7 @@
 
     async function addState(){
         const url  = api(`project/${id}/state`);
-        const resp = await fetch(url,{
-            credentials: 'include',
-            method: 'POST',
-            body: JSON.stringify(new_state)
-        });
+        const resp = await post(url,new_state);
         if (resp.ok){
             const json = await resp.json();
             project.allowed_states[json.code] = json.name;
@@ -139,11 +135,7 @@
 
     async function update(data){
         const url  = api(`project/${id}`);
-        const resp = await fetch(url,{
-            credentials : 'include',
-            method      : 'PATCH',
-            body        : JSON.stringify(data)
-        });
+        const resp = await patch(url,data);
         if (resp.ok){
             yikes();
             project = await resp.json();
@@ -160,6 +152,20 @@
         update({members:members});
     }
 
+    async function updateStateName(state_id,name){
+        const url  = api(`project/${id}/state`);
+        const resp = await patch(url,{id:state_id,name});
+        if (resp.ok){
+            const json = await resp.json();
+            project.allowed_states[json.code]=json.name;
+            yikes();
+            return true;
+        } else {
+            error(resp);
+            return false;
+        }
+    }
+
     function showClosed(){
         show_closed = !show_closed;
         loadTasks();
@@ -243,7 +249,9 @@
         {/if}
         {key}
     </div>
-    <div>{project.allowed_states[key]}</div>
+    <div>
+        <LineEditor value={project.allowed_states[key]} editable={true} onSet={newName => updateStateName(+key,newName)} />
+    </div>
     {/each}
     <div>
         <input type="number" bind:value={new_state.code} />

frontend/src/routes/task/Add.svelte

@@ -2,7 +2,7 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api, get }      from '../../urls.svelte.js';
+    import { api, get, post }      from '../../urls.svelte.js';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
@@ -104,11 +104,7 @@
 
     async function saveTask(){
         const url  = api('task/add');
-        const resp = await fetch(url,{
-            credentials : 'include',
-            method      : 'POST',
-            body        : JSON.stringify(task)
-        });
+        const resp = await post(url,task);
         if (resp.ok) {
             localStorage.removeItem(`task/${task.id}/description`);
             if (!assignee) { // if assignee is set, this form was opened within an external context. hence we don`t want to navigate somewhere else!

frontend/src/routes/task/ListTask.svelte

@@ -3,7 +3,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { dragged }       from './dragndrop.svelte';
-    import { api }           from '../../urls.svelte';
+    import { api, drop, patch, post }           from '../../urls.svelte';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte';
     import { timetrack }     from '../../user.svelte';
@@ -47,10 +47,7 @@
     async function deleteTask(){
         if (confirm(t('confirm_delete',{element:task.name}))){
             const url  = api(`task/${task.id}`);
-            const resp = await fetch(url,{
-                credentials : 'include',
-                method      : 'DELETE'
-            });
+            const resp = await drop(url);
             if (resp.ok){
                 deleted = true;
             } else {
@@ -70,11 +67,7 @@
         ev.stopPropagation();
         if (dragged.element.id == task.id) return;
         const  url = api(`task/${dragged.element.id}`);
-        const resp = await fetch(url,{
-            credentials : 'include',
-            method      : 'PATCH',
-            body        : JSON.stringify({ parent_task_id : task.id})
-        });
+        const resp = await patch(url, { parent_task_id : task.id});
         if (resp.ok) {
             yikes();
         } else {
@@ -90,11 +83,7 @@
             show_closed    : show_closed
         };
         if (task.show_closed) data.show_closed = true;
-        const resp = await fetch(url,{
-            credentials : 'include',
-            method      : 'POST',
-            body        : JSON.stringify(data)
-        });
+        const resp = await post(url,data);
         if (resp.ok){
             children = await resp.json();
             yikes();
@@ -112,11 +101,7 @@
 
     async function patchTask(changeset){
         const url  = api(`task/${task.id}`);
-        const resp = await fetch(url,{
-            credentials : 'include',
-            method      : 'PATCH',
-            body        : JSON.stringify(changeset)
-        });
+        const resp = await patch(url,changeset);
         if (resp.ok){
             task = await resp.json();
             return true;
@@ -145,9 +130,7 @@
 		if (children && lastEvent && lastEvent.task) {
 			if (lastEvent.event == 'delete' || lastEvent.task.parent_task_id != task.id){
 				delete children[lastEvent.task.id];
-			} else {
-				children[lastEvent.task.id] = lastEvent.task;
-			}
+			} else children[lastEvent.task.id] = lastEvent.task;
 		}
 	});
 

frontend/src/routes/task/ParentSelector.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { onMount } from 'svelte';
+	import { t } from '../../translations.svelte';
+	import { api, get } from '../../urls.svelte';
+	import { error, yikes } from '../../warn.svelte';
+	import TaskTree from './Tree.svelte';
+
+	let { project, select = o => {}, task } = $props();
+	let tree = $state({});
+
+	async function loadParentCandidates(){
+		let url = api(`task/${task.id}/parent_candidates`);
+		let res = await get(url);
+		if (res.ok){
+			yikes();
+			tree = await res.json();
+		} else error(res);
+	}
+
+	onMount(loadParentCandidates);
+</script>
+
+<div class="overlay parent_selector">
+	<h2>{t('select a new parent for {entity}',{entity:task.name})}</h2>
+	{t('project')}: {project.name}
+	<TaskTree {tree} {select} />
+</div>

frontend/src/routes/task/RequiredTasks.svelte

@@ -2,7 +2,7 @@
     import { onMount } from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api } from '../../urls.svelte';
+    import { api, get, patch, post } from '../../urls.svelte';
     import { error, yikes }  from '../../warn.svelte';
     import { t }   from '../../translations.svelte';
 
@@ -17,7 +17,7 @@
 
     async function add(new_task_id){
         let url = api(`task/${new_task_id}`);
-        let resp = await fetch(url,{ credentials : 'include' });
+        let resp = await get(url);
         if (resp.ok){
             yikes();
             let newTask = await resp.json();
@@ -27,7 +27,7 @@
             }
             task.required_tasks_ids.push(new_task_id);
             requiredTasks[new_task_id] = newTask;
-            await patch();
+            await update();
             delete candidates[new_task_id];
         } else {
             error(resp);
@@ -59,17 +59,11 @@
     async function loadTasks(){
         if (!task || !task.required_tasks_ids || !task.required_tasks_ids.length) return;
         const url = api('task/list');
-        const res = await fetch(url,{
-            credentials : 'include',
-            method      : 'POST',
-            body        : JSON.stringify({ids:task.required_tasks_ids})
-        });
+        const res = await post(url,{ids:task.required_tasks_ids});
         if (res.ok){
             yikes();
             requiredTasks = await res.json();
-        } else {
-            error(resp);
-        }
+        } else error(resp);
     }
 
     function oninput(){
@@ -84,19 +78,15 @@
         return false;
     }
 
-    async function patch(){
+    async function update(){
             const url  = api(`task/${task.id}`);
-            const resp = await fetch(url,{
-                credentials : 'include',
-                method      : 'PATCH',
-                body        : JSON.stringify({required_tasks_ids:task.required_tasks_ids})
-            });
+            const resp = await patch(url,{required_tasks_ids:task.required_tasks_ids});
             if (!resp.ok) error(resp);
     }
 
     async function unlink(required_task){
         task.required_tasks_ids = task.required_tasks_ids.filter(item => item != required_task.id);
-        patch();
+        update();
         delete requiredTasks[required_task.id];
     }
 

frontend/src/routes/task/TaskList.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <ul>
-    {#each sortedTasks as task}
+    {#each sortedTasks as task (task.id)}
     <ListTask {states} {task} {lastEvent} siblings={tasks} {est_time} show_closed={show_closed || task.show_closed} />
     {/each}
 </ul>

frontend/src/routes/task/Tree.svelte

@@ -0,0 +1,23 @@
+<script>
+	let { select = o => {}, tree } = $props();
+
+	let nodes = $derived(Object.values(tree).sort((a,b) => a.name.localeCompare(b.name)))
+
+	function onclick(ev,node){
+		ev.preventDefault();
+		ev.stopPropagation();
+		select(node);
+		return true;
+	}
+</script>
+
+<ul>
+	{#each nodes as node (node.id)}
+	<li onclick={ev => onclick(ev,node)}>
+		{node.name}
+		{#if node.Children}
+		<svelte:self tree={node.Children} {select} />
+		{/if}
+	</li>
+	{/each}
+</ul>

frontend/src/routes/task/View.svelte

@@ -2,7 +2,7 @@
     import { onDestroy }     from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api, eventStream } from '../../urls.svelte';
+    import { api, eventStream, get, patch, post } from '../../urls.svelte';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte';
     import { timetrack }     from '../../user.svelte.js';
@@ -10,6 +10,7 @@
 
     import LineEditor       from '../../Components/LineEditor.svelte';
     import MarkdownEditor   from '../../Components/MarkdownEditor.svelte';
+    import ParentSelector   from './ParentSelector.svelte';
     import PermissionEditor from '../../Components/PermissionEditor.svelte';
     import Notes            from '../notes/RelatedNotes.svelte';
     import StateSelector    from '../../Components/StateSelector.svelte';
@@ -22,6 +23,7 @@
     let children       = $state(null);
     let dummy          = $derived(updateOn(id));
     let est_time = $state({sum:0});
+    let select_parent  = $state(false);
     let project        = $state(null);
     const router       = useTinyRouter();
     let showSettings   = $state(router.fullPath.endsWith('/edit'));
@@ -74,12 +76,6 @@
         router.navigate(`/project/${project.id}/kanban`)
     }
 
-
-    function gotoParent(){
-        if (!task.parent_task_id) return;
-        router.navigate(`/task/${task.parent_task_id}/view`)
-    }
-
     function gotoProject(){
         if (!project) return;
         router.navigate(`/project/${project.id}/view`)
@@ -99,32 +95,24 @@
             parent_task_id : +task.id,
             show_closed    : show_closed
         };
-        const resp = await fetch(url,{
-            credentials : 'include',
-            method      : 'POST',
-            body:JSON.stringify(data)
-        });
+        const resp = await post(url,data);
         if (resp.ok){
             yikes();
             children = await resp.json();
-        } else {
-            error(resp);
-        }
+        } else error(resp);
     }
 
     async function loadParent(){
         const url  = api(`task/${task.parent_task_id}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await get(url);
         if (resp.ok){
             task.parent = await resp.json();
-        } else {
-            error(resp);
-        }
+        } else error(resp);
     }
 
     async function loadTask(){
         const url  = api(`task/${id}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await get(url);
         if (resp.ok){
             yikes();
             task     = await resp.json();
@@ -132,20 +120,29 @@
             loadChildren();
             if (task.project_id) loadProject();
             if (task.parent_task_id) loadParent();
-        } else {
-            error(resp);
-        }
+        } else error(resp);
     }
 
     async function loadProject(){
         const url  = api(`project/${task.project_id}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await get(url);
         if (resp.ok){
             project = await resp.json();
             yikes();
-        } else {
-            error(await resp.text());
+        } else error(await resp.text());
     }
+
+    function parentClick(ev){
+        ev.preventDefault();
+        if (!task.parent_task_id) return;
+        router.navigate(`/task/${task.parent_task_id}/view`);
+        return false;
+    }
+
+    function parentRightClick(ev){
+        ev.preventDefault();
+        select_parent = true;
+        return false;
     }
 
     function showClosed(){
@@ -169,11 +166,7 @@
 
     async function update(data){
         const url  = api(`task/${id}`);
-        const resp = await fetch(url,{
-            credentials : 'include',
-            method      : 'PATCH',
-            body        : JSON.stringify(data)
-        });
+        const resp = await patch(url,data);
         if (resp.ok){
             yikes();
             let json = await resp.json();
@@ -198,6 +191,11 @@
         loadTask();
     }
 
+    function update_parent(newVal){
+        select_parent = false;
+        update({parent_task_id:newVal.id});
+    }
+
     function updatePermission(user_id,permission){
         let members      = {};
         members[user_id] = permission.code;
@@ -223,13 +221,18 @@
         <button class="symbol" title={t('files')} onclick={showPrjFiles}></button>
     </div>
     {/if}
-    {#if task.parent}
     <div>{t('parent_task')}</div>
     <div class="parent">
-        <a href="#" onclick={gotoParent}>{task.parent.name}</a>
+        {#if select_parent}
+        <ParentSelector {task} {project} select={update_parent} />
+        {:else}
+        {#if task.parent}
+        <a href="/task/{task.parent.id}/view" onclick={parentClick} oncontextmenu={parentRightClick}>{task.parent.name}</a>
         <button class="symbol" title={t('unlink')} onclick={unlink_parent}></button>
-    </div>
         {/if}
+        <button class="symbol" title={t('edit')} onclick={parentRightClick}></button>
+        {/if}
+    </div>
     <div>{t('task')}</div>
     <div class="name">
         <LineEditor bind:value={task.name} editable={true} onSet={val => update({name:val})} />

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

@@ -97,6 +97,7 @@ public class ProjectModule extends BaseHandler implements ProjectService {
 					head = path.pop();
 					yield switch (head){
 						case null -> patchProject(ex,projectId,user.get());
+						case Path.STATE -> patchProjectState(ex,projectId,user.get());
 						default -> super.doPatch(path,ex);
 					};
 				}
@@ -229,6 +230,19 @@ public class ProjectModule extends BaseHandler implements ProjectService {
 		return sendContent(ex,project.toMap());
 	}
 
+	private boolean patchProjectState(HttpExchange ex, long projectId, UmbrellaUser user) throws IOException {
+		var project = loadMembers(projectDb.load(projectId));
+		if (!project.hasMember(user)) throw notAmember(t(PROJECT_WITH_ID,ID,project.name()));
+		var json = json(ex);
+		if (!json.has(ID)) throw missingField(ID);
+		if (!json.has(NAME)) throw missingField(NAME);
+		if (!(json.get(ID) instanceof Number fieldId)) throw invalidField(ID,Text.NUMBER);
+		var newName = json.getString(NAME);
+		if (newName.isBlank()) throw invalidField(NAME, STRING);
+		var newState = new Status(newName,fieldId.intValue());
+		return sendContent(ex, projectDb.save(projectId,newState));
+
+	}
 
 	private boolean postNewState(HttpExchange ex, long projectId, UmbrellaUser user) throws IOException {
 		var project = loadMembers(load(projectId));

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

@@ -267,7 +267,7 @@ CREATE TABLE IF NOT EXISTS {0} (
 	@Override
 	public Status save(long projectId, Status newState) {
 		try {
-			insertInto(TABLE_CUSTOM_STATES, PROJECT_ID, Field.CODE, NAME).values(projectId,newState.code(),newState.name()).execute(db).close();
+			replaceInto(TABLE_CUSTOM_STATES, PROJECT_ID, Field.CODE, NAME).values(projectId,newState.code(),newState.name()).execute(db).close();
 			return newState;
 		} catch (SQLException e) {
 			throw databaseException(FAILED_TO_CREATE_STATE).causedBy(e);

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

@@ -2,6 +2,7 @@
 package de.srsoftware.umbrella.task;
 
 
+import static de.srsoftware.tools.Optionals.is0;
 import static de.srsoftware.tools.jdbc.Condition.*;
 import static de.srsoftware.tools.jdbc.Query.*;
 import static de.srsoftware.tools.jdbc.Query.SelectQuery.ALL;
@@ -236,7 +237,7 @@ CREATE TABLE IF NOT EXISTS {0} (
 	public Map<Long, Task> listProjectTasks(Long projectId, Long parentTaskId, boolean noIndex) throws UmbrellaException {
 		try {
 			var query = select(ALL).from(TABLE_TASKS).where(PROJECT_ID,equal(projectId));
-			if (parentTaskId != 0) query.where(PARENT_TASK_ID,equal(parentTaskId));
+			if (!is0(parentTaskId)) query.where(PARENT_TASK_ID,equal(parentTaskId));
 			if (!noIndex) query.where(NO_INDEX,notIn(1));
 			var tasks = new HashMap<Long,Task>();
 			var rs = query.exec(db);

task/src/main/java/de/srsoftware/umbrella/task/TaskModule.java

@@ -32,6 +32,7 @@ import de.srsoftware.tools.SessionToken;
 import de.srsoftware.umbrella.core.BaseHandler;
 import de.srsoftware.umbrella.core.ModuleRegistry;
 import de.srsoftware.umbrella.core.api.*;
+import de.srsoftware.umbrella.core.constants.Field;
 import de.srsoftware.umbrella.core.constants.Text;
 import de.srsoftware.umbrella.core.exceptions.UmbrellaException;
 import de.srsoftware.umbrella.core.model.*;
@@ -110,8 +111,11 @@ public class TaskModule extends BaseHandler implements TaskService {
 				case null -> getUserTasks(user.get(), ex);
 				default -> {
 					var taskId = Long.parseLong(head);
-					head = path.pop();
-					yield head == null ? getTask(ex, taskId, user.get()) : super.doGet(path, ex);
+					yield switch (path.pop()){
+						case null -> getTask(ex,taskId,user.get());
+						case PARENT_CANDIDATES -> getParentCandidates(ex,taskId, user.get());
+						default -> super.doGet(path,ex);
+					};
 				}
 			};
 		} catch (UmbrellaException e) {
@@ -188,6 +192,33 @@ public class TaskModule extends BaseHandler implements TaskService {
 		return sendContent(ex, result);
 	}
 
+	private boolean getParentCandidates(HttpExchange ex, long taskId, UmbrellaUser user) throws IOException {
+		var task = taskDb.load(taskId);
+		var project = projectService().load(task.projectId());
+		var projectTasks = taskDb.listProjectTasks(project.id(),null, false);
+		var mapped = projectTasks.values().stream().collect(Collectors.toMap(Task::id,Task::toMap));
+		var roots = new HashMap<Long,Map<String,Object>>();
+		for (var map : mapped.values()){
+			if (!(map.get(ID) instanceof Long id)) continue;
+			if (id == taskId) continue;
+			if (map.get(PARENT_TASK_ID) instanceof Long parentId) {
+				var parent = mapped.get(parentId);
+				if (parent != null) {
+					var o = parent.get(Field.CHILDREN);
+					Map<Long,Object> children;
+					if (o == null) {
+						children = new HashMap<>();
+						parent.put(Field.CHILDREN,children);
+					} else children = (Map<Long, Object>) o;
+					children.put(id, map);
+				}
+			} else {
+				roots.put(id, map);
+			}
+		}
+		return sendContent(ex,roots);
+	}
+
 	private boolean getPermissionList(HttpExchange ex) throws IOException {
 		var map = new HashMap<Integer, String>();
 		for (var permission : Permission.values()) map.put(permission.code(),permission.name());
@@ -293,7 +324,7 @@ public class TaskModule extends BaseHandler implements TaskService {
 			Task parent = taskMap.get(task.parentTaskId());
 			var trunk = placeInTree(parent, taskTree, taskMap);
 			@SuppressWarnings("unchecked")
-			ArrayList<Object> children = (ArrayList<Object>) trunk.computeIfAbsent(CHILDREN, k -> new ArrayList<>());
+			ArrayList<Object> children = (ArrayList<Object>) trunk.computeIfAbsent(Field.CHILDREN, k -> new ArrayList<>());
 			children.add(mappedTask);
 			return mappedTask;
 		}

translations/src/main/resources/de.json

@@ -325,6 +325,7 @@
   "save_object": "{object} speichern",
   "search": "Suche",
   "searching…": "suche…",
+  "select a new parent for {entity}": "Neue Über-Aufgabe für „{entity}“ wählen",
   "select_company" : "Wählen Sie eine ihrer Firmen:",
   "select_customer": "Kunde auswählen",
   "select_property": "Eigenschaft auswählen",

translations/src/main/resources/en.json

@@ -325,6 +325,7 @@
   "save_object": "save {object}",
   "search": "search",
   "searching…": "searhcing…",
+  "select a new parent for {entity}": "select a new parent for '{entity}'",
   "select_company" : "select on of you companies:",
   "select_customer": "select customer",
   "select_property": "select property",

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

@@ -761,3 +761,12 @@ fieldset.vcard{
     white-space: nowrap;
     display: inline flow-root;
 }
+
+.parent_selector > ul {
+	position: absolute;
+	top: 120px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: auto;
+}