@ngockhoale/ukit 1.1.6

package/templates/.claude/skills/frontend-vue/composables/useWebSocket.js

@@ -0,0 +1,257 @@
+/**
+ * @file useWebSocket.js
+ * @description WebSocket composable — quản lý kết nối realtime với auto-retry.
+ *
+ * Có 2 hàm chính:
+ *   - useWebSocket()       → Composable đầy đủ (auto connect onMounted, disconnect onUnmounted, retry, debug)
+ *   - subscribeWebSocket() → Phiên bản đơn giản, chỉ cần truyền URL + callback onMessage
+ */
+import { ref, onMounted, onUnmounted } from 'vue'
+
+/**
+ * Vue composable quản lý WebSocket connection với auto-retry.
+ * Tự connect khi component mounted, disconnect khi unmounted.
+ *
+ * @param {string} url - WebSocket URL (vd: "wss://qas.duraoneportal.com/ws")
+ * @param {Object} [options={}] - Cấu hình
+ * @param {number} [options.maxRetries=5] - Số lần retry tối đa khi mất kết nối
+ * @param {number} [options.retryDelay=3000] - Khoảng cách giữa các lần retry (ms)
+ * @returns {Object} WebSocket controls:
+ *   - connect()                    → Kết nối thủ công
+ *   - disconnect()                 → Ngắt kết nối
+ *   - send(data)                   → Gửi data (auto JSON.stringify), trả true/false
+ *   - setupEventListeners(onMsg)   → Đăng ký callback nhận message (data đã parse JSON)
+ *   - isConnected {Ref<boolean>}   → Trạng thái kết nối
+ *   - error {Ref<string|null>}     → Lỗi hiện tại
+ *   - retryCount {Ref<number>}     → Số lần đã retry
+ *   - connectionStatus {Ref<string>} → 'initial'|'connecting'|'connected'|'disconnected'|'error'
+ *   - lastError {Ref<Object|null>} → Chi tiết lỗi cuối cùng
+ *   - getDebugInfo()               → Object debug info đầy đủ
+ *
+ * @example
+ * const { send, isConnected, setupEventListeners } = useWebSocket("wss://example.com/ws")
+ * setupEventListeners((data) => { console.log("Received:", data) })
+ * send({ type: "ping" })
+ */
+export function useWebSocket(url, options = {}) {
+  const socket = ref(null)
+  const isConnected = ref(false)
+  const error = ref(null)
+  const retryCount = ref(0)
+  const MAX_RETRIES = options.maxRetries || 5
+  const RETRY_DELAY = options.retryDelay || 3000
+  const connectionStatus = ref('initial') // 'initial', 'connecting', 'connected', 'disconnected', 'error'
+  const lastError = ref(null)
+
+  // Debug logging function
+  const debugLog = (type, message, data = null) => {
+    const timestamp = new Date().toISOString()
+    console.log(`[WebSocket ${type}] ${timestamp} - ${message}`, data)
+  }
+
+  const connect = () => {
+    if (!url) {
+      debugLog('ERROR', 'WebSocket URL is required')
+      error.value = 'WebSocket URL is required'
+      return
+    }
+
+    connectionStatus.value = 'connecting'
+    debugLog('INFO', `Attempting to connect to: ${url}`)
+
+    try {
+      socket.value = new WebSocket(url)
+      
+      socket.value.onopen = () => {
+        connectionStatus.value = 'connected'
+        debugLog('SUCCESS', 'WebSocket connection opened successfully')
+        isConnected.value = true
+        retryCount.value = 0
+        error.value = null
+        lastError.value = null
+      }
+
+      socket.value.onclose = (event) => {
+        connectionStatus.value = 'disconnected'
+        debugLog('ERROR', 'WebSocket connection closed', event)
+        isConnected.value = false
+        error.value = `WebSocket closed: ${event.code} - ${event.reason}`
+        lastError.value = {
+          code: event.code,
+          reason: event.reason,
+          wasClean: event.wasClean
+        }
+        retryConnection()
+      }
+
+      socket.value.onerror = (err) => {
+        connectionStatus.value = 'error'
+        debugLog('ERROR', 'WebSocket error', err)
+        error.value = `WebSocket error: ${err.message}`
+        lastError.value = err
+        retryConnection()
+      }
+
+      socket.value.onmessage = (event) => {
+        debugLog('MESSAGE', 'Received message', event.data)
+      }
+
+    } catch (err) {
+      connectionStatus.value = 'error'
+      debugLog('ERROR', 'Failed to create WebSocket', err)
+      error.value = `Failed to create WebSocket: ${err.message}`
+      lastError.value = err
+      retryConnection()
+    }
+  }
+
+  const retryConnection = () => {
+    if (retryCount.value < MAX_RETRIES) {
+      retryCount.value++
+      debugLog('INFO', `Retrying connection (${retryCount.value}/${MAX_RETRIES})...`)
+      setTimeout(connect, RETRY_DELAY)
+    } else {
+      connectionStatus.value = 'error'
+      debugLog('ERROR', 'Max retry attempts reached')
+      error.value = 'Max retry attempts reached'
+    }
+  }
+
+  const getDebugInfo = () => ({
+    isConnected: isConnected.value,
+    error: error.value,
+    retryCount: retryCount.value,
+    url,
+    options,
+    connectionStatus: connectionStatus.value,
+    socketStatus: socket.value ? socket.value.readyState : null,
+    lastError: lastError.value
+  })
+
+  onMounted(connect)
+  onUnmounted(() => {
+    if (socket.value) {
+      debugLog('INFO', 'Disconnecting WebSocket')
+      socket.value.close()
+      socket.value = null
+      isConnected.value = false
+      error.value = null
+      connectionStatus.value = 'disconnected'
+    }
+  })
+
+  return {
+    connect,
+    disconnect: () => {
+      if (socket.value) {
+        debugLog('INFO', 'Disconnecting WebSocket')
+        socket.value.close()
+        socket.value = null
+        isConnected.value = false
+        error.value = null
+        connectionStatus.value = 'disconnected'
+      }
+    },
+    send: (data) => {
+      if (!socket.value || !isConnected.value) {
+        debugLog('ERROR', 'WebSocket is not connected')
+        return false
+      }
+
+      try {
+        debugLog('MESSAGE', 'Sending message', data)
+        socket.value.send(JSON.stringify(data))
+        return true
+      } catch (err) {
+        debugLog('ERROR', 'Failed to send message', err)
+        error.value = `Failed to send message: ${err.message}`
+        return false
+      }
+    },
+    setupEventListeners: (onMessage) => {
+      if (socket.value) {
+        socket.value.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data)
+            debugLog('MESSAGE', 'Parsed message', data)
+            onMessage(data)
+          } catch (error) {
+            debugLog('ERROR', 'Error parsing message', error)
+            error.value = `Error parsing message: ${error.message}`
+          }
+        }
+      }
+    },
+    isConnected,
+    error,
+    retryCount,
+    getDebugInfo,
+    connectionStatus,
+    lastError
+  }
+}
+
+/**
+ * Phiên bản đơn giản của WebSocket — chỉ subscribe nhận message.
+ * KHÔNG có auto-retry, KHÔNG bind vào lifecycle component.
+ * Phải gọi disconnect() thủ công khi không dùng nữa.
+ *
+ * @param {string} url - WebSocket URL
+ * @param {function(Object): void} onMessage - Callback nhận message (data đã parse JSON)
+ * @returns {Object} { isConnected: Ref<boolean>, disconnect: Function }
+ * @example
+ * const { isConnected, disconnect } = subscribeWebSocket("wss://example.com/ws", (data) => {
+ *   console.log("New message:", data)
+ * })
+ * // Khi không dùng nữa:
+ * disconnect()
+ */
+export function subscribeWebSocket(url, onMessage) {
+  const socket = ref(null)
+  const isConnected = ref(false)
+
+  // Create WebSocket connection
+  socket.value = new WebSocket(url)
+
+  // Handle connection open
+  socket.value.onopen = () => {
+    console.log('WebSocket connected')
+    isConnected.value = true
+  }
+
+  // Handle incoming messages
+  socket.value.onmessage = (event) => {
+    console.log('Received message:', event.data)
+    try {
+      const data = JSON.parse(event.data)
+      onMessage(data)
+    } catch (error) {
+      console.error('Error parsing message:', error)
+    }
+  }
+
+  // Handle connection close
+  socket.value.onclose = () => {
+    console.log('WebSocket disconnected')
+    isConnected.value = false
+  }
+
+  // Handle errors
+  socket.value.onerror = (error) => {
+    console.error('WebSocket error:', error)
+  }
+
+  // Return cleanup function
+  const disconnect = () => {
+    if (socket.value) {
+      socket.value.close()
+      socket.value = null
+      isConnected.value = false
+    }
+  }
+
+  return {
+    isConnected,
+    disconnect
+  }
+}

