strapi-plugin-navigation 1.1.2 → 2.0.0-beta.1

package/admin/src/containers/ListView/index.js

@@ -1,54 +0,0 @@
-/*
- *
- * ListView
- *
- */
-
-import React from "react";
-import { useGlobalContext, LoadingIndicatorPage } from "strapi-helper-plugin";
-import { FormattedMessage } from "react-intl";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import useDataManager from "../../hooks/useDataManager";
-import { isEmpty } from "lodash";
-import { Header } from "@buffetjs/custom";
-import Footer from "./Footer";
-import Wrapper from "../View/Wrapper";
-import FadedWrapper from "../View/FadedWrapper";
-import List from "../../components/List";
-import EmptyView from "../../components/EmptyView";
-import { getTrad, getTradId } from "../../translations";
-
-const ListView = () => {
-  const { items, isLoadingForDataToBeSet } = useDataManager();
-
-  const { formatMessage } = useGlobalContext();
-  const newItemsCount = items.filter((_) => _.isNew).length;
-
-  return (
-    <Wrapper className="col-md-4">
-      <Header
-        title={{
-          label: formatMessage(getTrad('list.header.title')),
-        }}
-        content={formatMessage(
-          getTrad('list.header.description'),
-          { count: newItemsCount },
-        )}
-      />
-      {isLoadingForDataToBeSet && <LoadingIndicatorPage />}
-      <FadedWrapper>
-        {isEmpty(items) && (
-          <EmptyView>
-            <FontAwesomeIcon icon={faSearch} size="5x" />
-            <FormattedMessage id={getTradId('list.content.empty')} />
-          </EmptyView>
-        )}
-        {!isEmpty(items) && <List items={[...items]} />}
-      </FadedWrapper>
-      <Footer />
-    </Wrapper>
-  );
-};
-
-export default ListView;

package/admin/src/containers/View/FadedWrapper.js

@@ -1,51 +0,0 @@
-import styled from "styled-components";
-
-import { sizes } from "strapi-helper-plugin";
-
-const FadedWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0;
-  margin: ${-2 * sizes.margin}px;
-  padding-left: ${ 2 * sizes.margin}px;
-
-  position: relative;
-  z-index: 0;
-
-  overflow: hidden;
-
-  &:before,
-  &:after {
-    display: block;
-    content: "";
-    height: ${4 * sizes.margin}px;
-
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 1;
-
-    background: #ffffff;
-  }
-
-  &:before {
-    top: 0;
-    background: linear-gradient(
-      180deg,
-      rgba(250, 250, 251, 1) 0%,
-      rgba(250, 250, 251, 0) 100%
-    );
-  }
-
-  &:after {
-    bottom: 0;
-    background: linear-gradient(
-      0deg,
-      rgba(250, 250, 251, 1) 0%,
-      rgba(250, 250, 251, 0) 100%
-    );
-  }
-`;
-
-export default FadedWrapper;

package/admin/src/containers/View/HeaderForm.js

@@ -1,9 +0,0 @@
-import styled from "styled-components";
-
-const HeaderForm = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 3rem;
-`;
-
-export default HeaderForm;

package/admin/src/containers/View/HeaderFormCell.js

@@ -1,25 +0,0 @@
-import styled from "styled-components";
-import { Header, HeaderActions } from "@buffetjs/styles";
-
-const HeaderFormCell = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: ${(props) =>
-    props.align === "right" ? "flex-end" : "flex-start"};
-  justify-content: center;
-  flex-grow: ${(props) => (props.fill ? 1 : "unset")};
-
-  ${Header} {
-    margin-bottom: 0;
-  }
-
-  ${HeaderActions} {
-    padding-top: 0;
-  }
-
-  .header-title {
-    max-width: 100%;
-  }
-`;
-
-export default HeaderFormCell;

package/admin/src/containers/View/Wrapper.js

@@ -1,17 +0,0 @@
-import styled from "styled-components";
-
-import { sizes } from "strapi-helper-plugin";
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - ${sizes.header.height});
-  min-height: calc(100vh - ${sizes.header.height});
-  max-height: calc(100vh - ${sizes.header.height});
-  padding-top: 1.8rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-`;
-
-export default Wrapper;

