¨4.0.1¨
This commit is contained in:
@@ -3,7 +3,7 @@ export default class {
|
||||
for (let key in errors) {
|
||||
let inputField = this.getInputFieldForErrorKey(key);
|
||||
|
||||
inputField.closest('.option').addClass('option-has-errors');
|
||||
inputField.closest(".option").addClass("option-has-errors");
|
||||
|
||||
let parent = inputField.parent();
|
||||
|
||||
@@ -12,7 +12,7 @@ export default class {
|
||||
}
|
||||
|
||||
getRowTemplate(data) {
|
||||
let template = _.template($('#option-select-values-template').html());
|
||||
let template = _.template($("#option-select-values-template").html());
|
||||
|
||||
return $(template(data));
|
||||
}
|
||||
@@ -20,13 +20,16 @@ export default class {
|
||||
changeOptionType({ optionId, type, values = [] }) {
|
||||
let optionValuesElement = this.getOptionValuesElement(optionId);
|
||||
let templateType = this.getTemplateType(type, optionValuesElement);
|
||||
let optionValuesData = { optionId, value: { id: '', label: '', price: '', price_type: 'fixed' } };
|
||||
let optionValuesData = {
|
||||
optionId,
|
||||
value: { id: "", label: "", price: "", price_type: "fixed" },
|
||||
};
|
||||
|
||||
if (this.shouldNotChangeTemplate(templateType, optionValuesElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (values.length !== 0 && templateType === 'text') {
|
||||
if (values.length !== 0 && templateType === "text") {
|
||||
optionValuesData.value = values[0];
|
||||
}
|
||||
|
||||
@@ -34,13 +37,13 @@ export default class {
|
||||
|
||||
optionValuesElement.html(template(optionValuesData));
|
||||
|
||||
if (templateType === 'select') {
|
||||
if (templateType === "select") {
|
||||
this.addOptionRowEventListener(optionId);
|
||||
|
||||
this.addOptionRows({ optionId, values });
|
||||
|
||||
if (values.length === 0) {
|
||||
this.getAddNewRowButton(optionId).trigger('click');
|
||||
this.getAddNewRowButton(optionId).trigger("click");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -57,41 +60,53 @@ export default class {
|
||||
|
||||
getTemplateType(type) {
|
||||
if (this.templateTypeIsText(type)) {
|
||||
return 'text';
|
||||
return "text";
|
||||
}
|
||||
|
||||
if (this.templateTypeIsSelect(type)) {
|
||||
return 'select';
|
||||
return "select";
|
||||
}
|
||||
}
|
||||
|
||||
templateTypeIsText(type) {
|
||||
return ['field', 'textarea', 'date', 'date_time', 'time'].includes(type);
|
||||
return ["field", "textarea", "date", "date_time", "time"].includes(
|
||||
type
|
||||
);
|
||||
}
|
||||
|
||||
templateTypeIsSelect(type) {
|
||||
return ['dropdown', 'checkbox', 'checkbox_custom', 'radio', 'radio_custom', 'multiple_select'].includes(type);
|
||||
return [
|
||||
"dropdown",
|
||||
"checkbox",
|
||||
"checkbox_custom",
|
||||
"radio",
|
||||
"radio_custom",
|
||||
"multiple_select",
|
||||
].includes(type);
|
||||
}
|
||||
|
||||
shouldNotChangeTemplate(templateType, optionValuesElement) {
|
||||
return templateType === undefined || this.alreadyHasCurrentTemplate(templateType, optionValuesElement);
|
||||
return (
|
||||
templateType === undefined ||
|
||||
this.alreadyHasCurrentTemplate(templateType, optionValuesElement)
|
||||
);
|
||||
}
|
||||
|
||||
alreadyHasCurrentTemplate(templateType, optionValuesElement) {
|
||||
if (templateType === 'text') {
|
||||
return optionValuesElement.children().hasClass('option-text');
|
||||
if (templateType === "text") {
|
||||
return optionValuesElement.children().hasClass("option-text");
|
||||
}
|
||||
|
||||
if (templateType === 'select') {
|
||||
return optionValuesElement.children().hasClass('option-select');
|
||||
if (templateType === "select") {
|
||||
return optionValuesElement.children().hasClass("option-select");
|
||||
}
|
||||
}
|
||||
|
||||
initOptionRow(template, selectValues) {
|
||||
if (selectValues.length !== 0 && ! selectValues.is('.sortable')) {
|
||||
if (selectValues.length !== 0 && !selectValues.is(".sortable")) {
|
||||
this.makeSortable(selectValues[0]);
|
||||
|
||||
selectValues.addClass('sortable');
|
||||
selectValues.addClass("sortable");
|
||||
}
|
||||
|
||||
this.deleteOptionRowEventListener(template);
|
||||
@@ -100,14 +115,14 @@ export default class {
|
||||
}
|
||||
|
||||
deleteOptionRowEventListener(row) {
|
||||
row.find('.delete-row').on('click', (e) => {
|
||||
$(e.currentTarget).closest('.option-row').remove();
|
||||
row.find(".delete-row").on("click", (e) => {
|
||||
$(e.currentTarget).closest(".option-row").remove();
|
||||
});
|
||||
}
|
||||
|
||||
makeSortable(el) {
|
||||
Sortable.create(el, {
|
||||
handle: '.drag-icon',
|
||||
handle: ".drag-handle",
|
||||
animation: 150,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
import Option from './Option';
|
||||
import ProductOption from './ProductOption';
|
||||
import Option from "./Option";
|
||||
|
||||
if ($('#option-create-form, #option-edit-form').length !== 0) {
|
||||
if ($("#option-create-form, #option-edit-form").length !== 0) {
|
||||
new Option();
|
||||
}
|
||||
|
||||
if ($('#product-create-form, #product-edit-form').length !== 0) {
|
||||
new ProductOption();
|
||||
}
|
||||
|
||||
@@ -1,37 +1,64 @@
|
||||
.new-option {
|
||||
.checkbox {
|
||||
margin: 30px 0 0;
|
||||
display: inline-block;
|
||||
.options-group {
|
||||
.option-values {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-option {
|
||||
margin-top: 25px;
|
||||
padding: 10px 15px;
|
||||
.new-option {
|
||||
overflow: hidden;
|
||||
margin-bottom: -15px;
|
||||
|
||||
.checkbox {
|
||||
margin: 26px 0 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.options-group-wrapper {
|
||||
.panel-title a {
|
||||
.panel-title [data-toggle="collapse"] {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 9px 15px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
> .drag-icon {
|
||||
&:after {
|
||||
top: 11px !important;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
font-size: 16px;
|
||||
color: #737881;
|
||||
cursor: move;
|
||||
vertical-align: top;
|
||||
margin: 4px 10px 0 0;
|
||||
margin-right: 11px;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
i {
|
||||
float: left;
|
||||
cursor: move;
|
||||
|
||||
i {
|
||||
&:nth-child(2) {
|
||||
margin-left: 1px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-option {
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
color: #4d4d4d;
|
||||
transition: 150ms ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -47,7 +74,7 @@
|
||||
|
||||
thead th {
|
||||
&:first-child {
|
||||
width: 40px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@@ -76,39 +103,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.add-global-option {
|
||||
.form-group {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
> button {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.add-global-option {
|
||||
float: none !important;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.new-option {
|
||||
.checkbox {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.delete-option {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.p-l-0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.options-group-wrapper {
|
||||
.options-group {
|
||||
.option-values {
|
||||
.option-text,
|
||||
.option-select {
|
||||
@@ -120,8 +116,82 @@
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.new-option {
|
||||
.form-group {
|
||||
label {
|
||||
margin-bottom: 6px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding-top: 7px;
|
||||
padding-top: 8px;
|
||||
|
||||
label {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.new-option {
|
||||
> .row {
|
||||
> .col-sm-6 {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
> .col-sm-3 {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.options-group {
|
||||
.option-values {
|
||||
margin-top: 20px;
|
||||
|
||||
.option-select {
|
||||
.table {
|
||||
> tbody {
|
||||
> tr {
|
||||
> td {
|
||||
&:nth-child(2) {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
min-width: 145px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
min-width: 110px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-option {
|
||||
margin-bottom: -10px;
|
||||
|
||||
> .row {
|
||||
> div {
|
||||
&:nth-child(3) {
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user