Updated the Readme file with the details

Readme.md

@@ -19,33 +19,40 @@ Behold the magic 🎩✨ of our simple panel! View your data without the hassle
 **NOTE**: Replace `localhost:8055` with your domain
 
 ```bash
-curl --location --request POST 'http://localhost:8055/query/create-table'
+curl --location --request POST 'http://localhost:8055/custom-query-panel/create-table'
 ```
 
 -   Table named `cqp_queries` will be available in your project.
 
 ## How To use This Extension
 
--  Create the queries in the table (`cqp_queries`) as explained in below example.
+1.  Create the queries in the table (`cqp_queries`) as explained in below example.
 
-For Example: 
 ```bash
 select first_name, last_name from employees where department = ${department} 
 ```
+<!-- ![Add Query](/images/add-query.png) -->
 
--  This extension provides support of *`global variables`* added in insights like department or week.
-![Department Example](/images/department-panel.png)
+2.  This extension provides support of *`global variables`* added in insights like department or week.
+<!-- ![Department Example](/images/department-panel.png) -->
 
--  Use `variables` field give in panel settings below `fields`.
-![dynamic-fields](/images/dynamic-fields.png)
+3.  Use `variables` field give in panel settings below `fields`.
+<!-- ![dynamic-fields](/images/dynamic-fields.png)
+![Adding File Label](/images/file-label.png) -->
 
--  Use `double mustache` syntax for entering `value` field to get value from variables.
-![Alt text](/images/double-mustache.png)
+4.  Use `double mustache` syntax for entering `value` field to get value from variables.
+<!-- ![Alt text](/images/double-mustache.png) -->
 
-## 👀 Must Check
+## 👀 Environment Variables
+- You can provide collection name in CUSTOM_QUERY_COLLECTION as per your needs.
+- It Also provide support for custom query length using CUSTOM_QUERY_FIELD_LENGTH
+```bash
+# default value CUSTOM_QUERY_COLLECTION = "cqp_queries" 
+CUSTOM_QUERY_COLLECTION="custom_query"
+# default value CUSTOM_QUERY_FIELD_LENGTH = 5000 
+CUSTOM_QUERY_FIELD_LENGTH=10000
+```
 
--   Query response must be in array format
--   Query field should have `code` interface with minimum length of 1000 characters
 
 ## Problem
 
@@ -61,8 +68,11 @@ select first_name, last_name from employees where department = ${department}
 
 ## Screenshots
 
-{ Include at least one screenshot or video. }
-
+![Add Query](/images/add-query.png)
+![Department Example](/images/department-panel.png)
+![dynamic-fields](/images/dynamic-fields.png)
+![Adding File Label](/images/file-label.png)
+![Alt text](/images/double-mustache.png)
 ## Collaborators
 
 -   [Harsh Kansagara](https://github.com/theharshin)

package.json

@@ -44,6 +44,7 @@
         "registry": "https://npm.pkg.github.com/"
     },
     "dependencies": {
-      "paraphrase": "^3.1.1"
+        "dotenv": "^16.3.1",
+        "paraphrase": "^3.1.1"
     }
 }

src/custom-query-panel/panel.vue

@@ -68,7 +68,7 @@ export default {
             }
             this.loading = true;
 
