Frontend Service Factory - QuinnBast/SaskTel-Communication-Portal GitHub Wiki

Service Factory

The ServiceFactory.jsx file is a factory that generates a service based on information pulled from the user's services that are retrieved from an API endpoint. Based on the service name, the service factory is able to assign the services and their XmlEditable components to fully generate a setting that is configurable within the page.

Creating a new service in the factory

In order to configure a new service in the factory, an additional case needs to be added to the switch statement. This can be easily done, and within the case statement, the appropriate configuration of the Service and XmlEditables needs to be generated.

A service can be created with the following syntax:

<Service hasEdit
    hasToggle
    activePath={["RootElement", "active"]}
    name={"Service Name"}
    uri={"/someUri"}
    onEdit={onEdit}
    tooltip={"Tooltip Text"}

In this syntax, the props are defined below:

Prop name Description Type Example
hasEdit If the service has an 'Edit' button in the menu. Boolean true/false
hasToggle If the service has a toggle button to activate itself. Boolean true/false
activePath If a toggle is specified, the XmlLocation which indicates where the 'active' value is located in the Xml response. Array of strings ["RootElement", "active"]
name The name of the setting to display. String "Setting Name"
"Do Not Disturb"
uri The API endpoint to use to load information about the service. A GET request is always sent. String "/endpoint"
onEdit THe function that gets called when the 'Edit' button is pressed. This function is passed into the ServiceFactory component from the CarouselManager in order to allow the CarouselManager to handle rotating to the configuration page. Function onEdit //This function is passed into the ServiceFactory
tooltip The text to display when hovering over a tooltip icon. String "This service allows you to do things."

Configuring the Edit page

Once the service has been created, if any additional settings for the service need to be configured (ie, if the service has more than just an 'active' tag), then additional XmlEditable components need to be defined in order for the 'Edit' page to be generated with the ability to change other options in the Xml. Note: This means the service must have the 'hasEdit' flag.

For example, an Xml dataset with the following tags would need an additional XmlEditable component:

<RootElement>
    <active>true</active>
    <anotherSetting>anotherValue</anotherSetting>
</RootElement>

Because the Xml Element above contains two parameters, this response would require the 'Edit' button to be configured by adding XmlEditable elements. This service could be configured as shown below:

<Service hasEdit
    hasToggle
    activePath={["RootElement", "active"]}
    name={"Service Name"}
    uri={"/someUri"}
    onEdit={onEdit}
    tooltip={"Tooltip Text"}
    <XmlEditable name={"Another Setting"}
        tooltip={"Another setting to change"}
        type={"string"}
        XmlLocation={["RootElement", "anotherSetting"]} />
</Service>

An XmlEditable can be created using the following props outlined below:

Prop name Description Type Example
name The name of the setting String "Setting name"
"Phone Number"
tooltip The text to display when hovering over a tooltip icon. String "This service allows you to do things."
type The type of setting that the XmlLocation points to. This allows configuring different types of configurations to ensure validation. The possible types are: "bool", "range", "phone", "number", "string". oneOf(["bool", "range", "phone", "number", "string"]) "string"
"range"
"phone"
range Required parameter only if the "range" type is selected. This prop defines the minimum and maximum range that can be selected for the value. Array [min, max]
[1, 20]
[0, 10]
XmlLocation The location of the Xml tag in the response. Array ["RootElement", "someSetting"]
parent This option should not be configured and is set after the parent tag is created.
locked If the option can be changed by the user. If the locked prop is passed, the component will not be able to be changed. Boolean true/false
hideTitle Prevents the name prop from being displayed for the setting. Only used if the name is somehow irrelevant. Boolean true/false
linkedKey In a key-value pair, the linkedKey prop is passed in to determine the 'key' of the element. This allows sending updates for key-value paris. Any 2, "2", "someKey", ...
⚠️ **GitHub.com Fallback** ⚠️