From 9ec0ee4c1ea39398f9fb8d9b4fa4d813918fcf81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:35:31 +0100 Subject: [PATCH 01/19] document started --- doc/objects.md | 249 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 doc/objects.md diff --git a/doc/objects.md b/doc/objects.md new file mode 100644 index 00000000..f938e494 --- /dev/null +++ b/doc/objects.md @@ -0,0 +1,249 @@ +# Objects + +> Allow you to create, manage and organize your pedagical and onboarding content. + +## Definition + +An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. +Objects can be associated together and then share a vertical or horizontal relationship, which allow to build complex structure of multiple objects. + +It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. + +This is the minimal structure of an object: + +- name +- type (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`) +- status (`draft`, `online`, `offline`) +- attrs {} +- childrenAttrs {} +- children {} + +## Browse Object: + +To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. + +### Create a new object for your step in the admin + +> (in _Admin_ > _Add new object_) + +Capture d’écran 2019-04-22 à 15 57 37 +Capture d’écran 2019-04-22 à 15 58 21 + +- The title of your object will be the title displayed to your candidates (for the step you are creating). Use an intellegible title for your user. + > NB: you can always edit it in the _Admin_ +- This object must have the same type as its future parent object ("signup" or "onboarding"). + +> Your step is then available in the _Admin_. You can find it in the section of its type (_SignUp_ or _Onboarding_) or thanks to the search bar of the cursus object's page. + +### Add this new object as a child of your parent's object + +#### 1. Edit the parent object (_Sign up_ or _Administration_) + +Capture d’écran 2019-04-22 à 19 24 23 +Capture d’écran 2019-04-22 à 19 24 10 + +#### 2. Go to _Children_ > _Add a child_ + +![add child to major object](https://user-images.githubusercontent.com/35296671/56506977-de50c800-6517-11e9-9c71-d19a1ec4e5cd.png) + +#### 3. Set up the new child: + +- Enter its name in the input "Add a child name" +- Select your step object in the select input +- Click on "ADD" + +> Your step is then related to its parent. You can see it in the _Children_ section of the parent's object. There, you can now: +> +> - Delete the step as a child of its parent (the actual object of your step will not be deleted). +> - Reorder it in the children's list, by dragging it to the place you want. +> - Go to update its settings by clicking on the eye of its reference (it will redirect you to the actual object of your step). +> Capture d’écran 2019-04-22 à 19 51 12 + +## Settings for a `form` step + +> In the step object you have created, 2 attributes must be filled: +> +> 1. Subtype +> 2. Form + +### Description + +#### Edit the step object you have created : + +> in _Object attributes_ + +Capture d’écran 2019-04-22 à 15 59 33 + +- Add a new key **subtype** of type `String` with the exact value 'onb-adm-form-generator' +- Add a new key **form** of type `Object` + - The form you are creating can have several sections. Each section is displayed with a title, and its inputs. + > NB: The submission of the form will check the required inputs of all the sections you have created for the form. + - To create a section, add a new key to your form object, of type `Object`, that contains: + - A **title** key of type `String`. The value of this property will be the title displayed in the top of your form section. + > If you have only one section in your form step, and you don't need a section title, you do not have to set up this property. + - An **inputs** key of type `Object`, which will contain all the inputs of the section. For each wanted input, add a new `Object` element in the "inputs" object. + > The key of this object will be used as the "name" attribute of your input. + > The values will be considered as the properties of your input. + +#### Defining an input: + +- You must declare a **type** key of type `String`, which define the type of your input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea` (and soon a special type `countries`). +- Then you can fill the props you need for your input, according to its type: `placeholder`, `id`, `required`, `label`, `items`, `emptyItems`, `index`, etc... + +#### Important indication: + +- The **index** property is used to order your inputs. It will not be passed onto the input. Be mindful not to set the same index twice. +- The **type** property is required. It will be used to determine the kind of input we must generate. It is passed onto the input only if the input type attribute is required (type 'tel' or 'text' for example, but not for type 'select' - in this case, we will generate a select element) + - At the moment, we are creating a special type 'countries' (a `Select` displaying all the countries). Documentation will be updated as soon as it is available. +- `onChange` prop are ignored as the event is handled by the app. +- For `switch` and `checkbox` input types, the default value has to be set as a boolean property named **value**. +- More information for each inputs is available in the design documentation: + - [textInput documentation](https://alem.01-edu.org/design/Components/FormInputs/TextInput) - used for inputs type 'text', 'tel', and 'date' + - [textArea documentation](https://alem.01-edu.org/design/Components/FormInputs/TextArea) + - [select documentation](https://alem.01-edu.org/design/Components/FormControls/Select) + - [radio button documentation](https://alem.01-edu.org/design/Components/FormControls/Radio) + - [switch documentation](https://alem.01-edu.org/design/Components/FormControls/Switch) + - [checkbox documentation](https://alem.01-edu.org/design/Components/FormControls/Checkbox) + +### Examples + +Here is an example of the form step's attributes. It presents a form with two sections, and an example of each kind of input type. + +> NB : this example object will soon be provided in the admin. + +```json +{ + "subtype": "onb-adm-form", + "form": { + "section1": { + "title": "My section title", + "inputs": { + "firstName": { + "index": 0, + "placeholder": "First name", + "type": "text", + "required": true + }, + "tel": { + "index": 1, + "required": true, + "type": "tel", + "label": "Phone number", + "placeholder": "+333 33 33 33 33", + "pattern": "[+][3][0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" + }, + "medicalInfo": { + "label": "Medical informations", + "index": 6, + "placeholder": "Medical Informations", + "type": "textarea" + }, + "dateOfBirth": { + "index": 2, + "required": true, + "type": "date", + "label": "Date of birth", + "value": "2000-01-01" + }, + "gender": { + "index": 3, + "type": "select", + "id": "genders", + "required": true, + "emptyItem": { "label": "Select your gender" }, + "items": [ + { "label": "Male", "data": "male" }, + { "label": "Female", "data": "female" } + ] + }, + "environment": { + "index": 4, + "type": "radio", + "required": true, + "label": "Which environment do you live in ?", + "inlineBlock": true, + "items": [ + { "label": "City", "data": "city" }, + { "label": "Countryside", "data": "countryside" } + ] + }, + "programmingAbilities": { + "index": 5, + "type": "switch", + "label": "I am new in programming", + "value": true + }, + "generalConditions": { + "index": 7, + "type": "checkbox", + "label": "I have read and I accept the general conditions", + "value": false + } + } + }, + "section2": { + "title": "My second section title", + "inputs": { + "firstName": { + "index": 0, + "placeholder": "First name", + "type": "text", + "required": true + } + } + } + } +} +``` + +This 'form' step would look like this: + +![form step example](https://user-images.githubusercontent.com/35296671/56503976-012aae80-650f-11e9-82c8-dd7d026b6eb1.png) + +## Settings for a `document to sign` step + +The newly created child can be customized with these attributes : + +| name | fullfillment | +| ---------- | ------------ | +| subtype | **required** | +| text | **required** | +| buttonText | optionnal | +| checkbox | optionnal | + +### Description + +#### To set up the child object you have created with these elements: + +1. Edit you step object +2. Go to _Object attributes_ +3. Add the following attributes: + - Add a new key **subtype** of type `String` with the exact value 'onb-adm-sign' + - Add a new key **text** of type `String` with the text of your document to sign as value + - Add a new key **buttonText** of type `String` with the text that you want to display in the submit button of your step. If you do not fill this property, the default value is 'Sign'. + - Add a new key **checkbox** of type `Object`, if you want to force your user to click on a checkbox before validating his document (ex: 'I have read and accepted the conditions'). In the checkbox object, you should define: + - A **label** key of type `String`, with the text you want to associate to the checkbox + - A **required** key of type `Boolean`, set at true if you want to force the user to check it + - A **name** key of type `String` + - Then you can add all other properties you want to your checkbox. + +### Examples + +Here is an example of the structure a 'document to sign' step could have: + +```json +{ + "subtype": "onb-adm-sign", + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare non sem eu pretium. Integer porttitor risus eget nibh iaculis, ac lacinia orci dictum. Nunc ullamcorper consequat enim in posuere. Aliquam volutpat est odio, vel maximus arcu maximus sit amet. Donec ultricies faucibus magna id luctus. Duis et dapibus elit. In vestibulum ipsum erat, at commodo tortor convallis vel. Nunc ut ultrices nulla. Etiam lorem justo, consequat a consectetur a, porttitor non turpis. Mauris eu mollis nisl, id dignissim quam. Curabitur condimentum sollicitudin rutrum. Aenean blandit, arcu nec ullamcorper rhoncus, lectus sem lacinia lorem, venenatis dignissim velit mi et sapien. Nullam posuere augue ut magna ullamcorper dignissim. Ut rhoncus sapien vel nulla commodo finibus. Cras non leo vel urna finibus volutpat. Praesent et ex eget diam tincidunt suscipit. Phasellus bibendum neque vel placerat iaculis. Vestibulum bibendum ultrices ipsum, non sodales lectus. Cras eget orci eget elit blandit scelerisque at ut nulla. Integer ligula eros, eleifend quis sodales a, porttitor sit amet neque. Fusce mollis magna at lectus varius, quis suscipit mi cursus. Etiam id imperdiet metus, in malesuada quam. Aliquam facilisis nunc non sapien condimentum, quis iaculis nisl auctor. Nunc lorem sapien, interdum vel efficitur ac, dapibus a diam. Ut ante urna, sodales in bibendum vel, lacinia ut mauris. In vel placerat leo. In libero dui, tincidunt at sem id, faucibus sollicitudin elit.", + "buttonText": "Sign chart", + "checkbox": { + "name": "acceptChart", + "label": "I have read and accepted the Chart 01", + "required": true + } +} +``` + +This 'document to sign' step would look like this: + +![document to sign step example](https://user-images.githubusercontent.com/35296671/56504782-8f079900-6511-11e9-9a0e-bb638b6d7d03.png) From 0bf88e220d56b2692d49a66eb870286b9d3b1a63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:45:14 +0100 Subject: [PATCH 02/19] Update objects.md added screenshot --- doc/objects.md | 225 +------------------------------------------------ 1 file changed, 1 insertion(+), 224 deletions(-) diff --git a/doc/objects.md b/doc/objects.md index f938e494..b79d9080 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -22,228 +22,5 @@ This is the minimal structure of an object: To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. -### Create a new object for your step in the admin +![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) -> (in _Admin_ > _Add new object_) - -Capture d’écran 2019-04-22 à 15 57 37 -Capture d’écran 2019-04-22 à 15 58 21 - -- The title of your object will be the title displayed to your candidates (for the step you are creating). Use an intellegible title for your user. - > NB: you can always edit it in the _Admin_ -- This object must have the same type as its future parent object ("signup" or "onboarding"). - -> Your step is then available in the _Admin_. You can find it in the section of its type (_SignUp_ or _Onboarding_) or thanks to the search bar of the cursus object's page. - -### Add this new object as a child of your parent's object - -#### 1. Edit the parent object (_Sign up_ or _Administration_) - -Capture d’écran 2019-04-22 à 19 24 23 -Capture d’écran 2019-04-22 à 19 24 10 - -#### 2. Go to _Children_ > _Add a child_ - -![add child to major object](https://user-images.githubusercontent.com/35296671/56506977-de50c800-6517-11e9-9c71-d19a1ec4e5cd.png) - -#### 3. Set up the new child: - -- Enter its name in the input "Add a child name" -- Select your step object in the select input -- Click on "ADD" - -> Your step is then related to its parent. You can see it in the _Children_ section of the parent's object. There, you can now: -> -> - Delete the step as a child of its parent (the actual object of your step will not be deleted). -> - Reorder it in the children's list, by dragging it to the place you want. -> - Go to update its settings by clicking on the eye of its reference (it will redirect you to the actual object of your step). -> Capture d’écran 2019-04-22 à 19 51 12 - -## Settings for a `form` step - -> In the step object you have created, 2 attributes must be filled: -> -> 1. Subtype -> 2. Form - -### Description - -#### Edit the step object you have created : - -> in _Object attributes_ - -Capture d’écran 2019-04-22 à 15 59 33 - -- Add a new key **subtype** of type `String` with the exact value 'onb-adm-form-generator' -- Add a new key **form** of type `Object` - - The form you are creating can have several sections. Each section is displayed with a title, and its inputs. - > NB: The submission of the form will check the required inputs of all the sections you have created for the form. - - To create a section, add a new key to your form object, of type `Object`, that contains: - - A **title** key of type `String`. The value of this property will be the title displayed in the top of your form section. - > If you have only one section in your form step, and you don't need a section title, you do not have to set up this property. - - An **inputs** key of type `Object`, which will contain all the inputs of the section. For each wanted input, add a new `Object` element in the "inputs" object. - > The key of this object will be used as the "name" attribute of your input. - > The values will be considered as the properties of your input. - -#### Defining an input: - -- You must declare a **type** key of type `String`, which define the type of your input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea` (and soon a special type `countries`). -- Then you can fill the props you need for your input, according to its type: `placeholder`, `id`, `required`, `label`, `items`, `emptyItems`, `index`, etc... - -#### Important indication: - -- The **index** property is used to order your inputs. It will not be passed onto the input. Be mindful not to set the same index twice. -- The **type** property is required. It will be used to determine the kind of input we must generate. It is passed onto the input only if the input type attribute is required (type 'tel' or 'text' for example, but not for type 'select' - in this case, we will generate a select element) - - At the moment, we are creating a special type 'countries' (a `Select` displaying all the countries). Documentation will be updated as soon as it is available. -- `onChange` prop are ignored as the event is handled by the app. -- For `switch` and `checkbox` input types, the default value has to be set as a boolean property named **value**. -- More information for each inputs is available in the design documentation: - - [textInput documentation](https://alem.01-edu.org/design/Components/FormInputs/TextInput) - used for inputs type 'text', 'tel', and 'date' - - [textArea documentation](https://alem.01-edu.org/design/Components/FormInputs/TextArea) - - [select documentation](https://alem.01-edu.org/design/Components/FormControls/Select) - - [radio button documentation](https://alem.01-edu.org/design/Components/FormControls/Radio) - - [switch documentation](https://alem.01-edu.org/design/Components/FormControls/Switch) - - [checkbox documentation](https://alem.01-edu.org/design/Components/FormControls/Checkbox) - -### Examples - -Here is an example of the form step's attributes. It presents a form with two sections, and an example of each kind of input type. - -> NB : this example object will soon be provided in the admin. - -```json -{ - "subtype": "onb-adm-form", - "form": { - "section1": { - "title": "My section title", - "inputs": { - "firstName": { - "index": 0, - "placeholder": "First name", - "type": "text", - "required": true - }, - "tel": { - "index": 1, - "required": true, - "type": "tel", - "label": "Phone number", - "placeholder": "+333 33 33 33 33", - "pattern": "[+][3][0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" - }, - "medicalInfo": { - "label": "Medical informations", - "index": 6, - "placeholder": "Medical Informations", - "type": "textarea" - }, - "dateOfBirth": { - "index": 2, - "required": true, - "type": "date", - "label": "Date of birth", - "value": "2000-01-01" - }, - "gender": { - "index": 3, - "type": "select", - "id": "genders", - "required": true, - "emptyItem": { "label": "Select your gender" }, - "items": [ - { "label": "Male", "data": "male" }, - { "label": "Female", "data": "female" } - ] - }, - "environment": { - "index": 4, - "type": "radio", - "required": true, - "label": "Which environment do you live in ?", - "inlineBlock": true, - "items": [ - { "label": "City", "data": "city" }, - { "label": "Countryside", "data": "countryside" } - ] - }, - "programmingAbilities": { - "index": 5, - "type": "switch", - "label": "I am new in programming", - "value": true - }, - "generalConditions": { - "index": 7, - "type": "checkbox", - "label": "I have read and I accept the general conditions", - "value": false - } - } - }, - "section2": { - "title": "My second section title", - "inputs": { - "firstName": { - "index": 0, - "placeholder": "First name", - "type": "text", - "required": true - } - } - } - } -} -``` - -This 'form' step would look like this: - -![form step example](https://user-images.githubusercontent.com/35296671/56503976-012aae80-650f-11e9-82c8-dd7d026b6eb1.png) - -## Settings for a `document to sign` step - -The newly created child can be customized with these attributes : - -| name | fullfillment | -| ---------- | ------------ | -| subtype | **required** | -| text | **required** | -| buttonText | optionnal | -| checkbox | optionnal | - -### Description - -#### To set up the child object you have created with these elements: - -1. Edit you step object -2. Go to _Object attributes_ -3. Add the following attributes: - - Add a new key **subtype** of type `String` with the exact value 'onb-adm-sign' - - Add a new key **text** of type `String` with the text of your document to sign as value - - Add a new key **buttonText** of type `String` with the text that you want to display in the submit button of your step. If you do not fill this property, the default value is 'Sign'. - - Add a new key **checkbox** of type `Object`, if you want to force your user to click on a checkbox before validating his document (ex: 'I have read and accepted the conditions'). In the checkbox object, you should define: - - A **label** key of type `String`, with the text you want to associate to the checkbox - - A **required** key of type `Boolean`, set at true if you want to force the user to check it - - A **name** key of type `String` - - Then you can add all other properties you want to your checkbox. - -### Examples - -Here is an example of the structure a 'document to sign' step could have: - -```json -{ - "subtype": "onb-adm-sign", - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare non sem eu pretium. Integer porttitor risus eget nibh iaculis, ac lacinia orci dictum. Nunc ullamcorper consequat enim in posuere. Aliquam volutpat est odio, vel maximus arcu maximus sit amet. Donec ultricies faucibus magna id luctus. Duis et dapibus elit. In vestibulum ipsum erat, at commodo tortor convallis vel. Nunc ut ultrices nulla. Etiam lorem justo, consequat a consectetur a, porttitor non turpis. Mauris eu mollis nisl, id dignissim quam. Curabitur condimentum sollicitudin rutrum. Aenean blandit, arcu nec ullamcorper rhoncus, lectus sem lacinia lorem, venenatis dignissim velit mi et sapien. Nullam posuere augue ut magna ullamcorper dignissim. Ut rhoncus sapien vel nulla commodo finibus. Cras non leo vel urna finibus volutpat. Praesent et ex eget diam tincidunt suscipit. Phasellus bibendum neque vel placerat iaculis. Vestibulum bibendum ultrices ipsum, non sodales lectus. Cras eget orci eget elit blandit scelerisque at ut nulla. Integer ligula eros, eleifend quis sodales a, porttitor sit amet neque. Fusce mollis magna at lectus varius, quis suscipit mi cursus. Etiam id imperdiet metus, in malesuada quam. Aliquam facilisis nunc non sapien condimentum, quis iaculis nisl auctor. Nunc lorem sapien, interdum vel efficitur ac, dapibus a diam. Ut ante urna, sodales in bibendum vel, lacinia ut mauris. In vel placerat leo. In libero dui, tincidunt at sem id, faucibus sollicitudin elit.", - "buttonText": "Sign chart", - "checkbox": { - "name": "acceptChart", - "label": "I have read and accepted the Chart 01", - "required": true - } -} -``` - -This 'document to sign' step would look like this: - -![document to sign step example](https://user-images.githubusercontent.com/35296671/56504782-8f079900-6511-11e9-9a0e-bb638b6d7d03.png) From 438c1edf1e1681878efde184b3d7c5648799ef6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:46:54 +0100 Subject: [PATCH 03/19] typo fix --- doc/objects.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/doc/objects.md b/doc/objects.md index b79d9080..9bdc9181 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -5,7 +5,7 @@ ## Definition An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. -Objects can be associated together and then share a vertical or horizontal relationship, which allow to build complex structure of multiple objects. +Objects can be associated together and then share a vertical or horizontal relationship, which allows to build complex structure of multiple objects. It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. @@ -23,4 +23,3 @@ This is the minimal structure of an object: To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. ![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) - From 99bb9239de7250aefcf42180cdc0d7a1241a89d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:56:34 +0100 Subject: [PATCH 04/19] all objects page --- doc/objects.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/doc/objects.md b/doc/objects.md index 9bdc9181..339e197c 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -18,8 +18,10 @@ This is the minimal structure of an object: - childrenAttrs {} - children {} -## Browse Object: +## Browse Objects: To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. ![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) + +Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). From 1f5119566210586fda67eec35566e84269c52e8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:57:46 +0100 Subject: [PATCH 05/19] Update objects.md add screenshot 2 --- doc/objects.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/doc/objects.md b/doc/objects.md index 339e197c..21cb3a7a 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -25,3 +25,5 @@ To access your Objects, go to the admin dashboard and then click on the _manage ![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). + +![all-object-page](https://user-images.githubusercontent.com/15313830/56654475-137c2800-6688-11e9-880b-75092397890d.png) From 9464645f4fd4de947093e3738d34343e4cbd23b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 12:39:47 +0100 Subject: [PATCH 06/19] new pages --- doc/child-object-creation.md | 33 ++++++++++++++++++++++ doc/object-creation.md | 53 ++++++++++++++++++++++++++++++++++++ doc/object-edit.md | 27 ++++++++++++++++++ 3 files changed, 113 insertions(+) create mode 100644 doc/child-object-creation.md create mode 100644 doc/object-creation.md create mode 100644 doc/object-edit.md diff --git a/doc/child-object-creation.md b/doc/child-object-creation.md new file mode 100644 index 00000000..c14166b3 --- /dev/null +++ b/doc/child-object-creation.md @@ -0,0 +1,33 @@ +# Admin object's management - create a child object + +## Usage +> Objects of the Admin can be configured : +> * By setting particular **attributes** to the object +> * By associating **children** to the object +> +> Children can be added, deleted, reordered in the list. Also, it's possible to configure it in a special way for the parent object, by setting children attributes for all the children. +> +> This documentation explains how to associate a child to a parent object. + +### Create a new object for your child in the admin +> Information is available for object's creation: [Modular step management](https://github.com/01-edu/public/blob/master/doc/object-creation.md) + +### Add this new object as a child of your parent's object + +#### 1. Edit the parent object +Capture d’écran 2019-04-22 à 19 24 23 +Capture d’écran 2019-04-22 à 19 24 10 + +#### 2. Go to *Children* > *Add a child* +![add child to parent object](https://user-images.githubusercontent.com/35296671/56506977-de50c800-6517-11e9-9c71-d19a1ec4e5cd.png) + +#### 3. Set up the new child: +* Enter its name in the input "Add a child name" +* Select your step object in the select input +* Click on "ADD" + +> Your step is then related to its parent. You can see it in the *Children* section of the parent's object. There, you can now: +> * Delete the child from its parent (the actual object of your child will not be deleted). +> * Reorder it in the children's list, by dragging it to the place you want. +> * Go to update its settings by clicking on the eye of its reference (it will redirect you to the actual object of your step). +Capture d’écran 2019-04-22 à 19 51 12 diff --git a/doc/object-creation.md b/doc/object-creation.md new file mode 100644 index 00000000..94329485 --- /dev/null +++ b/doc/object-creation.md @@ -0,0 +1,53 @@ +# Admin object's management - create an object + +## Usage +> Elements of the app are managed threw objects in *Admin*. + +> Objects of the Admin are first created and defined: +> * By their **title**, +> * By their **type**. + +> Then it can be configured threw: +> * Attributes, +> * Children. + +> This documentation explains how to create an object. + +### Create a new object in the admin +> (in *Admin* > *Add new object*) + +Capture d’écran 2019-04-22 à 15 57 37 +Capture d’écran 2019-04-22 à 15 58 21 + + +* The **title** of your object will be the title displayed to your candidates. Use an intellegible title for your user. + > NB: you can always edit it in the *Admin* + +* The **type** depends on the nature of your object: + * **Campus** is used to declare a school. + * Examples: *Alem*, *Madeira*, etc. + * Campus can contains cursus: *Alem* contains for example *01-classical* and *Piscine Go*. + * **Cursus** is used to declare a course. + * Examples: *01-classical*, *Piscine Go*, etc. + * Cursuses can contains cursuses: the main cursus *01-classical*, for example, contains cursuses like *Piscine Go*, but also all the branches that the student have access to, as *Web*, *Security*, *Algorythm*, *Design*, etc. + * Cursuses can contains quests: *Piscine Go* of *01-classical* contains quests like *Quest 1* or *Quest 2*. + * **Quest** is used to declare a project. + * Examples: *Quest 1*, *Quest 2*, etc. + * Quest contains exercises: *Quest 1* of *Piscine Go* contains exercises like *printalphabet* or *printcomb*. + * Exercise is used to declare exercises + * Examples: *printalphabet*, *printcomb*, *atoi*, etc. + * Exercises doesn't contains any children. + * Signup is used to declare steps of the registration. + * Examples: *Using our services*, *Tell us more about you*, etc. + * One major object *Sign up* contains all the sign up's modular steps : *Using our services*, *Tell us more about you*, etc. + * Onbaording is used to declare steps of the onbaording. + * Examples: *Toad*, *Administration*, *Additional Informations*, *Chart 01*, etc. + * Three main objects define the major steps of the onboarding : *Toad*, *Administration*, *Piscine*. + * *Administration* contains modular steps: *Additional Informations*, *Chart 01*, etc. + +> The child object is then available in the *Admin*. It can be found in the section of its type or thanks to the search bar of the cursus object's page. + +> More information is available: +> * for setting attributes of an object: (soon available) +> * for setting children of an object: [Child object creation](https://github.com/01-edu/public/blob/master/doc/child-object-creation.md) +> * for creation of modular steps in Sign up and onboarding's Administration object: [Modular step management](https://github.com/01-edu/public/blob/master/doc/modular-steps-management.md) diff --git a/doc/object-edit.md b/doc/object-edit.md new file mode 100644 index 00000000..339e197c --- /dev/null +++ b/doc/object-edit.md @@ -0,0 +1,27 @@ +# Objects + +> Allow you to create, manage and organize your pedagical and onboarding content. + +## Definition + +An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. +Objects can be associated together and then share a vertical or horizontal relationship, which allows to build complex structure of multiple objects. + +It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. + +This is the minimal structure of an object: + +- name +- type (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`) +- status (`draft`, `online`, `offline`) +- attrs {} +- childrenAttrs {} +- children {} + +## Browse Objects: + +To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. + +![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) + +Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). From 1d884722dd696d93672bf8eec650b0bd03ebf209 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 15:06:31 +0100 Subject: [PATCH 07/19] rename file child-object-creation to object-child-creation --- doc/{child-object-creation.md => object-child-creation.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename doc/{child-object-creation.md => object-child-creation.md} (100%) diff --git a/doc/child-object-creation.md b/doc/object-child-creation.md similarity index 100% rename from doc/child-object-creation.md rename to doc/object-child-creation.md From 99040f3eb6211489fed3c580cafb45b6cf3f1296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 15:28:56 +0100 Subject: [PATCH 08/19] page composition wait for screenshot --- doc/object-edit.md | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/doc/object-edit.md b/doc/object-edit.md index 339e197c..9a65736e 100644 --- a/doc/object-edit.md +++ b/doc/object-edit.md @@ -1,27 +1,5 @@ -# Objects +# Objects Edition -> Allow you to create, manage and organize your pedagical and onboarding content. +> Allow you to edit an object, see and manage its relations. -## Definition - -An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. -Objects can be associated together and then share a vertical or horizontal relationship, which allows to build complex structure of multiple objects. - -It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. - -This is the minimal structure of an object: - -- name -- type (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`) -- status (`draft`, `online`, `offline`) -- attrs {} -- childrenAttrs {} -- children {} - -## Browse Objects: - -To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. - -![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) - -Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). +## Page Composition From 252e7e6400fcee5622c3d1a24349fd925d3cbb1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20de=20Mazenod?= Date: Wed, 24 Apr 2019 16:06:22 +0100 Subject: [PATCH 09/19] object edit page done --- doc/object-edit.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/doc/object-edit.md b/doc/object-edit.md index 9a65736e..c4f20634 100644 --- a/doc/object-edit.md +++ b/doc/object-edit.md @@ -3,3 +3,28 @@ > Allow you to edit an object, see and manage its relations. ## Page Composition + +![object-edit-overview](https://user-images.githubusercontent.com/15313830/56667480-ceff8500-66a5-11e9-98c7-792d598f2394.png) + +### Pin 1 +> - Link back to the "Objects" page ; +> - Editable name field, hit 'enter' or 'cmd + s' or click on the floppy-disk icon to save ; +> - Major dependencies visualisation, (where my object is used as a child), click the label to navigate to the dependence ; +> - External URL, this is an optional parameter, it's use to point at an other source of content or information needed by the object. We generaly use to point at a Git repository ; + +### Pin 2 +> - Delete Button, Warning there, it will destroy your object! ; +> - Type of your Object (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`), save on select ; +> - Status of your Object (`draft`, `online`, `offline`), save on select ; +> - The first and last name of the original author ; + +### Pin 3 +> - Object Attribute edition area, manage all the attributes relative to this Object. These attributes will be exposed to its relationship ; + +### Pin 4 +> - Object Children edition area ; +> - Children Attributes edition area, these attributes impact and overload all the following children. Works the same way as standard attributes ; +> - Add a child, allows to add a child to the children list, more information here -> [Object Child creation](https://github.com/01-edu/public/blob/master/doc/object-child-creation.md) ; +> - Children List, allows you to reorganise, delete and edit child. Each child can be overload with its own attributes, the edition works the same way as the original attributes ; + +More informations about attribute overload system [here] ((https://github.com/01-edu/public/blob/master/doc/object-attribute-overload-system.md) From 4c5c01589e4d217020a35ff0da17e514ae814053 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:35:31 +0100 Subject: [PATCH 10/19] document started --- doc/objects.md | 249 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 doc/objects.md diff --git a/doc/objects.md b/doc/objects.md new file mode 100644 index 00000000..f938e494 --- /dev/null +++ b/doc/objects.md @@ -0,0 +1,249 @@ +# Objects + +> Allow you to create, manage and organize your pedagical and onboarding content. + +## Definition + +An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. +Objects can be associated together and then share a vertical or horizontal relationship, which allow to build complex structure of multiple objects. + +It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. + +This is the minimal structure of an object: + +- name +- type (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`) +- status (`draft`, `online`, `offline`) +- attrs {} +- childrenAttrs {} +- children {} + +## Browse Object: + +To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. + +### Create a new object for your step in the admin + +> (in _Admin_ > _Add new object_) + +Capture d’écran 2019-04-22 à 15 57 37 +Capture d’écran 2019-04-22 à 15 58 21 + +- The title of your object will be the title displayed to your candidates (for the step you are creating). Use an intellegible title for your user. + > NB: you can always edit it in the _Admin_ +- This object must have the same type as its future parent object ("signup" or "onboarding"). + +> Your step is then available in the _Admin_. You can find it in the section of its type (_SignUp_ or _Onboarding_) or thanks to the search bar of the cursus object's page. + +### Add this new object as a child of your parent's object + +#### 1. Edit the parent object (_Sign up_ or _Administration_) + +Capture d’écran 2019-04-22 à 19 24 23 +Capture d’écran 2019-04-22 à 19 24 10 + +#### 2. Go to _Children_ > _Add a child_ + +![add child to major object](https://user-images.githubusercontent.com/35296671/56506977-de50c800-6517-11e9-9c71-d19a1ec4e5cd.png) + +#### 3. Set up the new child: + +- Enter its name in the input "Add a child name" +- Select your step object in the select input +- Click on "ADD" + +> Your step is then related to its parent. You can see it in the _Children_ section of the parent's object. There, you can now: +> +> - Delete the step as a child of its parent (the actual object of your step will not be deleted). +> - Reorder it in the children's list, by dragging it to the place you want. +> - Go to update its settings by clicking on the eye of its reference (it will redirect you to the actual object of your step). +> Capture d’écran 2019-04-22 à 19 51 12 + +## Settings for a `form` step + +> In the step object you have created, 2 attributes must be filled: +> +> 1. Subtype +> 2. Form + +### Description + +#### Edit the step object you have created : + +> in _Object attributes_ + +Capture d’écran 2019-04-22 à 15 59 33 + +- Add a new key **subtype** of type `String` with the exact value 'onb-adm-form-generator' +- Add a new key **form** of type `Object` + - The form you are creating can have several sections. Each section is displayed with a title, and its inputs. + > NB: The submission of the form will check the required inputs of all the sections you have created for the form. + - To create a section, add a new key to your form object, of type `Object`, that contains: + - A **title** key of type `String`. The value of this property will be the title displayed in the top of your form section. + > If you have only one section in your form step, and you don't need a section title, you do not have to set up this property. + - An **inputs** key of type `Object`, which will contain all the inputs of the section. For each wanted input, add a new `Object` element in the "inputs" object. + > The key of this object will be used as the "name" attribute of your input. + > The values will be considered as the properties of your input. + +#### Defining an input: + +- You must declare a **type** key of type `String`, which define the type of your input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea` (and soon a special type `countries`). +- Then you can fill the props you need for your input, according to its type: `placeholder`, `id`, `required`, `label`, `items`, `emptyItems`, `index`, etc... + +#### Important indication: + +- The **index** property is used to order your inputs. It will not be passed onto the input. Be mindful not to set the same index twice. +- The **type** property is required. It will be used to determine the kind of input we must generate. It is passed onto the input only if the input type attribute is required (type 'tel' or 'text' for example, but not for type 'select' - in this case, we will generate a select element) + - At the moment, we are creating a special type 'countries' (a `Select` displaying all the countries). Documentation will be updated as soon as it is available. +- `onChange` prop are ignored as the event is handled by the app. +- For `switch` and `checkbox` input types, the default value has to be set as a boolean property named **value**. +- More information for each inputs is available in the design documentation: + - [textInput documentation](https://alem.01-edu.org/design/Components/FormInputs/TextInput) - used for inputs type 'text', 'tel', and 'date' + - [textArea documentation](https://alem.01-edu.org/design/Components/FormInputs/TextArea) + - [select documentation](https://alem.01-edu.org/design/Components/FormControls/Select) + - [radio button documentation](https://alem.01-edu.org/design/Components/FormControls/Radio) + - [switch documentation](https://alem.01-edu.org/design/Components/FormControls/Switch) + - [checkbox documentation](https://alem.01-edu.org/design/Components/FormControls/Checkbox) + +### Examples + +Here is an example of the form step's attributes. It presents a form with two sections, and an example of each kind of input type. + +> NB : this example object will soon be provided in the admin. + +```json +{ + "subtype": "onb-adm-form", + "form": { + "section1": { + "title": "My section title", + "inputs": { + "firstName": { + "index": 0, + "placeholder": "First name", + "type": "text", + "required": true + }, + "tel": { + "index": 1, + "required": true, + "type": "tel", + "label": "Phone number", + "placeholder": "+333 33 33 33 33", + "pattern": "[+][3][0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" + }, + "medicalInfo": { + "label": "Medical informations", + "index": 6, + "placeholder": "Medical Informations", + "type": "textarea" + }, + "dateOfBirth": { + "index": 2, + "required": true, + "type": "date", + "label": "Date of birth", + "value": "2000-01-01" + }, + "gender": { + "index": 3, + "type": "select", + "id": "genders", + "required": true, + "emptyItem": { "label": "Select your gender" }, + "items": [ + { "label": "Male", "data": "male" }, + { "label": "Female", "data": "female" } + ] + }, + "environment": { + "index": 4, + "type": "radio", + "required": true, + "label": "Which environment do you live in ?", + "inlineBlock": true, + "items": [ + { "label": "City", "data": "city" }, + { "label": "Countryside", "data": "countryside" } + ] + }, + "programmingAbilities": { + "index": 5, + "type": "switch", + "label": "I am new in programming", + "value": true + }, + "generalConditions": { + "index": 7, + "type": "checkbox", + "label": "I have read and I accept the general conditions", + "value": false + } + } + }, + "section2": { + "title": "My second section title", + "inputs": { + "firstName": { + "index": 0, + "placeholder": "First name", + "type": "text", + "required": true + } + } + } + } +} +``` + +This 'form' step would look like this: + +![form step example](https://user-images.githubusercontent.com/35296671/56503976-012aae80-650f-11e9-82c8-dd7d026b6eb1.png) + +## Settings for a `document to sign` step + +The newly created child can be customized with these attributes : + +| name | fullfillment | +| ---------- | ------------ | +| subtype | **required** | +| text | **required** | +| buttonText | optionnal | +| checkbox | optionnal | + +### Description + +#### To set up the child object you have created with these elements: + +1. Edit you step object +2. Go to _Object attributes_ +3. Add the following attributes: + - Add a new key **subtype** of type `String` with the exact value 'onb-adm-sign' + - Add a new key **text** of type `String` with the text of your document to sign as value + - Add a new key **buttonText** of type `String` with the text that you want to display in the submit button of your step. If you do not fill this property, the default value is 'Sign'. + - Add a new key **checkbox** of type `Object`, if you want to force your user to click on a checkbox before validating his document (ex: 'I have read and accepted the conditions'). In the checkbox object, you should define: + - A **label** key of type `String`, with the text you want to associate to the checkbox + - A **required** key of type `Boolean`, set at true if you want to force the user to check it + - A **name** key of type `String` + - Then you can add all other properties you want to your checkbox. + +### Examples + +Here is an example of the structure a 'document to sign' step could have: + +```json +{ + "subtype": "onb-adm-sign", + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare non sem eu pretium. Integer porttitor risus eget nibh iaculis, ac lacinia orci dictum. Nunc ullamcorper consequat enim in posuere. Aliquam volutpat est odio, vel maximus arcu maximus sit amet. Donec ultricies faucibus magna id luctus. Duis et dapibus elit. In vestibulum ipsum erat, at commodo tortor convallis vel. Nunc ut ultrices nulla. Etiam lorem justo, consequat a consectetur a, porttitor non turpis. Mauris eu mollis nisl, id dignissim quam. Curabitur condimentum sollicitudin rutrum. Aenean blandit, arcu nec ullamcorper rhoncus, lectus sem lacinia lorem, venenatis dignissim velit mi et sapien. Nullam posuere augue ut magna ullamcorper dignissim. Ut rhoncus sapien vel nulla commodo finibus. Cras non leo vel urna finibus volutpat. Praesent et ex eget diam tincidunt suscipit. Phasellus bibendum neque vel placerat iaculis. Vestibulum bibendum ultrices ipsum, non sodales lectus. Cras eget orci eget elit blandit scelerisque at ut nulla. Integer ligula eros, eleifend quis sodales a, porttitor sit amet neque. Fusce mollis magna at lectus varius, quis suscipit mi cursus. Etiam id imperdiet metus, in malesuada quam. Aliquam facilisis nunc non sapien condimentum, quis iaculis nisl auctor. Nunc lorem sapien, interdum vel efficitur ac, dapibus a diam. Ut ante urna, sodales in bibendum vel, lacinia ut mauris. In vel placerat leo. In libero dui, tincidunt at sem id, faucibus sollicitudin elit.", + "buttonText": "Sign chart", + "checkbox": { + "name": "acceptChart", + "label": "I have read and accepted the Chart 01", + "required": true + } +} +``` + +This 'document to sign' step would look like this: + +![document to sign step example](https://user-images.githubusercontent.com/35296671/56504782-8f079900-6511-11e9-9a0e-bb638b6d7d03.png) From 854d5ee24240487ec6f057525ae594bdf916bf5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:45:14 +0100 Subject: [PATCH 11/19] Update objects.md added screenshot --- doc/objects.md | 225 +------------------------------------------------ 1 file changed, 1 insertion(+), 224 deletions(-) diff --git a/doc/objects.md b/doc/objects.md index f938e494..b79d9080 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -22,228 +22,5 @@ This is the minimal structure of an object: To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. -### Create a new object for your step in the admin +![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) -> (in _Admin_ > _Add new object_) - -Capture d’écran 2019-04-22 à 15 57 37 -Capture d’écran 2019-04-22 à 15 58 21 - -- The title of your object will be the title displayed to your candidates (for the step you are creating). Use an intellegible title for your user. - > NB: you can always edit it in the _Admin_ -- This object must have the same type as its future parent object ("signup" or "onboarding"). - -> Your step is then available in the _Admin_. You can find it in the section of its type (_SignUp_ or _Onboarding_) or thanks to the search bar of the cursus object's page. - -### Add this new object as a child of your parent's object - -#### 1. Edit the parent object (_Sign up_ or _Administration_) - -Capture d’écran 2019-04-22 à 19 24 23 -Capture d’écran 2019-04-22 à 19 24 10 - -#### 2. Go to _Children_ > _Add a child_ - -![add child to major object](https://user-images.githubusercontent.com/35296671/56506977-de50c800-6517-11e9-9c71-d19a1ec4e5cd.png) - -#### 3. Set up the new child: - -- Enter its name in the input "Add a child name" -- Select your step object in the select input -- Click on "ADD" - -> Your step is then related to its parent. You can see it in the _Children_ section of the parent's object. There, you can now: -> -> - Delete the step as a child of its parent (the actual object of your step will not be deleted). -> - Reorder it in the children's list, by dragging it to the place you want. -> - Go to update its settings by clicking on the eye of its reference (it will redirect you to the actual object of your step). -> Capture d’écran 2019-04-22 à 19 51 12 - -## Settings for a `form` step - -> In the step object you have created, 2 attributes must be filled: -> -> 1. Subtype -> 2. Form - -### Description - -#### Edit the step object you have created : - -> in _Object attributes_ - -Capture d’écran 2019-04-22 à 15 59 33 - -- Add a new key **subtype** of type `String` with the exact value 'onb-adm-form-generator' -- Add a new key **form** of type `Object` - - The form you are creating can have several sections. Each section is displayed with a title, and its inputs. - > NB: The submission of the form will check the required inputs of all the sections you have created for the form. - - To create a section, add a new key to your form object, of type `Object`, that contains: - - A **title** key of type `String`. The value of this property will be the title displayed in the top of your form section. - > If you have only one section in your form step, and you don't need a section title, you do not have to set up this property. - - An **inputs** key of type `Object`, which will contain all the inputs of the section. For each wanted input, add a new `Object` element in the "inputs" object. - > The key of this object will be used as the "name" attribute of your input. - > The values will be considered as the properties of your input. - -#### Defining an input: - -- You must declare a **type** key of type `String`, which define the type of your input : `tel`, `text`, `date`, `select`, `radio`, `switch`, `checkbox`, `textarea` (and soon a special type `countries`). -- Then you can fill the props you need for your input, according to its type: `placeholder`, `id`, `required`, `label`, `items`, `emptyItems`, `index`, etc... - -#### Important indication: - -- The **index** property is used to order your inputs. It will not be passed onto the input. Be mindful not to set the same index twice. -- The **type** property is required. It will be used to determine the kind of input we must generate. It is passed onto the input only if the input type attribute is required (type 'tel' or 'text' for example, but not for type 'select' - in this case, we will generate a select element) - - At the moment, we are creating a special type 'countries' (a `Select` displaying all the countries). Documentation will be updated as soon as it is available. -- `onChange` prop are ignored as the event is handled by the app. -- For `switch` and `checkbox` input types, the default value has to be set as a boolean property named **value**. -- More information for each inputs is available in the design documentation: - - [textInput documentation](https://alem.01-edu.org/design/Components/FormInputs/TextInput) - used for inputs type 'text', 'tel', and 'date' - - [textArea documentation](https://alem.01-edu.org/design/Components/FormInputs/TextArea) - - [select documentation](https://alem.01-edu.org/design/Components/FormControls/Select) - - [radio button documentation](https://alem.01-edu.org/design/Components/FormControls/Radio) - - [switch documentation](https://alem.01-edu.org/design/Components/FormControls/Switch) - - [checkbox documentation](https://alem.01-edu.org/design/Components/FormControls/Checkbox) - -### Examples - -Here is an example of the form step's attributes. It presents a form with two sections, and an example of each kind of input type. - -> NB : this example object will soon be provided in the admin. - -```json -{ - "subtype": "onb-adm-form", - "form": { - "section1": { - "title": "My section title", - "inputs": { - "firstName": { - "index": 0, - "placeholder": "First name", - "type": "text", - "required": true - }, - "tel": { - "index": 1, - "required": true, - "type": "tel", - "label": "Phone number", - "placeholder": "+333 33 33 33 33", - "pattern": "[+][3][0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" - }, - "medicalInfo": { - "label": "Medical informations", - "index": 6, - "placeholder": "Medical Informations", - "type": "textarea" - }, - "dateOfBirth": { - "index": 2, - "required": true, - "type": "date", - "label": "Date of birth", - "value": "2000-01-01" - }, - "gender": { - "index": 3, - "type": "select", - "id": "genders", - "required": true, - "emptyItem": { "label": "Select your gender" }, - "items": [ - { "label": "Male", "data": "male" }, - { "label": "Female", "data": "female" } - ] - }, - "environment": { - "index": 4, - "type": "radio", - "required": true, - "label": "Which environment do you live in ?", - "inlineBlock": true, - "items": [ - { "label": "City", "data": "city" }, - { "label": "Countryside", "data": "countryside" } - ] - }, - "programmingAbilities": { - "index": 5, - "type": "switch", - "label": "I am new in programming", - "value": true - }, - "generalConditions": { - "index": 7, - "type": "checkbox", - "label": "I have read and I accept the general conditions", - "value": false - } - } - }, - "section2": { - "title": "My second section title", - "inputs": { - "firstName": { - "index": 0, - "placeholder": "First name", - "type": "text", - "required": true - } - } - } - } -} -``` - -This 'form' step would look like this: - -![form step example](https://user-images.githubusercontent.com/35296671/56503976-012aae80-650f-11e9-82c8-dd7d026b6eb1.png) - -## Settings for a `document to sign` step - -The newly created child can be customized with these attributes : - -| name | fullfillment | -| ---------- | ------------ | -| subtype | **required** | -| text | **required** | -| buttonText | optionnal | -| checkbox | optionnal | - -### Description - -#### To set up the child object you have created with these elements: - -1. Edit you step object -2. Go to _Object attributes_ -3. Add the following attributes: - - Add a new key **subtype** of type `String` with the exact value 'onb-adm-sign' - - Add a new key **text** of type `String` with the text of your document to sign as value - - Add a new key **buttonText** of type `String` with the text that you want to display in the submit button of your step. If you do not fill this property, the default value is 'Sign'. - - Add a new key **checkbox** of type `Object`, if you want to force your user to click on a checkbox before validating his document (ex: 'I have read and accepted the conditions'). In the checkbox object, you should define: - - A **label** key of type `String`, with the text you want to associate to the checkbox - - A **required** key of type `Boolean`, set at true if you want to force the user to check it - - A **name** key of type `String` - - Then you can add all other properties you want to your checkbox. - -### Examples - -Here is an example of the structure a 'document to sign' step could have: - -```json -{ - "subtype": "onb-adm-sign", - "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare non sem eu pretium. Integer porttitor risus eget nibh iaculis, ac lacinia orci dictum. Nunc ullamcorper consequat enim in posuere. Aliquam volutpat est odio, vel maximus arcu maximus sit amet. Donec ultricies faucibus magna id luctus. Duis et dapibus elit. In vestibulum ipsum erat, at commodo tortor convallis vel. Nunc ut ultrices nulla. Etiam lorem justo, consequat a consectetur a, porttitor non turpis. Mauris eu mollis nisl, id dignissim quam. Curabitur condimentum sollicitudin rutrum. Aenean blandit, arcu nec ullamcorper rhoncus, lectus sem lacinia lorem, venenatis dignissim velit mi et sapien. Nullam posuere augue ut magna ullamcorper dignissim. Ut rhoncus sapien vel nulla commodo finibus. Cras non leo vel urna finibus volutpat. Praesent et ex eget diam tincidunt suscipit. Phasellus bibendum neque vel placerat iaculis. Vestibulum bibendum ultrices ipsum, non sodales lectus. Cras eget orci eget elit blandit scelerisque at ut nulla. Integer ligula eros, eleifend quis sodales a, porttitor sit amet neque. Fusce mollis magna at lectus varius, quis suscipit mi cursus. Etiam id imperdiet metus, in malesuada quam. Aliquam facilisis nunc non sapien condimentum, quis iaculis nisl auctor. Nunc lorem sapien, interdum vel efficitur ac, dapibus a diam. Ut ante urna, sodales in bibendum vel, lacinia ut mauris. In vel placerat leo. In libero dui, tincidunt at sem id, faucibus sollicitudin elit.", - "buttonText": "Sign chart", - "checkbox": { - "name": "acceptChart", - "label": "I have read and accepted the Chart 01", - "required": true - } -} -``` - -This 'document to sign' step would look like this: - -![document to sign step example](https://user-images.githubusercontent.com/35296671/56504782-8f079900-6511-11e9-9a0e-bb638b6d7d03.png) From e2139521f7bfa4da63b218f25ca8a38a9a418583 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:46:54 +0100 Subject: [PATCH 12/19] typo fix --- doc/objects.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/doc/objects.md b/doc/objects.md index b79d9080..9bdc9181 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -5,7 +5,7 @@ ## Definition An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. -Objects can be associated together and then share a vertical or horizontal relationship, which allow to build complex structure of multiple objects. +Objects can be associated together and then share a vertical or horizontal relationship, which allows to build complex structure of multiple objects. It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. @@ -23,4 +23,3 @@ This is the minimal structure of an object: To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. ![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) - From 76b198d005eedbc680895d129450e5f088749323 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:56:34 +0100 Subject: [PATCH 13/19] all objects page --- doc/objects.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/doc/objects.md b/doc/objects.md index 9bdc9181..339e197c 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -18,8 +18,10 @@ This is the minimal structure of an object: - childrenAttrs {} - children {} -## Browse Object: +## Browse Objects: To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. ![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) + +Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). From 79e2f653c9ecb6230a58177495bc967d581760e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20de=20Mazenod?= Date: Wed, 24 Apr 2019 11:57:46 +0100 Subject: [PATCH 14/19] Update objects.md add screenshot 2 --- doc/objects.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/doc/objects.md b/doc/objects.md index 339e197c..21cb3a7a 100644 --- a/doc/objects.md +++ b/doc/objects.md @@ -25,3 +25,5 @@ To access your Objects, go to the admin dashboard and then click on the _manage ![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). + +![all-object-page](https://user-images.githubusercontent.com/15313830/56654475-137c2800-6688-11e9-880b-75092397890d.png) From b10670c0cbbcfdd487790069732fd1e685b76330 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 12:39:47 +0100 Subject: [PATCH 15/19] new pages --- doc/object-edit.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 doc/object-edit.md diff --git a/doc/object-edit.md b/doc/object-edit.md new file mode 100644 index 00000000..339e197c --- /dev/null +++ b/doc/object-edit.md @@ -0,0 +1,27 @@ +# Objects + +> Allow you to create, manage and organize your pedagical and onboarding content. + +## Definition + +An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. +Objects can be associated together and then share a vertical or horizontal relationship, which allows to build complex structure of multiple objects. + +It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. + +This is the minimal structure of an object: + +- name +- type (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`) +- status (`draft`, `online`, `offline`) +- attrs {} +- childrenAttrs {} +- children {} + +## Browse Objects: + +To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. + +![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) + +Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). From a3a142c956530ebcd28e41cfca457861750b97d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 15:06:31 +0100 Subject: [PATCH 16/19] rename file child-object-creation to object-child-creation --- doc/{child-object-creation.md => object-child-creation.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename doc/{child-object-creation.md => object-child-creation.md} (100%) diff --git a/doc/child-object-creation.md b/doc/object-child-creation.md similarity index 100% rename from doc/child-object-creation.md rename to doc/object-child-creation.md From f22ebee6bc61f89b981835f16c64ffe41a3c6e28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 15:28:56 +0100 Subject: [PATCH 17/19] page composition wait for screenshot --- doc/object-edit.md | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/doc/object-edit.md b/doc/object-edit.md index 339e197c..9a65736e 100644 --- a/doc/object-edit.md +++ b/doc/object-edit.md @@ -1,27 +1,5 @@ -# Objects +# Objects Edition -> Allow you to create, manage and organize your pedagical and onboarding content. +> Allow you to edit an object, see and manage its relations. -## Definition - -An Object is an highly customizable element, which can be use in many situations. We use it to compose cursuses and onboarding processes. -Objects can be associated together and then share a vertical or horizontal relationship, which allows to build complex structure of multiple objects. - -It structure can be visualized in two parts. The first one is the definition of the object itself and attributes, called `attrs`. The second part is the definition of minor relationships, called `children` and attributes applied to them, called `childrenAttrs`. - -This is the minimal structure of an object: - -- name -- type (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`) -- status (`draft`, `online`, `offline`) -- attrs {} -- childrenAttrs {} -- children {} - -## Browse Objects: - -To access your Objects, go to the admin dashboard and then click on the _manage object_ link within the "Object" card. - -![go-to-objects](https://user-images.githubusercontent.com/15313830/56653756-46bdb780-6686-11e9-98ba-18e382987e9c.png) - -Objects are sorted by type in different sections. This page offer a search bar that allow you query the objects by name. In the top-right corner, click the _add a new object_ button to create a new object. Fill a name, select a type and click _create_ to validate your creation. You will be redirected to the Object Edition page (document is here). +## Page Composition From 17866380553a3ab254b39a8fba13cda3e0ab2220 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20de=20Mazenod?= Date: Wed, 24 Apr 2019 16:06:22 +0100 Subject: [PATCH 18/19] object edit page done --- doc/object-edit.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/doc/object-edit.md b/doc/object-edit.md index 9a65736e..c4f20634 100644 --- a/doc/object-edit.md +++ b/doc/object-edit.md @@ -3,3 +3,28 @@ > Allow you to edit an object, see and manage its relations. ## Page Composition + +![object-edit-overview](https://user-images.githubusercontent.com/15313830/56667480-ceff8500-66a5-11e9-98c7-792d598f2394.png) + +### Pin 1 +> - Link back to the "Objects" page ; +> - Editable name field, hit 'enter' or 'cmd + s' or click on the floppy-disk icon to save ; +> - Major dependencies visualisation, (where my object is used as a child), click the label to navigate to the dependence ; +> - External URL, this is an optional parameter, it's use to point at an other source of content or information needed by the object. We generaly use to point at a Git repository ; + +### Pin 2 +> - Delete Button, Warning there, it will destroy your object! ; +> - Type of your Object (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`), save on select ; +> - Status of your Object (`draft`, `online`, `offline`), save on select ; +> - The first and last name of the original author ; + +### Pin 3 +> - Object Attribute edition area, manage all the attributes relative to this Object. These attributes will be exposed to its relationship ; + +### Pin 4 +> - Object Children edition area ; +> - Children Attributes edition area, these attributes impact and overload all the following children. Works the same way as standard attributes ; +> - Add a child, allows to add a child to the children list, more information here -> [Object Child creation](https://github.com/01-edu/public/blob/master/doc/object-child-creation.md) ; +> - Children List, allows you to reorganise, delete and edit child. Each child can be overload with its own attributes, the edition works the same way as the original attributes ; + +More informations about attribute overload system [here] ((https://github.com/01-edu/public/blob/master/doc/object-attribute-overload-system.md) From 509bc581caa297efd0946d97217070a54b9d5a32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barthe=CC=81lemy=20de=20Mazenod?= Date: Wed, 24 Apr 2019 16:29:47 +0100 Subject: [PATCH 19/19] remove anotation marks --- doc/object-edit.md | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/doc/object-edit.md b/doc/object-edit.md index c4f20634..272ca098 100644 --- a/doc/object-edit.md +++ b/doc/object-edit.md @@ -7,24 +7,28 @@ ![object-edit-overview](https://user-images.githubusercontent.com/15313830/56667480-ceff8500-66a5-11e9-98c7-792d598f2394.png) ### Pin 1 -> - Link back to the "Objects" page ; -> - Editable name field, hit 'enter' or 'cmd + s' or click on the floppy-disk icon to save ; -> - Major dependencies visualisation, (where my object is used as a child), click the label to navigate to the dependence ; -> - External URL, this is an optional parameter, it's use to point at an other source of content or information needed by the object. We generaly use to point at a Git repository ; + +- Link back to the "Objects" page ; +- Editable name field, hit 'enter' or 'cmd + s' or click on the floppy-disk icon to save ; +- Major dependencies visualisation, (where my object is used as a child), click the label to navigate to the dependence ; +- External URL, this is an optional parameter, it's use to point at an other source of content or information needed by the object. We generaly use to point at a Git repository ; ### Pin 2 -> - Delete Button, Warning there, it will destroy your object! ; -> - Type of your Object (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`), save on select ; -> - Status of your Object (`draft`, `online`, `offline`), save on select ; -> - The first and last name of the original author ; + +- Delete Button, Warning there, it will destroy your object! ; +- Type of your Object (`organisation`, `campus`, `onboarding`, `cursus`, `quest`, `exercise`), save on select ; +- Status of your Object (`draft`, `online`, `offline`), save on select ; +- The first and last name of the original author ; ### Pin 3 -> - Object Attribute edition area, manage all the attributes relative to this Object. These attributes will be exposed to its relationship ; + +- Object Attribute edition area, manage all the attributes relative to this Object. These attributes will be exposed to its relationship ; ### Pin 4 -> - Object Children edition area ; -> - Children Attributes edition area, these attributes impact and overload all the following children. Works the same way as standard attributes ; -> - Add a child, allows to add a child to the children list, more information here -> [Object Child creation](https://github.com/01-edu/public/blob/master/doc/object-child-creation.md) ; -> - Children List, allows you to reorganise, delete and edit child. Each child can be overload with its own attributes, the edition works the same way as the original attributes ; + +- Object Children edition area ; +- Children Attributes edition area, these attributes impact and overload all the following children. Works the same way as standard attributes ; +- Add a child, allows to add a child to the children list, more information here -> [Object Child creation](https://github.com/01-edu/public/blob/master/doc/object-child-creation.md) ; +- Children List, allows you to reorganise, delete and edit child. Each child can be overload with its own attributes, the edition works the same way as the original attributes ; More informations about attribute overload system [here] ((https://github.com/01-edu/public/blob/master/doc/object-attribute-overload-system.md)