-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: edit store label block and modal feat: edit store label modal
- Loading branch information
wwills2
committed
Feb 21, 2024
1 parent
060c7e3
commit 6859a81
Showing
13 changed files
with
288 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 0 additions & 40 deletions
40
src/renderer/components/blocks/layout/SelectedStoreIdCard.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React from 'react'; | ||
| import { useMemo } from 'react'; | ||
| import { Label, TextInput } from 'flowbite-react'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
| import { useSelector, useDispatch } from 'react-redux'; | ||
| import { setStoreLabel } from '@/store/slices/userOptions'; | ||
|
|
||
| interface SelectedStoreIdCardProps { | ||
| storeId: string; | ||
| } | ||
|
|
||
| const SetStoreLabel: React.FC<SelectedStoreIdCardProps> = ({ | ||
| storeId, | ||
| }: SelectedStoreIdCardProps) => { | ||
| const dispatch = useDispatch(); | ||
| const userOptionsStore = useSelector((state: any) => state.userOptions); | ||
|
|
||
| const label = useMemo(() => { | ||
| return userOptionsStore.storeLabels?.[storeId]; | ||
| }, [storeId, userOptionsStore.storeLabels]); | ||
|
|
||
| const handleStoreLabelChange = (event) => { | ||
| dispatch(setStoreLabel({ storeId, label: event.target.value })); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={'space-y-6 flex-col'}> | ||
| <div className={'flex'}> | ||
| <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400"> | ||
| <FormattedMessage id="store-id"/>: {storeId} | ||
| </p> | ||
| </div> | ||
| <div className={"flex"}> | ||
| <div style={{ | ||
| display: "flex", | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| inlineSize: 'min-content', | ||
| whiteSpace: 'nowrap' | ||
| }}> | ||
| <Label htmlFor="store-id"> | ||
| <FormattedMessage id={"store-label"}/> | ||
| </Label> | ||
| </div> | ||
| <div style={{width: "100%", marginLeft: '10px', marginRight: '10px'}}> | ||
| <TextInput onChange={handleStoreLabelChange} value={label || ''}/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export {SetStoreLabel}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React, {useMemo} from "react"; | ||
| import {Button, Tooltip} from "flowbite-react"; | ||
| import {FormattedMessage} from "react-intl"; | ||
| import {useSelector} from "react-redux"; | ||
|
|
||
| interface StoreIdProps { | ||
| storeId: string; | ||
| setStoreIdToEdit?: (storeId: string) => void; | ||
| } | ||
|
|
||
| const StoreId: React.FC<StoreIdProps> = ({storeId, setStoreIdToEdit}) => { | ||
|
|
||
| const userOptions = useSelector((state: any) => state.userOptions); | ||
|
|
||
| const storeLabel = useMemo(() => { | ||
| return userOptions.storeLabels?.[storeId]; | ||
| }, [storeId, userOptions.storeLabels]); | ||
|
|
||
| const IDWithEditTooltip: React.FC = () => { | ||
| return ( | ||
| <Tooltip | ||
| arrow={false} | ||
| style={'light'} | ||
| animation="duration-500" | ||
| content={ | ||
| <div className={'flex'}> | ||
| { | ||
| setStoreIdToEdit && | ||
| <> | ||
| <Button onClick={() => setStoreIdToEdit(storeId)}> | ||
| <FormattedMessage id={"set-store-label"}/> | ||
| </Button> | ||
| </> | ||
| } | ||
| <div style={{ | ||
| marginLeft: '10px', | ||
| display: "flex", | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| }} | ||
| > | ||
| <p> | ||
| {storeLabel && <div>{storeId}</div>} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| } | ||
| > | ||
| {storeLabel || storeId} | ||
| </Tooltip> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| { | ||
| (setStoreIdToEdit || storeLabel) | ||
| ? <IDWithEditTooltip/> | ||
| : <div style={{width: '100%', display: 'flex'}}>{storeId}</div> | ||
| } | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export {StoreId} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| export * from './LeftNav'; | ||
| export * from './Template'; | ||
| export * from './WebView'; | ||
| export * from './SelectedStoreIdCard'; | ||
| export * from './XTerm'; | ||
| export * from './SetStoreLabel'; | ||
| export * from './XTerm'; | ||
| export * from './StoreId' |
35 changes: 35 additions & 0 deletions
35
src/renderer/components/blocks/modals/SetStoreLabelModal/SetStoreLabelModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import {Modal} from "flowbite-react"; | ||
| import React, {useEffect, useState} from "react"; | ||
| import {FormattedMessage} from "react-intl"; | ||
| import {SetStoreLabel} from "@/components"; | ||
|
|
||
| interface SetStoreLabelModalProps { | ||
| storeId: string; | ||
| setStoreId: (storeId: string) => void; | ||
| } | ||
|
|
||
| const SetStoreLabelModal: React.FC<SetStoreLabelModalProps> = ({storeId, setStoreId }) => { | ||
|
|
||
| const [showModal, setOpenModal] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| if (storeId) { | ||
| setOpenModal(true); | ||
| }else{ | ||
| setOpenModal(false); | ||
| } | ||
| }, [storeId]); | ||
|
|
||
| return ( | ||
| <Modal show={showModal} onClose={() => setStoreId('')} size="3xl"> | ||
| <Modal.Header> | ||
| <FormattedMessage id="set-store-label"/> | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| <SetStoreLabel storeId={storeId}/> | ||
| </Modal.Body> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| export {SetStoreLabelModal} |
1 change: 1 addition & 0 deletions
1
src/renderer/components/blocks/modals/SetStoreLabelModal/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './SetStoreLabelModal'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.