Improved dialogs (part 2) (Hellsticks96#80)

* improved header drop down and my profile dialogs

* improved show channel member dialog

* improved add channel dialog design

* small change

* new designed & fixed add members to channel

src/app/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.html

@@ -1,38 +1,55 @@
 <section class="dialog-section">
-  <div>
-    <h2 mat-dialog-title>Leute Hinzufügen</h2>
-    <button class="closeButton" (click)="closeDialog()" mat-icon-button>
-      <img src="../../../assets/img/icons/close.svg">
-    </button>
-  </div>
-  <mat-dialog-content>
-    <mat-label># Entwicklerteam</mat-label>
-    <mat-form-field appearance="outline">
-      <mat-chip-grid #chipList>
-        <mat-chip-row *ngFor="let user of addedMembers" [removable]="removable">
-          {{ user.name }}
-          <mat-icon matChipRemove *ngIf="removable" (click)="removeUser(user)">cancel</mat-icon>
+  <header>
+    <div>
+      <h2 mat-dialog-title>Leute hinzufügen</h2>
+      <button class="closeButton" (click)="closeDialog()" mat-icon-button>
+        <img src="../../../assets/img/icons/close.svg">
+      </button>
+    </div>
+    <span><img src="../../assets/img/icons/tag-purple-2.svg"> Entwicklerteam</span>
+  </header>
+  <mat-form-field class="example-chip-list">
+    <mat-chip-grid #chipGrid>
+      @for (user of addedMembers; track user) {
+        <mat-chip-row (removed)="remove(user)">
+        @if (user.avatar.length > 1) {
+          <img src="{{ user.avatar }}">
+      } @else {
+          <img src="../../assets/img/avatar/{{ user.avatar}}.svg">
+      }
+        <h6>{{ user.name }}</h6>
+        <button class="closeButton" matChipRemove mat-icon-button>
+            <img src="../../assets/img/icons/close.svg">
+        </button>
         </mat-chip-row>
-        <input type="text" [matAutocomplete]="auto" [formControl]="nameControl" [matChipInputFor]="chipList"
-          [matChipInputSeparatorKeyCodes]="separatorKeysCodes" #inputValue placeholder="Name eingeben" matInput />
-      </mat-chip-grid>
-      <mat-autocomplete class="custom-autocomplete" #auto="matAutocomplete">
-        <mat-option *ngFor="let message of filteredOptions | async" [value]="message.name"
-          (click)="addSingleUser(message.name)">
-          <div class="autocomplete-icons">
-            <img [src]="getAvatarPath(message.avatar)" width="35" height="35" alt="Avatar" />
-            {{ message.name }}
-          </div>
-        </mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
-  </mat-dialog-content>
-
+      }
+    </mat-chip-grid>
+    <input placeholder="Name eingeben" #nameInput [formControl]="userCtrl"
+      [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
+      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+      (matChipInputTokenEnd)="add($event)"/>
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+      @for (user of filteredMembers | async; track user) {
+        @if (addedMembers.indexOf(user) == -1) {
+          <mat-option [value]="user.name">
+            @if (user.avatar.length > 1) {
+              <img src="{{ user.avatar }}">
+          } @else {
+              <img src="../../assets/img/avatar/{{ user.avatar}}.svg">
+          }
+            <h3>{{user.name}}</h3>
+          </mat-option>
+        }
+      }
+    </mat-autocomplete>
+  </mat-form-field>
 
-  <mat-dialog-actions>
+    <button mat-flat-button class="submit">Hinzufügen</button>
+  <!-- <mat-dialog-actions>
     <button
       [ngStyle]=" inputValue.value? { 'background-color': 'var(--Purple-1, #444df2)' } : { 'background-color': 'gray', cursor: 'not-allowed' } "
       [disabled]="!inputValue.value" mat-flat-button color="primary"> Hinzufügen
     </button>
-  </mat-dialog-actions>
+  </mat-dialog-actions> -->
+
 </section>