feat(ui): Initial push for home and project page

.licenserc.yaml

@@ -40,6 +40,8 @@ header:
     - package.json
     - package-lock.json
     - '**/common.json'
+    - 'defaultValues/*.json'
+    - 'mockData/*.json'
 
   comment: on-failure
 

defaultValues/defaultValuesHome-MyComponents.json

@@ -0,0 +1,6 @@
+[
+    {
+        "name": "No component data to show",
+        "description": "NA"
+    }
+]

defaultValues/defaultValuesHome-MyProjects.json

@@ -0,0 +1,7 @@
+[
+    {
+        "name": "No project data to show",
+        "version": "NA",
+        "projectType": "NA"
+    }
+]

defaultValues/defaultValuesHome-MyRecentComponents.json

@@ -0,0 +1,6 @@
+[
+    {
+        "key": "unique-component",
+        "name": "No recent components found"
+    }
+]

defaultValues/defaultValuesHome-MyRecentReleases.json

@@ -0,0 +1,6 @@
+[
+    {
+        "key": "unique-release",
+        "name": "No recent release found"
+    }
+]

defaultValues/defaultValuesHome-MySubscriptions.json

@@ -0,0 +1,6 @@
+[
+    {
+        "key": "unique-subscriptions",
+        "name": "No subscriptions found"
+    }
+]

defaultValues/defaultValuesHome-MyTaskAssignments.json

@@ -0,0 +1,6 @@
+[
+    {
+        "documentName": "No assigned task found",
+        "status": "NA"
+    }
+]

defaultValues/defaultValuesHome-MyTaskSubmissions.json

@@ -0,0 +1,7 @@
+[
+    {
+        "documentName": "No task subissions found",
+        "status": "NA",
+        "actions": "NA"
+    }
+]

defaultValues/defaultValuesProjects-ProjectsList.json

@@ -0,0 +1,10 @@
+[
+    {
+        "name": "No project data to show",
+        "description": "NA",
+        "projectResponsible": "NA",
+        "licenseClearing": "NA",
+        "state": "NA",
+        "actions": "NA"
+    }
+]

mockData/mockProjectData.json

@@ -0,0 +1,28 @@
+[
+    {
+        "name": "@data/auth",
+        "version": "0.3.3",
+        "description": "@data/auth - A JavaScript SDK to authenticate with auth0 or MyID",
+        "considerReleasesFromExternalList": false,
+        "projectType": "INTERNAL",
+        "visibility": "EVERYONE",
+        "state": "2/7",
+        "clearingState": "OPEN",
+        "projectResponsible": "admin@sw360.org",
+        "approvedReleases": 3,
+        "licenseClearing": "1/12"
+    },
+    {
+        "name": "@data/auth",
+        "version": "0.3.1",
+        "description": "@data/auth - A JavaScript SDK to authenticate with auth0 or MyID",
+        "considerReleasesFromExternalList": false,
+        "projectType": "INTERNAL",
+        "visibility": "EVERYONE",
+        "state": "testing",
+        "clearingState": "OPEN",
+        "projectResponsible": "clearing-admin@sw360.org",
+        "approvedReleases": 3,
+        "licenseClearing": "3/4"
+    }
+]

package.json

@@ -13,9 +13,12 @@
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/react-table": "^7.7.14",
     "bootstrap": "^5.2.3",
+    "classnames": "^2.3.2",
     "commitlint": "^17.4.4",
     "country-flag-icons": "^1.5.5",
+    "country-list": "^2.3.0",
     "dotenv": "^16.0.3",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
@@ -26,8 +29,10 @@
     "next-i18next": "^13.2.2",
     "react": "18.2.0",
     "react-bootstrap": "^2.7.2",
+    "react-bootstrap-icons": "^1.10.3",
     "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
+    "react-table": "^7.8.0",
     "react-icons": "^4.8.0",
     "typescript": "4.9.5"
   },

src/components/AddAdditionalRoles.tsx

