Adds Thumbnail CRUD to Item Edition. Adds arrow for inserting Fields on FieldPage. Removes a Field when selected for Field Creation. Changes default title for Filter created from Field.
This commit is contained in:
mateuswetah
parent
5a8bae92ec
commit
a5365d81ac
|
|
@ -301,6 +301,10 @@ export default {
|
|||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
img {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.thumbnail-buttons-row {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -18,31 +18,38 @@
|
|||
</b-field>
|
||||
|
||||
<!-- Thumbnail -------------------------------- -->
|
||||
<div class="columns">
|
||||
<b-field class="column" :label="$i18n.get('label_image')">
|
||||
<b-field :label="$i18n.get('label_image')">
|
||||
<div class="thumbnail-field">
|
||||
<b-upload
|
||||
v-if="item.featured_image == undefined || item.featured_image == false"
|
||||
v-model="thumbnail"
|
||||
drag-drop
|
||||
@input="uploadThumbnail($event)">
|
||||
<section class="section">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<b-icon
|
||||
icon="upload"
|
||||
size="is-large">
|
||||
</b-icon>
|
||||
</p>
|
||||
<p>{{ $i18n.get('instruction_image_upload_box') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<b-icon
|
||||
icon="upload">
|
||||
</b-icon>
|
||||
</p>
|
||||
<p>{{ $i18n.get('instruction_image_upload_box') }}</p>
|
||||
</div>
|
||||
</b-upload>
|
||||
</b-field>
|
||||
<div class="column is-centered">
|
||||
<figure class="image is-128x128">
|
||||
<img :alt="$i18n.get('label_thumbnail')" :src="item.featured_image"/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
|
|
@ -242,7 +249,7 @@ export default {
|
|||
|
||||
this.updateThumbnail({itemId: this.itemId, thumbnailId: res.id})
|
||||
.then((res) => {
|
||||
|
||||
this.item.featured_image = res.featured_image;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
|
|
@ -253,6 +260,15 @@ export default {
|
|||
});
|
||||
|
||||
},
|
||||
deleteThumbnail() {
|
||||
this.updateThumbnail({itemId: this.itemId, thumbnailId: 0})
|
||||
.then((res) => {
|
||||
this.item.featured_image = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
deleteFile(index) {
|
||||
|
||||
}
|
||||
|
|
@ -296,7 +312,38 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.thumbnail-field {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
img {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.thumbnail-buttons-row {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.thumbnail-buttons-row {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: 31px;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
padding: 2px 8px;
|
||||
border-radius: 0px 4px 0px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -45,12 +45,16 @@
|
|||
<div class="columns box available-fields-area" >
|
||||
<draggable class="column" :list="availableFieldList" :options="{ sort: false, group: { name:'fields', pull: 'clone', put: false, revertClone: true }}">
|
||||
<div class="available-field-item" v-if="index % 2 == 0" v-for="(field, index) in availableFieldList" :key="index">
|
||||
{{ field.name }} <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
|
||||
<a @click.prevent="addFieldViaButton(field)">
|
||||
<b-icon type="is-gray" class="is-pulled-left" icon="arrow-left-bold"></b-icon>
|
||||
</a> {{ field.name }} <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
|
||||
</div>
|
||||
</draggable>
|
||||
<draggable class="column" :list="availableFieldList" :options="{ sort: false, group: { name:'fields', pull: 'clone', put: false, revertClone: true }}">
|
||||
<div class="available-field-item" v-if="index % 2 != 0" v-for="(field, index) in availableFieldList" :key="index">
|
||||
{{ field.name }} <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
|
||||
<a @click.prevent="addFieldViaButton(field)">
|
||||
<b-icon type="is-gray" class="is-pulled-left" icon="arrow-left-bold"></b-icon>
|
||||
</a> {{ field.name }} <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
|
@ -119,6 +123,11 @@ export default {
|
|||
this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
|
||||
|
||||
},
|
||||
addFieldViaButton(fieldType) {
|
||||
let lastIndex = this.activeFieldList.length;
|
||||
this.activeFieldList.push(fieldType);
|
||||
this.addNewField(fieldType, lastIndex);
|
||||
},
|
||||
addNewField(newField, newIndex) {
|
||||
this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'auto-draft', isRepositoryLevel: this.isRepositoryLevel, newIndex: newIndex})
|
||||
.then((field) => {
|
||||
|
|
|
|||
|
|
@ -74,12 +74,12 @@
|
|||
<div class="column">
|
||||
<b-filter :label="$i18n.get('label_available_field_types')">
|
||||
<div class="columns box available-fields-area" >
|
||||
<draggable class="column" :list="availableFieldList" :options="{ sort: false, group: { name:'filters', pull: 'clone', put: false, revertClone: true }}">
|
||||
<draggable class="column" :list="availableFieldList" :options="{ sort: false, group: { name:'filters', pull: true, put: false, revertClone: true }}">
|
||||
<div class="available-field-item" v-if="index % 2 == 0" v-for="(field, index) in availableFieldList" :key="index">
|
||||
{{ field.name }} <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
|
||||
</div>
|
||||
</draggable>
|
||||
<draggable class="column" :list="availableFieldList" :options="{ sort: false, group: { name:'filters', pull: 'clone', put: false, revertClone: true }}">
|
||||
<draggable class="column" :list="availableFieldList" :options="{ sort: false, group: { name:'filters', pull: true, put: false, revertClone: true }}">
|
||||
<div class="available-field-item" v-if="index % 2 != 0" v-for="(field, index) in availableFieldList" :key="index">
|
||||
{{ field.name }} <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
|
||||
</div>
|
||||
|
|
@ -181,7 +181,7 @@ export default {
|
|||
this.sendFilter({
|
||||
collectionId: this.collectionId,
|
||||
fieldId: this.choosenField.id,
|
||||
name: this.selectedFilterType.name,
|
||||
name: this.choosenField.name,
|
||||
filterType: this.selectedFilterType.name,
|
||||
status: 'auto-draft',
|
||||
isRepositoryLevel: this.isRepositoryLevel,
|
||||
|
|
@ -210,7 +210,16 @@ export default {
|
|||
.then((filter) => {
|
||||
let index = this.activeFilterList.findIndex(deletedFilter => deletedFilter.id === filter.id);
|
||||
if (index >= 0)
|
||||
|
||||
this.activeFilterList.splice(index, 1);
|
||||
this.isLoadingFieldTypes = true;
|
||||
this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel})
|
||||
.then((res) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
});
|
||||
|
||||
if (!this.isRepositoryLevel)
|
||||
this.updateFiltersOrder();
|
||||
|
|
@ -251,7 +260,16 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
availableFieldList() {
|
||||
return this.getFields();
|
||||
let availableFields = this.getFields();
|
||||
for (let activeFilter of this.activeFilterList) {
|
||||
for (let i = availableFields.length - 1; i >= 0 ; i--) {
|
||||
if (activeFilter.field != undefined) {
|
||||
if (activeFilter.field.field_id == availableFields[i].id)
|
||||
availableFields.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
return availableFields;
|
||||
},
|
||||
activeFilterList() {
|
||||
return this.getFilters();
|
||||
|
|
@ -272,14 +290,6 @@ export default {
|
|||
this.isLoadingFilters = true;
|
||||
this.isLoadingFilterTypes = true;
|
||||
|
||||
this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel})
|
||||
.then((res) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
});
|
||||
|
||||
this.fetchFilterTypes()
|
||||
.then((res) => {
|
||||
this.isLoadingFilterTypes = false;
|
||||
|
|
@ -291,6 +301,14 @@ export default {
|
|||
this.fetchFilters({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel})
|
||||
.then((res) => {
|
||||
this.isLoadingFilters = false;
|
||||
// Needs to be done after activeFilterList exists to compare and remove chosen fields.
|
||||
this.fetchFields({collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel})
|
||||
.then((res) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFieldTypes = false;
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoadingFilters = false;
|
||||
|
|
|
|||
Loading…
Reference in New Issue