Client - use <script setup> in components

2021-11-10 21:19:27 +01:00
parent 857c0ecd2d
commit 1bede62d80
126 changed files with 2133 additions and 3207 deletions
--- a/fittrackee_client/src/components/User/ProfileEdition/TimezoneDropdown.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/TimezoneDropdown.vue
@ -27,74 +27,56 @@
  </div>
 </template>

-<script lang="ts">
-  import { Ref, defineComponent, ref, watch } from 'vue'
+<script setup lang="ts">
+  import { Ref, ref, toRefs, watch, withDefaults } from 'vue'

  import { timeZones } from '@/utils/timezone'

-  export default defineComponent({
-    name: 'TimezoneDropdown',
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      input: {
-        type: String,
-        required: true,
-      },
-    },
-    emits: ['updateTimezone'],
-    setup(props, { emit }) {
-      const timezone: Ref<string> = ref(props.input)
-      const isOpen: Ref<boolean> = ref(false)
-      const tzList: Ref<HTMLInputElement | null> = ref(null)
-      const focusItemIndex: Ref<number> = ref(0)
-
-      function matchTimezone(t: string): RegExpMatchArray | null {
-        return t.toLowerCase().match(timezone.value.toLowerCase())
-      }
-      function onMouseOver(index: number) {
-        focusItemIndex.value = index
-      }
-      function onUpdateTimezone(value: string) {
-        timezone.value = value
-        isOpen.value = false
-        emit('updateTimezone', value)
-      }
-      function onEnter(event: Event & { target: HTMLInputElement }) {
-        event.preventDefault()
-        if (tzList.value?.firstElementChild?.innerHTML) {
-          onUpdateTimezone(tzList.value?.firstElementChild?.innerHTML)
-        }
-      }
-      function openDropdown(event: Event & { target: HTMLInputElement }) {
-        event.preventDefault()
-        isOpen.value = true
-        timezone.value = event.target.value.trim()
-      }
-
-      watch(
-        () => props.input,
-        (value) => {
-          timezone.value = value
-        }
-      )
-
-      return {
-        focusItemIndex,
-        isOpen,
-        timezone,
-        timeZones,
-        tzList,
-        matchTimezone,
-        onEnter,
-        onMouseOver,
-        onUpdateTimezone,
-        openDropdown,
-      }
-    },
+  interface Props {
+    input: string
+    disabled?: boolean
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
  })
+
+  const emit = defineEmits(['updateTimezone'])
+
+  const { input, disabled } = toRefs(props)
+  const timezone: Ref<string> = ref(props.input)
+  const isOpen: Ref<boolean> = ref(false)
+  const tzList: Ref<HTMLInputElement | null> = ref(null)
+  const focusItemIndex: Ref<number> = ref(0)
+
+  function matchTimezone(t: string): RegExpMatchArray | null {
+    return t.toLowerCase().match(timezone.value.toLowerCase())
+  }
+  function onMouseOver(index: number) {
+    focusItemIndex.value = index
+  }
+  function onUpdateTimezone(value: string) {
+    timezone.value = value
+    isOpen.value = false
+    emit('updateTimezone', value)
+  }
+  function onEnter(event: Event & { target: HTMLInputElement }) {
+    event.preventDefault()
+    if (tzList.value?.firstElementChild?.innerHTML) {
+      onUpdateTimezone(tzList.value?.firstElementChild?.innerHTML)
+    }
+  }
+  function openDropdown(event: Event & { target: HTMLInputElement }) {
+    event.preventDefault()
+    isOpen.value = true
+    timezone.value = event.target.value.trim()
+  }
+
+  watch(
+    () => props.input,
+    (value) => {
+      timezone.value = value
+    }
+  )
 </script>

 <style lang="scss" scoped>
--- a/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
@ -93,16 +93,15 @@
  </div>
 </template>

-<script lang="ts">
+<script setup lang="ts">
  import { format } from 'date-fns'
  import {
    ComputedRef,
-    PropType,
    Ref,
    computed,
-    defineComponent,
    reactive,
    ref,
+    toRefs,
    onMounted,
  } from 'vue'

@ -110,79 +109,63 @@
  import { IUserProfile, IUserPayload } from '@/types/user'
  import { useStore } from '@/use/useStore'

