Refactoring of CaseStudies/Showcases and Service Provider Listing

DistributionPackages/Neos.NeosIo/Configuration/NodeTypes.Reference.List.yaml → DistributionPackages/Neos.NeosIo.CaseStudies/Configuration/NodeTypes.Content.CaseList.yaml

@@ -1,9 +1,9 @@
 
-'Neos.NeosIo:Reference.List':
+'Neos.NeosIo.CaseStudies:Content.CaseList':
   superTypes:
     'Neos.Neos:Content': true
   ui:
-    label: 'Reference List'
+    label: 'List of Cases'
     icon: icon-globe
     group: special
     inspector:

DistributionPackages/Neos.NeosIo/Configuration/NodeTypes.Reference.CaseStudy.yaml → DistributionPackages/Neos.NeosIo.CaseStudies/Configuration/NodeTypes.Reference.CaseStudy.yaml

@@ -1,6 +1,9 @@
 'Neos.NeosIo:Reference.CaseStudy':
   superTypes:
     'Neos.NeosIo:LandingPage': true
+    'Neos.NeosIo:Reference': true
+    'Neos.Seo:NoindexMixin': false
+
   ui:
     label: 'Case Study'
     icon: eye

DistributionPackages/Neos.NeosIo/Configuration/NodeTypes.Reference.yaml → DistributionPackages/Neos.NeosIo.CaseStudies/Configuration/NodeTypes.Reference.yaml

@@ -9,17 +9,24 @@
     icon: icon-globe
     inspector:
       groups:
-        properties:
-          label: 'Reference properties'
+        case-studies:
+          label: 'Case properties'
+          tab: 'case-studies'
+          icon: icon-globe
           position: 1
+      tabs:
+        case-studies:
+          label: 'Case properties'
+          position: 'start'
+          icon: icon-globe
   properties:
     url:
       type: string
       ui:
         label: 'Project URL'
         reloadIfChanged: true
         inspector:
-          group: properties
+          group: 'case-studies'
           editor: Neos.Neos/Inspector/Editors/LinkEditor
           position: 10
     image:
@@ -28,15 +35,15 @@
         label: 'Add reference screenshot'
         reloadIfChanged: true
         inspector:
-          group: properties
+          group: 'case-studies'
           position: 20
     projectType:
       type: reference
       ui:
         label: 'Choose project type'
         reloadIfChanged: true
         inspector:
-          group: properties
+          group: 'case-studies'
           editorOptions:
             nodeTypes:
               - 'Neos.NeosIo:ReferenceType'
@@ -47,7 +54,7 @@
       ui:
         label: 'Launch date'
         inspector:
-          group: properties
+          group: 'case-studies'
       validation:
         Neos.Neos/Validation/DateTimeValidator: {  }
       search:
@@ -57,7 +64,7 @@
       ui:
         label: 'Date published'
         inspector:
-          group: properties
+          group: 'case-studies'
       validation:
         Neos.Neos/Validation/DateTimeValidator: {  }
       search:
@@ -70,7 +77,7 @@
         label: 'Project volume'
         inspector:
           editor: Content/Inspector/Editors/SelectBoxEditor
-          group: properties
+          group: 'case-studies'
           editorOptions:
             values:
               1:
@@ -91,4 +98,5 @@
       ui:
         label: Featured
         inspector:
-          group: properties
+          group: 'case-studies'
+

DistributionPackages/Neos.NeosIo.CaseStudies/Configuration/Settings.yaml

@@ -0,0 +1,12 @@
+Neos:
+  Neos:
+    userInterface:
+      translation:
+        autoInclude:
+          Neos.NeosIo.CaseStudies:
+            - Main
+            - 'NodeTypes/*'
+    fusion:
+      autoInclude:
+        Neos.NeosIo.CaseStudies: true
+

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/ContentTypes/CaseList.fusion

