Fields setup

Most usefull feature of the admin panel is that is can display your data in different contianes, and not just a text fild. You can defined, dates, dropdowns, image pickers, html editor etc.

To setup the filds go in "src/config/app.js" and there you will find the adminConfig->fieldsTypes element. Each field inside list typeOfField:[list of names of firebase fields that should be converted to given type].

"fieldsTypes":{
    "photo":["photo","image"],
    "dateTime":["datetime","start"],
    "date":["date","created"], //removed in v4.0.0
    "time":["time"], //removed in v4.0.0
    "textarea":["description"],
    "html":["content"],
    "radio":["radio"],
    "checkbox":["checkbox"],
    "map":["map","latlng","location"], //since v3.0.0
    "dropdowns":["status","dropdowns"],
        "file":["video"],       //since v2.0.0
        "rgbaColor":['rgba',"*Color"],  //since v2.0.0  //Since 3.2.0 you can use * to math all fields ending on some key ex. textColor, rowColor etc..
        "hexColor":['color'],   //since v2.0.0
        "relation":['type'],    //since v2.0.0
        "iconmd":['icon'],      //Material Icon since v2.1.0
        "iconfa":['iconfa'],    //FontAwesome since v2.1.0
        "iconti":['iconti'],    //Typicons since v2.1.0

  },

So for an example. If you have a fields "photo" in your data, the firebase admin, with get the URL of the photo and convert it to image view with upload button. You can extend the list of fields here and add your own field types. The code for doing that is located in "src/components/fields/Fields.js".

Our most advance component is the HTML WYSWYG editor. It is based on this module. You can write your HTML there, put remote images etc..

radio,checkbox and dropdowns are special type of filds that can have predefined values for their selection. To manage it, you will see the element "optionsForSelect" in the same "adminConfig" element in "src/config/app.js". Here is how it looks. You can list your field, and add the options that should be there for that field.

"optionsForSelect":[
      {"key":"dropdowns","options":["new","processing","rejected","completed"]},
      {"key":"checkbox","options":["Skopje","Belgrade","New York"]},
      {"key":"status","options":["just_created","confirmed","canceled"]},
      {"key":"radio","options":["no","maybe","yes"]}
  ],

View video of setting up fields

Relations

Sine v2.0.0 there is new "Relation" field. This field is really powerfull because gives relations capabilities to Firebase. It can display list of data (ex.Categories) in givven field list (ex.Article details). This action can also create additional fields in firebase so later can be used in your search query in Firebase. To manage it, you will see the element "optionsForRelation" in the same "adminConfig" element in "src/config/app.js". Here is how it looks. You can list your field, and add the options that should be there for that field.

"optionsForRelation":[
        {
            "key":"type", //Type of fields, always remains same
            "path":"/static/genres/items", //Path to the referenced data, ex Categories in article
            "value":"name", //What key to put in the "value" of the select
            "display":"name", //What key to put in the "name" of the select element
            "isValuePath":false, //If true, for the value we will put the value key, if false, we will use the path to the referenced object
            "produceRelationKey":true, //You will need new field automaticaly produced if you want to query the reference ex. Category -> Action
            "relationKey":"type_eventid", //Name of the newly produced field
            "relationJoiner":"-" //How the values of the both object are joined ex. category_id-article_id
        },
],

View video of setting up relation fields

Sine v4.0.0 there is new and improuved "DateTime" field based on this module. The React-DateTime module is based on moment.js. So follow the date/time formating of moment.js as explained here. To manage it, you will see the element "optionsForDateTime" in the same "adminConfig" element in "src/config/app.js". Here is how it looks.

"optionsForDateTime":[
    {"key":"end", "dateFormat":"YYYY-MM-DD" ,"timeFormat":true, "saveAs":"x","locale":"es"},
    {"key":"start", "dateFormat":"YYYY-MM-DD" ,"timeFormat":"HH:mm", "saveAs":"YYYY-MM-DD HH:mm"},
  ],

Each element has:

key: The key that affects this setup - firebase or firestore
dateFormat: Date Format to display in the fields and on the component. This can be string or boolean. Follow the date/time formating of moment.js as explained here
timeFormat: Time Format to display in the fields and on the component. This can be string or boolean. Follow the date/time formating of moment.js as explained here
saveAs: In what format to save in the database. This is also used for reading and convertign. Ex "x" will save it as timestamp. Follow the date/time formating of moment.js as explained here
locale: Components locale, optional. Default is en