@licklist/design 0.44.485-dev.50 → 0.44.485-dev.51

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 (5) hide show
  1. package/dist/sales/booking/filter/components/AdditionalFIlterSection.js +1 -1
  2. package/dist/styles/sales/BookingFilter.scss +43 -11
  3. package/package.json +1 -1
  4. package/src/sales/booking/filter/components/AdditionalFIlterSection.tsx +2 -2
  5. package/src/styles/sales/BookingFilter.scss +43 -11
package/dist/sales/booking/filter/components/AdditionalFIlterSection.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),a=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),o=require("react-bootstrap"),l=require("react-hook-form"),i=require("../../../../static/date-range-input/DateRangeInput.js"),s=require("@licklist/core/dist/DataMapper/Order/OrderDataMapper"),c=require("@licklist/plugins/dist/context/booking/BookingContext"),u=[s.ORDER_STATUS_PENDING,s.ORDER_STATUS_CANCELLED,s.ORDER_STATUS_COMPLETED,s.ORDER_STATUS_ACTION_REQUIRED];exports.AdditionalFilterSection=function(){var e=n.useTranslation("Design").t,s=r.useContext(c.BookingContext),m=s.filters,d=s.setFilters,E=l.useForm({defaultValues:m}),p=E.handleSubmit,_=E.register,f=E.setValue,D=E.reset,g=E.watch,b=g("order_date_from"),C=g("order_date_to");return r.useEffect((function(){D(m)}),[m,D]),a.createElement("div",{className:"additional-filter-section"},a.createElement(o.Form,{onSubmit:p((function(e){d(e)}))},a.createElement(o.Row,null,a.createElement(o.Col,{md:"3"},a.createElement(o.Form.Group,null,a.createElement(o.Form.Label,null,e("staffMember")),a.createElement(o.Form.Control,t.__assign({},_("staffMember"),{as:"select"}),a.createElement("option",{value:""},e("Design:choose"))))),a.createElement(o.Col,{md:"3"},a.createElement(o.Form.Group,null,a.createElement(o.Form.Label,null,e("bookingStatus")),a.createElement(o.Form.Control,t.__assign({},_("status"),{as:"select"}),a.createElement("option",{value:""},e("Design:choose")),Object.keys(u).map((function(t){return a.createElement("option",{key:u[t],value:u[t]},e("Design:".concat(u[t])))}))))),a.createElement(o.Col,{md:"3"},a.createElement(o.Form.Group,null,a.createElement(o.Form.Label,null,e("date")),a.createElement(i.DateRangeInput,{placeholder:e("date"),startDate:b,endDate:C,onDateChange:function(e){var t=e.startDate,r=e.endDate;f("order_date_from",t),f("order_date_to",r)}}))),a.createElement(o.Col,{md:"3",className:"d-flex align-items-end"},a.createElement(o.Form.Group,null,a.createElement(o.Button,{type:"submit",className:"shadow-none"},e("apply")))))))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),a=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),o=require("react-bootstrap"),l=require("react-hook-form"),i=require("../../../../static/date-range-input/DateRangeInput.js"),s=require("@licklist/core/dist/DataMapper/Order/OrderDataMapper"),c=require("@licklist/plugins/dist/context/booking/BookingContext"),u=[s.ORDER_STATUS_PENDING,s.ORDER_STATUS_CANCELLED,s.ORDER_STATUS_COMPLETED,s.ORDER_STATUS_ACTION_REQUIRED];exports.AdditionalFilterSection=function(){var e=n.useTranslation("Design").t,s=r.useContext(c.BookingContext),m=s.filters,d=s.setFilters,E=l.useForm({defaultValues:m}),p=E.handleSubmit,f=E.register,_=E.setValue,D=E.reset,g=E.watch,b=g("order_date_from"),C=g("order_date_to");return r.useEffect((function(){D(m)}),[m,D]),a.createElement("div",{className:"additional-filter-section"},a.createElement(o.Form,{onSubmit:p((function(e){d(e)}))},a.createElement(o.Row,{className:"additional-filter-container"},a.createElement(o.Col,{md:"3"},a.createElement(o.Form.Group,null,a.createElement(o.Form.Label,null,e("staffMember")),a.createElement(o.Form.Control,t.__assign({},f("staffMember"),{as:"select"}),a.createElement("option",{value:""},e("Design:choose"))))),a.createElement(o.Col,{md:"3"},a.createElement(o.Form.Group,null,a.createElement(o.Form.Label,null,e("bookingStatus")),a.createElement(o.Form.Control,t.__assign({},f("status"),{as:"select"}),a.createElement("option",{value:""},e("Design:choose")),Object.keys(u).map((function(t){return a.createElement("option",{key:u[t],value:u[t]},e("Design:".concat(u[t])))}))))),a.createElement(o.Col,{className:"date-container"},a.createElement(o.Form.Group,null,a.createElement(o.Form.Label,null,e("date")),a.createElement(i.DateRangeInput,{placeholder:e("date"),startDate:b,endDate:C,onDateChange:function(e){var t=e.startDate,r=e.endDate;_("order_date_from",t),_("order_date_to",r)}}))),a.createElement(o.Col,{md:"3",className:"d-flex align-items-end"},a.createElement(o.Form.Group,null,a.createElement(o.Button,{type:"submit",className:"shadow-none"},e("apply")))))))};
package/dist/styles/sales/BookingFilter.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  margin: 0.875rem;
34
34
  z-index: 3;
