tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Begins TermsEditionPage.

This commit is contained in:
mateuswetah 2018-03-26 13:12:22 -03:00
parent 545d0014a0
commit 39dd23b0f1
5 changed files with 324 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/fixtures/example.json Normal file
View File

@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

108
src/admin/components/edition/category-edition-form.vue
View File

@ -98,6 +98,49 @@
</div>
</b-field>
<!-- Terms -->
<b-field
:addons="false"
:label="$i18n.get('label_category_terms')">
<button
class="button is-secondary"
type="button"
@click="addNewTerm()">
{{ $i18n.get('label_add_new_term') }}
</button>
<div
v-for="(term, index) in termsList"
:key="index">
<span
class="field-name"
:class="{'is-danger': formWithErrors == term.id }">
{{ term.name }}
</span>
<span
class="loading-spinner"
v-if="term.id == undefined"/>
<span
class="controls"
v-if="term.id !== undefined">
<a @click.prevent="editTerm(term)">
<b-icon
type="is-gray"
icon="pencil"/>
</a>
<a @click.prevent="removeTerm(term)">
<b-icon
type="is-gray"
icon="delete"/>
</a>
</span>
</div>
</b-field>
<!-- Submit -->
<div class="field is-grouped form-submit">
<div class="control">
<button
@ -135,14 +178,15 @@
return {
categoryId: Number,
category: null,
isLoading: false,
isLoadingCategory: false,
isLoadingTerms: false,
isUpdatingSlug: false,
form: {
name: String,
status: String,
description: String,
slug: String,
allowInsert: String,
allowInsert: String
},
statusOptions: [{
value: 'publish',
@ -161,18 +205,28 @@
formErrorMessage: '',
}
},
computed: {
termsList() {
return this.getCategoryTerms();
}
},
methods: {
...mapActions('category', [
'createCategory',
'updateCategory',
'fetchCategory',
'fetchOnlySlug',
'fetchCategoryTerms',
'sendTerm',
'updateTerm',
'deleteTerm'
]),
...mapGetters('category',[
'getCategory'
'getCategory',
'getCategoryTerms'
]),
onSubmit() {
this.isLoading = true;
this.isLoadingCategory = true;
let data = {
categoryId: this.categoryId,
@ -195,7 +249,7 @@
this.form.status = this.category.status;
this.allowInsert = this.category.allow_insert;
this.isLoading = false;
this.isLoadingCategory = false;
this.formErrorMessage = '';
this.editFormErrors = {};
@ -209,7 +263,7 @@
}
this.formErrorMessage = errors.error_message;
this.isLoading = false;
this.isLoadingCategory = false;
});
},
updateSlug(){
@ -239,7 +293,7 @@
.catch(errors => {
this.$console.error(errors);
this.isLoading = false;
this.isUpdatingSlug = false;
});
},
@ -259,7 +313,7 @@
},
createNewCategory() {
// Puts loading on Draft Category creation
this.isLoading = true;
this.isLoadingCategory = true;
// Creates draft Category
let data = {
@ -285,7 +339,7 @@
// Pre-fill status with publish to incentivate it
this.form.status = 'publish';
this.isLoading = false;
this.isLoadingCategory = false;
}
)
@ -300,6 +354,31 @@
labelNewTerms(){
return ( this.form.allowInsert === 'yes' ) ? this.$i18n.get('label_yes') : this.$i18n.get('label_no');
},
addNewTerm() {
this.$console.log("CREATING NEW TERM");
this.sendTerm({category: this.categoryId, status: 'auto-draft'})
.then(() => {
})
.catch(() => {
});
},
editTerm(term) {
this.$console.log(term);
},
removeTerm(term) {
this.$console.log(term);
this.deleteTerm(term.id)
.then(() => {
})
.catch(() => {
});
}
},
created(){
@ -307,7 +386,8 @@
this.createNewCategory();
} else if (this.$route.fullPath.split("/").pop() === "edit") {
this.isLoading = true;
this.isLoadingCategory = true;
this.isLoadingTerms = true;
// Obtains current category ID from URL
this.pathArray = this.$route.fullPath.split("/").reverse();
@ -323,7 +403,13 @@
this.form.status = this.category.status;
this.form.allowInsert = this.category.allow_insert;
this.isLoading = false;
this.isLoadingCategory = false;
});
this.fetchTerms(this.categoryId)
.then(() => {
// Fill this.form data with current data.
this.isLoadingCategory = false;
});
}
}

5
src/admin/components/edition/collection-edition-form.vue
View File

