aq-fe-framework 0.1.309 → 0.1.311

package/dist/chunk-HHJFKKE7.mjs

@@ -0,0 +1,26 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/components/Layouts/FlexColumn/MyFlexColumn.tsx
+import { Flex } from "@mantine/core";
+import { jsx } from "react/jsx-runtime";
+function MyFlexColumn(_a) {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(Flex, __spreadProps(__spreadValues({ direction: "column", gap: "md" }, rest), { children }));
+}
+
+// src/components/Layouts/FlexRow/MyFlexRow.tsx
+import { Flex as Flex2 } from "@mantine/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MyFlexRow(_a) {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx2(Flex2, __spreadProps(__spreadValues({ gap: "md", align: "center" }, rest), { children }));
+}
+
+export {
+  MyFlexColumn,
+  MyFlexRow
+};

package/dist/chunk-JIPPFPV6.mjs

@@ -0,0 +1,518 @@
+import {
+  MyFlexColumn,
+  MyFlexRow
+} from "./chunk-HHJFKKE7.mjs";
+import {
+  const_object_colors
+} from "./chunk-NWBLJ3W3.mjs";
+import {
+  enum_daysOfWeek
+} from "./chunk-K6S7R6LU.mjs";
+import {
+  useMyReactMutation
+} from "./chunk-QPNYGFTI.mjs";
+import {
+  utils_notification_show
+} from "./chunk-7ZCOFATU.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/core/button/MyActionIcon.tsx
+import { ActionIcon } from "@mantine/core";
+import {
+  IconDeviceFloppy,
+  IconEdit,
+  IconFileExport,
+  IconFileImport,
+  IconPlus,
+  IconPrinter,
+  IconTrash,
+  IconX
+} from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+var actionConfig = {
+  default: {},
+  create: {
+    color: "indigo",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx(IconPlus, {})
+  },
+  createMultiple: {
+    color: "green",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx(IconPlus, {})
+  },
+  delete: {
+    color: "red",
+    icon: /* @__PURE__ */ jsx(IconTrash, {})
+  },
+  update: {
+    color: "yellow",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx(IconEdit, {})
+  },
+  save: {
+    color: "blue",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx(IconDeviceFloppy, {})
+  },
+  import: {
+    color: "green.8",
+    icon: /* @__PURE__ */ jsx(IconFileImport, {})
+  },
+  print: {
+    color: "orange.7",
+    icon: /* @__PURE__ */ jsx(IconPrinter, {})
+  },
+  export: {
+    color: "green.8",
+    icon: /* @__PURE__ */ jsx(IconFileExport, {})
+  },
+  cancel: {
+    color: "gray",
+    icon: /* @__PURE__ */ jsx(IconX, {})
+  },
+  select: {},
+  check: {}
+};
+function MyActionIcon(_a) {
+  var _b = _a, { children, actionType } = _b, rest = __objRest(_b, ["children", "actionType"]);
+  if (!actionType) {
+    return /* @__PURE__ */ jsx(ActionIcon, __spreadProps(__spreadValues({}, rest), { children }));
+  }
+  const config = actionConfig[actionType];
+  return /* @__PURE__ */ jsx(
+    ActionIcon,
+    __spreadProps(__spreadValues({
+      color: config.color,
+      type: config.type
+    }, rest), {
+      children: config.icon
+    })
+  );
+}
+
+// src/core/button/MyButton.tsx
+import { Button as Button2 } from "@mantine/core";
+import {
+  IconDeviceFloppy as IconDeviceFloppy2,
+  IconEdit as IconEdit2,
+  IconFileExport as IconFileExport2,
+  IconFileImport as IconFileImport2,
+  IconPlus as IconPlus2,
+  IconPrinter as IconPrinter2,
+  IconTrash as IconTrash2,
+  IconX as IconX2
+} from "@tabler/icons-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var actionConfig2 = {
+  default: {
+    defaultText: ""
+  },
+  create: {
+    color: "blue",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx2(IconDeviceFloppy2, {}),
+    defaultText: "L\u01B0u"
+  },
+  createMultiple: {
+    color: "green",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx2(IconPlus2, {}),
+    defaultText: "Th\xEAm danh s\xE1ch"
+  },
+  delete: {
+    color: "red",
+    icon: /* @__PURE__ */ jsx2(IconTrash2, {}),
+    defaultText: "X\xF3a"
+  },
+  update: {
+    color: "yellow",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx2(IconEdit2, {}),
+    defaultText: "Ch\u1EC9nh s\u1EEDa"
+  },
+  save: {
+    color: "blue",
+    type: "submit",
+    icon: /* @__PURE__ */ jsx2(IconDeviceFloppy2, {}),
+    defaultText: "L\u01B0u"
+  },
+  import: {
+    color: "green.8",
+    icon: /* @__PURE__ */ jsx2(IconFileImport2, {}),
+    defaultText: "Import"
+  },
+  print: {
+    color: "orange.7",
+    icon: /* @__PURE__ */ jsx2(IconPrinter2, {}),
+    defaultText: "In"
+  },
+  export: {
+    color: "green.8",
+    icon: /* @__PURE__ */ jsx2(IconFileExport2, {}),
+    defaultText: "Export"
+  },
+  cancel: {
+    color: "gray",
+    icon: /* @__PURE__ */ jsx2(IconX2, {}),
+    defaultText: "H\u1EE7y thao t\xE1c"
+  },
+  select: {
+    defaultText: "Ch\u1ECDn"
+  },
+  check: {
+    defaultText: "Ch\u1ECDn"
+  }
+};
+function MyButton(_a) {
+  var _b = _a, { children, actionType } = _b, rest = __objRest(_b, ["children", "actionType"]);
+  if (!actionType) {
+    return /* @__PURE__ */ jsx2(Button2, __spreadProps(__spreadValues({}, rest), { children }));
+  }
+  const config = actionConfig2[actionType];
+  return /* @__PURE__ */ jsx2(
+    Button2,
+    __spreadProps(__spreadValues({
+      color: config.color,
+      type: config.type,
+      leftSection: config.icon
+    }, rest), {
+      children: children != null ? children : config.defaultText
+    })
+  );
+}
+
+// src/core/button/MyButtonCreateUpdate.tsx
+import { useDisclosure } from "@mantine/hooks";
+import { useQueryClient } from "@tanstack/react-query";
+import { ActionIcon as ActionIcon2, Button as Button3, Modal } from "@mantine/core";
+import { IconEdit as IconEdit3, IconPlus as IconPlus3 } from "@tabler/icons-react";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function MyButtonCreateUpdate({
+  modalProps,
+  actionIconProps,
+  buttonProps,
+  form,
+  onSubmit,
+  onSuccess,
+  onError,
+  closeModalWhenSubmit = true,
+  resetFormWhenSubmit = true,
+  children,
+  disclosure: externalDisclosure,
+  isUpdate = false
+}) {
+  const defaultDisclosure = useDisclosure();
+  const disclosure = externalDisclosure != null ? externalDisclosure : defaultDisclosure;
+  const queryClient = useQueryClient();
+  const mutation = useMyReactMutation({
+    axiosFn: (values) => {
+      const result = onSubmit(values);
+      if (result === void 0) {
+        return Promise.resolve({
+          data: {
+            message: "T\u1EA1o th\xE0nh c\xF4ng (gi\u1EA3 l\u1EADp)",
+            data: {},
+            isSuccess: 1
+          },
+          status: 200,
+          statusText: "OK",
+          headers: {},
+          config: {}
+        });
+      }
+      return result;
+    },
+    options: __spreadValues(__spreadValues({
+      onSuccess: () => {
+        queryClient.invalidateQueries();
+        utils_notification_show({ crudType: isUpdate ? "update" : "create" });
+        disclosure[1].close();
+        if (closeModalWhenSubmit) disclosure[1].close();
+        if (resetFormWhenSubmit) form.reset();
+      }
+    }, onSuccess && {
+      onSuccess: () => {
+        onSuccess();
+      }
+    }), onError && {
+      onError: () => {
+        onError();
+      }
+    })
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isUpdate == true ? /* @__PURE__ */ jsx3(
+      ActionIcon2,
+      __spreadProps(__spreadValues({
+        color: "yellow",
+        onClick: disclosure[1].open
+      }, actionIconProps), {
+        children: /* @__PURE__ */ jsx3(IconEdit3, {})
+      })
+    ) : /* @__PURE__ */ jsx3(
+      Button3,
+      __spreadProps(__spreadValues({
+        onClick: disclosure[1].open,
+        leftSection: /* @__PURE__ */ jsx3(IconPlus3, {})
+      }, buttonProps), {
+        children: "Th\xEAm"
+      })
+    ),
+    /* @__PURE__ */ jsx3(
+      Modal,
+      __spreadProps(__spreadValues({
+        title: isUpdate ? "S\u1EEDa d\u1EEF li\u1EC7u" : "Th\xEAm d\u1EEF li\u1EC7u",
+        opened: disclosure[0],
+        onClose: disclosure[1].close
+      }, modalProps), {
+        children: /* @__PURE__ */ jsx3("form", { onSubmit: form.onSubmit((values) => {
+          mutation.mutate(values);
+        }), children: /* @__PURE__ */ jsxs(MyFlexColumn, { children: [
+          children,
+          /* @__PURE__ */ jsx3(MyButton, { actionType: "create" })
+        ] }) })
+      })
+    )
+  ] });
+}
+
+// src/core/button/MyButtonModal.tsx
+import { Button as Button4, Modal as Modal2 } from "@mantine/core";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function MyButtonModal({
+  disclosure,
+  children,
+  buttonProps,
+  modalProps
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(Button4, __spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "indigo" }, buttonProps)),
+    /* @__PURE__ */ jsx4(
+      Modal2,
+      __spreadProps(__spreadValues({
+        opened: disclosure == null ? void 0 : disclosure[0],
+        onClose: disclosure[1].close
+      }, modalProps), {
+        children: /* @__PURE__ */ jsx4(MyFlexColumn, { children })
+      })
+    )
+  ] });
+}
+
+// src/core/input/MyDayOfWeekPicker.tsx
+import { Badge, Group } from "@mantine/core";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var days = Object.entries(enum_daysOfWeek).filter(([key]) => isNaN(Number(key))).map(([label, value]) => ({ label, value }));
+function MyDayOfWeekPicker({ value = [], onChange }) {
+  const toggle = (val) => {
+    if (!onChange) return;
+    const newValue = value.includes(val) ? value.filter((v) => v !== val) : [...value, val].sort((a, b) => a - b);
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ jsx5(MyFlexRow, { align: "center", children: /* @__PURE__ */ jsx5(Group, { gap: "xs", children: days.map((d) => /* @__PURE__ */ jsx5(
+    Badge,
+    {
+      variant: value.includes(d.value) ? "filled" : "outline",
+      color: "blue",
+      radius: "sm",
+      size: "lg",
+      onClick: () => toggle(d.value),
+      style: { cursor: onChange ? "pointer" : "default", userSelect: "none" },
+      children: d.label
+    },
+    d.value
+  )) }) });
+}
+
+// src/core/input/MyTextInput.tsx
+import { TextInput } from "@mantine/core";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function MyTextInput(_a) {
+  var _b = _a, { label, isPhoneNumber } = _b, rest = __objRest(_b, ["label", "isPhoneNumber"]);
+  return /* @__PURE__ */ jsx6(
+    TextInput,
+    __spreadValues({
+      onKeyDown: (e) => {
+        if (!isPhoneNumber) return;
+        const allowedKeys = [
+          "Backspace",
+          "Tab",
+          "ArrowLeft",
+          "ArrowRight",
+          "Delete",
+          "+",
+          "-",
+          "(",
+          ")",
+          " "
+          // các ký tự đặc biệt cho số điện thoại
+        ];
+        if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
+          e.preventDefault();
+        }
+      },
+      placeholder: label ? `Nh\u1EADp ${label == null ? void 0 : label.toLowerCase()}` : "",
+      label
+    }, rest)
+  );
+}
+
+// src/core/input/MyWeeklySessionSchedulerPicker.tsx
+import {
+  Button as Button5,
+  Center,
+  Divider,
+  Group as Group2,
+  NumberInput,
+  Paper,
+  ScrollArea,
+  Text as Text2
+} from "@mantine/core";
+import { IconPlus as IconPlus4, IconTrash as IconTrash3 } from "@tabler/icons-react";
+import { useState } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function MyWeeklySessionSchedulerPicker({
+  value = [],
+  onChange
+}) {
+  const [selectedDays, setSelectedDays] = useState([]);
+  const handleAddSession = (dayOfWeek) => {
+    const newSession = {
+      dayOfWeek,
+      startPeriod: 1,
+      numberOfPeriods: 1,
+      durationMinutes: 90
+    };
+    onChange == null ? void 0 : onChange([...value, newSession]);
+  };
+  const handleRemove = (index) => {
+    const newData = [...value];
+    newData.splice(index, 1);
+    onChange == null ? void 0 : onChange(newData);
+  };
+  const handleUpdate = (index, key, val) => {
+    const newData = [...value];
+    newData[index][key] = val;
+    onChange == null ? void 0 : onChange(newData);
+  };
+  const grouped = value.reduce((acc, curr) => {
+    acc[curr.dayOfWeek] = acc[curr.dayOfWeek] || [];
+    acc[curr.dayOfWeek].push(curr);
+    return acc;
+  }, {});
+  const getLabel = (day) => enum_daysOfWeek[day] || `Day ${day}`;
+  return /* @__PURE__ */ jsx7(Paper, { w: "100%", p: "md", children: /* @__PURE__ */ jsxs3(MyFlexColumn, { children: [
+    /* @__PURE__ */ jsx7(Center, { children: /* @__PURE__ */ jsx7(
+      MyDayOfWeekPicker,
+      {
+        value: selectedDays,
+        onChange: (days2) => {
+          const sorted = [...days2].sort((a, b) => a - b);
+          setSelectedDays(sorted);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(Divider, { my: "xs" }),
+    /* @__PURE__ */ jsx7(Center, { children: /* @__PURE__ */ jsx7(ScrollArea.Autosize, { h: "40vh", children: /* @__PURE__ */ jsx7(MyFlexColumn, { w: { base: "100%", sm: "70%" }, children: selectedDays.map((dayOfWeek) => {
+      var _a;
+      return /* @__PURE__ */ jsxs3(
+        Paper,
+        {
+          w: "100%",
+          p: "md",
+          bg: const_object_colors.mantineBackgroundBlueLight,
+          children: [
+            /* @__PURE__ */ jsxs3(Group2, { gap: "apart", children: [
+              /* @__PURE__ */ jsx7(Text2, { w: "70px", fw: 500, children: getLabel(dayOfWeek) }),
+              /* @__PURE__ */ jsx7(
+                Button5,
+                {
+                  color: "teal.5",
+                  leftSection: /* @__PURE__ */ jsx7(IconPlus4, { size: 14 }),
+                  onClick: () => handleAddSession(dayOfWeek),
+                  children: "Th\xEAm bu\u1ED5i"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx7(Divider, { my: "sm" }),
+            (_a = grouped[dayOfWeek]) == null ? void 0 : _a.map((item, indexInDay) => {
+              const globalIndex = value.findIndex(
+                (v) => v === item
+              );
+              return /* @__PURE__ */ jsxs3(
+                Group2,
+                {
+                  mt: "xs",
+                  gap: "xs",
+                  align: "flex-end",
+                  children: [
+                    /* @__PURE__ */ jsx7(
+                      NumberInput,
+                      {
+                        label: "Ti\u1EBFt b\u1EAFt \u0111\u1EA7u",
+                        value: item.startPeriod,
+                        onChange: (val) => handleUpdate(
+                          globalIndex,
+                          "startPeriod",
+                          val
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      NumberInput,
+                      {
+                        label: "S\u1ED1 ti\u1EBFt",
+                        value: item.numberOfPeriods,
+                        onChange: (val) => handleUpdate(
+                          globalIndex,
+                          "numberOfPeriods",
+                          val
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      NumberInput,
+                      {
+                        label: "S\u1ED1 ph\xFAt  ",
+                        readOnly: true,
+                        variant: "filled",
+                        value: item.durationMinutes
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      Button5,
+                      {
+                        variant: "light",
+                        color: "red",
+                        onClick: () => handleRemove(globalIndex),
+                        leftSection: /* @__PURE__ */ jsx7(IconTrash3, { size: 14 }),
+                        children: "X\xF3a bu\u1ED5i"
+                      }
+                    )
+                  ]
+                },
+                globalIndex
+              );
+            })
+          ]
+        },
+        dayOfWeek
+      );
+    }) }) }) })
+  ] }) });
+}
+
+export {
+  MyActionIcon,
+  MyButton,
+  MyButtonCreateUpdate,
+  MyButtonModal,
+  MyDayOfWeekPicker,
+  MyTextInput,
+  MyWeeklySessionSchedulerPicker
+};

package/dist/{chunk-NRFQDAYS.mjs → chunk-M6B6SXA3.mjs}

@@ -304,6 +304,10 @@ var utils_validator_validateCode = (value) => {
 };
 
 export {
+  U0MyValidateEmpty,
+  U0MyValidateEmail,
+  utils_validator_validateCode,
+  updateEnableList,
   U0DateToDDMMYYYString,
   utils_date_dateToDDMMYYYString,
   utils_date_formatToDateTimeStartEnd,
@@ -318,11 +322,7 @@ export {
   utils_currency_formatWithSuffix,
   utils_excel_exportExcel,
   utils_excel_download,
-  updateEnableList,
   utils_reactQuery_updateListItemInQuery,
   utils_time_convertTimeStringToSeconds,
-  utils_time_getCurrentTimeString,
-  U0MyValidateEmpty,
-  U0MyValidateEmail,
-  utils_validator_validateCode
+  utils_time_getCurrentTimeString
 };