Merge pull request #347 from SeedCompany/feature/FE-344-Product_creat…

…e_edit

FE #344 Create and Edit Product

src/api/approach.tsx

@@ -5,32 +5,32 @@ import {
   Translate,
 } from '@material-ui/icons';
 import React, { ReactNode } from 'react';
+import { entries, mapFromList } from '../util';
 import { ProductApproach, ProductMethodology } from './schema.generated';
 
-export const MethodologyToApproach: Record<
-  ProductMethodology,
-  ProductApproach
+export const ApproachMethodologies: Record<
+  ProductApproach,
+  ProductMethodology[]
 > = {
-  // Written
-  Paratext: 'Written',
-  OtherWritten: 'Written',
-
-  // Oral Translation
-  Render: 'OralTranslation',
-  OtherOralTranslation: 'OralTranslation',
-
-  // Oral Stories
-  BibleStories: 'OralStories',
-  BibleStorying: 'OralStories',
-  OneStory: 'OralStories',
-  OtherOralStories: 'OralStories',
-
-  // Visual
-  Film: 'Visual',
-  SignLanguage: 'Visual',
-  OtherVisual: 'Visual',
+  Written: ['Paratext', 'OtherWritten'],
+  OralTranslation: ['Render', 'OtherOralTranslation'],
+  OralStories: [
+    'BibleStories',
+    'BibleStorying',
+    'OneStory',
+    'OtherOralStories',
+  ],
+  Visual: ['Film', 'SignLanguage', 'OtherVisual'],
 };
 
+export const MethodologyToApproach = entries(ApproachMethodologies).reduce(
+  (map, [approach, methodologies]) => ({
+    ...map,
+    ...mapFromList(methodologies, (methodology) => [methodology, approach]),
+  }),
+  {}
+) as Record<ProductMethodology, ProductApproach>;
+
 export const ApproachIcons: Record<ProductApproach, ReactNode> = {
   Written: <MenuBook color="inherit" fontSize="inherit" />,
   OralTranslation: <Translate color="inherit" fontSize="inherit" />,

src/api/displayEnums.ts

@@ -7,11 +7,16 @@ import {
   ProjectStatus,
   Role,
 } from '.';
+import { ProductTypes } from '../scenes/Products/ProductForm/constants';
 import { Nullable } from '../util';
+import { MethodologyToApproach } from './approach';
 import {
   InternshipEngagementPosition,
+  ProductMedium,
   ProductMethodology,
+  ProductPurpose,
   ProjectStep,
+  ScriptureRangeInput,
 } from './schema.generated';
 
 // Helper to display enums in a generic way
@@ -40,5 +45,27 @@ export const PartnershipStatuses: PartnershipAgreementStatus[] = [
   'Signed',
 ];
 
-export const displayMethodology = displayEnum<ProductMethodology>();
+export const displayMethodology = (methodology: ProductMethodology) =>
+  methodology.includes('Other')
+    ? 'Other'
+    : displayEnum<ProductMethodology>()(methodology);
+
 export const displayApproach = displayEnum<ProductApproach>();
+
+export const displayMethodologyWithLabel = (methodology: ProductMethodology) =>
+  `${displayApproach(
+    MethodologyToApproach[methodology]
+  )} - ${displayMethodology(methodology)}`;
+
+export const displayScripture = ({ start, end }: ScriptureRangeInput) =>
+  `${start.book} ${start.chapter}:${start.verse} -  ${end.chapter}:${end.verse}`;
+
+export const displayProductMedium = (medium: ProductMedium) =>
+  medium === 'EBook' ? 'E-Book' : displayEnum<ProductMedium>()(medium);
+
+export const displayProductPurpose = displayEnum<ProductPurpose>();
+
+export const displayProductTypes = (type: ProductTypes) =>
+  type === 'DirectScriptureProduct'
+    ? 'Scripture'
+    : displayEnum<ProductTypes>()(type);

src/components/EngagementBreadcrumb/EngagementBreadcrumb.graphql

@@ -0,0 +1,13 @@
+fragment EngagementBreadcrumb on Engagement {
+  id
+  ... on LanguageEngagement {
+    language {
+      value {
+        name {
+          canRead
+          value
+        }
+      }
+    }
+  }
+}

src/components/EngagementBreadcrumb/EngagementBreadcrumb.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Except } from 'type-fest';
+import { Nullable } from '../../util';
+import { SecuredBreadcrumb, SecuredBreadcrumbProps } from '../Breadcrumb';
+import { EngagementBreadcrumbFragment } from './EngagementBreadcrumb.generated';
+
+export interface EngagementBreadcrumbProps
+  extends Except<Partial<SecuredBreadcrumbProps>, 'data'> {
+  data?: Nullable<EngagementBreadcrumbFragment>;
+  projectId?: string;
+}
+
+export const EngagementBreadcrumb = ({
+  data,
+  projectId,
+  ...rest
+}: EngagementBreadcrumbProps) => (
+  <SecuredBreadcrumb
+    to={data ? `/projects/${projectId}/engagements/${data.id}` : '..'} // assume subpage until data loads
+    data={
+      data?.__typename === 'LanguageEngagement'
+        ? data.language.value?.name
+        : undefined
+    }
+    redacted="You don't have permission to view this project's name"
+    loadingWidth={200}
+    {...rest}
+  />
+);