@@ -0,0 +1,56 @@
+prototype(Neos.NeosIo.CaseStudies:Content.CaseList) < prototype(Neos.Neos:ContentComponent) {
+    cases = ${q(site).find('[instanceof Neos.NeosIo:Reference]').get()}
+
+    renderer = Neos.Fusion:Component {
+        @apply.props = ${props}
+
+        translationData = Neos.Fusion:DataStructure {
+            chooseProjectVolume = ${Translation.translate('caseListing.chooseProjectVolume', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            chooseIndustry = ${Translation.translate('caseListing.chooseIndustry', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            search = ${Translation.translate('caseListing.search', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            tableView = ${Translation.translate('caseListing.tableView', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            gridView = ${Translation.translate('caseListing.gridView', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            noCasesFound = ${Translation.translate('caseListing.noCasesFound', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            numberOfEntriesShown = ${Translation.translate('caseListing.numberOfEntriesShown', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            sortBy = Neos.Fusion:DataStructure {
+                featured = ${Translation.translate('caseListing.sortBy.featured', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+                launchDate = ${Translation.translate('caseListing.sortBy.launchDate', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+                datePublished = ${Translation.translate('caseListing.sortBy.datePublished', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+                projectVolume = ${Translation.translate('caseListing.sortBy.projectVolume', '', [], 'Main', 'Neos.NeosIo.CaseStudies')}
+            }
+
+        }
+
+        casesData = Neos.Fusion:Map {
+            items = ${props.cases}
+            itemName = 'case'
+            itemRenderer = Neos.Fusion:DataStructure {
+                identifier = ${case.identifier}
+                title = ${q(case).property('title')}
+                url = ${q(case).property('url') ? q(case).property('url') : 'node://' + case.identifier}
+                url.@process.convertUris = Neos.Neos:ConvertUris {
+                    absolute = true
+                }
+                image = Neos.Neos:ImageUri {
+                    asset = ${q(case).property('image')}
+                    @if.hasBannerImage = ${q(case).property('image')}
+                }
+                projectType = ${q(q(case).property('projectType')).property('title')}
+                searchText = ${String.toLowerCase(Array.join([this.title, this.url, this.projectType], ' '))}
+                launchDate = ${Date.format(q(case).property('launchDate'), 'U')}
+                launchDateFormatted = ${q(case).property('launchDate') ? Date.format(q(case).property('launchDate'), 'd.m.Y') : ''}
+                datePublished = ${Date.format(q(case).property('datePublished'), 'U')}
+                projectVolume = ${q(case).property('projectVolume') || 1}
+                featured = ${q(case).property('featured') || Neos.Node.isOfType(case, 'Neos.NeosIo:Reference.CaseStudy') || 0}
+            }
+        }
+
+        renderer = afx`
+            <div class="cases__list" id="cases-listing"
+                 data-cases-data={Json.stringify(props.casesData)}
+                 data-translation-data={Json.stringify(props.translationData)}
+            >
+            </div>
+        `
+    }
+}

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/ContentTypes/Reference.ShowCase.Item.fusion

@@ -0,0 +1,66 @@
+prototype(Neos.NeosIo:Reference.ShowCaseItem) < prototype(Neos.Neos:ContentComponent) {
+    node = ${node}
+    url = ${q(node).property('url')}
+    image = ${q(node).property('image')}
+    launchDate = ${q(node).property('launchDate')}
+    title = ${q(node).property('title')}
+    alternativeText = ${q(node).property('title')}
+
+    projectVolume = Neos.Fusion:Case {
+        default {
+            condition = ${true}
+            renderer = 'n/a'
+        }
+        5 {
+            condition = ${q(node).property('projectVolume') == 5}
+            renderer = '< 100h'
+        }
+        10 {
+            condition = ${q(node).property('projectVolume') == 10}
+            renderer = '100 - 499h'
+        }
+        15 {
+            condition = ${q(node).property('projectVolume') == 15}
+            renderer = '500 - 999h'
+        }
+        20 {
+            condition = ${q(node).property('projectVolume') == 20}
+            renderer = '1000 - 3000h'
+        }
+        25 {
+            condition = ${q(node).property('projectVolume') == 25}
+            renderer = '> 3000h'
+        }
+    }
+
+    projectType = ${q(q(node).property('projectType')).property('title')}
+
+
+    @context {
+        title = ${this.title}
+        alternativeText = ${this.alternativeText}
+        image = ${this.image}
+    }
+
+    imageTag = Neos.NeosIo:Component.LazyLoadImage {
+        image = ${image}
+        title = ${title}
+        alternativeText = ${alternativeText}
+        className = 'u-mb1/2'
+        maximumHeight = '261'
+        maximumwidth = '561'
+        allowCropping = true
+    }
+
+    renderer = afx`
+            <h1>{title}</h1>
+            {props.imageTag}
+            <ul>
+                <li @if.hasLaunchDate={props.launchDate}><i class="fas fa-rocket"></i>{Date.format(props.launchDate,'d.m.Y')}</li>
+                <li @if.hasProjectVolume={props.projectVolume}>
+                        <i class="fas fa-users"></i>{props.projectVolume}
+                </li>
+                <li @if.hasProjectType={props.projectType}><i class="fas fa-industry"></i> {props.projectType}</li>
+            </ul>
+    `
+}

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/Main.scss

@@ -0,0 +1 @@
+@import "../Scss/Main";

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/Main.tsx

@@ -0,0 +1,23 @@
+// load scss
+import './Main.scss';
+
+import {h, render} from 'preact';
+import * as React from "preact/compat";
+import {CaseStudyListing, CasesData, TranslationData} from '../JavaScript/index';
+
+const casesListing: HTMLElement = document.getElementById('cases-listing');
+
+if (casesListing) {
+    const casesData: CaseStudy[] = JSON.parse(casesListing.dataset.casesData);
+    const translationData: string[] = JSON.parse(casesListing.dataset.translationData);
+
+    render(
+        (
+            <CasesData.Provider value={casesData}>
+                <TranslationData.Provider value={translationData}>
+                    <CaseStudyListing />
+                </TranslationData.Provider>
+            </CasesData.Provider>
+        ), casesListing
+    );
+}

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/Override/Page.fusion

@@ -0,0 +1,29 @@
+prototype(Neos.Neos:Page) {
+    head.stylesheets {
+        caseStudiesStyleSheet = Neos.Fusion:Tag {
+            tagName = 'link'
+            attributes {
+                rel = 'stylesheet'
+                href = Neos.Fusion:ResourceUri {
+                    path = 'resource://Neos.NeosIo.CaseStudies/Public/Styles/Main.css'
+                }
+                media = 'print'
+                onload = 'this.media=\'all\';'
+            }
+            @if.caseStudyListingPresent = ${q(documentNode).children().find('[instanceof Neos.NeosIo.CaseStudies:Content.CaseList]')}
+        }
+    }
+
+    body.javascripts {
+        caseStudies = Neos.Fusion:Tag {
+            tagName = 'script'
+            attributes {
+                src = Neos.Fusion:ResourceUri {
+                    path = 'resource://Neos.NeosIo.CaseStudies/Public/Scripts/Main.js'
+                }
+            }
+            @if.caseStudyListingPresent = ${q(documentNode).children().find('[instanceof Neos.NeosIo.CaseStudies:Content.CaseList]')}
+        }
+
+    }
+}

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/Root.fusion

@@ -0,0 +1,2 @@
+include: **/*.fusion
+