Initiates layout split on ItemEditionPage
This commit is contained in:
mateuswetah
parent
73bf460ab3
commit
7122530b10
|
|
@ -8,118 +8,127 @@
|
||||||
v-if="!isLoading"
|
v-if="!isLoading"
|
||||||
class="tainacan-form"
|
class="tainacan-form"
|
||||||
label-width="120px">
|
label-width="120px">
|
||||||
<b-field
|
|
||||||
:addons="false"
|
|
||||||
:label="$i18n.get('label_status')">
|
|
||||||
<help-button
|
|
||||||
:title="$i18n.getHelperTitle('items', 'status')"
|
|
||||||
:message="$i18n.getHelperMessage('items', 'status')"/>
|
|
||||||
<b-select
|
|
||||||
id="status-select"
|
|
||||||
v-model="form.status"
|
|
||||||
:placeholder="$i18n.get('instruction_select_a_status')">
|
|
||||||
<option
|
|
||||||
:id="`status-option-${statusOption.value}`"
|
|
||||||
v-for="statusOption in statusOptions"
|
|
||||||
:key="statusOption.value"
|
|
||||||
:value="statusOption.value"
|
|
||||||
:disabled="statusOption.disabled">{{ statusOption.label }}
|
|
||||||
</option>
|
|
||||||
</b-select>
|
|
||||||
</b-field>
|
|
||||||
|
|
||||||
<!-- Thumbnail -------------------------------- -->
|
<div class="columns">
|
||||||
<b-field :label="$i18n.get('label_image')">
|
<div class="column is-narrow">
|
||||||
<div class="thumbnail-field">
|
<!-- Thumbnail -------------------------------- -->
|
||||||
<b-upload
|
|
||||||
v-if="item.featured_image == undefined || item.featured_image == false"
|
|
||||||
v-model="thumbnail"
|
|
||||||
drag-drop
|
|
||||||
@input="uploadThumbnail($event)">
|
|
||||||
<div class="content has-text-centered">
|
|
||||||
<p>
|
|
||||||
<b-icon
|
|
||||||
icon="upload"/>
|
|
||||||
</p>
|
|
||||||
<p>{{ $i18n.get('instruction_image_upload_box') }}</p>
|
|
||||||
</div>
|
|
||||||
</b-upload>
|
|
||||||
<div v-else>
|
|
||||||
<figure class="image is-128x128">
|
|
||||||
<img
|
|
||||||
:alt="$i18n.get('label_thumbnail')"
|
|
||||||
:src="item.featured_image">
|
|
||||||
</figure>
|
|
||||||
<div class="thumbnail-buttons-row">
|
|
||||||
<b-upload
|
|
||||||
model="thumbnail"
|
|
||||||
@input="uploadThumbnail($event)">
|
|
||||||
<a
|
|
||||||
id="button-edit"
|
|
||||||
:aria-label="$i18n.get('label_button_edit_thumb')"><b-icon icon="pencil"/></a>
|
|
||||||
</b-upload>
|
|
||||||
<a
|
|
||||||
id="button-delete"
|
|
||||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
|
||||||
@click="deleteThumbnail()"><b-icon icon="delete"/></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-field>
|
|
||||||
|
|
||||||
<!-- Fields from Collection-------------------------------- -->
|
|
||||||
<tainacan-form-item
|
|
||||||
v-for="(field, index) in fieldList"
|
|
||||||
:key="index"
|
|
||||||
:field="field"/>
|
|
||||||
|
|
||||||
<!-- Attachments ------------------------------------------ -->
|
|
||||||
<div class="columns is-multiline">
|
|
||||||
<div class="column is-4">
|
|
||||||
<b-field :label="$i18n.get('label_image')">
|
<b-field :label="$i18n.get('label_image')">
|
||||||
<b-upload
|
<div class="thumbnail-field">
|
||||||
v-model="form.files"
|
<b-upload
|
||||||
multiple
|
v-if="item.featured_image == undefined || item.featured_image == false"
|
||||||
drag-drop
|
v-model="thumbnail"
|
||||||
@input="uploadAttachment($event)">
|
drag-drop
|
||||||
<section class="section">
|
@input="uploadThumbnail($event)">
|
||||||
<div class="content has-text-centered">
|
<div class="content has-text-centered">
|
||||||
<p>
|
<p>
|
||||||
<b-icon
|
<b-icon
|
||||||
icon="upload"
|
icon="upload"/>
|
||||||
size="is-large"/>
|
|
||||||
</p>
|
</p>
|
||||||
<p>{{ $i18n.get('instruction_image_upload_box') }}</p>
|
<p>{{ $i18n.get('instruction_image_upload_box') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</b-upload>
|
||||||
</b-upload>
|
<div v-else>
|
||||||
</b-field>
|
<figure class="image is-128x128">
|
||||||
<div class="uploaded-files">
|
<img
|
||||||
<div
|
:alt="$i18n.get('label_thumbnail')"
|
||||||
v-for="(file, index) in form.files"
|
:src="item.featured_image">
|
||||||
:key="index">
|
</figure>
|
||||||
<span class="tag is-primary">
|
<div class="thumbnail-buttons-row">
|
||||||
{{ file.name }}
|
<b-upload
|
||||||
<button
|
model="thumbnail"
|
||||||
class="delete is-small"
|
@input="uploadThumbnail($event)">
|
||||||
type="button"
|
<a
|
||||||
@click="deleteFile(index)"/>
|
id="button-edit"
|
||||||
</span>
|
:aria-label="$i18n.get('label_button_edit_thumb')"><b-icon icon="pencil"/></a>
|
||||||
<!-- <progress class="progress is-secondary" value="15" max="100">30%</progress> -->
|
</b-upload>
|
||||||
|
<a
|
||||||
|
id="button-delete"
|
||||||
|
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||||
|
@click="deleteThumbnail()"><b-icon icon="delete"/></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</b-field>
|
||||||
|
|
||||||
|
<!-- Attachments ------------------------------------------ -->
|
||||||
|
<div class="columns is-multiline">
|
||||||
|
<div class="column is-4">
|
||||||
|
<b-field :label="$i18n.get('label_image')">
|
||||||
|
<b-upload
|
||||||
|
v-model="form.files"
|
||||||
|
multiple
|
||||||
|
drag-drop
|
||||||
|
@input="uploadAttachment($event)">
|
||||||
|
<section class="section">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<p>
|
||||||
|
<b-icon
|
||||||
|
icon="upload"
|
||||||
|
size="is-large"/>
|
||||||
|
</p>
|
||||||
|
<p>{{ $i18n.get('instruction_image_upload_box') }}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</b-upload>
|
||||||
|
</b-field>
|
||||||
|
<div class="uploaded-files">
|
||||||
|
<div
|
||||||
|
v-for="(file, index) in form.files"
|
||||||
|
:key="index">
|
||||||
|
<span class="tag is-primary">
|
||||||
|
{{ file.name }}
|
||||||
|
<button
|
||||||
|
class="delete is-small"
|
||||||
|
type="button"
|
||||||
|
@click="deleteFile(index)"/>
|
||||||
|
</span>
|
||||||
|
<!-- <progress class="progress is-secondary" value="15" max="100">30%</progress> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="column is-narrow"
|
||||||
|
v-for="(attachment, index) of item.attachments"
|
||||||
|
:key="index">
|
||||||
|
<figure class="image is-128x128">
|
||||||
|
<img
|
||||||
|
:alt="attachment.title"
|
||||||
|
:src="attachment.url">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<!-- Status -------------------------------- -->
|
||||||
|
<b-field
|
||||||
|
:addons="false"
|
||||||
|
:label="$i18n.get('label_status')">
|
||||||
|
<help-button
|
||||||
|
:title="$i18n.getHelperTitle('items', 'status')"
|
||||||
|
:message="$i18n.getHelperMessage('items', 'status')"/>
|
||||||
|
<b-select
|
||||||
|
id="status-select"
|
||||||
|
v-model="form.status"
|
||||||
|
:placeholder="$i18n.get('instruction_select_a_status')">
|
||||||
|
<option
|
||||||
|
:id="`status-option-${statusOption.value}`"
|
||||||
|
v-for="statusOption in statusOptions"
|
||||||
|
:key="statusOption.value"
|
||||||
|
:value="statusOption.value"
|
||||||
|
:disabled="statusOption.disabled">{{ statusOption.label }}
|
||||||
|
</option>
|
||||||
|
</b-select>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
|
<!-- Fields from Collection-------------------------------- -->
|
||||||
|
<tainacan-form-item
|
||||||
|
v-for="(field, index) in fieldList"
|
||||||
|
:key="index"
|
||||||
|
:field="field"/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="column is-narrow"
|
|
||||||
v-for="(attachment, index) of item.attachments"
|
|
||||||
:key="index">
|
|
||||||
<figure class="image is-128x128">
|
|
||||||
<img
|
|
||||||
:alt="attachment.title"
|
|
||||||
:src="attachment.url">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field is-grouped form-submit">
|
<div class="field is-grouped form-submit">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<button
|
<button
|
||||||
|
|
@ -213,15 +222,14 @@ export default {
|
||||||
this.$router.push(this.$routerHelper.getItemPath(this.form.collectionId, this.itemId));
|
this.$router.push(this.$routerHelper.getItemPath(this.form.collectionId, this.itemId));
|
||||||
})
|
})
|
||||||
.catch((errors) => {
|
.catch((errors) => {
|
||||||
for (let error of errors.errors) {
|
// for (let error of errors.errors) {
|
||||||
for (let attribute of Object.keys(error)){
|
// for (let attribute of Object.keys(error)){
|
||||||
//this.editFormErrors[attribute] = error[attribute];
|
// //this.editFormErrors[attribute] = error[attribute];
|
||||||
this.$console.log(error);
|
// this.$console.log(error);
|
||||||
|
|
||||||
eventBus.errors.push({ field_id: 7031, errors: error[attribute]});
|
// eventBus.errors.push({ field_id: 7031, errors: error[attribute]});
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
this.$console.log(eventBus.errors);
|
|
||||||
this.formErrorMessage = errors.error_message;
|
this.formErrorMessage = errors.error_message;
|
||||||
|
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
|
|
@ -267,7 +275,8 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
cancelBack(){
|
cancelBack(){
|
||||||
this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
|
this.$console.log(this.fieldList);
|
||||||
|
//this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
|
||||||
},
|
},
|
||||||
uploadAttachment($event) {
|
uploadAttachment($event) {
|
||||||
|
|
||||||
|
|
@ -317,7 +326,15 @@ export default {
|
||||||
return this.getFields();
|
return this.getFields();
|
||||||
},
|
},
|
||||||
formHasErrors(){
|
formHasErrors(){
|
||||||
return eventBus.errors.length > 0;
|
// for (let field of this.fieldList) {
|
||||||
|
// if (field.field.required == 'yes' &&
|
||||||
|
// (field.value == '' || field.value == undefined) &&
|
||||||
|
// this.form.status == 'publish') {
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
|
|
|
||||||
|
|
@ -259,7 +259,6 @@ export default {
|
||||||
this.addNewFilter(fieldType, lastIndex);
|
this.addNewFilter(fieldType, lastIndex);
|
||||||
},
|
},
|
||||||
addNewFilter(choosenField, newIndex) {
|
addNewFilter(choosenField, newIndex) {
|
||||||
this.$console.log(choosenField);
|
|
||||||
this.choosenField = choosenField;
|
this.choosenField = choosenField;
|
||||||
this.newIndex = newIndex;
|
this.newIndex = newIndex;
|
||||||
this.openedFilterId = '';
|
this.openedFilterId = '';
|
||||||
|
|
@ -342,7 +341,7 @@ export default {
|
||||||
|
|
||||||
// Opening collapse
|
// Opening collapse
|
||||||
} else {
|
} else {
|
||||||
this.$console.log(this.choosenField);
|
|
||||||
if (this.openedFilterId == '' && this.choosenField.id != undefined) {
|
if (this.openedFilterId == '' && this.choosenField.id != undefined) {
|
||||||
this.availableFieldList.push(this.choosenField);
|
this.availableFieldList.push(this.choosenField);
|
||||||
this.choosenField = {};
|
this.choosenField = {};
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
:id="id"
|
:id="id"
|
||||||
v-model="dateValue"
|
v-model="dateValue"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
|
:readonly="false"
|
||||||
@input="onInput($event)"/>
|
@input="onInput($event)"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ export const eventBus = new Vue({
|
||||||
if ( index >= 0){
|
if ( index >= 0){
|
||||||
this.errors.splice( index, 1);
|
this.errors.splice( index, 1);
|
||||||
}
|
}
|
||||||
}, error => {
|
}).catch((error) => {
|
||||||
let index = this.errors.findIndex( errorItem => errorItem.field_id === data.field_id );
|
let index = this.errors.findIndex( errorItem => errorItem.field_id === data.field_id );
|
||||||
let messages = null;
|
let messages = null;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -86,7 +86,7 @@ export const updateCollectionFiltersOrder = ({ commit }, { collectionId, filters
|
||||||
axios.tainacan.patch('/collections/' + collectionId, {
|
axios.tainacan.patch('/collections/' + collectionId, {
|
||||||
filters_order: filtersOrder
|
filters_order: filtersOrder
|
||||||
}).then( res => {
|
}).then( res => {
|
||||||
commit('setCollection', res.data);
|
commit('collection/setCollection', res.data, { root: true });
|
||||||
resolve( res.data );
|
resolve( res.data );
|
||||||
}).catch( error => {
|
}).catch( error => {
|
||||||
reject( error.response );
|
reject( error.response );
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue