refactor(admin contact us): refactor admin contact us and use composalbe for api

app/components/admin/common/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <v-dialog
     v-model="dialogModel"
-    max-width="400"
+    :max-width="maxWidth"
     :fullscreen="!mdAndUp"
     @click="clickOnOverlay"
   >
@@ -48,6 +48,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  maxWidth: {
+    type: Number,
+    default: 400,
+  },
 })
 
 const emit = defineEmits(['update:showDialog'])

app/components/admin/contactus/composeMailModal.vue

@@ -73,10 +73,10 @@
 
         <common-rich-editor
           v-model="body"
-          :rules="requiredRule"
           required
           mode="custom"
-          :features="['bold', 'italic', 'list', 'link']"
+          :features="['bold', 'italic', 'list', 'link', 'image', 'mediaEmbed']"
+          :rules="[requiredRule]"
         />
       </div>
     </div>
@@ -98,21 +98,19 @@
 </template>
 
 <script setup lang="ts">
-import type {
-  ApiResult,
-  AppError,
-} from '@/types'
-
 const emit = defineEmits(['ComposeMailSuccessFull'])
-const { $toast } = useNuxtApp()
+const {
+  sendEmail,
+  loadingSendEmail: loading,
+  getEmailAddresses,
+  loadingGetEmailAddresses: loadingEmailList,
+  emailAddresses: fromEmailList,
+} = useContactUsAdmin()
 
-const loading = ref(false)
 const subject = ref('')
 const body = ref('')
 const email = ref('')
-const selectedFromEmail = ref()
-const fromEmailList = ref<string[]>([])
-const loadingEmailList = ref(false)
+const selectedFromEmail = ref('')
 
 const isRequired = (value: string) => !!value
 const isEmailValid = (value: string) => /.+@.+\..+/.test(value)
@@ -144,65 +142,18 @@ const removeScriptTags = (html: string) => {
 }
 
 const send = async () => {
-  try {
-    loading.value = true
-    const params = {
-      from: selectedFromEmail.value,
-      body: removeScriptTags(body.value),
-      subject: subject.value,
-      users: [],
-      emailAddresses: [
-        email.value,
-      ],
-    }
-    const response = await useApiService.post<
-      ApiResult<unknown>
-    >(
-      '/api/v2/admin/emails',
-      params,
-    )
-    if (response.succeeded) {
-      $toast.success('Message Send Successfully!')
-      emit('ComposeMailSuccessFull')
-    }
-    else {
-      $toast.error('The operation failed. Please try again later.')
-    }
-  }
-  catch (err: unknown) {
-    const error = err as AppError
-    if (error.response?.status === 400) {
-      $toast.error(error.response.data?.message || '')
-    }
-  }
-  finally {
-    loading.value = false
-  }
-}
+  const response = await sendEmail({
+    from: selectedFromEmail.value,
+    body: removeScriptTags(body.value),
+    subject: subject.value,
+    users: [],
+    emailAddresses: [
+      email.value,
+    ],
+  })
 
