Feature: Individual Art and Art Showcase Page - Issue #8 + #40

[Karl-Sue]

Change Summary

Frontend

Created Frontend page for Art Showcase and Individual Art Page.
Behaviour:

• Art Showcase Page: If there is no Artwork or backend app does not respond, the page will use the placeholder image instead and all interactive features (flip card, show info of the featured art, etc.) are disabled. Exactly 3 featured artworks displayed.

• Expected result:

• If clicked a card, that card flips and its related information shown as below:

• Fall back:

• Individual Art Page: Show the artwork and the related info (contributors, art name, etc.)

Backend

• Create ArtShowcase, ArtContributor and Art tables and 2 API responses:
• arts/featured: returns the 3 featured arts as chosen by admin (if more than 3 arts chosen in the ArtShowcase table, the api will return the first 3 arts - ordered by art id). Example API response:

[
    {
        "art_id": 1,
        "name": "art1",
        "description": "hello art 1",
        "media": "http://localhost:8000/media/art/download.png",
        "active": true,
        "source_game_id": 1,
        "source_game_name": "game 1",
        "contributors": [
            {
                "id": 1,
                "member_id": 1,
                "member_name": "member1",
                "role": "admin"
            }
        ],
        "showcase_description": "this is good"
    }
]

• arts/{id}: returns specific art with id:

        "art_id": 1,
        "name": "art1",
        "description": "hello art 1",
        "media": "http://localhost:8000/media/art/download.png",
        "active": true,
        "source_game_id": 1,
        "source_game_name": "game 1",
        "contributors": [
            {
                "id": 1,
                "member_id": 1,
                "member_name": "member1",
                "role": "admin"
            }
        ],
        "showcase_description": "this is good"
    }

• Included some tests for these models:
• ArtModelTest: 6 tests
• ArtContributorModelTest: 6 tests
• ArtShowcaseModelTest: 6 tests

Change Form

Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.

• The pull request title has an issue number
• The change works by "Smoke testing" or quick testing
• The change has tests
• The change has documentation
  The documentation is in issue art documentation #99 branch

Other Information

[Is there anything in particular in the review that I should be aware of?]
When a new artwork is added, the uploaded image will be saved at /server/media/art

Related issue

• Resolve Individual art pages #8 and Art showcase page #40