From 44e0d495d9fe0b1e5025b1f9a0c053b889cf31b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rabbi=20Islam=20Rony=20=E2=9A=A1=EF=B8=8F?=
 <35329385+RabbiIslamRony@users.noreply.github.com>
Date: Tue, 17 Feb 2026 13:36:12 +0600
Subject: [PATCH] Improve: Move directory name field into General tab for
 better UX

---
 .../vue/apps/cpt-manager/CPT_Manager.vue      | 83 ++-----------------
 .../js/admin/vue/store/CPT_Manager_Store.js   |  6 ++
 .../layout/admin/builder/_builder_style.scss  |  2 +
 .../class-builder-data.php                    | 15 ++++
 .../class-multi-directory-manager.php         |  5 ++
 5 files changed, 37 insertions(+), 74 deletions(-)

diff --git a/assets/src/js/admin/vue/apps/cpt-manager/CPT_Manager.vue b/assets/src/js/admin/vue/apps/cpt-manager/CPT_Manager.vue
index e2653c2d32..432c8e3a28 100644
--- a/assets/src/js/admin/vue/apps/cpt-manager/CPT_Manager.vue
+++ b/assets/src/js/admin/vue/apps/cpt-manager/CPT_Manager.vue
@@ -23,33 +23,10 @@
           </svg>
           Back
         </a>
-        <!-- atbdp-cptm-header -->
-        <div
-          class="directorist-row-tooltip"
-          data-tooltip="Click here to rename the directory."
-          data-flow="bottom"
-        >
-          <div
-            class="directorist-type-name-editable"
-            v-if="isEditableName || !options.name.value"
-            @click="ensureEditableMode"
-          >
-            <component
-              v-if="options.name && options.name.type"
-              :is="options.name.type + '-field'"
-              v-bind="options.name"
-              @update="updateOptionsField({ field: 'name', value: $event })"
-              ref="editableNameField"
-            />
-          </div>
-          <span
-            class="directorist-type-name"
-            v-if="!isEditableName && options.name.value"
-          >
-            {{ options.name.value }}
-            <span class="la la-pen" @click.stop="openEditableMode"></span>
-          </span>
-        </div>
+        <!-- Read-only directory name display -->
+        <span class="directorist-type-name" v-if="options.name.value">
+          {{ options.name.value }}
+        </span>
       </div>
       <div class="directorist-directory-type-top-right">
         <button
@@ -148,11 +125,6 @@ export default {
       directorist_admin.enabled_multi_directory === "1";
   },
 
