First version of author metadata vue input. #354.

src/views/admin/components/lists/metadata-list.vue

@@ -91,6 +91,11 @@
                                         metadatum.metadata_type_object.related_mapped_prop == 'description'">
                                     {{ $i18n.get('label_core_description') }}
                             </em>
+                            <em 
+                                    v-if="metadatum.metadata_type_object.core && 
+                                        metadatum.metadata_type_object.related_mapped_prop == 'author_id'">
+                                    {{ $i18n.get('label_core_author') }}
+                            </em>
                             <span 
                                 class="not-saved" 
                                 v-if="(editForms[metadatum.id] != undefined && editForms[metadatum.id].saved != true) || metadatum.status == 'auto-draft'">

src/views/admin/components/metadata-types/core-author/Author.vue

@@ -0,0 +1,109 @@
+<template>
+    <b-autocomplete
+            clearable
+            :disabled="disabled"
+            :value="value"
+            :data="users"
+            :placeholder="$i18n.get('instruction_type_search_users')"
+            keep-first
+            open-on-focus
+            @input="fetchUsers"
+            @focus.once="($event) => fetchUsers($event.target.value)"
+            @select="onSelect"
+            :loading="isFetchingUsers"
+            field="name"
+            icon="account"
+            check-infinite-scroll
+            @infinite-scroll="fetchMoreUsers">
+        <template slot-scope="props">
+            <div class="media">
+                <div
+                        v-if="props.option.avatar_urls && props.option.avatar_urls['24']"
+                        class="media-left">
+                    <img
+                            width="24"
+                            :src="props.option.avatar_urls['24']">
+                </div>
+                <div class="media-content">
+                    {{ props.option.name }}
+                </div>
+            </div>
+        </template>
+        <template slot="empty">{{ $i18n.get('info_no_user_found') }}</template>
+    </b-autocomplete>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+    
+export default {
+    props: {
+        metadatum: Object,
+        value: [String, Number, Array],
+        disabled: false
+    },
+    data() {
+        return {
+            users: [],
+            isFetchingUsers: false,
+            userId: null,
+            usersSearchQuery: '',
+            usersSearchPage: 1,
+            totalUsers: 0
+        }
+    },
+    methods: {
+        onSelect(value) {
+            console.log(value)
+            this.$emit('input', value);
+        },
+        ...mapActions('activity', [
+            'fetchUsers'
+        ]),
+        fetchUsers: _.debounce(function (search) {
+
+            // String update
+            if (search != this.usersSearchQuery) {
+                this.usersSearchQuery = search;
+                this.users = [];
+                this.usersSearchPage = 1;
+            } 
+            
+            // String cleared
+            if (!search.length) {
+                this.usersSearchQuery = search;
+                this.users = [];
+                this.usersSearchPage = 1;
+            }
+
+            // No need to load more
+            if (this.usersSearchPage > 1 && this.users.length > this.totalUsers)
+                return;
+
+            this.isFetchingUsers = true;
+
+            this.fetchUsers({ search: this.usersSearchQuery, page: this.usersSearchPage })
+                .then((res) => {
+                    if (res.users) {
+                        for (let user of res.users)
+                            this.users.push(user); 
+                    }
+                    
+                    if (res.totalUsers)
+                        this.totalUsers = res.totalUsers;
+
+                    this.usersSearchPage++;
+                    
+                    this.isFetchingUsers = false;
+                })
+                .catch((error) => {
+                    this.$console.error(error);
+                    this.isFetchingPages = false;
+                });
+        }, 500),
+        fetchMoreUsers: _.debounce(function () {
+            this.fetchUsers(this.usersSearchQuery)
+        }, 250),
+    }
+}
+</script>

src/views/admin/components/metadata-types/core-author/class-tainacan-core-author.php

@@ -18,7 +18,7 @@ class Core_Author extends Metadata_Type {
 		$this->set_primitive_type('integer');
 		$this->set_core(true);
 		$this->set_related_mapped_prop('author_id');
-		$this->set_component('tainacan-selectbox');
+		$this->set_component('tainacan-author');
 		$this->set_name( __('Core Author', 'tainacan') );
 		$this->set_description( __('The "Core Author" is a compulsory metadata automatically created for all collections by default.', 'tainacan') );
 	}

