Skip to content

Commit 3f5d7d9

Browse files
volodyayakubovskyyvolodyayakubovskyy
authored
Merge pull request #182 from CenterForOpenScience/feat/252-inst-projects
Feat/252 inst projects
2 parents 0e26c7b + 4a2e8fb commit 3f5d7d9

34 files changed

+871
-154
lines changed

‎src/app/features/admin-institutions/admin-institutions.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@ <h1>{{ institution().name }}</h1>
1818
</div>
1919
</div>
2020

21+
<div class="px-3 py-4 bg-white md:hidden md:px-5">
22+
<osf-select
23+
[options]="resourceTabOptions"
24+
[(selectedValue)]="selectedTab"
25+
[fullWidth]="true"
26+
class="text-center"
27+
(changeValue)="onTabChange($event)"
28+
/>
29+
</div>
30+
2131
<p-tabs [value]="selectedTab" (valueChange)="onTabChange($event)" class="flex-1 px-3 hidden md:px-5 md:inline">
2232
<p-tablist>
2333
@for (item of resourceTabOptions; track $index) {

‎src/app/features/admin-institutions/admin-institutions.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import { NgOptimizedImage } from '@angular/common';
88
import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
99
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
1010

11+
import { Primitive } from '@osf/core/helpers';
1112
import { resourceTabOptions } from '@osf/features/admin-institutions/constants/resource-tab-option.constant';
12-
import { LoadingSpinnerComponent } from '@shared/components';
13+
import { LoadingSpinnerComponent, SelectComponent } from '@shared/components';
1314
import { FetchInstitutionById, InstitutionsSearchSelectors } from '@shared/stores';
1415

1516
@Component({
1617
selector: 'osf-admin-institutions',
17-
imports: [TabsModule, TranslateModule, RouterOutlet, NgOptimizedImage, LoadingSpinnerComponent],
18+
imports: [TabsModule, TranslateModule, RouterOutlet, NgOptimizedImage, LoadingSpinnerComponent, SelectComponent],
1819
templateUrl: './admin-institutions.component.html',
1920
styleUrl: './admin-institutions.component.scss',
2021
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,10 +45,11 @@ export class AdminInstitutionsComponent implements OnInit {
4445
this.selectedTab = this.route.snapshot.firstChild?.routeConfig?.path || 'summary';
4546
}
4647

47-
onTabChange(selectedValue: string | number) {
48+
onTabChange(selectedValue: Primitive) {
4849
const value = String(selectedValue);
4950
this.selectedTab = value;
5051
const selectedTab = this.resourceTabOptions.find((tab) => tab.value === value);
52+
5153
if (selectedTab) {
5254
this.router.navigate([selectedTab.value], { relativeTo: this.route });
5355
}

‎src/app/features/admin-institutions/components/admin-table/admin-table.component.html‎

Lines changed: 91 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,65 @@
1-
<div class="flex justify-content-between align-items-center p-3">
2-
<div>
1+
<div class="flex justify-content-between align-items-center py-2 px-0 md:py-3 md:px-3">
2+
<div class="hidden md:block">
33
<ng-content select="[slot=amount]"></ng-content>
44
</div>
55

66
<p-menu #downloadMenu [model]="downloadMenuItems()" appendTo="body" popup>
77
<ng-template #item let-item>
8-
<a class="p-menu-item-link ml-1" target="_blank" [href]="item.link">
8+
<a class="p-menu-item-link ml-1" osfStopPropagation target="_blank" [href]="item.link">
99
<i [class]="item.icon"></i>
1010

1111
{{ item.label }}
1212
</a>
1313
</ng-template>
1414
</p-menu>
1515

16-
<div class="filters-section flex align-items-center gap-2">
16+
<div class="flex align-items-center gap-2 flex-column w-full md:flex-row md:w-fit">
1717
<ng-content select="[slot=otherFilters]"></ng-content>
1818

19-
<p-multiselect
20-
[options]="tableColumns()"
21-
[(ngModel)]="selectedColumns"
22-
(onChange)="onColumnSelectionChange($event.value)"
23-
optionLabel="header"
24-
[showToggleAll]="false"
25-
[showClear]="false"
26-
[dropdownIcon]="'hidden'"
27-
>
28-
<ng-template let-values pTemplate="selectedItems">
29-
<div class="flex align-items-center gap-2">
30-
<i class="fa fa-table-columns text-primary font-bold"></i>
31-
<span>{{ 'adminInstitutions.institutionUsers.customize' | translate }}</span>
32-
</div>
33-
</ng-template>
19+
<div class="flex align-items-center gap-2 justify-content-between w-full md:justify-content-start md:w-fit">
20+
<p-multiselect
21+
class="w-9 md:w-fit"
22+
[options]="tableColumns()"
23+
[(ngModel)]="selectedColumns"
24+
(onChange)="onColumnSelectionChange($event.value)"
25+
optionLabel="header"
26+
[showToggleAll]="false"
27+
[showClear]="false"
28+
[dropdownIcon]="'hidden'"
29+
>
30+
<ng-template let-values pTemplate="selectedItems">
31+
<div class="flex align-items-center gap-2">
32+
<i class="fa fa-table-columns text-primary font-bold"></i>
33+
<span>{{ 'adminInstitutions.institutionUsers.customize' | translate }}</span>
34+
</div>
35+
</ng-template>
3436

35-
<ng-template #item let-item>
36-
{{ item.header | translate }}
37-
</ng-template>
38-
</p-multiselect>
37+
<ng-template #item let-item>
38+
{{ item.header | translate }}
39+
</ng-template>
40+
</p-multiselect>
3941

40-
@if (downloadLink()) {
41-
<p-button
42-
icon="fa fa-download text-primary text-xl"
43-
class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
44-
severity="info"
45-
(click)="downloadMenu.toggle($event)"
46-
/>
47-
}
42+
@if (downloadLink()) {
43+
<p-button
44+
icon="fa fa-download text-primary text-xl"
45+
outlined
46+
class="grey-border-color download-button"
47+
severity="info"
48+
(click)="downloadMenu.toggle($event)"
49+
/>
50+
}
4851

49-
@if (reportsLink()) {
50-
<a
51-
pButton
52-
[href]="reportsLink()"
53-
class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
54-
target="_blank"
55-
>
56-
<i class="fa fa-chart-pie text-primary border-1 border-transparent text-xl"></i>
57-
</a>
58-
}
52+
@if (reportsLink()) {
53+
<a
54+
pButton
55+
[href]="reportsLink()"
56+
class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding no-underline"
57+
target="_blank"
58+
>
59+
<i class="fa fa-chart-pie text-xl"></i>
60+
</a>
61+
}
62+
</div>
5963
</div>
6064
</div>
6165

@@ -70,12 +74,12 @@
7074
[sortOrder]="currentSortOrder()"
7175
[customSort]="true"
7276
[resetPageOnSort]="false"
73-
[tableStyle]="{ 'min-width': '50rem' }"
77+
class="institution-admin-table"
7478
>
7579
<ng-template #header let-columns>
7680
<tr>
7781
@for (col of columns; track col.field) {
78-
<th [pSortableColumn]="col.sortable ? col.field : null">
82+
<th [pSortableColumn]="col.sortable ? col.field : null" (click)="onHeaderClick(col)">
7983
<div class="flex align-items-center gap-2">
8084
<span>{{ col.header | translate }}</span>
8185
@if (col.sortable) {
@@ -98,10 +102,18 @@
98102
[target]="getLinkTarget(rowData[col.field], col)"
99103
class="text-primary no-underline hover:underline"
100104
>
101-
{{ getCellValueWithFormatting(rowData[col.field], col) }}
105+
@if (col.dateFormat) {
106+
{{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
107+
} @else {
108+
{{ getCellValue(rowData[col.field]) }}
109+
}
102110
</a>
103111
} @else {
104-
{{ getCellValueWithFormatting(rowData[col.field], col) }}
112+
@if (col.dateFormat) {
113+
{{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
114+
} @else {
115+
{{ getCellValue(rowData[col.field]) }}
116+
}
105117
}
106118

107119
@if (col.showIcon) {
@@ -121,13 +133,39 @@
121133
</ng-template>
122134
</p-table>
123135

124-
@if (enablePagination() && totalCount() > pageSize()) {
125-
<div class="p-3">
126-
<osf-custom-paginator
127-
[first]="first()"
128-
[totalCount]="totalCount()"
129-
[rows]="pageSize()"
130-
(pageChanged)="onPageChange($event)"
131-
></osf-custom-paginator>
136+
@if (isNextPreviousPagination()) {
137+
<div class="flex column-gap-2 w-full justify-content-center pt-2">
138+
@if (firstLink() && prevLink()) {
139+
<p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(firstLink())"></p-button>
140+
}
141+
142+
<p-button
143+
icon="fas fa-angle-left"
144+
severity="contrast"
145+
text
146+
[disabled]="!prevLink()"
147+
(click)="switchPage(prevLink())"
148+
>
149+
</p-button>
150+
151+
<p-button
152+
icon="fas fa-angle-right"
153+
severity="contrast"
154+
text
155+
[disabled]="!nextLink()"
156+
(click)="switchPage(nextLink())"
157+
>
158+
</p-button>
132159
</div>
160+
} @else {
161+
@if (enablePagination() && totalCount() > pageSize()) {
162+
<div class="p-3">
163+
<osf-custom-paginator
164+
[first]="first()"
165+
[totalCount]="totalCount()"
166+
[rows]="pageSize()"
167+
(pageChanged)="onPageChange($event)"
168+
></osf-custom-paginator>
169+
</div>
170+
}
133171
}

‎src/app/features/admin-institutions/components/admin-table/admin-table.component.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.p-06 {
2-
padding: 0.6rem;
2+
padding: 0.625rem;
33
}
44

55
.hover-group {
@@ -15,6 +15,11 @@
1515
}
1616
}
1717

18+
.download-button {
19+
--p-button-outlined-info-border-color: var(--grey-2);
20+
--p-button-padding-y: 0.625rem;
21+
}
22+
1823
.child-button-0-padding {
1924
--p-button-padding-y: 0;
2025
--p-button-icon-only-width: max-content;

0 commit comments

Comments
 (0)