Merge pull request #29 from Bill2015/develop-attribute-modify

Implement the attribute modify feature

src-tauri/src/modules/resource/application/command/resource_update_tag/mod.rs

@@ -4,11 +4,9 @@ use serde::Deserialize;
 
 use crate::command_from_dto;
 use crate::modules::resource::application::dto::ResourceTaggingAttrPayloadDto;
-use crate::modules::resource::domain::entities::TaggingAttrPayload;
 use crate::modules::resource::domain::{ResourceGenericError, ResourceID};
 use crate::modules::resource::repository::ResourceRepository;
 use crate::modules::common::application::ICommandHandler;
-use crate::modules::tag::domain::TagID;
 use crate::modules::tag::repository::TagRepository;
 
 mod dto;

src-tauri/src/modules/resource/application/dto/request.rs

@@ -8,7 +8,6 @@ pub enum ResourceTaggingAttrPayloadDto {
     None,
     Number(i64),
     Text(String),
-    Date(String),
     Bool(bool),
 }
 impl Into<TaggingAttrPayload> for ResourceTaggingAttrPayloadDto {
@@ -17,7 +16,6 @@ impl Into<TaggingAttrPayload> for ResourceTaggingAttrPayloadDto {
             Self::None => TaggingAttrPayload::None,
             Self::Number(val) => TaggingAttrPayload::Number(val),
             Self::Text(val) => TaggingAttrPayload::Text(val),
-            Self::Date(val) => TaggingAttrPayload::Date(val),
             Self::Bool(val) => TaggingAttrPayload::Bool(val),
         }
     }

src-tauri/src/modules/resource/domain/entities/restag.rs

@@ -15,8 +15,6 @@ pub enum TaggingAttrPayload {
 
     Text(String),
 
-    Date(String),
-
     Bool(bool),
 }
 
