@tunghtml/strapi-plugin-filtered-relation 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# Changelog
+
+## [1.1.0] - 2024-12-02
+
+### Added
+
+- **Status Change Dropdown**: Added dropdown at the end of each item to change status
+  - Dropdown shows current status and all available enum options
+  - Options are dynamically fetched from target model schema (tries multiple endpoints)
+  - Clicking a different status moves the item between records using connect/disconnect API
+  - Dispatches custom events to refresh all filtered relation fields without page reload
+- **New Configuration Option**: `statusField`
+  - Optional field to enable status change feature
+  - When configured, dropdown appears for each item
+  - Must be an enum field in target model
+  - Example: `"statusField": "participantStatus"`
+
+### Changed
+
+- Updated UI to include status dropdown alongside item label
+- Improved item box layout to accommodate dropdown (space-between)
+- Enhanced click handling to prevent navigation when interacting with dropdown
+- Uses proper Strapi 5 connect/disconnect API format with both id and documentId
+- Sends full payload matching UI admin format for reliable updates
+
+### Technical Details
+
+- Fetches enum values from schema via content-type-builder or content-manager endpoints
+- Uses `SingleSelect` component from Strapi Design System
+- Implements loading state during status update
+- Uses connect/disconnect API with format: `{ id, documentId }`
+- Dispatches `filtered-relation-updated` custom event for cross-field refresh
+- All fields listen to event and refresh when same documentId
+- Maintains backward compatibility with version 1.0.0
+
+### Use Case
+
+Perfect for scenarios like Meeting Participation Status where:
+
+- Items are filtered by status (Pending, Accepted, Rejected, etc.)
+- Users need to quickly change status without navigating to detail page
+- Status change should automatically move items between lists
+
+## [1.0.0] - 2024-11-XX
+
+### Initial Release
+
+- Display filtered relations based on field values
+- Support for dynamic placeholders (`{{documentId}}`)
+- Configurable filter fields (filterField1, filterField2)
+- Auto-save functionality
+- Click to navigate to related record
+- Display count in field label

package/PUBLISH.md

@@ -0,0 +1,94 @@
+# Publishing Guide
+
+## Prerequisites
+
+1. Make sure you're logged in to npm:
+
+```bash
+npm login
+```
+
+2. Verify your npm account has access to publish `@tunghtml` scoped packages
+
+## Steps to Publish
+
+### 1. Test Locally First
+
+The plugin is already configured as a local plugin in `backend/config/plugins.js`:
+
+```javascript
+"filtered-relation": {
+  enabled: true,
+  resolve: "./src/plugins/filtered-relation",
+}
+```
+
+Test thoroughly in your local Strapi instance before publishing.
+
+### 2. Update Version
+
+Update version in `package.json`:
+
+- Patch: 1.1.0 -> 1.1.1 (bug fixes)
+- Minor: 1.1.0 -> 1.2.0 (new features, backward compatible)
+- Major: 1.1.0 -> 2.0.0 (breaking changes)
+
+### 3. Publish to NPM
+
+From the plugin directory:
+
+```bash
+cd backend/src/plugins/filtered-relation
+npm publish --access public
+```
+
+### 4. Update Project to Use NPM Package
+
+After publishing, you can switch back to using the npm package:
+
+1. Update `backend/package.json`:
+
+```json
+{
+  "dependencies": {
+    "@tunghtml/strapi-plugin-filtered-relation": "^1.1.0"
+  }
+}
+```
+
+2. Update `backend/config/plugins.js`:
+
+```javascript
+"filtered-relation": {
+  enabled: true,
+  // Remove the resolve line to use npm package
+}
+```
+
+3. Install the package:
+
+```bash
+cd backend
+yarn install
+```
+
+## Current Version
+
+Version 1.1.0 includes:
+
+- Status change dropdown feature
+- Dynamic status options from schema
+- Auto-refresh on status change
+- Backward compatible with 1.0.0
+
+## Testing Checklist
+
+Before publishing, verify:
+
+- [ ] Plugin loads without errors
+- [ ] Filtered relations display correctly
+- [ ] Status dropdown shows correct options
+- [ ] Status change updates the record
+- [ ] Lists refresh automatically after status change
+- [ ] Works with different content types (reusable)
+- [ ] No console errors

package/README.md

@@ -1,113 +1,111 @@
 # Strapi Plugin Filtered Relation
 
