Tweak autocompleter layout and styles

Author: mrmir

frontend/src/app/shared/components/autocompleter/meeting-autocompleter/meeting-autocompleter-template.component.html

@@ -1,8 +1,19 @@
-<ng-template #optionTemplate let-item>
-    <div>ID: {{ item.id }}</div>
-    <div>Name: {{ item.name }}</div>
-    <div>Project: {{ item.project }}</div>
-    <div>Time: {{ item.start_time }}</div>
-    <div>Date: {{ item.start_date }}</div>
-    <div *ngIf="item.frequency">Frequency: {{ item.frequency }}</div>
+<ng-template #optionTemplate let-item let-search="search">
+    <div class="op-autocompleter__meeting-option-grid">
+        <div class="op-autocompleter__field--name" [opSearchHighlight]="search">
+            {{ item.name }}
+        </div>
+        <div class="op-autocompleter__field--date">
+            {{ item.start_date }}
+        </div>
+        <div class="op-autocompleter__field--project-label">Project:</div>
+
+        <div class="op-autocompleter__field--frequency" *ngIf="item.frequency">
+            {{ item.frequency }}
+        </div>
+        <div class="op-autocompleter__field--time">
+            {{ item.start_time }}
+        </div>
+        <div class="op-autocompleter__field--project">{{ item.project }}</div>
+    </div>
 </ng-template>

frontend/src/app/shared/components/autocompleter/meeting-autocompleter/meeting-autocompleter-template.component.sass

@@ -0,0 +1,67 @@
+@import '../../global_styles/openproject/variables'
+
+.op-autocompleter
+  &__meeting-option-grid
+    display: grid
+    grid-template-columns: 2fr 1fr 1fr
+    grid-template-rows: auto auto
+    column-gap: var(--stack-gap-condensed)
+    row-gap: calc(var(--stack-gap-condensed) / 2)
+    align-items: baseline
+    font-size: var(--font-size-small)
+
+  &__field--name
+    grid-row: 1
+    grid-column: 1
+    font-weight: 600
+    overflow: hidden
+    text-overflow: ellipsis
+
+  &__field--date
+    grid-row: 1
+    grid-column: 2
+    color: var(--fgColor-muted)
+
+  &__field--project-label
+    grid-row: 1
+    grid-column: 3
+    color: var(--fgColor-muted)
+    text-align: left
+
+  &__field--frequency
+    grid-row: 2
+    grid-column: 1
+    color: var(--fgColor-muted)
+    font-size: var(--font-size-small)
+
+  &__field--time
+    grid-row: 2
+    grid-column: 2
+    color: var(--fgColor-muted)
+
+  &__field--project
+    grid-row: 2
+    grid-column: 3
+    font-weight: 600
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+
+  @media screen and (max-width: $breakpoint-sm)
+    &__option-grid
+      grid-template-columns: 1fr
+      grid-template-rows: auto
+      row-gap: calc(var(--stack-gap-condensed) / 2)
+
+    &__field--project-label,
+    &__field--frequency
+      display: none
+
+    &__field--name,
+    &__field--date,
+    &__field--project-label,
+    &__field--frequency,
+    &__field--time,
+    &__field--project
+      grid-column: 1
+      grid-row: auto

frontend/src/app/shared/components/autocompleter/meeting-autocompleter/meeting-autocompleter-template.component.ts

@@ -33,6 +33,7 @@ import {
 
 @Component({
   templateUrl: './meeting-autocompleter-template.component.html',
+  styleUrls: ['./meeting-autocompleter-template.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })

frontend/src/app/shared/components/autocompleter/meeting-autocompleter/meeting-autocompleter.component.sass

@@ -0,0 +1,18 @@
+@import '../../global_styles/openproject/variables'
+
+#add-work-package-to-meeting-dialog
+  .ng-dropdown-panel .ng-dropdown-panel-items
+    .ng-optgroup.ng-option-disabled
+      background-color: var(--bgColor-neutral-muted) !important
+
+      .ng-option-label
+        font-weight: normal
+        color: black
+
+    .ng-option.ng-option-child
+      padding-left: var(--base-size-16)
+      border-bottom: 1px solid var(--borderColor-default) !important
+
+    .ng-option.ng-option-marked
+      background-color: var(--bgColor-muted) !important
+

frontend/src/app/shared/components/autocompleter/meeting-autocompleter/meeting-autocompleter.component.ts

@@ -29,29 +29,24 @@
 import {
   Component,
   ChangeDetectionStrategy,
-  OnInit,
+  OnInit, HostBinding, ViewEncapsulation,
 } from '@angular/core';
-import { ID } from '@datorama/akita';
 import { OpAutocompleterComponent } from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
 import { MeetingAutocompleterTemplateComponent } from 'core-app/shared/components/autocompleter/meeting-autocompleter/meeting-autocompleter-template.component';
 
 export const meetingsAutocompleterSelector = 'op-meeting-autocompleter';
 
-export interface IMeetingAutocompleteItem {
-  id:ID;
-  name:string;
-  email?:string|null;
-  href:string|null;
-  avatar?:string|null;
-}
-
 @Component({
   templateUrl: '../op-autocompleter/op-autocompleter.component.html',
+  styleUrls: ['./meeting-autocompleter.component.sass'],
+  encapsulation: ViewEncapsulation.None,
   selector: meetingsAutocompleterSelector,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class MeetingAutocompleterComponent extends OpAutocompleterComponent<IMeetingAutocompleteItem> implements OnInit {
+export class MeetingAutocompleterComponent extends OpAutocompleterComponent implements OnInit {
+  @HostBinding('class.op-meeting-autocompleter') public className = true;
+
   ngOnInit():void {
     super.ngOnInit();
 

modules/meeting/app/forms/meeting_agenda_item/meeting_form.rb

@@ -41,7 +41,7 @@ class MeetingAgendaItem::MeetingForm < ApplicationForm
         component: "opce-meeting-autocompleter",
         items: meeting_options,
         group_by: "group_label",
-        # Do not try to load data from API (it will look for a "resource")
+        focus_directly: true,
         defaultData: false,
         bindLabel: "name",
         bindValue: "id",

modules/meeting/app/services/group_meetings_service.rb

@@ -54,9 +54,6 @@ def group_meetings # rubocop:disable Metrics/AbcSize
                   .next_occurring(OpenProject::Internationalization::Date.beginning_of_week)
                   .beginning_of_day
     groups = Hash.new { |h, k| h[k] = [] }
-    groups[:later] = show_more_pagination(@all_meetings
-                                            .where(start_time: next_week..)
-                                            .order(start_time: :asc), limit: @limit)
 
     @all_meetings
       .where(start_time: ...next_week)
@@ -76,6 +73,11 @@ def group_meetings # rubocop:disable Metrics/AbcSize
       groups[group_key] << meeting
     end
 
+    # Order of groups here affects group ordering in autocompleter
+    groups[:later] = show_more_pagination(@all_meetings
+                                            .where(start_time: next_week..)
+                                            .order(start_time: :asc), limit: @limit)
+
     groups
   end