-const getEmailAddresses = async () => {
-  try {
-    loadingEmailList.value = true
-    const response = await useApiService.get<
-      ApiResult<string[]>
-    >(
-      '/api/v2/admin/emails/addresses',
-    )
-    if (response.succeeded) {
-      fromEmailList.value = response.data ?? []
-    }
-    else {
-      $toast.error('The operation get data failed. Please try again later.')
-    }
-  }
-  catch (err: unknown) {
-    const error = err as AppError
-    if (error.response?.status === 400) {
-      $toast.error(error.response.data?.message || '')
-    }
-  }
-  finally {
-    loadingEmailList.value = false
+  if (response.succeeded) {
+    emit('ComposeMailSuccessFull')
   }
 }
 

app/components/admin/contactus/createTicketModal.vue

@@ -94,8 +94,8 @@
         <common-rich-editor
           v-model="body"
           mode="custom"
-          :features="['bold', 'italic', 'list', 'link']"
-          :rules="requiredRule"
+          :features="['bold', 'italic', 'list', 'link', 'image', 'mediaEmbed']"
+          :rules="[requiredRule]"
           required
         />
       </div>
@@ -118,22 +118,20 @@
 </template>
 
 <script setup lang="ts">
-import type {
-  ApiResult,
-  AppError,
-} from '@/types'
-
 const emit = defineEmits(['CreateTicketSuccessFull'])
-const { $toast } = useNuxtApp()
+const {
+  createTicket,
+  loadingCreateTicket: loading,
+  getEmailAddresses,
+  loadingGetEmailAddresses: loadingEmailList,
+  emailAddresses: fromEmailList,
+} = useContactUsAdmin()
 
-const loading = ref(false)
 const subject = ref('')
 const body = ref('')
 const email = ref('')
 const name = ref('')
-const selectedFromEmail = ref()
-const fromEmailList = ref<string[]>([])
-const loadingEmailList = ref(false)
+const selectedFromEmail = ref('')
 
 const isRequired = (value: string) => !!value
 const isEmailValid = (value: string) => /.+@.+\..+/.test(value)
@@ -166,63 +164,16 @@ const removeScriptTags = (html: string) => {
 }
 
 const create = async () => {
-  try {
-    loading.value = true
-
-    const formData = new FormData()
-    formData.append('From', selectedFromEmail.value)
-    formData.append('ReceiverName', name.value)
-    formData.append('ReceiverEmail', email.value)
-    formData.append('Subject', subject.value)
-    formData.append('Body', removeScriptTags(body.value))
-    const response = await useApiService.post<
-      ApiResult<unknown>
-    >(
-      '/api/v2/admin/tickets',
-      formData,
-    )
-    if (response.succeeded) {
-      $toast.success('Ticket Create Successfully!')
-      emit('CreateTicketSuccessFull')
-    }
-    else {
-      $toast.error('The operation failed. Please try again later.')
-    }
-  }
-  catch (err: unknown) {
-    const error = err as AppError
-    if (error.response?.status === 400) {
-      $toast.error(error.response.data?.message || '')
-    }
-  }
-  finally {
-    loading.value = false
-  }
-}
+  const response = await createTicket({
+    from: selectedFromEmail.value,
+    receiverName: name.value,
+    receiverEmail: email.value,
+    subject: subject.value,
+    body: removeScriptTags(body.value),
+  })
 
-const getEmailAddresses = async () => {
-  try {
-    loadingEmailList.value = true
-    const response = await useApiService.get<
-      ApiResult<string[]>
-    >(
-      '/api/v2/admin/emails/addresses',
-    )
-    if (response.succeeded) {
-      fromEmailList.value = response.data ?? []
-    }
-    else {
-      $toast.error('The operation get data failed. Please try again later.')
-    }
-  }
-  catch (err: unknown) {
-    const error = err as AppError
-    if (error.response?.status === 400) {
-      $toast.error(error.response.data?.message || '')
-    }
-  }
-  finally {
-    loadingEmailList.value = false
+  if (response.succeeded) {
+    emit('CreateTicketSuccessFull')
   }
 }
 

app/components/admin/contactus/deleteItemModal.vue

@@ -19,45 +19,22 @@
 </template>
 
 <script setup lang="ts">
-import type {
-  ApiResult,
-  AppError,
-  ResponseListDTO,
-} from '@/types'
-
 interface IDeleteItemModal {
   id: string
 }
 
 const props = defineProps<IDeleteItemModal>()
 const emit = defineEmits(['deleteSuccessFull'])
-const { $toast } = useNuxtApp()
+const {
+  deleteItem,
+  loadingDeleteItem: loading,
+} = useContactUsAdmin()
 
-const loading = ref(false)
 const confirm = async () => {
-  try {
-    loading.value = true
-    const response = await useApiService.remove<
-      ApiResult<ResponseListDTO<unknown>>
-    >(
-      `/api/v2/admin/tickets/${props.id}`,
-    )
-    if (response.succeeded) {
-      $toast.success('Message deleted successfully!')
-      emit('deleteSuccessFull')
-    }
-    else {
-      $toast.error('The operation failed. Please try again later.')
-    }
-  }
-  catch (err: unknown) {
-    const error = err as AppError
-    if (error.response?.status === 400) {
-      $toast.error(error.response.data?.message || '')
-    }
-  }
-  finally {
-    loading.value = false
+  const response = await deleteItem(props.id)
+
+  if (response.succeeded) {
+    emit('deleteSuccessFull')
   }
 }
 </script>