Merge pull request #86 from te-online/feature/quick-add-rework

Feature/quick add rework
te-online · Sep 12, 2022 · bf45a66 · bf45a66
2 parents 03e6ae5 + f7eb91b
commit bf45a66
Show file tree

Hide file tree

Showing 29 changed files with 30,186 additions and 16,849 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -48,9 +48,9 @@ stages:
 
 app_test_nc_23:
   extends: .app_tests
+  before_script:
+    - sed -i "s#nextcloud:24-fpm-alpine#nextcloud:23-fpm-alpine#g" tests/docker-compose.yml
+    - *before_script
 
 app_test_nc_24:
   extends: .app_tests
-  before_script:
-    - sed -i "s#nextcloud:23-fpm-alpine#nextcloud:24-fpm-alpine#g" tests/docker-compose.yml
-    - *before_script
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 Notable changes in each released version can be seen here.
 
+## 0.3.3 Beta, 11. September 2022
+
+### Added
+
+- Dashboard / Quick Add: Rework combo-selector for client, project and taks – I hope you like it, happy to get feedback.
+- Dashboard / Quick Add: Add autosuggest for previous notes for repeated time entries to prefill details
+- Maintenance: Update some JS dependencies
+
+### Fixed
+
+- Previously missing colors for select inputs have been themed
+
 ## 0.3.2 Beta, 29. June 2022
 
 ### Added

diff --git a/appinfo/info.xml b/appinfo/info.xml
@@ -10,19 +10,18 @@
 * 📈 make use of simple, but useful **statistics** and **reports**.
 
 #### Latest changes 🎉
-**0.3.2 Beta, 29. June 2022**
-- Add overview of all projects, tasks, and latest time entries when you select the respective menu entries without selecting a client first
-- Dashboard: Add ability to see latest time entries by other people in clients that you shared and enable to filter them by person
-- Reports: Add ability to filter reports by person who created the time entries
-- Bugfix: The list of clients, projects, and tasks that appears when you select the respective menu items didn't show items shared with you
-- Attempt to avoid more layout-shifts on Dashboard when JS has mounted components
+**0.3.3 Beta, 11. September 2022**
+- Dashboard / Quick Add: Rework combo-selector for client, project and taks – I hope you like it, happy to get feedback.
+- Dashboard / Quick Add: Add autosuggest for previous notes for repeated time entries to prefill details
+- Previously missing colors for select inputs have been themed
+- Maintenance: Update some JS dependencies
 
 _Please refer to the [full changelog](https://github.com/te-online/timemanager/#changelog) to see older releases_
 
 📱 **Looking for a mobile companion app?** Try the [Android app (currently in beta)](https://play.google.com/store/apps/details?id=de.jbservices.nc_timemanager_app) made by [@joleaf](https://gitlab.com/joleaf/nc-timemanager-mobile-app)]]></description>
 	<licence>AGPL</licence>
 	<author>Thomas Ebert</author>
-	<version>0.3.2</version>
+	<version>0.3.3</version>
 	<category>tools</category>
 	<screenshot>https://raw.githubusercontent.com/te-online/timemanager/main/img/timemanager_statistics.png</screenshot>
 	<screenshot>https://raw.githubusercontent.com/te-online/timemanager/main/img/timemanager_overview.png</screenshot>

diff --git a/controller/pagecontroller.php b/controller/pagecontroller.php
@@ -110,6 +110,7 @@ function index(string $userFilter = "") {
 			5,
 			$userFilter && strlen($userFilter) > 0 ? explode(",", $userFilter) : []
 		);
+		$latestSearchEntries = $this->storageHelper->getLatestTimeEntriesFromAllTimeEntries($times, 100);
 
 		$sharedTimeEntries = array_filter($times, function ($entry) {
 			return !$entry->current_user_is_author;
@@ -151,6 +152,14 @@ function index(string $userFilter = "") {
 				],
 				"requestToken" => $requestToken,
 				"isServer" => true,
+				"latestSearchEntries" => array_map(function ($latestSearchEntry) {
+					return [
+						"time" => $latestSearchEntry->time->toArray(),
+						"task" => $latestSearchEntry->task->toArray(),
+						"project" => $latestSearchEntry->project->toArray(),
+						"client" => $latestSearchEntry->client->toArray(),
+					];
+				}, $latestSearchEntries),
 			]),
 		]);
 	}

diff --git a/css/timemanager.scss b/css/timemanager.scss
@@ -327,6 +327,7 @@ label {
 			button {
 				flex-shrink: 0;
 				margin-bottom: 0;
+				padding-left: 34px;
 			}
 		}
 
