feat(dcellar-web-ui): add list member expiration time

node-real · Oct 20, 2023 · 52721b5 · 52721b5
1 parent 2113e82
commit 52721b5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 22 deletions.
diff --git a/apps/dcellar-web-ui/src/modules/group/components/GroupMemberOperation.tsx b/apps/dcellar-web-ui/src/modules/group/components/GroupMemberOperation.tsx
@@ -44,7 +44,7 @@ import { Animates } from '@/components/AnimatePng';
 import { DCCheckbox } from '@/components/common/DCCheckbox';
 import { uniq, without, xor } from 'lodash-es';
 import cn from 'classnames';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 
 const menus: MenuOption[] = [
   { label: 'Member', value: 'member' },
@@ -349,6 +349,7 @@ export const GroupMemberOperation = memo<GroupMemberOperationProps>(function Gro
                 <Flex direction="column" gap={8}>
                   {page.map((p) => {
                     const owner = loginAccount === p.AccountId;
+                    const expirationTime = p.ExpirationTime ? p.ExpirationTime * 1000 : 0;
                     return (
                       <Row
                         key={p.AccountId}
@@ -366,16 +367,30 @@ export const GroupMemberOperation = memo<GroupMemberOperationProps>(function Gro
                             <Box key={p.AccountId} title={p.AccountId}>
                               <Avatar id={p.AccountId} w={32} />
                             </Box>
-                            <Text
-                              flex={1}
-                              ml={8}
-                              fontWeight={500}
-                              title={p.AccountId}
-                              color={'readable.normal'}
-                            >
-                              {trimAddress(p.AccountId)}
-                              {owner && <> (you)</>}
-                            </Text>
+                            <Flex lineHeight="normal" ml={8} flex={1} flexDirection="column">
+                              <Text
+                                flex={1}
+                                fontWeight={500}
+                                title={p.AccountId}
+                                color={'readable.normal'}
+                              >
+                                {trimAddress(p.AccountId)}
+                                {owner && <> (you)</>}
+                              </Text>
+                              {!owner && !!expirationTime && (
+                                <Text
+                                  fontSize={12}
+                                  mt={2}
+                                  color={
+                                    dayjs().isBefore(dayjs(expirationTime))
+                                      ? 'readable.disabled'
+                                      : 'scene.danger.normal'
+                                  }
+                                >
+                                  Expire date: {dayjs(expirationTime).format('D MMM, YYYY')}
+                                </Text>
+                              )}
+                            </Flex>
                           </Flex>
                         </DCCheckbox>
                         <Operation>

diff --git a/apps/dcellar-web-ui/src/modules/object/components/ViewerList.tsx b/apps/dcellar-web-ui/src/modules/object/components/ViewerList.tsx
@@ -41,7 +41,7 @@ import { DCMenu } from '@/components/common/DCMenu';
 import { MenuOption } from '@/components/common/DCMenuList';
 import { DCCheckbox } from '@/components/common/DCCheckbox';
 import cn from 'classnames';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 
 const MAX_COUNT = 20;
 const MEMBER_SIZE = 20;
@@ -493,6 +493,7 @@ export const ViewerList = memo<ViewerListProps>(function ViewerList({ selectObje
                 {page.map((p, index) => {
                   const owner = loginAccount === p.PrincipalValue;
                   const isGroup = p.PrincipalValue.match(GROUP_ID);
+                  const expirationTime = p.ExpirationTime ? p.ExpirationTime * 1000 : 0;
                   return (
                     <Row
                       key={p.PrincipalValue}
@@ -510,16 +511,30 @@ export const ViewerList = memo<ViewerListProps>(function ViewerList({ selectObje
                           <Box key={p.PrincipalValue} title={p.PrincipalValue}>
                             <Avatar id={p.PrincipalValue} w={32} />
                           </Box>
-                          <Text
-                            flex={1}
-                            ml={8}
-                            fontWeight={500}
-                            title={p.PrincipalValue}
-                            color={'readable.normal'}
-                          >
-                            {isGroup ? p.PrincipalValue : trimAddress(p.PrincipalValue)}
-                            {owner && <> (you)</>}
-                          </Text>
+                          <Flex lineHeight="normal" ml={8} flex={1} flexDirection="column">
+                            <Text
+                              flex={1}
+                              fontWeight={500}
+                              title={p.PrincipalValue}
+                              color={'readable.normal'}
+                            >
+                              {isGroup ? p.PrincipalValue : trimAddress(p.PrincipalValue)}
+                              {owner && <> (you)</>}
+                            </Text>
+                            {!owner && !!expirationTime && (
+                              <Text
+                                fontSize={12}
+                                mt={2}
+                                color={
+                                  dayjs().isBefore(dayjs(expirationTime))
+                                    ? 'readable.disabled'
+                                    : 'scene.danger.normal'
+                                }
+                              >
+                                Expire date: {dayjs(expirationTime).format('D MMM, YYYY')}
+                              </Text>
+                            )}
+                          </Flex>
                         </Flex>
                       </DCCheckbox>
                       <Operation>