src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php

@@ -50,7 +50,7 @@ abstract class Metadata_Type  {
     /**
      * Indicates whether this is a core Metadatum Type or not
      *
-     * Core metadatum types are used by Title and description metadata. These metadata:
+     * Core metadatum types are used by Title, Description and Author metadata. These metadata:
      * * Can only be used once, they belong to the repository and can not be deleted
      * * Its values are saved in th wp_post table, and not as post_meta 
      * 

src/views/admin/components/metadata-types/selectbox/Selectbox.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script>
-
     export default {
         props: {
             metadatum: Object,

src/views/admin/js/main.js

@@ -19,6 +19,7 @@ import Numeric from '../components/metadata-types/numeric/Numeric.vue';
 import Date from '../components/metadata-types/date/Date.vue';
 import Relationship from '../components/metadata-types/relationship/Relationship.vue';
 import Taxonomy from '../components/metadata-types/taxonomy/Taxonomy.vue';
+import Author from '../components/metadata-types/core-author/Author.vue';
 
 import FormRelationship from '../components/metadata-types/relationship/FormRelationship.vue';
 import FormTaxonomy from '../components/metadata-types/taxonomy/FormTaxonomy.vue';
@@ -92,6 +93,7 @@ Vue.component('tainacan-numeric', Numeric);
 Vue.component('tainacan-date', Date);
 Vue.component('tainacan-relationship', Relationship);
 Vue.component('tainacan-taxonomy', Taxonomy);
+Vue.component('tainacan-author', Author);
 
 /* Metadata Option forms */
 Vue.component('tainacan-form-relationship', FormRelationship);

src/views/admin/js/store/modules/activity/actions.js

@@ -165,7 +165,7 @@ export const notApprove = ({commit}, activityId) => {
 
 };
 
-// Users for filtering
+// Users for filtering and core author metadata
 export const fetchUsers = ({ commit }, { search, page }) => {
     let endpoint = '/users?search=' + search;
 

src/views/admin/pages/lists/activities-page.vue

@@ -272,7 +272,7 @@
             ProcessesList,
         },
         mixins: [ dateInter ],
-        data(){
+        data() {
             return {
                 isLoading: false,
                 totalActivities: 0,
@@ -524,7 +524,7 @@
                 }
 
                 // No need to load more
-                if (this.usersForFilteringSearchPage > 1 && this.users.length > this.totalPages*12)
+                if (this.usersForFilteringSearchPage > 1 && this.users.length > this.totalUsers)
                     return;
 
                 this.isFetchingUsers = true;

src/views/tainacan-admin-i18n.php

@@ -231,6 +231,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_inherited'                                => __( 'Inherited', 'tainacan' ),
 	'label_core_title'                               => __( 'Core Title', 'tainacan' ),
 	'label_core_description'                         => __( 'Core Description', 'tainacan' ),
+	'label_core_title'                               => __( 'Core Author', 'tainacan' ),
 	'label_sorting'                                  => __( 'Sorting', 'tainacan' ),
 	'label_sorting_direction'                                  => __( 'Sorting direction', 'tainacan' ),
 	'label_sort'	                                 => __( 'Sort', 'tainacan' ),
@@ -472,7 +473,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'instruction_select_a_parent_term'               => __( 'Select a parent term:', 'tainacan' ),
 	'instruction_select_a_metadatum'                 => __( 'Select a metadatum', 'tainacan' ),
 	'instruction_cover_page'                         => __( 'Type to search a Page to choose.', 'tainacan' ),
-	'instruction_moderators'                         => __( 'Type to search a User to add.', 'tainacan' ),
+	'instruction_type_search_users_filter'           => __( 'Type to search users...', 'tainacan' ),
 	'instruction_type_search_users_filter'           => __( 'Type to search users to filter...', 'tainacan' ),
 	'instruction_type_search_roles_filter'           => __( 'Type to search roles to filter...', 'tainacan' ),
 	'instruction_select_a_parent_collection'         => __( 'Select a parent collection.', 'tainacan' ),