feat: adds primeng and novaloop design

This commit is contained in:
2023-02-20 11:41:58 +01:00
parent 9521cae1dc
commit a17f8de752
227 changed files with 39399 additions and 22040 deletions

View File

@@ -1,36 +1,43 @@
<nb-card>
<nb-card-header>
<h1>Followings</h1>
<div class="divider"></div>
<app-filters></app-filters>
</nb-card-header>
<nb-card-body>
<nb-list>
<nb-list-item *ngFor="let following of followings$ | async">
<app-page>
<div title>Followings (List View)</div>
<div body>
<div class="pb-6">
<app-filters></app-filters>
</div>
<div class="pt-6 grid gap-4 md:grid-cols lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
<div *ngFor="let following of followings$ | async" class="w-full overflow-y-visible overflow-x-hidden">
<app-account [account]="following">
<div body>
<div *ngIf="following.lists.length > 0">
<h4>Lists</h4>
<div *ngIf="following.lists.length > 0" class="pt-6">
<ul>
<li *ngFor="let list of following.lists">
<a [routerLink]="['/lists']" [queryParams]="{listId: list.id}">{{list.title}}</a>
<nb-icon icon="trash-2-outline" class="nb-icon-remove"
(click)="removeAccountFromList(following.id, list.id)"></nb-icon>
<i class="pi pi-list pr-2 align-middle"></i>
<a [routerLink]="['/lists']" [queryParams]="{listId: list.id}" class="align-middle">{{list.title}}</a>
<i class="pl-2 pi pi-times-circle align-middle cursor-pointer text-red-600" (click)="removeAccountFromList(following.id, list.id)"></i>
</li>
</ul>
</div>
</div>
<div footer>
<select class="list-select" #listSelect>
<option *ngFor="let list of lists$ | async" [value]="list.id">{{list.title}}</option>
</select>
<button class="add-to-list-button" nbButton
status="basic"
(click)="addAccountToSelectedList(following.id, listSelect)">Add to list
</button>
<div footer class="md:pt-6 flex flex-col space-y-6">
<p-multiSelect
[options]="(lists$ | async)!"
appendTo="body"
optionLabel="title"
optionValue="id"
#listSelect
></p-multiSelect>
<button
pButton
type="button"
class="p-button-sm"
(click)="addAccountToSelectedList(following.id, listSelect)"
label="Add to list(s)"
></button>
</div>
</app-account>
</nb-list-item>
</nb-list>
</nb-card-body>
</nb-card>
</div>
</div>
</div>
</app-page>