-  export default defineComponent({
-    name: 'UserInfosEdition',
-    props: {
-      user: {
-        type: Object as PropType<IUserProfile>,
-        required: true,
-      },
-    },
-    setup(props) {
-      const store = useStore()
-      const userForm: IUserPayload = reactive({
-        password: '',
-        password_conf: '',
-        first_name: '',
-        last_name: '',
-        birth_date: '',
-        location: '',
-        bio: '',
-      })
-      const registrationDate = computed(() =>
-        props.user.created_at
-          ? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
-          : ''
-      )
-      const loading = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
-      )
-      const errorMessages: ComputedRef<string | string[] | null> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
-      )
-      let displayModal: Ref<boolean> = ref(false)
+  interface Props {
+    user: IUserProfile
+  }
+  const props = defineProps<Props>()

-      onMounted(() => {
-        if (props.user) {
-          updateUserForm(props.user)
-        }
-      })
+  const store = useStore()

-      function updateUserForm(user: IUserProfile) {
-        userForm.first_name = user.first_name ? user.first_name : ''
-        userForm.last_name = user.last_name ? user.last_name : ''
-        userForm.birth_date = user.birth_date
-          ? format(new Date(user.birth_date), 'yyyy-MM-dd')
-          : ''
-        userForm.location = user.location ? user.location : ''
-        userForm.bio = user.bio ? user.bio : ''
-      }
-      function updateBio(value: string) {
-        userForm.bio = value
-      }
-      function updateProfile() {
-        store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
-      }
-      function updateDisplayModal(value: boolean) {
-        displayModal.value = value
-      }
-      function deleteAccount(username: string) {
-        store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
-      }
-
-      return {
-        displayModal,
-        errorMessages,
-        loading,
-        registrationDate,
-        userForm,
-        deleteAccount,
-        updateBio,
-        updateDisplayModal,
-        updateProfile,
-      }
-    },
+  const { user } = toRefs(props)
+  const userForm: IUserPayload = reactive({
+    password: '',
+    password_conf: '',
+    first_name: '',
+    last_name: '',
+    birth_date: '',
+    location: '',
+    bio: '',
  })
+  const registrationDate = computed(() =>
+    props.user.created_at
+      ? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
+      : ''
+  )
+  const loading = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
+  )
+  const errorMessages: ComputedRef<string | string[] | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+  )
+  let displayModal: Ref<boolean> = ref(false)
+
+  onMounted(() => {
+    if (props.user) {
+      updateUserForm(props.user)
+    }
+  })
+
+  function updateUserForm(user: IUserProfile) {
+    userForm.first_name = user.first_name ? user.first_name : ''
+    userForm.last_name = user.last_name ? user.last_name : ''
+    userForm.birth_date = user.birth_date
+      ? format(new Date(user.birth_date), 'yyyy-MM-dd')
+      : ''
+    userForm.location = user.location ? user.location : ''
+    userForm.bio = user.bio ? user.bio : ''
+  }
+  function updateBio(value: string) {
+    userForm.bio = value
+  }
+  function updateProfile() {
+    store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
+  }
+  function updateDisplayModal(value: boolean) {
+    displayModal.value = value
+  }
+  function deleteAccount(username: string) {
+    store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
+  }
 </script>

 <style lang="scss">
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
@ -32,15 +32,8 @@
  </div>
 </template>

-<script lang="ts">
-  import {
-    ComputedRef,
-    PropType,
-    Ref,
-    defineComponent,
-    computed,
-    ref,
-  } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, Ref, computed, ref, toRefs } from 'vue'

  import UserPicture from '@/components/User/UserPicture.vue'
  import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
@ -49,56 +42,40 @@
  import { useStore } from '@/use/useStore'
  import { getReadableFileSize } from '@/utils/files'

-  export default defineComponent({
-    name: 'UserPictureEdition',
-    components: {
-      UserPicture,
-    },
-    props: {
-      user: {
-        type: Object as PropType<IUserProfile>,
-        required: true,
-      },
-    },
-    setup() {
-      const store = useStore()
-      const errorMessages: ComputedRef<string | string[] | null> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
-      )
-      const appConfig: ComputedRef<TAppConfig> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
-      )
-      const fileSizeLimit = appConfig.value.max_single_file_size
-        ? getReadableFileSize(appConfig.value.max_single_file_size)
-        : ''
-      let pictureFile: Ref<File | null> = ref(null)
+  interface Props {
+    user: IUserProfile
+  }
+  const props = defineProps<Props>()

-      function deleteUserPicture() {
-        store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_PICTURE)
-      }
-      function updatePictureFile(event: Event & { target: HTMLInputElement }) {
-        if (event.target.files) {
-          pictureFile.value = event.target.files[0]
-        }
-      }
-      function updateUserPicture() {
-        if (pictureFile.value) {
-          store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
-            picture: pictureFile.value,
-          })
-        }
-      }
+  const store = useStore()

