apolloeleven / agora-yii2-vue

Open Source Social Intranet built on Yii2 framework and Vue.js

Agora Intranet

Agora Intranet API based on Yii2 Framework.

REQUIREMENTS

The minimum requirement by this project template that your Web server supports PHP 7.0.0.

INSTALLATION of API

You need to have composer installed.

If you do not have Composer, you need to install it by following the instructions at getcomposer.org.

1. Clone the project.
2. Go to the project root directory.
3. Run composer install.
4. Copy .env.example into .env and adjust parameters (Leave the database parameters unchanged if you are going to setup with docker)

Setup with php builtin server

1. Adjust database parameters in .env
2. Run php create-database.php to create the database.
3. Run sh migrate to create tables and insert initial data.
4. Run php yii serve --port 8081 and open in browser http://localhost:8081

Setup with Docker

Make sure you have docker installed. Also, make sure you don't have Apache or Mysql running and ports 80 and 3306 are not busy.

1. Start the docker processing: docker-compose up -d
2. Run migrations: docker-compose exec app sh migrate

Open in the browser http://agora-api.localhost

To run console commands

docker-compose exec app php yii <controller>/<action>

INSTALLATION of VUE.JS APP

You must have Node.js installed.

---

Go to the vue folder.
Copy .env.example into .env and specify the API url in VUE_APP_API_HOST

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

TESTING

Tests are located in tests directory. They are developed with Codeception PHP Testing Framework. By default there are 3 test suites:

• unit
• functional
• acceptance

Tests can be executed by running

vendor/bin/codecept run

The command above will execute unit and functional tests. Unit tests are testing the system components, while functional tests are for testing user interaction. Acceptance tests are disabled by default as they require additional setup since they perform testing in real browser.

Running acceptance tests

To execute acceptance tests do the following:

1. Rename tests/acceptance.suite.yml.example to tests/acceptance.suite.yml to enable suite configuration

2. Replace codeception/base package in composer.json with codeception/codeception to install full featured version of Codeception

3. Update dependencies with Composer

   composer update  
   

4. Download Selenium Server and launch it:

   java -jar ~/selenium-server-standalone-x.xx.x.jar
   

   In case of using Selenium Server 3.0 with Firefox browser since v48 or Google Chrome since v53 you must download GeckoDriver or ChromeDriver and launch Selenium with it:

   # for Firefox
   java -jar -Dwebdriver.gecko.driver=~/geckodriver ~/selenium-server-standalone-3.xx.x.jar
   
   # for Google Chrome
   java -jar -Dwebdriver.chrome.driver=~/chromedriver ~/selenium-server-standalone-3.xx.x.jar
   

   As an alternative way you can use already configured Docker container with older versions of Selenium and Firefox:

   docker run --net=host selenium/standalone-firefox:2.53.0
   

5. (Optional) Create yii2_basic_tests database and update it by applying migrations if you have them.

   tests/bin/yii migrate
   

   The database configuration can be found at config/test_db.php.

6. Start web server:

   tests/bin/yii serve
   

7. Now you can run all available tests

   # run all available tests
   vendor/bin/codecept run
   
   # run acceptance tests
   vendor/bin/codecept run acceptance
   
   # run only unit and functional tests
   vendor/bin/codecept run unit,functional
   

Code coverage support

By default, code coverage is disabled in codeception.yml configuration file, you should uncomment needed rows to be able to collect code coverage. You can run your tests and collect coverage with the following command:

#collect coverage for all tests
vendor/bin/codecept run -- --coverage-html --coverage-xml

#collect coverage only for unit tests
vendor/bin/codecept run unit -- --coverage-html --coverage-xml

#collect coverage for unit and functional tests
vendor/bin/codecept run functional,unit -- --coverage-html --coverage-xml

You can see code coverage output under the tests/_output directory.

MAILER

Run mailer migration

php yii migrate --migrationPath="vendor/intermundia/yii2-mailer/migrations"

SMTP configuration

   SMTP_HOST =
   SMTP_USERNAME =
   SMTP_PASSWORD =
   SMTP_PORT =
   SMTP_ENCRYPTION =

agora-yii2-vue's Issues

Writing comments on articles/timeline posts

The comment section will be the same for articles and timeline posits:

