antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

implemented new tag schema

Browse Source
This commit is contained in:
Anton Tranelis 2024-02-01 11:57:11 +01:00
parent 94878958c5
commit a5baa8f39d
8 changed files with 22 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/Input/TextAreaInput.tsx
View File

@ -32,7 +32,7 @@ export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyl
let values: KeyValue[] = [];
tags.map(tag => {
values.push({ key: tag.id, value: tag.id, color: tag.color })
values.push({ key: tag.name, value: tag.name, color: tag.color })
})
var tribute = new Tribute({

8
src/Components/Map/Layer.tsx
View File

@ -122,7 +122,7 @@ export const Layer = ({
addTag(newtag);
setNewTagsToAdd(current =>
current.filter(tag => {
return tag.id !== newtag.id;
return tag.name !== newtag.name;
}),
)
})
@ -135,7 +135,7 @@ export const Layer = ({
items.
filter(item => item.layer?.name === name)?.
filter(item =>
filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.id.toLocaleLowerCase() === tag.id.toLocaleLowerCase())))?.
filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
filter(item => item.layer && isLayerVisible(item.layer)).
map((item: Item) => {
if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) {
@ -152,8 +152,8 @@ export const Layer = ({
}
if(allTagsLoaded) {
item[itemTextField].toLocaleLowerCase().match(hashTagRegex)?.map(tag=> {
if ((!tags.find((t) => t.id.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase()))&& !newTagsToAdd.find((t) => t.id.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
const newTag = {id: tag.slice(1).toLocaleLowerCase(), color: randomColor()};
if ((!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase()))&& !newTagsToAdd.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
const newTag = {id: crypto.randomUUID(), name: tag.slice(1).toLocaleLowerCase(), color: randomColor()};
setNewTagsToAdd(current => [...current, newTag]);
}
});

6
src/Components/Map/Subcomponents/Controls/SearchControl.tsx
View File

@ -61,7 +61,7 @@ export const SearchControl = ({ clusterRef }) => {
if (item.layer?.itemTextField) item.text = getValue(item, item.layer.itemTextField)
return item.name?.toLowerCase().includes(value.toLowerCase()) || item.text?.toLowerCase().includes(value.toLowerCase())
}))
setTagsResults(tags.filter(tag => tag.id?.toLowerCase().includes(value.toLowerCase())))
setTagsResults(tags.filter(tag => tag.name?.toLowerCase().includes(value.toLowerCase())))
}, 500, [value]);
@ -93,11 +93,11 @@ export const SearchControl = ({ clusterRef }) => {
{tagsResults.length > 0 &&
<div className='tw-flex tw-flex-wrap tw-max-h-16 tw-overflow-hidden tw-min-h-[32px]'>
{tagsResults.map(tag => (
<div key={tag.id} className='tw-rounded-2xl tw-text-white tw-p-1 tw-px-4 tw-shadow-md tw-card tw-mr-2 tw-mb-2 tw-cursor-pointer' style={{ backgroundColor: tag.color }} onClick={() => {
<div key={tag.name} className='tw-rounded-2xl tw-text-white tw-p-1 tw-px-4 tw-shadow-md tw-card tw-mr-2 tw-mb-2 tw-cursor-pointer' style={{ backgroundColor: tag.color }} onClick={() => {
addFilterTag(tag)
window.history.pushState({}, "", `/`)
}}>
<b>#{capitalizeFirstLetter(tag.id)}</b>
<b>#{capitalizeFirstLetter(tag.name)}</b>
</div>
))}
</div>

2
src/Components/Map/Subcomponents/Controls/TagsControl.tsx
View File

@ -13,7 +13,7 @@ export const TagsControl = () => {
<div key={tag.id} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mr-2 tw-mb-2' style={{ backgroundColor: tag.color }}>
<div className="tw-card-actions tw-justify-end">
<label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (removeFilterTag(tag.id))}>✕</label>
</div><b>#{capitalizeFirstLetter(tag.id)}</b>
</div><b>#{capitalizeFirstLetter(tag.name)}</b>
</div>
)
}

4
src/Components/Map/Subcomponents/ItemFormPopup.tsx
View File

@ -57,8 +57,8 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
setSpinner(true);
formItem.text && formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag=> {
if (!tags.find((t) => t.id.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
addTag({id: tag.slice(1).toLocaleLowerCase(), color: randomColor()})
if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
addTag({id: crypto.randomUUID(), name: tag.slice(1).toLocaleLowerCase(), color: randomColor()})
}
});

4
src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
View File

@ -92,7 +92,7 @@ export const TextView = ({ item, truncate = false}: { item?: Item, truncate?: bo
return (
<a
style={{ color: tag ? tag.color : '#faa', fontWeight: 'bold', cursor: 'pointer' }}
key={tag ? tag.id + item!.id : item.id}
key={tag ? tag.name + item!.id : item.id}
onClick={(e) => {
e.stopPropagation();
addFilterTag(tag!);
@ -123,7 +123,7 @@ export const TextView = ({ item, truncate = false}: { item?: Item, truncate?: bo
);
}
if (href?.startsWith("#")) {
const tag = tags.find(t => t.id.toLowerCase() == decodeURI(href).slice(1).toLowerCase())
const tag = tags.find(t => t.name.toLowerCase() == decodeURI(href).slice(1).toLowerCase())
return <CustomHashTagLink tag={tag} item={item}>{children}</CustomHashTagLink>;
} else {
return (

33
src/Components/Map/hooks/useTags.tsx
View File

@ -13,7 +13,6 @@ type UseTagManagerResult = ReturnType<typeof useTagsManager>;
const TagContext = createContext<UseTagManagerResult>({
tags: [],
addTag: () => { },
removeTag: () => { },
setTagApi: () => { },
setTagData: () => { },
getItemTags: () => [],
@ -23,7 +22,6 @@ const TagContext = createContext<UseTagManagerResult>({
function useTagsManager(initialTags: Tag[]): {
tags: Tag[];
addTag: (tag: Tag) => void;
removeTag: (id: string) => void;
setTagApi: (api: ItemsApi<Tag>) => void;
setTagData: (data: Tag[]) => void;
getItemTags: (item: Item) => Tag[];
@ -36,16 +34,13 @@ function useTagsManager(initialTags: Tag[]): {
switch (action.type) {
case "ADD":
const exist = state.find((tag) =>
tag.id.toLocaleLowerCase() === action.tag.id.toLocaleLowerCase() ? true : false
tag.id === action.tag.id ? true : false
);
if (!exist) return [
...state,
{ ...action.tag, id: action.tag.id.toLocaleLowerCase() }
{ ...action.tag}
];
else return state;
case "REMOVE":
return state.filter(({ id }) => id !== action.id.toLocaleLowerCase());
default:
throw new Error();
}
@ -58,7 +53,7 @@ function useTagsManager(initialTags: Tag[]): {
const result = await api.getItems();
if (result) {
result.map(tag => {
tag.id = tag.id.toLocaleLowerCase();
tag.name = tag.name.toLocaleLowerCase();
dispatch({ type: "ADD", tag })
})
setallTagsLoaded(true);
@ -67,7 +62,7 @@ function useTagsManager(initialTags: Tag[]): {
const setTagData = useCallback((data: Tag[]) => {
data.map(tag => {
tag.id = tag.id.toLocaleLowerCase();
tag.name = tag.name.toLocaleLowerCase();
dispatch({ type: "ADD", tag })
})
}, []);
@ -77,33 +72,26 @@ function useTagsManager(initialTags: Tag[]): {
type: "ADD",
tag,
});
if (!tags.some((t) => t.id.toLocaleLowerCase() === tag.id.toLocaleLowerCase())) {
if (!tags.some((t) => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())) {
api?.createItem && api.createItem(tag);
}
};
const removeTag = useCallback((id: string) => {
dispatch({
type: "REMOVE",
id,
});
api?.deleteItem && api.deleteItem(id);
}, []);
const getItemTags = useCallback((item: Item) => {
const text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : undefined;
const itemTagStrings = text?.toLocaleLowerCase().match(hashTagRegex);
const itemTags: Tag[] = [];
itemTagStrings?.map(tag => {
if (tags.find(t => t.id === tag.slice(1))) {
itemTags.push(tags.find(t => t.id === tag.slice(1))!)
if (tags.find(t => t.name === tag.slice(1))) {
itemTags.push(tags.find(t => t.name === tag.slice(1))!)
}
})
return itemTags
}, [tags]);
return { tags, addTag, removeTag, setTagApi, setTagData, getItemTags, allTagsLoaded };
return { tags, addTag, setTagApi, setTagData, getItemTags, allTagsLoaded };
}
export const TagsProvider: React.FunctionComponent<{
@ -124,11 +112,6 @@ export const useAddTag = (): UseTagManagerResult["addTag"] => {
return addTag;
};
export const useRemoveTag = (): UseTagManagerResult["removeTag"] => {
const { removeTag } = useContext(TagContext);
return removeTag;
};
export const useSetTagApi = (): UseTagManagerResult["setTagApi"] => {
const { setTagApi } = useContext(TagContext);
return setTagApi;

1
src/types.ts
View File

@ -70,6 +70,7 @@ export class Geometry {
export interface Tag {
color: string;
id: string;
name: string;
}
export interface ItemsApi<T> {