Overview

This section serves as a central hub for managing and updating essential account details, such as their avatar, phone number, email, department, and specialty.

How to extend

Below is an extension to the Profile component by adding new entry for fax number. This addition allows users to include their fax number as part of their profile details.

<script lang="ts" context="module">
  export interface UserDetail {
    profileImageUrl: string;
    firstName: string;
    lastName: string;
    email: string;
    department: string;
    phoneNumber: string;
    specialty: string;
    timeOffset?: number;
    // type declaration for fax number
    faxNumber: string
  }

  // rest of code
  ...
</script>

<script lang="ts">
  import { uniqueId } from "lodash/fp";
  import { showError, showInfo } from "../../../../lib/utils"
  import { setProfileImage } from "../../../../lib/services/keycloak"

  let imageUrl;
  let selectedImage;

  let user: UserDetail = <any>{};

  async function onSave() {
    try {
      const f = new FormData();
      f.append("phoneNumber", user.phoneNumber);
      f.append("email", user.email);
      f.append("department", user.department);
      f.append("specialty", user.specialty);
      // faxnumber addition
      f.append("faxNumber", user.faxNumber);
      if (selectedImage) {
        f.append("profileImage", selectedImage);
      }

      const ret = await save(f);
      if (ret.success) {
        showInfo("Information updated successfully")
        setProfileImage(ret.data)
      } else {
        showError(ret.message);
      }
    } catch (e) {
      console.log(e);
    }
  }

  // rest of code
  ...

</script>

<div class="">
  <div class="space-y-8  sm:space-y-5">
    <div>
      <div>
        <h3 class="text-lg leading-6 font-medium text-indigo-900">
          Contact Information
        </h3>
      </div>

      <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
        <!-- User avatar -->
        ...
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
      <div class="">
        <label
          for="phoneNumber"
          class="block text-sm font-medium text-gray-700"
        >
          Phone Number
        </label>
        <div class="mt-1">
          <input
            type="text"
            bind:value={user.phoneNumber}
            name="phoneNumber"
            id="phoneNumber"
            autocomplete="given-name"
            class="py-2 pl-2 shadow-sm block w-full sm:text-sm border-2 border-gray-300 rounded-md"
          />
        </div>
      </div>
      <div class="">
        <label for="email" class="block text-sm font-medium text-gray-700">
          Email
        </label>
        <div class="mt-1">
          <input
            type="email"
            bind:value={user.email}
            name="email"
            id="email"
            autocomplete="given-name"
            class="py-2 pl-2 shadow-sm block w-full sm:text-sm border-2 border-gray-300 rounded-md"
          />
        </div>
      </div>
      <div class="">
        <label for="department" class="block text-sm font-medium text-gray-700">
          Department
        </label>
        <div class="mt-1">
          <input
            type="text"
            bind:value={user.department}
            name="department"
            id="department"
            autocomplete="given-name"
            class="py-2 pl-2 shadow-sm block w-full sm:text-sm border-2 border-gray-300 rounded-md"
          />
        </div>
      </div>
      <div class="">
        <label for="specialty" class="block text-sm font-medium text-gray-700">
          Specialty
        </label>
        <div class="mt-1">
          <input
            type="text"
            bind:value={user.specialty}
            name="specialty"
            id="specialty"
            autocomplete="given-name"
            class="py-2 pl-2 shadow-sm block w-full sm:text-sm border-2 border-gray-300 rounded-md"
          />
        </div>
      </div>

      <!-- fax number addition -->
      <div class="">
        <label for="specialty" class="block text-sm font-medium text-gray-700">
          Fax number
        </label>
        <div class="mt-1">
          <input
            type="text"
            bind:value={user.faxNumber}
            name="faxNumber"
            id="faxNumber"
            autocomplete="given-name"
            class="py-2 pl-2 shadow-sm block w-full sm:text-sm border-2 border-gray-300 rounded-md"
          />
        </div>
      </div>
    </div>

    <div class="flex">
      <button
        on:click|preventDefault={onSave}
        class="mx-auto border p-2 w-32 bg-slate-100 hover:bg-slate-200"
      >
        Save
      </button>
    </div>
  </div>
</div>