Feat/159 project settings design

src/app/app.routes.ts

@@ -141,6 +141,11 @@ export const routes: Routes = [
             loadComponent: () =>
               import('@osf/features/project/analytics/analytics.component').then((mod) => mod.AnalyticsComponent),
           },
+          {
+            path: 'settings',
+            loadComponent: () =>
+              import('./features/project/settings/settings.component').then((mod) => mod.SettingsComponent),
+          },
         ],
       },
       {

src/app/core/constants/nav-items.constant.ts

@@ -102,6 +102,10 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
       },
       { label: 'navigation.project.contributors', routerLink: 'contributors' },
       { label: 'navigation.project.analytics', routerLink: 'analytics' },
+      {
+        label: 'navigation.project.settings',
+        routerLink: 'settings',
+      },
     ],
   },
 ];

src/app/features/meetings/pages/meeting-details/meeting-details.component.html

@@ -1,70 +1,74 @@
-<osf-sub-header [title]="meeting().title"
-                [description]="pageDescription()"/>
+<osf-sub-header [title]="meeting().title" [description]="pageDescription()" />
 
 <section class="flex-1 flex flex-column bg-white p-4">
-    <osf-search-input class="w-full mt-4"
-                      [searchValue]="searchValue()"
-                      (searchValueChange)="searchValue.set($event || '')"
-                      [placeholder]="'meetings.details.searchPlaceholder' | translate"/>
+  <osf-search-input
+    class="w-full mt-4"
+    [searchValue]="searchValue()"
+    (searchValueChange)="searchValue.set($event || '')"
+    [placeholder]="'meetings.details.searchPlaceholder' | translate"
+  />
 