-A Strapi v5 custom field plugin that displays filtered relations with dynamic placeholder support.
+A Strapi 5 custom field plugin for displaying filtered relations with dynamic placeholder support and status change capability.
 
 ## Features
 
-- 🎯 **Dynamic Filtering**: Filter relations based on multiple criteria
-- 🔄 **Placeholder Support**: Use `{{documentId}}` to reference current entity
-- 🎨 **Clean UI**: Displays filtered results in a clean, clickable list
-- ⚡ **Auto-save**: Automatically saves filtered results to the field
-- 🔗 **Nested Relations**: Support for filtering through nested relation fields (e.g., `meeting.documentId`)
+- Display filtered relations based on field values
+- Support dynamic placeholders (e.g., `{{documentId}}`)
+- Change status directly from the relation list via dropdown
+- Auto-refresh when status changes
+- Fully configurable and reusable
 
 ## Installation
 
-```bash
-npm install @tunghtml/strapi-plugin-filtered-relation
-```
+### Local Development
 
-or
+This plugin is currently being used as a local plugin. It's located in `backend/src/plugins/filtered-relation`.
+
+### NPM Package (for publishing)
 
 ```bash
+npm install @tunghtml/strapi-plugin-filtered-relation
+# or
 yarn add @tunghtml/strapi-plugin-filtered-relation
 ```
 
-## Usage
-
-### 1. Enable the plugin
+## Configuration
 
-Add the plugin to your `config/plugins.js`:
+Add to `config/plugins.js`:
 
 ```javascript
 module.exports = {
   "filtered-relation": {
     enabled: true,
+    resolve: "./src/plugins/filtered-relation", // for local plugin
   },
 };
 ```
 
-### 2. Add to your schema
+## Usage
 
-In your content type schema (e.g., `api/meeting/content-types/meeting/schema.json`):
+### Schema Configuration
+
+Add the custom field to your content type schema:
 
 ```json
 {
-  "attributes": {
-    "rejectedInvestors": {
-      "type": "customField",
-      "customField": "plugin::filtered-relation.filtered-relation",
-      "options": {
-        "targetModel": "Meeting Participation Status",
-        "displayField": "investors",
-        "filterField1": "participantStatus",
-        "filterValue1": "Rejected",
-        "filterField2": "meeting.documentId",
-        "filterValue2": "{{documentId}}"
-      }
+  "pendingInvestors": {
+    "type": "customField",
+    "customField": "plugin::filtered-relation.filtered-relation",
+    "options": {
+      "displayField": "investors",
+      "targetModel": "Meeting Participation Status",
+      "filterField1": "participantStatus",
+      "filterValue1": "Pending",
+      "filterField2": "meeting.documentId",
+      "filterValue2": "{{documentId}}",
+      "statusField": "participantStatus"
     }
   }
 }
 ```
 
-## Configuration Options
+### Options
 
-| Option         | Type   | Description                                            | Example                          |
-| -------------- | ------ | ------------------------------------------------------ | -------------------------------- |
-| `targetModel`  | string | The target collection to query                         | `"Meeting Participation Status"` |
-| `displayField` | string | The field to display from results                      | `"investors"`                    |
-| `filterField1` | string | First filter field (supports nested with dot notation) | `"participantStatus"`            |
-| `filterValue1` | string | Value for first filter                                 | `"Rejected"`                     |
-| `filterField2` | string | Second filter field (optional)                         | `"meeting.documentId"`           |
-| `filterValue2` | string | Value for second filter (supports `{{documentId}}`)    | `"{{documentId}}"`               |
+| Option         | Type   | Required | Description                                                                                                                                                      |
+| -------------- | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `displayField` | string | Yes      | The relation field name to display from target model (e.g., "investors")                                                                                         |
+| `targetModel`  | string | Yes      | Target collection display name (e.g., "Meeting Participation Status"). Will auto-convert to API ID format.                                                       |
+| `filterField1` | string | Yes      | First filter field name (e.g., "participantStatus")                                                                                                              |
+| `filterValue1` | string | Yes      | First filter value (e.g., "Pending"). Supports `{{documentId}}` placeholder for current entity.                                                                  |
+| `filterField2` | string | No       | Second filter field name (e.g., "meeting.documentId") for additional filtering                                                                                   |
+| `filterValue2` | string | No       | Second filter value. Supports `{{documentId}}` placeholder.                                                                                                      |
+| `statusField`  | string | No       | Field name for status dropdown (e.g., "participantStatus"). When configured, enables status change feature with dropdown. Must be an enum field in target model. |
 
