As hackathon 2023

src/Configuration/Provisioning/ProvisioningForm/CatalogCuration/CatalogCurationSearch.jsx

@@ -7,7 +7,6 @@ import { useEffect, useState } from 'react';
 import { Container } from '@edx/paragon';
 import { configuration } from './data/config';
 import { CatalogCurationContext } from './CatalogCurationContext';
-import { MAX_PAGE_SIZE } from './data/constants';
 import CatalogCurationDateSelection from './CatalogCurationDateSelection';
 import CatalogCurationSelectContentDataTable from './CatalogCurationSelectContentDataTable';
 import useCatalogCurationContext from './data/hooks';
@@ -28,19 +27,20 @@ const CatalogCurationSearch = () => {
     // check to see if one date is not null
     if (startDate !== '' || endDate !== '') {
       setCurrentSearchFilter({ currentSearchFilter: { content_type: 'course' } });
+
       let placeholderString = '';
       for (const [key, value] of Object.entries(currentSearchFilter)) {
         placeholderString += ` AND ${key}:${value}`;
       }
       setCurrentSearchFilterValue(defaultSearchFilter + placeholderString);
       // set to have contentType = course
     } else {
-      setCurrentSearchFilter({});
+      setCurrentSearchFilter({ currentSearchFilter: {} });
       setCurrentSearchFilterValue(defaultSearchFilter);
     }
   }, [startDate, endDate]);
