Skip to content

Commit

Permalink
Added buttons to component and removed them from template
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joossensei
Joossensei committed Feb 21, 2022
1 parent ce8daf6 commit 3e708f7
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 146 deletions.
175 changes: 49 additions & 126 deletions assets/js/app/editor/Components/Collection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</button>
</div>
</div>

<!-- {{ log(elements) }}-->
<div
v-for="element in elements"
:key="element.hash"
Expand All @@ -32,12 +32,43 @@
{{ element.label }}
</div>
<!-- Navigation buttons -->
<div :is="compile(element.buttons)"></div>
<div class="btn-group ml-auto mr-2" role="group" aria-label="Collection buttons">
<button class="action-move-up-collection-item btn btn-light btn-sm" style="white-space: nowrap">
<i class="fas fa-fw fa-chevron-up"></i>
{{ labels.collection_up }}
</button>
<button
class="action-move-down-collection-item btn btn-light btn-sm"
style="white-space: nowrap"
>
<i class="fas fa-fw fa-chevron-down"></i>
{{ labels.collection_down }}
</button>
<button
class="action-remove-collection-item btn btn-light-danger btn-sm"
style="white-space: nowrap"
data-confirmation="{{ labels.collection_delete_confirm }}"
>
<i class="fas fa-fw fa-trash"></i>
{{ labels.collection_delete }}
</button>
</div>
</div>
</div>
<div class="card details">
<!-- The actual field -->
<div :is="currentComponent" class="card-body"></div>
<editor-textarea
:name="element.name"
:rows="element.rows"
:required="element.required"
:readonly="element.readonly"
:data-errormessage="element.errormessage"
:placeholder="element.placeholder"
:style="{ height: element.styleHeight }"
:maxlength="element.maxlength"
:title="element.label"
>
</editor-textarea>
</div>
</div>

Expand All @@ -62,7 +93,7 @@
:key="field.type"
class="dropdown-item"
:data-field="field.type"
@click="addCollectionItem(field.slug)"
@click="addCollectionItem($event)"
>
<i :class="[field.icon, 'fas fa-fw']" />
{{ field.label }}
Expand All @@ -74,7 +105,7 @@
type="button"
class="btn btn-secondary btn-small"
:data-field="fields[0].slug"
@click="addCollectionItem(fields.slug)"
@click="addCollectionItem(fields.type)"
>
<i :class="[fields[0].icon, 'fas fa-fw']" />
{{ labels.add_collection_item }}
Expand All @@ -85,53 +116,16 @@
</template>

