{"version":3,"file":"ProfileBiography.ce.004240eb.js","sources":["../../src/components/ProfileBiography.ce.vue"],"sourcesContent":["<template>\n  <fieldset id=\"biography-container\" class=\"c-form__fields\">\n    <div class=\"c-container\">\n      <form ref=\"form\" class=\"c-form\" @submit.prevent=\"submit.exec\">\n        <div v-if=\"submit.err\" class=\"c-message c-message--error u-mbm\">\n          <p>{{ t('updateProfileError') }}</p>\n          <div v-if=\"biography.charLength > biography.charMaxLength\">\n            <p>({{ t('characterLimit') }})</p>\n          </div>\n        </div>\n        <div class=\"c-form__field c-field\">\n          <div id=\"profile_biography\" class=\"c-field__wrapper\">\n            <p ref=\"biography-text\" class=\"c-presentation__text c-profile__biography-text\">{{ biography.text.value }}</p>\n            <div class=\"c-profile__biography-edit u-hide\">\n              <textarea\n                ref=\"biography-textarea\"\n                v-model.trim=\"biography.text.value\"\n                cols=\"30\"\n                rows=\"10\"\n                :maxlength=\"biography.charMaxLength\"\n                :placeholder=\"t('biographyPlaceholder')\"\n                class=\"c-field__input c-profile__biography-textarea\"\n                @input=\"onTextareaInput\"\n              />\n              <div class=\"character_counter\">\n                <small class=\"c-field__hint\">0/0</small>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- submit -->\n        <fieldset class=\"c-form__actions u-hide\">\n          <BtnSubmit id=\"button-submit-profile\" ref=\"buttonSubmit\" :loading=\"submit.loading\" :label=\"t('updateProfile')\" class=\"c-profile__button-submit\" />\n        </fieldset>\n      </form>\n    </div>\n  </fieldset>\n  <p id=\"biography-empty\" class=\"biography-no-text u-hide\">{{ t('biographyDefault') }}</p>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onBeforeUnmount } from 'vue'\nimport { useI18n } from '@/utils/i18n'\nimport { updateProfileBiography, updateDateModified, useRequest } from '@/utils/api'\nimport { formatDateTime } from '@/utils/format-date'\n\nimport BtnSubmit from '@/components/buttons/BtnSubmit.vue'\n\nconst { t } = useI18n({\n  messages: {\n    en: {\n      name: 'Name',\n      required: 'required',\n      tags: 'Tags',\n      updateProfile: 'Update',\n      updateProfileError: 'Error while updating profile.',\n      biographyDefault: \"This user hasn't added a biography yet.\",\n      biographyPlaceholder: 'Write a paragraph about yourself (in english, 1200 characters maximum)',\n      characterLimit: 'Maximum number of characters is limited to 1200.'\n    },\n    fr: {\n      name: 'Nom',\n      required: 'requis',\n      tags: 'Tags',\n      updateProfile: 'Mettre à jour',\n      updateProfileError: 'Erreur lors de la mise à jour du profil.',\n      biographyDefault: \"Cet utilisateur n'a pas encore ajouté de biographie.\",\n      biographyPlaceholder: 'Ecrivez un paragraphe à propos de vous (en anglais, 1200 caractères maximum)',\n      characterLimit: 'Le nombre de caractères maximum est limité à 1200.'\n    }\n  }\n})\n\nconst props = defineProps<{\n  userId: string,\n  userName: string,\n  profileId: number,\n  profileName: string,\n  profileBio: string,\n}>()\n\nlet userId: number\nlet userName: string\nlet profileId: number\nlet profileName: string\n\nlet isSameUser: boolean\n\n// Edit biography\ninterface Biography {\n  reference: any,\n  text: any,\n  isEditable: boolean\n  charLength: number\n  charMaxLength: number\n  editIcon: Element\n  cancelIcon: Element\n  confirmIcon: Element\n  element: Element\n  inputElement: Element\n}\n\nconst biography: Biography = {\n  reference: ref(props.profileBio),\n  text: ref(props.profileBio),\n  isEditable: false,\n  charLength: 0,\n  charMaxLength: 1200,\n  editIcon: document.getElementsByClassName('biography-edit__icon')[0],\n  cancelIcon: document.querySelector('.biography-cancel__icon')!,\n  confirmIcon: document.getElementsByClassName('biography-confirm__icon')[0],\n  element: document.getElementsByClassName('c-profile__biography-text')[0],\n  inputElement: document.getElementsByClassName('c-profile__biography-edit')[0]\n}\n\nlet isFirstEdit: boolean = true\nlet hasContent: boolean = props.profileBio.length > 0 && biography.text.value !== null && biography.text.value !== 'None'\n\nlet saveContent: string\n\nlet buttonSubmit: HTMLButtonElement\n\nconst form = ref<HTMLFormElement>()\n\nlet biographyContainerElement: HTMLElement\nlet biographyEmptyElement: HTMLElement\n\nonMounted(() => {\n  setProfile()\n\n  setBiographyContent()\n\n  if (isSameUser) {\n    updateBiography()\n\n    // update character counter\n    updateCounter()\n  }\n})\n\nonBeforeUnmount(() => {\n  // remove event listeners\n  if (biography.editIcon) {\n    biography.editIcon.removeEventListener('click', () => {\n      toggleEditMode()\n    })\n\n    biography.cancelIcon.removeEventListener('click', () => {\n      biography.text.value = saveContent\n\n      if (saveContent.length > 0 && biography.text.value !== 'None') {\n        hasContent = true\n      }\n\n      if (biography.text.value === 'None') {\n        biography.text.value = t('biographyPlaceholder')\n      }\n\n      toggleEditMode()\n    })\n  }\n\n  const confirmButton = <HTMLElement>document.querySelector('.biography-confirm__icon')\n\n  if (confirmButton) {\n    confirmButton.removeEventListener('click', submitBiography)\n  }\n})\n\nfunction setProfile () {\n  userId = parseInt(props.userId)\n  profileId = props.profileId\n\n  userName = props.userName\n  profileName = props.profileName\n\n  isSameUser = userName === profileName\n\n  // console.log('user id: ', userId)\n  // console.log('user name: ', userName)\n  // console.log('profile id: ', profileId)\n  // console.log('profile name: ', profileName)\n  // console.log('is same user: ', isSameUser)\n}\n\nfunction setBiographyContent (visible: boolean = true) {\n  if (biography.text.value === 'None') {\n    biography.text.value = ''\n  }\n\n  biographyContainerElement = document.querySelector('#biography-container')!\n  biographyEmptyElement = document.querySelector('#biography-empty')!\n\n  if (hasContent) {\n    toggleElement(biographyContainerElement, visible)\n    toggleElement(biographyEmptyElement, !visible)\n  } else {\n    toggleElement(biographyContainerElement, !visible)\n    toggleElement(biographyEmptyElement, visible)\n  }\n\n  saveContent = props.profileBio\n}\n\nfunction updateBiography () {\n  biography.element = document.getElementsByClassName('c-profile__biography-text')[0]\n  biography.inputElement = document.getElementsByClassName('c-profile__biography-edit')[0]\n\n  if (biography.editIcon) {\n    // when clicking on biography edit icon\n    biography.editIcon.addEventListener('click', () => {\n      toggleEditMode()\n    })\n\n    biography.cancelIcon.addEventListener('click', () => {\n      biography.text.value = saveContent\n\n      if (saveContent.length > 0 && biography.text.value !== 'None') {\n        hasContent = true\n      }\n\n      if (biography.text.value === 'None') {\n        biography.text.value = ''\n      }\n\n      toggleEditMode()\n    })\n  }\n\n  // submit\n  buttonSubmit = <HTMLButtonElement>document.getElementById('button-submit-profile')\n\n  const confirmButton = <HTMLElement>document.querySelector('.biography-confirm__icon')\n\n  if (confirmButton) {\n    confirmButton.addEventListener('click', submitBiography)\n  }\n}\n\nfunction submitBiography () {\n  if (buttonSubmit) {\n    buttonSubmit.click()\n\n    // reset biography field\n    biography.isEditable = false\n\n    toggleElement(biography.element, true)\n    toggleElement(biography.inputElement, false)\n    toggleElement(biography.editIcon, true)\n    toggleElement(biography.cancelIcon, false)\n    toggleElement(biography.confirmIcon, false)\n\n    if (hasContent) {\n      toggleElement(biographyContainerElement, true)\n      toggleElement(biographyEmptyElement, false)\n    } else {\n      toggleElement(biographyContainerElement, false)\n      toggleElement(biographyEmptyElement, true)\n    }\n  }\n}\n\nfunction toggleElement (el: Element, visible: boolean) {\n  if (visible) {\n    el.classList.add('u-show')\n    el.classList.remove('u-hide')\n  } else {\n    el.classList.add('u-hide')\n    el.classList.remove('u-show')\n  }\n}\n\nfunction toggleEditMode () {\n  biography.isEditable = !biography.isEditable\n\n  if (biography.isEditable) {\n    toggleElement(biography.editIcon, false)\n    toggleElement(biography.cancelIcon, true)\n    toggleElement(biography.confirmIcon, true)\n\n    toggleElement(biography.element, false)\n    toggleElement(biography.inputElement, true)\n\n    if (!hasContent) {\n      toggleElement(biographyContainerElement, true)\n      toggleElement(biographyEmptyElement, false)\n    } else {\n      saveContent = biography.text.value\n    }\n  } else {\n    toggleElement(biography.editIcon, true)\n    toggleElement(biography.cancelIcon, false)\n    toggleElement(biography.confirmIcon, false)\n\n    toggleElement(biography.element, true)\n    toggleElement(biography.inputElement, false)\n\n    if (!hasContent) {\n      toggleElement(biographyContainerElement, false)\n      toggleElement(biographyEmptyElement, true)\n    }\n  }\n}\n\nfunction updateCounter () {\n  if (props.profileBio === 'None') {\n    biography.charLength = 0\n  } else if (props.profileBio !== 'None') {\n    biography.charLength = props.profileBio.length\n  }\n\n  if (props.profileBio.length > 0 && props.profileBio !== null) {\n    const counterElement = document.getElementsByClassName('character_counter')[0]\n    counterElement.innerHTML = `${biography.charLength}/${biography.charMaxLength}`\n  }\n}\n\nfunction onTextareaInput (e: Event) {\n  const target = e.target as HTMLInputElement\n\n  if (target) {\n    // After first edit\n    if (isFirstEdit) {\n      const biographyTextElement = document.getElementsByClassName('c-profile__biography-text')[0]\n      biographyTextElement.classList.add('u-hide')\n      biography.element = biographyTextElement\n\n      isFirstEdit = false\n    }\n\n    biography.charLength = target.value.length\n    if (biography.charLength === 0) {\n      isFirstEdit = true\n\n      hasContent = false\n\n      const biographyTextElement = document.getElementsByClassName('c-profile__biography-text')[0]\n      biographyTextElement.classList.add('u-hide')\n    }\n\n    if (biography.charLength > 0) {\n      hasContent = true\n    }\n\n    const counterElement = document.getElementsByClassName('character_counter')[0]\n    counterElement.innerHTML = `${biography.charLength}/${biography.charMaxLength}`\n  }\n}\n\nconst submit = useRequest(async () => {\n  const body = {\n    user: profileId,\n    biography: biography.text.value\n  }\n\n  const data = await updateProfileBiography(userId, body)\n\n  const currentDateTime = {\n    user: profileId,\n    date_modified: formatDateTime(new Date())\n  }\n\n  await updateDateModified(userId, currentDateTime)\n\n  return data\n},\n{\n  error () {\n    // scroll to error message when an error occurs\n    if (form.value) {\n      form.value.scrollIntoView({ behavior: 'smooth' })\n    }\n  }\n})\n\n</script>\n\n<style scoped lang=\"scss\">\n.character_counter {\n  float: right\n}\n\n</style>\n"],"names":["t","useI18n","props","__props","userId","userName","profileId","profileName","isSameUser","biography","ref","isFirstEdit","hasContent","saveContent","buttonSubmit","form","biographyContainerElement","biographyEmptyElement","onMounted","setProfile","setBiographyContent","updateBiography","updateCounter","onBeforeUnmount","toggleEditMode","confirmButton","submitBiography","visible","toggleElement","el","counterElement","onTextareaInput","e","target","biographyTextElement","submit","useRequest","body","data","updateProfileBiography","currentDateTime","formatDateTime","updateDateModified"],"mappings":"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"}