src/components/EngagementBreadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './EngagementBreadcrumb';

src/components/ProductCard/ProductCard.graphql

@@ -0,0 +1,54 @@
+fragment ProductCard on Product {
+  id
+  scriptureReferences {
+    canRead
+    canEdit
+    value {
+      start {
+        book
+        chapter
+        verse
+      }
+      end {
+        book
+        chapter
+        verse
+      }
+    }
+  }
+  mediums {
+    canRead
+    canEdit
+    value
+  }
+  methodology {
+    canRead
+    canEdit
+    value
+  }
+  ... on DerivativeScriptureProduct {
+    produces {
+      canRead
+      canEdit
+      value {
+        ...Producible
+      }
+    }
+    scriptureReferencesOverride {
+      canRead
+      canEdit
+      value {
+        start {
+          book
+          chapter
+          verse
+        }
+        end {
+          book
+          chapter
+          verse
+        }
+      }
+    }
+  }
+}

src/components/ProductCard/ProductCard.stories.tsx

@@ -0,0 +1,145 @@
+import { number, object, select, text } from '@storybook/addon-knobs';
+import { DateTime } from 'luxon';
+import * as React from 'react';
+import {
+  newTestament,
+  oldTestament,
+} from '../../scenes/Products/ProductForm/constants';
+import { ProductCard } from './ProductCard';
+import { ProductCardFragment } from './ProductCard.generated';
+
+export default {
+  title: 'Components',
+  decorators: [
+    (Story: React.FC) => (
+      <div style={{ width: 300 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const derivativeScriptureProducts = [
+  'DirectScriptureProduct',
+  'DerivativeScriptureProduct',
+  'Song',
+  'Story',
+  'Film',
+  'LiteracyMaterial',
+] as const;
+
+const getProduct = () => {
+  const methodologyValue = select(
+    'Methodology',
+    [
+      'Paratext',
+      'OtherWritten',
+      'Render',
+      'OtherOralTranslation',
+      'BibleStories',
+      'OneStory',
+      'OtherOralStories',
+      'Film',
+      'SignLanguage',
+      'OtherVisual',
+    ],
+    'Paratext'
+  );
+
+  const getScriptureRange = () => {
+    const books = [...oldTestament, ...newTestament];
+    const book = books[Math.floor(Math.random() * books.length)];
+    return {
+      start: {
+        book,
+        chapter: Math.ceil(Math.random() * 20),
+        verse: Math.ceil(Math.random() * 20),
+      },
+      end: {
+        book,
+        chapter: Math.ceil(Math.random() * 20),
+        verse: Math.ceil(Math.random() * 20),
+      },
+    };
+  };
+
+  const getScriptureRangeArray = () => {
+    const scriptureCount = number('Number of Scripture Ranges', 1, {
+      range: true,
+      min: 0,
+      max: 20,
+      step: 1,
+    });
+    const scriptureRangeArray = [];
+    for (const _ of new Array(scriptureCount)) {
+      scriptureRangeArray.push(getScriptureRange());
+    }
+    return scriptureRangeArray;
+  };
+
+  const sharedValues: Pick<
+    ProductCardFragment,
+    'id' | 'scriptureReferences' | 'mediums' | 'methodology'
+  > = {
+    id: '0958d98477',
+    scriptureReferences: {
+      canRead: true,
+      canEdit: true,
+      value: getScriptureRangeArray(),
+      __typename: 'SecuredScriptureRanges',
+    },
+    mediums: {
+      canRead: true,
+      canEdit: true,
+      value: object('Mediums', ['Print']),
+      __typename: 'SecuredProductMediums',
+    },
+    methodology: {
+      canRead: true,
+      canEdit: true,
+      value: methodologyValue,
+      __typename: 'SecuredMethodology',
+    },
+  };
+
+  const directProduct: ProductCardFragment = {
+    ...sharedValues,
+    __typename: 'DirectScriptureProduct',
+  };
+
+  const productType = select(
+    'Product Type',
+    derivativeScriptureProducts,
+    'Story'
+  );
+
+  const derivativeProduct: ProductCardFragment = {
+    ...sharedValues,
+    __typename: 'DerivativeScriptureProduct',
+    produces: {
+      canRead: true,
+      canEdit: true,
+      value: {
+        __typename: productType,
+        id: '123',
+        name: {
+          canRead: true,
+          canEdit: true,
+          value: text('Producible Name', 'My Childhood Story'),
+        },
+        createdAt: DateTime.local(),
+        scriptureReferences: sharedValues.scriptureReferences,
+      },
+    },
+    scriptureReferencesOverride: {
+      canRead: true,
+      canEdit: true,
+    },
+  };
+
+  return derivativeScriptureProducts.includes(productType)
+    ? derivativeProduct
+    : directProduct;
+};
+
+export const Product = () => <ProductCard product={getProduct()} />;