package/admin/src/containers/View/components/NavigationItemForm/ModalFooter.js

@@ -1,45 +0,0 @@
-
-import styled from "styled-components";
-import { ModalFooter as StrapiModalFooter, colors } from "strapi-helper-plugin";
-
-const ModalFooter = styled(StrapiModalFooter)`
-  display: flex;
-  flex-direction: row;
-
-  section {
-    justify-content: flex-start;
-    flex-grow: 1;
-
-    background-color: ${colors.brightGrey};
-
-    &:last-of-type {
-      justify-content: flex-end;
-
-      background-color: ${colors.brightGrey};
-
-      button {
-        margin-left: 1rem;
-        margin-right: 0;
-      }
-    }
-
-    label {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      margin: 0;
-
-      color: ${colors.leftMenu.darkGrey};
-      font-weight: 600;
-      font-style: italic;
-    }
-
-    button {
-      margin-right: 1rem;
-    }
-  }
-`;
-
-export default ModalFooter;

package/admin/src/containers/View/components/NavigationItemForm/index.js

@@ -1,427 +0,0 @@
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { Button, Enumeration, Flex, Label, Text, Toggle } from '@buffetjs/core';
-import { useIntl } from 'react-intl';
-import { debounce, find, get, isEmpty, isEqual, isNil, isString } from 'lodash';
-import PropTypes from 'prop-types';
-import { ButtonModal, ModalBody, ModalForm } from 'strapi-helper-plugin';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEye, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import ModalFooter from './ModalFooter';
-import Input from '../../../../components/Input';
-import { navigationItemAdditionalFields, navigationItemType } from '../../utils/enums';
-import slugify from 'slugify';
-import Select from '../../../../components/Select';
-import { extractRelatedItemLabel } from '../../utils/parsers';
-import { form as formDefinition } from './utils/form';
-import { checkFormValidity } from '../../utils/form';
-import { getTrad, getTradId } from '../../../../translations';
-
-const NavigationItemForm = ({
-  isLoading,
-  inputsPrefix,
-  data = {},
-  contentTypes = [],
-  contentTypeEntities = [],
-  usedContentTypeEntities = [],
-  availableAudience = [],
-  additionalFields = [],
-  contentTypesNameFields = {},
-  onSubmit,
-  getContentTypeEntities,
-  usedContentTypesData,
-  appendLabelPublicationStatus = () => '',
-}) => {
-  const [hasBeenInitialized, setInitializedState] = useState(false);
-  const [hasChanged, setChangedState] = useState(false);
-  const [contentTypeSearchQuery, setContentTypeSearchQuery] = useState(undefined);
-  const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = useState(undefined);
-  const [form, setFormState] = useState({});
-  const [formErrors, setFormErrorsState] = useState({});
-  const { relatedType } = form;
-  const { formatMessage } = useIntl();
-
-  const relatedFieldName = `${inputsPrefix}related`;
-
-  if (!hasBeenInitialized && !isEmpty(data)) {
-    setInitializedState(true);
-    setFormState({ ...data });
-  }
-
-  const sanitizePayload = (payload = {}) => {
-    const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, ...purePayload } = payload;
-    const sanitizedType = purePayload.type || navigationItemType.INTERNAL;
-    const relatedId = related?.value
-    const relatedCollectionType = relatedType?.value;
-    return {
-      ...purePayload,
-      menuAttached: isNil(menuAttached) ? false : menuAttached,
-      type: sanitizedType,
-      path: sanitizedType === navigationItemType.INTERNAL ? purePayload.path : undefined,
-      externalPath: sanitizedType === navigationItemType.EXTERNAL ? purePayload.externalPath : undefined,
-      related: relatedId,
-      relatedType: relatedCollectionType,
-      isSingle: isSingleSelected,
-      uiRouterKey: generateUiRouterKey(purePayload.title, relatedId, relatedCollectionType),
-    };
-  };
-
-  const handleSubmit = async e => {
-    if (e) {
-      e.preventDefault();
-    }
-
-    const payload = sanitizePayload(form);
-    const errors = await checkFormValidity(payload, formDefinition.schema(isSingleSelected));
-    if (!errors || isEmpty(errors)) {
-      return onSubmit(payload);
-    } else {
-      setFormErrorsState(errors);
-    }
-  };
-
-  const handleRemove = e => {
-    if (e) {
-      e.preventDefault();
-    }
-    return onSubmit(sanitizePayload({
-      ...form,
-      removed: true,
-    }));
-  };
-
-  const onChange = ({ target: { name, value } }) => {
-    setFormState(prevState => ({
-      ...prevState,
-      updated: true,
-      [name]: value,
-    }));
-    if (!hasChanged) {
-      setChangedState(true);
-    }
-  };
-
-  const onChangeRelatedType = ({ target: { name, value } }) => {
-    const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === get(value, 'value', value));
-    setContentTypeSearchQuery(undefined);
-    setContentTypeSearchInputValue(undefined);
-    setFormState(prevState => ({
-      ...prevState,
-      updated: true,
-      related: relatedTypeBeingReverted ? {
-        ...data.related
-      } : undefined,
-      [name]: value,
-    }));
-    if (!hasChanged) {
-      setChangedState(true);
-    }
-  };
-
-
-  const generateUiRouterKey = (title, related, relatedType) => {
-    if (title) {
-      return isString(title) && !isEmpty(title) ? slugify(title).toLowerCase() : undefined;
-    } else if (related) {
-      const relationTitle = extractRelatedItemLabel({ 
-        ...contentTypeEntities.find(_ => _.id === related),
-        __collectionName: relatedType }, contentTypesNameFields, { contentTypes });
-      return isString(relationTitle) && !isEmpty(relationTitle) ? slugify(relationTitle).toLowerCase() : undefined;
-    }
-    return undefined;
-  };
-
-  const typeSelectValue = form.type || navigationItemType.INTERNAL;
-  const relatedTypeSelectValue = form.relatedType;
-  const relatedSelectValue = form.related;
-
-  const typeSelectOptions = useMemo(
-    () => Object.keys(navigationItemType).map((key) => ({
-      value: key,
-      label: formatMessage(getTrad(`popup.item.form.type.${key.toLowerCase()}.label`)),
-    })),
-    [],
-  );
-
-  const isSingleSelected = useMemo(
-    () => relatedTypeSelectValue ? contentTypes.find(_ => _.uid === relatedType.value)?.isSingle : false,
-    [relatedTypeSelectValue, contentTypes],
-  );
-
-  const relatedTypeSelectOptions = useMemo(
-    () => contentTypes
-    .filter((contentType) => {
-      if (contentType.isSingle) {
-        return !usedContentTypesData.some((_) => _.__collectionName === contentType.uid);
-      }
-      return true;
-    })
-      .map((item) => ({
-        value: get(item, 'uid'),
-        label: appendLabelPublicationStatus(get(item, 'label', get(item, 'name')), item, true),
-      })),
-    [contentTypes, usedContentTypesData],
-  );
-
-  const relatedSelectOptions = contentTypeEntities
-    .filter((item) => {
-      const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
-        .filter(uctItem => (get(relatedTypeSelectValue, 'value') === uctItem.__collectionName) && (uctItem.id !== get(relatedSelectValue, 'value')));
-      return !find(usedContentTypeEntitiesOfSameType, uctItem => item.id === uctItem.id); 
-    })
-    .map((item) => ({
-      value: item.id,
-      label: appendLabelPublicationStatus(
-          extractRelatedItemLabel({
-          ...item,
-          __collectionName: get(relatedTypeSelectValue, 'value', relatedTypeSelectValue),
-        }, contentTypesNameFields, { contentTypes }), 
-        item
-      ),
-    }));
-
-  const isExternal = form.type === navigationItemType.EXTERNAL;
-  const pathSourceName = isExternal ? 'externalPath' : 'path';
-
-  const audience = get(form, `${inputsPrefix}audience`, []);
-  const audienceOptions = availableAudience.map((item) => ({
-    value: item.id,
-    label: item.name,
-  }));
-
-  const submitDisabled = (form.type !== navigationItemType.EXTERNAL) && isNil(form.related);
-
-  const generatePreviewPath = () => {
-    if (!isExternal && data.levelPath) {
-      return (
-        <Text fontSize="sm" color="grey">
-          <FontAwesomeIcon icon={faEye} />{' '}
-          {formatMessage(getTrad('popup.item.form.path.preview'))}{' '}
-          {data.levelPath !== '/' ? `${data.levelPath}` : ''}/{form.path}
-        </Text>
-      );
-    }
-    return null;
-  };
-
-  const debouncedSearch = useCallback(
-    debounce(nextValue => setContentTypeSearchQuery(nextValue), 500),
-		[],
-	);
-
-	const debounceContentTypeSearchQuery = value => {
-    setContentTypeSearchInputValue(value);
-		debouncedSearch(value);
-	};
-
-  const thereAreNoMoreContentTypes =  isEmpty(relatedSelectOptions) && !contentTypeSearchQuery;
-
-  useEffect(
-    () => {
-      const value = get(relatedSelectOptions, '0');
-      if (isSingleSelected && relatedSelectOptions.length === 1 && !isEqual(value, relatedSelectValue)) {
-        onChange({ target: { name: relatedFieldName, value} });
-      }
-    },
-    [isSingleSelected, relatedSelectOptions],
-  );
-
-  useEffect(() => {
-    const { value } = relatedType || {};
-    const fetchContentTypeEntities = async () => {
-      if (value) {
-        const item = find(
-          contentTypes,
-          (_) => _.uid === value,
-        );
-        if (item) {
-          await getContentTypeEntities({ 
-            type: item.endpoint || item.collectionName,
-            query: contentTypeSearchQuery,
-          }, item.plugin);
-        }
-      }
-    };
-    fetchContentTypeEntities();
-  }, [relatedType, contentTypeSearchQuery]);
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <ModalForm>
-        <ModalBody>
-          <section className="col-12">
-            <div className="row">
-              <div className="col-lg-9 col-md-12">
-                <Input
-                  autoFocus
-                  error={get(formErrors, `${inputsPrefix}title`)}
-                  label={getTradId('popup.item.form.title.label')}
-                  name={`${inputsPrefix}title`}
-                  onChange={onChange}
-                  placeholder={!isExternal ? getTradId('popup.item.form.title.placeholder') : ''}
-                  type="text"
-                  validations={{ required: true }}
-                  value={get(form, `${inputsPrefix}title`, '')}
-                />
-              </div>
-              <div className="col-lg-3 col-md-12">
-                <Flex alignItems="flex-start" flexWrap="wrap">
-                  <Label
-                    htmlFor={`${inputsPrefix}menuAttached`}
-                    style={{ display: 'block' }}
-                    message={formatMessage(getTrad('popup.item.form.menuAttached.label'))}
-                  />
-                  <Toggle
-                    name={`${inputsPrefix}menuAttached`}
-                    onChange={onChange}
-                    disabled={!(data.isMenuAllowedLevel && data.parentAttachedToMenu)}
-                    value={get(form, `${inputsPrefix}menuAttached`, false)}
-                  />
-                </Flex>
-              </div>
-            </div>
-            <div className="row">
-              <div className="col-lg-7 col-md-12">
-                <Input
-                  error={get(formErrors, `${inputsPrefix}${pathSourceName}`)}
-                  label={getTradId(`popup.item.form.${pathSourceName}.label`)}
-                  name={`${inputsPrefix}${pathSourceName}`}
-                  onChange={onChange}
-                  placeholder={getTradId(`popup.item.form.${pathSourceName}.placeholder`)}
-                  description={generatePreviewPath()}
-                  type="text"
-                  validations={{ required: true }}
-                  value={get(form, `${inputsPrefix}${pathSourceName}`, '')}
-                />
-              </div>
-              <div className="col-lg-5 col-md-12">
-                <Label
-                  htmlFor={`${inputsPrefix}type`}
-                  message={formatMessage(getTrad('popup.item.form.type.label'))}
-                />
-                <Enumeration
-                  name={`${inputsPrefix}type`}
-                  onChange={onChange}
-                  options={typeSelectOptions}
-                  value={typeSelectValue}
-                />
-              </div>
-            </div>
-            {additionalFields.includes(navigationItemAdditionalFields.AUDIENCE) && (<div className="row">
-              <div className="col-lg-12">
-                <Label
-                  htmlFor={`${inputsPrefix}audience`}
-                  message={formatMessage(getTrad('popup.item.form.audience.label'))}
-                />
-                <Select
-                  name={`${inputsPrefix}audience`}
-                  onChange={onChange}
-                  options={audienceOptions}
-                  isMulti={true}
-                  value={audience}
-                />
-              </div>
-            </div>)}
-            {!isExternal && (
-              <>
-                <div className="row">
-                  <div className="col-lg-12">
-                    <hr />
-                    <Label
-                      message={formatMessage(getTrad('popup.item.form.relatedSection.label'))}
-                    />
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-lg-6 col-md-12">
-                    <Label
-                      htmlFor={`${inputsPrefix}relatedType`}
-                      message={formatMessage(getTrad('popup.item.form.relatedType.label'))}
-                    />
-                    <Select
-                      name={`${inputsPrefix}relatedType`}
-                      error={get(formErrors, `${inputsPrefix}relatedType`)}
-                      onChange={onChangeRelatedType}
-                      options={relatedTypeSelectOptions}
-                      value={relatedTypeSelectValue}
-                    />
-                  </div>
-                  {relatedTypeSelectValue && !isSingleSelected && (
-                    <div className="col-lg-6 col-md-12">
-                      <Label
-                        htmlFor={relatedFieldName}
-                        message={formatMessage(getTrad('popup.item.form.related.label'))}
-                      />
-                      <Select
-                        name={relatedFieldName}
-                        error={get(formErrors, relatedFieldName)}
-                        onChange={onChange}
-                        onInputChange={debounceContentTypeSearchQuery}
-                        inputValue={contentTypeSearchInputValue}
-                        isLoading={isLoading}
-                        options={relatedSelectOptions}
-                        value={relatedSelectValue}
-                      />
-                      {!isLoading && thereAreNoMoreContentTypes && (
-                        <Text
-                          color="orange"
-                          fontSize="sm"
-                        >
-                          <FontAwesomeIcon icon={faInfoCircle} />{' '}
-                          {formatMessage(getTrad('popup.item.form.related.empty'), { contentTypeName: get(relatedTypeSelectValue, 'label') })}
-                        </Text>)}
-                    </div>
-                  )}
-                </div>
-              </>
-            )}
-          </section>
-        </ModalBody>
-      </ModalForm>
-      <ModalFooter>
-        <section>
-          <Button
-            onClick={handleRemove}
-            color="delete"
-            label={formatMessage(getTrad('popup.item.form.button.remove'))}
-          />
-        </section>
-        <section>
-          <ButtonModal
-            onClick={handleSubmit}
-            disabled={submitDisabled}
-            message={getTradId(`popup.item.form.button.${
-              form.viewId ? 'update' : 'create'
-            }`)}
-          />
-        </section>
-      </ModalFooter>
-    </form>
-  );
-};
-
-NavigationItemForm.defaultProps = {
-  fieldsToDisable: [],
-  formErrors: {},
-  inputsPrefix: '',
-  onSubmit: (e) => e.preventDefault(),
-  requestError: null,
-};
-
-NavigationItemForm.propTypes = {
-  isLoading: PropTypes.bool,
-  fieldsToDisable: PropTypes.array,
-  formErrors: PropTypes.object.isRequired,
-  inputsPrefix: PropTypes.string,
-  data: PropTypes.object.isRequired,
-  onSubmit: PropTypes.func,
-  requestError: PropTypes.object,
-  contentTypes: PropTypes.array,
-  contentTypeEntities: PropTypes.array,
-  usedContentTypeEntities: PropTypes.array,
-  availableAudience: PropTypes.array,
-  additionalFields: PropTypes.array,
-  getContentTypeEntities: PropTypes.func.isRequired,
-  appendLabelPublicationStatus: PropTypes.func,
-};
-
-export default NavigationItemForm;

package/admin/src/containers/View/components/NavigationItemPopup/MediumPopup.js

@@ -1,6 +0,0 @@
-import styled from "styled-components";
-const { Modal } = require("strapi-helper-plugin");
-
-export const MediumPopup = styled(Modal)`
-    width: 72rem;
-`;