@@ -340,7 +341,7 @@ label {
 			display: flex;
 			flex-flow: column;
 			&.error {
-				.selectContainer {
+				input {
 					border-color: var(--color-error);
 				}
 			}
@@ -359,18 +360,32 @@ label {
 		}
 
 		.note,
+		.search,
 		.task-selector-trigger {
 			input {
 				width: 100%;
 			}
 		}
 
+		.search-input {
+			width: 100%;
+			padding: 6px 12px 6px 34px;
+		}
+
 		input {
 			height: 42px;
 		}
 
 		.selectContainer {
 			margin: 3px 3px 3px 0;
+
+			input {
+				border-color: var(--color-border-dark);
+
+				&:focus {
+					border-color: var(--color-primary-element);
+				}
+			}
 		}
 	}
 
@@ -380,7 +395,142 @@ label {
 	}
 
 	.quick-add {
-		grid-template-columns: calc(100% - 556px) 206px 250px 100px;
+		// Using minmax fixes some unpredictable layout-shifts in Safari...
+		grid-template-columns: minmax(200px, calc(100% - 556px)) 206px 250px 100px;
+
+		@media screen and (max-width: 768px) {
+			display: block;
+		}
+	}
+
+	.note-autosuggest {
+		// extends .popover
+		width: 750px;
+		max-width: 60vw;
+		background: var(--color-main-background);
+		padding: 10px;
+
+		li {
+			padding: 3px 2px;
+		}
+
+		.task {
+			padding: 6px;
+			width: 100%;
+			display: inline-block;
+
+			&:hover,
+			&:focus-visible {
+				background: var(--color-primary-light);
+			}
+		}
+	}
+
+	.task-selector-popover {
+		// extends .popover
+		width: 466px;
+		background: var(--color-main-background);
+		padding-top: 12px;
+
+		.task-add-button {
+			padding-left: 34px;
+		}
+
+		.search-results,
+		.last-used {
+			li {
+				padding: 6px 3px;
+			}
+
+			.client {
+				text-transform: uppercase;
+				font-size: 12px;
+				font-weight: 600;
+			}
+
+			.project {
+				padding-left: 12px;
+				padding-top: 4px;
+				color: var(--color-text-lighter);
+
+				& ~ ul li {
+					padding: 0;
+				}
+			}
+
+			.task {
+				padding: 6px 3px 6px 24px;
+				width: 100%;
+				display: inline-block;
+
+				&:hover,
+				&:focus-visible {
+					background: var(--color-primary-light);
+				}
+			}
+
+			.no-result {
+				padding: 12px 6px;
+				color: var(--color-text-lighter);
+			}
+
+			.last-used-wrapper {
+				padding: 3px 8px;
+
+				li {
+					display: flex;
+					padding: 0;
+
+					.label {
+						flex: 30%;
+						font-size: 12px;
+					}
+
+					.value {
+						flex: 70%;
+					}
+
+					.muted {
+						color: var(--color-text-lighter);
+					}
+				}
+			}
+		}
+
+		.search-results {
+			max-height: calc(80vh - 250px);
+			overflow-y: auto;
+		}
+	}
+
+	.combo-entry-wrapper {
+		padding: 3px 4px;
+
+		&:hover,
+		&:focus-visible {
+			background: var(--color-primary-light);
+		}
+
+		li {
+			display: flex;
+			padding: 0;
+
+			.label {
+				flex: 30%;
+				font-size: 12px;
+			}
+
+			.value {
+				flex: 70%;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+			}
+
+			.muted {
+				color: var(--color-text-lighter);
+			}
+		}
 	}
 
 	.reports-filters {
@@ -620,7 +770,6 @@ label {
 	}
 
 	.filter-button {
-		background-position: 12px center;
 		padding: 6px 12px 6px 34px;
 		margin-left: 8px;
 		margin-bottom: -8px;
@@ -730,6 +879,10 @@ label {
 	padding: 0 12px 12px;
 }
 
+.button-w-icon {
+	background-position: 12px center;
+}
+
 @keyframes fallback {
 	0% {
 		height: 0;
@@ -764,13 +917,20 @@ label {
 }
 
 :root {
-	// svelte-select theming
-	--background: var(--color-main-background);
-	--listBackground: var(--color-main-background);
-	--itemHoverBG: var(--color-primary-light);
-	--multiItemActiveBG: var(--color-primary-element);
-	--multiItemBG: var(--color-primary-light);
-	--spinnerColor: var(--color-primary);
+	.selectContainer {
+		// svelte-select theming
+		--background: var(--color-main-background);
+		--listBackground: var(--color-main-background);
+		--itemHoverBG: var(--color-primary-light);
+		--itemIsActiveBG: var(--color-primary-light);
+		--multiItemActiveBG: var(--color-primary-element);
+		--multiItemBG: var(--color-primary-light);
+		--spinnerColor: var(--color-primary);
+		--borderFocusColor: var(--color-primary-element);
+		--borderHoverColor: var(--color-primary-element);
+		--inputColor: var(--color-main-text);
+		--border: 1px solid var(--color-border-dark);
+	}
 }
 
 @media print {