feat: enhance CRUD injection logging and improve component file naming with optional additional name

Author: NoOne7135

adminforth/commands/createCustomComponent/configUpdater.js

@@ -202,7 +202,12 @@ export async function updateResourceConfig(resourceId, columnName, fieldType, co
         const outputCode = recast.print(ast).code;
 
         await fs.writeFile(filePath, outputCode, 'utf-8');
-        console.log(chalk.dim(`Successfully updated resource configuration file (preserving formatting): ${filePath}:${injectionLine}`));
+        console.log(
+          chalk.green(
+            `✅ Successfully updated CRUD injection in resource file: ${filePath}` +
+            (injectionLine !== null ? `:${injectionLine}` : '')
+          )
+        );
 
     } catch (error) {
         console.error(chalk.red(`❌ Error processing resource file: ${filePath}`));
@@ -309,7 +314,12 @@ export async function injectLoginComponent(indexFilePath, componentPath) {
 
     const outputCode = recast.print(ast).code;
     await fs.writeFile(indexFilePath, outputCode, 'utf-8');
-    console.log(chalk.green(`✅ Successfully updated login injection in: ${indexFilePath}:${injectionLine}`));
+    console.log(
+      chalk.green(
+        `✅ Successfully updated CRUD injection in resource file: ${indexFilePath}` +
+        (injectionLine !== null ? `:${injectionLine}` : '')
+      )
+    );
   }
 
 
@@ -402,7 +412,12 @@ export async function injectGlobalComponent(indexFilePath, injectionType, compon
 
     const outputCode = recast.print(ast).code;
     await fs.writeFile(indexFilePath, outputCode, 'utf-8');
-    console.log(chalk.green(`✅ Successfully updated global injection '${injectionType}' in: ${indexFilePath}:${injectionLine}`));
+    console.log(
+      chalk.green(
+        `✅ Successfully updated CRUD injection in resource file: ${indexFilePath}` +
+        (injectionLine !== null ? `:${injectionLine}` : '')
+      )
+    );
 }
 
 export async function updateCrudInjectionConfig(resourceId, crudType, injectionPosition, componentPathForConfig, isThin) {
@@ -487,11 +502,23 @@ export async function updateCrudInjectionConfig(resourceId, crudType, injectionP
           ]);
 
           if (injectionProp) {
-            injectionProp.value = newInjectionObject;
-            console.log(chalk.dim(`Updated '${injectionPosition}' injection for '${crudType}'.`));
+            if (n.ArrayExpression.check(injectionProp.value)) {
+              injectionProp.value.elements.push(newInjectionObject);
+              console.log(chalk.dim(`Appended new injection to array at '${injectionPosition}' for '${crudType}'.`));
+            }
+            else if (n.ObjectExpression.check(injectionProp.value)) {
+              injectionProp.value = b.arrayExpression([injectionProp.value, newInjectionObject]);
+              console.log(chalk.dim(`Converted to array and added new injection at '${injectionPosition}' for '${crudType}'.`));
+            }
+            else {
+              injectionProp.value = b.arrayExpression([newInjectionObject]);
+              console.log(chalk.yellow(`⚠️ Replaced invalid injection at '${injectionPosition}' with array.`));
+            }
           } else {
-            crudValue.properties.push(b.objectProperty(b.identifier(injectionPosition), newInjectionObject));
-            console.log(chalk.dim(`Added '${injectionPosition}' injection for '${crudType}'.`));
+            crudValue.properties.push(
+              b.objectProperty(b.identifier(injectionPosition), b.arrayExpression([newInjectionObject]))
+            );
+            console.log(chalk.dim(`Added new array of injections at '${injectionPosition}' for '${crudType}'.`));
           }
 
           updateApplied = true;
@@ -506,7 +533,12 @@ export async function updateCrudInjectionConfig(resourceId, crudType, injectionP
 
       const outputCode = recast.print(ast).code;
       await fs.writeFile(filePath, outputCode, 'utf-8');
-      console.log(chalk.dim(`✅ Successfully updated CRUD injection in resource file: ${filePath}:${injectionLine}`));
+      console.log(
+        chalk.green(
+          `✅ Successfully updated CRUD injection in resource file: ${filePath}` +
+          (injectionLine !== null ? `:${injectionLine}` : '')
+        )
+      );
 
     } catch (error) {
       console.error(chalk.red(`❌ Error processing resource file: ${filePath}`));

adminforth/commands/createCustomComponent/main.js

@@ -170,16 +170,26 @@ async function handleCrudPageInjectionCreation(config, resources) {
   });
   if (injectionPosition === '__BACK__') return handleCrudPageInjectionCreation(config, resources);
 
+  const additionalName = await input({
+    message: 'Enter additional name (optional, e.g., "CustomExport"):',
+    validate: (value) => {
+      if (!value) return true;
+      return /^[A-Za-z0-9_-]+$/.test(value) || 'Only alphanumeric characters, hyphens or underscores are allowed.';
+    },
+  });
+
   const isThin = await select({
     message: 'Will this component be thin enough to fit on the same page with list (so list will still shrink)?',
     choices: [
       { name: 'Yes', value: true },
       { name: 'No', value: false },
     ],
   });
-
+  const formattedAdditionalName = additionalName
+    ? additionalName[0].toUpperCase() + additionalName.slice(1)
+    : '';
   const safeResourceLabel = sanitizeLabel(selectedResource.label)
-  const componentFileName = `${safeResourceLabel}${crudType.charAt(0).toUpperCase() + crudType.slice(1)}${injectionPosition.charAt(0).toUpperCase() + injectionPosition.slice(1)}.vue`;
+  const componentFileName = `${safeResourceLabel}${crudType.charAt(0).toUpperCase() + crudType.slice(1)}${injectionPosition.charAt(0).toUpperCase() + injectionPosition.slice(1) + formattedAdditionalName}.vue`;
   const componentPathForConfig = `@@/${componentFileName}`;
 
   try {

adminforth/commands/createCustomComponent/templates/customCrud/afterBreadcrumbs.vue.hbs

@@ -5,7 +5,7 @@
       @click="handleClick"
       class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
     >
-      {{ {{ $t('Example') }} }} 
+      \{{ $t('Example') }} 
     </button>
   </div>
 </template>

adminforth/commands/createCustomComponent/templates/customCrud/beforeBreadcrumbs.vue.hbs

@@ -5,7 +5,7 @@
       @click="handleClick"
       class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
     >
-      {{ $t('Example') }}
+      \{{ $t('Example') }}
     </button>
   </div>
 </template>

adminforth/commands/createCustomComponent/templates/customCrud/threeDotsDropdownItems.vue.hbs

@@ -4,9 +4,8 @@
       v-for="item in menuItems"
       :key="item.label"
       @click="item.action"
-      class="w-full text-left text-sm px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"
     >
-      {{ item.label }}
+      \{{ item.label }}
     </button>
   </div>
 </template>
@@ -35,16 +34,7 @@ const menuItems = [
         variant: 'success',
       });
     },
-  },
-  {
-    label: 'Show Error Alert',
-    action: () => {
-      adminforth.alert({
-        message: t('Error Alert'),
-        variant: 'danger',
-      });
-    },
-  },
+  }
 ];
 
 onMounted(() => {