@licklist/design 0.44.476-dev.13 → 0.44.476-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/dist/events/event-statistic-modal/EventStatisticModal.js +1 -1
  2. package/dist/iframe/order-process/components/BookingSummary/BookingSummary.d.ts +1 -1
  3. package/dist/iframe/order-process/components/BookingSummary/BookingSummary.d.ts.map +1 -1
  4. package/dist/iframe/order-process/components/BookingSummary/BookingSummary.js +1 -1
  5. package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.d.ts.map +1 -1
  6. package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.js +1 -1
  7. package/dist/iframe/order-process/components/BookingSummary/types/index.d.ts +1 -2
  8. package/dist/iframe/order-process/components/BookingSummary/types/index.d.ts.map +1 -1
  9. package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts +4 -0
  10. package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts.map +1 -1
  11. package/dist/iframe/order-process/components/BookingSummary/utils/index.js +1 -1
  12. package/dist/iframe/payment/order-items-table/OrderItemsTable.js +1 -1
  13. package/dist/iframe/payment/payment-form/PaymentForm.js +1 -1
  14. package/dist/index.d.ts +0 -1
  15. package/dist/index.d.ts.map +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/product-set/form/StepsControl.js +1 -1
  18. package/dist/sales/manual-booking/select-menu/SelectMenu.d.ts.map +1 -1
  19. package/dist/sales/manual-booking/select-menu/SelectMenu.js +1 -1
  20. package/dist/sales/notes/NotesTableRow.d.ts.map +1 -1
  21. package/dist/sales/notes/NotesTableRow.js +1 -1
  22. package/dist/sales/notes/note-form/NoteForm.d.ts.map +1 -1
  23. package/dist/sales/notes/note-form/NoteForm.js +1 -1
  24. package/dist/setting/dashboard/snippets/card/SnippetCard.js +1 -1
  25. package/dist/styles/iframe-events/Event.scss +2 -0
  26. package/dist/styles/packages.scss +0 -1
  27. package/dist/styles/sales/Notes.scss +4 -0
  28. package/dist/table/TableHelperComponent.d.ts +3 -2
  29. package/dist/table/TableHelperComponent.d.ts.map +1 -1
  30. package/dist/table/index.d.ts +0 -1
  31. package/dist/table/index.d.ts.map +1 -1
  32. package/dist/table/utils/index.d.ts +0 -1
  33. package/dist/table/utils/index.d.ts.map +1 -1
  34. package/dist/table/utils/index.js +1 -1
  35. package/package.json +1 -2
  36. package/src/iframe/order-process/OrderProcess.stories.tsx +5 -2
  37. package/src/iframe/order-process/components/BookingSummary/BookingSummary.stories.tsx +2 -2
  38. package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx +13 -6
  39. package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx +12 -4
  40. package/src/iframe/order-process/components/BookingSummary/types/index.ts +1 -2
  41. package/src/iframe/order-process/components/BookingSummary/utils/index.ts +21 -0
  42. package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx +1 -9
  43. package/src/index.ts +0 -1
  44. package/src/product-set/form/StepsControl.tsx +1 -1
  45. package/src/sales/manual-booking/select-menu/SelectMenu.tsx +1 -3
  46. package/src/sales/notes/NotesTableRow.tsx +6 -11
  47. package/src/sales/notes/note-form/NoteForm.tsx +3 -21
  48. package/src/styles/iframe-events/Event.scss +2 -0
  49. package/src/styles/packages.scss +0 -1
  50. package/src/styles/sales/Notes.scss +4 -0
  51. package/src/table/Table.stories.tsx +1 -127
  52. package/src/table/TableHelperComponent.tsx +1 -3
  53. package/src/table/index.ts +0 -1
  54. package/src/table/utils/index.ts +0 -2
  55. package/dist/customers/components/filter/CustomerFilter.d.ts +0 -14
  56. package/dist/customers/components/filter/CustomerFilter.d.ts.map +0 -1
  57. package/dist/customers/components/filter/CustomerFilter.js +0 -1
  58. package/dist/customers/components/filter/index.d.ts +0 -3
  59. package/dist/customers/components/filter/index.d.ts.map +0 -1
  60. package/dist/customers/components/index.d.ts +0 -2
  61. package/dist/customers/components/index.d.ts.map +0 -1
  62. package/dist/customers/index.d.ts +0 -2
  63. package/dist/customers/index.d.ts.map +0 -1
  64. package/dist/styles/customers/Filter.scss +0 -34
  65. package/dist/styles/customers/_index.scss +0 -1
  66. package/dist/table/ReactTableHelperComponent.d.ts +0 -12
  67. package/dist/table/ReactTableHelperComponent.d.ts.map +0 -1
  68. package/dist/table/ReactTableHelperComponent.js +0 -1
  69. package/dist/table/hooks/useTableQueryOptions.d.ts +0 -20
  70. package/dist/table/hooks/useTableQueryOptions.d.ts.map +0 -1
  71. package/dist/table/hooks/useTableQueryOptions.js +0 -1
  72. package/dist/table/types.d.ts +0 -41
  73. package/dist/table/types.d.ts.map +0 -1
  74. package/src/customers/components/filter/CustomerFilter.stories.tsx +0 -19
  75. package/src/customers/components/filter/CustomerFilter.tsx +0 -50
  76. package/src/customers/components/filter/index.ts +0 -2
  77. package/src/customers/components/index.ts +0 -1
  78. package/src/customers/index.ts +0 -1
  79. package/src/styles/customers/Filter.scss +0 -34
  80. package/src/styles/customers/_index.scss +0 -1
  81. package/src/table/ReactTableHelperComponent.tsx +0 -321
  82. package/src/table/hooks/useTableQueryOptions.ts +0 -49
  83. package/src/table/types.ts +0 -47