@ -145,7 +145,7 @@
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { mapActions } from 'vuex'
export default {
name: 'CollectionEditionForm',
@ -190,9 +190,6 @@ export default {
'sendAttachment',
'updateThumbnail'
]),
...mapGetters('collection',[
'getCollection'
]),
onSubmit() {
// Puts loading on Draft Collection creation
this.isLoading = true;

219
src/admin/components/edition/term-edition-form.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<form
id="termEditForm"
class="tainacan-form"
@submit.prevent="saveEdition(editForm)">
<b-field
:addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label">
{{ $i18n.get('label_name') }}
<span
class="required-term-asterisk"
:class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
<help-button
:title="$i18n.getHelperTitle('terms', 'name')"
:message="$i18n.getHelperMessage('terms', 'name')"/>
</label>
<b-input
v-model="editForm.name"
name="name"
@focus="clearErrors('name')"/>
</b-field>
<b-field
:addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label">
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('terms', 'description')"
:message="$i18n.getHelperMessage('terms', 'description')"/>
</label>
<b-input
type="textarea"
name="description"
v-model="editForm.description"
@focus="clearErrors('description')" />
</b-field>
<!-- <b-field
:addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label">
{{ $i18n.get('label_status') }}
<help-button
:title="$i18n.getHelperTitle('terms', 'status')"
:message="$i18n.getHelperMessage('terms', 'status')"/>
</label>
<div class="inline-block">
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
v-model="editForm.status"
native-value="publish">
{{ $i18n.get('publish_visibility') }}
</b-radio>
<br>
<b-radio
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"
v-model="editForm.status"
native-value="private">
{{ $i18n.get('private_visibility') }}
</b-radio>
</div>
</b-field> -->
<br>
<b-field
:addons="false"
:type="formErrors['parent_term'] != undefined ? 'is-danger' : ''"
:message="formErrors['parent_term'] != undefined ? formErrors['parent_term'] : ''">
<label class="label">
{{ $i18n.get('label_parent_term') }}
<help-button
:title="$i18n.getHelperTitle('terms', 'parent_term')"
:message="$i18n.getHelperMessage('terms', 'parent_term')"/>
</label>
<b-select
id="parent_term_select"
v-model="editForm.parent_term"
:placeholder="$i18n.get('instruction_select_a_parent_term')">
<option
@focus="clearErrors('label_parent_term')"
id="tainacan-select-parent-term"
v-for="(parentTerm, index) in parentTermsList"
:key="index"
:value="editForm.parent_term.id">
{{ parentTerm.name }}
</option>
</b-select>
</b-field>
<div class="term is-grouped form-submit">
<div class="control">
<button
class="button is-outlined"
@click.prevent="cancelEdition()"
slot="trigger">
{{ $i18n.get('cancel') }}
</button>
</div>
<div class="control">
<button
class="button is-success"
type="submit">
{{ $i18n.get('save') }}
</button>
</div>
</div>
<p class="help is-danger">{{ formErrorMessage }}</p>
</form>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'TermEditionForm',
data(){
return {
editForm: {},
oldForm: {},
formErrors: {},
formErrorMessage: '',
closedByForm: false
}
},
props: {
index: '',
editedTerm: Object,
originalTerm: Object,
categoryId: ''
},
computed: {
parentTermsList() {
return this.getTerms();
}
},
created() {
this.editForm = this.editedTerm;
this.formErrors = this.editForm.formErrors != undefined ? this.editForm.formErrors : {};
this.formErrorMessage = this.editForm.formErrors != undefined ? this.editForm.formErrorMessage : '';
this.oldForm = JSON.parse(JSON.stringify(this.originalTerm));
},
beforeDestroy() {
if (this.closedByForm) {
this.editedTerm.saved = true;
} else {
this.oldForm.saved = this.editForm.saved;
if (JSON.stringify(this.editForm) != JSON.stringify(this.oldForm))
this.editedTerm.saved = false;
else
this.editedTerm.saved = true;
}
},
methods: {
...mapActions('category', [
'updateTerm'
]),
...mapGetters('category', [
'getTerms'
]),
saveEdition(term) {
this.updateTerm({repositoryId: this.repositoryId, termId: term.id, index: this.index, options: this.editForm})
.then(() => {
this.editForm = {};
this.formErrors = {};
this.formErrorMessage = '';
this.closedByForm = true;
this.$emit('onEditionFinished');
})
.catch((errors) => {
for (let error of errors.errors) {
for (let attribute of Object.keys(error))
this.formErrors[attribute] = error[attribute];
}
this.formErrorMessage = errors.error_message;
this.$emit('onErrorFound');
this.editForm.formErrors = this.formErrors;
this.editForm.formErrorMessage = this.formErrorMessage;
});
},
clearErrors(attribute) {
this.formErrors[attribute] = undefined;
},
cancelEdition() {
this.closedByForm = true;
this.$emit('onEditionCanceled');
},
}
}
</script>
<style lang="scss" scoped>
@import "../../scss/_variables.scss";
form {
padding: 1.0em 2.0em;
border-top: 1px solid $draggable-border-color;
border-bottom: 1px solid $draggable-border-color;
margin-top: 1.0em;
}
</style>

2
src/admin/tainacan-admin-i18n.php
View File

@ -122,6 +122,7 @@ return [
'label_collection_filters' => __( 'Collection Filters', 'tainacan' ),
'label_parent_term' => __( 'Parent Term', 'tainacan' ),
'label_add_new_term' => __( 'Add New Term', 'tainacan' ),
'label_category_terms' => __( 'Category Terms', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders
'instruction_dragndrop_fields_collection' => __( 'Drag and drop Fields here to Collection.', 'tainacan' ),
@ -134,6 +135,7 @@ return [
'instruction_image_upload_box' => __( 'Drop an image here or click to upload.', 'tainacan' ),
'instruction_select_a_status' => __( 'Select a status:', 'tainacan' ),
'instruction_select_a_filter_type' => __( 'Select a filter type:', 'tainacan' ),
'instruction_select_a_parent_term' => __( 'Select a parent term:', 'tainacan' ),
// Info. Other feedback to user.
'info_name_is_required' => __( 'Name is required.', 'tainacan' ),