Skip to content

Commit 158414f

Browse files
palisadoespalisadoes
authored
Updated documentation layout (#3359)
* Updated documentation layout * Removed outdated sidebar
1 parent 4bc8f99 commit 158414f

23 files changed

+347
-551
lines changed

‎docs/docs/docs/introduction.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
id: introduction
3+
title: Introduction
4+
slug: /
5+
---
6+
7+
Talawa Admin is the web based administrative dashboard for the Talawa mobile app.
8+
9+
## Core Features
10+
11+
Talawa Admin has many core features that are explained in the sections below.
12+
13+
### Admin Dashboard
14+
15+
- Dashboard Provides Overview about the Admin's Organization.
16+
- Displays Statistics like number of Members, Admins, Blocked Users & Membership Requests, etc.
17+
18+
### `People` Page
19+
20+
- This shows the list of people who have joined the organization.
21+
- Admins can also approve membership requests from here and can also set the members permissions.
22+
23+
### `Events` Page
24+
25+
- These shows list of active `Events` in the organization.
26+
- Admins can also post new events from this page.
27+
28+
### `Contributions` Page
29+
30+
- These shows a list of Members of `Contributors` who've donated to the Organization.
31+
- Donations can be made from `Talawa` app and can be recurring or One time.
32+
33+
### `Posts` Page
34+
35+
- Shows a list of Posts posted within an Organization along with their likes and comments.
36+
- Posts are posted by Members from the `Talawa` App.
37+
- Admins can decide whether to keep or delete those posts.
38+
39+
### `Plugins` Page
40+
41+
- Contains `Plugin Store` from which the Admin can decide the features for the `Talawa` Mobile App.
42+
- Admins can `Install` or `Uninstall` the Plugins and can also see the list of installed plugins separately.

‎docs/docs/docs/plugins/implementing-plugins-example.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
id: implementing-plugins-example
3+
title: Plugin Examples
4+
---
5+
6+
:::note
7+
Pre-Requisites :
8+
9+
1. [Plugin Architecture ](./plugin-architecture.md)
10+
2. [Implementing Plugins](./implementing-plugins.md)
11+
12+
:::
13+
14+
Previously we've seen an technical overview of how we can implement plugins for our features.
15+
16+
Now let's see how we can implement a Donation feature as plugin and seeing it in actions. But before that let's take a look at the donation code.
17+
18+
```js
19+
CustomListTile(
20+
key: homeModel!.keySPDonateUs,
21+
index: 2,
22+
type: TileType.option,
23+
option: Options(
24+
icon: Icon(
25+
Icons.monetization_on,
26+
color: Theme.of(context)
27+
.colorScheme
28+
.primary,
29+
size: 30,
30+
),
31+
title: AppLocalizations.of(context)!
32+
.strictTranslate('Donate Us'),
33+
subtitle: AppLocalizations.of(context)!
34+
.strictTranslate(
35+
'Help us to develop for you',
36+
),
37+
),
38+
onTapOption: () => donate(context, model),
39+
)
40+
```
41+
42+
To see the entire file go [here](https://github.com/Palisadoesfoundation/talawa/blob/2a14faa4363ca26426fb2f9a8b39082c08e6597b/lib/views/after_auth_screens/profile/profile_page.dart)
43+
44+
It is a simple list option that says " Donate Us " and upon clicking that you get dialog with text "Help us to develop for you" for doing the payment.
45+
46+
Now let's follow the steps.
47+
48+
## 1. Plugin Registration
49+
50+
- Go to the `Plugin Store` and click on the `Add New` button.
51+
- Give the name as <strong> `Donation` </strong>
52+
- You add your information for `Creator Name` and `Description` fields.
53+
- Your plugin should be at visible the store.
54+
55+
let's wrap our widget with the `TalawaPluginProvider` widget as it comes in the type `B` of plugin
56+
57+
## 2. Plugin Creation
58+
59+
- Wrap the donation code with the `TalawaPluginProvider` widget as a `child` property.
60+
- Add <strong> `Donation` </strong> to `pluginName` property.
61+
62+
This is how the code will look like
63+
64+
```js
65+
TalawaPluginProvider(
66+
pluginName: "Donation",
67+
visible: true,
68+
child: Column(
69+
children: [
70+
CustomListTile(
71+
key: homeModel!.keySPDonateUs,
72+
index: 2,
73+
type: TileType.option,
74+
option: Options(
75+
icon: Icon(
76+
Icons.monetization_on,
77+
color: Theme.of(context)
78+
.colorScheme
79+
.primary,
80+
size: 30,
81+
),
82+
title: AppLocalizations.of(context)!
83+
.strictTranslate('Donate Us'),
84+
subtitle: AppLocalizations.of(context)!
85+
.strictTranslate(
86+
'Help us to develop for you',
87+
),
88+
),
89+
onTapOption: () => donate(context, model),
90+
),
91+
],
92+
),
93+
)
94+
95+
```
96+
97+
---
98+
99+
Congrats! you've successfully converted your feature to a plugin. Now you can install/uninstall `Donation` plugin from the `Plugin Store` of the [Talawa Admin](https://github.com/PalisadoesFoundation/talawa-admin) to see the plugin UI becoming visible if it's installed for that organization otherwise hidden.
100+
101+
For development purposes to see the plugin even if it's uninstalled you can set the `serverVisible` property to `true`

‎docs/docs/docs/plugins/implementing-plugins.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
id: implementing-plugins
3+
title: Plugin Implementation
4+
---
5+
6+
Plugins are existing features that are wrapped with some special logic or widgets to make them controllable.
7+
8+
Plugin are activated from Plugin store of the Admin panel
9+
10+
To implement features as plugins or to convert existing features into plugins, follow the below steps
11+
12+
## Technical Overview of the Steps to Implement features as plugins
13+
14+
### 1. Plugin Registration
15+
16+
- Plugins have to be registered first before even they are created from the Plugin store in the `Talawa Admin` portal. This can be done by developer by creating an account in the admin portal and going to `Plugin Store`.
17+
- Plugin Store can be accessed from navbar
18+
19+
![Plugin Store Option in Navbar](/img/docs/plugin/plugin-store-navbar.PNG)
20+
21+
- Once entered in store , you will see a list of available plugins
22+
23+
![Plugin Store Sample Image](/img/docs/plugin/store.PNG)
24+
25+
- Click on the `Add New` Button
26+
- Enter the Details of the New Plugin and Click on `Create`.
27+
28+
:::caution
29+
30+
The `Name` of plugin provided is very important and will be used for later steps.
31+
Make sure to use unique names with trailing spaces.
32+
33+
:::
34+
35+
In next step we'll see how to create plugins
36+
37+
### 2. Plugin Creation
38+
39+
Based on where the feature UI is there are currently 2 ways to implement your features as plugins. Let's call them type A and B features for now.
40+
41+
![Plugin Store Option in Navbar](/img/docs/plugin/plugin-types.PNG)
42+
43+
#### A. Feature that are located in the bottom navigation bar
44+
45+
- For the features in the navbar we have maintained a list of them in [main_scree.dart](https://github.com/PalisadoesFoundation/talawa/blob/develop/lib/views/main_screen.dart) file.It has detailed comments to help you understand the operations.
46+
47+
- `renderBottomNavBarPlugins` method combines current features and plugins in navbar and generates an array containing `navBarItems` and `navbarClasses` and then it is returned to `children` property of the navbar UI code.
48+
- Let's understand some important variables before understanding the process of conversion.
49+
50+
:::caution
51+
52+
The `Name` of property provided to any of the below variables should the exactly same for that feature only without any trailing spaces. Duplicate or Existing plugin names shouldn't be used keep the application consistent and predictable.
53+
54+
:::
55+
56+
1. `navBarItems`
57+
- Type `[ BottomNavigationBarItem() ]`
58+
- contains list of `BottomNavigationBarItem` widget to show `icon` and `text` to the navbar options.
59+
- if your feature is not a plugin it should be added to this array.
60+
2. `navBarClasses`
61+
- Type `[Widgets]`
62+
- Array that contains the Widgets to be rendered on the navbar
63+
3. `navNameClasses`
64+
- Type ` Map<dynamic, dynamic>`
65+
- Maps the feature names with their proper Icons and Widgets (named as `class`) used in navbar.
66+
4. `navNameIcon`
67+
- Type `Map<String, Widgets>`
68+
- Contains a key value pair of the feature name in the navbar and it's corresponding plugin.
69+
70+
#### B. Other Features
71+
72+
- `TalawaPluginProvider` is Flutter widget that is used here . The Source can be viewed [here](https://github.com/PalisadoesFoundation/talawa/blob/develop/lib/plugins/talawa_plugin_provider.dart)
73+
- Here's the basic use of `TalawaPluginProvider` with `Text()` widget.Let's discuss it's properties
74+
75+
```js
76+
const TalawaPluginProvider(child: Text("Demo") ,
77+
visible: true,
78+
pluginName: "My Plugin"
79+
);
80+
```
81+
82+
1. `child`
83+
84+
- Type `Widget?`
85+
- It can be any flutter UI widget like `Container()`, `Text()`, `Row()`,etc. For example if your features is encapsulated within an `Container()` widget then wrap that widget into the `TalawaPluginProvider` .
86+
87+
2. `visible`
88+
89+
- Type `Boolean`
90+
- True if plugin is Installed and plugin will be visible, Otherwise false hence plugin is hidden.
91+
92+
3. `pluginName`
93+
- Type `String`
94+
- Contains the name of the plugin. Make sure that the name provided here should match with the plugin name registered on the store from the
95+
[Step 1 A ](#a-feature-that-are-located-in-the-bottom-navigation-bar)
96+
- For example. If plugin stored on the store as `Members List` then here exactly enter `Members List` without any trialing spaces.
97+
98+
<u>
99+
100+
#### Additional properties : [For Development Purpose Only]
101+
102+
</u>
103+
104+
4. `serverVisible`
105+
106+
- Type `Boolean`
107+
- True will make all plugins visible if set to `true` otherwise `false` won't change anything.
108+
- This property is accessible for the developers only as it can be only set during development phase. We can see that it is defined in build method of the widget.
109+
110+
```js
111+
Widget build(BuildContext context) {
112+
var serverVisible = false;
113+
serverVisible = checkFromPluginList();
114+
return serverVisible || visible ? child! : Container();
115+
}
116+
```

‎docs/docs/docs/plugins/plugin-architecture.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
id: plugin-architecture
3+
title: Plugin Architecture
4+
---
5+
6+
# Plugin Architecture
7+
8+
Plugin Architecture provides talawa projects an ability to control latent [Talawa Mobile App](https://docs.talawa.io/docs/developers/talawa/talawa-introduction) features from the [Talawa Admin](https://docs.talawa.io/docs/developers/talawa-admin/talawa-admin-introduction) Web Portal.
9+
10+
<!-- The Talawa API detects the existence of the plugin and the Mobile App will display new capabilities. -->
11+
12+
## Plugin
13+
14+
A Plugin is a feature in Talawa Mobile App that is controlled by the Admins of that organization. By having the control admins can decide the accessibility of that feature for the organization members.
15+
16+
Programmatically the logic of this Plugin is stored in the mobile app but it's inaccessible to the users until the admin of the organization installs that plugin.
17+
18+
You first have to be register the Plugins from the `Plugin store` in order to install them from the Talawa Admin.
19+
20+
## High Level Overview of Plugin Architecture
21+
22+
Let's discuss the role of the different apps to make the plugin architecture work.
23+
24+
### Talawa Admin
25+
26+
Admin Provides `Plugin Store` where has the following functionalities:
27+
28+
- Ability to install or uninstall the plugins.
29+
- Ability to Toggle list of installed and available plugins.
30+
- Ability to Search the plugin using SearchBar (provided on the right) .
31+
32+
#### Example
33+
34+
![Plugin Store Sample Image](/img/docs/plugin/store.PNG)
35+
36+
### Talawa API
37+
38+
It is a nodeJS API that is used to interface with the database containing list of the plugins with their different attributes.
39+
40+
A sample Plugin Model can have the below properties.
41+
42+
```js
43+
Plugin : {
44+
pluginName: String, // plugin name
45+
pluginCreatedBy: String, // name of the creator
46+
pluginDesc : String, // description
47+
pluginInstallStatus : Boolean, // TRUE if installed otherwise FALSE
48+
installedOrgs : [ID] // a list containing ID of the organization who have installed the plugin
49+
}
50+
```
51+
52+
### Talawa
53+
54+
Plugin in the mobile App are mainly focused for the features on the navbar.but other functionalities can also be implemented as plugins using the `TalawaPluginProvider` Flutter Widget.
55+
![Talawa Mobile App ](/img/docs/plugin/talawa.PNG)
56+
57+
## Plugin Store
58+
59+
## Installing and Uninstalling Plugins
60+
61+
The Following video showcases process of installing the plugin. We are uninstalling `Events` feature from the talawa app.
62+
63+
:::note
64+
65+
Admin portal and Talawa app must be of same organizations
66+
67+
:::
68+
69+
<iframe width="560" height="315" src="https://www.youtube.com/embed/dsbh03N9wYo" title="Talawa Admin Plugin Demo - 2023" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

‎docs/docs/intro.md

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎docs/docs/tutorial-basics/_category_.json

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)