237 v2 App Projects View (#265)

* add project list + fix Font awesome

* add more content to projects

* Fix date Data

* Lint to ease merge

* Squashed commit of the following:

commit f199370
Author: James Bithell <Jbithell@users.noreply.github.com>
Date:   Sat Dec 18 18:17:06 2021 +0000

    Lint Everything (#268)

    * Lint App

    * Don't lint on Netifly

    * Apply requested tsconfig changes

commit 8bde02a
Author: John Cherry <jac677@york.ac.uk>
Date:   Sat Dec 18 17:45:29 2021 +0000

    Add message when no assets found (#261)

    * Add message when no assets found

    * Allow assets to be accessed directly

    * Fix merge conflict

    * Remove Import

    Co-authored-by: James Bithell <Jbithell@users.noreply.github.com>
    Co-authored-by: Robert Watts <11817698+Robert-Watts@users.noreply.github.com>
    Co-authored-by: Robert Watts <mail@rlwatts.co.uk>

* close #264

Also fixes Linting issues

* Add Project Assets view

Currently just a list, needs statuses to be added

* Add crew list

TODO: add popovers when project is updated to Ionic 6

* Update type.d.ts

* resolve comments

Co-authored-by: James Bithell <Jbithell@users.noreply.github.com>

adam-rms.code-workspace

@@ -16,6 +16,7 @@
 		"editor.codeActionsOnSave": {
 			"source.fixAll.eslint": true
 		},
+		"eslint.validate": ["typescript", "typescriptreact"],
 		"files.eol": "\n"
 	},
 	"launch": {

app/src/App.tsx

@@ -1,7 +1,7 @@
 import { IonApp, IonRouterOutlet, IonSplitPane } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
-import Menu from "./components/Menu/Menu";
-import { Routes } from "./pages/Route";
+import Menu from "./components/menu/Menu";
+import { Routes } from "./utilities/Route";
 import Contexts from "./contexts/Context";
 import React from "react";
 
@@ -23,6 +23,15 @@ import "@ionic/react/css/display.css";
 import GlobalStyle from "./theme/GlobalStyle";
 import IonicTheme from "./theme/IonicTheme";
 
+/*Font Awesome */
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+
+//setup Font Awesome icons
+library.add(fab, far, fas);
+
 const App: React.FC = () => {
   return (
     <>

app/src/pages/Page.tsx → app/src/components/Page.tsx

@@ -8,7 +8,7 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import PageTitle from "../components/PageTitle";
+import PageTitle from "./PageTitle";
 
 type Props = {
   title?: string;

app/src/components/assets/AssetItem.tsx

@@ -0,0 +1,67 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IonCol, IonGrid, IonItem, IonLabel, IonRow } from "@ionic/react";
+import { MassFormatter, MoneyFormatter } from "../../utilities/Formatters";
+
+const AssetItem = (props: any) => {
+  let additionalInfo;
+  if (props.item.price) {
+    additionalInfo = (
+      <>
+        <IonCol size="2">
+          <IonLabel>{MassFormatter(props.item.assetTypes_mass)}</IonLabel>
+        </IonCol>
+        <IonCol size="2">
+          <IonLabel>
+            {MoneyFormatter(props.item.price.currency, props.item.price.amount)}
+          </IonLabel>
+        </IonCol>
+        <IonCol size="2">
+          <IonLabel>
+            {MoneyFormatter(
+              props.item.discountPrice.currency,
+              props.item.discountPrice.amount,
+            )}
+          </IonLabel>
+        </IonCol>
+      </>
+    );
+  }
+  return (
+    <IonItem
+      routerLink={"/assets/" + props.AssetTypeId + "/" + props.item.assets_id}
+    >
+      <IonGrid>
+        <IonRow>
+          <IonCol size="3">
+            <IonLabel>
+              <h2>{props.item.assets_tag}</h2>
+            </IonLabel>
+          </IonCol>
+          {additionalInfo}
+          <IonCol size="3">
+            <FontAwesomeIcon
+              icon="arrow-right"
+              className="ion-margin-end ion-float-end"
+            />
+            {props.item.flagsblocks["COUNT"]["BLOCK"] > 0 && (
+              <FontAwesomeIcon
+                icon="ban"
+                color="#dc3545"
+                className="ion-margin-end ion-float-end"
+              />
+            )}
+            {props.item.flagsblocks["COUNT"]["FLAG"] > 0 && (
+              <FontAwesomeIcon
+                icon="flag"
+                color="#ffc107"
+                className="ion-margin-end ion-float-end"
+              />
+            )}
+          </IonCol>
+        </IonRow>
+      </IonGrid>
+    </IonItem>
+  );
+};
+
+export default AssetItem;

app/src/components/Menu/Menu.tsx → app/src/components/menu/Menu.tsx

@@ -1,7 +1,10 @@
-import { IonImg, IonMenu, IonMenuToggle } from "@ionic/react";
-
+import { IonMenu, IonMenuToggle } from "@ionic/react";
 import { useLocation } from "react-router-dom";
-import { faCube, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCube,
+  faList,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import StyledIonContent from "./components/StyledIonContent";
 import StyledIonList from "./components/StyledIonList";
@@ -24,6 +27,11 @@ const appPages: AppPage[] = [
     url: "/assets/",
     icon: faCube,
   },
+  {
+    title: "Projects",
+    url: "/projects",
+    icon: faList,
+  },
 ];
 
 const Menu: React.FC = () => {

app/src/contexts/Context.tsx

@@ -1,4 +1,6 @@
-import AssetTypeProvider from "./Asset/AssetTypeContext";
+import AssetTypeProvider from "./asset/AssetTypeContext";
+import ProjectProvider from "./project/ProjectContext";
+import ProjectDataProvider from "./project/ProjectDataContext";
 
 /**
  * This is used to wrap all contexts into one component.
@@ -8,7 +10,11 @@ import AssetTypeProvider from "./Asset/AssetTypeContext";
 export default function Contexts(props: any) {
   return (
     <>
-      <AssetTypeProvider>{props.children}</AssetTypeProvider>
+      <AssetTypeProvider>
+        <ProjectProvider>
+          <ProjectDataProvider>{props.children}</ProjectDataProvider>
+        </ProjectProvider>
+      </AssetTypeProvider>
     </>
   );
 }

app/src/contexts/project/ProjectContext.tsx

@@ -0,0 +1,28 @@
+import { createContext, useState } from "react";
+import Api from "../../utilities/Api";
+
+// The actual context
+export const ProjectContext = createContext<any>(null);
+
+//Create a provider wrapper to make the interaction with the context easier
+const ProjectProvider: React.FC<React.ReactNode> = ({ children }) => {
+  //Create default state
+  const [projects, setProjects] = useState<IProject[]>([]);
+
+  /**
+   * Refresh Context
+   * Replace all projects in context
+   */
+  async function refreshProjects() {
+    setProjects(await Api("projects/list.php"));
+  }
+
+  // Don't forget to add new functions to the value of the provider!
+  return (
+    <ProjectContext.Provider value={{ projects, refreshProjects }}>
+      {children}
+    </ProjectContext.Provider>
+  );
+};
+
+export default ProjectProvider;

app/src/contexts/project/ProjectDataContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, useState } from "react";
+import Api from "../../utilities/Api";
+
+// The actual context
+export const ProjectDataContext = createContext<any>(null);
+
+//Create a provider wrapper to make the interaction with the context easier
+const ProjectDataProvider: React.FC<React.ReactNode> = ({ children }) => {
+  //Create default state
+  const [projectData, setProjectData] = useState<IProjectData>({
+    project: {},
+    files: [],
+    assetsAssignmentsStatus: [],
+    FINANCIALS: {},
+  });
+
+  /**
+   * Refresh Context
+   * Replace all projects in context
+   */
+  async function refreshProjectData(id: number) {
+    setProjectData(await Api("projects/data.php", { id: id }));
+  }
+
+  // Don't forget to add new functions to the value of the provider!
+  return (
+    <ProjectDataContext.Provider value={{ projectData, refreshProjectData }}>
+      {children}
+    </ProjectDataContext.Provider>
+  );
+};
+
+export default ProjectDataProvider;

app/src/components/assets/Asset.tsx → app/src/pages/assets/Asset.tsx

@@ -1,4 +1,3 @@
-import { faBan, faFlag } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   IonCard,
@@ -14,11 +13,12 @@ import {
   IonRefresherContent,
   IonRow,
 } from "@ionic/react";
-import { useContext, useEffect, useState } from "react";
+import { useContext } from "react";
 import { useParams } from "react-router";
-import { AssetTypeContext } from "../../contexts/Asset/AssetTypeContext";
+import { AssetTypeContext } from "../../contexts/asset/AssetTypeContext";
 import { s3url, fileExtensionToIcon, formatSize } from "../../utilities/Files";
-import Page from "../../pages/Page";
+import Page from "../../components/Page";
+import { faBan, faFlag } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Asset Page
@@ -134,7 +134,7 @@ const Asset = () => {
                   </IonItem>
                 </IonCol>
                 <IonCol>
-                  {thisAssetType.fields.map((element: {}, index: number) => {
+                  {thisAssetType.fields.map((element: any, index: number) => {
                     if (
                       thisAssetType.fields[index - 1] !== "" &&
                       thisAsset["asset_definableFields_" + index] !== ""

app/src/components/assets/AssetType.tsx → app/src/pages/assets/AssetType.tsx

@@ -14,16 +14,14 @@ import {
   IonRow,
   IonSlide,
   IonSlides,
-  useIonRouter,
-  useIonViewWillLeave,
 } from "@ionic/react";
 import { useContext } from "react";
 import { useParams } from "react-router";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { fileExtensionToIcon, formatSize, s3url } from "../../utilities/Files";
-import { faArrowRight, faBan, faFlag } from "@fortawesome/free-solid-svg-icons";
-import { AssetTypeContext } from "../../contexts/Asset/AssetTypeContext";
-import Page from "../../pages/Page";
+import { AssetTypeContext } from "../../contexts/asset/AssetTypeContext";
+import Page from "../../components/Page";
+import AssetItem from "../../components/assets/AssetItem";
 
 /**
  * Asset Type Page
@@ -172,32 +170,11 @@ const AssetType = () => {
             <IonList>
               {thisAssetType.tags.map((item: any) => {
                 return (
-                  <IonItem
+                  <AssetItem
                     key={item.assets_id}
-                    routerLink={
-                      "/assets/" +
-                      thisAssetType.assetTypes_id +
-                      "/" +
-                      item.assets_id
-                    }
-                  >
-                    <IonLabel>
-                      <h2>{item.assets_tag}</h2>
-                    </IonLabel>
-                    <div className="container">
-                      {item.flagsblocks["COUNT"]["BLOCK"] > 0 && (
-                        <FontAwesomeIcon icon={faBan} color="#dc3545" />
-                      )}
-                    </div>
-                    <div className="container">
-                      {item.flagsblocks["COUNT"]["FLAG"] > 0 && (
-                        <FontAwesomeIcon icon={faFlag} color="#ffc107" />
-                      )}
-                    </div>
-                    <div slot="end">
-                      <FontAwesomeIcon icon={faArrowRight} />
-                    </div>
-                  </IonItem>
+                    AssetTypeId={thisAssetType.assetTypes_id}
+                    item={item}
+                  />
                 );
               })}
             </IonList>

app/src/components/assets/AssetTypeList.tsx → app/src/pages/assets/AssetTypeList.tsx

@@ -14,8 +14,8 @@ import {
 } from "@ionic/react";
 import styled from "styled-components";
 import { useContext, useEffect } from "react";
-import { AssetTypeContext } from "../../contexts/Asset/AssetTypeContext";
-import Page from "../../pages/Page";
+import { AssetTypeContext } from "../../contexts/asset/AssetTypeContext";
+import Page from "../../components/Page";
 
 /**
  * Asset Type List Page
@@ -61,7 +61,7 @@ const AssetTypeList = () => {
                       <IonImg
                         src={item.thumbnails[0].url}
                         alt={item.assetTypes_name}
-                      ></IonImg>
+                      />
                     </IonAvatar>
                   )}
                   {item.thumbnails.length == 0 && (