35
35
  }
36
-
36
+
37
37
  .form-control {
38
38
  height: 2.75rem;
39
39
  color: $blue;
@@ -57,7 +57,11 @@
57
57
  margin-right: 0.5rem;
58
58
  }
59
59
 
60
- .cancel-button, .add-filters-button, .refresh-button, .fullscreen-button, .minimize-button {
60
+ .cancel-button,
61
+ .add-filters-button,
62
+ .refresh-button,
63
+ .fullscreen-button,
64
+ .minimize-button {
61
65
  display: flex;
62
66
  color: $gray-800;
63
67
 
@@ -92,11 +96,14 @@
92
96
  }
93
97
  }
94
98
 
95
- .fullscreen-button, .minimize-button {
99
+ .fullscreen-button,
100
+ .minimize-button {
96
101
  min-width: 7.25rem;
97
102
  }
98
103
 
99
- .refresh-button, .fullscreen-button, .minimize-button {
104
+ .refresh-button,
105
+ .fullscreen-button,
106
+ .minimize-button {
100
107
  .icon {
101
108
  background-color: transparent;
102
109
 
@@ -145,13 +152,37 @@
145
152
  .additional-filter-section {
146
153
  margin-top: 1.25rem;
147
154
 
148
- @include media-breakpoint-up(md){
155
+ @include media-breakpoint-up(md) {
149
156
  .form-group {
150
157
  margin-bottom: 0;
151
158
  }
152
159
  }
153
160
  }
154
161
 
162
+ .additional-filter-container {
163
+ flex-wrap: nowrap;
164
+
165
+ @include media-breakpoint-down(md) {
166
+ flex-wrap: wrap;
167
+ .date-container {
168
+ width: 100%;
169
+ flex: 1;
170
+ }
171
+ .btn-primary {
172
+ margin-top: 1rem;
173
+ }
174
+ }
175
+
176
+ @include media-breakpoint-between(md, lg) {
177
+ flex-wrap: nowrap;
178
+
179
+ .date-container {
180
+ width: auto;
181
+ flex: 0 0 35%;
182
+ }
183
+ }
184
+ }
185
+
155
186
  .searching-for-section {
156
187
  .tags {
157
188
  display: flex;
@@ -161,8 +192,9 @@
161
192
  p {
162
193
  margin: 0;
163
194
  }
164
-
165
- .label, .search-query-param {
195
+
196
+ .label,
197
+ .search-query-param {
166
198
  font-size: 1.125rem;
167
199
  font-weight: 600;
168
200
  }
@@ -175,8 +207,8 @@
175
207
  .result-tag {
176
208
  display: flex;
177
209
  align-items: center;
178
- border: 1px solid #DCDCDC;
179
- background-color: #F5F5F5;
210
+ border: 1px solid #dcdcdc;
211
+ background-color: #f5f5f5;
180
212
  padding: 0.5rem 0.75rem;
181
213
  font-size: 0.75rem;
182
214
  text-transform: capitalize;
@@ -186,7 +218,7 @@
186
218
  cursor: pointer;
187
219
  width: 1.125rem;
188
220
  height: 1.125rem;
189
- background-color: #DCDCDC;
221
+ background-color: #dcdcdc;
190
222
  border-radius: 1rem;
191
223
  display: flex;
192
224
  align-items: center;
@@ -196,4 +228,4 @@
196
228
  }
197
229
  }
198
230
  }
199
- }
231
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.44.485-dev.50",
3
+ "version": "0.44.485-dev.51",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
package/src/sales/booking/filter/components/AdditionalFIlterSection.tsx CHANGED
@@ -53,7 +53,7 @@ export const AdditionalFilterSection = () => {
53
53
  return (
54
54
  <div className="additional-filter-section">
55
55
  <Form onSubmit={handleSubmit(onFormSubmit)}>
56
- <Row>
56
+ <Row className="additional-filter-container">
57
57
  <Col md="3">
58
58
  <Form.Group>
59
59
  <Form.Label>{t("staffMember")}</Form.Label>
@@ -80,7 +80,7 @@ export const AdditionalFilterSection = () => {
80
80
  </Form.Group>
81
81
  </Col>
82
82
 
83
- <Col md="3">
83
+ <Col className="date-container">
84
84
  <Form.Group>
85
85
  <Form.Label>{t("date")}</Form.Label>
86
86
  <DateRangeInput
package/src/styles/sales/BookingFilter.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  margin: 0.875rem;
34
34
  z-index: 3;
35
35
  }
36
-
36
+
37
37
  .form-control {
38
38
  height: 2.75rem;
39
39
  color: $blue;
@@ -57,7 +57,11 @@
57
57
  margin-right: 0.5rem;
58
58
  }
59
59
 
60
- .cancel-button, .add-filters-button, .refresh-button, .fullscreen-button, .minimize-button {
60
+ .cancel-button,
61
+ .add-filters-button,
62
+ .refresh-button,
63
+ .fullscreen-button,
64
+ .minimize-button {
61
65
  display: flex;
62
66
  color: $gray-800;
63
67
 
@@ -92,11 +96,14 @@
92
96
  }
93
97
  }
94
98
 
95
- .fullscreen-button, .minimize-button {
99
+ .fullscreen-button,
100
+ .minimize-button {
96
101
  min-width: 7.25rem;
97
102
  }
98
103
 
99
- .refresh-button, .fullscreen-button, .minimize-button {
104
+ .refresh-button,
105
+ .fullscreen-button,
106
+ .minimize-button {
100
107
  .icon {
101
108
  background-color: transparent;
102
109
 
@@ -145,13 +152,37 @@
145
152
  .additional-filter-section {
146
153
  margin-top: 1.25rem;
147
154
 
148
- @include media-breakpoint-up(md){
155
+ @include media-breakpoint-up(md) {
149
156
  .form-group {
150
157
  margin-bottom: 0;
151
158
  }
152
159
  }
153
160
  }
154
161
 
162
+ .additional-filter-container {
163
+ flex-wrap: nowrap;
164
+
165
+ @include media-breakpoint-down(md) {
166
+ flex-wrap: wrap;
167
+ .date-container {
168
+ width: 100%;
169
+ flex: 1;
170
+ }
171
+ .btn-primary {
172
+ margin-top: 1rem;
173
+ }
174
+ }
175
+
176
+ @include media-breakpoint-between(md, lg) {
177
+ flex-wrap: nowrap;
178
+
179
+ .date-container {
180
+ width: auto;
181
+ flex: 0 0 35%;
182
+ }
183
+ }
184
+ }
185
+
155
186
  .searching-for-section {
156
187
  .tags {
157
188
  display: flex;
@@ -161,8 +192,9 @@
161
192
  p {
162
193
  margin: 0;
163
194
  }
164
-
165
- .label, .search-query-param {
195
+
196
+ .label,
197
+ .search-query-param {
166
198
  font-size: 1.125rem;
167
199
  font-weight: 600;
168
200
  }
@@ -175,8 +207,8 @@
175
207
  .result-tag {
176
208
  display: flex;
177
209
  align-items: center;
178
- border: 1px solid #DCDCDC;
179
- background-color: #F5F5F5;
210
+ border: 1px solid #dcdcdc;
211
+ background-color: #f5f5f5;
180
212
  padding: 0.5rem 0.75rem;
181
213
  font-size: 0.75rem;
182
214
  text-transform: capitalize;
@@ -186,7 +218,7 @@
186
218
  cursor: pointer;
187
219
  width: 1.125rem;
188
220
  height: 1.125rem;
189
- background-color: #DCDCDC;
221
+ background-color: #dcdcdc;
190
222
  border-radius: 1rem;
191
223
  display: flex;
192
224
  align-items: center;
@@ -196,4 +228,4 @@
196
228
  }
197
229
  }
198
230
  }
199
- }
231
+ }