@@ -132,8 +130,8 @@ impl ResourceTaggingEntity {
                 Err(ResourceGenericError::InvalidTaggingAttribute())
             }
             TagAttrVO::Date { .. } => {
-                if let TaggingAttrPayload::Date(val) = payload {
-                    if let Ok(date) = dateutils::parse(val) {
+                if let TaggingAttrPayload::Text(val) = payload {
+                    if let Ok(date) = dateutils::parse(val.clone()) {
                         return Ok(ResourceTaggingAttrVO::Date(date.and_utc()));
                     }
                 }

src/pages/resource-add/components/AddPagePreviewSide.module.scss

@@ -3,6 +3,7 @@
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .carouselViewPort, .carouselContainer {

src/pages/resource-detail/ResourceDetailPage.tsx

@@ -9,6 +9,7 @@ import {
 import { useActiveCategoryRedux } from '@store/global';
 import { ModalName, useModelConfirmAction } from '@store/modal';
 import { ResourceMutation, ResourceQuery, ResourceUpdateDto } from '@api/resource';
+import { ErrorResBody } from '@api/common';
 import { ResourceDetailParam } from '@router/params';
 import { SubjectQuery } from '@api/subject';
 import { EditableText } from '@components/display';
@@ -148,11 +149,18 @@ export default function ResourcesDetailPage() {
                                         resourceRefetch();
                                     }}
                                     onUpdateTag={async (tag, attrVal) => {
-                                        await updateResourceTag.mutateAsync({
-                                            id:      resourceData.id,
-                                            tag_id:  tag.id,
-                                            attrval: attrVal,
-                                        });
+                                        try {
+                                            await updateResourceTag.mutateAsync({
+                                                id:      resourceData.id,
+                                                tag_id:  tag.id,
+                                                attrval: attrVal,
+                                            });
+                                            showNotification('Update Resource Successful', '', 'success');
+                                        }
+                                        catch (e) {
+                                            const error = e as ErrorResBody;
+                                            showNotification('Update Attribute Error', error.message, 'error');
+                                        }
                                         resourceRefetch();
                                     }}
                                 />

src/pages/resource-detail/components/ResourceTagPill.tsx

@@ -1,7 +1,11 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { useCallback, useState } from 'react';
+import millify from 'millify';
 import { ResourceTagAttrValDto, ResourceTagDto } from '@api/resource';
 import { EditableText } from '@components/display';
-import { Group, Pill, Text } from '@mantine/core';
-import millify from 'millify';
+import { TagAttrPayload } from '@api/tag';
+import { BoxProps, Group, Pill, Text } from '@mantine/core';
+import { EditableBool, EditableDate, EditableNumber } from './attributes';
 
 import classes from './ResourceTagPill.module.scss';
 
@@ -15,6 +19,75 @@ export interface ResourceTagPillProps {
 
 export function ResourceTagPill(props: ResourceTagPillProps) {
     const { tag, onRemoveTag, onUpdateTag } = props;
+    const [value, setValue] = useState<ResourceTagAttrValDto>(tag.attrval);
+
+    const renderAttributeField = useCallback(() => {
+        const baseProps: BoxProps & { name: string } = {
+            c:    'teal',
+            fz:   '0.8rem',
+            name: tag.name,
+        };
+
+        switch (tag.tag_type) {
+        case 'number': {
+            const attr = tag.attr as TagAttrPayload.Number;
+            return (
+                <EditableNumber
+                    {...baseProps}
+                    value={value as number}
+                    min={attr.start}
+                    max={attr.end}
+                    onChange={setValue}
+                    onEditFinished={(val, isEdited) => {
+                        if (isEdited) {
+                            onUpdateTag({ id: tag.id, name: tag.name }, val);
+                        }
+                    }}
+                />
+            );
+        }
+        case 'text': {
+            return (
+                <EditableText
+                    {...baseProps}
+                    value={value as string}
+                    onChange={setValue}
+                    onEditFinished={(val, isEdited) => {
+                        if (isEdited) {
+                            onUpdateTag({ id: tag.id, name: tag.name }, val);
+                        }
+                    }}
+                />
+            );
+        }
+        case 'date':
+            return (
+                <EditableDate
+                    {...baseProps}
+                    value={value as string}
+                    onChange={setValue}
+                    onEditFinished={(val, isEdited) => {
+                        if (isEdited) {
+                            onUpdateTag({ id: tag.id, name: tag.name }, val);
+                        }
+                    }}
+                />
+            );
+        case 'bool':
+            return (
+                <EditableBool
+                    {...baseProps}
+                    value={value as boolean}
+                    onChange={(val) => {
+                        setValue(val);
+                        onUpdateTag({ id: tag.id, name: tag.name }, val);
+                    }}
+                />
+            );
+        default:
+            break;
+        }
+    }, [onUpdateTag, tag, value]);
 
     return (
         <Pill
@@ -26,9 +99,9 @@ export function ResourceTagPill(props: ResourceTagPillProps) {
             <Group gap={3} align="baseline">
                 {tag.name}
                 {tag.attrval !== null && (
-                    <Group gap={0} align="baseline">
+                    <Group gap={0} align="baseline" style={{ cursor: 'pointer' }}>
                         <Text c="teal" fz="0.8rem">[</Text>
-                        <EditableText c="teal" fz="0.8rem" value={tag.attrval?.toString()} name="attr" onChange={(val) => onUpdateTag({ id: tag.id, name: tag.name }, val)} />
+                        {renderAttributeField()}
                         <Text c="teal" fz="0.8rem">]</Text>
                     </Group>
                 )}

src/pages/resource-detail/components/ResourceTagStack.tsx

@@ -21,10 +21,14 @@ export interface ResourceTagGroupProps {
     onRemoveTag: (tag: Pick<ResourceTagDto, 'id'|'name'>) => void;
 
     onUpdateTag: (tag: Pick<ResourceTagDto, 'id'|'name'>, attrVal: ResourceTagAttrValDto) => void;
+
 }
 
 export function ResourceTagGroup(props: ResourceTagGroupProps) {
-    const { subjectName, autoFocus, subjectId, tags, onSelectNewTag, onRemoveTag, onUpdateTag } = props;
+    const {
+        subjectName, autoFocus, subjectId, tags,
+        onSelectNewTag, onRemoveTag, onUpdateTag,
+    } = props;
     const selectRef = useRef<HTMLInputElement>(null);
     const [searchValue, setSearchValue] = useState<string>('');
     const [selectValue, setSelectValue] = useState<string>('');
@@ -48,7 +52,14 @@ export function ResourceTagGroup(props: ResourceTagGroupProps) {
         }
     };
 
-    const itemChip = tags.map((val) => <ResourceTagPill key={val.id} tag={val} onRemoveTag={onRemoveTag} onUpdateTag={onUpdateTag} />);
+    const itemChip = tags.map((val) => (
+        <ResourceTagPill
+            key={val.id + (val.attrval?.toString() ?? '')}
+            tag={val}
+            onRemoveTag={onRemoveTag}
+            onUpdateTag={onUpdateTag}
+        />
+    ));
 
     const selectableTags = useMemo(() => subjectTags
         .filter((tag) => !tags.find((obj) => obj.id === tag.id)), [tags, subjectTags]);

src/pages/resource-detail/components/attributes/EditableBool.module.scss

@@ -0,0 +1,13 @@
+.root {
+    align-self: center;
+    margin-top: 3px;
+}
+
+.input {
+    border: none;
+
+    &:not(:checked) {
+        border: 1px solid teal;
+        border-radius: 100%;
+    }
+}

src/pages/resource-detail/components/attributes/EditableBool.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { Box, BoxProps, Checkbox } from '@mantine/core';
+import { MdCircle } from 'react-icons/md';
+
+import classes from './EditableBool.module.scss';
+
+export interface EditableBoolProps extends BoxProps {
+    value: boolean;
+
+    /** display name */
+    name: string;
+
+    /** when text change vent
+     * @param newValue new value of text */
+    onChange: (newValue: boolean) => void;
+}
+
+export function EditableBool(props: EditableBoolProps) {
+    const { value, name, onChange, ...boxProps } = props;
+
+    return (
+        <Checkbox
+            {...boxProps}
+            color="teal"
+            size="0.9rem"
+            name={name}
+            variant="outline"
+            // eslint-disable-next-line react/no-unstable-nested-components
+            icon={({ className }) => (
+                // eslint-disable-next-line object-curly-newline
+                <Box className={className} style={{ display: 'flex', alignItems: 'center', width: '13px' }}>
+                    <MdCircle />
+                </Box>
+            )}
+            checked={value}
+            classNames={{ root: classes.root, input: classes.input }}
+            onChange={(e) => onChange(e.currentTarget.checked)}
+        />
+    );
+}

src/pages/resource-detail/components/attributes/EditableDate.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { useCallback, useRef, useState } from 'react';
+import { BoxProps, Popover, Text } from '@mantine/core';
+
+import { DatePicker } from '@mantine/dates';
+import { formatDate, toDateTime } from '@utils/date';
+
+export interface EditableDateProps extends BoxProps {
+    value: string;
+
+    /** display name */
+    name: string;
+
+    /** when text change vent
+     * @param newValue new value of text */
+    onChange: (newValue: string) => void;
+
+    onEdit?: () => void;
+
+    onEditFinished?: (newValue: string, isEdited: boolean) => void;
+}
+
+export function EditableDate(props: EditableDateProps) {
+    const { value, name, onChange, onEdit, onEditFinished, ...boxProps } = props;
+    const [inEdited, setInEdited] = useState<boolean>(false);
+    const edited = useRef<boolean>(false);
+
+    const handleClick = () => {
+        setInEdited(true);
+        if (onEdit) {
+            onEdit();
+        }
+    };
+
+    const handleBlur = useCallback((newVal: string) => {
+        setInEdited(false);
+        if (onEditFinished && inEdited) {
+            onEditFinished(newVal, edited.current);
+        }
+        edited.current = false;
+    }, [onEditFinished, inEdited]);
+
+    // display value
+    return (
+        <Popover
+            position="bottom"
+            withArrow
+            arrowSize={10}
+            shadow="md"
+            opened={inEdited}
+            onClose={() => handleBlur(value)}
+        >
+            <Popover.Target>
+                <Text title="double click to edit" onDoubleClick={handleClick} {...boxProps}>
+                    {formatDate(value)}
+                </Text>
+            </Popover.Target>
+            <Popover.Dropdown p={10} pt={5} pb={5}>
+                <Text>{name}</Text>
+                <DatePicker
+                    value={toDateTime(value)}
+                    onChange={(e) => {
+                        if (e) {
+                            onChange(e.toISOString());
+                            edited.current = true;
+                        }
+                    }}
+                />
+            </Popover.Dropdown>
+        </Popover>
+    );
+}