added account list display in lists #46

src/app/app.module.ts

@@ -59,6 +59,7 @@ import { SettingsState } from './states/settings.state';
 import { AccountEmojiPipe } from './pipes/account-emoji.pipe';
 import { CardComponent } from './components/stream/status/card/card.component';
 import { ListEditorComponent } from './components/floating-column/manage-account/my-account/list-editor/list-editor.component';
+import { ListAccountComponent } from './components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -106,7 +107,8 @@ const routes: Routes = [
     NotificationsComponent,
     AccountEmojiPipe,
     CardComponent,
-    ListEditorComponent
+    ListEditorComponent,
+    ListAccountComponent
   ],
   imports: [
     FontAwesomeModule,

src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.html

@@ -0,0 +1,10 @@
+<div class="list-account">
+    <div class="list-account__action"></div>
+    <div class="list-account__account">
+        <img src="{{ account.avatar }}}" alt="" class="list-account__account--avatar">
+
+        <span class="list-account__account--display-name">{{ account.display_name }}</span>
+        <span class="list-account__account--acct">{{ account.acct }}</span>
+    </div>
+
+</div>

src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.scss

@@ -0,0 +1,39 @@
+@import "variables";
+
+.list-account {
+    $actin-width: 50px;
+
+    &__action {
+        float: right;
+        width: $actin-width;
+    }
+
+    &__account {
+        width: calc(100% - #{ $actin-width });
+        position: relative;
+        height: 50px;
+        
+
+        &--avatar {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 40px;
+            height: 40px;
+        }
+
+        &--display-name {
+            position: absolute;
+            top: 8px;
+            left: 60px;
+            color: white;
+        }
+
+        &--acct {
+            position: absolute;
+            top: 26px;
+            left: 60px;
+            color: $status-secondary-color;
+        }
+    }
+}

src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListAccountComponent } from './list-account.component';
+
+describe('ListAccountComponent', () => {
+  let component: ListAccountComponent;
+  let fixture: ComponentFixture<ListAccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListAccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Account } from "../../../../../../services/models/mastodon.interfaces";
+
+@Component({
+    selector: 'app-list-account',
+    templateUrl: './list-account.component.html',
+    styleUrls: ['./list-account.component.scss']
+})
+export class ListAccountComponent implements OnInit {
+
+    @Input() account: Account;
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.html

@@ -1,3 +1,5 @@
-<p>
-  list-editor works!
-</p>
+<div class="list-editor flexcroll">
+    <div class="list-editor__list">
+        <app-list-account class="list-editor__account" *ngFor="let account of accountsInList" [account]="account"></app-list-account>
+    </div>
+</div>

src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.scss

@@ -0,0 +1,17 @@
+@import "variables";
+@import "commons";
+
+.list-editor {
+    background-color: $color-primary;
+    min-height: 20px;
+    max-height: 300px;
+    margin-top: 1px;
+    overflow-y: auto;
+
+    &__account {
+        display: block;
+        &:not(:last-child){
+            border-bottom: 1px solid #000;
+        }
+    }
+}

src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.ts

@@ -1,15 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+
+import { StreamWrapper } from '../my-account.component';
+import { MastodonService } from '../../../../../services/mastodon.service';
+import { AccountWrapper } from '../../../../../models/account.models';
+import { NotificationService } from '../../../../../services/notification.service';
+import { Account } from "../../../../../services/models/mastodon.interfaces";
 
 @Component({
-  selector: 'app-list-editor',
-  templateUrl: './list-editor.component.html',
-  styleUrls: ['./list-editor.component.scss']
+    selector: 'app-list-editor',
+    templateUrl: './list-editor.component.html',
+    styleUrls: ['./list-editor.component.scss']
 })
 export class ListEditorComponent implements OnInit {
 
-  constructor() { }
+    @Input() list: StreamWrapper;
+    @Input() account: AccountWrapper;
 
-  ngOnInit() {
-  }
+    accountsInList: Account[] = [];
+
+    constructor(
+        private readonly notificationService: NotificationService,
+        private readonly mastodonService: MastodonService) { }
+
+    ngOnInit() {
+        console.log(this.list);
+        console.log(this.account);
+        this.accountsInList.length = 0;
+        this.mastodonService.getListAccounts(this.account.info, this.list.listId)
+            .then((accounts: Account[]) => {
+                this.accountsInList = accounts;
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err);
+            });
+    }
 
 }

src/app/components/floating-column/manage-account/my-account/my-account.component.html

@@ -32,6 +32,8 @@
             {{ list.name }} <fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare">
             </fa-icon>
         </a>
+
+        <app-list-editor *ngIf="list.editList" [list]="list" [account]="account"></app-list-editor>
     </div>
     <a href class="my-account__list--button" title="create list" (click)="createList()">
         <fa-icon class="my-account__link--icon" [icon]="faPlus"></fa-icon>

src/app/components/floating-column/manage-account/my-account/my-account.component.ts

@@ -133,8 +133,7 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     }
 
     editList(list: StreamWrapper): boolean {
-
-
+        list.editList = !list.editList;
         return false;
     }
 
@@ -160,11 +159,12 @@ export class MyAccountComponent implements OnInit, OnDestroy {
     }
 }
 
-class StreamWrapper extends StreamElement {
+export class StreamWrapper extends StreamElement {
     constructor(stream: StreamElement) {
         super(stream.type, stream.name, stream.accountId, stream.tag, stream.list, stream.listId, stream.instance);
     }
 
     isAdded: boolean;
     confirmDeletion: boolean;
+    editList: boolean;
 }

src/app/services/mastodon.service.ts

@@ -7,7 +7,7 @@ import { AccountInfo } from '../states/accounts.state';
 import { StreamTypeEnum, StreamElement } from '../states/streams.state';
 
 @Injectable()
-export class MastodonService {        
+export class MastodonService {       
     private apiRoutes = new ApiRoutes();
 
     constructor(private readonly httpClient: HttpClient) { }
@@ -286,6 +286,12 @@ export class MastodonService {
         const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
         return this.httpClient.delete(route, { headers: headers }).toPromise();
     } 
+
+    getListAccounts(account: AccountInfo, listId: string): Promise<Account[]> {
+        let route = `https://${account.instance}${this.apiRoutes.getAccountsInList}`.replace('{0}', listId);
+        const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
+        return this.httpClient.get<Account[]>(route, { headers: headers }).toPromise();
+    }   
 }
 
 export enum VisibilityEnum {