collab

listify-client/src/app/lists/list-detail/list-detail.component.html

@@ -8,7 +8,12 @@
       @if (isCreateMode()) {
         <p>Liste anlegen</p>
       } @else if (list()) {
-        <p>{{ checkedCount(list()!) }} / {{ list()!.items.length }} erledigt</p>
+        <p>
+          {{ checkedCount(list()!) }} / {{ list()!.items.length }} erledigt
+          @if (list()!.accessRole === 'collaborator') {
+            - geteilt von {{ list()!.ownerName || list()!.ownerEmail || 'Owner' }}
+          }
+        </p>
       }
     </div>
   </header>
@@ -77,6 +82,104 @@
       </mat-card-content>
     </mat-card>
 
+    @if (list() && (showEditor() || list()!.collaborators.length > 0 || list()!.accessRole === 'collaborator')) {
+      <mat-card class="sharing-card" appearance="outlined">
+        <mat-card-header>
+          <mat-card-title>Freigaben</mat-card-title>
+          <mat-card-subtitle>
+            @if (canManageShares()) {
+              {{ list()!.collaborators.length }} Mitwirkende
+            } @else {
+              Geteilt von {{ list()!.ownerName || list()!.ownerEmail || 'Owner' }}
+            }
+          </mat-card-subtitle>
+        </mat-card-header>
+
+        <mat-card-content>
+          @if (showShareControls()) {
+            <mat-form-field appearance="outline" class="share-search-field">
+              <mat-label>User suchen</mat-label>
+              <mat-icon matPrefix aria-hidden="true">person_search</mat-icon>
+              <input
+                matInput
+                type="search"
+                [value]="shareSearchTerm()"
+                (input)="searchShareUsers($any($event.target).value)"
+                autocomplete="off"
+              />
+              @if (searchingUsers()) {
+                <mat-progress-spinner matSuffix mode="indeterminate" diameter="18" />
+              }
+            </mat-form-field>
+
+            @if (availableShareSearchResults().length > 0) {
+              <ul class="share-results">
+                @for (user of availableShareSearchResults(); track user.id) {
+                  <li>
+                    <span>{{ displayUser(user) }}</span>
+                    <button
+                      mat-stroked-button
+                      type="button"
+                      [disabled]="sharingUserId() === user.id"
+                      (click)="shareWithUser(user)"
+                    >
+                      @if (sharingUserId() === user.id) {
+                        <mat-progress-spinner mode="indeterminate" diameter="18" />
+                      } @else {
+                        <mat-icon aria-hidden="true">person_add</mat-icon>
+                      }
+                      Hinzufuegen
+                    </button>
+                  </li>
+                }
+              </ul>
+            } @else if (shareSearchTerm().trim().length >= 2 && !searchingUsers()) {
+              <div class="inline-empty">
+                <mat-icon aria-hidden="true">person_off</mat-icon>
+                <span>Keine passenden User gefunden.</span>
+              </div>
+            }
+          }
+
+          @if (list()!.collaborators.length > 0) {
+            <ul class="collaborator-list">
+              @for (collaborator of list()!.collaborators; track collaborator.id) {
+                <li>
+                  <div>
+                    <strong>{{ collaborator.name || collaborator.email }}</strong>
+                    @if (collaborator.name) {
+                      <span>{{ collaborator.email }}</span>
+                    }
+                  </div>
+
+                  @if (showShareControls()) {
+                    <button
+                      mat-icon-button
+                      type="button"
+                      [attr.aria-label]="displayUser(collaborator) + ' entfernen'"
+                      [disabled]="removingShareUserId() === collaborator.id"
+                      (click)="removeCollaborator(collaborator.id)"
+                    >
+                      @if (removingShareUserId() === collaborator.id) {
+                        <mat-progress-spinner mode="indeterminate" diameter="18" />
+                      } @else {
+                        <mat-icon aria-hidden="true">person_remove</mat-icon>
+                      }
+                    </button>
+                  }
+                </li>
+              }
+            </ul>
+          } @else {
+            <div class="inline-empty">
+              <mat-icon aria-hidden="true">group</mat-icon>
+              <span>Noch keine Mitwirkenden.</span>
+            </div>
+          }
+        </mat-card-content>
+      </mat-card>
+    }
+
     <mat-card class="items-card" appearance="outlined">
       <mat-card-header>
         <mat-card-title>Items</mat-card-title>