• A comment input box with the comment button.
• Emoji location
• Below an article > Like button which in case if I activate will like the post. The same icon should display the count of the linkes on a post.
• We should also display a number of comments on a post.
• The comment section will be a two-level tree structure when replying to a comment. After that, the reply will include the mention feature.
• edit and delete features.
• Micro profile picture >name of the commenter(this will be a hyperlink to a user profile) comment > comment time (Discuss it together)

Global settings

Date format
Datetime format
Timezone

Intranet Home page

Invitations

Invitations

New Invitation > “Email Address” field to send an invitation to a user. The user receives a link on the email. (This is a registration part)

Hello [email protected]
You were invited into (company name) Intranet by Admin
Click the link below to register
Registration Link (Company Name) Intranet Team

Columns> ID (sorting feature), Email (sorting feature), Status, Invitation Date, Invited by, Registration Date, Actions.

Statuses:

Pending – the invitation is sent but not yet confirmed by the user.

Registered – the user took an action and registered on the link.

Completed - admin activated a user from the intranet

Actions > Edit User/ Delete

Edit User > user can be edited if the user’s status is “Registered” or “Completed”. Pending user can be deleted only.

Login

The login will be a 1FA. The Form will include two input fields for Email and password credentials:

Welcome to Agora intranet platform (the wording can be changed later)
Title "Login to your account"
Email input field
Password input field
Login button

Product Landing page

Sharing on timeline

Timeline Locations:
Dashboard and Inner page of the Workspace.

The dashboard will be split into three vertical sections - "Latest Updates on News and Events", "My Timeline - Latest Updates", "My Workspace - Latest Updates"

Add one giant scroll for the page.

I should be able to share attachments, and articles.

Attachments > add a share button similar to the screenshot, but prefer to discuss it.

• Checking an attachment should enable the share button. After clicking on that, a modal should pop up with an open text box, asking "Would you like to share this on your workspace timeline"?
• There will be a title "Add a comment" above the open text box.
• When I share it, the shared document should be displayed on my timeline within that specific workspace and on the dashboard as the latest update.

The visual of the shared document:

• A profile picture of the user
• The text "A user XYZ uploaded an attachment to an article ABC" - this requires to be discussed.

Sharing of an article:

• There will be a share button similar to attachments. Next to the share button, please add a count of the article shares. When I click on the share button, the same window will pop up similar to attachments. Again, I should be able to see my shared item under my timelines.

Language management

Registration

Registration

After the invitation is sent, the user receives a registration link.

The link opens a registration form on the intranet page:

Logo of the company should be variable (if available) and Welcome Text "

Welcome
to the (Company Name) intranet platform"

"Create an Account" - title

Input fields: Email, First Name, Last Name, Mobile, Password, Repeat Password

There will be 2 buttons: "Register", "Back to login page".

If the email address already exists in the database, show a notification > “This email address has already been taken.”

After the registration process is completed, the user should be notified "Your account will be reviewed by admin and you will receive login instructions" meaning the registration is not yet signed off, before Admin from the intranet activates a user. The user will be in the added as a new account under Employees but with "Not Active" status.

The final step is that the admin activates the use through a radio button from the "User Update" form

It should be possible to cancel invitation (delete invitation)

Country CRUD

Sharing files in chat

User management - Create/Update/Delete/Change status

User manu item drop down:

Emplyees
Organigramme Organizational Charts
Emplyees > Drop-down with a selection of the max number of entries per page: 5, 10, 20, 50, 100 (Screenshot 1)

1.1.“Add New” button on the right hand corner:

   - Personal Details’ Form> First Name, Last Name, Email, Phone, Mobile, Password, Add Workspace, Add Position

“Add Workspace” (screenshot 3)

“Workspace” and “Role” drop-down fields> I should be able to use “Add workspace” as many times as possible until all optional workspaces are added to a user. Adding a workspace should remove that option from the drop-down.
“Add Position” (screenshot 4)

There will be 3 fields only: Country; Department; Position:

Selecting a country should filter Departments by country.
The departments' section is a drop-down with pre-defined selections.
"Positions" is a suggestable free text field

1.2. Add pagination to a page

1.3. Columns: Image, Name, Email, Phone, Job Title, Status, Role, Country, and Actions (all column can be sorted except Actions’ column). The column data should be in descending order.

1.4. Image and Name> by clicking either of these, a user profile form should open/ pop up on the same page, containing a read only user details.