<script>
import { compile } from 'vue';
import {compile} from 'vue';
/*
Editor Components for rendering
*/
import Text from './Text';
import Slug from './Slug';
import Date from './Date';
import Select from './Select';
import Number from './Number';
import Html from './Html';
import Markdown from './Markdown';
import Textarea from './Textarea';
import Embed from './Embed';
import Image from './Image';
import Imagelist from './Imagelist';
import Email from './Email';
import Password from './Password';
import ThemeSelect from './ThemeSelect';
import Language from './Language';
import File from './File';
import Filelist from './Filelist';
import Checkbox from './Checkbox';
import $ from 'jquery';
import EditorTextarea from './Textarea';
export default {
name: 'EditorCollection',
components: {
Text,
Slug,
Date,
Select,
Number,
Html,
Markdown,
Textarea,
Embed,
Image,
Imagelist,
Email,
Password,
ThemeSelect,
Language,
File,
Filelist,
Checkbox,
},
components: { EditorTextarea },
props: {
name: {
type: String,
Expand All @@ -149,6 +143,7 @@ export default {
required: true,
},
limit: {
type: Number,
required: true,
},
variant: {
Expand All @@ -157,6 +152,7 @@ export default {
},
},
data() {
console.log(this.existingFields);
let fieldSelectOptions = [];
return {
currentComponent: '',
Expand Down Expand Up @@ -313,94 +309,21 @@ export default {
getCollectionItemFromPressedButton(button) {
return window.$(button).closest('.collection-item').last();
},
addCollectionItem(fieldName) {
console.log(this.fields);
addCollectionItem(event) {
this.counter++;
// Create switch case for every field type
switch (fieldName) {
case 'text':
var component = Text;
break;
case 'slug':
this.elements.push(Slug);
this.currentComponent = Slug;
break;
case 'date':
this.elements.push(Date);
this.currentComponent = Date;
break;
case 'select':
this.elements.push(Select);
this.currentComponent = Select;
break;
case 'number':
this.elements.push(Number);
this.currentComponent = Number;
break;
case 'html':
this.elements.push(Html);
this.currentComponent = Html;
break;
case 'markdown':
this.elements.push(Markdown);
this.currentComponent = Markdown;
break;
case 'textarea':
this.elements.push(Textarea);
this.currentComponent = Textarea;
break;
case 'embed':
this.elements.push(Embed);
this.currentComponent = Embed;
break;
case 'image':
this.elements.push(Image);
this.currentComponent = Image;
break;
case 'imagelist':
this.elements.push(Imagelist);
this.currentComponent = Imagelist;
break;
case 'email':
this.elements.push(Email);
this.currentComponent = Email;
break;
case 'password':
this.elements.push(Password);
this.currentComponent = Password;
break;
case 'themeSelect':
this.elements.push(ThemeSelect);
this.currentComponent = ThemeSelect;
break;
case 'language':
this.elements.push(Language);
this.currentComponent = Language;
break;
case 'file':
this.elements.push(File);
this.currentComponent = File;
break;
case 'filelist':
this.elements.push(Filelist);
this.currentComponent = Filelist;
break;
case 'checkbox':
this.elements.push(Checkbox);
this.currentComponent = Checkbox;
break;
}
this.currentComponent(component);
this.elements.push(component);
return this.currentComponent;
let field = this.getSelectedField(event);
this.elements.push(field);
},
getSelectedField(event) {
const target = $(event.target).attr('data-field')
? $(event.target)
: $(event.target).closest('[data-field]');
let selectValue = target.attr('data-field');
return this.fields.find((field) => field.label === selectValue);
let objValues = Object.values(this.fields);
console.log(objValues.find((field) => field.type === selectValue));
return objValues.find((field) => field.type === selectValue);
},
},
};
Expand Down
5 changes: 1 addition & 4 deletions templates/_macro/_macro.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,13 @@
</div>
{% endset %}

{# Set the buttons #}
{% set buttons %}{% include '@bolt/_partials/fields/_collection_buttons.html.twig' with { in_compound: true, 'hash': hash } %}{% endset %}

{# Set the icon #}
{% set icon = item_field.definition.icon %}
{% if icon is empty%}{% set icon = 'fa-plus' %}{% endif %}

{# set the label manually as set in _base.html.twig, to pass to Collection.vue for templates #}
{% set label = item_field.definition.label|default(item_field.name|default('unnamed')|ucwords) %}
{% set fieldsHtml = fieldsHtml|merge([{'content': new_field, 'hash': hash, 'label': label, 'buttons': buttons, 'icon': icon}]) %}
{% set fieldsHtml = fieldsHtml|merge([{'content': new_field, 'hash': hash, 'label': label, 'icon': icon}]) %}
{% endfor %}
{{ fieldsHtml|json_encode }}
{% endapply %}{% endmacro %}
Expand Down
16 changes: 0 additions & 16 deletions templates/_partials/fields/_collection_buttons.html.twig
View file

This file was deleted.

4 changes: 4 additions & 0 deletions templates/_partials/fields/collection.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
'collapse_all': 'collection.collapse_all'|trans,
'field_label': label,
'select': 'collection.select'|trans,
'collection_up': 'collection.move_item_up'|trans,
'collection_down': 'collection.move_item_down'|trans,
'collection_delete': 'collection.remove_item'|trans,
'collection_delete_confirm': 'collection.confirm_delete'|trans
} %}
{% set limit = field.definition.get('limit')|default(200) %}

Expand Down

0 comments on commit 3e708f7

Please sign in to comment.