API & Client - move user preferences + add picture edition

2021-10-17 21:01:14 +02:00
parent b70dd3116e
commit c92446ff39
25 changed files with 1291 additions and 478 deletions
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
@ -0,0 +1,141 @@
+<template>
+  <div id="user-picture-edition">
+    <div class="user-picture-form">
+      <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+      <UserPicture :user="user" />
+      <form @submit.prevent="updateUserPicture">
+        <input
+          type="file"
+          name="picture"
+          accept=".png,.jpg,.gif"
+          @input="updatePictureFile"
+        />
+        <div class="picture-buttons">
+          <button type="submit" :disabled="!pictureFile">
+            {{ t('user.PROFILE.PICTURE_UPDATE') }}
+          </button>
+          <button class="danger" v-if="user.picture" @click="deleteUserPicture">
+            {{ t('user.PROFILE.PICTURE_REMOVE') }}
+          </button>
+          <button class="cancel" @click="$router.push('/profile')">
+            {{ t('user.PROFILE.BACK_TO_PROFILE') }}
+          </button>
+        </div>
+        <span>{{ t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    PropType,
+    Ref,
+    defineComponent,
+    computed,
+    ref,
+  } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import UserPicture from '@/components/User/UserPicture.vue'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { IAppConfig } from '@/types/application'
+  import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+  import { getReadableFileSize } from '@/utils/files'
+
+  export default defineComponent({
+    name: 'UserPictureEdition',
+    components: {
+      ErrorMessage,
+      UserPicture,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup() {
+      const { t } = useI18n()
+      const store = useStore()
+      const errorMessages: ComputedRef<string | string[] | null> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+      )
+      const appConfig: ComputedRef<IAppConfig> = 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(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(USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
+            picture: pictureFile.value,
+          })
+        }
+      }
+
+      return {
+        errorMessages,
+        fileSizeLimit,
+        pictureFile,
+        t,
+        deleteUserPicture,
+        updateUserPicture,
+        updatePictureFile,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #user-picture-edition {
+    .user-picture-form {
+      display: flex;
+      flex-direction: column;
+
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: $default-padding;
+        justify-content: flex-start;
+
+        input {
+          margin-top: $default-margin;
+          padding: $default-padding * 0.5;
+        }
+
+        span {
+          font-style: italic;
+          font-size: 0.9em;
+          padding-left: $default-padding * 0.5;
+        }
+      }
+      .picture-buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: $default-padding;
+        @media screen and (max-width: $x-small-limit) {
+          flex-direction: column;
+          align-items: stretch;
+        }
+      }
+    }
+  }
+</style>