芝麻web文件管理V1.00

编辑当前文件:/home/pulsehostuk9/public_html/invoicer.pulsehost.co.uk/resources/CustomerSettings.vue

<template>
  <form class="relative h-full mt-4" @submit.prevent="updateCustomerData">
    <BaseCard>
      <div>
        <h6 class="font-bold text-left">
          {{ $t('settings.account_settings.account_settings') }}
        </h6>
        <p
          class="mt-2 text-sm leading-snug text-left text-gray-500"
          style="max-width: 680px"
        >
          {{ $t('settings.account_settings.section_description') }}
        </p>
      </div>

<span></span>

<BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
        <template #left="slotProps">
          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
        </template>
        {{ $t('general.save') }}
      </BaseButton>
    </BaseCard>
  </form>
</template>

const userStore = useUserStore()
const globalStore = useGlobalStore()
const route = useRoute()
const { t, tm } = useI18n()

// Local State
let imgFiles = ref([])
let isSaving = ref(false)
let avatarFileBlob = ref(null)
let isShowPassword = ref(false)
let isShowConfirmPassword = ref(false)
const isCustomerAvatarRemoved = ref(false)

if (userStore.userForm.avatar) {
  imgFiles.value.push({
    image: userStore.userForm.avatar,
  })
}

// Validation
const rules = computed(() => {
  return {
    userForm: {
      name: {
        required: helpers.withMessage(t('validation.required'), required),
        minLength: helpers.withMessage(
          t('validation.name_min_length', { count: 3 }),
          minLength(3)
        ),
      },
      email: {
        required: helpers.withMessage(t('validation.required'), required),
        email: helpers.withMessage(t('validation.email_incorrect'), email),
      },
      password: {
        minLength: helpers.withMessage(
          t('validation.password_min_length', { count: 8 }),
          minLength(8)
        ),
      },
      confirm_password: {
        sameAsPassword: helpers.withMessage(
          t('validation.password_incorrect'),
          sameAs(userStore.userForm.password)
        ),
      },
    },
  }
})

const v$ = useVuelidate(
  rules,
  computed(() => userStore)
)

// created

// methods

function onFileInputChange(fileName, file) {
  avatarFileBlob.value = file
}

function onFileInputRemove() {
  avatarFileBlob.value = null
  isCustomerAvatarRemoved.value = true
}

function updateCustomerData() {
  v$.value.userForm.$touch()

if (v$.value.userForm.$invalid) {
    return true
  }
  isSaving.value = true

let data = new FormData()
  data.append('name', userStore.userForm.name)
  data.append('email', userStore.userForm.email)

if (
    userStore.userForm.password != null &&
    userStore.userForm.password !== undefined &&
    userStore.userForm.password !== ''
  ) {
    data.append('password', userStore.userForm.password)
  }
  if (avatarFileBlob.value) {
    data.append('customer_avatar', avatarFileBlob.value)
  }
  data.append('is_customer_avatar_removed', isCustomerAvatarRemoved.value)

userStore
    .updateCurrentUser({
      data,
      message: tm('settings.account_settings.updated_message'),
    })
    .then((res) => {
      if (res.data.data) {
        isSaving.value = false
        userStore.$patch((state) => {
          state.userForm.password = ''
          state.userForm.confirm_password = ''
        })
        avatarFileBlob.value = null
        isCustomerAvatarRemoved.value = false
      }
    })
    .catch((error) => {
      isSaving.value = false
    })
}
</script>