Store Category Edit Option (#1912)

* fix: Code copied from previous branch * feat: Support for different category assignment type. * fix: Single store category select dropdown close fix * fix: Several updates * Store category turned off issue fixed. * Vue Multiselect type checking issue fixed. * fix: Store category null value handled.
getdokan · Mar 13, 2024 · 8d08a1b · 8d08a1b
1 parent 27dd15e
commit 8d08a1b
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 2 deletions.
diff --git a/src/admin/components/StoreCategory.vue b/src/admin/components/StoreCategory.vue
@@ -0,0 +1,96 @@
+<template>
+    <Multiselect
+        v-if='storeCategoryList.length'
+        type='text'
+        id="store-category"
+        class="dokan-form-input dokan-store-category"
+        :options='storeCategoryList'
+        :close-on-select="!isCategoryMultiple"
+        :clear-on-select="false"
+        :preserve-search="true"
+        label="name"
+        trackBy="id"
+        selectedLabel='name'
+        v-model='selectedCategories'
+        :showLabels="false"
+        :multiple='isCategoryMultiple'
+    />
+</template>
+
+<script>
+import { Multiselect } from 'vue-multiselect';
+
+export default {
+    name: 'StoreCategory',
+
+    components: {
+        Multiselect
+    },
+
+    props: {
+        categories: {
+            type: Array
+        },
+        errors: {
+            type: Array,
+            require: false
+        }
+    },
+
+    data() {
+        return {
+            storeCategoryList: [],
+            selectedCategories: [],
+            isCategoryMultiple: false
+        }
+    },
+
+    watch: {
+        'selectedCategories'( value ) {
+            if ( this.selectedCategories === null ) {
+                this.selectedCategories = [];
+            }
+            if ( ! this.isCategoryMultiple && ! Array.isArray( this.selectedCategories ) ) {
+                this.$emit( 'categories', [ this.selectedCategories ] );
+            } else {
+                this.$emit( 'categories', this.selectedCategories );
+            }
+        }
+    },
+
+    created() {
+        this.setStoreCategories();
+        this.storeCategoryIds = this.categories;
+    },
+
+    methods: {
+        setStoreCategories() {
+            if( dokan.store_category_type !== 'none' ) {
+                dokan.api.get('/store-categories?per_page=50', {})
+                    .then( ( response, status, xhr ) => {
+                        let storeCategoryIds = [];
+                        this.categories.map( ( value ) => { storeCategoryIds.push( value.id ) } );
+                        this.storeCategoryList = response;
+                        this.selectedCategories = this.storeCategoryList.filter( ( category ) => {
+                            return storeCategoryIds.includes( category.id );
+                        } );
+                        this.isCategoryMultiple = ( 'multiple' === xhr.getResponseHeader( 'X-WP-Store-Category-Type' ) );
+                    } );
+            }
+        }
+    }
+}
+
+</script>
+
+<style>
+.dokan-form-input.dokan-store-category{
+    width: 103% !important;
+    border: 0 !important;
+    padding: 0 !important;
+}
+
+#store-category{
+    border: 0;
+}
+</style>
diff --git a/src/admin/pages/VendorAccountFields.vue b/src/admin/pages/VendorAccountFields.vue
@@ -49,7 +49,13 @@
                         :class="{'dokan-form-input': true, 'has-error': getError('store_name')}"
                         :placeholder="getError( 'store_name' ) ? __( 'Store Name is required', 'dokan-lite' ) : __( 'Store Name', 'dokan-lite' )">
                 </div>
-
+                <div v-if="this.vendorInfo.categories" class="column">
+                    <label for="store-category">{{ __( 'Store Category', 'dokan-lite' ) }}</label>
+                    <StoreCategory
+                        :categories=vendorInfo.categories
+                        @categories='( categories ) => vendorInfo.categories = categories'
+                    />
+                </div>
                 <div class="column" v-if="! getId()">
                     <label for="user-nicename">{{ __( 'Store URL', 'dokan-lite') }}</label>
                     <input type="text" id="user-nicename" class="dokan-form-input" v-model="vendorInfo.user_nicename" :placeholder="__( 'Store Url', 'dokan-lite')">
@@ -139,14 +145,16 @@ import { debounce } from "debounce";
 import Switches from "admin/components/Switches.vue";
 import UploadImage from "admin/components/UploadImage.vue";
 import PasswordGenerator from "admin/components/PasswordGenerator.vue";
+import StoreCategory from 'admin/components/StoreCategory.vue';
 
 export default {
     name: 'VendorAccountFields',
 
     components: {
+        StoreCategory,
         Switches,
         UploadImage,
-        PasswordGenerator
+        PasswordGenerator,
     },
 
     props: {

diff --git a/src/utils/Bootstrap.js b/src/utils/Bootstrap.js
@@ -51,6 +51,7 @@ import VendorSocialFields from "admin/pages/VendorSocialFields.vue";
 import VendorPaymentFields from "admin/pages/VendorPaymentFields.vue";
 import AdminNotice from "../admin/components/AdminNotice.vue";
 import CardFunFact from "../admin/components/CardFunFact.vue";
+import StoreCategory from 'admin/components/StoreCategory.vue';
 
 import "vue-multiselect/dist/vue-multiselect.min.css"
 import Vuedraggable from "vuedraggable/src/vuedraggable";
@@ -121,6 +122,7 @@ window.dokan.libs['VendorPaymentFields'] = VendorPaymentFields;
 window.dokan.libs['RefreshSettingOptions'] = RefreshSettingOptions;
 window.dokan.libs['AdminNotice']         = AdminNotice;
 window.dokan.libs['CardFunFact']         = CardFunFact;
+window.dokan.libs['StoreCategory']       = StoreCategory;
 window.dokan.libs['papaparse']           = parse;
 window.dokan.libs['Vuedraggable']        = Vuedraggable;