DONE: use full name for date in letter, include password in email after membership is done, block ic_number to exclude - (#9)

Co-authored-by: ISMAIL MASSERAN <topaz@ISMAILs-Macbook.local>
Reviewed-on: #9

fe/src/modules/user/composables/useUserList.ts

@@ -1,4 +1,4 @@
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import debounce from 'lodash/debounce'
 import type { SortConfig } from '@/components/ui/usage/DataTable.vue'
 import { useApiPagination } from '@/composables/useApiPagination'
@@ -12,12 +12,29 @@ export function useUserList() {
   const error = ref<string | null>(null)
   const search = ref('')
   const statusFilter = ref('')
+  const joinDateFrom = ref('')
+  const joinDateTo = ref('')
+  const leaveDateFrom = ref('')
+  const leaveDateTo = ref('')
   const sortBy = ref<SortConfig[]>([{ key: 'name', order: 'asc' }])
   const page = ref(1)
   const itemsPerPage = ref(10)
 
   const { pagination, applyPagination } = useApiPagination({ per_page: 10 })
 
+  const hasJoinDateFilters = computed(() => Boolean(joinDateFrom.value || joinDateTo.value))
+  const hasLeaveDateFilters = computed(() => Boolean(leaveDateFrom.value || leaveDateTo.value))
+
+  function clearJoinDateFilters() {
+    joinDateFrom.value = ''
+    joinDateTo.value = ''
+  }
+
+  function clearLeaveDateFilters() {
+    leaveDateFrom.value = ''
+    leaveDateTo.value = ''
+  }
+
   async function fetchUsers(requestPage = page.value) {
     loading.value = true
     error.value = null
@@ -31,11 +48,17 @@ export function useUserList() {
         sort_order: activeSort?.order ?? 'asc',
         search: search.value.trim() || undefined,
         status: statusFilter.value.trim() || undefined,
+        join_date_from: joinDateFrom.value || undefined,
+        join_date_to: joinDateTo.value || undefined,
+        leave_date_from: leaveDateFrom.value || undefined,
+        leave_date_to: leaveDateTo.value || undefined,
       })
 
       users.value = data.data
       applyPagination(data.pagination)
       page.value = data.pagination.current_page
+    } catch (err) {
+      error.value = getApiErrorMessage(err, 'Gagal memuatkan senarai pengguna.')
     } finally {
       loading.value = false
     }
@@ -58,6 +81,10 @@ export function useUserList() {
     fetchUsers(1)
   })
 
+  watch([joinDateFrom, joinDateTo, leaveDateFrom, leaveDateTo], () => {
+    fetchUsers(1)
+  })
+
   watch(page, (nextPage, previousPage) => {
     if (nextPage !== previousPage) {
       fetchUsers(nextPage)
@@ -80,6 +107,14 @@ export function useUserList() {
     error,
     search,
     statusFilter,
+    joinDateFrom,
+    joinDateTo,
+    leaveDateFrom,
+    leaveDateTo,
+    hasJoinDateFilters,
+    hasLeaveDateFilters,
+    clearJoinDateFilters,
+    clearLeaveDateFilters,
     sortBy,
     page,
     itemsPerPage,