public/magico-section
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

develop sections

Browse Source
This commit is contained in:
Szymon Haczyk
2023-08-11 13:25:47 +02:00
parent 851590483f
commit 3aa0b76698
6 changed files with 655 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@@ -1,5 +1,7 @@
<script setup>
import { ref } from 'vue'
import MagicoSection from './components/MagicoSection.vue'
const json = ref({})
</script>
<template>
@@ -10,7 +12,11 @@ import MagicoSection from './components/MagicoSection.vue'
</header>
<main>
<MagicoSection></MagicoSection>
<MagicoSection v-model="json"></MagicoSection>
<div class="my-5 bg-dark text-white p-3">
{{ json }}
</div>
</main>
</template>

48
src/components/FileChooserInput.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<div class="form-group w-100">
<div class="input-group">
<input v-model="file_path" class="form-control" type="text" />
<div class="input-group-append">
<button class="btn btn-outline-secondary" @click="choose">Wybierz</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'FileChooserInput',
components: {},
props: ['modelValue'],
emits: ['update:modelValue'],
data: function () {
return {
file_path: '',
modal: false,
}
},
watch: {
value: function () {
this.file_path = this.modelValue
}
},
created: function () {
this.file_path = this.modelValue
},
methods: {
choose: function () {
let vm = this
if (this.$filechooser) {
this.$filechooser.open({
chooseCallback: vm.choosed
})
} else {
alert('No FileChooser implemented')
}
},
choosed: function (ev) {
this.file_path = ev.publicUrl
this.$emit('update:modelValue', this.file_path)
}
}
}
</script>

