Small adjustments on FieldsList and CollectionsList. Adds moment library for converting data formats.

package-lock.json

@@ -5988,6 +5988,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.21.0.tgz",
+      "integrity": "sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "buefy": "^0.6.3",
     "bulma": "^0.6.2",
     "mdi": "^2.1.99",
+    "moment": "^2.21.0",
     "node-sass": "^4.7.2",
     "qs": "^6.5.1",
     "sass-loader": "^6.0.6",

src/admin/components/edition/field-edition-form.vue

@@ -1,8 +1,6 @@
 <template>
     <form id="fieldEditForm" v-on:submit.prevent="saveEdition(editForm)">    
         
-        <h2 class="is-size-5">{{ $i18n.get('edit') }}</h2>
-
         <b-field 
             :label="$i18n.get('label_name')" 
             :type="formErrors['name'] != undefined ? 'is-danger' : ''" 

src/admin/components/lists/collections-list.vue

@@ -13,7 +13,7 @@
                 hoverable 
                 striped
                 selectable
-                backend-sorting>>
+                backend-sorting>
             <template slot-scope="props">
                 
                 <b-table-column tabindex="0" label="Imagem" :aria-label="$i18n.get('label_image')" field="featured_image" width="55">
@@ -24,19 +24,24 @@
                     </router-link>
                 </b-table-column>
 
-                <b-table-column tabindex="0" label="Nome" :aria-label="$i18n.get('label_name') + ': ' + props.row.name" field="props.row.name">
+                <b-table-column tabindex="0" :label="$i18n.get('label_name')" :aria-label="$i18n.get('label_name')" field="props.row.name">
                     <router-link class="clickable-row" tag="span" :to="{path: $routerHelper.getCollectionPath(props.row.id)}">
                     {{ props.row.name }}
                     </router-link>
                 </b-table-column>
 
-                <b-table-column tabindex="0" :aria-label="$i18n.get('label_description') + ': ' + props.row.description" property="description" label="Descrição" show-overflow-tooltip field="props.row.description">
+                <b-table-column tabindex="0" :aria-label="$i18n.get('label_description')" :label="$i18n.get('label_description')" property="description" show-overflow-tooltip field="props.row.description">
                     <router-link class="clickable-row" tag="span" :to="{path: $routerHelper.getCollectionPath(props.row.id)}">
                     {{ props.row.description }}
                     </router-link>
                 </b-table-column>
 
-                <b-table-column tabindex="0" :label="$i18n.get('label_actions')" width="78" :aria-label="$i18n.get('label_ações')">
+                <b-table-column class="row-creation" tabindex="0" :aria-label="$i18n.get('label_creation') + ': ' + props.row.creation" :label="$i18n.get('label_creation')" property="creation" show-overflow-tooltip field="props.row.creation">
+                    <router-link class="clickable-row" v-html="props.row.creation" tag="span" :to="{path: $routerHelper.getCollectionPath(props.row.id)}">
+                    </router-link>
+                </b-table-column>
+
+                <b-table-column tabindex="0" :label="$i18n.get('label_actions')" width="78" :aria-label="$i18n.get('label_actions')">
                     <!-- <a id="button-view" :aria-label="$i18n.get('label_button_view')" @click.prevent.stop="goToCollectionPage(props.row.id)"><b-icon icon="eye"></a> -->
                     <a id="button-edit" :aria-label="$i18n.get('label_button_edit')" @click.prevent.stop="goToCollectionEditPage(props.row.id)"><b-icon icon="pencil"></a>
                     <a id="button-delete" :aria-label="$i18n.get('label_button_delete')" @click.prevent.stop="deleteOneCollection(props.row.id)"><b-icon icon="delete"></a>
@@ -158,13 +163,21 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+    @import "../../scss/_variables.scss";
 
     .table-thumb {
         max-height: 38px !important;
         vertical-align: middle !important;
     }
 
+    .row-creation {
+        color: $gray-light;
+        font-size: 0.75em;
+        line-height: 1.5
+    }
+
     .clickable-row{ cursor: pointer !important; }
 
 </style>

src/admin/components/lists/fields-list.vue

@@ -17,9 +17,9 @@
                                 <div class="handle">
                                     <b-icon type="is-gray" class="is-pulled-left" icon="drag"></b-icon>
                                     <span class="field-name">{{ field.name }}</span>
-                                    <span class="label-details"><span class="loading-spinner" v-if="field.id == undefined"></span></span>
+                                    <span class="label-details">{{ $i18n.get(field.field_type_object.component)}}<span class="loading-spinner" v-if="field.id == undefined"></span></span>
                                     <span class="controls">
-                                        <!-- <b-switch size="is-small" @input="onChangeEnable">Active</b-switch>      -->
+                                        <b-switch size="is-small" v-model="field.disabled" @input="onChangeEnable($event, index)">{{ field.disabled ? $i18n.get('label_disabled') : $i18n.get('label_enabled') }}</b-switch>
                                         <a @click.prevent="removeField(field)" v-if="field.id != undefined">
                                             <b-icon icon="delete"></b-icon>
                                         </a>
@@ -43,7 +43,7 @@
                 </b-field>
             </div>
             <div class="column">
-                <b-field :label="$i18n.get('label_available_fields')">
+                <b-field :label="$i18n.get('label_available_fields_types')">
                     <div class="columns box available-fields-area" >
                         <draggable class="column" :list="availableFieldList" :options="{ sort: false, group: { name:'fields', pull: 'clone', put: false, revertClone: true }}">
                             <div class="available-field-item" v-if="index % 2 == 0" v-for="(field, index) in availableFieldList" :key="index">