@@ -1,7 +1,8 @@
1
1
  import React, { useMemo } from "react";
2
2
  import { useTranslation } from "react-i18next";
3
+ import { Order } from "../../../../../../types";
3
4
  import { BookingSummaryProps } from "../../types";
4
- import { cartSumByOrderProducts } from "../../utils";
5
+ import { sanitizeFormValues, cartSumByOrderProducts } from "../../utils";
5
6
  import { SummaryTotalBlock } from "./components/SummaryTotalBlock";
6
7
 
7
8
  export const SummaryTotal = ({
@@ -14,10 +15,17 @@ export const SummaryTotal = ({
14
15
  "formValues" | "totalWithDiscount" | "transactionFee" | "isFreePayment"
15
16
  >) => {
16
17
  const { t } = useTranslation("Design");
17
- const orderProducts = useMemo(() => {
18
- const products = Object.values(formValues).filter(Boolean);
18
+ const [, orderProducts] = useMemo(() => {
19
+ const { numberOfPeople, ...orderProducts } = sanitizeFormValues(formValues);
19
20
 
20
- return products.filter((prod) => prod?.quantity !== 0);
21
+ const products = Object.keys(orderProducts).map(
22
+ (productId) => orderProducts[productId]
23
+ ) as Order[];
24
+
25
+ return [
26
+ numberOfPeople as number,
27
+ products.filter((prod) => prod.quantity !== 0),
28
+ ];
21
29
  }, [formValues]);
22
30
 
23
31
  const cartSum = isFreePayment
@@ -8,7 +8,7 @@ export type BookingSummaryProps = {
8
8
  date: string;
9
9
  menuSteps: MenuStep[];
10
10
  formValues: {
11
- [key: string]: Order;
11
+ [key: string]: Order | number;
12
12
  };
13
13
  totalWithDiscount?: number;
14
14
  isNotShownPeopleAmount?: boolean;
@@ -18,5 +18,4 @@ export type BookingSummaryProps = {
18
18
  isFreePayment?: boolean;
19
19
  productsWithErrors?: ProductQuantityCheckResponse["products"];
20
20
  isLoading?: boolean;
21
- peopleAmount: number;
22
21
  };
@@ -1,4 +1,25 @@
1
1
  import { Order } from "../../../../../types";
2
+ import { BookingSummaryProps } from "../types";
3
+
4
+ export const sanitizeFormValues = (
5
+ formValues: BookingSummaryProps["formValues"]
6
+ ) =>
7
+ Object.keys(formValues).reduce(
8
+ (
9
+ prevValues: {
10
+ [key: string]: Order | number;
11
+ },
12
+ currentKey: string
13
+ ) => {
14
+ const value = formValues[currentKey];
15
+ if (value) {
16
+ return { ...prevValues, [currentKey]: value };
17
+ }
18
+
19
+ return prevValues;
20
+ },
21
+ {}
22
+ );
2
23
 
3
24
  export const cartSumByOrderProducts = (orderProducts: Order[]) =>
4
25
  orderProducts.reduce((prevSumValue: number, product) => {
@@ -174,12 +174,7 @@ const OrderProcessContextProvider: React.FC = ({ children }) => {
174
174
 
175
175
  return (
176
176
  <OrderProcessContext.Provider
177
- value={{
178
- orderFormValues,
179
- setOrderFormValues,
180
- formValues,
181
- setFormValues,
182
- }}
177
+ value={{ orderFormValues, setOrderFormValues, formValues, setFormValues }}
183
178
  >
184
179
  {children}
185
180
  </OrderProcessContext.Provider>
@@ -408,8 +403,6 @@ const MENU_STEPS = [
408
403
 
409
404
  export function Default() {
410
405
  const { formValues, setFormValues } = useContext(OrderProcessContext);
411
- const [peopleAmount] = useState(0);
412
-
413
406
  return (
414
407
  <div className="snippet">
415
408
  <OrderProcessContextProvider>
@@ -441,7 +434,6 @@ export function Default() {
441
434
  <BookingSummary
442
435
  date="29 Sept 2022 at 09:00"
443
436
  menuSteps={menuSteps as any}
444
- peopleAmount={peopleAmount}
445
437
  formValues={formValues}
446
438
  totalWithDiscount={5}
447
439
  eventName="Glam!"
package/src/index.ts CHANGED
@@ -32,4 +32,3 @@ export * from "./typeahead-helper";
32
32
  export * from "./zone";
33
33
  export * from "./resource";
34
34
  export * from "./virtualized";
35
- export * from "./customers";
@@ -45,7 +45,7 @@ export function StepsControl({ isLoading }: StepsControlProps) {
45
45
 
46
46
  const getDefaultStepsValues = (): Step => ({
47
47
  id: null,
48
- name: `${t("step")} ${fields.length + 1}`,
48
+ name: "",
49
49
  productCategories: [],
50
50
  weight: 0,
51
51
  hasMap: false,
@@ -32,9 +32,7 @@ export const SelectMenu = ({
32
32
  <div>
33
33
  {(!menus || !menus.length) && !isLoading ? (
34
34
  <div className="no-results-content">
35
- <span className="no-results-found">
36
- {t("App:noResultsFoundForSelectedDate")}
37
- </span>
35
+ <span className="no-results-found">{t("App:noResultsFound")}</span>
38
36
  </div>
39
37
  ) : (
40
38
  <>
@@ -6,11 +6,7 @@ import { useTranslation } from "react-i18next";
6
6
  import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
7
7
  import { capitalize } from "lodash";
8
8
  import { DateTime } from "luxon";
9
- import {
10
- DATE_TIME_FORMAT,
11
- DATE_TIME_FULL_FORMAT,
12
- } from "@licklist/core/dist/Config";
13
- import { getClientTimeZone } from "@licklist/core/dist/Services";
9
+ import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
14
10
  import { ConfirmModal } from "../../modals";
15
11
  import { MenuButton } from "../../table";
16
12
  import { Icon } from "../../static";
@@ -26,11 +22,10 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
26
22
  const popoverId = useId();
27
23
  const [isOverlayVisibile, setIsOverlayVisible] = useState(false);
28
24
 
29
- const date = DateTime.fromFormat(note.updatedAt, DATE_TIME_FULL_FORMAT, {
30
- zone: "utc",
31
- })
32
- .setZone(getClientTimeZone())
33
- .toFormat(DATE_TIME_FORMAT);
25
+ const date = DateTime.fromFormat(
26
+ note.updatedAt,
27
+ DATE_TIME_FULL_FORMAT
28
+ ).toFormat(DATE_FORMAT);
34
29
 
35
30
  return (
36
31
  <tr onClick={onClick}>
@@ -38,7 +33,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
38
33
  <td className="note-author">
39
34
  {capitalize(note.user.firstName)} {capitalize(note.user.lastName)}
40
35
  </td>
41
- <td className="text-nowrap">{date}</td>
36
+ <td className="note-date">{date}</td>
42
37
  <td>
43
38
  <div className="controls">
44
39
  <span className="btn btn-sm eye">
@@ -19,12 +19,7 @@ export const NoteForm = ({
19
19
  onClose,
20
20
  defaultValues = { note: "" },
21
21
  }: NoteFormProps) => {
22
- const {
23
- register,
24
- handleSubmit,
25
- formState: { errors },
26
- setValue,
27
- } = useForm<FormModel>({
22
+ const { register, handleSubmit } = useForm<FormModel>({
28
23
  mode: "onChange",
29
24
  defaultValues,
30
25
  });
@@ -42,18 +37,9 @@ export const NoteForm = ({
42
37
  <Form.Control
43
38
  as="textarea"
44
39
  rows={5}
45
- isInvalid={!!errors.note}
46
40
  placeholder={t("writeYourNoteHere")}
47
- {...register("note", {
48
- required: {
49
- value: true,
50
- message: t("Validation:fieldRequired"),
51
- },
52
- })}
41
+ {...register("note")}
53
42
  />
54
- <Form.Control.Feedback type="invalid">
55
- {errors.note?.message}
56
- </Form.Control.Feedback>
57
43
  </Form.Group>
58
44
 
59
45
  <footer className="d-flex">
@@ -66,11 +52,7 @@ export const NoteForm = ({
66
52
  >
67
53
  {t("close")}
68
54
  </Button>
69
- <Button
70
- variant="danger"
71
- className="ml-2"
72
- onClick={() => setValue("note", "")}
73
- >
55
+ <Button type="reset" variant="danger" className="ml-2">
74
56
  {t("delete")}
75
57
  </Button>
76
58
  </footer>
@@ -91,9 +91,11 @@
91
91
 
92
92
  &__select-product {
93
93
  width: 10.5rem !important;
94
+ margin-top: 1rem;
94
95
  }
95
96
 
96
97
  &__unselect-product {
98
+ margin-top: 1rem;
97
99
  width: 10.5rem !important;
98
100
  background-color: $snippet-elements-button-color !important;
99
101
  color: $snippet-elements-button-background-color !important;
@@ -35,4 +35,3 @@
35
35
  @import "./skeleton";
36
36
  @import "./virtualized/";
37
37
  @import "./error";
38
- @import "./customers/";
@@ -35,6 +35,10 @@
35
35
  .note-author {
36
36
  min-width: 8rem;
37
37
  }
38
+
39
+ .note-date {
40
+ min-width: 6.5rem;
41
+ }
38
42
  }
39
43
 
40
44
  .notes-form {
@@ -1,7 +1,7 @@
1
1
  import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
2
2
  import { Meta, Story } from "@storybook/react";
3
3
  import { range } from "lodash";
4
- import React, { useRef } from "react";
4
+ import React from "react";
5
5
  import { Router } from "../auth/Router";
6
6
  import {
7
7
  FilterHelperComponent as FilterHelper,
@@ -19,13 +19,6 @@ import {
19
19
  TableHelperComponent as TableHelper,
20
20
  TableHelperComponentProps,
21
21
  } from "./TableHelperComponent";
22
- import {
23
- ReactTableHelperComponent as ReactTableHelper,
24
- ReactTableHelperComponentProps,
25
- ReactTableHelperRow,
26
- ReactTableHelperComponentRef,
27
- } from "./ReactTableHelperComponent";
28
- import { flexRender } from "./utils/index";
29
22
 
30
23
  export default {
31
24
  title: "Table",
@@ -52,40 +45,6 @@ export const PerPageHelperComponent: Story<PerPageHelperComponentProps> = (
52
45
  args
53
46
  ) => <PerPageHelper {...args} />;
54
47
 
55
- export const ReactTableHelperComponent: Story<
56
- ReactTableHelperComponentProps<any>
57
- > = (args) => (
58
- <>
59
- <Router>
60
- <ReactTableHelper {...args} />
61
- </Router>
62
- </>
63
- );
64
-
65
- const ComponentInsideRouter = (args) => {
66
- const ref = useRef<ReactTableHelperComponentRef>(null);
67
-
68
- return (
69
- <ReactTableHelper
70
- {...args}
71
- ref={ref}
72
- externalFilters={{ uniqField: "uniqField" }}
73
- />
74
- );
75
- };
76
-
77
- export const ReactTableHelperComponentWithColumns: Story<
78
- ReactTableHelperComponentProps<any>
79
- > = (args) => {
80
- return (
81
- <>
82
- <Router>
83
- <ComponentInsideRouter {...args} />
84
- </Router>
85
- </>
86
- );
87
- };
88
-
89
48
  const getPaginator = (perPage, items = 100) =>
90
49
  ({
91
50
  current_page: 1,
@@ -139,88 +98,3 @@ TableHelperComponent.args = {
139
98
  PaginationHelperComponent.args = {
140
99
  paginator: getPaginator(24, 100),
141
100
  };
142
-
143
- ReactTableHelperComponent.args = {
144
- isLoading: false,
145
- headers: [
146
- {
147
- title: "ID",
148
- key: "id",
149
- isSortable: true,
150
- width: "600px",
151
- },
152
- "Title",
153
- "Description",
154
- "Action",
155
- ],
156
- paginator: getPaginator(24, 10),
157
- renderItemFn: (row) => {
158
- return (
159
- <tr key={row.id}>
160
- <td>{row.id}</td>
161
- <td>{row.title}</td>
162
- <td>{row.description}</td>
163
- <td>ADD | REMOVE</td>
164
- </tr>
165
- );
166
- },
167
- striped: false,
168
- bordered: false,
169
- displayShowingSection: false,
170
- initialOptions: {
171
- page: 1,
172
- perPage: 10,
173
- sortKey: "id",
174
- sortDirection: "desc",
175
- filter: "",
176
- },
177
- };
178
-
179
- ReactTableHelperComponentWithColumns.args = {
180
- isLoading: false,
181
- columns: [
182
- {
183
- accessorKey: "id",
184
- header: () => "CustomHeader",
185
- },
186
- {
187
- accessorKey: "title",
188
- header: () => "SuperTitle",
189
- },
190
- {
191
- accessorKey: "description",
192
- header: () => "AwesomeDescription",
193
- },
194
- {
195
- accessorKey: "actions",
196
- header: () => "Incredible Actions",
197
- },
198
- ],
199
- sortableColumns: ["id"],
200
- paginator: getPaginator(24, 10),
201
- renderRow: (row: ReactTableHelperRow<any>) => {
202
- return (
203
- <tr key={row.id}>
204
- {row.getVisibleCells().map((cell) => {
205
- return (
206
- <td key={cell.id}>
207
- {cell.column.id === "actions"
208
- ? "ADD | REMOVE"
209
- : flexRender(cell.column.columnDef.cell, cell.getContext())}
210
- </td>
211
- );
212
- })}
213
- </tr>
214
- );
215
- },
216
- striped: false,
217
- bordered: false,
218
- displayShowingSection: false,
219
- initialOptions: {
220
- page: 1,
221
- perPage: 10,
222
- sortKey: "id",
223
- sortDirection: "desc",
224
- filter: "",
225
- },
226
- };
@@ -14,7 +14,6 @@ import { FilterHelperComponent } from "./FilterHelperComponent";
14
14
  import { PaginationHelperComponent } from "./PaginationHelperComponent";
15
15
  import { PerPageHelperComponent } from "./PerPageHelperComponent";
16
16
  import { getFilterOptionsValue } from "./utils";
17
- import { ExtendedTableOptions } from "./types";
18
17
 
19
18
  export interface TableHelperComponentProps {
20
19
  headers: ITableHeader[];
@@ -32,6 +31,7 @@ export interface TableHelperComponentProps {
32
31
  initialOptions?: Partial<ITableProps>;
33
32
  }
34
33
 
34
+ export type ExtendedTableOptions = ITableProps & { [key: string]: any };
35
35
  // @TODO Refactor? component to get less complexity
36
36
  // with query filter params. Now External filters use only in
37
37
  // one place of Dashboard.
@@ -42,8 +42,6 @@ export interface TableHelperComponentProps {
42
42
 
43
43
  /**
44
44
  * TableHelperComponent
45
- * @deprecated use new ReactTableHelperComponent
46
- * for default tables
47
45
  * @param props
48
46
  * @constructor
49
47
  */
@@ -4,4 +4,3 @@ export * from "./PerPageHelperComponent";
4
4
  export * from "./StaticTable";
5
5
  export * from "./TableHelperComponent";
6
6
  export * from "./MenuButton";
7
- export * from "./ReactTableHelperComponent";
@@ -1,8 +1,6 @@
1
1
  import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
2
2
  import TableService from "@licklist/plugins/dist/services/Table/TableService";
3
3
 
4
- export { flexRender } from "@tanstack/react-table";
5
-
6
4
  const DEFAULT_QUERY_VALUES: { [key in keyof ITableProps]: string | number } = {
7
5
  page: TableService.DEFAULT_PAGE,
8
6
  perPage: TableService.DEFAULT_PER_PAGE,
@@ -1,14 +0,0 @@
1
- /// <reference types="react" />
2
- declare type CustomerFilterValues = {
3
- first_name: string;
4
- last_name: string;
5
- email: string;
6
- phone: string;
7
- };
8
- export interface CustomerFilterProps {
9
- values: CustomerFilterValues;
10
- onChange: (values: CustomerFilterValues) => void;
11
- }
12
- export declare const CustomerFilter: ({ values, onChange }: CustomerFilterProps) => JSX.Element;
13
- export {};
14
- //# sourceMappingURL=CustomerFilter.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CustomerFilter.d.ts","sourceRoot":"","sources":["../../../../src/customers/components/filter/CustomerFilter.tsx"],"names":[],"mappings":";AAKA,aAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AASF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,cAAc,yBAA0B,mBAAmB,gBAyBvE,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=e(require("react")),a=require("react-i18next"),s=require("../../../static/TextField.js"),i=e(require("clsx")),n={first_name:"firstName",last_name:"lastName",email:"email",phone:"phone"};exports.CustomerFilter=function(e){var l=e.values,u=e.onChange,c=a.useTranslation(["Design"]).t;return r.createElement("div",{className:"customers-filter d-flex"},r.createElement("div",{className:"d-flex customers-filter-items"},Object.keys(n).map((function(e){var a=c(n[e]);return r.createElement(s.TextField,{key:e,className:i("mb-0"),type:"text",label:a,value:l[e],onChange:function(r){var a;return u(t.__assign(t.__assign({},l),((a={})[e]=r.target.value,a)))}})}))))};
@@ -1,3 +0,0 @@
1
- export { CustomerFilter } from "./CustomerFilter";
2
- export type { CustomerFilterProps } from "./CustomerFilter";
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/customers/components/filter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from "./filter";
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/customers/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from "./components";
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/customers/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
@@ -1,34 +0,0 @@
1
- .customers-filter {
2
- gap: 0.5rem;
3
-
4
- @include media-breakpoint-down(sm) {
5
- label {
6
- font-size: 0.8rem;
7
- }
8
- }
9
-
10
- @include media-breakpoint-up(md) {
11
- label {
12
- font-size: 0.9rem;
13
- }
14
- }
15
-
16
- @include media-breakpoint-up(lg) {
17
- label {
18
- font-size: 1rem;
19
- }
20
- }
21
-
22
- @include media-breakpoint-down(lg) {
23
- flex-direction: column;
24
- }
25
-
26
- .customers-filter-items {
27
- gap: 0.5rem;
28
-
29
- @include media-breakpoint-down(xs) {
30
- flex-direction: column;
31
- gap: 0rem;
32
- }
33
- }
34
- }
@@ -1 +0,0 @@
1
- @import "./Filter.scss";
@@ -1,12 +0,0 @@
1
- import { Ref, ReactElement } from "react";
2
- import { TableComponentProps, TableComponentPropsWithOldTableData, TableComponentPropsWithReactTableData, ExtendedTableOptions } from "./types";
3
- export type { ReactTableHelperRow } from "./types";
4
- export declare type ReactTableHelperComponentProps<T extends object> = TableComponentProps<T> & (TableComponentPropsWithOldTableData<T> | TableComponentPropsWithReactTableData<T>);
5
- export declare type ReactTableHelperComponentRef = {
6
- options: ExtendedTableOptions | null;
7
- };
8
- declare const ReactTableHelperComponent: <T extends object>(props: ReactTableHelperComponentProps<T> & {
9
- ref?: Ref<ReactTableHelperComponentRef>;
10
- }) => ReactElement;
11
- export { ReactTableHelperComponent };
12
- //# sourceMappingURL=ReactTableHelperComponent.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ReactTableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/ReactTableHelperComponent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,GAAG,EACH,YAAY,EACb,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,mBAAmB,EACnB,mCAAmC,EACnC,qCAAqC,EAErC,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,oBAAY,8BAA8B,CAAC,CAAC,SAAS,MAAM,IACzD,mBAAmB,CAAC,CAAC,CAAC,GACpB,CACI,mCAAmC,CAAC,CAAC,CAAC,GACtC,qCAAqC,CAAC,CAAC,CAAC,CAC3C,CAAC;AAEN,oBAAY,4BAA4B,GAAG;IACzC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACtC,CAAC;AA4QF,QAAA,MAAM,yBAAyB;UAIrB,IAAI,4BAA4B,CAAC;MAEtC,YAAY,CAAC;AAElB,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),s=require("react-bootstrap"),l=e(require("clsx")),u=require("lodash"),c=require("./FilterHelperComponent.js"),d=require("./PaginationHelperComponent.js"),p=e(require("@licklist/plugins/dist/services/Table/TableService")),m=require("./PerPageHelperComponent.js"),g=require("@tanstack/react-table");require("./utils/index.js");var f=require("./hooks/useTableQueryOptions.js");var _=r.forwardRef((function(e,_){var v,C,y=e.paginator,h=e.headers,E=e.renderItemFn,b=e.isLoading,S=e.striped,q=void 0===S||S,w=e.bordered,R=void 0===w||w,P=e.displaySearchBar,k=void 0===P||P,F=e.displayPerPageSelect,H=void 0===F||F,T=e.displayShowingSection,x=void 0===T||T,L=e.externalFilters,D=void 0===L?{}:L,O=e.initialOptions,j=void 0===O?{}:O,N=e.columns,I=e.sortableColumns,K=void 0===I?[]:I,M=e.renderRow,A=t.__rest(e,["paginator","headers","renderItemFn","isLoading","striped","bordered","displaySearchBar","displayPerPageSelect","displayShowingSection","externalFilters","initialOptions","columns","sortableColumns","renderRow"]),U=i.useLocation().pathname,B=f.useTableQueryOptions({initialOptions:j,externalFilters:D}),G=B.sortKey,Q=B.sortDirection,V=B.options,z=B.setOptions,J=B.optionsCache,W=B.setOptionsCache,X=B.cachedExternalFilters,Y=B.setCachedExternalFilters,Z=r.useMemo((function(){return N||h?N&&!h?N.map((function(e){var r=e.accessorKey,n=K.includes(r);return t.__assign(t.__assign({},e),{meta:{className:p.getHeaderClasses({isSortable:n,key:r,title:r},G,Q),onClick:n?function(){return re(r)}:void 0}})})):h.map((function(e){return"string"==typeof e?{accessorKey:e.toLowerCase(),header:function(){return e},meta:{className:p.getHeaderClasses(e,G,Q)}}:{accessorKey:(null==e?void 0:e.key)||e.title.toLowerCase(),header:function(){return e.title},meta:{onClick:function(){return e.isSortable&&re(e.key)},className:p.getHeaderClasses(e,G,Q),style:{width:(null==e?void 0:e.width)||"auto"}}}})):[]}),[h,N,G,Q,K]),$=g.useReactTable(t.__assign({data:(null==y?void 0:y.data)||[],columns:Z,getCoreRowModel:g.getCoreRowModel()},A)),ee=$.getHeaderGroups,te=$.getRowModel;r.useImperativeHandle(_,(function(){return{options:V}})),r.useEffect((function(){if(!u.isEqual(J,V)||!u.isEqual(X,D)){W(V),Y(D);var e=new URLSearchParams(t.__assign(t.__assign({},V),D));a.redirectTo([U,e.toString()].join("?"))}}),[U,V,D]);var re=function(e){var r=p.DEFAULT_SORT_DIRECTION;z(G===e?function(n){return r=p.getSortDirection(n.sortDirection,r),t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})}:function(n){return t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})})};return n.createElement("div",{className:l("table-helper",b?"py-5":"py-1")},n.createElement(o.LoaderIndicator,{isLoaded:!b},n.createElement(s.Row,null,n.createElement(s.Col,null,H&&n.createElement(m.PerPageHelperComponent,{onChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(v=null==y?void 0:y.per_page)&&void 0!==v?v:p.DEFAULT_PER_PAGE})),n.createElement(s.Col,null,k&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){z((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(C=V.filter)&&void 0!==C?C:""}))),n.createElement(s.Row,null,n.createElement(s.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(s.Table,{striped:q,bordered:R,hover:!0},n.createElement("thead",null,ee().map((function(e){return n.createElement("tr",{key:e.id},e.headers.map((function(e){var t=e.column.columnDef.meta;return n.createElement("th",{key:e.id,className:null==t?void 0:t.className,onClick:null==t?void 0:t.onClick,style:null==t?void 0:t.style},g.flexRender(e.column.columnDef.header,e.getContext()))})))}))),n.createElement("tbody",null,te().rows.map((function(e,t){return E?E(e.original,t):M(e)}))))))),n.createElement(d.PaginationHelperComponent,{displayShowingSection:x,paginator:y,onPageChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))}));exports.ReactTableHelperComponent=_;
@@ -1,20 +0,0 @@
1
- /// <reference types="react" />
2
- import { TableComponentProps, ExtendedTableOptions } from "../types";
3
- export declare const useTableQueryOptions: <T extends object>({ initialOptions, externalFilters, }: Pick<TableComponentProps<T>, "initialOptions" | "externalFilters">) => {
4
- page: number;
5
- perPage: number;
6
- sortKey: string;
7
- sortDirection: string;
8
- filter: string;
9
- optionsCache: ExtendedTableOptions;
10
- setOptionsCache: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
11
- options: ExtendedTableOptions;
12
- setOptions: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
13
- cachedExternalFilters: {
14
- [key: string]: any;
15
- };
16
- setCachedExternalFilters: import("react").Dispatch<import("react").SetStateAction<{
17
- [key: string]: any;
18
- }>>;
19
- };
20
- //# sourceMappingURL=useTableQueryOptions.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTableQueryOptions.d.ts","sourceRoot":"","sources":["../../../src/table/hooks/useTableQueryOptions.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CA2ChC,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),i=(e(r),e(require("@licklist/plugins/dist/hooks/Query/useQuery"))),s=require("../utils/index.js");exports.useTableQueryOptions=function(e){var o=e.initialOptions,a=void 0===o?{}:o,n=e.externalFilters,l=void 0===n?{}:n,u=i(),p=Number(s.getFilterOptionsValue(u,a,"page")),c=Number(s.getFilterOptionsValue(u,a,"perPage")),g=String(s.getFilterOptionsValue(u,a,"sortKey")),d=String(s.getFilterOptionsValue(u,a,"sortDirection")),O=String(s.getFilterOptionsValue(u,a,"filter")),f=t.__read(r.useState(),2),y=f[0],F=f[1],_=t.__read(r.useState({page:p,perPage:c,sortKey:g,sortDirection:d,filter:O}),2),b=_[0],x=_[1],S=t.__read(r.useState(l),2);return{page:p,perPage:c,sortKey:g,sortDirection:d,filter:O,optionsCache:y,setOptionsCache:F,options:b,setOptions:x,cachedExternalFilters:S[0],setCachedExternalFilters:S[1]}};
@@ -1,41 +0,0 @@
1
- import { ReactNode, CSSProperties } from "react";
2
- import { TableOptions, ColumnDef, Row as TableRow } from "@tanstack/react-table";
3
- import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
4
- import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
5
- import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
6
- export declare type ReactTableHelperRow<T extends object> = TableRow<T>;
7
- export declare type ExtendedTableOptions = ITableProps & {
8
- [key: string]: any;
9
- };
10
- export interface TableComponentProps<T extends object> extends Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel"> {
11
- paginator?: ILengthAwarePaginator<T>;
12
- isLoading?: boolean;
13
- striped?: boolean;
14
- bordered?: boolean;
15
- displaySearchBar?: boolean;
16
- displayPerPageSelect?: boolean;
17
- displayShowingSection?: boolean;
18
- externalFilters?: {
19
- [key: string]: any;
20
- };
21
- initialOptions?: Partial<ITableProps>;
22
- sortableColumns?: string[];
23
- }
24
- export declare type TableColumnMeta = {
25
- onClick?: () => void;
26
- className?: string;
27
- style?: CSSProperties;
28
- };
29
- export declare type TableComponentPropsWithOldTableData<T extends object> = {
30
- headers: ITableHeader[];
31
- renderItemFn: (row: T, index: number) => void;
32
- columns?: never;
33
- renderRow?: never;
34
- };
35
- export declare type TableComponentPropsWithReactTableData<T extends object> = {
36
- headers?: never;
37
- renderItemFn?: never;
38
- columns: ColumnDef<T, any>[];
39
- renderRow: (row: ReactTableHelperRow<T>) => ReactNode;
40
- };
41
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,YAAY,EACZ,SAAS,EACT,GAAG,IAAI,QAAQ,EAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAElF,oBAAY,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEhE,oBAAY,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC;AAExE,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,CACnD,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,iBAAiB,CAAC;IACrE,SAAS,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,oBAAY,mCAAmC,CAAC,CAAC,SAAS,MAAM,IAAI;IAClE,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEF,oBAAY,qCAAqC,CAAC,CAAC,SAAS,MAAM,IAAI;IACpE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CACvD,CAAC"}
@@ -1,19 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Meta, Story } from "@storybook/react";
3
- import { CustomerFilter, CustomerFilterProps } from "./CustomerFilter";
4
-
5
- export default {
6
- title: "Customers/Filter",
7
- component: CustomerFilter,
8
- } as Meta;
9
-
10
- export const Default: Story<CustomerFilterProps> = () => {
11
- const [values, setValues] = useState({
12
- first_name: "",
13
- last_name: "",
14
- email: "",
15
- phone: "",
16
- });
17
-
18
- return <CustomerFilter values={values} onChange={setValues} />;
19
- };