1.5. Besides a global search input field, the page will include “Advanced Filter” which is collapsible. The Advanced filter will have Search and Reset buttons:

Name, Email, Phone, Job Title(drop-down), Role(drop-down), Country(drop-down), Special Tasks(drop-down), Expertise(drop-down), Languages(drop-down)
1.6. Actions:

Actions’ drop-down options – Edit/Delete
Edit > Activate User Radio Button. The user initially is active.
Delete> clicking on delete should popup a dialogue window notifying the admin "This operation can not be undone." and display a text "You are about to delete user "XYZ". This operation can not be undone. Please choose another user to assign all workspaces and articles of "XYZ". Add a drop-down with the user list who'll take over the activities done by "XYZ". Add two buttons "Cancel" and "Delete"

Another way to reset a password on behalf of the user:

Create New Use/ Edit a user > Password input field, which will be initially blank but by clicking on Generate button right next to the input field, a random password will be generated and sent to the user, who can use it as a temporary password or reset it from the link sent to the email.

Add invitation edit and delete actions

Sending emojies in chat

Folder CRUD

Location: Workspace main page > Create New Folder

A new folder can be added or edited by a workspace admin and an admin only

Add/Edit folder > Module view:
-Title when adding a new article: Create New Artice; Title when editing an existing article
-Image upload filed (Choose Image/ Remove)
-"Title" - of the folder
-An open text box for "Description"

Articles can be created within the folder as well as attachments are able to provide within the file.

The folder CRUD is of a 5 level tree hierarchy, so I should be able to create a folder(s) under a folder.

The folder inner page will be split into three sections: Articles, Folders, Attachments

Project setup

Make backend and frontend working

Translations

Article CRUD

Location: Workspace > a folder's inner view > "Create new article"

Clicking on the "Create new article button" will open a pop up modal similar to "Create new folder"

• Image section with a drag and drop option and Choose Image buttons. Add the remove button next to it.
• Input filed for a Title
• Open textbox for a description
• Cancel and Submit buttons

The added article will include just a thumbnail of the article description. If I click on the article title, I should go to the actual article view on a different page, where I can read the whole article and can be reacted/commented by users.

Workspace CRUD

1. A Workspace Admin or a superuser should be able to add a new workspace.

The workspace section should be on the left-hand side

My Workspaces
XYZ
ABC
ETC

2. Clicking on My Workspaces the section will display the workspaces I'm a member of. The workspaces will be displayed as provided in the screenshot. The user with the permission to add a new workspace will be able to see the workspace button(as provided in the screenshot)
   The workspace can be edited or deleted in the same section through 3 dots nested on the individual workspace image.

3. Add/edit modal and its fields :
   Image import section > Choose Image; Remove

• Enable create folders inside folders checkbox
• Name of the workspace.
• Abbreviation
• Description (free text box)
• Cancel and Submit buttons
  Clicking on the workspace image should redirect you to the inner view of the particular workspace.

4. Inner view of the workspace: (Discuss it with together.)

• Icon for "Users" I should be able to see users by just hovering over it, but if I want to make the view static, I could be able to click on the icon, which then I can close by the X button.

"Need to discuss the visual arrangement of the inner view."

There will be 2 sections on the page, one for the timeline and the second for the folders created under the workspace.

The timeline will be of the same visual + "Write on Timeline" button.
It should be scrollable.

The folders will occupy the second section of the view, 2 rows max. - this should be discussed.

I should be able to go to see the folder items just by clicking on it. There will be 2 sections, the list of articles on the left-hand side, the other section will be occupied by attachments.

"Create new article" button. The added article will include just a thumbnail of the article description. If I click on the article title, I should go to the actual article view on a different page, where I can read the whole article and can be reacted/commented by users.

The articles should be only displayed in a limited number, which is controlled by drop-down at the bottom of the article list, with the selections of max(5, 10, 20, 100 items per view)
The same view will include an attachment section as was on the parent view.

-Go back button where needed
-Breadcrumbs where needed.
-Add to favorite where needed. If I click on it, the section/view will be displayed under the workspace items as a shortcut link. Undo will revert it to the default.

Note to self: need to copy descriptions under their relevant issues on Monday

Clock widgets

Setup > Departments

Add a new section on the left-hand side below workspaces. The Setup is only accessible to Admin.