-            this.api(`query/execute`, {
+            this.api(`custom-query-panel/execute`, {
                 params: {
                     query_id: this.query_id,
                     variables: this.variables.length

src/custom-query/index.js

@@ -1,35 +1,42 @@
 import { dollar as phrase } from "paraphrase";
+import { CUSTOM_QUERY_COLLECTION, CUSTOM_QUERY_FIELD_LENGTH, DIRECTUS_FIELDS_OBJ } from "./utils/config";
 
 export default {
-  id: "query",
+  id: "custom-query-panel",
   handler: (router, { services, logger, database }) => {
     const { ItemsService } = services;
-    const tableName = "cqp_queries";
 
     // Endpoint to execute a custom query
     router.get("/execute", async (req, res) => {
       try {
+        // Check if query_id is provided
+        if (!req.query.query_id) {
+          return res.status(400).json({ error: "Query ID is required" });
+        }
+
         // Initialize the custom query service
-        const customQueryService = new ItemsService(tableName, { schema: req.schema });
-        const { query_id } = req.query;
+        const customQueryService = new ItemsService(CUSTOM_QUERY_COLLECTION, { schema: req.schema });
 
         // Retrieve the custom query based on the provided ID
-        const customQueryData = await customQueryService.readOne(query_id);
+        const customQueryData = await customQueryService.readOne(req.query.query_id);
+
+        // Check if custom query data is retrieved
+        if (!customQueryData) {
+          return res.status(404).json({ error: "Custom query not found" });
+        }
 
         // Prepare the variables for the custom query
-        const queryVariables = req.query.variables;
+        const queryVariables = req.query.variables || [];
         const preparedVariables = prepareVariables(queryVariables);
 
         // Execute the custom query
-        const query = phrase(`${customQueryData.query}`, preparedVariables);
-        if (query) {
-          const executedQueryData = await database.raw(query);
-          const fetchedQueryData = executedQueryData[0];
-          logger.info("Custom Query Executed");
-          return res.status(200).json({ data: fetchedQueryData });
-        } else {
-          return res.status(400).json({ data: "No query found" });
-        }
+        const RAW_QUERY = phrase(`${customQueryData.query}`, preparedVariables);
+        logger.debug(`Raw query: ${RAW_QUERY}`);
+        const executedQueryData = await database.raw(RAW_QUERY);
+        const fetchedQueryData = executedQueryData[0];
+
+        logger.debug("Custom Query Executed");
+        return res.status(200).json({ data: fetchedQueryData });
       } catch (error) {
         logger.error(`error: ${error}`);
         return res.status(500).json({ error: `${error.message}` });
@@ -39,13 +46,20 @@ export default {
     // Endpoint to create a table for storing custom queries
     router.post("/create-table", async (req, res) => {
       try {
-        await database.schema.createTable(tableName, (table) => {
-          table.increments(), table.string("name"), table.string("query");
+        const customQueryService = new ItemsService('directus_fields', { schema: req.schema });
+
+        // Create a table for custom queries
+        await database.schema.createTable(CUSTOM_QUERY_COLLECTION, (table) => {
+          table.increments(), table.string("name"), table.varchar("query", CUSTOM_QUERY_FIELD_LENGTH);
         });
+
+        // Create a collection field of type code editor for MYSQL query
+        await customQueryService.createOne(DIRECTUS_FIELDS_OBJ);
+
         return res
           .status(200)
           .json({
-            message: `Table Created for Custom Query Extension ${tableName}`,
+            message: `Table Created for Custom Query Extension ${CUSTOM_QUERY_COLLECTION}`,
           });
       } catch (error) {
         logger.error(`error: ${error}`);

src/custom-query/utils/config.js

@@ -0,0 +1,22 @@
+import dotenv from "dotenv";
+dotenv.config();
+
+const CUSTOM_QUERY_COLLECTION =
+  process.env.CUSTOM_QUERY_COLLECTION || "cqp_queries";
+
+const DIRECTUS_FIELDS_OBJ = {
+  collection: CUSTOM_QUERY_COLLECTION,
+  field: "query",
+  interface: "input-code",
+  options: { language: "sql" },
+  readonly: 0,
+  hidden: 0,
+  sort: 2,
+  width: "full",
+  required: 0,
+};
+
+// Setting the length of the custom query field, default is 5000
+const CUSTOM_QUERY_FIELD_LENGTH = parseInt(process.env.CUSTOM_QUERY_FIELD_LENGTH) || 5000;
+
+export { CUSTOM_QUERY_COLLECTION, CUSTOM_QUERY_FIELD_LENGTH, DIRECTUS_FIELDS_OBJ };