-
   return (
+
     <Container>
       <SearchData>
         <InstantSearch
@@ -49,7 +49,7 @@ const CatalogCurationSearch = () => {
         >
           <Configure
             filters={currentSearchFilterValue}
-            hitsPerPage={MAX_PAGE_SIZE}
+            hitsPerPage={500}
           />
           <SearchHeader variant="default" />
           <CatalogCurationDateSelection />

src/Configuration/Provisioning/ProvisioningForm/CatalogCuration/CatalogCurationSelectContentDataTable.jsx

@@ -4,7 +4,7 @@ import {
 } from '@edx/paragon';
 import { connectStateResults } from 'react-instantsearch-dom';
 import PropTypes from 'prop-types';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { camelCaseObject } from '@edx/frontend-platform';
 import { useContextSelector } from 'use-context-selector';
 import { FOOTER_TEXT_BY_CONTENT_TYPE } from './data/utils';
@@ -52,21 +52,38 @@ const BaseHighlightStepperSelectContentDataTable = ({
   const [currentView, setCurrentView] = useState(defaultActiveStateValue);
   // TODO: searchResults contain all information before its populated into the datatable (do manual filtering here)
   const { startDate, endDate } = useContextSelector(CatalogCurationContext, v => v[0]);
-  const filteredHits = searchResults?.hits.filter((hit) => {
-    const courseStartDate = hit.advertised_course_run?.start ? new Date(hit.advertised_course_run.start) : null;
-    const courseEndDate = hit.advertised_course_run?.end ? new Date(hit.advertised_course_run.end) : null;
+  const [filteredHits, setFilteredHits] = useState([]);
+  const page_size = 12;
+  const page_index = searchResults?.page || 0;
+  let current_index = 1;
+  const window_start_index = (page_index * page_size) + 1;
 
-    if (startDate && courseStartDate < new Date(startDate)) {
-      return false;
-    }
+  useEffect(() => {
+    setFilteredHits(searchResults?.hits.filter((hit) => {
+      if (current_index < window_start_index + page_size) {
+        const courseStartDate = hit.advertised_course_run?.start ? new Date(hit.advertised_course_run.start) : null;
+        const courseEndDate = hit.advertised_course_run?.end ? new Date(hit.advertised_course_run.end) : null;
+        if (startDate && courseStartDate < new Date(startDate)) {
+          return false;
+        }
 
-    if (endDate && courseEndDate > new Date(endDate)) {
-      return false;
-    }
-    return true;
-  });
+        if (endDate && courseEndDate > new Date(endDate)) {
+          return false;
+        }
 
-  const tableData = useMemo(() => camelCaseObject(filteredHits || []), [searchResults]);
+        if (current_index >= window_start_index && current_index < window_start_index + page_size || (!startDate && !endDate)) {
+          current_index += 1;
+          return true;
+        }
+        current_index += 1;
+        return false;
+      } else {
+        return false;
+      }
+    }));
+  }, [searchResults, startDate, endDate]);
+
+  const tableData = useMemo(() => camelCaseObject(filteredHits || []), [filteredHits, searchResults?.hits]);
   const searchResultsItemCount = searchResults?.nbHits || 0;
   const searchResultsPageCount = searchResults?.nbPages || 0;
   return (
@@ -84,7 +101,7 @@ const BaseHighlightStepperSelectContentDataTable = ({
       manualPagination
       initialState={{
         pageIndex: 0,
-        pageSize: MAX_PAGE_SIZE,
+        pageSize: 12,
         selectedRowIds,
       }}
       pageCount={searchResultsPageCount}
@@ -127,7 +144,7 @@ const BaseHighlightStepperSelectContentDataTable = ({
           CardComponent={ContentSearchResultCard}
         />
       )}
-      {currentView === 'list' && <DataTable.Table /> }
+      {currentView === 'list' && <DataTable.Table />}
       <DataTable.EmptyTable content="No results found" />
       <DataTable.TableFooter>
         <SelectContentSearchPagination />

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/ProvisioningCatalogCurationContainer.jsx

@@ -1,10 +1,98 @@
 import CatalogCurationContextProvider from '../CatalogCuration/CatalogCurationContext';
 import CatalogCurationSearch from '../CatalogCuration/CatalogCurationSearch';
+import { Button } from '@edx/paragon';
 
-const ProvisioningCatalogCurationContainer = () => (
-  <CatalogCurationContextProvider>
-    <CatalogCurationSearch />
-  </CatalogCurationContextProvider>
-);
+import EnterpriseCatalogApiService from '../../../../data/services/EnterpriseCatalogApiService';
+import { selectProvisioningContext } from '../../data/utils';
+import { logError } from '@edx/frontend-platform/logging';
+import { useContextSelector } from 'use-context-selector';
+import { CatalogCurationContext } from '../CatalogCuration/CatalogCurationContext';
+import { useEffect, useState } from 'react';
+import { Form } from '@edx/paragon';
+import PROVISIONING_PAGE_TEXT from '../../data/constants';
+
+
+const ProvisioningCatalogCurationContainer = () => {
+  const { CUSTOM_CATALOG } = PROVISIONING_PAGE_TEXT.FORM;
+  const { startDate, endDate } = useContextSelector(CatalogCurationContext, v => v[0]);
+  let searchParams = new URLSearchParams(window.location.search);
+
+  const [catalogQuery, setCatalogQuery] = useState({});
+  useEffect(() => {
+    let baseQuery = {
+      "content_type": [
+        "learnerpathway",
+        "course"
+      ],
+      "availability": [
+        "Current",
+        "Starting Soon",
+        "Upcoming"
+      ],
+      "partner": "edx",
+      "level_type": [
+        "Introductory",
+        "Intermediate",
+        "Advanced"
+      ],
+      "status": [
+        "published",
+        "active"
+      ],
+      "org__exclude": [
+        "StanfordOnline",
+        "PennX"
+      ]
+    };
+    if (startDate !== '') {
+      baseQuery['start'] = startDate;
+    }
+    if (endDate !== '') {
+      baseQuery['end'] = endDate;
+    }
+    if (searchParams) {
+      searchParams.forEach((value, key) => {
+        baseQuery[key] = value;
+      });
+    }
+    setCatalogQuery(baseQuery)
+  }, [startDate, endDate, window.location.search]);
+
+  // const [catalogQueryContentFilter, setCatalogQueryContentFilter] = useState(
+
+  // );
+
+  const [formData] = selectProvisioningContext('formData');
+  const handleClick = () => {
+    EnterpriseCatalogApiService.generateNewCustomerCatalog(
+      formData.enterpriseUUID,
+      catalogQuery,
+    )
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((err) => {
+        console.log("sad");
+      });
+  };
+  return (
+    <>
+      <CatalogCurationSearch />
+      <Form.Control
+        className="mb-1 bg-gray-600"
+        as="textarea"
+        style={{ height: '200px' }}
+        floatingLabel={CUSTOM_CATALOG.OPTIONS.queryPreview}
+        value={JSON.stringify(catalogQuery, null, 4)}
+        disabled
+      />
+      <Button
+        onClick={handleClick}
+      >
+        Submit Catalog
+      </Button>
+    </>
+  )
+};
 
 export default ProvisioningCatalogCurationContainer;

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/ProvisioningFormCustomCatalog.jsx

@@ -7,6 +7,7 @@ import ProvisioningFormEnterpriseCustomerCatalog from './ProvisioningFormEnterpr
 import { indexOnlyPropType, selectProvisioningContext } from '../../data/utils';
 import ProvisioningFormCustomCatalogExecEdBoolean from './ProvisioningFormCustomCatalogExecEdBoolean';
 import ProvisioningCatalogCurationContainer from './ProvisioningCatalogCurationContainer';
+import CatalogCurationContextProvider from '../CatalogCuration/CatalogCurationContext';
 
 const ProvisioningFormCustomCatalog = ({ index }) => {
   const [formData] = selectProvisioningContext('formData');
@@ -33,19 +34,21 @@ const ProvisioningFormCustomCatalog = ({ index }) => {
   }
   if (customerCatalogBoolean === false) {
     return (
-      <article className="mt-4.5">
-        <ProvisioningFormDefineCustomCatalogHeader
-          index={index}
-          handleShowCatalogCurationButton={handleShowCatalogCurationButton}
-          showCatalogCuration={showCatalogCuration}
-        />
-        {showCatalogCuration && <ProvisioningCatalogCurationContainer />}
-        {!showCatalogCuration && <ProvisioningFormCustomCatalogDropdown />}
-        {!showCatalogCuration && policyData.catalogQuery.title && <ProvisioningFormCustomCatalogTitle />}
-        {!showCatalogCuration && policyData.catalogQuery.contentFilter && <ProvisioningFormCustomCatalogTextArea />}
-        {!showCatalogCuration && (policyData.catalogQuery.includeExecEd2UCourses !== undefined)
-        && <ProvisioningFormCustomCatalogExecEdBoolean />}
-      </article>
+      <CatalogCurationContextProvider>
+        <article className="mt-4.5">
+          <ProvisioningFormDefineCustomCatalogHeader
+            index={index}
+            handleShowCatalogCurationButton={handleShowCatalogCurationButton}
+            showCatalogCuration={showCatalogCuration}
+          />
+          {showCatalogCuration && <ProvisioningCatalogCurationContainer />}
+          {!showCatalogCuration && <ProvisioningFormCustomCatalogDropdown />}
+          {!showCatalogCuration && policyData.catalogQuery.title && <ProvisioningFormCustomCatalogTitle />}
+          {!showCatalogCuration && policyData.catalogQuery.contentFilter && <ProvisioningFormCustomCatalogTextArea />}
+          {!showCatalogCuration && (policyData.catalogQuery.includeExecEd2UCourses !== undefined)
+            && <ProvisioningFormCustomCatalogExecEdBoolean />}
+        </article>
+      </CatalogCurationContextProvider>
     );
   }
   return null;

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormAccountDetails.jsx

@@ -47,7 +47,7 @@ const ProvisioningFormAccountDetails = ({ index }) => {
           data-testid="account-value"
         />
         <Form.Control.Feedback>
-          {formFeedbackText}
+          {formFeedbackText || ""}
         </Form.Control.Feedback>
       </Form.Group>
     </article>

src/Configuration/Provisioning/data/constants.js

@@ -101,6 +101,7 @@ const PROVISIONING_PAGE_TEXT = {
         },
         catalogTitle: 'Catalog title',
         contentFilter: 'Content filter',
+        queryPreview: 'What your query is looking like now:',
         includeExecEd2UCourses: 'Includes Executive Education courses',
         courseModes: 'Enabled course modes',
       },

src/data/services/EnterpriseCatalogApiService

@@ -0,0 +1,17 @@
+
+import { getHttpClient, getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+class EnterpriseCatalogApiService {
+    static enterpriseCatalogServiceApiUrl = `${process.env.CATALOG_SERVICE_BASE_URL}/api/v1`;
+
+    static apiClient = getAuthenticatedHttpClient;
+
+    static generateNewCustomerCatalog(enterprise_uuid, query) {
+        console.log("hello!", query);
+        const enterpriseCatalogQueryUrl = `${EnterpriseCatalogApiService.enterpriseCatalogServiceApiUrl
+            }/enterprise-customer/${enterprise_uuid}/catalog_query`;
+        return EnterpriseCatalogApiService.apiClient().post(enterpriseCatalogQueryUrl, query);
+    }
+}
+
+export default EnterpriseCatalogApiService;

src/overrides.scss

@@ -196,4 +196,8 @@ div.fe__searchfield>div.mb-4 {
 
 div.fe__searchbox-col--default>div.mb-4 {
   display: none !important;
+}
+
+textarea.has-value {
+  background-color: #c2c3c4 !important;
 }