daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-04 09:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extract shared breadcrumbs component

Browse Source
This commit is contained in:
Brandon Thomas committed 2022-01-03 06:12:14 -05:00
1 parent b5e78faef9
commit 61543da73f
2 files changed
+96 -76
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fakeyou/src/v2/view/_common/CategoryBreadcrumb.tsx
+92
View File
@@ -0,0 +1,92 @@
import { faChevronRight, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { TtsCategory } from '../../api/category/ListTtsCategories';
export interface Props {
// This is a list of categories in order: [grandparent/root, parent, child/leaf]
categoryHierarchy: TtsCategory[]
isCategoryMod: boolean,
}
export function CategoryBreadcrumb(props: Props) {
if (props.categoryHierarchy.length === 0) {
return null;
}
let parentCount = 0;
let hierarchyWarning = null;
let breadcrumbs = props.categoryHierarchy
.map((category, index) => {
let deletedWarning = null;
let notApprovedWarning = null;
let modelsNotAllowedWarning = null;
if (!!category.maybe_super_category_token) {
parentCount++;
}
if (!!category.category_deleted_at) {
deletedWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Deleted category
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
if (!category.is_mod_approved) {
notApprovedWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Not Mod Approved
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
const isLeaf = index === props.categoryHierarchy.length - 1;
if (isLeaf && !category.can_directly_have_models) {
modelsNotAllowedWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Models not directly allowed
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
return (
<> {category.name} {deletedWarning} {modelsNotAllowedWarning} {notApprovedWarning}</>
)
})
.reduce((acc, cur) => <>{acc} <FontAwesomeIcon icon={faChevronRight}/> {cur}</>)
if (props.isCategoryMod && parentCount !== props.categoryHierarchy.length - 1) {
hierarchyWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Bad parent category in chain
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
return (
<>
{hierarchyWarning} {breadcrumbs}
</>
)
}
fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx
+4 -76
View File
@@ -14,9 +14,8 @@ import { GravatarFc } from '../../_common/GravatarFc';
import { GetTtsModelUseCount } from '../../../api/tts/GetTtsModelUseCount';
import { BackLink } from '../../_common/BackLink';
import { ListTtsCategoriesForModel, ListTtsCategoriesForModelIsError, ListTtsCategoriesForModelIsOk, TtsModelCategory } from '../../../api/category/ListTtsCategoriesForModel';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
import { ListTtsCategories, ListTtsCategoriesIsError, ListTtsCategoriesIsOk, TtsCategory } from '../../../api/category/ListTtsCategories';
import { CategoryBreadcrumb } from '../../_common/CategoryBreadcrumb';
interface Props {
sessionWrapper: SessionWrapper,
@@ -293,7 +292,6 @@ function TtsModelViewFc(props: Props) {
if (showCategorySection) {
let modelCategories = null;
// TODO: Should be a shared component
if (assignedCategories.length !== 0) {
modelCategories = (
<>
@@ -305,81 +303,11 @@ function TtsModelViewFc(props: Props) {
assignedCategoriesByTokenMap,
category.category_token);
let breadcrumbs = <></>;
let parentCount = 0;
let hierarchyWarning = null;
if (categoryHierarchy.length !== 0) {
breadcrumbs = categoryHierarchy
.map((category, index) => {
let deletedWarning = null;
let notApprovedWarning = null;
let modelsNotAllowedWarning = null;
if (!!category.maybe_super_category_token) {
parentCount++;
}
if (!!category.category_deleted_at) {
deletedWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Deleted category
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
if (!category.is_mod_approved) {
notApprovedWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Not Mod Approved
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
const isLeaf = index === categoryHierarchy.length - 1;
if (isLeaf && !category.can_directly_have_models) {
modelsNotAllowedWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Models not directly allowed
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
return (
<> {category.name} {deletedWarning} {modelsNotAllowedWarning} {notApprovedWarning}</>
)
})
.reduce((acc, cur) => <>{acc} <FontAwesomeIcon icon={faChevronRight}/> {cur}</>)
}
if (isCategoryModerator && parentCount !== categoryHierarchy.length - 1) {
hierarchyWarning = (
<>
<span className="tag is-rounded is-warning is-medium is-light">
Bad parent category in chain
&nbsp;
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
</>
)
}
return (
<>
<li>{hierarchyWarning} {breadcrumbs}</li>
<li>
<CategoryBreadcrumb categoryHierarchy={categoryHierarchy} isCategoryMod={isCategoryModerator} />
</li>
</>
);
})}