Soroka 171 Layout and connection of entities

src/components/properties/EntityCardProperty/EntityCardProperty.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+import { Form } from 'react-bootstrap'
+import { useIntl, FormattedMessage } from 'react-intl'
+import { EntityCardPropertyProps } from 'stores/propertiesStore'
+import { cardStore } from 'stores/rootStore'
+import { USER_ROLES } from 'utils/constants'
+import './EntityCardPropertyStyles.css'
+
+const EntityCardProperty = ({ value, onChange, showHelp = false }: EntityCardPropertyProps) => {
+    const intl = useIntl()
+    const [isEntity, setIsEntity] = useState(value.isEntity)
+    const [showInAllOrganizations, setShowInAllOrganizations] = useState(value.showInAllOrganizations)
+
+    useEffect(() => {
+        onChange({ isEntity, showInAllOrganizations })
+    }, [showInAllOrganizations, isEntity])
+
+    useEffect(() => {
+        if (isEntity === false) {
+            setShowInAllOrganizations(false)
+        }
+    }, [isEntity])
+
+    return (
+        <div className="entity-property__wrap">
+            <Form.Check
+                type="checkbox"
+                id="isEntityCheckbox"
+                label={intl.formatMessage({ id: 'isEntityLabel' })}
+                checked={isEntity}
+                onChange={() => setIsEntity((prev) => !prev)}
+            />
+            {cardStore.userRole === USER_ROLES.admin && (
+                <Form.Check
+                    type="checkbox"
+                    id="showInAllOrganizationsCheckbox"
+                    label={intl.formatMessage({ id: 'showInAllOrganizationsLabel' })}
+                    checked={showInAllOrganizations}
+                    onChange={() => setShowInAllOrganizations((prev) => !prev)}
+                    disabled={!isEntity}
+                />
+            )}
+
+            {showHelp && (
+                <div className="entity-property__help">
+                    <FormattedMessage
+                        id="entityHelp"
+                        values={{
+                            p: (chunks) => <p>{chunks}</p>,
+                            ul: (chunks) => <ul>{chunks}</ul>,
+                            li: (chunks) => <li>{chunks}</li>
+                        }}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default EntityCardProperty

src/components/properties/EntityCardProperty/EntityCardPropertyStyles.css

@@ -0,0 +1,8 @@
+.entity-property__wrap {
+    width: 100%;
+    padding: 1rem;
+}
+
+.entity-property__help {
+    margin-top: 1rem
+}

src/lang/en.ts

@@ -152,7 +152,17 @@ const English = {
 
     peterTravelPoint: "Great Peter's embassy point",
     museum: 'Museum',
-    book: 'Book'
+    book: 'Book',
+
+    isEntityLabel: 'Suggest this card as an entity',
+    showInAllOrganizationsLabel: 'Show in all organizations',
+    entityHelp:
+        '<p>Please note: deleting a card or unchecking an entity will only be possible if </p><ul><li>No one uses this card as their entity</li><li>Or the card has a parent entity (then after deletion we will replace it in all cards on the parent)</li></ul>',
+    selectEntity: 'Select entity',
+    selectParentEntityValidationMessage: '<p>Only cards with the property "entity" may not have a parent entity</p>',
+    selectParentEntityTooltip:
+        '<p>An entity is what a card is in the real world.</p><p>If the options in the list are too abstract, you can create any card, add the “Entity Card” property to it, and it will appear in this list .</p><p>If you want other organizations to use such an entity, you can add the “global card” property</p><p>Only entity cards can not have a parent entity.</p>',
+    selectEntityCaption: '<p>Entity</p><span>*</span>'
 }
 
 export default English

src/lang/ru.ts

@@ -153,7 +153,18 @@ const Russian = {
 
     peterTravelPoint: 'Точка в Посольствах Петра',
     museum: 'Музей',
-    book: 'Книга'
+    book: 'Книга',
+
+    isEntityLabel: 'Предлагать эту карточку как сущность',
+    showInAllOrganizationsLabel: 'Показывать во всех организациях',
+    entityHelp:
+        '<p>Обратите внимание: удалить карточку или снять отметку сущности будет возможно только если </p><ul><li>Никто не использует эту карточку как свою сущность</li><li>Или у карточки есть родительская сущность (тогда после удаления мы заменим её во всех карточках на родительскую)</li></ul>',
+    selectEntity: 'Выберите сущность',
+    selectParentEntityValidationMessage:
+        '<p>Только карточки со свойство "сущность" могут не иметь родительской сущности</p>',
+    selectParentEntityTooltip:
+        '<p>Сущность — это то, чем является карточка в реальном мире.</p><p>Если в списке слишком абстрактные варианты, вы можете создатьлюбую карточку, добавить к ней свойство “Карточка-сущность” и она появится в этом списке.</p><p>Если вы захотите, чтобы и другие организации пользовались такой сущностью — вы можете добавить свойство “глобальная карточка”</p><p>Только карточки-сущности могут не иметь родительской сущности.</p>',
+    selectEntityCaption: '<p>Сущность</p><span>*</span>'
 }
 
 export default Russian

src/stores/propertiesStore.tsx

@@ -13,8 +13,9 @@ import { DateItemData } from 'components/properties/DateProperty/DateInput'
 import MeasurementsProperty, {
     MeasurementsValue
 } from 'components/properties/MeasurementsProperty/MeasurementsProperty'
-import MediaProperty from 'components/properties/MediaProperty/MediaProperty'
+// import MediaProperty from 'components/properties/MediaProperty/MediaProperty'
 import UploadedFileData from 'components/properties/MediaProperty/UploadedFileData'
+import EntityCardProperty from 'components/properties/EntityCardProperty/EntityCardProperty'
 
 export type Property = {
     propertyId: number
@@ -64,6 +65,17 @@ export type MeasurementsPropertyProps = {
     onChange: (value: MeasurementsValue) => void
 }
 
+type EntityCardPropertyValue = {
+    isEntity: boolean
+    showInAllOrganizations: boolean
+}
+
+export type EntityCardPropertyProps = {
+    value: EntityCardPropertyValue
+    showHelp: boolean
+    onChange: (value: EntityCardPropertyValue) => void
+}
+
 export const TYPES: { [key: string]: any } = {
     TEXT: {
         renderForm: (props: TextPropertyProps) => <TextProperty {...props} />,
@@ -117,12 +129,22 @@ export const TYPES: { [key: string]: any } = {
         hasHelp: true,
         parseAs: 'json'
     },
+    // FILE: {
+    //     renderForm: (props: MediaPropertyProps) => <MediaProperty {...props} />,
+    //     formatToApi: (value: MediaPropertyProps['value']) => value,
+    //     defaultData: {
+    //         files: [],
+    //         main: null
+    //     },
+    //     hasHelp: true,
+    //     parseAs: 'json'
+    // },
     FILE: {
-        renderForm: (props: MediaPropertyProps) => <MediaProperty {...props} />,
-        formatToApi: (value: MediaPropertyProps['value']) => value,
+        renderForm: (props: EntityCardPropertyProps) => <EntityCardProperty {...props} />,
+        formatToApi: (value: EntityCardPropertyValue) => value,
         defaultData: {
-            files: [],
-            main: null
+            isEntity: false,
+            showInAllOrganizations: false
         },
         hasHelp: true,
         parseAs: 'json'
@@ -136,6 +158,16 @@ export const TYPES: { [key: string]: any } = {
         },
         hasHelp: true,
         parseAs: 'json'
+    },
+    ENTITY: {
+        renderForm: (props: EntityCardPropertyProps) => <EntityCardProperty {...props} />,
+        formatToApi: (value: EntityCardPropertyValue) => value,
+        defaultData: {
+            isEntity: false,
+            showInAllOrganizations: false
+        },
+        hasHelp: true,
+        parseAs: 'json'
     }
 }
 
@@ -164,6 +196,7 @@ const STORAGE_ID = 'storage'
 const TAGS_ID = 'tags'
 const URL_ID = 'url'
 const SIZE_ID = 'size'
+const ENTITY_ID = 'entity'
 
 const PROPERTIES: { [key: string]: any } = {
     [ADDRESS_ID]: {
@@ -309,6 +342,12 @@ const PROPERTIES: { [key: string]: any } = {
         renderAdd() {
             return <FormattedMessage id={this.labelId} />
         }
+    },
+    [ENTITY_ID]: {
+        labelId: 'entity',
+        renderAdd() {
+            return <FormattedMessage id={this.labelId} />
+        }
     }
 }
 

src/views/dashboard/CardAdminControls.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { Form } from 'react-bootstrap'
+import { Form, InputGroup, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { FormattedMessage } from 'react-intl'
 import { observer } from 'mobx-react'
 import organizationsAPI from 'api/organizations'
 import { useStore } from 'stores/rootStore'
+import { InfoCircle } from 'react-bootstrap-icons'
+import './CardPage.css'
 
 type Owner = {
     name: string
@@ -24,8 +26,66 @@ const CardAdminControls = observer(() => {
         setOwners([])
     }
 
+    const handleParentEntityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        console.log(event.target.value)
+    }
+
     return (
         <>
+            <div>
+                <FormattedMessage
+                    id="selectEntityCaption"
+                    values={{
+                        p: (chunks) => <p style={{ margin: '0 0 0.8rem 0', display: 'contents' }}>{chunks}</p>,
+                        span: (chunks) => <sup>{chunks}</sup>
+                    }}
+                />
+                <InputGroup>
+                    <InputGroup.Text>
+                        <OverlayTrigger
+                            placement="bottom"
+                            overlay={(props) => (
+                                <Tooltip {...props}>
+                                    <FormattedMessage
+                                        id="selectParentEntityTooltip"
+                                        values={{
+                                            p: (chunks) => <p>{chunks}</p>
+                                        }}
+                                    />
+                                </Tooltip>
+                            )}>
+                            <InfoCircle size={18} />
+                        </OverlayTrigger>
+                    </InputGroup.Text>
+                    <Form.Select
+                        id="selectParentEntity"
+                        value="selectParentEntity"
+                        onChange={(e) => {
+                            handleParentEntityChange(e)
+                        }}>
+                        <option value="selectParentEntity" disabled>
+                            <FormattedMessage id="selectEntity" />
+                        </option>
+                    </Form.Select>
+                    <FormattedMessage
+                        id="selectParentEntityValidationMessage"
+                        values={{
+                            p: (chunks) => (
+                                <p style={{ color: 'red', fontSize: '0.7rem', marginTop: '0.5rem', marginBottom: 0 }}>
+                                    {chunks}
+                                </p>
+                            )
+                        }}
+                    />
+                </InputGroup>
+            </div>
+            <hr
+                style={{
+                    height: '2px',
+                    marginTop: '0.5rem',
+                    marginBottom: '0.5rem'
+                }}
+            />
             <Form.Group className="mb-2">
                 <Form.Check
                     id={'preventDeletion'}

src/views/dashboard/CardPage.css

@@ -1,4 +1,9 @@
 .create-new-card__new-property,
 .create-new-card__new-property:not(.cursor-not-allowed) > * {
     cursor: pointer;
+}
+
+.tooltip-inner {
+    max-width: 400px !important;
+    text-align: start;
 }