@licklist/design 0.44.485-dev.93 → 0.44.485-dev.95
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.
- package/dist/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.d.ts +5 -1
- package/dist/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.d.ts.map +1 -1
- package/dist/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.js +1 -1
- package/dist/sales/manual-booking/select-event/SelectEvent.d.ts +3 -3
- package/dist/sales/manual-booking/select-event/SelectEvent.d.ts.map +1 -1
- package/dist/sales/manual-booking/select-menu/SelectMenu.d.ts +3 -3
- package/dist/sales/manual-booking/select-menu/SelectMenu.d.ts.map +1 -1
- package/dist/sales/manual-booking/select-menu/components/MenuButton.d.ts +3 -3
- package/dist/sales/manual-booking/select-menu/components/MenuButton.d.ts.map +1 -1
- package/dist/styles/resources-blocking/_index.scss +38 -1
- package/package.json +1 -1
- package/src/iframe/back-button/index.ts +0 -1
- package/src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx +14 -10
- package/src/sales/manual-booking/select-event/SelectEvent.tsx +3 -3
- package/src/sales/manual-booking/select-menu/SelectMenu.tsx +3 -3
- package/src/sales/manual-booking/select-menu/components/MenuButton.tsx +3 -3
- package/src/styles/resources-blocking/_index.scss +38 -1
- package/dist/assets/dashboard/blockingClock.png +0 -0
- package/dist/provider/resources-blocking-modal/ResourcesBlockingModal.d.ts +0 -12
- package/dist/provider/resources-blocking-modal/ResourcesBlockingModal.d.ts.map +0 -1
- package/dist/provider/resources-blocking-modal/index.d.ts +0 -2
- package/dist/provider/resources-blocking-modal/index.d.ts.map +0 -1
- package/src/assets/dashboard/blockingClock.png +0 -0
- package/src/provider/resources-blocking-modal/ResourcesBlockingModal.stories.tsx +0 -51
- package/src/provider/resources-blocking-modal/ResourcesBlockingModal.tsx +0 -134
- package/src/provider/resources-blocking-modal/index.ts +0 -1
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
interface RecurrenceIntervalAndFrequencyInputProps {
|
|
3
3
|
disabled?: boolean;
|
|
4
4
|
minDate?: string;
|
|
5
|
+
startDateLabel?: string;
|
|
6
|
+
startTimeLabel?: string;
|
|
7
|
+
endDateLabel?: string;
|
|
8
|
+
endTimeLabel?: string;
|
|
5
9
|
}
|
|
6
|
-
declare function RecurrenceIntervalAndFrequencyInput({ disabled, minDate, }: RecurrenceIntervalAndFrequencyInputProps): JSX.Element;
|
|
10
|
+
declare function RecurrenceIntervalAndFrequencyInput({ disabled, minDate, startDateLabel, startTimeLabel, endDateLabel, endTimeLabel, }: RecurrenceIntervalAndFrequencyInputProps): JSX.Element;
|
|
7
11
|
export default RecurrenceIntervalAndFrequencyInput;
|
|
8
12
|
//# sourceMappingURL=RecurrenceIntervalAndFrequencyInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecurrenceIntervalAndFrequencyInput.d.ts","sourceRoot":"","sources":["../../src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx"],"names":[],"mappings":";AAMA,UAAU,wCAAwC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"RecurrenceIntervalAndFrequencyInput.d.ts","sourceRoot":"","sources":["../../src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx"],"names":[],"mappings":";AAMA,UAAU,wCAAwC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,mCAAmC,CAAC,EAC3C,QAAgB,EAChB,OAAO,EACP,cAAc,EACd,cAAc,EACd,YAAY,EACZ,YAAY,GACb,EAAE,wCAAwC,eA8F1C;AAED,eAAe,mCAAmC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),l=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-i18next"),n=require("react-bootstrap"),o=require("react-hook-form");exports.default=function(e){var a,i,m=e.disabled,s=void 0!==m&&m,u=e.minDate,d=e.startDateLabel,c=e.startTimeLabel,v=e.endDateLabel,b=e.endTimeLabel,p=r.useTranslation(["Design","Notification","App"]).t,E=o.useFormContext(),g=E.getValues,D=E.setValue,F=E.formState.errors,f=E.register,C=g("startDate"),h=g("endDate"),T=g("startTime"),_=g("endTime");return l.createElement(l.Fragment,null,l.createElement(n.Row,{className:"align-items-center"},l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=d?d:p("Design:fromDate")),l.createElement(n.Form.Control,t.__assign({type:"date"},f("startDate",{required:!0}),{defaultValue:C,className:C&&"date-input-with-value",disabled:s,onChange:function(e){var t=e.target.value;D("startDate",t)},min:u,isInvalid:Boolean(F.startDate)})),l.createElement(n.Form.Control.Feedback,{type:"invalid"},null===(a=F.startDate)||void 0===a?void 0:a.message))),l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=v?v:p("Design:toDate")),l.createElement(n.Form.Control,t.__assign({type:"date"},f("endDate",{required:!0}),{defaultValue:h,className:h&&"date-input-with-value",disabled:s,onChange:function(e){var t=e.target.value;D("endDate",t)},min:C||void 0,isInvalid:Boolean(F.endDate)})),l.createElement(n.Form.Control.Feedback,{type:"invalid"},null===(i=F.endDate)||void 0===i?void 0:i.message)))),l.createElement(n.Row,{className:"align-items-center"},l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=c?c:p("Design:availableFrom")),l.createElement(n.Form.Control,t.__assign({type:"time"},f("startTime",{required:!1}),{placeholder:"hh:mm",defaultValue:T,disabled:s,isInvalid:Boolean(F.startTime)})))),l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=b?b:p("Design:availableTo")),l.createElement(n.Form.Control,t.__assign({type:"time"},f("endTime",{required:!1}),{placeholder:"hh:mm",defaultValue:_,disabled:s,isInvalid:Boolean(F.endTime)}))))))};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { ManualBookingEvent } from "@licklist/plugins/dist/types/context/sale/menuSteps";
|
|
3
3
|
interface SelectEventProps {
|
|
4
|
-
selectEvent: (event:
|
|
4
|
+
selectEvent: (event: ManualBookingEvent) => void;
|
|
5
5
|
isLoading: boolean;
|
|
6
|
-
events?:
|
|
6
|
+
events?: ManualBookingEvent[] | null;
|
|
7
7
|
}
|
|
8
8
|
export declare const SelectEvent: ({ events, isLoading, selectEvent, }: SelectEventProps) => JSX.Element;
|
|
9
9
|
export declare const EventCardManualBooking: ({ coverImageUrl, title, rrule, startAt, endAt, isSoldOut, onClick, }: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectEvent.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/select-event/SelectEvent.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SelectEvent.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/select-event/SelectEvent.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qDAAqD,CAAC;AAIzF,UAAU,gBAAgB;IACxB,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,WAAW,wCAIrB,gBAAgB,gBA6ClB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;iBA4ClC,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
|
|
3
3
|
export type SelectMenuProps = {
|
|
4
4
|
isLoading?: boolean;
|
|
5
|
-
menus?:
|
|
6
|
-
onSelectMenu?: (menu:
|
|
5
|
+
menus?: ManualBookingMenu[] | null;
|
|
6
|
+
onSelectMenu?: (menu: ManualBookingMenu) => void;
|
|
7
7
|
noMenusMessage?: string;
|
|
8
8
|
};
|
|
9
9
|
export declare const SelectMenu: ({ isLoading, menus, onSelectMenu, noMenusMessage, }: SelectMenuProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/select-menu/SelectMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/select-menu/SelectMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAIxF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,wDAKpB,eAAe,gBA4CjB,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
|
|
3
3
|
export type MenuButtonProps = {
|
|
4
|
-
menu:
|
|
5
|
-
onSelectMenu?: (menu:
|
|
4
|
+
menu: ManualBookingMenu;
|
|
5
|
+
onSelectMenu?: (menu: ManualBookingMenu) => void;
|
|
6
6
|
};
|
|
7
7
|
export declare const MenuButton: ({ menu, onSelectMenu }: MenuButtonProps) => JSX.Element;
|
|
8
8
|
//# sourceMappingURL=MenuButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../../../src/sales/manual-booking/select-menu/components/MenuButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../../../src/sales/manual-booking/select-menu/components/MenuButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAExF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,UAAU,2BAA4B,eAAe,gBAoBjE,CAAC"}
|
|
@@ -7,6 +7,37 @@
|
|
|
7
7
|
overflow: auto;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.reccurrence-interval-container {
|
|
11
|
+
.form-group {
|
|
12
|
+
margin-bottom: 0.5rem;
|
|
13
|
+
.form-control {
|
|
14
|
+
height: 1.5rem;
|
|
15
|
+
font-size: 0.625rem;
|
|
16
|
+
border: 2px solid #dcdcdc;
|
|
17
|
+
border-radius: 0.5rem;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.custom-checkbox .custom-control-label::before {
|
|
23
|
+
width: 1.5rem;
|
|
24
|
+
height: 1.5rem;
|
|
25
|
+
border-radius: 0.5rem;
|
|
26
|
+
border: 2px solid #0e8ce2;
|
|
27
|
+
margin-top: -0.3rem;
|
|
28
|
+
}
|
|
29
|
+
.custom-checkbox .custom-control-label::after {
|
|
30
|
+
width: 1.5rem;
|
|
31
|
+
height: 1.5rem;
|
|
32
|
+
top: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.custom-control-label {
|
|
36
|
+
padding-left: 0.5rem;
|
|
37
|
+
font-weight: 400;
|
|
38
|
+
font-size: 0.875rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
10
41
|
label,
|
|
11
42
|
header,
|
|
12
43
|
button {
|
|
@@ -14,6 +45,10 @@
|
|
|
14
45
|
font-size: 0.875rem;
|
|
15
46
|
}
|
|
16
47
|
|
|
48
|
+
.title {
|
|
49
|
+
margin-left: 0.25rem;
|
|
50
|
+
}
|
|
51
|
+
|
|
17
52
|
header {
|
|
18
53
|
display: flex;
|
|
19
54
|
justify-content: space-between;
|
|
@@ -46,6 +81,7 @@
|
|
|
46
81
|
display: flex;
|
|
47
82
|
align-items: center;
|
|
48
83
|
gap: 1rem;
|
|
84
|
+
margin-bottom: 1rem;
|
|
49
85
|
|
|
50
86
|
span {
|
|
51
87
|
font-weight: 600;
|
|
@@ -58,6 +94,7 @@
|
|
|
58
94
|
justify-content: space-between;
|
|
59
95
|
align-items: center;
|
|
60
96
|
gap: 0.25rem;
|
|
97
|
+
margin-bottom: 0.5rem;
|
|
61
98
|
}
|
|
62
99
|
|
|
63
100
|
.text-input.form-group {
|
|
@@ -90,7 +127,7 @@
|
|
|
90
127
|
font-weight: 600;
|
|
91
128
|
}
|
|
92
129
|
|
|
93
|
-
.
|
|
130
|
+
.resource {
|
|
94
131
|
margin-bottom: 0.25rem;
|
|
95
132
|
}
|
|
96
133
|
}
|
package/package.json
CHANGED
|
@@ -7,11 +7,19 @@ import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
|
|
|
7
7
|
interface RecurrenceIntervalAndFrequencyInputProps {
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
minDate?: string;
|
|
10
|
+
startDateLabel?: string;
|
|
11
|
+
startTimeLabel?: string;
|
|
12
|
+
endDateLabel?: string;
|
|
13
|
+
endTimeLabel?: string;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
function RecurrenceIntervalAndFrequencyInput({
|
|
13
17
|
disabled = false,
|
|
14
18
|
minDate,
|
|
19
|
+
startDateLabel,
|
|
20
|
+
startTimeLabel,
|
|
21
|
+
endDateLabel,
|
|
22
|
+
endTimeLabel,
|
|
15
23
|
}: RecurrenceIntervalAndFrequencyInputProps) {
|
|
16
24
|
const { t } = useTranslation(["Design", "Notification", "App"]);
|
|
17
25
|
|
|
@@ -32,7 +40,7 @@ function RecurrenceIntervalAndFrequencyInput({
|
|
|
32
40
|
<Row className="align-items-center">
|
|
33
41
|
<Col xs={12} sm={6}>
|
|
34
42
|
<Form.Group>
|
|
35
|
-
<Form.Label>{t("Design:fromDate")}</Form.Label>
|
|
43
|
+
<Form.Label>{startDateLabel ?? t("Design:fromDate")}</Form.Label>
|
|
36
44
|
<Form.Control
|
|
37
45
|
type="date"
|
|
38
46
|
{...register("startDate", { required: true })}
|
|
@@ -53,7 +61,7 @@ function RecurrenceIntervalAndFrequencyInput({
|
|
|
53
61
|
|
|
54
62
|
<Col xs={12} sm={6}>
|
|
55
63
|
<Form.Group>
|
|
56
|
-
<Form.Label>{t("Design:toDate")}</Form.Label>
|
|
64
|
+
<Form.Label>{endDateLabel ?? t("Design:toDate")}</Form.Label>
|
|
57
65
|
<Form.Control
|
|
58
66
|
type="date"
|
|
59
67
|
{...register("endDate", { required: true })}
|
|
@@ -76,16 +84,15 @@ function RecurrenceIntervalAndFrequencyInput({
|
|
|
76
84
|
<Row className="align-items-center">
|
|
77
85
|
<Col xs={12} sm={6}>
|
|
78
86
|
<Form.Group>
|
|
79
|
-
<Form.Label>
|
|
87
|
+
<Form.Label>
|
|
88
|
+
{startTimeLabel ?? t("Design:availableFrom")}
|
|
89
|
+
</Form.Label>
|
|
80
90
|
<Form.Control
|
|
81
91
|
type="time"
|
|
82
92
|
{...register("startTime", { required: false })}
|
|
83
93
|
placeholder="hh:mm"
|
|
84
94
|
defaultValue={startTime}
|
|
85
95
|
disabled={disabled}
|
|
86
|
-
onChange={({ target: { value } }) => {
|
|
87
|
-
setValue("startTime", `${value}:00`);
|
|
88
|
-
}}
|
|
89
96
|
isInvalid={Boolean(errors.startTime)}
|
|
90
97
|
/>
|
|
91
98
|
</Form.Group>
|
|
@@ -93,16 +100,13 @@ function RecurrenceIntervalAndFrequencyInput({
|
|
|
93
100
|
|
|
94
101
|
<Col xs={12} sm={6}>
|
|
95
102
|
<Form.Group>
|
|
96
|
-
<Form.Label>{t("Design:availableTo")}</Form.Label>
|
|
103
|
+
<Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
|
|
97
104
|
<Form.Control
|
|
98
105
|
type="time"
|
|
99
106
|
{...register("endTime", { required: false })}
|
|
100
107
|
placeholder="hh:mm"
|
|
101
108
|
defaultValue={endTime}
|
|
102
109
|
disabled={disabled}
|
|
103
|
-
onChange={({ target: { value } }) => {
|
|
104
|
-
setValue("endTime", `${value}:59`);
|
|
105
|
-
}}
|
|
106
110
|
isInvalid={Boolean(errors.endTime)}
|
|
107
111
|
/>
|
|
108
112
|
</Form.Group>
|
|
@@ -4,14 +4,14 @@ import { Card, Form } from "react-bootstrap";
|
|
|
4
4
|
import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
|
|
5
5
|
import { rrulestr } from "rrule";
|
|
6
6
|
import { DateTime } from "luxon";
|
|
7
|
-
import {
|
|
7
|
+
import { ManualBookingEvent } from "@licklist/plugins/dist/types/context/sale/menuSteps";
|
|
8
8
|
import { formatToDays, formatToHours } from "../formatDays";
|
|
9
9
|
import { BlockLoader } from "../../../static/loader";
|
|
10
10
|
|
|
11
11
|
interface SelectEventProps {
|
|
12
|
-
selectEvent: (event:
|
|
12
|
+
selectEvent: (event: ManualBookingEvent) => void;
|
|
13
13
|
isLoading: boolean;
|
|
14
|
-
events?:
|
|
14
|
+
events?: ManualBookingEvent[] | null;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export const SelectEvent = ({
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
3
|
import { Form } from "react-bootstrap";
|
|
4
|
-
import {
|
|
4
|
+
import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
|
|
5
5
|
import { BlockLoader } from "../../../static/loader";
|
|
6
6
|
import { MenuButton } from "./components/MenuButton";
|
|
7
7
|
|
|
8
8
|
export type SelectMenuProps = {
|
|
9
9
|
isLoading?: boolean;
|
|
10
|
-
menus?:
|
|
11
|
-
onSelectMenu?: (menu:
|
|
10
|
+
menus?: ManualBookingMenu[] | null;
|
|
11
|
+
onSelectMenu?: (menu: ManualBookingMenu) => void;
|
|
12
12
|
noMenusMessage?: string;
|
|
13
13
|
};
|
|
14
14
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
|
|
3
3
|
|
|
4
4
|
export type MenuButtonProps = {
|
|
5
|
-
menu:
|
|
6
|
-
onSelectMenu?: (menu:
|
|
5
|
+
menu: ManualBookingMenu;
|
|
6
|
+
onSelectMenu?: (menu: ManualBookingMenu) => void;
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export const MenuButton = ({ menu, onSelectMenu }: MenuButtonProps) => {
|
|
@@ -7,6 +7,37 @@
|
|
|
7
7
|
overflow: auto;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.reccurrence-interval-container {
|
|
11
|
+
.form-group {
|
|
12
|
+
margin-bottom: 0.5rem;
|
|
13
|
+
.form-control {
|
|
14
|
+
height: 1.5rem;
|
|
15
|
+
font-size: 0.625rem;
|
|
16
|
+
border: 2px solid #dcdcdc;
|
|
17
|
+
border-radius: 0.5rem;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.custom-checkbox .custom-control-label::before {
|
|
23
|
+
width: 1.5rem;
|
|
24
|
+
height: 1.5rem;
|
|
25
|
+
border-radius: 0.5rem;
|
|
26
|
+
border: 2px solid #0e8ce2;
|
|
27
|
+
margin-top: -0.3rem;
|
|
28
|
+
}
|
|
29
|
+
.custom-checkbox .custom-control-label::after {
|
|
30
|
+
width: 1.5rem;
|
|
31
|
+
height: 1.5rem;
|
|
32
|
+
top: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.custom-control-label {
|
|
36
|
+
padding-left: 0.5rem;
|
|
37
|
+
font-weight: 400;
|
|
38
|
+
font-size: 0.875rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
10
41
|
label,
|
|
11
42
|
header,
|
|
12
43
|
button {
|
|
@@ -14,6 +45,10 @@
|
|
|
14
45
|
font-size: 0.875rem;
|
|
15
46
|
}
|
|
16
47
|
|
|
48
|
+
.title {
|
|
49
|
+
margin-left: 0.25rem;
|
|
50
|
+
}
|
|
51
|
+
|
|
17
52
|
header {
|
|
18
53
|
display: flex;
|
|
19
54
|
justify-content: space-between;
|
|
@@ -46,6 +81,7 @@
|
|
|
46
81
|
display: flex;
|
|
47
82
|
align-items: center;
|
|
48
83
|
gap: 1rem;
|
|
84
|
+
margin-bottom: 1rem;
|
|
49
85
|
|
|
50
86
|
span {
|
|
51
87
|
font-weight: 600;
|
|
@@ -58,6 +94,7 @@
|
|
|
58
94
|
justify-content: space-between;
|
|
59
95
|
align-items: center;
|
|
60
96
|
gap: 0.25rem;
|
|
97
|
+
margin-bottom: 0.5rem;
|
|
61
98
|
}
|
|
62
99
|
|
|
63
100
|
.text-input.form-group {
|
|
@@ -90,7 +127,7 @@
|
|
|
90
127
|
font-weight: 600;
|
|
91
128
|
}
|
|
92
129
|
|
|
93
|
-
.
|
|
130
|
+
.resource {
|
|
94
131
|
margin-bottom: 0.25rem;
|
|
95
132
|
}
|
|
96
133
|
}
|
|
Binary file
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
|
|
3
|
-
export type ResourcesBlockingModalProps = {
|
|
4
|
-
show: boolean;
|
|
5
|
-
zones: Zone[];
|
|
6
|
-
lanes: {
|
|
7
|
-
zoneId: Zone["id"];
|
|
8
|
-
lanes: string[];
|
|
9
|
-
}[];
|
|
10
|
-
};
|
|
11
|
-
export declare const ResourcesBlockingModal: ({ show, zones, lanes, }: ResourcesBlockingModalProps) => JSX.Element;
|
|
12
|
-
//# sourceMappingURL=ResourcesBlockingModal.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ResourcesBlockingModal.d.ts","sourceRoot":"","sources":["../../../src/provider/resources-blocking-modal/ResourcesBlockingModal.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAc9E,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE;QAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,sBAAsB,4BAIhC,2BAA2B,gBAwE7B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/provider/resources-blocking-modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
Binary file
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { Meta, Story } from "@storybook/react";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import {
|
|
4
|
-
ResourcesBlockingModal,
|
|
5
|
-
ResourcesBlockingModalProps,
|
|
6
|
-
} from "./ResourcesBlockingModal";
|
|
7
|
-
|
|
8
|
-
export default {
|
|
9
|
-
title: "Provider/ResourcesBlockingModal",
|
|
10
|
-
component: ResourcesBlockingModal,
|
|
11
|
-
} as Meta;
|
|
12
|
-
|
|
13
|
-
export const Default: Story<ResourcesBlockingModalProps> = (props) => {
|
|
14
|
-
return <ResourcesBlockingModal {...props} />;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
Default.args = {
|
|
18
|
-
show: true,
|
|
19
|
-
zones: [
|
|
20
|
-
{
|
|
21
|
-
id: 1,
|
|
22
|
-
name: "Zone 1",
|
|
23
|
-
providerId: 1,
|
|
24
|
-
type: "standard",
|
|
25
|
-
sort: null,
|
|
26
|
-
description: "description",
|
|
27
|
-
createdAt: "2021-09-01T12:00:00.000Z",
|
|
28
|
-
updatedAt: null,
|
|
29
|
-
deletedAt: null,
|
|
30
|
-
zoneRecurrences: null,
|
|
31
|
-
image: null,
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
id: 2,
|
|
35
|
-
name: "Zone 2",
|
|
36
|
-
providerId: 1,
|
|
37
|
-
type: "standard",
|
|
38
|
-
sort: null,
|
|
39
|
-
description: "description",
|
|
40
|
-
createdAt: "2021-09-01T12:00:00.000Z",
|
|
41
|
-
updatedAt: null,
|
|
42
|
-
deletedAt: null,
|
|
43
|
-
zoneRecurrences: null,
|
|
44
|
-
image: null,
|
|
45
|
-
},
|
|
46
|
-
],
|
|
47
|
-
lanes: [
|
|
48
|
-
{ zoneId: 1, lanes: ["Lane 1", "Lane 2", "Lane 3", "Lane 4"] },
|
|
49
|
-
{ zoneId: 2, lanes: ["Lane 5", "Lane 6", "Lane 7", "Lane 8"] },
|
|
50
|
-
],
|
|
51
|
-
};
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { Button, Form, Modal } from "react-bootstrap";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { useId } from "@react-aria/utils";
|
|
4
|
-
import { useTranslation } from "react-i18next";
|
|
5
|
-
import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
|
|
6
|
-
import Image from "../../static/Image";
|
|
7
|
-
import src from "../../assets/dashboard/blockingClock.png";
|
|
8
|
-
|
|
9
|
-
const WEEKDAYS = [
|
|
10
|
-
"mondayShort",
|
|
11
|
-
"tuesdayShort",
|
|
12
|
-
"wednesdayShort",
|
|
13
|
-
"thursdayShort",
|
|
14
|
-
"fridayShort",
|
|
15
|
-
"saturdayShort",
|
|
16
|
-
"sundayShort",
|
|
17
|
-
];
|
|
18
|
-
|
|
19
|
-
export type ResourcesBlockingModalProps = {
|
|
20
|
-
show: boolean;
|
|
21
|
-
zones: Zone[];
|
|
22
|
-
lanes: { zoneId: Zone["id"]; lanes: string[] }[];
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export const ResourcesBlockingModal = ({
|
|
26
|
-
show,
|
|
27
|
-
zones,
|
|
28
|
-
lanes,
|
|
29
|
-
}: ResourcesBlockingModalProps) => {
|
|
30
|
-
const { t } = useTranslation("Design");
|
|
31
|
-
const allId = useId();
|
|
32
|
-
const resourcesId = useId();
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<Modal centered show={show} className="resources-blocking-modal">
|
|
36
|
-
<header>
|
|
37
|
-
<span>{t("resourcesBlocking")}</span>
|
|
38
|
-
<Image src={src} />
|
|
39
|
-
</header>
|
|
40
|
-
|
|
41
|
-
<Modal.Body>
|
|
42
|
-
<div className="checkbox-with-description">
|
|
43
|
-
<span>{t("dayOfTheWeek")}</span>
|
|
44
|
-
<Form.Group className="custom-checkbox">
|
|
45
|
-
<Form.Check custom type="checkbox" id={allId}>
|
|
46
|
-
<Form.Check.Input type="checkbox" />
|
|
47
|
-
<Form.Check.Label>{t("all")}</Form.Check.Label>
|
|
48
|
-
</Form.Check>
|
|
49
|
-
</Form.Group>
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
<Form.Group className="custom-checkbox days-list">
|
|
53
|
-
{WEEKDAYS.map((weekday) => (
|
|
54
|
-
<Checkbox key={weekday} label={t(weekday)} />
|
|
55
|
-
))}
|
|
56
|
-
</Form.Group>
|
|
57
|
-
|
|
58
|
-
<div className="date-time-inputs">
|
|
59
|
-
<Input label={t("from")} placeholder="DD.MM.YYYY" />
|
|
60
|
-
<Input label={t("until")} placeholder="DD.MM.YYYY" />
|
|
61
|
-
|
|
62
|
-
<Input label={t("startTime")} placeholder="00:00" />
|
|
63
|
-
<Input label={t("endTime")} placeholder="00:00" />
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
<Form.Group className="text-input">
|
|
67
|
-
<Form.Label>{t("textLabel")}</Form.Label>
|
|
68
|
-
<Form.Control />
|
|
69
|
-
</Form.Group>
|
|
70
|
-
|
|
71
|
-
<div className="checkbox-with-description">
|
|
72
|
-
<span>{t("resources")}</span>
|
|
73
|
-
<Form.Group className="custom-checkbox">
|
|
74
|
-
<Form.Check custom type="checkbox" id={resourcesId}>
|
|
75
|
-
<Form.Check.Input type="checkbox" />
|
|
76
|
-
<Form.Check.Label>{t("all")}</Form.Check.Label>
|
|
77
|
-
</Form.Check>
|
|
78
|
-
</Form.Group>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
{zones.map((zone) => (
|
|
82
|
-
<Form.Group key={zone.id} className="zone-wrapper custom-checkbox">
|
|
83
|
-
<div className="zone-name">{zone.name}</div>
|
|
84
|
-
|
|
85
|
-
{lanes
|
|
86
|
-
.find((lane) => lane.zoneId === zone.id)
|
|
87
|
-
.lanes.map((lane) => (
|
|
88
|
-
<Checkbox key={lane} label={lane} className="lane" />
|
|
89
|
-
))}
|
|
90
|
-
</Form.Group>
|
|
91
|
-
))}
|
|
92
|
-
|
|
93
|
-
<footer>
|
|
94
|
-
<Button>Save</Button>
|
|
95
|
-
<Button variant="secondary">Close</Button>
|
|
96
|
-
<Button variant="danger">Delete</Button>
|
|
97
|
-
</footer>
|
|
98
|
-
</Modal.Body>
|
|
99
|
-
</Modal>
|
|
100
|
-
);
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
const Checkbox = ({
|
|
104
|
-
label,
|
|
105
|
-
className = "",
|
|
106
|
-
}: {
|
|
107
|
-
label: string;
|
|
108
|
-
className?: string;
|
|
109
|
-
}) => {
|
|
110
|
-
const id = useId();
|
|
111
|
-
|
|
112
|
-
return (
|
|
113
|
-
<Form.Check custom type="checkbox" className={className} id={id}>
|
|
114
|
-
<Form.Check.Input type="checkbox" />
|
|
115
|
-
<Form.Check.Label>{label}</Form.Check.Label>
|
|
116
|
-
</Form.Check>
|
|
117
|
-
);
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
const Input = ({
|
|
121
|
-
label,
|
|
122
|
-
placeholder,
|
|
123
|
-
}: {
|
|
124
|
-
label: string;
|
|
125
|
-
placeholder: string;
|
|
126
|
-
}) => {
|
|
127
|
-
return (
|
|
128
|
-
<Form.Group className="text-input">
|
|
129
|
-
<Form.Label>{label}</Form.Label>
|
|
130
|
-
|
|
131
|
-
<Form.Control placeholder={placeholder} />
|
|
132
|
-
</Form.Group>
|
|
133
|
-
);
|
|
134
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { ResourcesBlockingModal } from "./ResourcesBlockingModal";
|