Merge pull request #331 from topcoder-platform/feat/GAME-124

Feat/game 124

Author: kkartunov

package.json

@@ -34,6 +34,7 @@
         "highlight.js": "^11.6.0",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
+        "markdown-it": "^13.0.1",
         "marked": "4.0.3",
         "moment": "^2.29.3",
         "moment-timezone": "^0.5.34",
@@ -42,6 +43,7 @@
         "react": "^17.0.2",
         "react-apexcharts": "^1.4.0",
         "react-app-rewired": "^2.2.1",
+        "react-contenteditable": "^3.3.6",
         "react-dom": "^17.0.2",
         "react-elastic-carousel": "^0.11.5",
         "react-gtm-module": "^2.0.11",
@@ -85,6 +87,7 @@
         "@types/highlightjs": "^9.12.2",
         "@types/jest": "^27.0.1",
         "@types/lodash": "^4.14.182",
+        "@types/markdown-it": "^12.2.3",
         "@types/marked": "4.0.3",
         "@types/node": "^18.7.13",
         "@types/reach__router": "^1.3.10",

src-ts/tools/gamification-admin/game-lib/index.ts

@@ -1,3 +1,4 @@
 export * from './game-badge.model'
 export * from './use-get-game-badges-page.hook'
 export * from './use-gamification-breadcrumb.hook'
+export * from './use-get-game-badge-details.hook'

src-ts/tools/gamification-admin/game-lib/use-get-game-badge-details.hook.ts

@@ -0,0 +1,24 @@
+import useSWR, { KeyedMutator, SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '../../../config'
+
+import { GameBadge } from './game-badge.model'
+
+export interface BadgeDetailPageHandler<T> {
+    data?: Readonly<T>
+    error?: Readonly<any>
+    mutate: KeyedMutator<any>
+}
+
+export function useGetGameBadgeDetails(badgeID: string): BadgeDetailPageHandler<GameBadge> {
+
+    const badgeEndpointUrl: URL = new URL(`${EnvironmentConfig.API.V5}/gamification/badges/${badgeID}`)
+
+    const { data, error, mutate }: SWRResponse = useSWR(badgeEndpointUrl.toString())
+
+    return {
+        data,
+        error,
+        mutate,
+    }
+}

src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.module.scss

@@ -1,17 +1,134 @@
-.contentLayout {
-  width: 100%;
-  padding-bottom: 0;
+@import "../../../../lib/styles/variables";
+@import "../../../../lib/styles/includes";
 
-  .contentLayout-outer {
-    width: 100%;
+$badgePreview: 130px;
+$badgePreviewImage: 72px;
 
-    .contentLayout-inner {
-      width: 100%;
-      overflow: visible;
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .error {
+        background-color: $black-5;
+        color: red;
+        padding: $space-sm;
     }
-  }
-}
 
-.container {
-  display: flex;
-}
+    .badge {
+        display: flex;
+        margin-top: $space-xxxxl;
+
+        @include ltemd {
+            flex-direction: column;
+        }
+
+        .badgeImage {
+            position: relative;
+            border-radius: $space-sm;
+            background-color: $black-5;
+            margin-right: $space-xxxxl;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: $badgePreview;
+            height: $badgePreview;
+            min-width: $badgePreview;
+            min-height: $badgePreview;
+
+            @include ltemd {
+                margin-right: 0;
+                margin-bottom: $space-xxl;
+                width: 100%;
+            }
+
+            img {
+                width: $badgePreviewImage;
+                height: $badgePreviewImage;
+            }
+
+            .filePickerPencil {
+                position: absolute;
+                top: 0;
+                right: 0;
+                color: $turq-160;
+            }
+
+            .filePickerInput {
+                display: none;
+            }
+        }
+
+        .badgeDetails {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+
+            .badgeName {
+                font-family: $font-roboto;
+                font-weight: $font-weight-bold;
+                padding: $space-sm;
+                font-size: 24px;
+                line-height: 32px;
+
+                @include ltemd {
+                    font-size: 20px;
+                    line-height: 28px;
+                }
+
+                &:hover {
+                    background-color: $black-5;
+                    cursor: text;
+                }
+
+                &:focus {
+                    background-color: $tc-white;
+                    outline-color: $turq-160;
+                }
+            }
+
+            .badgeDesc {
+                margin-top: $space-sm;
+
+                .badgeEditWrap {
+                    display: flex;
+                    flex-direction: column;
+
+                    .badgeEditable,
+                    .badgeEditableMode {
+                        padding: $space-sm;
+                        border-radius: 3px;
+                        border: 2px solid $tc-white;
+
+                        &:hover {
+                            background-color: $black-5;
+                            cursor: text;
+                        }
+
+                        &:focus {
+                            background-color: $tc-white;
+                            outline: none;
+                        }
+
+                        a {
+                            color: $link-blue-dark;
+                        }
+                    }
+
+                    .badgeEditableMode {
+                        border: 2px solid $turq-160;
+                    }
+
+                    .badgeEditActions {
+                        display: flex;
+                        justify-content: flex-end;
+                        margin-top: $space-sm;
+
+                        button:first-child {
+                            margin-right: $space-sm;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}