package/templates/.claude/skills/frontend-vue/composables/userObj.js

@@ -0,0 +1,111 @@
+/**
+ * @file userObj.js
+ * @description Các hàm truy vấn thông tin nhân viên và gửi notification.
+ * Dữ liệu từ table "nhanvien" (nhân viên).
+ *
+ * @requires request - từ useRequest.js
+ * @requires get_schema - từ state.js
+ * @requires dayjs - từ utils.js
+ */
+
+/**
+ * Lấy toàn bộ thông tin nhân viên theo username
+ * @param {string} manhanvien - Username (mã nhân viên)
+ * @returns {Promise<Object>} Object nhân viên hoặc {} nếu không tìm thấy
+ * @example const user = await getUserObjByUsername("nguyenvana")
+ */
+export const getUserObjByUsername = async (manhanvien) => {
+    let to_return = {};
+    let data = {
+      schema: get_schema(),
+      table: "nhanvien",
+      conditions: JSON.stringify({ username: manhanvien }),
+    };
+    const resp = await request("/select", data, "get");
+    if (resp.length > 0) {
+        to_return = resp[0];
+    }
+    return to_return;
+  };
+
+/**
+ * Lấy mã sales supervisor của nhân viên
+ * @param {string} manhanvien - Username
+ * @returns {Promise<string>} Mã salesup hoặc "" nếu không tìm thấy
+ */
+export const getSalesupByUsername = async (manhanvien) => {
+  let masalesup = "";
+  let data = {
+    schema: get_schema(),
+    table: "nhanvien",
+    columns: ["masalesup"],
+    conditions: JSON.stringify({ username: manhanvien }),
+  };
+  const resp = await request("/select", data, "get");
+  if (resp.length > 0) {
+    masalesup = resp[0].masalesup;
+  }
+  return masalesup;
+};
+
+/**
+ * Lấy tên đầy đủ nhân viên theo username
+ * @param {string} manhanvien - Username
+ * @returns {Promise<string>} Tên nhân viên hoặc "" nếu không tìm thấy
+ */
+export const getFullnameByUsername = async (manhanvien) => {
+    let tennhanvien = "";
+    let data = {
+      schema: get_schema(),
+      table: "nhanvien",
+      columns: ["tennhanvien"],
+      conditions: JSON.stringify({ username: manhanvien }),
+    };
+    const resp = await request("/select", data, "get");
+    if (resp.length > 0) {
+        tennhanvien = resp[0].tennhanvien;
+    }
+    return tennhanvien;
+  };
+
+  /**
+   * Gửi push notification đến user qua cả Android và iOS.
+   * Tự lấy danh sách token thiết bị, gửi noti, và lưu lịch sử vào DB.
+   * @param {string} username - Username người nhận
+   * @param {Object} [data={}] - Nội dung notification
+   * @param {string} data.title - Tiêu đề notification
+   * @param {string} data.message - Nội dung notification
+   * @example await sendNotiToUser("nguyenvana", { title: "Thông báo", message: "Bạn có agreement mới" })
+   */
+  export const sendNotiToUser = async (username, data = {}) => {
+    let noti_send = data;
+    let notiobj = await get_noti_token_list(username);
+    const android_list = notiobj.android;
+    const ios_list = notiobj.ios;
+    noti_send['os'] = 'android3';
+    noti_send['token'] = android_list;
+    requestSendnoti(noti_send);
+    noti_send['os'] = 'ios';
+    noti_send['token'] = ios_list;
+    requestSendnoti(noti_send);
+    let to_save_noti = {
+      username: username,
+      title: data.title,
+      message: data.message,
+      os: data.os,
+      token: data.token,
+    }
+    saveNotiToServer(to_save_noti);
+  };
+
+  /**
+   * Lưu lịch sử notification vào DB (table "notification")
+   * @param {Object} [data={}] - { username, title, message, os, token }
+   * @returns {Promise<Object>}
+   */
+  export const saveNotiToServer = async (data = {}) => {
+    data['send_time'] = dayjs().format("YYYY-MM-DD HH:mm:ss");
+    data['schema'] = get_schema();
+    data['table'] = 'notification';
+    await request("/save", data);
+  };