-    <p-table [value]="meetingSubmissions()"
-             [rows]="tableParams().rows"
-             [first]="tableParams().firstRowIndex"
-             [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
-             [paginator]="true"
-             [totalRecords]="tableParams().totalRecords"
-             paginatorDropdownAppendTo="body"
-             [resizableColumns]="true"
-             [autoLayout]="true"
-             [scrollable]="true"
-             [sortMode]="'single'"
-             [lazy]="true"
-             [lazyLoadOnInit]="true"
-             (onPage)="onPageChange($event)"
-             (onSort)="onSort($event)"
-             [sortField]="sortColumn()"
-             [customSort]="true">
-        <ng-template #header>
-            <tr>
-                <th pSortableColumn="title">
-                    {{ 'meetings.details.table.columns.title' | translate }}
-                    <p-sortIcon field="title"/>
-                </th>
-                <th pSortableColumn="authorName">
-                    {{ 'meetings.details.table.columns.author' | translate }}
-                    <p-sortIcon field="authorName"/>
-                </th>
-                <th pSortableColumn="meetingCategory">
-                    {{ 'meetings.details.table.columns.category' | translate }}
-                    <p-sortIcon field="meetingCategory"/>
-                </th>
-                <th pSortableColumn="dateCreated">
-                    {{ 'meetings.details.table.columns.dateCreated' | translate }}
-                    <p-sortIcon field="dateCreated"/>
-                </th>
-                <th pSortableColumn="downloadCount">
-                    {{ 'meetings.details.table.columns.downloads' | translate }}
-                    <p-sortIcon field="downloadCount"/>
-                </th>
-            </tr>
-        </ng-template>
-        <ng-template #body let-item>
-            <tr class="cursor-pointer"
-                [routerLink]="['/my-projects', item.id, 'overview']">
-                <td>{{ item.title }}</td>
-                <td>{{ item.authorName }}</td>
-                <td>{{ item.meetingCategory }}</td>
-                <td>{{ item.dateCreated | date: 'MMM d, y, h:mm a' }}</td>
-                <td>
-                    <p-button [label]="'meetings.details.downloadButton' | translate"
-                              icon="pi pi-download"
-                              class="mr-1"
-                              severity="secondary"
-                              [raised]="true"
-                              (click)="downloadSubmission($event, item)"/>
-                    {{ item.downloadCount }}
-                </td>
-            </tr>
-        </ng-template>
-    </p-table>
+  <p-table
+    [value]="meetingSubmissions()"
+    [rows]="tableParams().rows"
+    [first]="tableParams().firstRowIndex"
+    [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
+    [paginator]="true"
+    [totalRecords]="tableParams().totalRecords"
+    paginatorDropdownAppendTo="body"
+    [resizableColumns]="true"
+    [autoLayout]="true"
+    [scrollable]="true"
+    [sortMode]="'single'"
+    [lazy]="true"
+    [lazyLoadOnInit]="true"
+    (onPage)="onPageChange($event)"
+    (onSort)="onSort($event)"
+    [sortField]="sortColumn()"
+    [customSort]="true"
+  >
+    <ng-template #header>
+      <tr>
+        <th pSortableColumn="title">
+          {{ 'meetings.details.table.columns.title' | translate }}
+          <p-sortIcon field="title" />
+        </th>
+        <th pSortableColumn="authorName">
+          {{ 'meetings.details.table.columns.author' | translate }}
+          <p-sortIcon field="authorName" />
+        </th>
+        <th pSortableColumn="meetingCategory">
+          {{ 'meetings.details.table.columns.category' | translate }}
+          <p-sortIcon field="meetingCategory" />
+        </th>
+        <th pSortableColumn="dateCreated">
+          {{ 'meetings.details.table.columns.dateCreated' | translate }}
+          <p-sortIcon field="dateCreated" />
+        </th>
+        <th pSortableColumn="downloadCount">
+          {{ 'meetings.details.table.columns.downloads' | translate }}
+          <p-sortIcon field="downloadCount" />
+        </th>
+      </tr>
+    </ng-template>
+    <ng-template #body let-item>
+      <tr class="cursor-pointer" [routerLink]="['/my-projects', item.id, 'overview']">
+        <td>{{ item.title }}</td>
+        <td>{{ item.authorName }}</td>
+        <td>{{ item.meetingCategory }}</td>
+        <td>{{ item.dateCreated | date: 'MMM d, y, h:mm a' }}</td>
+        <td>
+          <p-button
+            [label]="'meetings.details.downloadButton' | translate"
+            icon="pi pi-download"
+            class="mr-1"
+            severity="secondary"
+            [raised]="true"
+            (click)="downloadSubmission($event, item)"
+          />
+          {{ item.downloadCount }}
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
 </section>

src/app/features/meetings/pages/meetings-landing/meetings-landing.component.html

@@ -1,52 +1,57 @@
-<osf-sub-header [title]="'meetings.landing.title' | translate"
-                [icon]="'meetings'"
-                [description]="'meetings.landing.description' | translate"/>
+<osf-sub-header
+  [title]="'meetings.landing.title' | translate"
+  [icon]="'meetings'"
+  [description]="'meetings.landing.description' | translate"
+/>
 
-<section class="flex-1 flex flex-column bg-white p-4"
-         [class.mobile]="isXSmall()">
+<section class="flex-1 flex flex-column bg-white p-4" [class.mobile]="isXSmall()">
   <section class="mt-2">
     <p>{{ 'meetings.landing.submissionsNote' | translate }}</p>
   </section>
 
-  <osf-search-input class="w-full mt-4"
-                    [searchValue]="searchValue()"
-                    (searchValueChange)="searchValue.set($event || '')"
-                    [placeholder]="'meetings.landing.searchPlaceholder' | translate"/>
+  <osf-search-input
+    class="w-full mt-4"
+    [searchValue]="searchValue()"
+    (searchValueChange)="searchValue.set($event || '')"
+    [placeholder]="'meetings.landing.searchPlaceholder' | translate"
+  />
 
-  <p-table [value]="meetings()"
-           [rows]="tableParams().rows"
-           [first]="tableParams().firstRowIndex"
-           [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
-           [paginator]="true"
-           [totalRecords]="tableParams().totalRecords"
-           paginatorDropdownAppendTo="body"
-           [resizableColumns]="true"
-           [autoLayout]="true"
-           [scrollable]="true"
-           [sortMode]="'single'"
-           [lazy]="true"
-           [lazyLoadOnInit]="true"
-           (onPage)="onPageChange($event)"
-           (onSort)="onSort($event)"
-           [sortField]="sortColumn()"
-           [customSort]="true">
+  <p-table
+    [value]="meetings()"
+    [rows]="tableParams().rows"
+    [first]="tableParams().firstRowIndex"
+    [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
+    [paginator]="true"
+    [totalRecords]="tableParams().totalRecords"
+    paginatorDropdownAppendTo="body"
+    [resizableColumns]="true"
+    [autoLayout]="true"
+    [scrollable]="true"
+    [sortMode]="'single'"
+    [lazy]="true"
+    [lazyLoadOnInit]="true"
+    (onPage)="onPageChange($event)"
+    (onSort)="onSort($event)"
+    [sortField]="sortColumn()"
+    [customSort]="true"
+  >
     <ng-template #header>
       <tr>
         <th pSortableColumn="title">
           {{ 'meetings.landing.table.columns.title' | translate }}
-          <p-sortIcon field="title"/>
+          <p-sortIcon field="title" />
         </th>
         <th pSortableColumn="submissionsCount">
           {{ 'meetings.landing.table.columns.submissions' | translate }}
-          <p-sortIcon field="submissionsCount"/>
+          <p-sortIcon field="submissionsCount" />
         </th>
         <th pSortableColumn="location">
           {{ 'meetings.landing.table.columns.location' | translate }}
-          <p-sortIcon field="location"/>
+          <p-sortIcon field="location" />
         </th>
         <th pSortableColumn="startDate">
           {{ 'meetings.landing.table.columns.date' | translate }}
-          <p-sortIcon field="startDate"/>
+          <p-sortIcon field="startDate" />
         </th>
       </tr>
     </ng-template>
@@ -63,29 +68,23 @@
   <section class="flex lg:flex-row flex-column gap-3 w-full mt-6">
     <p-card class="lg:w-4 w-12">
       <div class="flex flex-column align-items-center justify-content-center gap-4 lg:h-18rem">
-        <img src="../../../../../assets/icons/colored/discover.svg"
-             alt="Discover"
-             class="w-8rem h-8rem"/>
+        <img src="../../../../../assets/icons/colored/discover.svg" alt="Discover" class="w-8rem h-8rem" />
         <h2>{{ 'meetings.landing.features.discover.title' | translate }}</h2>
         <p class="text-center">{{ 'meetings.landing.features.discover.description' | translate }}</p>
       </div>
     </p-card>
 
     <p-card class="lg:w-4 w-12 h-18rem">
       <div class="flex flex-column align-items-center justify-content-center gap-4 lg:h-18rem">
-        <img src="../../../../../assets/icons/colored/share.svg"
-             alt="Share"
-             class="w-8rem h-8rem"/>
+        <img src="../../../../../assets/icons/colored/share.svg" alt="Share" class="w-8rem h-8rem" />
         <h2>{{ 'meetings.landing.features.share.title' | translate }}</h2>
         <p class="text-center">{{ 'meetings.landing.features.share.description' | translate }}</p>
       </div>
     </p-card>
 
     <p-card class="lg:w-4 w-12">
       <div class="flex flex-column align-items-center justify-content-center gap-4 lg:h-18rem">
-        <img src="../../../../../assets/icons/colored/enhance.svg"
-             alt="Enhance"
-             class="w-8rem h-8rem"/>
+        <img src="../../../../../assets/icons/colored/enhance.svg" alt="Enhance" class="w-8rem h-8rem" />
         <h2>{{ 'meetings.landing.features.enhance.title' | translate }}</h2>
         <p class="text-center">{{ 'meetings.landing.features.enhance.description' | translate }}</p>
       </div>
@@ -96,18 +95,10 @@ <h2>{{ 'meetings.landing.features.enhance.title' | translate }}</h2>
     <h2 class="text-2xl text-center">{{ 'meetings.landing.users.title' | translate }}</h2>
 
     <section class="flex flex-row justify-content-center align-items-start gap-7 flex-wrap">
-      <img src="assets/icons/colored/aps.svg"
-           alt="APS"
-           height="90"/>
-      <img src="assets/icons/colored/bitss.svg"
-           alt="BITSS"
-           height="90"/>
-      <img src="assets/icons/colored/nrao.svg"
-           alt="NRAO"
-           height="90"/>
-      <img src="assets/icons/colored/spsp.svg"
-           alt="SPSP"
-           height="90"/>
+      <img src="assets/icons/colored/aps.svg" alt="APS" height="90" />
+      <img src="assets/icons/colored/bitss.svg" alt="BITSS" height="90" />
+      <img src="assets/icons/colored/nrao.svg" alt="NRAO" height="90" />
+      <img src="assets/icons/colored/spsp.svg" alt="SPSP" height="90" />
     </section>
   </section>
 </section>

src/app/features/project/contributors/components/add-contributor-dialog/add-contributor-dialog.component.spec.ts

@@ -8,9 +8,8 @@ describe('AddContributorDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AddContributorDialogComponent]
-    })
-    .compileComponents();
+      imports: [AddContributorDialogComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(AddContributorDialogComponent);
     component = fixture.componentInstance;

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html

@@ -12,30 +12,39 @@
     />
   </div>
 
-  <hr class="break-line"/>
+  <hr class="break-line" />
 
   <div class="flex column-gap-2">
     <p-checkbox variant="filled" binary="true" [(ngModel)]="anonymous"></p-checkbox>
-    <p>Anonymize contributor list for this link (e.g., for blind peer review).
-      <span class="font-italic">Ensure the wiki pages, files, registration forms and add-ons do not contain identifying information.</span>
+    <p>
+      Anonymize contributor list for this link (e.g., for blind peer review).
+      <span class="font-italic"
+        >Ensure the wiki pages, files, registration forms and add-ons do not contain identifying information.</span
+      >
     </p>
   </div>
 
-  <hr class="break-line"/>
+  <hr class="break-line" />
 
-  <p>Which components would you like to associate with this link?
-    <span class="font-italic">Anyone with the private link can view—but not edit—the components associated with the link.</span>
+  <p>
+    Which components would you like to associate with this link?
+    <span class="font-italic"
+      >Anyone with the private link can view—but not edit—the components associated with the link.</span
+    >
   </p>
 
   <div class="flex flex-column gap-2">
     <div class="flex gap-1">
-      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample1"></p-checkbox><p>Component Name Example</p>
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample1"></p-checkbox>
+      <p>Component Name Example</p>
     </div>
     <div class="flex gap-1">
-      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample2"></p-checkbox><p>Component Name Example</p>
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample2"></p-checkbox>
+      <p>Component Name Example</p>
     </div>
     <div class="flex gap-1">
-      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample3"></p-checkbox><p>Component Name Example</p>
+      <p-checkbox variant="filled" binary="true" [(ngModel)]="componentExample3"></p-checkbox>
+      <p>Component Name Example</p>
     </div>
   </div>
 

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.spec.ts

@@ -8,9 +8,8 @@ describe('CreateViewLinkDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CreateViewLinkDialogComponent]
-    })
-    .compileComponents();
+      imports: [CreateViewLinkDialogComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(CreateViewLinkDialogComponent);
     component = fixture.componentInstance;