[hub] add SearchInput
diff --git a/erpnext/public/js/hub/components/ItemCardsContainer.vue b/erpnext/public/js/hub/components/ItemCardsContainer.vue
index 8014296..4ccb9dc 100644
--- a/erpnext/public/js/hub/components/ItemCardsContainer.vue
+++ b/erpnext/public/js/hub/components/ItemCardsContainer.vue
@@ -23,6 +23,11 @@
item_id() {
return this.is_local ? 'item_code' : 'hub_item_code';
}
+ },
+ watch: {
+ items() {
+ frappe.dom.handle_broken_images($(this.$el));
+ }
}
}
</script>
diff --git a/erpnext/public/js/hub/components/PublishPage.vue b/erpnext/public/js/hub/components/PublishPage.vue
index 06241d6..2b2956f 100644
--- a/erpnext/public/js/hub/components/PublishPage.vue
+++ b/erpnext/public/js/hub/components/PublishPage.vue
@@ -3,6 +3,12 @@
class="marketplace-page"
:data-page-name="page_name"
>
+ <search-input
+ placeholder="Search Items ..."
+ :on_search="get_valid_items"
+ v-model="search_value"
+ >
+ </search-input>
<item-cards-container
:items="valid_items"
:is_local="1"
@@ -12,6 +18,7 @@
</template>
<script>
+import SearchInput from './SearchInput.vue';
import ItemCardsContainer from './ItemCardsContainer.vue';
export default {
@@ -24,31 +31,22 @@
};
},
components: {
+ SearchInput,
ItemCardsContainer
},
- // watch: {
- // // whenever search term changes, this function will run
- // question: function (newQuestion, oldQuestion) {
- // this.answer = 'Waiting for you to stop typing...'
- // this.debouncedGetAnswer()
- // }
- // },
created() {
this.get_valid_items();
},
methods: {
get_valid_items() {
- var vm = this;
-
frappe.call(
'erpnext.hub_node.api.get_valid_items',
{
search_value: this.search_value
}
)
- .then(function (r) {
- vm.valid_items = r.message;
- frappe.dom.handle_broken_images(this.$wrapper);
+ .then((r) => {
+ this.valid_items = r.message;
})
}
}
diff --git a/erpnext/public/js/hub/components/SearchInput.vue b/erpnext/public/js/hub/components/SearchInput.vue
new file mode 100644
index 0000000..6647b15
--- /dev/null
+++ b/erpnext/public/js/hub/components/SearchInput.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="hub-search-container">
+ <input
+ type="text"
+ class="form-control"
+ :placeholder="placeholder"
+ :value="value"
+ @input="on_input">
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ placeholder: String,
+ value: String,
+ on_search: Function
+ },
+ methods: {
+ on_input(event) {
+ this.$emit('input', event.target.value);
+ this.on_search();
+
+ // TODO: Debouncing doesn't fire search
+ // frappe.utils.debounce(this.on_search, 500);
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js
index 741f080..7b20907 100644
--- a/erpnext/public/js/hub/pages/publish.js
+++ b/erpnext/public/js/hub/pages/publish.js
@@ -8,29 +8,32 @@
erpnext.hub.Publish = class Publish {
constructor(parent) {
- this.items_data_to_publish = {};
- this.unpublished_items = [];
- this.fetched_items = [];
- this.fetched_items_dict = {};
-
this.$wrapper = $(`<div id="vue-area">`).appendTo($(parent));
- frappe.app = new Vue({
- render: h => h(PublishPage),
- mounted() {
- console.log('Mounted For Publish page');
- },
+ new Vue({
+ render: h => h(PublishPage)
}).$mount('#vue-area');
}
show() {
- this.$wrapper.show();
+ $('[data-page-name="publish"]').show();
}
hide() {
- this.$wrapper.hide();
+ $('[data-page-name="publish"]').hide();
}
+
+
+
+
+
+ // this.items_data_to_publish = {};
+ // this.unpublished_items = [];
+ // this.fetched_items = [];
+ // this.fetched_items_dict = {};
+
+
show_message(message) {
this.$wrapper.prepend(NotificationMessage(message));
}