-  beforeDestroy() {
-    // Clean up click outside listener when component is destroyed
-    document.removeEventListener("click", this.handleClickOutside);
-  },
-
   data() {
     return {
       listing_type_id: null,
@@ -166,54 +138,12 @@ export default {
         },
       },
       enabled_multi_directory: null,
-      isEditableName: false,
     };
   },
 
   methods: {
     ...mapGetters(["getFieldsValue"]),
 
-    ensureEditableMode() {
-      // Only set up the listener if not already in editable mode
-      if (!this.isEditableName) {
-        this.isEditableName = true;
-        // Add click outside listener after a small delay to avoid immediate trigger
-        setTimeout(() => {
-          document.addEventListener("click", this.handleClickOutside);
-        }, 100);
-      }
-    },
-
-    openEditableMode() {
-      this.isEditableName = true;
-      // Add click outside listener after a small delay to avoid immediate trigger
-      setTimeout(() => {
-        document.addEventListener("click", this.handleClickOutside);
-      }, 100);
-    },
-
-    closeEditableMode() {
-      this.isEditableName = false;
-      // Remove click outside listener
-      document.removeEventListener("click", this.handleClickOutside);
-    },
-
-    handleClickOutside(event) {
-      // Check if the editable field exists
-      if (!this.$refs.editableNameField) {
-        return;
-      }
-
-      // Get the DOM element (component.$el for Vue components)
-      const editableElement =
-        this.$refs.editableNameField.$el || this.$refs.editableNameField;
-
-      // Check if click is outside the editable field
-      if (editableElement && !editableElement.contains(event.target)) {
-        this.closeEditableMode();
-      }
-    },
-
     setupSaveOnKeyboardInput() {
       addEventListener("keydown", (event) => {
         if ((event.metaKey || event.ctrlKey) && "s" === event.key) {
@@ -346,6 +276,11 @@ export default {
       // Get Form Fields Data
       let field_list = [];
       for (let field in fields) {
+        // Skip directory_name — it is saved via options.name, not as term meta.
+        if (field === "directory_name") {
+          continue;
+        }
+
         let value = this.maybeJSON([fields[field].value]);
 
         form_data.append(field, value);
diff --git a/assets/src/js/admin/vue/store/CPT_Manager_Store.js b/assets/src/js/admin/vue/store/CPT_Manager_Store.js
index 591a56cdbc..92c11bb425 100644
--- a/assets/src/js/admin/vue/store/CPT_Manager_Store.js
+++ b/assets/src/js/admin/vue/store/CPT_Manager_Store.js
@@ -225,6 +225,12 @@ export default new Vuex.Store({
 
 		updateFieldValue: (state, payload) => {
 			Vue.set(state.fields[payload.field_key], 'value', payload.value);
+
+			// Keep options.name in sync when the directory_name field changes,
+			// so the header label and save payload stay up-to-date.
+			if (payload.field_key === 'directory_name' && state.options.name) {
+				state.options.name.value = payload.value;
+			}
 		},
 
 		updateFieldData: (state, payload) => {
diff --git a/assets/src/scss/layout/admin/builder/_builder_style.scss b/assets/src/scss/layout/admin/builder/_builder_style.scss
index b4677fdf61..ff3e3023ff 100644
--- a/assets/src/scss/layout/admin/builder/_builder_style.scss
+++ b/assets/src/scss/layout/admin/builder/_builder_style.scss
@@ -164,6 +164,8 @@ $light-gray: #f4f5f7;
 	font-weight: 600;
 	color: #141921;
 	line-height: 16px;
+	pointer-events: none;
+	user-select: none;
 	span {
 		font-size: 20px;
 		color: #747c89;
diff --git a/includes/modules/multi-directory-setup/class-builder-data.php b/includes/modules/multi-directory-setup/class-builder-data.php
index 38346afaf6..2071cb7715 100644
--- a/includes/modules/multi-directory-setup/class-builder-data.php
+++ b/includes/modules/multi-directory-setup/class-builder-data.php
@@ -2040,6 +2040,15 @@ protected static function prepare_data() {
 
         self::$fields = apply_filters(
             'atbdp_listing_type_settings_field_list', [
+                'directory_name' => [
+                    'label'       => '',
+                    'type'        => 'text',
+                    'value'       => '',
+                    'placeholder' => __( 'Enter directory name', 'directorist' ),
+                    'rules'       => [
+                        'required' => true,
+                    ],
+                ],
                 'icon' => [
                     'label'       => '',
                     'type'        => 'icon',
@@ -2758,6 +2767,12 @@ protected static function prepare_data() {
                     'icon'     => 'las la-home',
                     'container' => 'short-wide',
                     'sections' => [
+                        'directory_name'  => [
+                            'title'       => __( 'Directory name', 'directorist' ) . ' <span class="la la-pen"></span>',
+                            'description' => __( 'Give your directory a unique name to identify it across listings, add listing, and search pages.', 'directorist' ),
+                            'fields'      => ['directory_name'],
+                        ],
+
                         'labels'          => [
                             'title'  => __( 'Directory icon', 'directorist' ),
                             'description' => __( 'Select a directory type icon to display in all listings, add listing, and search pages.', 'directorist' ),
diff --git a/includes/modules/multi-directory-setup/class-multi-directory-manager.php b/includes/modules/multi-directory-setup/class-multi-directory-manager.php
index df64690c56..a0ab8144ec 100644
--- a/includes/modules/multi-directory-setup/class-multi-directory-manager.php
+++ b/includes/modules/multi-directory-setup/class-multi-directory-manager.php
@@ -845,6 +845,11 @@ public function update_fields_with_old_data( $listing_type_id = 0 ) {
 
         self::$options['name']['value'] = $term_name;
 
+        // Sync directory_name field with the term name so it appears in the General tab.
+        if ( isset( self::$fields['directory_name'] ) ) {
+            self::$fields['directory_name']['value'] = $term_name;
+        }
+
         $all_term_meta = get_term_meta( $term_id );
         $test_migration = apply_filters( 'atbdp_test_migration', false );