-## Dynamic Placeholders
+### Status Change Feature
 
-Use `{{documentId}}` in filter values to reference the current entity's document ID:
+When `statusField` is configured, a dropdown appears at the end of each item allowing quick status changes.
 
-```json
-{
-  "filterField2": "meeting.documentId",
-  "filterValue2": "{{documentId}}"
-}
-```
+**Requirements:**
 
-This will automatically replace `{{documentId}}` with the actual document ID when editing an entity.
+- `statusField` must be an enum field in the target model
+- Target model must have records for each status value
+- All records must be linked to the same parent entity (via filterField2)
 
-## Example Use Case
+**How it works:**
+
+1. Dropdown shows current status and all available enum options (fetched from schema)
+2. User selects a new status
+3. Plugin automatically:
+   - Removes the item from current status record (disconnect)
+   - Adds the item to target status record (connect)
+   - Refreshes all filtered relation fields on the page
+4. No page reload needed - all lists update automatically via custom events
 
-Display rejected investors for a specific meeting:
+## Example Use Case
 
-1. **Target Model**: Meeting Participation Status
-2. **Display Field**: investors (shows investor names)
-3. **Filter 1**: `participantStatus = "Rejected"`
-4. **Filter 2**: `meeting.documentId = {{documentId}}`
+For a Meeting with multiple investor status lists (Pending, Accepted, Rejected, etc.):
 
-Result: Shows only investors who rejected the current meeting.
+1. Each list shows investors filtered by their participation status
+2. Click the dropdown on any investor to change their status
+3. The investor automatically moves to the appropriate list
+4. All lists refresh to reflect the change
 
-## Requirements
+## Version
 
-- Strapi v5.x
-- Node.js >= 18.0.0
-- React >= 18.0.0
+Current version: 1.1.0
 
 ## License
 
 MIT
