Adds helper buttons to Collection Edition Page.

This commit is contained in:
mateuswetah 2018-03-22 15:19:12 -03:00
parent 36571e34bf
commit 19c5759cf7
3 changed files with 69 additions and 33 deletions

View File

@ -5,18 +5,25 @@
<!-- Name -------------------------------- -->
<b-field
:addons="false"
:label="$i18n.get('label_name')"
:type="editFormErrors['name'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['name'] != undefined ? editFormErrors['name'] : ''">
<help-button
:title="$i18n.getHelperTitle('collections', 'name')"
:message="$i18n.getHelperMessage('collections', 'name')">
</help-button>
<b-input
id="tainacan-text-name"
v-model="form.name"
@focus="clearErrors('name')">
</b-input>
</b-input>
</b-field>
<!-- Thumbnail -------------------------------- -->
<b-field :label="$i18n.get('label_image')">
<b-field
:addons="false"
:label="$i18n.get('label_image')">
<div class="thumbnail-field">
<b-upload
v-if="collection.featured_image == undefined || collection.featured_image == false"
@ -49,10 +56,15 @@
</b-field>
<!-- Description -------------------------------- -->
<b-field
:label="$i18n.get('label_description')"
:type="editFormErrors['description'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''">
<b-field
:addons="false"
:label="$i18n.get('label_description')"
:type="editFormErrors['description'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['description'] != undefined ? editFormErrors['description'] : ''">
<help-button
:title="$i18n.getHelperTitle('collections', 'description')"
:message="$i18n.getHelperMessage('collections', 'description')">
</help-button>
<b-input
id="tainacan-text-description"
type="textarea"
@ -62,10 +74,15 @@
</b-field>
<!-- Status -------------------------------- -->
<b-field
<b-field
:addons="false"
:label="$i18n.get('label_status')"
:type="editFormErrors['status'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''">
<help-button
:title="$i18n.getHelperTitle('collections', 'status')"
:message="$i18n.getHelperMessage('collections', 'status')">
</help-button>
<b-select
id="tainacan-select-status"
v-model="form.status"
@ -81,26 +98,36 @@
</b-field>
<!-- Slug -------------------------------- -->
<b-field
<b-field
:addons="false"
:label="$i18n.get('label_slug')"
:type="editFormErrors['slug'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['slug'] != undefined ? editFormErrors['slug'] : ''">
<help-button
:title="$i18n.getHelperTitle('collections', 'slug')"
:message="$i18n.getHelperMessage('collections', 'slug')">
</help-button>
<b-input
id="tainacan-text-slug"
v-model="form.slug"
@focus="clearErrors('slug')">
</b-input>
</b-field>
<button
id="button-cancel-collection-creation"
class="button"
type="button"
@click="cancelBack">{{ $i18n.get('cancel') }}</button>
<button
id="button-submit-collection-creation"
@click.prevent="onSubmit"
class="button is-primary">{{ $i18n.get('save') }}</button>
<div class="field is-grouped form-submit">
<div class="control">
<button
id="button-cancel-collection-creation"
class="button is-outlined"
type="button"
@click="cancelBack">{{ $i18n.get('cancel') }}</button>
</div>
<div class="control">
<button
id="button-submit-collection-creation"
@click.prevent="onSubmit"
class="button is-success">{{ $i18n.get('save') }}</button>
</div>
</div>
<p class="help is-danger">{{formErrorMessage}}</p>
</form>

View File

@ -2,7 +2,13 @@
<div class="page-container">
<b-tag v-if="!isLoading" :type="'is-' + getStatusColor(item.status)" v-text="item.status"></b-tag>
<form v-if="!isLoading" class="tainacan-form" label-width="120px">
<b-field :label="$i18n.get('label_status')">
<b-field
:addons="false"
:label="$i18n.get('label_status')">
<help-button
:title="$i18n.getHelperTitle('items', 'status')"
:message="$i18n.getHelperMessage('items', 'status')">
</help-button>
<b-select
id="status-select"
v-model="form.status"
@ -15,10 +21,6 @@
:disabled="statusOption.disabled">{{ statusOption.label }}
</option>
</b-select>
<help-button
:title="$i18n.getHelperTitle('items', 'status')"
:message="$i18n.getHelperMessage('items', 'status')">
</help-button>
</b-field>
<!-- Thumbnail -------------------------------- -->
@ -104,16 +106,22 @@
:src="attachment.url"/>
</figure>
</div>
</div>
<button
id="button-cancel-item-creation"
class="button"
type="button"
@click="cancelBack">{{ $i18n.get('cancel') }}</button>
<button
id="button-submit-item-creation"
@click.prevent="onSubmit"
class="button is-primary" :disabled="formHasErrors">{{ $i18n.get('save') }}</button>
</div>
<div class="field is-grouped form-submit">
<div class="control">
<button
id="button-cancel-item-creation"
class="button is-outlined"
type="button"
@click="cancelBack">{{ $i18n.get('cancel') }}</button>
</div>
<div class="control">
<button
id="button-submit-item-creation"
@click.prevent="onSubmit"
class="button is-success" :disabled="formHasErrors">{{ $i18n.get('save') }}</button>
</div>
</div>
</form>
<b-loading :active.sync="isLoading" :canCancel="false">

View File

@ -92,6 +92,7 @@ html {
.label {
font-weight: normal;
font-size: 14px;
display: inline-block;
}
.required-field-asterisk {
color: $gray;