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

fixes to image show

Browse Source
This commit is contained in:
Szymon Haczyk
2023-08-16 13:39:35 +02:00
parent 0db5a5a879
commit 913d62c6aa
2 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/MagicoSection.vue
View File

@@ -9,11 +9,11 @@
</div>
</h5>
<div class="card-header-end">
<a class=" fs-4 text-dark me-3" @click.prevent="openJSONModal" v-if="showSettings">
<a class="fs-4 text-dark me-3" @click.prevent="openJSONModal" v-if="showSettings">
<i class="bi bi-filetype-json"></i>
</a>
<a class=" fs-4 text-dark" @click.prevent="editMode = !editMode" v-if="showSettings">
<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>
@@ -59,15 +59,15 @@
<draggable v-model="fields.sections" handle=".handle">
<template #item="{ element: field, index }">
<div>
<div class="row section_header">
<div class="col-lg-6">
<div class="d-flex section_header justify-content-between">
<div class="">
<h3>
Sekcja
{{ index + 1 }} {{ field.label != '' ? '- ' + field.label : '' }}
</h3>
<small v-html="field.description"></small>
</div>
<div class="col-lg-6 text-end">
<div class="text-end">
<button v-if="editMode" class="btn btn-icon-sm btn-outline-secondary handle me-2">
<i class="bi bi-grip-horizontal"></i>
</button>
@@ -188,13 +188,13 @@ import SectionRow from './SectionRow.vue'
export default {
components: { SectionGridChoose, MagicoModal, draggable, SectionRow },
name: 'MagicoSection',
props: ['modelValue'],
props: ['modelValue', 'edit'],
data() {
return {
val: '',
section_id: 0,
loading: false,
editMode: true,
editMode: false,
showSettings: true,
jsonModal: false,
schemaJSONText: '',
@@ -314,7 +314,12 @@ export default {
}
},
created() {
this.val = this.modelValue
if (this.modelValue) {
this.fields = this.modelValue
if (!this.fields.sections) {
this.fields.sections = []
}
}
},
mounted() {
window.addEventListener('scroll', function () {

54
src/components/PagebuilderSectionPlugin.vue
View File

@@ -2,7 +2,7 @@
<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>
><span class="font-weight-bold text-primary">{{ langs.label }} {{ title }}</span>
</div>
<div class="col-sm-12 col-md-6 p-0 text-end">
@@ -10,9 +10,9 @@
><i class="material-icons-outlined">create</i></a
>
<magico-modal
class_other="modal-xl"
class_other="modal-xxl"
v-model="modalBox"
:title="langs.label"
:title="langs.label + ' ' + title"
v-on:hide="onCloseModal"
>
<div class="mb-4">
@@ -20,20 +20,23 @@
<textarea rows="40" class="form-control" v-model="text"></textarea>
</div> -->
</div>
<div class="d-flex">
<div class="p-2 px-4">
<MagicoSection v-model="data.data" v-if="data.data"></MagicoSection>
</div>
<div class="d-flex mb-3">
<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>
</magico-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>
<img :src="image" style="max-width:200px">
</div>
</template>
<script>
@@ -51,14 +54,39 @@ export default {
}
},
mounted: function () {
console.log('TUTUAUTUAUTAUTAUTUAUTUAUTUAUT',this);
let vm = this
if (this.$pagebuilder.axios && !this.data.data && this.modelValue.section_id) {
this.$pagebuilder.axios
.get('https://cms.magico.pro/api/v1/section/' + this.modelValue.section_id)
.then(
(response) => {
vm.data.data = response.data.data.body
vm.title = response.data.data.title
vm.image = response.data.data.image
if (!vm.data.data) {
vm.data.data = {}
}
vm.$emit('update:modelValue', {
name: this.name,
title: this.title,
id: this.id,
data: this.data,
type: this.type
})
},
() => {
this.data.data = {}
}
)
}
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.image = this.modelValue && this.modelValue.image ? this.modelValue.image : this.image
this.data = this.modelValue && this.modelValue.data ? this.modelValue.data : this.data
this.type = this.modelValue && this.modelValue.data ? this.modelValue.type : this.type
if (this.modelValue && this.modelValue.open) this.modalBox = true
console.log('mounted html')
this.$emit('update:modelValue', this.modelValue)
},
data: function () {
@@ -72,16 +100,19 @@ export default {
modalBox: false,
type: 'section',
text: '',
image: '',
data: {
header: '',
data: {}
data: null
},
name: 'core_section'
}
},
computed: {
ctext: function () {
return this.modelValue && this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
return this.modelValue && this.modelValue.text
? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '')
: ''
}
},
methods: {
@@ -92,6 +123,7 @@ export default {
this.modalBox = false
this.$emit('update:modelValue', {
name: this.name,
image: this.image,
title: this.title,
id: this.id,
data: this.data,