france-ioi / algoreafrontend Goto Github PK
View Code? Open in Web Editor NEWFront-end for the new Algorea platform
License: MIT License
Front-end for the new Algorea platform
License: MIT License
In the progress page (for instance http://dev.algorea.org/en/#/activities/by-id/4702;parentAttempId=0;path=/details/progress), display a list (table) of latest activities of the current user on this item. (as bit as drafted at the bottom of this design , but with more relevant content)
state.data
(check MemberListComponent for an example of table)ActivityLog
interface returned by the service. (API for the service used)Some CSS is mixed with html in this file :
Start the item page with (according to designs)
For the group pages:
/groups/:id
for group page (overview content by default) (no need for "managed" in it as the page is the same for management or not)group.current_user_is_manager
info), as only the "overview" tab is relevant, do not display the tab bar at all (so display the content of the overview tab, without tab bar)group.current_user_can_manage=="memberships_and_group"
/groups/:id/members
, check that the group.current_user_is_manager
is true, otherwise display that the user does not have the permissions to see this content/groups/:id/managers
, check that the group.current_user_is_manager
is true AND group.current_user_can_manage=="memberships_and_group"
, otherwise display that the user does not have the permissions to see this content/groups/:id/settings
, check that the group.current_user_is_manager
is true AND group.current_user_can_manage=="memberships_and_group"
, otherwise display that the user does not have the permissions to see this contentChange the way the blue panel "pending request" is displayed:
is_public=true
.As you can see on http://dev.algorea.org/branch/design/
, when clicking on "groups you managed" without selecting any group, there is a page which summarizes everything on group you manage.
Step 1:
/groups/managed
that can be accessed through the left menuAs you can see on http://dev.algorea.org/branch/design/
, when clicking on "groups you managed" without selecting any group, there is a page which summarizes everything on group you manage.
/groups/joined
) and manager list (/groups/by-id/:id/details/managers
) pagesFrom Ivan:
I am going to use `ngx-translate` module for internationalization.
We can translate the text inside the html files using the translate pipe or directive.
It supports the translation inside ts files using `TranslateService`.
The translation files can be stored at assets/i18n/{lang} or other locations we prefer in json format.
eg. en.json, fr.json, ...
We want to be able to work on the "final" designs with all features and in parallel on the integration with the backend which only includes a subset of the components and features. In order to achieve that goal, create two "home pages" which will use different components. Some (sub)components will be common, some will differ (while not fully implemented). The idea is to have the "design" sub-site which includes latest version of the designs, and the "integration" sub-site which is "fully" functional on a limited a set of functionalities. Both should be available at "the same time".
in the menu, "groups you manage", add 2 groups: "group 50" and "group 51", with "blue arrow" linking respectively to /groups/managed/50
and /groups/managed/51
page /groups/managed/:id
shows:
GET /groups/50/requests
), only keep those with action=="join_request_created"
sort
in the API)POST /groups/{parent_group_id}/join-requests/accept
and /reject
), for one or several usersupdate `groups` set description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae imperdiet ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In et dignissim ipsums ' where id = 50;
)/groups/{group_id}/recent_activity
item.string.title
as "Task" columncreated_at
(date + time) as "Time" columnuser.firstname
user.lastname
(user.login
)" as "User" columnFor all:
List composition of a group like in https://france-ioi.github.io/algorea-designs/01.Groups_02.Composition
As it is done in the design branch (http://dev.algorea.org/branch/design/), add to the "pending request" box the switch "group only / all subgroups".
Step3:
Create a new pseudo service with accept or reject several requests even if they are related to different groups. Handle with rxJS the call to the multiple services and aggregate the results at the end.
For the user it should be transparent that it is one or several services.
This issue pertains to the communication between the frontend and the backend to make task integration work with real data.
Depends on : #176 and other aspects around items (result / attempt management, ...).
List composition of a group like in https://france-ioi.github.io/algorea-designs/01.Groups_02.Composition
Display skills as expected. See https://france-ioi.github.io/algorea-designs/02.Skills_01.Content
List of todos for authentication and session management:
Authorization: `Bearer ${token}`,
Display the score (as a score ring) on the left of the title in the item header as shown on https://france-ioi.github.io/algorea-designs/03.Activities_00.Header_b2.Access-to-activity.
Only display it if the user has a result on this item (use current score and validated from this result).
In the group "administration" tabs: (based on /design
implementation)
The "pending requests" shown on a manager's groups seem not to be filtered by group id. As a consequence, the reject/accept request are sent on the wrong group.
Fix this by filtering on the group. Check if the service supports it (https://france-ioi.github.io/algorea-devdoc/api/), if not it should probably be done in the service.
To reproduce, use "devapi" with "token20" you'll see you have the same requests for both groups (while there are only for group 50 in the db), (as a consequence, the requests on group 51 fail)
Display skills as designed in https://france-ioi.github.io/algorea-designs/02.Skills_01.Content
Item edition as shown in https://france-ioi.github.io/algorea-designs/03.Activities_Edit_05.Edit-chapter-content and http://dev.algorea.org/branch/design/.
Display children as shown here.
Be able to quickly identify which item is "locked" and cannot be started now.
Example: https://france-ioi.github.io/algorea-designs/00.Global_06.Navigation-panel
Fix "A router outlet has not been instantiated during routes activation. "
As it is done in the design branch (http://dev.algorea.org/branch/design/
), add to the "pending request" box the switch "group only / all subgroups".
Step2:
This parameter is now supported by the backend (see API) and has to be added in the service.
When "include subgroups" switch is enabled or disabled:
Make sure you do not break any of the current behaviors.
Allow to change permissions of other managers.
< 'memberships_and_group'
, do not display the pencil describe below= memberships_and_group
:
<group page name>: manager access given to <receiver group/user name>
"Be able to edit group
Allow removal of managers.
In the group manager page:
Beware that for now managers cannot be re-added. You should probably add some using the service directly (in curl) when testing
As it is done in the design branch (http://dev.algorea.org/branch/design/
), add to the "pending request" box the switch "group only / all subgroups".
Step 1: only integrate this button
In the "composition" tab of the group page (on a route ".../<group_id>/members"):
#/design
), only display this section if `group.current_user_can_manage is "memberships" or "memberships_and_group". In this section, only add the "Invitation code" part.code
attribute in the group info)
code_lifetime
is not changed and code_expires_at
is set to null (no need to refetch)code_lifetime
attribute of groupscode_lifetime
in the format "838:59:59").
code_lifetime
and code_expires_at
.code_expires_at
is not null, display:
dd/mm/yy hh:mm
is code_expires_at - code_lifetime
.Be able to edit groups (similarly to items)
Item edition as shown in https://france-ioi.github.io/algorea-designs/03.Activities_Edit_05.Edit-chapter-content and http://dev.algorea.org/branch/design/.
item_id
and order
attributes.If the response is success but data is empty, the behavior "undefined request(s) have been accepted" is a bit weird.
List composition of a group like in https://france-ioi.github.io/algorea-designs/01.Groups_02.Composition
Item edition as shown in https://france-ioi.github.io/algorea-designs/03.Activities_Edit_05.Edit-chapter-content and http://dev.algorea.org/branch/design/.
List composition of a group like in https://france-ioi.github.io/algorea-designs/01.Groups_02.Composition
Item edition as shown in https://france-ioi.github.io/algorea-designs/03.Activities_Edit_05.Edit-chapter-content and http://dev.algorea.org/branch/design/.
Integrate tasks (and courses) into the frontend. It requires implementing communication between the frontend and the task, and also implementing the backend calls related to items.
This issue only includes tasks directly tied to communication between the frontend and a task : loading, displaying of a task and current answer management. It doesn't include getting actual data (#177), or other actions around tasks (results or attempt management, etc.).
This list might not be exhaustive.
List composition of a group like in https://france-ioi.github.io/algorea-designs/01.Groups_02.Composition
Item edition as shown in https://france-ioi.github.io/algorea-designs/03.Activities_Edit_05.Edit-chapter-content and http://dev.algorea.org/branch/design/.
Subscriptions to observables which do not have a pre-defined completion (such as services) have to be unsubscribed "by hand", otherwise it stays subscribed for life, which creates a memory leak.
Item edition as shown in https://france-ioi.github.io/algorea-designs/03.Activities_Edit_05.Edit-chapter-content and http://dev.algorea.org/branch/design/.
Item edition as shown in https://france-ioi.github.io/algorea-designs/03.Activities_Edit_05.Edit-chapter-content and http://dev.algorea.org/branch/design/.
In the group composition tab:
TBD
Be able to edit group description
Display children as shown here.
When loading something, if the user input something else, the website can find itself in a "loaded" state when it is in fact not.
For exemple : you can have a "change" to "B" during the loading of "A", so you should not put "A" as "loaded", but instead wait for "B" to be loaded.
For:
Implement what was defined in the designs: https://france-ioi.github.io/algorea-designs/00.Global_06.Navigation-panel_g.Login-profile
In group composition tab, from "invite users" as done in "/design":
Implement a page which lists the results of all user descendants on a chapter.
Example:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.