42
src/components/MagicoSection.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div :class="component_mode ? 'position-relative' : 'card mb-2'">
<div :class="component_mode ? '' : 'card-header'">
<div :class="component_mode ? '' : 'card-header '" class="d-flex justify-content-between">
<h5 class="d-flex align-items-center" v-if="!component_mode">
{{ name }}
<div v-if="loading" class="spinner-border spinner-border-sm ml-2" role="status">
@@ -9,13 +9,14 @@
</div>
</h5>
<div class="card-header-end">
<button class="btn btn-outline-danger" @click="openJSONModal" v-if="showSettings">
Pokaż JSONa
</button>
<a class=" fs-4 text-dark me-3" @click.prevent="openJSONModal" v-if="showSettings">
<i class="bi bi-filetype-json"></i>
</a>
<button class="btn btn-outline-danger" @click="editMode = !editMode" v-if="showSettings">
{{ editMode ? 'Zmień na tryb edycji treści' : 'Zmień na tryb edycji struktury' }}
</button>
<a class=" fs-4 text-dark" @click.prevent="editMode = !editMode" v-if="showSettings">
<i v-if="editMode" class="bi bi-binoculars"></i>
<i v-else class="bi bi-pencil-square"></i>
</a>
</div>
</div>
<a
@@ -40,7 +41,9 @@
<draggable
class="components_list"
:list="available_components"
:group="{ name: 'people', pull: 'clone', put: false }"
:group="{ name: 'people', pull: 'clone', put: false, revertClone: true }"
:clone="clone"
:item-key="type"
>
<template #item="element">
<div class="d-flex align-items-center py-1 border-bottom p-3">
@@ -80,13 +83,13 @@
@click="editSection(field)"
class="btn btn-icon-sm btn-outline-secondary"
>
<i class="bi bi-pen"></i>
<i class="bi bi-pencil"></i>
</button>
</div>
</div>
<div v-for="(row, row_index) in field.rows" :key="row_index" class="col-sm-12 p-0">
<div
:class="editMode ? 'pr-5' : ''"
:class="editMode ? 'pe-5' : ''"
class="row mb-1 position-relative pb_outer_section pb-3"
>
<section-row
@@ -95,6 +98,7 @@
:section_index="index"
:mykey="row_index"
:section="row"
@input="update"
>
</section-row>
<div
@@ -161,11 +165,11 @@
scrollable
v-model="jsonModal"
title="Dane w JSON"
size="lg"
class_other="modal-lg"
hide-footer
class="MagicoModal-top"
>
<div>
<div class="p-3">
<textarea class="form-control" rows="30" v-model="schemaJSONText"></textarea>
<div class="text-center mt-3">
<button class="btn btn-danger" @click="loadFromTextarea">Załaduj JSONa</button>
@@ -191,7 +195,7 @@ export default {
section_id: 0,
loading: false,
editMode: true,
showSettings: false,
showSettings: true,
jsonModal: false,
schemaJSONText: '',
component_mode: false,
@@ -255,7 +259,7 @@ export default {
})
this.activeAddedSection.rows.push(newIt)
this.next_group++
this.schamaSave()
this.update()
},
addRowButton: function (section) {
this.addSectionGrid = true
@@ -268,6 +272,7 @@ export default {
css: '',
key: ''
})
this.update()
},
deleteRow(field, index) {
field.rows.splice(index, 1)
@@ -278,8 +283,8 @@ export default {
return
}
},
schamaSave: function () {
this.$emit('input', this.fields)
update: function () {
this.$emit('update:modelValue', this.fields)
},
toggleOpen(event, group_item) {
event.stopPropagation()
@@ -302,7 +307,10 @@ export default {
},
editSectionSave: function () {
this.section_edit.modal = false
this.schamaSave()
this.update()
},
clone: function (orignal) {
return JSON.parse(JSON.stringify(orignal))
}
},
created() {

97
src/components/PagebuilderSectionPlugin.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0">
<span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
><span class="font-weight-bold text-primary">{{ langs.label }}</span>
</div>
<div class="col-sm-12 col-md-6 p-0 text-end">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"
><i class="material-icons-outlined">create</i></a
>
<b-modal
no-enforce-focus
class_other="modal-xl"
v-model="modalBox"
:title="langs.label"
v-on:hide="onCloseModal"
>
<div class="mb-4">
<div class="form-group">
<textarea rows="40" class="form-control" v-model="text"></textarea>
</div>
</div>
<div class="d-flex">
<button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
{{ langs.saveclose }}
</button>
</div>
<div class="p-2">
<!-- <MagicoSection v-model="data.data"></MagicoSection> -->
</div>
</b-modal>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
><i class="material-icons-outlined">delete</i></a
>
</div>
<div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
</div>
</template>
<script>
import MagicoModal from './MagicoModal.vue'
// import MagicoSection from './MagicoSection.vue'
export default {
components: {
'b-modal': MagicoModal,
// MagicoSection
},
props: {
modelValue: Object
},
mounted: function () {
this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.$options.name
this.title = this.modelValue && this.modelValue.title ? this.modelValue.title : this.title
this.id = this.modelValue && this.modelValue.id ? this.modelValue.id : this.id
this.data = this.modelValue && this.modelValue.data ? this.modelValue.data : this.data
this.type = this.type && this.modelValue.data ? this.modelValue.type : this.type
if (this.modelValue.open) this.modalBox = true
console.log('mounted html')
this.$emit('update:modelValue', this.modelValue)
},
data: function () {
return {
langs: {
saveclose: 'Zapisz',
label: 'Sekcja',
close: 'Zamknij'
},
height: window.innerHeight - window.innerHeight / 4,
modalBox: false,
type: 'section',
text: '',
data: {
header: '',
data: {}
},
name: 'core_section'
}
},
computed: {
ctext: function () {
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
}
},
methods: {
removeItem: function () {
this.$emit('itemRemoved', this.modelValue)
},
onCloseModal: function () {
this.modalBox = false
this.$emit('update:modelValue', {
name: this.name,
text: this.text
})
}
}
}
</script>

320
src/components/SectionElement.vue
View File

@@ -0,0 +1,320 @@
<template>
<div v-if="element">
<div v-if="editMode && element.type != 'variable'" class="mb-2">
<label>Nazwa:</label>
<div v-if="!element.name" style="cursor: pointer" class="mb-2">
<span
v-for="(template, key) in name_templates"
:key="key"
class="badge badge-secondary mr-1"
@click="
saveElement(element, true)
"
>{{ template }}</span
>
</div>
<input
@change="saveElement(element, true)"
class="form-control mb-2"
type="text"
v-model="element.name"
name="name"
/>
<label>Klucz zmiennej:</label>
<input
@change="saveElement(element, true)"
class="form-control mb-1"
name="key"
type="text"
v-model="element.key"
/>
<div v-if="!element.key" style="cursor: pointer" class="mb-2">
<span
v-for="(template, key) in key_templates"
:key="key"
class="badge badge-secondary mr-1"
@click="
saveElement(element, true)
"
>{{ template }}</span
>
</div>
</div>
<div v-if="element.type == 'text'">
<input
type="text"
@change="saveElement(element, true)"
class="form-control"
placeholder="Tekst"
v-model="element.text"
/>
</div>
<div v-else-if="element.type == 'textarea'">
<textarea
@change="saveElement(element, true)"
placeholder="Wpisz tekst tutaj"
class="form-control"
v-model="element.text"
></textarea>
</div>
<div v-else-if="element.type == 'wysiwyg'">
<Editor
@change="saveElement(element, true)"
:class="'item' + id"
v-if="vtinymce"
:init="vtinymce"
placeholder="Wpisz tekst tutaj"
v-model="element.text"
></Editor>
</div>
<div v-else-if="element.type == 'html'">
<textarea
@change="saveElement(element, true)"
placeholder="Wpisz tekst tutaj"
class="form-control"
v-model="element.text"
></textarea>
</div>
<div v-else-if="element.type == 'url'">
<label>Tytuł linku:</label>
<input
@change="saveElement(element, true)"
class="form-control mb-2"
type="text"
v-model="element.name"
/>
<label>URL:</label>
<input
@change="saveElement(element, true)"
class="form-control"
type="text"
v-model="element.url"
/>
</div>
<div v-else-if="element.type == 'button'">
<label>Tytuł przycisku:</label>
<input
@change="saveElement(element, true)"
class="form-control mb-2"
type="text"
v-model="element.name"
/>
<label>URL:</label>
<input
@change="saveElement(element, true)"
class="form-control"
type="text"
v-model="element.url"
/>
</div>
<div v-else-if="element.type == 'image'">
<FileChooserInput
v-model="element.text"
@input="saveElement(element, true)"
></FileChooserInput>
<img :src="element.text" v-if="element.text" style="width:100px">
</div>
<div v-else-if="element.type == 'variable' && editMode">
<label>Label zmiennej:</label>
<input
@change="saveElement(element, true)"
class="form-control mb-1"
name="name"
type="text"
v-model="element.name"
/>
<div
v-if="!element.name || element.name == 'Zmienna POST'"
style="cursor: pointer"
class="mb-2"
>
<span
v-for="(template, key) in name_templates"
:key="key"
class="badge badge-secondary mr-1"
@click="
saveElement(element, true)
"
>{{ template }}</span
>
</div>
<label>Wybierz zmienną systemową:</label>
<select
@change="saveElement(element, true)"
class="form-control mb-2"
type="text"
v-model="element.url"
>
<!-- <option v-for="it,key in posts_names" :value="it">{{ it }}</option> -->
</select>
<label>lub wpisz jej wartość:</label>
<input
@change="saveElement(element, true)"
class="form-control"
type="text"
v-model="element.url"
/>
<b-form-checkbox v-model="element.image_upload" class="mt-2">Upload obrazka</b-form-checkbox>
<b-form-checkbox v-model="element.image_core_files" class="mt-2"
>Wybór obrazka z pliki i multimedia</b-form-checkbox
>
</div>
<div v-else-if="element.type == 'variable' && !editMode">
<!-- <fileupload
v-if="element.image_upload"
class="mb-3"
:target="
'/mpanel/post/image/' +
element.url +
'?lang_id=' +
($route.params.lang_id ? $route.params.lang_id : 1)
"
action="POST"
v-on:finish="finishUpload"
v-on:progress="progressUpload"
v-on:start="startUpload"
></fileupload> -->
<img
style="max-width: 100px"
v-if="element.var_text && element.image_upload"
:src="'/public/images/post/' + element.var_text"
:alt="element.var_text"
/>
<!-- <core_files_input
v-if="element.image_core_files"
v-model="element.var_text"
@input="savePost(element.url, element.var_text)"
></core_files_input> -->
<textarea
v-show="!element.image_upload && !element.image_core_files"
rows="1"
@change="savePost(element.url, element.var_text)"
class="form-control mb-2"
type="text"
v-model="element.var_text"
></textarea>
</div>
<div v-else-if="element.type == 'widgetlist' && editMode">
<label>Nazwa:</label>
<input
@change="saveElement(element, true)"
class="form-control mb-2"
type="text"
v-model="element.name"
name="name"
/>
<label>ID Listy:</label>
<input
@change="saveElement(element, true)"
class="form-control"
type="number"
v-model="element.url"
/>
</div>
<div v-else-if="element.type == 'widgetlist' && !editMode">
<widgetlist_modal :listid="element.url"></widgetlist_modal>
</div>
<div v-else-if="element.type == 'heading'">
<label>Nagłowek:</label>
<input
@change="saveElement(element, true)"
class="form-control"
type="text"
v-model="element.text"
/>
</div>
<div v-else-if="element.type == 'boolean'">
<input
type="checkbox"
@change="saveElement(element, true)"
class="form-control"
v-model="element.text"
/>
</div>
<div v-else-if="element.type == 'cms'">
<label>Tytuł:</label>
<input
@change="saveElement(element, true)"
class="form-control mb-2"
type="text"
v-model="element.name"
disabled
/>
<label>Link:</label>
<input
@change="saveElement(element, true)"
class="form-control"
type="text"
v-model="element.url"
disabled
/>
</div>
<div v-show="editMode">
<label class="mt-2">Klasa CSS:</label>
<input
@change="saveElement(element, true)"
class="form-control"
type="text"
v-model="element.css"
/>
</div>
<div class="mt-3" v-if="editMode"></div>
<button
v-show="editMode"
style="margin-top: 10px"
@click="saveElement(element)"
class="btn btn-block btn-primary"
>
Zapisz
</button>
</div>
</template>
<script>
import FileChooserInput from './FileChooserInput.vue'
import { randId } from './helper'
import draggable from 'vuedraggable'
export default {
components: { draggable, FileChooserInput },
props: ['modelValue', 'indexes', 'editMode'],
methods: {
saveElement: function (el, mode = false) {
if (mode == false) {
el.edited = false
}
this.$emit('input')
}
},
data() {
return {
minimodal: false,
value: '',
id: randId('post'),
vtinymce: {},
element: {},
name_templates: ['Nagłowek', 'Podnagłówek', 'Opis', 'Tekst', 'Obrazek', 'Ikona'],
key_templates: ['head', 'text', 'image', 'icon'],
components: {}
}
},
created() {
this.element = this.modelValue
// let vm = this
// this.vtinymce = Object.assign(vtinymce, {
// toolbar1:
// 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | forecolor backcolor',
// toolbar2: '',
// selector: 'textarea.item' + this.id,
// setup: function (editor) {
// editor.on('Blur', function (e) {
// vm.saveElement(this.element, true)
// })
// }
// })
// console.log(this.components);
}
}
</script>

202
src/components/SectionRow.vue
View File

@@ -13,17 +13,17 @@
<div class="card-body p-2">
<h5 class="card-title d-flex justify-content-start align-items-center">
<span v-if="editMode" class="d-inline-flex box-settings-icon box-settings handle"
><i class="bi bi-data"></i></span
><span class="ml-2 flex-fill">
><i class="bi bi-grip-vertical"></i></span
><span class="ms-2 flex-fill">
Kolumna {{ index + 1 }}
{{ column.label ? '- ' + column.label : '' }}
<span v-if="column.type == 'collection'" :title="column.key">
KOLEKCJA</span
[KOLEKCJA]</span
></span
>
<div>
<button v-if="editMode" @click="editSection(column)" class="btn btn-icon-sm">
<i class="bi bi-">edit</i>
<i class="bi bi-pencil"></i>
</button>
<button
title="Wklej zawartość"
@@ -31,7 +31,7 @@
@click="pasteSection(column, [$props.section_index, $props.mykey, index])"
class="btn btn-icon-sm"
>
<i class="bi bi-">paste</i>
<i class="bi bi-clipboard-check"></i>
</button>
<button
title="Kopiuj zawartość"
@@ -39,13 +39,14 @@
@click="copySection(column)"
class="btn btn-icon-sm"
>
<i class="bi bi-">copy</i>
<i class="bi bi-clipboard"></i>
</button>
<small
class="ml-4 mt-1"
class="ms-4 mt-1"
style="font-size: 12px; font-weight: 300; display: block"
v-html="column.description"
></small>
</div>
</h5>
<draggable
v-if="column.type != 'collection' || editMode"
@@ -55,13 +56,13 @@
v-model="column.items"
group="people"
>
<template #item="{ element }">
<template #item="{ element, index }">
<div class="list-group mb-2">
<div
class="list-group-item pl-2 pr-1"
class="list-group-item ps-2 pe-1"
@click="handleElementClick($event, element, column)"
>
<b v-if="!editMode">{{ element.name }}</b
<label class="mb-1" v-if="!editMode">{{ element.name }}</label
><input
@change="saveSection(column)"
v-model="element.name"
@@ -70,41 +71,41 @@
style="border: none; background-color: transparent"
/>
{{ element.type == 'heading' ? '- ' + element.text : '' }}
<button
<a
v-if="editMode"
class="btn btn-icon-sm btn-outline-secondary handle float-right"
class="text-dark handle float-end"
>
<i class="bi bi-open"></i>
</button>
<button
<i class="bi bi-grip-vertical"></i>
</a>
<a
v-if="editMode"
@click.prevent="removeEl(column.items, index2)"
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
class="text-dark me-1 off_tooltip_off float-end"
>
<i class="bi bi-pen"></i>
</button>
<button
<i class="bi bi-trash"></i>
</a>
<a
v-if="editMode"
@click.prevent="element.edited = !element.edited"
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
class="text-dark me-1 off_tooltip_off float-end"
>
<i class="bi bi-open"></i>
</button>
<button
<i class="bi bi-pencil"></i>
</a>
<a
title="Skopiuj ID zmiennej"
@click.prevent="copyClickboard(element.key)"
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
class="text-dark me-1 off_tooltip_off float-end"
>
<i class="bi bi-copy"></i>
</button>
<!--
<panel_section_element_edit
<i class="bi bi-clipboard"></i>
</a>
<section-element
:edit-mode="editMode"
@change="saveSection(column)"
:indexes="[$props.section_index, $props.mykey, index, index2]"
v-if="element.edited == true || !editMode"
:element="element"
></panel_section_element_edit> -->
:modelValue="element"
></section-element>
</div>
</div>
</template>
@@ -122,88 +123,69 @@
v-model="column.collection"
group="people2"
>
<div class="card mb-1" v v-for="(colItem, ck) in column.collection" :key="ck">
<template #item="{ element: colItem, index: ck }">
<div class="card mb-1">
<div
class="card-header p-2 pl-3 align-items-center d-flex justify-content-between"
id="headingOne"
data-toggle="collapse"
:data-target="
'#collapseOne' + $props.section_index + $props.mykey + ck + index
class="card-header p-2 ps-3 align-items-center d-flex justify-content-between"
@click="
expanded[
'collapseOne' + $props.section_index + $props.mykey + ck + index
] = expanded[
'collapseOne' + $props.section_index + $props.mykey + ck + index
]
? false
: true
"
aria-expanded="true"
:aria-controls="'collapseOne' + ck + index"
>
Element #{{ ck + 1 }}
<div>
<button
@click="deleteCollectionItem(column, ck)"
class="btn btn-icon-sm btn-outline-secondary"
class="btn btn-icon-sm btn-outline-secondary me-1"
>
<span class="material-icons-outlined">delete</span>
<span class="bi bi-trash"></span>
</button>
<button class="btn handle2 btn-icon-sm btn-outline-secondary">
<span class="material-icons-outlined">open_with</span>
<span class="bi bi-grip-vertical"></span>
</button>
</div>
</div>
<div
:id="'collapseOne' + $props.section_index + $props.mykey + ck + index"
class="collapse"
aria-labelledby="headingOne"
:data-parent="'#accordion' + $props.section_index + $props.mykey"
v-if="
expanded['collapseOne' + $props.section_index + $props.mykey + ck + index]
"
>
<div class="card-body p-1">
<div class="mt-2" v-for="(element, index2) in colItem" :key="index2">
<div
class="list-group mb-2"
v-for="(element, index2) in colItem"
:key="element.id"
>
<div
class="list-group-item pl-2 pr-1"
class="ps-2 pe-1 mb-3"
@click="handleElementClick($event, element, column)"
>
<b>{{ element.name }}</b>
<label class="mb-1">{{ element.name }}</label>
{{ element.type == 'heading' ? '- ' + element.text : '' }}
<button
v-if="editMode"
class="btn btn-icon-sm btn-outline-secondary handle float-right"
>
<i class="material-icons-outlined">open_with</i>
</button>
<button
v-if="editMode"
@click.prevent="removeEl(column.items, index2)"
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
>
<i class="material-icons-outlined">delete</i>
</button>
<button
v-if="editMode"
@click.prevent="element.edited = !element.edited"
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
>
<i class="material-icons-outlined">create</i>
</button>
<button
<a
title="Skopiuj ID zmiennej"
@click.prevent="copyClickboard(element.key)"
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
class="me-1 text-dark off_tooltip_off float-end"
>
<i class="material-icons-outlined">copy</i>
</button>
<panel_section_element_edit
<i class="bi bi-clipboard"></i>
</a>
<section-element
@change="saveCollectionElement(column)"
:edit-mode="editMode"
:indexes="[$props.section_index, $props.mykey, index, index2]"
v-if="element.edited == true || !editMode"
:element="element"
></panel_section_element_edit>
:modelValue="element"
:key="ck + '_it' + index2"
></section-element>
</div>
</div>
</div>
</div>
</div>
</template>
</draggable>
</div>
<button
@@ -224,31 +206,40 @@
v-model="cssmodal.modal"
class="MagicoModal-top"
>
<div>
<div class="p-3">
<label>Nazwa kolumny:</label>
<input
class="form-control"
class="form-control mb-3"
type="text"
v-model="cssmodal.column.label"
:disabled="!editMode"
/>
<label>Klasa CSS:</label>
<input class="form-control" type="text" v-model="cssmodal.column.css" />
<input class="form-control mb-3" type="text" v-model="cssmodal.column.css" />
<label>Klucz kolumny:</label>
<input class="form-control" type="text" v-model="cssmodal.column.key" />
<input class="form-control mb-3" type="text" v-model="cssmodal.column.key" />
<label>Opis HTML:</label>
<input class="form-control" type="text" v-model="cssmodal.column.description" />
<b-form-checkbox
class="mt-2"
value="collection"
unchecked-value="default"
v-model="cssmodal.column.type"
>Kolekcja</b-form-checkbox
>
</div>
<input class="form-control mb-3" type="text" v-model="cssmodal.column.description" />
<label>Typ kolumny</label>
<div>
<div class="text-right">
<button @click="cssmodal.modal = false" class="btn btn-outline-secondary">Anuluj</button>
<button
class="btn btn-outline-secondary my-2"
@click="
cssmodal.column.type =
cssmodal.column.type == 'default' || !cssmodal.column.type
? 'collection'
: 'default'
"
>
{{ cssmodal.column.type == 'default' || !cssmodal.column.type ? 'Zwykła' : 'Kolekcja' }}
</button>
</div>
</div>
<div class="p-3">
<div class="text-end">
<button @click="cssmodal.modal = false" class="btn btn-outline-secondary me-2">
Anuluj
</button>
<button class="btn btn-primary" @click="saveSection">Zapisz</button>
</div>
</div>
@@ -258,8 +249,9 @@
<script>
import MagicoModal from './MagicoModal.vue'
import draggable from 'vuedraggable'
import SectionElement from './SectionElement.vue'
export default {
components: { MagicoModal, draggable },
components: { MagicoModal, draggable, SectionElement },
props: ['section', 'group', 'mykey', 'section_index', 'editMode'],
template: '#panel_section_row-template',
methods: {
@@ -275,9 +267,12 @@ export default {
'_' +
(Math.random() + 1).toString(36).substring(7)
}
this.$emit('input')
},
newItemAdded(newIndex, element) {
this.$emit('input')
console.log('here')
console.log(newIndex, element)
},
@@ -290,8 +285,11 @@ export default {
navigator.clipboard.writeText(text)
},
// Alert the copied text
deleteSection: function (key) {},
deleteSection: function (key) {
this.$emit('input')
},
editSection: function (column) {
this.$emit('input')
this.cssmodal.column = column
this.cssmodal.modal = true
},
@@ -301,6 +299,7 @@ export default {
if (this.editMode && col.collection.length > 0) {
col.collection = this.updateCollectionWithScheme(col.items, col.collection)
}
this.$emit('input')
},
updateCollectionWithScheme: function (scheme, items) {
@@ -313,26 +312,32 @@ export default {
})
newItems.push(newEntry)
})
this.$emit('input')
return newItems
},
saveCollectionElement: function () {},
saveCollectionElement: function () {
this.$emit('input')
},
handleElementClick(event, item, column) {
console.log(event)
if (event.ctrlKey && this.editMode) {
column.items.push(JSON.parse(JSON.stringify(item)))
}
this.$emit('input')
},
addItemToCollection: function (column) {
if (!column.collection) {
column.collection = []
}
column.collection.push(JSON.parse(JSON.stringify(column.items)))
this.$emit('input')
},
deleteCollectionItem: function (column, index) {
column.collection.splice(index, 1)
this.$emit('input')
},
pasteSection: function (column, indexes) {
let item = localStorage.getItem('sectionscopy')
@@ -364,6 +369,7 @@ export default {
return {
value: '',
components: {},
expanded: {},
cssmodal: {
modal: false,
column: {}