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

Creates and adds CollectionFieldsEditionPage. Begins implementation of Drag-N-Drop Fields box.

This commit is contained in:
mateuswetah 2018-02-27 15:42:41 -03:00
parent 481ae36532
commit ad773258d6
8 changed files with 102 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -7809,6 +7809,11 @@
"is-plain-obj": "1.1.0"
}
},
"sortablejs": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.7.0.tgz",
"integrity": "sha1-gKKyNwq9Vo4c7IwnETHvMKkE+ig="
},
"source-list-map": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz",
@ -8945,6 +8950,14 @@
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
"dev": true
},
"vuedraggable": {
"version": "2.16.0",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.16.0.tgz",
"integrity": "sha512-fr9gcWKXMJlzbbtJcrQs4kU7qdOZqd4SEpAcx+r0nykbW8AygZN0aKVpadEtI53T8A2azhzCdXMvEqrLuKE2fA==",
"requires": {
"sortablejs": "1.7.0"
}
},
"vuex": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"qs": "^6.5.1",
"sass-loader": "^6.0.6",
"vue": "^2.5.13",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {

3
src/admin/js/main.js
View File

@ -15,6 +15,7 @@ import TaincanFormItem from '../../classes/field-types/tainacan-form-item.vue';
// Remaining imports
import AdminPage from '../admin.vue'
import draggable from 'vuedraggable'
import store from '../../js/store/store'
import router from './router'
import { I18NPlugin, RouterHelperPlugin } from './utilities';
@ -37,7 +38,9 @@ Vue.component('tainacan-radio', Radio);
Vue.component('tainacan-numeric', Numeric);
Vue.component('tainacan-date', Date);
Vue.component('tainacan-relationship', Relationship);
Vue.component('tainacan-form-item', TaincanFormItem);
Vue.component('draggable', draggable);
new Vue({
el: '#tainacan-admin-app',

3
src/admin/js/router.js
View File

@ -5,6 +5,7 @@ import AdminPage from '../admin.vue'
import CollectionsPage from '../pages/lists/collections-page.vue'
import CollectionPage from '../pages/singles/collection-page.vue'
import CollectionEditionPage from '../pages/edition/collection-edition-page.vue'
import CollectionFieldsEditionPage from '../pages/edition/collection-fields-edition-page.vue'
import ItemsPage from '../pages/lists/items-page.vue'
import ItemPage from '../pages/singles/item-page.vue'
import ItemEditionPage from '../pages/edition/item-edition-page.vue'
@ -39,7 +40,7 @@ const routes = [
{ path: '', redirect: 'items'},
{ path: 'items', component: ItemsList, name: 'ItemsList', meta: {title: i18nGet('title_collection_page')} },
{ path: 'edit', component: CollectionEditionPage, name: 'CollectionEditionPage', meta: {title: i18nGet('title_collection_edition')} },
{ path: 'fields', component: FieldsList, name: 'FieldsList', meta: {title: i18nGet('title_collection_page')} },
{ path: 'fields', component: CollectionFieldsEditionPage, name: 'CollectionFieldsEditionPage', meta: {title: i18nGet('title_collection_fields_edition')} },
{ path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_page')} }
]
},

5
src/admin/pages/edition/collection-edition-page.vue
View File

@ -192,3 +192,8 @@ export default {
}
</script>
<style scoped>
</style>

71
src/admin/pages/edition/collection-fields-edition-page.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div>
<h1>Collection Fields Edition Page</h1>
<div class="columns">
<div class="column">
<b-field :label="$i18n.get('label_active_fields')" is-grouped>
<draggable class="active-fields-area" :class="{'fields-receive': isDraggingFromAvailable}" :list="activeFieldList" :options="{group:'fields'}">
<div class="field-item active" v-for="(field, index) in activeFieldList" :key="index">{{field}} <b-icon is-small icon="pencil"></b-icon></div>
<div slot="footer">Drag and drop Fields here to add them to Collection.</div>
</draggable>
</b-field>
</div>
<div class="column">
<b-field :label="$i18n.get('label_available_fields')" is-grouped>
<draggable class="available-fields-area" :list="availableFieldList" @start="isDraggingFromAvailable=true" @end="isDraggingFromAvailable=false" :options="{ group: { name:'fields', pull: 'clone', put: 'false' }}">
<div class="field-item" v-for="(field, index) in availableFieldList" :key="index">{{field}}</div>
</draggable>
</b-field>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CollectionFieldsEditionPage',
data(){
return {
availableFieldList: ['text', 'textarea', 'numeric', 'select', 'radio', 'checkbox', 'relationship', 'categories'],
activeFieldList: [],
isDraggingFromAvailable: false
}
}
}
</script>
<style lang="scss" scoped>
.available-fields-area {
padding: 10px;
border: 1px dashed grey;
border-radius: 5px;
background-color: ghostwhite;
}
.active-fields-area {
min-height: 40px;
padding: 10px;
border: 1px solid grey;
border-radius: 5px;
}
.fields-receive {
background-color: whitesmoke;
border: 1px dashed grey;
}
.field-item {
padding: 0.2em 0.5em;
margin: 10px;
border-radius: 5px;
color: white;
display: inline-block;
background-color: darkslategrey;
}
.active {
display: block;
background-color: lightslategray;
.icon { float: right }
}
</style>

6
src/admin/pages/edition/item-edition-page.vue
View File

@ -34,9 +34,9 @@
</b-upload>
</b-field>
<tainacan-form-item
v-for="(field, index) in fieldList"
v-bind:key="index"
:field="field"></tainacan-form-item>
v-for="(field, index) in fieldList"
v-bind:key="index"
:field="field"></tainacan-form-item>
<button
id="button-cancel-item-creation"
class="button"

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

@ -43,6 +43,7 @@ return [
'title_item_edition' => __('Item Edition Page', 'tainacan'),
'title_category_edition' => __('Category Edition Page', 'tainacan'),
'title_filter_edition' => __('Filter Edition Page', 'tainacan'),
'title_collection_fields_edition' => __('Collection Fields Edition Page', 'tainacan'),
// Labels (used mainly on Aria Labels)
'label_menu' => __('Menu', 'tainacan'),
@ -58,6 +59,8 @@ return [
'label_button_delete' => __('Button Delete', 'tainacan'),
'label_collections_per_page' => __('Number of Collections Per Page', 'tainacan'),
'label_items_per_page' => __('Number of Items Per Page', 'tainacan'),
'label_active_fields' => __('Active Fields', 'tainacan'),
'label_available_fields' => __('Available Fields', 'tainacan'),
]
?>