@@ -108,10 +108,19 @@ export default {
         updateFieldsOrder() {
             let fieldsOrder = [];
             for (let field of this.activeFieldList) {
-                fieldsOrder.push({'id': field.id, 'enabled': true});
+                fieldsOrder.push({'id': field.id, 'enabled': !field.disabled});
             }
             this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
         },
+        onChangeEnable($event, index) {
+            this.activeFieldList[index].disabled = $event;
+            let fieldsOrder = [];
+            for (let field of this.activeFieldList) {
+                fieldsOrder.push({'id': field.id, 'enabled': !field.disabled});
+            }
+            this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
+
+        },
         addNewField(newField, newIndex) {
             this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'auto-draft', isRepositoryLevel: this.isRepositoryLevel})
             .then((field) => {

src/admin/components/navigation/primary-menu.vue

@@ -40,7 +40,7 @@
                     <b-icon size="is-small" icon="shape"></b-icon> <span class="menu-text">{{ $i18n.get('categories')}}</span>
                 </router-link></li>
                 <li><router-link tag="a" to="/events" :class="activeRoute == 'EventsPage' ? 'is-active':''">
-                    <b-icon size="is-small" icon="calendar"></b-icon> <span class="menu-text">{{ $i18n.get('events')}}</span>
+                    <b-icon size="is-small" icon="bell"></b-icon> <span class="menu-text">{{ $i18n.get('events')}}</span>
                 </router-link></li>
             </ul>
         </aside>

src/admin/js/router.js

@@ -62,7 +62,7 @@ const routes = [
     { path: '/categories/new', name: 'CategoryEditionForm', component: CategoryEditionForm, meta: {title: i18nGet('title_create_category_page'), icon: 'shape'} },
     { path: '/categories/:categoryId/edit', name: 'CategoryEditionForm', component: CategoryEditionForm, meta: {title: i18nGet('title_category_edition_page'), icon: 'shape'} },
 
-    { path: '/events',  name: 'EventsPage', component: EventsPage, meta: {title: i18nGet('title_events_page'), icon: 'calendar'} },
+    { path: '/events',  name: 'EventsPage', component: EventsPage, meta: {title: i18nGet('title_events_page'), icon: 'bell'} },
 
     { path: '*', redirect: '/'}
 ]

src/admin/pages/lists/collections-page.vue

@@ -63,6 +63,7 @@
 <script>
 import CollectionsList from '../../components/lists/collections-list.vue';
 import { mapActions, mapGetters } from 'vuex';
+import moment from 'moment'
 
 export default {
     name: 'CollectionsPage',
@@ -96,6 +97,7 @@ export default {
         },
         loadCollections() {    
             this.isLoading = true;
+            
             this.fetchCollections({ 'page': this.page, 'collectionsPerPage': this.collectionsPerPage })
             .then((res) => {
                 this.isLoading = false;
@@ -113,7 +115,10 @@ export default {
     },
     computed: {
         collections(){
-            return this.getCollections();
+            let collectionsList = this.getCollections(); 
+            for (let collection of collectionsList) 
+                collection['creation'] = this.$i18n.get('info_created_by') + collection['author_name'] + '<br>' + this.$i18n.get('info_date') + moment(collection['creation_date'], 'YYYY-MM-DD').format('DD/MM/YYYY');
+            return collectionsList;
         }
     },
     created() {

src/admin/scss/_variables.scss

@@ -72,6 +72,7 @@ $table-head-cell-border-width: 0 0 1px !important;
 $table-row-active-color: #e5e5e5;
 $table-foot-cell-color: $gray-light;
 $table-foot-cell-border-width: 1px 0 0 !important;
+$table-cell-padding: 1.0em 0.75em;
 
  
 // Bulma's modal (needs to be greather than taincan-admin-app)

src/admin/tainacan-admin-i18n.php

@@ -76,6 +76,7 @@ return [
     'label_items_per_page' => __('Items per Page:', 'tainacan'),
     'label_active_fields' => __('Active Fields', 'tainacan'),
     'label_available_fields' => __('Available Fields', 'tainacan'),
+    'label_available_fields_types' => __('Available Fields Types', 'tainacan'),
     'label_per_page' => __('per Page', 'tainacan'),
     'label_table_fields' => __('Fields on table', 'tainacan'),
     'label_required' => __('Required', 'tainacan'),
@@ -93,6 +94,9 @@ return [
     'label_selectbox_init' => __('Select', 'tainacan'),
     'label_options' => __('Insert options', 'tainacan'),
     'label_attachments' => __('Attachments', 'tainacan'),
+    'label_enabled' => __('Enabled', 'tainacan'),
+    'label_disabled' => __('Disabled', 'tainacan'),
+    'label_creation' => __('Creation', 'tainacan'),
 
     // Instructions. More complex sentences to guide user and placeholders
     'instruction_dragndrop_fields_collection' => __('Drag and drop Fields here to add them to Collection.', 'tainacan'),
@@ -117,5 +121,16 @@ return [
     'info_showing_collections'  => __('Showing collections ', 'tainacan'),
     'info_to'  => __(' to ', 'tainacan'),
     'info_of'  => __(' of ', 'tainacan'),
+    'info_created_by'  => __('Created by: ', 'tainacan'),
+    'info_date'  => __('Date: ', 'tainacan'),
+
+    // Tainacan Field Types
+    'tainacan-text'  => __('Text', 'tainacan'),
+    'tainacan-textarea'  => __('Text area', 'tainacan'),
+    'tainacan-date'  => __('Date', 'tainacan'),
+    'tainacan-numeric'  => __('Numeric', 'tainacan'),
+    'tainacan-select'  => __('Select box', 'tainacan'),
+    'tainacan-relationship'  => __('Relationship', 'tainacan'),
+    'tainacan-category'  => __('Category', 'tainacan'),
 ]
  ?>