-      return {
-        errorMessages,
-        fileSizeLimit,
-        pictureFile,
-        deleteUserPicture,
-        updateUserPicture,
-        updatePictureFile,
-      }
-    },
-  })
+  const { user } = toRefs(props)
+  const errorMessages: ComputedRef<string | string[] | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+  )
+  const appConfig: ComputedRef<TAppConfig> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
+  )
+  const fileSizeLimit = appConfig.value.max_single_file_size
+    ? getReadableFileSize(appConfig.value.max_single_file_size)
+    : ''
+  let pictureFile: Ref<File | null> = ref(null)
+
+  function deleteUserPicture() {
+    store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_PICTURE)
+  }
+  function updatePictureFile(event: Event & { target: HTMLInputElement }) {
+    if (event.target.files) {
+      pictureFile.value = event.target.files[0]
+    }
+  }
+  function updateUserPicture() {
+    if (pictureFile.value) {
+      store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
+        picture: pictureFile.value,
+      })
+    }
+  }
 </script>

 <style lang="scss" scoped>
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
@ -51,15 +51,8 @@
  </div>
 </template>

-<script lang="ts">
-  import {
-    ComputedRef,
-    PropType,
-    computed,
-    defineComponent,
-    reactive,
-    onMounted,
-  } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed, reactive, onMounted } from 'vue'

  import TimezoneDropdown from '@/components/User/ProfileEdition/TimezoneDropdown.vue'
  import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
@ -67,71 +60,50 @@
  import { useStore } from '@/use/useStore'
  import { availableLanguages } from '@/utils/locales'

-  export default defineComponent({
-    name: 'UserPreferencesEdition',
-    components: {
-      TimezoneDropdown,
-    },
-    props: {
-      user: {
-        type: Object as PropType<IUserProfile>,
-        required: true,
-      },
-    },
-    setup(props) {
-      const store = useStore()
-      const userForm: IUserPreferencesPayload = reactive({
-        language: '',
-        timezone: 'Europe/Paris',
-        weekm: false,
-      })
-      const weekStart = [
-        {
-          label: 'MONDAY',
-          value: true,
-        },
-        {
-          label: 'SUNDAY',
-          value: false,
-        },
-      ]
-      const loading = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
-      )
-      const errorMessages: ComputedRef<string | string[] | null> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
-      )
+  interface Props {
+    user: IUserProfile
+  }
+  const props = defineProps<Props>()

-      onMounted(() => {
-        if (props.user) {
-          updateUserForm(props.user)
-        }
-      })
+  const store = useStore()

-      function updateUserForm(user: IUserProfile) {
-        userForm.language = user.language ? user.language : 'en'
-        userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
-        userForm.weekm = user.weekm ? user.weekm : false
-      }
-      function updateProfile() {
-        store.dispatch(
-          AUTH_USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES,
-          userForm
-        )
-      }
-      function updateTZ(value: string) {
-        userForm.timezone = value
-      }
-
-      return {
-        availableLanguages,
-        errorMessages,
-        loading,
-        userForm,
-        weekStart,
-        updateProfile,
-        updateTZ,
-      }
-    },
+  const userForm: IUserPreferencesPayload = reactive({
+    language: '',
+    timezone: 'Europe/Paris',
+    weekm: false,
  })
+  const weekStart = [
+    {
+      label: 'MONDAY',
+      value: true,
+    },
+    {
+      label: 'SUNDAY',
+      value: false,
+    },
+  ]
+  const loading = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
+  )
+  const errorMessages: ComputedRef<string | string[] | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+  )
+
+  onMounted(() => {
+    if (props.user) {
+      updateUserForm(props.user)
+    }
+  })
+
+  function updateUserForm(user: IUserProfile) {
+    userForm.language = user.language ? user.language : 'en'
+    userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
+    userForm.weekm = user.weekm ? user.weekm : false
+  }
+  function updateProfile() {
+    store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES, userForm)
+  }
+  function updateTZ(value: string) {
+    userForm.timezone = value
+  }
 </script>
--- a/fittrackee_client/src/components/User/ProfileEdition/index.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/index.vue
@ -17,37 +17,25 @@
  </div>
 </template>

-<script lang="ts">
-  import { computed, defineComponent, PropType } from 'vue'
+<script setup lang="ts">
+  import { computed, toRefs } from 'vue'

  import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
  import { AUTH_USER_STORE } from '@/store/constants'
  import { IUserProfile } from '@/types/user'
  import { useStore } from '@/use/useStore'

-  export default defineComponent({
-    name: 'ProfileEdition',
-    components: {
-      UserProfileTabs,
-    },
-    props: {
-      user: {
-        type: Object as PropType<IUserProfile>,
-        required: true,
-      },
-      tab: {
-        type: String,
-        required: true,
-      },
-    },
-    setup() {
-      const store = useStore()
-      return {
-        loading: computed(
-          () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
-        ),
-        tabs: ['PROFILE', 'PICTURE', 'PREFERENCES'],
-      }
-    },
-  })
+  interface Props {
+    user: IUserProfile
+    tab: string
+  }
+  const props = defineProps<Props>()
+
+  const store = useStore()
+
+  const { user, tab } = toRefs(props)
+  const tabs = ['PROFILE', 'PICTURE', 'PREFERENCES']
+  const loading = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
+  )
 </script>