package/templates/.claude/skills/frontend-vue/composables/utils.js

@@ -0,0 +1,322 @@
+/**
+ * @file utils.js
+ * @description Utility functions dùng chung — auto-import toàn cục.
+ * Gồm: format date/number, validation, navigation, UI helpers, data transformation.
+ *
+ * Tất cả đều là pure functions (trừ go_to_page, go_back, show_message dùng side-effect).
+ */
+import _dayjs from 'dayjs';
+
+/**
+ * Wrapper dayjs — dùng thay cho import dayjs trực tiếp
+ * @param {...*} args - Tham số truyền vào dayjs (date string, Date object, ...)
+ * @returns {import('dayjs').Dayjs} dayjs instance
+ */
+export function dayjs(...args) {
+  return _dayjs(...args)
+};
+
+/**
+ * Format ngày tháng theo type chỉ định
+ * @param {string|Date} date - Ngày cần format
+ * @param {"time"|"datetime"|"date"|"read_date"|"read_datetime"} [type] - Kiểu format
+ *   - "time"          → "HH:mm:ss"
+ *   - "datetime"      → "YYYY-MM-DD HH:mm:ss"
+ *   - "date"          → "YYYY-MM-DD"
+ *   - "read_date"     → "DD/MM/YYYY" (hiển thị cho user)
+ *   - "read_datetime" → "DD/MM/YYYY HH:mm:ss"
+ *   - mặc định        → "YYYY-MM-DD"
+ * @returns {string} Chuỗi ngày đã format, trả "" nếu date null/blank
+ */
+export const formatDate = (date, type) => {
+  if (check_is_null_or_blank(date)) {
+    return "";
+  }
+  if (type === "time") {
+    return dayjs(date).format("HH:mm:ss");
+  }
+  if (type === "datetime") {
+    return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
+  }
+  if (type === "date") {
+    return dayjs(date).format("YYYY-MM-DD");
+  }
+  if (type === "read_date") {
+    return dayjs(date).format("DD/MM/YYYY");
+  }
+  if (type === "read_datetime") {
+    return dayjs(date).format("DD/MM/YYYY HH:mm:ss");
+  }
+  return dayjs(date).format("YYYY-MM-DD");
+};
+
+/**
+ * Tạo mảng các ngày liên tiếp từ fromDate đến toDate
+ * @param {string|Date} fromDate - Ngày bắt đầu
+ * @param {string|Date} toDate - Ngày kết thúc
+ * @returns {Array<string>} Mảng ngày format "YYYY-MM-DD"
+ * @example getDateList("2024-01-01", "2024-01-03") → ["2024-01-01", "2024-01-02", "2024-01-03"]
+ */
+export const getDateList = (fromDate, toDate) => {
+  const end = dayjs(toDate);
+  const dateArray = [];
+  let currentDate = dayjs(fromDate);
+  while (currentDate.isBefore(end) || currentDate.isSame(end, "day")) {
+    let formattedDate = currentDate.format("YYYY-MM-DD");
+    dateArray.push(formattedDate);
+    currentDate = currentDate.add(1, "day");
+  }
+  return dateArray;
+};
+
+/**
+ * Format số với dấu phân cách hàng nghìn và số thập phân
+ * @param {number|string} num - Số cần format
+ * @param {string} [separator="."] - Ký tự phân cách hàng nghìn
+ * @param {number} [decimal=2] - Số chữ số thập phân
+ * @returns {string} Số đã format, trả "" nếu num null/blank
+ * @example formatNumber(1234567.8) → "1.234.567.80"
+ */
+export const formatNumber = (num, separator = ".", decimal = 2) => {
+  if (check_is_null_or_blank(num)) {
+    return "";
+  }
+  num = parseFloat(num);
+  return num.toFixed(decimal).replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+};
+
+/**
+ * Lấy chiều cao màn hình (chỉ chạy client-side)
+ * @returns {number|undefined} window.innerHeight
+ */
+export const screen_height = () => {
+  if (process.client) {
+    return window.innerHeight;
+  }
+};
+
+/**
+ * Kiểm tra arr1 có chứa tất cả phần tử của arr2 không
+ * @param {Array} arr1 - Mảng nguồn
+ * @param {Array} arr2 - Mảng cần kiểm tra
+ * @returns {boolean} true nếu arr1 chứa tất cả phần tử arr2
+ */
+export const arraysContainAllElements = (arr1, arr2) => {
+  return arr2.every((element) => arr1.includes(element));
+};
+
+/**
+ * Bỏ dấu tiếng Việt — chuyển chuỗi có dấu thành không dấu (dùng cho search/filter)
+ * @param {string} str - Chuỗi tiếng Việt có dấu
+ * @returns {string} Chuỗi lowercase không dấu, đã loại ký tự đặc biệt
+ * @example bodautiengviet("Nguyễn Văn A") → "nguyen van a"
+ */
+export const bodautiengviet = (str) => {
+  str = str.toString().toLowerCase();
+  str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a");
+  str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e");
+  str = str.replace(/ì|í|ị|ỉ|ĩ/g, "i");
+  str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o");
+  str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u");
+  str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y");
+  str = str.replace(/đ/g, "d");
+  str = str.replace(/!|@|%|\^|\*|\(|\)|\+|\=|\<|\>|\?|\/|,|\.|\:|\;|\'|\"|\&|\#|\[|\]|~|\$|_|`|-|{|}|\||\\/g, " ");
+  str = str.replace(/ + /g, " ");
+  str = str.trim();
+  return str;
+};
+
+/**
+ * Loại bỏ thẻ <a> trong các cột chỉ định của danh sách (mutate trực tiếp)
+ * @param {Array<Object>} lst - Mảng objects cần xử lý
+ * @param {Array<string>} col - Danh sách tên cột cần loại HTML
+ * @returns {Array<Object>} Mảng đã xử lý (cùng reference)
+ */
+export const remove_html = (lst, col) => {
+  for (let i = 0; i < lst.length; i++) {
+    for (let j = 0; j < col.length; j++) {
+      if (!check_is_null_or_blank(lst[i][col[j]])) {
+        if (typeof lst[i][col[j]] === "string") {
+          if (lst[i][col[j]].includes("<a")) {
+            lst[i][col[j]] = remove_a_tag(lst[i][col[j]]);
+          }
+        }
+      }
+    }
+  }
+  return lst;
+};
+
+/**
+ * Kiểm tra giá trị null, undefined, rỗng, hoặc object/array trống
+ * @param {*} value - Giá trị cần kiểm tra
+ * @returns {boolean} true nếu value là null/undefined/""/[]/{}
+ * @example
+ * check_is_null_or_blank(null)  → true
+ * check_is_null_or_blank("")    → true
+ * check_is_null_or_blank([])    → true
+ * check_is_null_or_blank({})    → true
+ * check_is_null_or_blank("abc") → false
+ */
+export const check_is_null_or_blank = (value) => {
+  if (value == null) {
+    return true;
+  }
+  let to_return = typeof value === "undefined" || value === "undefined" || value === undefined || value === "" || value == {};
+  if (typeof value === "object") {
+    if (value.length == 0) {
+      to_return = true;
+    }
+    if (Object.keys(value).length === 0) {
+      to_return = true;
+    }
+  }
+  return to_return;
+};
+
+/**
+ * Kiểm tra giá trị bằng 0 (bao gồm cả string "0", "0.00")
+ * @param {*} value - Giá trị cần kiểm tra
+ * @returns {boolean} true nếu value là 0/"0"/"0.00"/undefined
+ */
+export const check_is_zero = (value) => {
+  if (isNaN(value)) {
+    return false;
+  }
+  return typeof value === "undefined" || value === "0" || value === "0.00" || value === 0 || value == 0;
+};
+
+/**
+ * Cuộn trang lên đầu (smooth scroll)
+ */
+export const move_to_top = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
+
+/**
+ * Chuyển trang bằng Vue Router
+ * @param {string} page - Đường dẫn trang (vd: "/master/branch")
+ * @param {Object|string} [query=""] - Query params (vd: { id: 123 })
+ */
+export const go_to_page = (page, query = "") => {
+  const router = useRouter();
+  if (query === "") {
+    router.push({ path: page });
+  } else {
+    router.push({ path: page, query: query });
+  }
+};
+
+/**
+ * Quay lại trang trước. Nếu không có history → về page chỉ định hoặc "/"
+ * @param {string} [page] - Trang fallback nếu không có history
+ */
+export const go_back = (page) => {
+  const router = useRouter();
+  if (window.history.length > 1) {
+    router.back(); // Go back to the previous page
+  } else {
+    if (check_is_null_or_blank(page)) {
+      go_to_page("/");
+    } else {
+      go_to_page(page);
+    }
+  }
+};
+
+/**
+ * Tạm dừng thực thi trong khoảng thời gian chỉ định
+ * @param {number} ms - Thời gian chờ (milliseconds)
+ * @returns {Promise<void>}
+ * @example await sleep(1000) // chờ 1 giây
+ */
+export const sleep = (ms) => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+import { message } from "ant-design-vue";
+/**
+ * Hiển thị thông báo toast (Ant Design Vue message)
+ * @param {"success"|"error"|"warning"|"info"|"loading"} type - Loại thông báo
+ * @param {string} content - Nội dung hiển thị
+ * @param {number} [duration=3] - Thời gian hiển thị (giây)
+ * @example show_message("success", "Lưu thành công!")
+ * @example show_message("error", "Có lỗi xảy ra", 5)
+ */
+export const show_message = (type, content, duration = 3) => {
+  message[type]({
+    content: content,
+    duration: duration,
+  });
+};
+
+/**
+ * Chuyển đổi mảng object thành format dropdown {value, label}
+ * Label tự động dịch qua hàm t().
+ * @param {Array<Object>} lst - Mảng dữ liệu gốc
+ * @param {string} value_col - Tên cột làm value
+ * @param {string} label_col - Tên cột làm label
+ * @returns {Array<{value: *, label: string}>} Mảng dropdown options
+ * @example
+ * convertToDropdownValue([{code: "VN", name: "Vietnam"}], "code", "name")
+ * → [{value: "VN", label: "Vietnam"}]
+ */
+export const convertToDropdownValue = (lst, value_col, label_col) => {
+  let to_return = lst.map((obj) => {
+    return {
+      value: obj[value_col],
+      label: t(obj[label_col]),
+    };
+  });
+  return to_return;
+};
+
+/**
+ * Chuyển mảng objects thành object key-value (lookup map)
+ * @param {Array<Object>} lst - Mảng dữ liệu gốc
+ * @param {string} key_col - Tên cột làm key
+ * @param {string} value_col - Tên cột làm value
+ * @returns {Object} Object dạng { [key]: value }
+ * @example
+ * convertListToObject([{id: 1, name: "A"}, {id: 2, name: "B"}], "id", "name")
+ * → { 1: "A", 2: "B" }
+ */
+export const convertListToObject = (lst, key_col, value_col) => {
+  let to_return = {};
+  lst.map((obj) => {
+    to_return[obj[key_col]] = obj[value_col];
+  });
+  return to_return;
+};
+
+/**
+ * Trích xuất 1 field từ mảng objects thành mảng giá trị (pluck)
+ * @param {Array<Object>} lst - Mảng dữ liệu gốc
+ * @param {string} key_col - Tên cột cần trích
+ * @returns {Array} Mảng giá trị của field đó
+ * @example
+ * convertListToListOfField([{id: 1, name: "A"}, {id: 2, name: "B"}], "name")
+ * → ["A", "B"]
+ */
+export const convertListToListOfField = (lst, key_col) => {
+  let to_return = [];
+  lst.map((obj) => {
+    to_return.push(obj[key_col]);
+  });
+  return to_return;
+};
+/**
+ * Sắp xếp mảng dropdown theo value tăng dần (parse int)
+ * @param {Array<{value: string|number}>} list - Mảng dropdown options
+ * @returns {Array<{value: string|number}>} Mảng đã sắp xếp
+ */
+export function sortListByValueAsc(list) {
+  return list.sort((a, b) => {
+    const aValue = parseInt(a.value);
+    const bValue = parseInt(b.value);
+    return aValue - bValue;
+  });
+}