-
-## Author
-
-Tung HTML
-
-## Repository
-
-[https://github.com/finnwasabi/strapi-plugin-filtered-relation](https://github.com/finnwasabi/strapi-plugin-filtered-relation)

package/admin/src/components/FilteredRelationInput.jsx

@@ -1,6 +1,13 @@
 import React from "react";
 import { useIntl } from "react-intl";
-import { Field, Flex, Box, Typography } from "@strapi/design-system";
+import {
+  Field,
+  Flex,
+  Box,
+  Typography,
+  SingleSelect,
+  SingleSelectOption,
+} from "@strapi/design-system";
 import { useFetchClient } from "@strapi/strapi/admin";
 import { useLocation, useNavigate } from "react-router-dom";
 
@@ -11,6 +18,8 @@ const FilteredRelationInput = (props) => {
   const navigate = useNavigate();
   const [items, setItems] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
+  const [statusOptions, setStatusOptions] = React.useState([]);
+  const [updatingStatus, setUpdatingStatus] = React.useState({});
 
   if (!props) {
     return null;
@@ -19,12 +28,9 @@ const FilteredRelationInput = (props) => {
   const { attribute, name, error, value } = props;
 
   // Extract documentId from URL path
-  // URL format: /admin/content-manager/collection-types/api::meeting.meeting/bn0n8em49y7vljg5lrfh2aij
   const getDocumentIdFromUrl = () => {
     const pathParts = location.pathname.split("/");
-    // Get the last part of the URL which should be the documentId
     const lastPart = pathParts[pathParts.length - 1];
-    // Check if it's not 'create' (for new documents)
     return lastPart !== "create" ? lastPart : null;
   };
 
@@ -37,16 +43,13 @@ const FilteredRelationInput = (props) => {
     filterField2,
     filterValue2,
     displayField = "id",
+    statusField,
   } = attribute?.options || {};
 
   // Parse collection name to API ID
-  // "Meeting Participation Status" -> "api::meeting-participation-status.meeting-participation-status"
   const parseCollectionName = (name) => {
     if (!name) return null;
-    // If already API ID format, return as is
     if (name.startsWith("api::")) return name;
-
-    // Convert display name to API ID
     const slug = name
       .toLowerCase()
       .replace(/\s+/g, "-")
@@ -57,10 +60,8 @@ const FilteredRelationInput = (props) => {
   const targetModel = parseCollectionName(targetModelInput);
 
   // Parse displayField to get relation model
-  // displayField is like "investors" -> "api::investor.investor"
   const getRelationModel = (fieldName) => {
     if (!fieldName) return null;
-    // Remove 's' at the end for plural -> singular
     const singular = fieldName.endsWith("s")
       ? fieldName.slice(0, -1)
       : fieldName;
@@ -73,19 +74,16 @@ const FilteredRelationInput = (props) => {
   // Build filter params with dynamic values
   const filterParams = {};
   if (filterField1 && filterValue1) {
-    // Support {{documentId}} placeholder for current entity
     const value1 =
       filterValue1 === "{{documentId}}" ? documentId : filterValue1;
     filterParams[filterField1] = value1;
   }
   if (filterField2 && filterValue2) {
-    // Support {{documentId}} placeholder for current entity
     const value2 =
       filterValue2 === "{{documentId}}" ? documentId : filterValue2;
     filterParams[filterField2] = value2;
   }
 
-  // Get the content type from props
   const contentType = props.contentType || props.model;
 
   const saveFieldValue = async (newValue) => {
@@ -105,128 +103,311 @@ const FilteredRelationInput = (props) => {
     }
   };
 
+  // Fetch status options from target model schema
   React.useEffect(() => {
-    const fetchFilteredData = async () => {
-      if (!targetModel || Object.keys(filterParams).length === 0) {
+    const fetchStatusOptions = async () => {
+      if (!targetModel || !statusField) {
         return;
       }
 
-      setLoading(true);
       try {
-        const modelParts = targetModel.split("::");
-        if (modelParts.length !== 2) {
-          return;
+        let enumValues = null;
+
+        // Try 1: Get from content-type-builder (most reliable for schema)
+        try {
+          const builderResponse = await get(
+            `/content-type-builder/content-types/${targetModel}`,
+          );
+          const builderSchema = builderResponse?.data?.data?.schema;
+          enumValues = builderSchema?.attributes?.[statusField]?.enum;
+        } catch (e) {
+          // Endpoint might not be accessible, try next
         }
 
-        // Build filter query string using $and pattern
-        // Example: filters[$and][0][participantStatus][$eq]=Rejected&filters[$and][1][meeting][documentId][$eq]=bn0n8em49y7vljg5lrfh2aij
-        const filterQuery = Object.entries(filterParams)
-          .map(([key, value], index) => {
-            // Check if the key contains a dot (relation field)
-            if (key.includes(".")) {
-              const [relationField, nestedField] = key.split(".");
-              return `filters[$and][${index}][${relationField}][${nestedField}][$eq]=${encodeURIComponent(value)}`;
-            }
-            // Regular field
-            return `filters[$and][${index}][${key}][$eq]=${encodeURIComponent(value)}`;
+        if (enumValues && Array.isArray(enumValues)) {
+          setStatusOptions(enumValues);
+        }
+      } catch (err) {
+        console.error("[FilteredRelation] Error fetching status options:", err);
+      }
+    };
+
+    fetchStatusOptions();
+  }, [targetModel, statusField]);
+
+  const handleStatusChange = async (itemId, newStatus, e) => {
+    // Prevent navigation when clicking dropdown
+    e?.stopPropagation();
+
+    if (!statusField || !targetModel || !displayField) {
+      return;
+    }
+
+    const item = items.find((i) => i.originalId === itemId);
+    if (!item) {
+      console.error("[FilteredRelation] Item not found:", itemId);
+      return;
+    }
+
+    setUpdatingStatus((prev) => ({ ...prev, [itemId]: true }));
+
+    try {
+      // Step 1: Get current Meeting Participation Status record with ALL fields
+      const currentRecordUrl = `/content-manager/collection-types/${targetModel}/${itemId}?populate=*`;
+      const currentRecord = await get(currentRecordUrl);
+      const currentData = currentRecord?.data?.data || {};
+      const currentInvestors = currentData?.[displayField] || [];
+
+      // Step 2: Find the investor to disconnect (need full object)
+      const investorToRemove = Array.isArray(currentInvestors)
+        ? currentInvestors.find((inv) => {
+            const invDocId = inv?.documentId || inv?.id;
+            return invDocId === item.relatedDocumentId;
           })
-          .join("&");
-
-        const apiUrl = `/content-manager/collection-types/${targetModel}?${filterQuery}&populate[${displayField}][populate]=*`;
-        const response = await get(apiUrl);
-        const items =
-          response?.data?.results || response?.results || response?.data || [];
-
-        if (items.length > 0) {
-          const formattedItems = [];
-
-          items.forEach((item) => {
-            if (displayField && item[displayField]) {
-              // If displayField is an array, create one item per array element
-              if (Array.isArray(item[displayField])) {
-                item[displayField].forEach((rel) => {
-                  const displayValue =
-                    rel.fullName ||
-                    rel.name ||
-                    rel.displayName ||
-                    rel.firstName ||
-                    `ID: ${rel.documentId || rel.id}`;
-
-                  formattedItems.push({
-                    id: `${item.documentId || item.id}-${rel.documentId || rel.id}`,
-                    label: displayValue,
-                    originalId: item.documentId || item.id,
-                    relatedDocumentId: rel.documentId || rel.id,
-                    relationModel: relationModel,
-                  });
+        : null;
+
+      if (!investorToRemove) {
+        console.error(
+          "[FilteredRelation] Investor not found in current record",
+        );
+        alert("Investor not found in current record");
+        return;
+      }
+
+      // Build full payload like UI admin does
+      const updatePayload = {
+        documentId: currentData.documentId,
+        [displayField]: {
+          connect: [],
+          disconnect: [
+            {
+              id: investorToRemove.id,
+              documentId: investorToRemove.documentId,
+            },
+          ],
+        },
+        participantStatus: currentData.participantStatus,
+      };
+
+      // Use disconnect with full payload
+      const removeResponse = await put(
+        `/content-manager/collection-types/${targetModel}/${itemId}`,
+        updatePayload,
+      );
+
+      // Step 3: Find Meeting Participation Status with new status (same meeting)
+      const newFilterParams = {};
+      if (filterField1) {
+        newFilterParams[filterField1] = newStatus;
+      }
+      if (filterField2 && filterValue2) {
+        const value2 =
+          filterValue2 === "{{documentId}}" ? documentId : filterValue2;
+        newFilterParams[filterField2] = value2;
+      }
+
+      const filterQuery = Object.entries(newFilterParams)
+        .map(([key, value], index) => {
+          if (key.includes(".")) {
+            const [relationField, nestedField] = key.split(".");
+            return `filters[$and][${index}][${relationField}][${nestedField}][$eq]=${encodeURIComponent(value)}`;
+          }
+          return `filters[$and][${index}][${key}][$eq]=${encodeURIComponent(value)}`;
+        })
+        .join("&");
+
+      const searchUrl = `/content-manager/collection-types/${targetModel}?${filterQuery}&populate[${displayField}]=*`;
+      const searchResponse = await get(searchUrl);
+      const targetRecords =
+        searchResponse?.data?.results ||
+        searchResponse?.results ||
+        searchResponse?.data ||
+        [];
+
+      let targetRecordId;
+      let targetInvestors = [];
+
+      if (targetRecords.length === 0) {
+        console.error(
+          "[FilteredRelation] No target record found with new status for this meeting.",
+        );
+        const collectionDisplayName = targetModelInput || "record";
+        alert(
+          `No ${collectionDisplayName} found with status "${newStatus}" for this meeting. Please create one first.`,
+        );
+        return;
+      }
+
+      // Get full target record data
+      const targetRecord = targetRecords[0];
+      targetRecordId = targetRecord.documentId || targetRecord.id;
+
+      // Get target record with all fields
+      const targetRecordUrl = `/content-manager/collection-types/${targetModel}/${targetRecordId}?populate=*`;
+      const targetRecordFull = await get(targetRecordUrl);
+      const targetData = targetRecordFull?.data?.data || {};
+
+      // Step 4: Add investor to target record
+      // Build full payload like UI admin does
+      const addPayload = {
+        documentId: targetData.documentId,
+        [displayField]: {
+          connect: [
+            {
+              id: investorToRemove.id,
+              documentId: investorToRemove.documentId,
+            },
+          ],
+          disconnect: [],
+        },
+        participantStatus: targetData.participantStatus,
+      };
+
+      // Use connect with full payload
+      const addResponse = await put(
+        `/content-manager/collection-types/${targetModel}/${targetRecordId}`,
+        addPayload,
+      );
+
+      // Dispatch custom event to trigger refresh of all filtered relation fields
+      window.dispatchEvent(
+        new CustomEvent("filtered-relation-updated", {
+          detail: { documentId, targetModel },
+        }),
+      );
+
+      // Refresh current field
+      await fetchFilteredData();
+    } catch (err) {
+      console.error("[FilteredRelation] Error moving investor:", err);
+      alert("Failed to change status. Check console for details.");
+    } finally {
+      setUpdatingStatus((prev) => ({ ...prev, [itemId]: false }));
+    }
+  };
+
+  const fetchFilteredData = async () => {
+    if (!targetModel || Object.keys(filterParams).length === 0) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const modelParts = targetModel.split("::");
+      if (modelParts.length !== 2) {
+        return;
+      }
+
+      // Build filter query string
+      const filterQuery = Object.entries(filterParams)
+        .map(([key, value], index) => {
+          if (key.includes(".")) {
+            const [relationField, nestedField] = key.split(".");
+            return `filters[$and][${index}][${relationField}][${nestedField}][$eq]=${encodeURIComponent(value)}`;
+          }
+          return `filters[$and][${index}][${key}][$eq]=${encodeURIComponent(value)}`;
+        })
+        .join("&");
+
+      const populateFields = [displayField];
+      if (statusField) {
+        populateFields.push(statusField);
+      }
+
+      const apiUrl = `/content-manager/collection-types/${targetModel}?${filterQuery}&populate[${displayField}][populate]=*`;
+      const response = await get(apiUrl);
+      const items =
+        response?.data?.results || response?.results || response?.data || [];
+
+      if (items.length > 0) {
+        const formattedItems = [];
+
+        items.forEach((item) => {
+          if (displayField && item[displayField]) {
+            if (Array.isArray(item[displayField])) {
+              item[displayField].forEach((rel) => {
+                const displayValue =
+                  rel.fullName ||
+                  rel.name ||
+                  rel.displayName ||
+                  rel.firstName ||
+                  `ID: ${rel.documentId || rel.id}`;
+
+                formattedItems.push({
+                  id: `${item.documentId || item.id}-${rel.documentId || rel.id}`,
+                  label: displayValue,
+                  originalId: item.documentId || item.id,
+                  relatedDocumentId: rel.documentId || rel.id,
+                  relationModel: relationModel,
+                  currentStatus: item[statusField],
                 });
-              }
-              // Handle single relation object
-              else if (
-                typeof item[displayField] === "object" &&
-                item[displayField] !== null
-              ) {
-                if (item[displayField].count !== undefined) {
-                  formattedItems.push({
-                    id: item.id,
-                    label: `${item[displayField].count} items`,
-                  });
-                } else {
-                  const displayValue =
-                    item[displayField].fullName ||
-                    item[displayField].name ||
-                    item[displayField].displayName ||
-                    item[displayField].firstName ||
-                    `ID: ${item[displayField].id}`;
-
-                  formattedItems.push({
-                    id: item.id,
-                    label: displayValue,
-                    originalId: item.documentId || item.id,
-                    relatedDocumentId:
-                      item[displayField].documentId || item[displayField].id,
-                    relationModel: relationModel,
-                  });
-                }
-              }
-            } else {
-              // Fallback if no displayField
-              formattedItems.push({
-                id: item.id,
-                label: `ID: ${item.id}`,
-                originalId: item.documentId || item.id,
-                relatedDocumentId: item.documentId || item.id,
-                relationModel: targetModel,
               });
+            } else if (
+              typeof item[displayField] === "object" &&
+              item[displayField] !== null
+            ) {
+              if (item[displayField].count !== undefined) {
+                formattedItems.push({
+                  id: item.id,
+                  label: `${item[displayField].count} items`,
+                  currentStatus: item[statusField],
+                });
+              } else {
+                const displayValue =
+                  item[displayField].fullName ||
+                  item[displayField].name ||
+                  item[displayField].displayName ||
+                  item[displayField].firstName ||
+                  `ID: ${item[displayField].id}`;
+
+                formattedItems.push({
+                  id: item.id,
+                  label: displayValue,
+                  originalId: item.documentId || item.id,
+                  relatedDocumentId:
+                    item[displayField].documentId || item[displayField].id,
+                  relationModel: relationModel,
+                  currentStatus: item[statusField],
+                });
+              }
             }
-          });
+          } else {
+            formattedItems.push({
+              id: item.id,
+              label: `ID: ${item.id}`,
+              originalId: item.documentId || item.id,
+              relatedDocumentId: item.documentId || item.id,
+              relationModel: targetModel,
+              currentStatus: item[statusField],
+            });
+          }
+        });
 
-          setItems(formattedItems);
+        setItems(formattedItems);
 
-          // Auto-save to database without requiring user to click Save
-          const documentIds = formattedItems.map(
-            (item) => item.relatedDocumentId || item.id,
-          );
-          const newValue = JSON.stringify(documentIds);
+        // Auto-save to database
+        const documentIds = formattedItems.map(
+          (item) => item.relatedDocumentId || item.id,
+        );
+        const newValue = JSON.stringify(documentIds);
 
-          // Only save if value changed and we have a document ID
-          if (documentId && value !== newValue) {
-            await saveFieldValue(newValue);
-          }
-        } else {
-          // Clear the field if no items found
-          setItems([]);
-          if (documentId && value) {
-            await saveFieldValue(null);
-          }
+        if (documentId && value !== newValue) {
+          await saveFieldValue(newValue);
+        }
+      } else {
+        setItems([]);
+        if (documentId && value) {
+          await saveFieldValue(null);
         }
-      } catch (err) {
-        console.error("Error fetching filtered relations:", err);
-      } finally {
-        setLoading(false);
       }
-    };
+    } catch (err) {
+      console.error("Error fetching filtered relations:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
 
+  React.useEffect(() => {
     fetchFilteredData();
   }, [
     targetModel,
@@ -239,6 +420,21 @@ const FilteredRelationInput = (props) => {
     value,
   ]);
 
+  // Listen for updates from other filtered relation fields
+  React.useEffect(() => {
+    const handleUpdate = (event) => {
+      // Refresh if same document
+      if (event.detail?.documentId === documentId) {
+        fetchFilteredData();
+      }
+    };
+
+    window.addEventListener("filtered-relation-updated", handleUpdate);
+    return () => {
+      window.removeEventListener("filtered-relation-updated", handleUpdate);
+    };
+  }, [documentId]);
+
   const fieldLabel = props.label || name;
   const itemCount = items.length;
 
@@ -258,8 +454,8 @@ const FilteredRelationInput = (props) => {
         ) : items.length > 0 ? (
           <Flex direction="column" alignItems="stretch" gap={1}>
             {items.map((item) => {
-              // Use relation model (e.g., api::investor.investor) with relatedDocumentId
               const editUrl = `/content-manager/collection-types/${item.relationModel}/${item.relatedDocumentId}`;
+              const isUpdating = updatingStatus[item.originalId];
 
               return (
                 <Box
@@ -275,15 +471,38 @@ const FilteredRelationInput = (props) => {
                   paddingRight={4}
                   style={{
                     cursor: "pointer",
-                    height: "50px",
+                    minHeight: "50px",
                     display: "flex",
                     alignItems: "center",
+                    justifyContent: "space-between",
                   }}
                   onClick={() => navigate(editUrl)}
                 >
                   <Typography variant="omega" textColor="primary600">
                     {item.label}
                   </Typography>
+
+                  {statusField && statusOptions.length > 0 && (
+                    <Box
+                      onClick={(e) => e.stopPropagation()}
+                      style={{ minWidth: "150px" }}
+                    >
+                      <SingleSelect
+                        size="S"
+                        value={item.currentStatus}
+                        onChange={(value) =>
+                          handleStatusChange(item.originalId, value, null)
+                        }
+                        disabled={isUpdating}
+                      >
+                        {statusOptions.map((status) => (
+                          <SingleSelectOption key={status} value={status}>
+                            {status}
+                          </SingleSelectOption>
+                        ))}
+                      </SingleSelect>
+                    </Box>
+                  )}
                 </Box>
               );
             })}
@@ -301,7 +520,6 @@ const FilteredRelationInput = (props) => {
             {Object.keys(filterParams).length > 0
               ? `Filters: ${Object.entries(filterParams)
                   .map(([k, v]) => {
-                    // Show placeholder name if it's a dynamic value
                     const displayValue =
                       v === documentId ? "{{current documentId}}" : v;
                     return `${k} = ${displayValue}`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tunghtml/strapi-plugin-filtered-relation",
-  "version": "1.0.0",
-  "description": "A Strapi custom field plugin for displaying filtered relations with dynamic placeholder support",
+  "version": "1.1.0",
+  "description": "A Strapi custom field plugin for displaying filtered relations with dynamic placeholder support and status change capability",
   "keywords": [
     "strapi",
     "strapi-plugin",
@@ -10,18 +10,10 @@
     "filter",
     "strapi5"
   ],
-  "homepage": "https://github.com/finnwasabi/strapi-plugin-filtered-relation#readme",
-  "bugs": {
-    "url": "https://github.com/finnwasabi/strapi-plugin-filtered-relation/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/finnwasabi/strapi-plugin-filtered-relation.git"
-  },
   "strapi": {
     "name": "filtered-relation",
     "displayName": "Filtered Relation",
-    "description": "Relation field with filtering capability and dynamic placeholders",
+    "description": "Relation field with filtering capability, dynamic placeholders, and status change",
     "kind": "plugin"
   },
   "dependencies": {
@@ -39,12 +31,6 @@
     "name": "Tung HTML",
     "email": "tunghtml@example.com"
   },
-  "maintainers": [
-    {
-      "name": "Tung HTML",
-      "email": "tunghtml@example.com"
-    }
-  ],
   "engines": {
     "node": ">=18.0.0 <=22.x.x",
     "npm": ">=6.0.0"

package/server/register.js

@@ -1,3 +1,5 @@
+"use strict";
+
 module.exports = ({ strapi }) => {
   strapi.customFields.register({
     name: "filtered-relation",
@@ -69,8 +71,6 @@ async function updateRelatedFilteredFields(event, strapi) {
           const targetModel = parseCollectionName(targetModelInput);
 
           // Build filter params
-          // Note: {{documentId}} placeholder cannot be resolved in lifecycle hooks
-          // as we don't have context of which entity is being viewed
           const filterParams = {};
           if (
             filterField1 &&

package/strapi-admin.js

@@ -36,7 +36,8 @@ export default {
       },
       intlDescription: {
         id: "filtered-relation.description",
-        defaultMessage: "Relation field with filtering by field value",
+        defaultMessage:
+          "Relation field with filtering by field value and status change",
       },
       components: {
         Input: async () => {
@@ -153,6 +154,31 @@ export default {
               },
             ],
           },
+          {
+            sectionTitle: {
+              id: "filtered-relation.section.statusChange",
+              defaultMessage: "Status Change Configuration",
+            },
+            items: [
+              {
+                name: "options.statusField",
+                type: "text",
+                intlLabel: {
+                  id: "filtered-relation.statusField.label",
+                  defaultMessage: "Status Field Name",
+                },
+                description: {
+                  id: "filtered-relation.statusField.description",
+                  defaultMessage:
+                    "Field name in target model that contains status (e.g., 'participantStatus'). Leave empty to disable status change.",
+                },
+                placeholder: {
+                  id: "filtered-relation.statusField.placeholder",
+                  defaultMessage: "participantStatus",
+                },
+              },
+            ],
+          },
         ],
       },
     });

package/strapi-server.js

@@ -1,11 +1,5 @@
 const register = require("./server/register");
-const controllers = require("./server/controllers");
-const routes = require("./server/routes");
-const services = require("./server/services");
 
 module.exports = {
   register,
-  controllers,
-  routes,
-  services,
 };

package/server/controllers/content-types.js

@@ -1,26 +0,0 @@
-module.exports = {
-  async find(ctx) {
-    try {
-      const contentTypes = strapi.contentTypes;
-      const apiTypes = [];
-
-      for (const [uid, contentType] of Object.entries(contentTypes)) {
-        if (uid.startsWith("api::")) {
-          apiTypes.push({
-            uid,
-            displayName:
-              contentType.info?.displayName ||
-              contentType.schema?.displayName ||
-              uid.split("::")[1],
-          });
-        }
-      }
-
-      apiTypes.sort((a, b) => a.displayName.localeCompare(b.displayName));
-
-      ctx.body = { data: apiTypes };
-    } catch (error) {
-      ctx.throw(500, error);
-    }
-  },
-};

package/server/controllers/index.js

@@ -1,5 +0,0 @@
-const contentTypes = require("./content-types");
-
-module.exports = {
-  contentTypes,
-};

package/server/routes/index.js

@@ -1,11 +0,0 @@
-module.exports = [
-  {
-    method: "GET",
-    path: "/content-types",
-    handler: "contentTypes.find",
-    config: {
-      policies: [],
-      auth: false,
-    },
-  },
-];

package/server/services/index.js

@@ -1 +0,0 @@
-module.exports = {};