@@ -0,0 +1,78 @@
+// Copyright (C) Siemens AG, 2023. Part of the SW360 Frontend Project.
+
+// This program and the accompanying materials are made
+// available under the terms of the Eclipse Public License 2.0
+// which is available at https://www.eclipse.org/legal/epl-2.0/
+
+// SPDX-License-Identifier: EPL-2.0
+// License-Filename: LICENSE
+
+import React, { useState } from 'react'
+import styles from "@/css/AddKeyValue.module.css"
+
+interface Input {
+    role: string;
+    email: string;
+}
+
+export default function AddAdditionalRolesComponent() {
+
+    const [inputList, setInputList] = useState<Input[]>([]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>, index: number) => {
+        const { name, value } = e.target;
+        const list: Input[] = [...inputList];
+        list[index][name as keyof Input] = value;
+        setInputList(list);
+    };
+
+    const handleRemoveClick = (index: number) => {
+        const list = [...inputList];
+        list.splice(index, 1);
+        setInputList(list);
+    };
+
+    const handleAddClick = () => {
+        setInputList([...inputList, { role: "Stakeholder", email: "" }]);
+    };
+
+    return(
+        <>
+            <div className={`${styles["header"]} mb-2`}>
+                <p className="fw-bold mt-3">Additional Roles</p>
+            </div>
+            <div className="row">
+                {
+                    inputList.map((elem, j) => {
+                        return (
+                            <div className="row mb-2" key ="">
+                                <div className="col-lg-5">
+                                    <select className="form-select" key ="" name="role" value={elem.role} aria-label="additional role" defaultValue={"Stakeholder"} onChange={e => handleInputChange(e, j)}>
+                                        <option value="Stakeholder">Stakeholder</option>
+                                        <option value="Analyst">Analyst</option>
+                                        <option value="Contributor">Contributor</option>
+                                        <option value="Accountant">Accountant</option>
+                                        <option value="End User">End User</option>
+                                        <option value="Quality Manager">Quality Manager</option>
+                                        <option value="Test Manager">Test Manager</option>
+                                        <option value="Technical writer">Technical writer</option>
+                                        <option value="Key User">Key User</option>
+                                    </select>
+                                </div>
+                                <div className="col-lg-5">
+                                    <input name="email" value={elem.email} type="email" onChange={e => handleInputChange(e, j)} className="form-control" placeholder={`Enter email`} aria-describedby={`Email`} />
+                                </div>
+                                <div className="col-lg-2">
+                                    <button type="button" onClick={() => handleRemoveClick(j)} className={`fw-bold btn btn-light ${styles['button-plain']}`}><i className="bi bi-trash3-fill"></i></button>
+                                </div>
+                            </div>
+                        )
+                    })
+                }
+                <div className="col-lg-3">
+                    <button type="button" onClick={() => handleAddClick()} className={`fw-bold btn btn-light ${styles['button-plain']}`}>Click to add row to Additional Roles</button>
+                </div>
+            </div>
+        </>
+    );
+}

src/components/AddKeyValue.tsx

@@ -0,0 +1,74 @@
+// Copyright (C) Siemens AG, 2023. Part of the SW360 Frontend Project.
+
+// This program and the accompanying materials are made
+// available under the terms of the Eclipse Public License 2.0
+// which is available at https://www.eclipse.org/legal/epl-2.0/
+
+// SPDX-License-Identifier: EPL-2.0
+// License-Filename: LICENSE
+
+import React from 'react'
+import styles from "@/css/AddKeyValue.module.css"
+import { useState } from 'react';
+
+interface Props {
+    header: string;
+    keyName: string;
+}
+
+interface Input {
+    key: string;
+    value: string;
+}
+
+export default function AddKeyValueComponent(props: Props) {
+
+    const [inputList, setInputList] = useState<Input[]>([]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+        const { name, value } = e.target;
+        const list: Input[] = [...inputList];
+        list[index][name as keyof Input] = value;
+        setInputList(list);
+    };
+
+    const handleRemoveClick = (index: number) => {
+        const list = [...inputList];
+        list.splice(index, 1);
+        setInputList(list);
+    };
+
+    const handleAddClick = () => {
+        setInputList([...inputList, { key: "", value: "" }]);
+    };
+
+    return(
+        <>
+            <div className={`${styles["header"]} mb-2`}>
+                <p className="fw-bold mt-3">{props.header}</p>
+            </div>
+            <div className="row">
+                {
+                    inputList.map((elem, j) => {
+                        return (
+                            <div className="row mb-2" key ="">
+                                <div className="col-lg-5">
+                                    <input name="key" value={elem.key} type="text" onChange={e => handleInputChange(e, j)} className="form-control" placeholder={`Enter ${props.keyName.toLowerCase()} key`} aria-describedby={`${props.keyName.toLowerCase()} key`} />
+                                </div>
+                                <div className="col-lg-5">
+                                    <input name="value" value={elem.value} type="text" onChange={e => handleInputChange(e, j)} className="form-control" placeholder={`Enter ${props.keyName.toLowerCase()} value`} aria-describedby={`${props.keyName.toLowerCase()} value`} />
+                                </div>
+                                <div className="col-lg-2">
+                                    <button type="button" onClick={() => handleRemoveClick(j)} className={`fw-bold btn btn-light ${styles['button-plain']}`}><i className="bi bi-trash3-fill"></i></button>
+                                </div>
+                            </div>
+                        )
+                    })
+                }
+                <div className="col-lg-3">
+                    <button type="button" onClick={() => handleAddClick()} className={`fw-bold btn btn-light ${styles['button-plain']}`}>{`Click to add row to ${props.keyName.split(" ").map((elem, i) => elem[0].toUpperCase() + elem.substring(1)).join(" ")}`}</button>
+                </div>
+            </div>
+        </>
+    );
+}