Remove conditions from editor
This commit is contained in:
philipp lang
parent
099079f119
commit
fe3720436f
|
|
@ -18,7 +18,6 @@ class Editor extends Component
|
|||
public ?string $hint = null,
|
||||
public bool $required = false,
|
||||
public string $label = '',
|
||||
public array $conditions = [],
|
||||
) {
|
||||
$this->id = str()->uuid()->toString();
|
||||
}
|
||||
|
|
@ -26,7 +25,7 @@ class Editor extends Component
|
|||
public function render()
|
||||
{
|
||||
return <<<'HTML'
|
||||
<div class="flex flex-col group {{$heightClass}}" x-data="">
|
||||
<div class="flex flex-col group {{$heightClass}}">
|
||||
@if ($label)
|
||||
<x-form::label :required="$required">{{$label}}</x-form::label>
|
||||
@endif
|
||||
|
|
@ -38,8 +37,7 @@ class Editor extends Component
|
|||
group-[.size-default]:text-sm group-[.size-sm]:text-xs
|
||||
group-[.size-default]:p-2 group-[.size-sm]:p-1
|
||||
" @updated="$wire.{{$attributes->wire('model')->value}} = $event.detail" x-bind="editor"x-data="{
|
||||
conditions: @js($conditions),
|
||||
value: $wire.{{$attributes->wire('model')->value}}
|
||||
value: $wire.{{$attributes->wire('model')->value}},
|
||||
}" id="{{$id}}" {{$attributes}}></div>
|
||||
<x-ui::errors :for="$name" />
|
||||
@if($hint)
|
||||
|
|
|
|||
|
|
@ -5,114 +5,11 @@ import Paragraph from '@editorjs/paragraph';
|
|||
import NestedList from '@editorjs/nested-list';
|
||||
import Alert from 'editorjs-alert';
|
||||
|
||||
class ConditionTune {
|
||||
constructor({api, data, config, block}) {
|
||||
this.api = api;
|
||||
this.data = data || {
|
||||
mode: 'all',
|
||||
ifs: [],
|
||||
};
|
||||
this.config = config;
|
||||
this.block = block;
|
||||
this.wrapper = null;
|
||||
}
|
||||
|
||||
static get isTune() {
|
||||
return true;
|
||||
}
|
||||
|
||||
wrap(blockContent) {
|
||||
this.wrapper = document.createElement('div');
|
||||
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.setAttribute('data-tooltip', '');
|
||||
|
||||
var content = document.createElement('div');
|
||||
content.setAttribute('data-content', '');
|
||||
|
||||
content.appendChild(blockContent);
|
||||
|
||||
this.wrapper.appendChild(tooltip);
|
||||
this.wrapper.appendChild(content);
|
||||
|
||||
this.styleWrapper();
|
||||
|
||||
return this.wrapper;
|
||||
}
|
||||
|
||||
hasData() {
|
||||
return this.data.ifs.length > 0;
|
||||
}
|
||||
|
||||
styleWrapper() {
|
||||
if (this.hasData()) {
|
||||
this.wrapper.querySelector('[data-content]').className = 'p-1 border border-blue-100 rounded';
|
||||
this.wrapper.querySelector('[data-tooltip]').className =
|
||||
'mt-1 inline-block tracking-wider font-semibold ml-2 mr-2 px-2 py-1 items-center text-xs leading-none bg-blue-100 text-blue-900 rounded-t-lg';
|
||||
this.wrapper.querySelector('[data-tooltip]').innerHTML = this.descriptionName();
|
||||
} else {
|
||||
this.wrapper.querySelector('[data-content]').className = '';
|
||||
this.wrapper.querySelector('[data-tooltip]').className = '';
|
||||
this.wrapper.querySelector('[data-tooltip]').innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
descriptionName() {
|
||||
return (
|
||||
'Bedingung ' +
|
||||
this.data.ifs
|
||||
.map((i) => {
|
||||
var parts = [i.field];
|
||||
|
||||
if (i.comparator === 'isEqual' || i.comparator === 'isIn') {
|
||||
parts.push('=');
|
||||
}
|
||||
|
||||
if (i.comparator === 'isNotEqual' || i.comparator === 'isNotIn') {
|
||||
parts.push('≠');
|
||||
}
|
||||
|
||||
if (typeof i.value === 'string') {
|
||||
parts.push(i.value);
|
||||
}
|
||||
|
||||
if (Array.isArray(i.value)) {
|
||||
parts.push(i.value.join(', '));
|
||||
}
|
||||
|
||||
if (typeof i.value === 'boolean') {
|
||||
parts.push(i.value ? 'An' : 'Aus');
|
||||
}
|
||||
|
||||
return parts.join(' ');
|
||||
})
|
||||
.join(', ')
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return {
|
||||
label: 'Bedingungen',
|
||||
closeOnActivate: true,
|
||||
toggle: true,
|
||||
onActivate: async () => {
|
||||
this.data = await openPopup(this.data);
|
||||
this.styleWrapper();
|
||||
this.block.dispatchChange();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
save() {
|
||||
return this.data;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
'editor': null,
|
||||
'value': null,
|
||||
|
||||
'x-init': async function () {
|
||||
'x-init': function () {
|
||||
var tools = {
|
||||
paragraph: {
|
||||
class: Paragraph,
|
||||
|
|
@ -147,81 +44,17 @@ export default {
|
|||
},
|
||||
};
|
||||
|
||||
var tunes = [];
|
||||
|
||||
// if (props.conditions) {
|
||||
// tools.condition = {
|
||||
// class: ConditionTune,
|
||||
// };
|
||||
// tunes.push('condition');
|
||||
// }
|
||||
|
||||
this.editor = new EditorJS({
|
||||
placeholder: '',
|
||||
holder: this.$el.getAttribute('id'),
|
||||
minHeight: 0,
|
||||
defaultBlock: 'paragraph',
|
||||
data: this.value,
|
||||
tunes: tunes,
|
||||
tools: tools,
|
||||
onChange: debounce(async (api, event) => {
|
||||
const data = await this.editor.save();
|
||||
this.$dispatch('updated', data);
|
||||
}, 200),
|
||||
onPopup: () => {
|
||||
console.log('opened');
|
||||
},
|
||||
});
|
||||
await this.editor.isReady;
|
||||
},
|
||||
};
|
||||
|
||||
// const props = defineProps({
|
||||
// required: {
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// },
|
||||
// size: {
|
||||
// type: String,
|
||||
// default: () => 'base',
|
||||
// },
|
||||
// rows: {
|
||||
// type: Number,
|
||||
// default: () => 4,
|
||||
// },
|
||||
// id: {
|
||||
// type: String,
|
||||
// required: true,
|
||||
// },
|
||||
// conditions: {
|
||||
// required: false,
|
||||
// type: Boolean,
|
||||
// default: () => false,
|
||||
// },
|
||||
// hint: {
|
||||
// type: String,
|
||||
// default: () => '',
|
||||
// },
|
||||
// modelValue: {
|
||||
// default: undefined,
|
||||
// },
|
||||
// label: {
|
||||
// type: String,
|
||||
// default: () => '',
|
||||
// },
|
||||
// });
|
||||
|
||||
async function openPopup(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
new Promise((innerResolve, innerReject) => {
|
||||
condition.value = {
|
||||
resolve: innerResolve,
|
||||
reject: innerReject,
|
||||
data: data,
|
||||
};
|
||||
}).then((data) => {
|
||||
resolve(data);
|
||||
condition.value = null;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue