From ad773258d63a304b12b1478160140b4f8d59e609 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 27 Feb 2018 15:42:41 -0300
Subject: [PATCH] Creates and adds CollectionFieldsEditionPage. Begins
 implementation of Drag-N-Drop Fields box.

---
 package-lock.json                             | 13 ++++
 package.json                                  |  1 +
 src/admin/js/main.js                          |  3 +
 src/admin/js/router.js                        |  3 +-
 .../pages/edition/collection-edition-page.vue |  5 ++
 .../collection-fields-edition-page.vue        | 71 +++++++++++++++++++
 src/admin/pages/edition/item-edition-page.vue |  8 +--
 src/admin/tainacan-admin-i18n.php             |  3 +
 8 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 src/admin/pages/edition/collection-fields-edition-page.vue

diff --git a/package-lock.json b/package-lock.json
index 4062bba2d..d5857e988 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 50fef16ec..280c912d5 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/src/admin/js/main.js b/src/admin/js/main.js
index 05dba895e..9dac91cdb 100644
--- a/src/admin/js/main.js
+++ b/src/admin/js/main.js
@@ -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',
diff --git a/src/admin/js/router.js b/src/admin/js/router.js
index fe49ae978..80bf7d646 100644
--- a/src/admin/js/router.js
+++ b/src/admin/js/router.js
@@ -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')} }
       ]
     },
diff --git a/src/admin/pages/edition/collection-edition-page.vue b/src/admin/pages/edition/collection-edition-page.vue
index 1171a553e..11bdef814 100644
--- a/src/admin/pages/edition/collection-edition-page.vue
+++ b/src/admin/pages/edition/collection-edition-page.vue
@@ -192,3 +192,8 @@ export default {
 }
 </script>
 
+<style scoped>
+
+</style>
+
+
diff --git a/src/admin/pages/edition/collection-fields-edition-page.vue b/src/admin/pages/edition/collection-fields-edition-page.vue
new file mode 100644
index 000000000..1e23f5a6a
--- /dev/null
+++ b/src/admin/pages/edition/collection-fields-edition-page.vue
@@ -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>
+
+
diff --git a/src/admin/pages/edition/item-edition-page.vue b/src/admin/pages/edition/item-edition-page.vue
index 5064f352b..d9d72b018 100644
--- a/src/admin/pages/edition/item-edition-page.vue
+++ b/src/admin/pages/edition/item-edition-page.vue
@@ -32,11 +32,11 @@
                         </div>
                     </section>
                 </b-upload>
-            </b-field>
+            </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"
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index 2f06e41fb..9c8203a26 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -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'),
 ]
 
  ?>
\ No newline at end of file