develop sections
This commit is contained in:
@@ -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
48
src/components/FileChooserInput.vue
Normal 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>
|
||||
@@ -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,23 +83,24 @@
|
||||
@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
|
||||
class="col-12"
|
||||
:edit-mode="editMode"
|
||||
:section_index="index"
|
||||
:mykey="row_index"
|
||||
:section="row"
|
||||
>
|
||||
</section-row>
|
||||
class="col-12"
|
||||
:edit-mode="editMode"
|
||||
:section_index="index"
|
||||
:mykey="row_index"
|
||||
:section="row"
|
||||
@input="update"
|
||||
>
|
||||
</section-row>
|
||||
<div
|
||||
v-if="editMode"
|
||||
class="pb_section_options position-absolute"
|
||||
@@ -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
97
src/components/PagebuilderSectionPlugin.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -13,39 +13,40 @@
|
||||
<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
|
||||
>
|
||||
|
||||
<button v-if="editMode" @click="editSection(column)" class="btn btn-icon-sm">
|
||||
<i class="bi bi-">edit</i>
|
||||
</button>
|
||||
<button
|
||||
title="Wklej zawartość"
|
||||
v-if="editMode"
|
||||
@click="pasteSection(column, [$props.section_index, $props.mykey, index])"
|
||||
class="btn btn-icon-sm"
|
||||
>
|
||||
<i class="bi bi-">paste</i>
|
||||
</button>
|
||||
<button
|
||||
title="Kopiuj zawartość"
|
||||
v-if="editMode"
|
||||
@click="copySection(column)"
|
||||
class="btn btn-icon-sm"
|
||||
>
|
||||
<i class="bi bi-">copy</i>
|
||||
</button>
|
||||
<small
|
||||
class="ml-4 mt-1"
|
||||
style="font-size: 12px; font-weight: 300; display: block"
|
||||
v-html="column.description"
|
||||
></small>
|
||||
<div>
|
||||
<button v-if="editMode" @click="editSection(column)" class="btn btn-icon-sm">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button
|
||||
title="Wklej zawartość"
|
||||
v-if="editMode"
|
||||
@click="pasteSection(column, [$props.section_index, $props.mykey, index])"
|
||||
class="btn btn-icon-sm"
|
||||
>
|
||||
<i class="bi bi-clipboard-check"></i>
|
||||
</button>
|
||||
<button
|
||||
title="Kopiuj zawartość"
|
||||
v-if="editMode"
|
||||
@click="copySection(column)"
|
||||
class="btn btn-icon-sm"
|
||||
>
|
||||
<i class="bi bi-clipboard"></i>
|
||||
</button>
|
||||
<small
|
||||
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">
|
||||
<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
|
||||
"
|
||||
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"
|
||||
>
|
||||
<span class="material-icons-outlined">delete</span>
|
||||
</button>
|
||||
|
||||
<button class="btn handle2 btn-icon-sm btn-outline-secondary">
|
||||
<span class="material-icons-outlined">open_with</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"
|
||||
>
|
||||
<div class="card-body p-1">
|
||||
<div
|
||||
class="list-group mb-2"
|
||||
v-for="(element, index2) in colItem"
|
||||
:key="element.id"
|
||||
>
|
||||
<div
|
||||
class="list-group-item pl-2 pr-1"
|
||||
@click="handleElementClick($event, element, column)"
|
||||
<template #item="{ element: colItem, index: ck }">
|
||||
<div class="card mb-1">
|
||||
<div
|
||||
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
|
||||
"
|
||||
>
|
||||
Element #{{ ck + 1 }}
|
||||
<div>
|
||||
<button
|
||||
@click="deleteCollectionItem(column, ck)"
|
||||
class="btn btn-icon-sm btn-outline-secondary me-1"
|
||||
>
|
||||
<b>{{ element.name }}</b>
|
||||
{{ element.type == 'heading' ? '- ' + element.text : '' }}
|
||||
<button
|
||||
v-if="editMode"
|
||||
class="btn btn-icon-sm btn-outline-secondary handle float-right"
|
||||
<span class="bi bi-trash"></span>
|
||||
</button>
|
||||
|
||||
<button class="btn handle2 btn-icon-sm btn-outline-secondary">
|
||||
<span class="bi bi-grip-vertical"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
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="ps-2 pe-1 mb-3"
|
||||
@click="handleElementClick($event, element, column)"
|
||||
>
|
||||
<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
|
||||
title="Skopiuj ID zmiennej"
|
||||
@click.prevent="copyClickboard(element.key)"
|
||||
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
|
||||
>
|
||||
<i class="material-icons-outlined">copy</i>
|
||||
</button>
|
||||
<panel_section_element_edit
|
||||
@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>
|
||||
<label class="mb-1">{{ element.name }}</label>
|
||||
{{ element.type == 'heading' ? '- ' + element.text : '' }}
|
||||
|
||||
<a
|
||||
title="Skopiuj ID zmiennej"
|
||||
@click.prevent="copyClickboard(element.key)"
|
||||
class="me-1 text-dark off_tooltip_off float-end"
|
||||
>
|
||||
<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"
|
||||
:modelValue="element"
|
||||
:key="ck + '_it' + index2"
|
||||
></section-element>
|
||||
</div>
|
||||
</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
|
||||
>
|
||||
<input class="form-control mb-3" type="text" v-model="cssmodal.column.description" />
|
||||
<label>Typ kolumny</label>
|
||||
<div>
|
||||
<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>
|
||||
<div class="text-right">
|
||||
<button @click="cssmodal.modal = false" class="btn btn-outline-secondary">Anuluj</button>
|
||||
<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: {}
|
||||
|
||||
Reference in New Issue
Block a user