Merge pull request #435 from OpenCatalogi/development

Development to main, week 7
OpenCatalogi · Feb 12, 2024 · f1f3c73 · f1f3c73
2 parents d9adc51 + 3c1d608
commit f1f3c73
Show file tree

Hide file tree

Showing 18 changed files with 324 additions and 121 deletions.
diff --git a/pwa/src/apiService/resources/search.ts b/pwa/src/apiService/resources/search.ts
@@ -11,9 +11,15 @@ export default class Search {
   }
 
   public getSearch = async (filters: IFiltersContext, currentPage: number, limit: number): Promise<any> => {
-    let endpoint = `/search?page=${currentPage}&order[_self.dateCreated]=desc&limit=${limit}&extend[]=all${filtersToQueryParams(
-      filters,
-    )}`;
+    let endpoint = `/search?page=${currentPage}&limit=${limit}&extend[]=all${filtersToQueryParams(filters)}`;
+
+    if (filters.orderRating === true) {
+      endpoint += "&order[embedded.rating.rating]=desc";
+    }
+
+    if (filters.isForked === true) {
+      endpoint += "&isBasedOn=IS NULL";
+    }
 
     if (window.sessionStorage.getItem("GITHUB_ORGANIZATION_URL") !== "") {
       endpoint += `&embedded.url.embedded.organisation.github=${window.sessionStorage.getItem(

diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css
@@ -43,6 +43,65 @@
   gap: var(--web-app-size-xs);
 }
 
+.content > *:not(:last-child) {
+  margin-block-end: var(--web-app-size-md);
+}
+
+.ratingContainer {
+  display: flex;
+}
+
+.ratingIndicatorContainer {
+  height: 70px;
+}
+
+.ratingIndicatorContainer > svg {
+  margin-block-end: 0;
+}
+.ratingIndicatorContainer > svg > text {
+  font-size: 23px !important;
+}
+
+@media only screen and (min-width: 992px) {
+  /* Desktop */
+  .content {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .tagsContainer {
+    flex: 8;
+  }
+
+  .ratingContainer {
+    align-self: center;
+    flex: 1;
+  }
+  .ratingIndicatorContainer {
+    min-height: 55px;
+  }
+}
+
+@media only screen and (min-width: 576px) {
+  /* Tablet */
+  .content {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .tagsContainer {
+    flex: 4;
+  }
+
+  .ratingContainer {
+    align-self: center;
+    flex: 1;
+  }
+  .ratingIndicatorContainer {
+    min-height: 55px;
+  }
+}
+
 /* Colors of the 5 layers */
 .interactionLayer,
 .interfaceLayer {

diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx
@@ -11,6 +11,7 @@ import { GitHubLogo } from "../../assets/svgs/GitHub";
 import { TOOLTIP_ID } from "../../layout/Layout";
 import { CardHeader, CardHeaderTitle, CardWrapper } from "@conduction/components";
 import { navigate } from "gatsby";
+import { RatingIndicatorTemplate } from "../../templates/templateParts/ratingIndicator/RatingIndicatorTemplate";
 
 export interface ComponentCardProps {
   title: {
@@ -21,6 +22,10 @@ export interface ComponentCardProps {
   layer?: TCategories;
   categories: string[];
   tags: {
+    rating?: {
+      rating: number;
+      maxRating: number;
+    };
     status?: string;
     installations: string;
     organization: {
@@ -60,86 +65,98 @@ export const ComponentCard: React.FC<ComponentCardProps> = ({ title, layer, cate
       </CardHeader>
 
       <Paragraph className={styles.description}>{description}</Paragraph>
-      {layer && (
-        <div className={styles.layerTags}>
-          <div className={styles[_.camelCase(t(_.upperFirst(`${layer ?? "unknown"} layer`)))]}>
-            <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Laag">
-              <FontAwesomeIcon icon={faLayerGroup} />
-              {t(_.upperFirst(layer ?? "unknown"))}
-            </DataBadge>
-          </div>
+      <div className={styles.content}>
+        <div className={styles.tagsContainer}>
+          {layer && (
+            <div className={styles.layerTags}>
+              <div className={styles[_.camelCase(t(_.upperFirst(`${layer ?? "unknown"} layer`)))]}>
+                <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Laag">
+                  <FontAwesomeIcon icon={faLayerGroup} />
+                  {t(_.upperFirst(layer ?? "unknown"))}
+                </DataBadge>
+              </div>
 
-          <div className={styles[_.camelCase(`${layer ?? "unknown"} category`)]}>
-            {!!__categories &&
-              __categories.map(
-                (category: any, idx: number) =>
-                  category && (
-                    <DataBadge key={idx} data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Categorie">
-                      {category?.icon}
-                      {_.upperFirst(category?.title)}
-                    </DataBadge>
-                  ),
-              )}
-          </div>
-        </div>
-      )}
+              <div className={styles[_.camelCase(`${layer ?? "unknown"} category`)]}>
+                {!!__categories &&
+                  __categories.map(
+                    (category: any, idx: number) =>
+                      category && (
+                        <DataBadge key={idx} data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Categorie">
+                          {category?.icon}
+                          {_.upperFirst(category?.title)}
+                        </DataBadge>
+                      ),
+                  )}
+              </div>
+            </div>
+          )}
+          <div className={styles.tags}>
+            {tags.status && (
+              <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Status">
+                <FontAwesomeIcon icon={faInfoCircle} />
+                {t(_.upperFirst(tags.status))}
+              </DataBadge>
+            )}
 
-      <div className={styles.tags}>
-        {tags.status && (
-          <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Status">
-            <FontAwesomeIcon icon={faInfoCircle} />
-            {t(_.upperFirst(tags.status))}
-          </DataBadge>
-        )}
+            <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Aantal installaties">
+              <FontAwesomeIcon icon={faRepeat} />
+              {tags.installations}
+            </DataBadge>
 
-        <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Aantal installaties">
-          <FontAwesomeIcon icon={faRepeat} />
-          {tags.installations}
-        </DataBadge>
+            {tags.organization?.name && (
+              <>
+                {!tags.organization.website && (
+                  <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Organisatie">
+                    <FontAwesomeIcon icon={faHouse} />
+                    {tags.organization.name}
+                  </DataBadge>
+                )}
 
-        {tags.organization?.name && (
-          <>
-            {!tags.organization.website && (
-              <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Organisatie">
-                <FontAwesomeIcon icon={faHouse} />
-                {tags.organization.name}
+                {tags.organization.website && (
+                  <DataBadge
+                    data-tooltip-id={TOOLTIP_ID}
+                    data-tooltip-content="Organisatie"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      open(tags?.organization?.website);
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faHouse} />
+                    {tags.organization.name}
+                  </DataBadge>
+                )}
+              </>
+            )}
+            {tags.licence && (
+              <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Licentie">
+                <FontAwesomeIcon icon={faScroll} />
+                {tags.licence}
               </DataBadge>
             )}
-
-            {tags.organization.website && (
+            {tags.githubLink && (
               <DataBadge
                 data-tooltip-id={TOOLTIP_ID}
-                data-tooltip-content="Organisatie"
+                data-tooltip-content="GitHub"
                 onClick={(e) => {
                   e.stopPropagation();
-                  open(tags?.organization?.website);
+                  open(tags.githubLink);
                 }}
               >
-                <FontAwesomeIcon icon={faHouse} />
-                {tags.organization.name}
+                <GitHubLogo />
+                {t("Repository")}
               </DataBadge>
             )}
-          </>
-        )}
-        {tags.licence && (
-          <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Licentie">
-            <FontAwesomeIcon icon={faScroll} />
-            {tags.licence}
-          </DataBadge>
-        )}
-        {tags.githubLink && (
-          <DataBadge
-            data-tooltip-id={TOOLTIP_ID}
-            data-tooltip-content="GitHub"
-            onClick={(e) => {
-              e.stopPropagation();
-              open(tags.githubLink);
-            }}
-          >
-            <GitHubLogo />
-            {t("Repository")}
-          </DataBadge>
-        )}
+          </div>
+        </div>
+        <div className={styles.ratingContainer}>
+          {tags.rating && (
+            <RatingIndicatorTemplate
+              layoutClassName={styles.ratingIndicatorContainer}
+              maxRating={tags.rating?.maxRating}
+              rating={tags.rating?.rating}
+            />
+          )}
+        </div>
       </div>
     </CardWrapper>
   );

diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts
@@ -3,6 +3,7 @@ import { GlobalContext } from "./global";
 
 export interface IFiltersContext {
   isForked: boolean;
+  orderRating: boolean;
   organizationSearch?: string;
 
   _search?: string;
@@ -29,6 +30,7 @@ export const defaultFiltersContext: IFiltersContext = {
   _search: "",
   organizationSearch: "",
   isForked: true,
+  orderRating: true,
   developmentStatus: "stable",
 };
 

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
@@ -147,13 +147,17 @@
 }
 
 .popup {
-  margin: 0 auto;
+  width: 75vw;
   position: fixed;
-  left: 45%;
-  top: 25%;
-  margin-left: -250px;
-  margin-top: -250px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   z-index: 700;
+  max-width: 1170px !important;
+}
+
+.popup > h3 {
+  word-break: break-word;
 }
 
 .organizations {
@@ -259,6 +263,15 @@
     padding-inline-end: unset;
     padding-inline-start: unset;
   }
+
+  .popup {
+    width: unset;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 700;
+  }
 }
 
 /* Colors of the 5 layers */