CS343-Labs/Lab 7/createcard.js

/* Default users in the invitation list */
let userList = [
  { shortName: "Alice", fullName: "Alice N. Wonderland" },
  { shortName: "Bob", fullName: "Bob Malooga" },
  { shortName: "Charlie", fullName: "Charlie Bucket" },
];

/* STEP 1:
 * Update a field of the card preview based on the current value of the
 * preview-form field. For the preview-form, use the field's .value field.
 * Find the corresponding preview-X field (i.e., for the preview-form host
 * field, you should update preview-host's textContent. */
function updateField(field) {
  document.querySelector(`#preview-${field.name}`).textContent = field.value;
}

/* STEP 1:
 * When the Clear Form button is clicked, set all of the preview-area's
 * fields back to the default values as given in the HTML file. */
function defaultPreview() {
  document.querySelector("#preview-host").textContent = "HOST";
  document.querySelector("#preview-title").textContent = "TITLE";
  document.querySelector("#preview-message").textContent = "YOUR MESSAGE HERE";
  document.querySelector("#preview-date").textContent = "DATE";
}

/* STEP 2:
 * Update the preview of the card to show the selected user. Use the
 * user parameter to search through the userList, trying to match the
 * shortName field. You should do a case-insensitive match, meaning
 * the shortName field should be passed to the toLowerCase() function.
 * Get the preview-guest field and set its textContent to the user's
 * fullName field. */
function previewCard(user) {
  const guestPreview = document.querySelector("#preview-guest");
  const listUser = userList.find(
    (listUser) => listUser.shortName.toLowerCase() === user.id
  );
  guestPreview.textContent = listUser.fullName;
}

(function () {
  // STEP 1:
  // Get the preview form. For each of the text fields (host, title, message),
  // add a keyup event listener to call updateField on that field name. For
  // the date field, use a change event listener to do the same.
  const form = document.querySelector("#preview-form");
  const { host, title, message, date } = form;
  host.addEventListener("keyup", updateField.bind(null, host));
  title.addEventListener("keyup", updateField.bind(null, title));
  message.addEventListener("keyup", updateField.bind(null, message));
  date.addEventListener("change", updateField.bind(null, date));

  // STEP 1:
  // When the reset-btn button is clicked, call defaultPreview() to restore
  // the preview fields to their original values.
  document
    .querySelector("#reset-btn")
    .addEventListener("click", defaultPreview);

  // STEP 2:
  // For each of the existing users in the invitation list, add a click
  // listener that will put their name into the card preview.
  // HINT: You can grab all of them and use .forEach:
  document
    .querySelectorAll("#guest-list > li")
    .forEach((userCard) =>
      userCard.addEventListener("click", previewCard.bind(null, userCard))
    );

  // STEP 3:
  // Grab all elements with the "modal" class. When clicked, remove the
  // "show" class from the target element.
  const modal = document.querySelector(".modal");
  modal.addEventListener("click", (event) => {
    if (event.target === modal) {
      modal.classList.remove("show");
    }
  });

  // STEP 3:
  // For each of the btn-edit-guest buttons, add a click event listener. When
  // clicked, get the data-user attribute from the clicked item and find the
  // guest from the userList with that shortName. Store the guest's fullName
  // and shortName into the user-form fields and show the modal. Also store
  // the shortName in the old-short field and stop the event propagation.
  const userForm = document.querySelector("#user-form");

  document.querySelectorAll(".btn-edit-guest").forEach((btn) => {
    btn.addEventListener("click", (event) => {
      event.stopPropagation();

      const dataUser = btn.dataset.user;
      const listUser = userList.find(
        (listUser) => listUser.shortName.toLowerCase() === dataUser
      );
      userForm["guest-full"].value = listUser.fullName;
      userForm["guest-short"].value = listUser.shortName;
      userForm["old-short"].value = listUser.shortName;

      modal.classList.add("show");
    });
  });

  // STEP 3:
  // When the modal form is submitted, user the user-form's old-short field
  // to find the user from the userList. Also look for the new short-name value
  // in the userList. If the new short-name is found and it is not the same
  // user as before (e.g., the new name conflicts with someone else), add the
  // "invalid" class to the guest-short input and return.
  //
  // If the short-name is valid, get the guest-short and guest-full values from
  // the form and update the user in the userList. Hide the modal.
  //
  // BONUS: Update the short name that appears in the guest-list item. Note
  // that you'll need to first get the item, then access its firstChild. Otherwise,
  // setting the textContent will accidentally remove the edit button.
  userForm.addEventListener("submit", (event) => {
    event.preventDefault();

    const guestFull = userForm["guest-full"].value;
    const guestShort = userForm["guest-short"].value;
    const oldShort = userForm["old-short"].value;

    const newId = guestShort.toLowerCase();
    const oldId = oldShort.toLowerCase();

    const listUserIndex = userList.findIndex(
      (listUser) => listUser.shortName.toLowerCase() === oldId
    );

    for (let i = 0; i < userList.length; i++) {
      const shortNameMatches = userList[i].shortName.toLowerCase() === newId;
      if (i !== listUserIndex && shortNameMatches) {
        userForm["guest-short"].classList.add("invalid");
        return;
      }
    }

    userList[listUserIndex].fullName = guestFull;
    userList[listUserIndex].shortName = guestShort;

    const oldListItem = document.querySelector(`#guest-list > li#${oldId}`);
    oldListItem.id = newId;

    const newNode = document.createElement("div");
    newNode.textContent = guestShort;
    oldListItem.replaceChild(newNode.firstChild, oldListItem.firstChild);
    oldListItem.firstElementChild.dataset.user = newId;

    userForm["guest-short"].classList.remove("invalid");
    modal.classList.remove("show");
  });
})();