From 74d6b82787a17804ab0500fd1302b4c469cda337 Mon Sep 17 00:00:00 2001 From: Jake Turner <52841588+jakeaturner@users.noreply.github.com> Date: Thu, 19 Oct 2023 17:03:41 -0700 Subject: [PATCH] Llad 2 (#141) * fix(AssetTags): [wip] asset tag keys * feat(AssetTags): separate AssetTagKeys to separate collection * fix(AssetTags): type errors --- client/src/api.ts | 4 +- .../src/components/FilesManager/EditFile.tsx | 50 ++- .../FilesManager/RenderAssetTags.tsx | 44 ++- .../FilesManager/RenderTagInput.tsx | 9 +- .../AssetTagsManager/ManageFrameworkModal.tsx | 31 +- client/src/types/AssetTagging.ts | 106 ++++--- client/src/types/index.ts | 8 + client/src/utils/typeHelpers.ts | 13 +- server/api/assettagframeworks.ts | 69 ++++- server/api/assettagging.ts | 28 +- server/api/dev_asset_tag_key_frames.json | 209 +++++++++++++ server/api/development.assettagkeys.csv | 24 ++ server/api/temp_asset_tag_key_frames.json | 289 ++++++++++++++++++ server/models/assettag.ts | 10 +- server/models/assettagkey.ts | 45 +++ server/models/assettagtemplate.ts | 7 +- server/models/file.ts | 1 - server/package-lock.json | 14 +- server/package.json | 2 +- server/util/assettaggingutils.ts | 19 ++ server/util/projectutils.ts | 20 +- server/util/typeHelpers.ts | 11 + 22 files changed, 911 insertions(+), 102 deletions(-) create mode 100644 server/api/dev_asset_tag_key_frames.json create mode 100644 server/api/development.assettagkeys.csv create mode 100644 server/api/temp_asset_tag_key_frames.json create mode 100644 server/models/assettagkey.ts create mode 100644 server/util/assettaggingutils.ts diff --git a/client/src/api.ts b/client/src/api.ts index d9563868..51daa382 100644 --- a/client/src/api.ts +++ b/client/src/api.ts @@ -1,6 +1,6 @@ import axios from "axios"; import AuthHelper from "./components/util/AuthHelper"; -import { AssetTagFramework, Book, ConductorBaseResponse, Homework, Project, ProjectFile, User } from "./types"; +import { AssetTagFramework, AssetTagFrameworkWithKeys, Book, ConductorBaseResponse, Homework, Project, ProjectFile, User } from "./types"; import { ProjectFileWProjectID } from "./types/Project"; /** @@ -40,7 +40,7 @@ class API { const res = await axios.get<{ err: boolean; errMsg?: string; - framework: AssetTagFramework; + framework: AssetTagFrameworkWithKeys }>(`/assettagframeworks/${id}`); return res; } diff --git a/client/src/components/FilesManager/EditFile.tsx b/client/src/components/FilesManager/EditFile.tsx index 69743152..93755bd3 100644 --- a/client/src/components/FilesManager/EditFile.tsx +++ b/client/src/components/FilesManager/EditFile.tsx @@ -19,8 +19,8 @@ import SelectFramework from "./SelectFramework"; import api from "../../api"; import { getInitValueFromTemplate } from "../../utils/assetHelpers"; import { RenderTagInput } from "./RenderTagInput"; -import { AssetTagTemplate, AssetTagValue } from "../../types/AssetTagging"; -import { isAssetTagFramework } from "../../utils/typeHelpers"; +import { AssetTagTemplate, AssetTagValue, AssetTagWithKey } from "../../types/AssetTagging"; +import { isAssetTagFramework, isAssetTagKeyObject } from "../../utils/typeHelpers"; interface EditFileModalProps extends ModalProps { show: boolean; @@ -95,7 +95,18 @@ const EditFile: React.FC = ({ } const fileData = res.data.files[res.data.files.length - 1]; // Target file should be last in array - reset(fileData); + const parsedExistingTags: AssetTag[] = fileData.tags?.map( + (t: AssetTagWithKey) => { + return { + ...t, + key: t.key.title, + }; + } + ); + reset({ + ...fileData, + tags: parsedExistingTags, + }); setIsFolder(fileData.storageType !== "file"); } catch (err) { handleGlobalError(err); @@ -145,7 +156,19 @@ const EditFile: React.FC = ({ throw new Error(res.data.errMsg); } - setSelectedFramework(res.data.framework); + const parsed: AssetTagTemplate[] = res.data.framework.templates.map( + (t) => { + return { + ...t, + key: t.key.title, + }; + } + ); + + setSelectedFramework({ + ...res.data.framework, + templates: parsed, + }); genTagsFromFramework(); } catch (err) { handleGlobalError(err); @@ -164,7 +187,12 @@ const EditFile: React.FC = ({ if (existingTags && existingTags.length > 0) { filtered = selectedFramework.templates.filter( - (t) => !existingTags.find((tag) => tag.title === t.title) + (t) => !existingTags.find((tag) => { + if(isAssetTagKeyObject(tag.key)){ + return tag.key.title === t.key + } + return tag.key === t.key + }) ); } else { filtered = selectedFramework.templates; @@ -172,7 +200,7 @@ const EditFile: React.FC = ({ filtered.forEach((t) => { addTag({ - title: t.title, + key: t.key, value: getInitValueFromTemplate(t), framework: selectedFramework, }); @@ -180,11 +208,11 @@ const EditFile: React.FC = ({ } function addTag({ - title, + key, value, framework, }: { - title?: string; + key?: string; value?: AssetTagValue; framework?: AssetTagFramework; }) { @@ -192,7 +220,7 @@ const EditFile: React.FC = ({ append( { uuid: crypto.randomUUID(), // Random UUID for new tags, will be replaced with real UUID server-side on save - title: title ?? "", + key: key ?? "", value: value ?? "", framework: framework ?? undefined, isDeleted: false, @@ -254,7 +282,7 @@ const EditFile: React.FC = ({ {tag.framework ? (
-

{tag.title}

+

{isAssetTagKeyObject(tag.key) ? tag.key.title : tag.key}

{/* {isAssetTagFramework(tag.framework) && (
) : ( diff --git a/client/src/components/FilesManager/RenderAssetTags.tsx b/client/src/components/FilesManager/RenderAssetTags.tsx index f8b2b41b..007720d1 100644 --- a/client/src/components/FilesManager/RenderAssetTags.tsx +++ b/client/src/components/FilesManager/RenderAssetTags.tsx @@ -1,36 +1,50 @@ import { Label } from "semantic-ui-react"; import { AssetTag, ProjectFile } from "../../types"; import { truncateString } from "../util/HelperFunctions"; -import { SemanticCOLORSArray } from "../../utils/misc"; +import { isAssetTagKeyObject } from "../../utils/typeHelpers"; const RenderAssetTags: React.FC<{ file: ProjectFile }> = ({ file }) => { + const sortedTags = file.tags?.sort((a, b) => { + if (isAssetTagKeyObject(a.key) && isAssetTagKeyObject(b.key)) { + return a.key.title.localeCompare(b.key.title); + } + return 0; + }); + function getLabelValue(tag: AssetTag) { - const text = tag.title + ": " + tag.value.toString(); + const title = isAssetTagKeyObject(tag.key) ? tag.key.title : tag.key; + const text = title + ": " + tag.value.toString(); const truncated = truncateString(text, 20); return truncated; } - // Get a random color from SemanticCOLORSArray - function getLabelColor() { - // Remove grey from the array, reserve it for the "more" truncation label - const colors = SemanticCOLORSArray.filter((color) => color !== "grey"); - const randomElement = - colors[ - Math.floor(Math.random() * colors.length) - ]; - return randomElement; + function getLabelColor(tag: AssetTag) { + if(tag.key && isAssetTagKeyObject(tag.key)) { + return tag.key.hex; + } + return "grey"; } return (
- {file.tags?.slice(0, 5).map((tag) => ( -