Feat(employment-ui): Employment UI

src/app/features/home/home.component.scss

@@ -186,6 +186,8 @@
   }
 
   .tablet {
+    margin: 0;
+
     .quick-search-container {
       padding-left: 2.57rem;
       padding-right: 2.57rem;

src/app/features/settings/account-settings/account-settings.component.html

@@ -1,7 +1,8 @@
-<section class="header">
-  <i class="osf-icon-settings"></i>
-  <h1>Account settings</h1>
-</section>
+<osf-sub-header
+  [showButton]="false"
+  [title]="'Account settings'"
+  [icon]="'settings'"
+/>
 
 <section class="content">
   <section class="account-setting">

src/app/features/settings/account-settings/account-settings.component.scss

@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 1.7rem;
   color: var(--dark-blue-1);
 
   .header {

src/app/features/settings/account-settings/account-settings.component.ts

@@ -13,6 +13,7 @@ import { Message } from 'primeng/message';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { AddEmailComponent } from '@osf/features/settings/account-settings/add-email/add-email.component';
 import { DeactivateAccountComponent } from '@osf/features/settings/account-settings/deactivate-account/deactivate-account/deactivate-account.component';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
 
 @Component({
   selector: 'osf-account-settings',
@@ -23,6 +24,7 @@ import { DeactivateAccountComponent } from '@osf/features/settings/account-setti
     ReactiveFormsModule,
     InputText,
     Message,
+    SubHeaderComponent,
   ],
   providers: [DialogService],
   templateUrl: './account-settings.component.html',

src/app/features/settings/addons/addons.component.ts

@@ -17,11 +17,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { DropdownModule } from 'primeng/dropdown';
 import { FormsModule } from '@angular/forms';
-
-interface TabOption {
-  label: string;
-  value: number;
-}
+import { TabOption } from '@osf/shared/entities/tab-option.interface';
 
 @Component({
   selector: 'osf-addons',

src/app/features/settings/profile-settings/entities/user-position.entity.ts

@@ -0,0 +1,8 @@
+export interface UserPosition {
+  jobTitle: string;
+  department: string;
+  institution: string;
+  startDate: Date | null;
+  endDate: Date | null;
+  presentlyEmployed: boolean;
+}

src/app/features/settings/profile-settings/profile-settings.component.html

@@ -5,15 +5,30 @@
 />
 
 <div class="flex-column flex flex-1 w-full">
-  <p-tabs [value]="defaultTabValue" class="flex-1">
-    <p-tablist class="pr-5 pl-5">
-      <p-tab [value]="0">Name</p-tab>
-      <p-tab [value]="1">Social</p-tab>
-      <p-tab [value]="2">Employment</p-tab>
-      <p-tab [value]="3">Education</p-tab>
-    </p-tablist>
+  <p-tabs
+    [value]="selectedTab"
+    (valueChange)="onTabChange(+$event)"
+    class="flex-1"
+  >
+    @if (!isMobile()) {
+      <p-tablist class="pr-5 pl-5">
+        <p-tab [value]="0">Name</p-tab>
+        <p-tab [value]="1">Social</p-tab>
+        <p-tab [value]="2">Employment</p-tab>
+        <p-tab [value]="3">Education</p-tab>
+      </p-tablist>
+    }
 
     <p-tabpanels class="p-3 sm:p-5 flex-1">
+      @if (isMobile()) {
+        <p-select
+          class="w-full mb-4"
+          [options]="tabOptions"
+          optionLabel="label"
+          optionValue="value"
+          [(ngModel)]="selectedTab"
+        ></p-select>
+      }
       <!--NAME-->
       <p-tabpanel [value]="0" class="flex flex-column gap-4 flex-1">
         <div class="border-1 border-round-lg p-3 sm:p-5 name-container">
@@ -23,9 +38,9 @@ <h3 class="font-normal">
             the "Auto-fill" button to automatically infer your first name, last
             name, etc., or edit the fields directly below.
           </h3>
-          <div class="flex flex-column row-gap-4 mt-4">
+          <div class="flex flex-column row-gap-2 md:row-gap-4 mt-4">
             <div
-              class="flex flex-column row-gap-2 xl:flex-row xl:align-items-end xl:column-gap-3 w-full mb-3"
+              class="flex flex-column row-gap-2 xl:flex-row xl:align-items-end xl:column-gap-3 w-full md:0 md:mb-3"
             >
               <div class="w-full xl:w-6">
                 <label for="full-name" class="font-normal xl:font-light"
@@ -90,7 +105,7 @@ <h3>Doe, J. T.</h3>
                 </div>
               </div>
 
-              <div class="flex flex-row column-gap-5">
+              <div class="flex column-gap-5">
                 <div class="flex flex-column style-wrapper">
                   <h3>Style:</h3>
                   <h3>Citation format:</h3>
@@ -105,10 +120,15 @@ <h3>Doe, John T.</h3>
         </div>
 
         <div
-          class="flex flex-row align-items-end column-gap-2 ml-auto h-3rem mt-2"
+          class="flex justify-content-between align-items-end column-gap-2 md:ml-auto h-3rem mt-2"
         >
-          <p-button label="Discard Changes" severity="info" disabled="true" />
-          <div class="wide-m-button">
+          <p-button
+            class="w-6 btn-full-width md:w-auto"
+            label="Discard Changes"
+            severity="info"
+            disabled="true"
+          />
+          <div class="w-6 btn-full-width md:w-auto wide-m-button">
             <p-button label="Save" disabled="true" />
           </div>
         </div>
@@ -132,8 +152,8 @@ <h2>Social Link {{ index + 1 }}</h2>
                   @if (index !== 0) {
                     <div class="ml-auto remove-button">
                       <p-button class="ml-auto" (click)="removeLink(index)"
-                        >Remove</p-button
-                      >
+                        >Remove
+                      </p-button>
                     </div>
                   }
                 </div>
@@ -154,9 +174,9 @@ <h2>Social Link {{ index + 1 }}</h2>
                   <div class="w-full md:w-8">
                     <p class="font-light mb-1">Web Address</p>
                     <p-inputgroup class="addon-input">
-                      <p-inputgroup-addon>{{
-                        getDomain(index)
-                      }}</p-inputgroup-addon>
+                      <p-inputgroup-addon
+                        >{{ getDomain(index) }}
+                      </p-inputgroup-addon>
                       <input
                         pInputText
                         placeholder="{{ getPlaceholder(index) }}"
@@ -173,23 +193,167 @@ <h2>Social Link {{ index + 1 }}</h2>
         <p-button
           label="Add One More"
           severity="secondary"
-          class="ml-auto"
+          class="ml-auto w-6 btn-full-width md:w-auto"
           (click)="addLink()"
         />
 
         <div
-          class="flex flex-row align-items-end column-gap-2 ml-auto h-3rem mt-2"
+          class="flex justify-content-between align-items-end column-gap-2 md:ml-auto h-3rem mt-2"
         >
-          <p-button label="Discard Changes" severity="info" disabled="true" />
-          <div class="wide-m-button">
+          <p-button
+            class="w-6 btn-full-width md:w-auto"
+            label="Discard Changes"
+            severity="info"
+            disabled="true"
+          />
+          <div class="w-6 btn-full-width md:w-auto wide-m-button">
             <p-button label="Save" disabled="true" />
           </div>
         </div>
       </p-tabpanel>
 
       <!--Employment-->
       <p-tabpanel [value]="2" class="flex flex-column gap-5">
-        employment
+        <form [formGroup]="employmentForm">
+          <div formArrayName="positions" class="flex flex-column row-gap-4">
+            @for (
+              position of positions.controls;
+              track position.value;
+              let index = $index
+            ) {
+              <div
+                [formGroupName]="index"
+                class="flex flex-column border-1 border-round-lg p-4 name-container row-gap-4"
+              >
+                <div class="flex flex-row">
+                  <h2>Position {{ index + 1 }}</h2>
+                  @if (index !== 0) {
+                    <div class="ml-auto remove-button">
+                      <p-button class="ml-auto" (click)="removePosition(index)"
+                        >Remove
+                      </p-button>
+                    </div>
+                  }
+                </div>
+
+                <div class="flex flex-column row-gap-4">
+                  <div class="w-full">
+                    <label for="job-title-{{ index }}" class="mb-1"
+                      >Job Title</label
+                    >
+                    <input
+                      pInputText
+                      [id]="'job-title-' + index"
+                      class="w-full"
+                      formControlName="jobTitle"
+                    />
+                  </div>
+
+                  <div
+                    class="flex w-full column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap"
+                  >
+                    <div class="w-full lg:w-6">
+                      <label for="department-{{ index }}" class="mb-1"
+                        >Department / Institute (Optional)</label
+                      >
+                      <input
+                        pInputText
+                        [id]="'department-' + index"
+                        class="w-full"
+                        formControlName="department"
+                      />
+                    </div>
+                    <div class="w-full lg:w-6">
+                      <label for="institution-{{ index }}" class="mb-1"
+                        >Institution / Employer</label
+                      >
+                      <input
+                        pInputText
+                        [id]="'institution-' + index"
+                        class="w-full"
+                        formControlName="institution"
+                      />
+                    </div>
+                  </div>
+
+                  <div
+                    class="flex gap-5 flex-column align-items-start md:flex-row md:align-items-end lg:align-items-center lg:gap-3"
+                  >
+                    <div
+                      class="w-full md:w-6 flex column-gap-3 row-gap-4 flex-wrap lg:flex-nowrap"
+                    >
+                      <div class="w-full lg:w-6">
+                        <label for="start-date-{{ index }}" class="mb-1"
+                          >Start Date</label
+                        >
+                        <p-datepicker
+                          [id]="'start-date-' + index"
+                          formControlName="startDate"
+                          dateFormat="mm/dd/yy"
+                          [iconDisplay]="'input'"
+                          [showIcon]="true"
+                        ></p-datepicker>
+                      </div>
+                      <div class="w-full lg:w-6">
+                        <label for="end-date-{{ index }}" class="mb-1"
+                          >End Date</label
+                        >
+                        <p-datepicker
+                          [id]="'end-date-' + index"
+                          formControlName="endDate"
+                          dateFormat="mm/dd/yy"
+                          [iconDisplay]="'input'"
+                          [showIcon]="true"
+                        ></p-datepicker>
+                      </div>
+                    </div>
+
+                    <div
+                      class="flex align-items-center w-full md:w-6 md:mb-3 lg:mb-0 lg:mt-4"
+                    >
+                      <p-checkbox
+                        [binary]="true"
+                        formControlName="presentlyEmployed"
+                        [inputId]="'presently-employed-' + index"
+                        name="presently-employed"
+                      ></p-checkbox>
+                      <label
+                        [for]="'presently-employed-' + index"
+                        class="ml-2 mb-0 cursor-pointer"
+                        >Presently employed</label
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </form>
+
+        <p-button
+          label="Add Position"
+          severity="secondary"
+          class="ml-auto w-6 btn-full-width md:w-auto"
+          (click)="addPosition()"
+        />
+
+        <div
+          class="flex justify-content-between align-items-end column-gap-2 md:ml-auto h-3rem mt-2"
+        >
+          <p-button
+            class="w-6 btn-full-width md:w-auto"
+            label="Discard Changes"
+            severity="info"
+            disabled="true"
+          />
+          <div class="w-6 btn-full-width md:w-auto wide-m-button">
+            <p-button
+              label="Save"
+              disabled="true"
+              (click)="handleSavePositions()"
+            />
+          </div>
+        </div>
       </p-tabpanel>
 
       <!--Education-->