diff --git a/app/View/Form/Editor.php b/app/View/Form/Editor.php index 4d246640..14877977 100644 --- a/app/View/Form/Editor.php +++ b/app/View/Form/Editor.php @@ -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' -
+
@if ($label) {{$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}}>
@if($hint) diff --git a/resources/livewire-js/editor.js b/resources/livewire-js/editor.js index dd1b4d2f..02d35376 100644 --- a/resources/livewire-js/editor.js +++ b/resources/livewire-js/editor.js @@ -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; - }); - }); -}