Update module to allow any type of collection name, not only blocks

Author: Lucas Frey

package.json

@@ -1,7 +1,7 @@
 {
   "name": "directus-conditional-fields",
   "version": "1.0.0",
-  "description": "Directus conditional fields",
+  "description": "Conditional fields interface for Directus",
   "main": "",
   "scripts": {
     "build": "directus-extensions build",

readme.md

@@ -1,17 +1,22 @@
 # Directus conditional fields
 
-![Directus conditional fields](https://raw.githubusercontent.com/lucasfrey/directus-conditional-fields/master/directus-conditional-fields.gif "Directus conditional fields")
+Conditional fields is a custom extension that allow you to hide and show fields in a collection
 
-Conditional fields is a custom extension that allow you to hide and show fields in a collection called `block` (for now).
-In order to work, you will need to create a collection with these parameters:
+![Directus conditional fields](https://raw.githubusercontent.com/lucasfrey/directus-conditional-fields/master/directus-conditional-fields.gif "Directus conditional fields")
 
+# Usage
 ### Type dropdown
-The `type` dropdown will host the event listener that will trigger the hide and show fields
-
-### Fields naming convention
+Add a `type` dropdown that will host the event listener and will trigger the hide and show fields
+e.g:
+Type:
+	- editorial
+	- image
+	- quote
+	- ...
+
+### Field naming convention
 Once you have setup your type field, you need to name your fields like the above
-
-*NOTE:* currently the collection fields need to be named `block`, but we could easily update that in the future
+(example with a collection named `blocks`, with `blocks`, you will need to start your field name with the singular `block`)
 
 | collection | type      | field   |
 |------------|-----------|---------|
@@ -23,10 +28,12 @@ Once you have setup your type field, you need to name your fields like the above
 With that config, if you select the type `editorial` in the dropdown, only the `text` and `intro` fields will appear on the screen.
 
 ### Import conditional-fields into the collection
-Once you have setup your fields, you can then just add the conditional-fields field so the javascript can do his job on the administration page.
+Once you have setup your fields, you can then just add the `conditional-fields` field so the javascript can do his job on the administration page.
+*NOTE*: you will have to name the field `conditional-fields`
 
+And that's it !
 
-## Usage
+## Build
 If you update this module, don't forget to run the production build like this :
 
 ```

src/input.vue

@@ -9,19 +9,14 @@
     mixins: [mixin],
     mounted() {
       // Fetch block options
-      const { values } = this._props
-
-      // Start block system
-      // Basically we hide/show field relevant to the type of blocks
-
+      const { values, fields } = this._props
       const fieldsNode = document.querySelectorAll('[data-field]');
-      const interface = document.querySelector('[data-field="block_interface"]');
+      const conditionalInterface = document.querySelector('[data-field="conditional_interface"]');
       const typeField = document.querySelector('[data-field=type]');
-
       const options = this.getOptions();
 
       // hide this custom interface
-      if (interface) interface.style.display = 'none'
+      if (conditionalInterface) conditionalInterface.style.display = 'none'
 
       // hide all fields until the user choose a type
       this.hideAll(fieldsNode)
@@ -62,22 +57,25 @@
         }
       },
       getOptions() {
-        // Fetch block options
+        // Fetch options
         const { fields } = this._props
+        const collectionName = this.getCollectionName(this.$parent.collection);
 
-        // build options
-        let blockOpts = [];
+        // Build options
+        let options = [];
 
         Object.keys(fields).forEach(( key, index ) => {
-            if (key.startsWith('block_') && key !== "block_interface") {
-            let splitKeys = key.split("_");
+            if (key.startsWith(`${collectionName}_`) && key !== "conditional_interface") {
+              const splitKeys = key.split("_");
+              const type = splitKeys[1];
 
-            if (!blockOpts[splitKeys[1]]) blockOpts[splitKeys[1]] = []
-                blockOpts[splitKeys[1]].push(key)
+              if (!options[type]) options[type] = []
+
+              options[type].push(key)
             }
         });
 
-        return blockOpts;
+        return options;
       },
       showFields(fieldsNode) {
         if (fieldsNode) {
@@ -89,6 +87,10 @@
             }
           }
         }
+      },
+      getCollectionName(collection) {
+        // If the collection name ends with an 's', we use the singular name
+        return collection.endsWith('s') ? collection.substring(0, collection.length - 1) : collection
       }
     }
   }