The only sub-menu item at the moment will be "Departments"

The Department hierarchy will be a Tree.

Departments should be able to drag and drop under a parent/child department

Add Department should be inside the inner section of the module

Org chart

Individual organization should be able to add individual corporate hierarchy with as many levels as they want. The positions should be amendable by an Admin only (Setup >Departments)

The front view:

The structure should be as provided in the screenshot. The filters should be the same as is in the screenshot.

Electron App

When clicking on registration link from email it redirects to login page

What steps will reproduce the problem?

This does not happen when user is logged in system

Like on articles/timeline posts

• Emoji clickthrough icon. when I hover over it, the text will pop up - Choose an emoji (In the new version of Unicode, there is a bunch of emoji symbols. We can use either Google emojis or Twitter emojis as a source)
• Like button besides liking a post should display the count of the likes on a post.
• After I click on like, the button should color code into a darker color to notify me that the button was successfully activated

Logout does not work properly

We should be able to login from multiple devices

PWA

Twitter feed

Dashboard should be created first

The Twitter section will be on the extreme left section

Password reset

Request new password hyperlink which will go to Request a new password view where a user can insert the account email and submit for a new password. By clicking on a Back to login page hyperlink, the user will return back to the main login view where one can insert a random password that was sent to the email or input a custom password set up by the user from the link sent to the email.

Adding folders and articles in favourites

Global search

Posting on timeline

Location > Dashboard and a Workspace inner page
"Write on the timeline" button on the left-hand side.
The fields: A dropdown for Workspaces "Please Select Workspace".
Select Image or Video file (to browse files) and drag and drop as well
Description -an open text box
Cancel and Submit buttons with their respective functions.

If a post is added from a timeline, I should be able to select a workspace. If I add a post from the workspace, the workspace drop-down field isn't necessary.

I should be able to delete and edit a post when clicking on three dots at the top of the post, on the left hand side.

Group Chat

1-to-1 realtime chat

Remove profile image does not work

Sorting Features

Please apply the sorting feature to headers where needed.

FAQ page

Make call in chat

If email was not sent during invitation, Invitation record must not be made in the database

It should also be possible to reinvite user if the email is not registered yet.

When you generate new migration it has owner root.

What steps will reproduce the problem?

docker-compose exec app php yii migrate/create migration_name

What's expected?

The owner of the generated file to be current system user on which command is run.

What do you get instead?

The owner of the file is root.

Update own profile

Four Modals that a user should be able to update:

Profile Image> Choose Image/ Remove
Account > Email, Password, Confirm Password
Information > First Name, Last Name, Phone, Mobile Phone, Birthday, Hobby and About Me rich text box

There will be an “Update” button at the top of the page

Chat must be responsive

Weather widgets

All the packages installed in composer.json must be stable - not dev-master

User Setup

The visual will be almost the same as within the screenshot. The tabs will require visual adjustment and refinement

.

The only sub-menu item at the moment will be "Departments" and the departments should be able to drag and drop under the parent/child departments after created.

When I'll stand on a country, the respective departments should be filtered under the country. When I click on a department, the tab next to the Departments' tab, should filter users under that department, but I should be able to see the filtered users after I click on the users' tab. The user list under the tab should be read-only but if I want to edit a user, there should be a "View" button at the top of the page, (the same location as to the "Add Department" button). The view button should be floating over a scroll. When I click on it, I should navigate to the employees' section where I will see the same filtered users.

We should leave room for future additions. e.g if I ever want to filter users by other attributes when I click on a user, the tab next to the user should filter the respective attributes of the user.

Attachment CRUD

The first header level:
Upload Button, Columns?; Share, Delete, Technical Note

The second row with column headers:

Checkbox(without header), Name of the file, Size, Updated at, Updated by, Actions

Actions > Edit Label, Download, Share (count of shares), Delete

I should be able to delete just by ticking a file or multiple files and click on the delete button on the fist level headers, or individually delete a file through the actions button.

Only workspace admin and admin should be able to upload for all types of files. The videos can be also uploaded there. A non-playable video format should be able to convert into a playable format.

Setup project using docker

When non active user tries to login he must see message "Your account must be activated by admin"

When non active user tries to login he sees message "Incorrect username or password", but instead he should see message that his account is not activated.

Language switcher