msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[questions][ui] pop up dialog on list page

Browse Source
pull/468/head
wlren 3 years ago
parent d2d7ff5815
commit dad84d0720
1 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File

36
apps/portal/src/pages/questions/lists.tsx
Unescape View File

@ -8,6 +8,8 @@ import {
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import QuestionListCard from '~/components/questions/card/question/QuestionListCard'; import QuestionListCard from '~/components/questions/card/question/QuestionListCard';
import CreateListDialog from '~/components/questions/CreatListDialog';
import DeleteListDialog from '~/components/questions/DeleteListDialog';
import { Button } from '~/../../../packages/ui/dist'; import { Button } from '~/../../../packages/ui/dist';
import { APP_TITLE } from '~/utils/questions/constants'; import { APP_TITLE } from '~/utils/questions/constants';
@ -44,6 +46,25 @@ export default function ListPage() {
const [selectedList, setSelectedList] = useState( const [selectedList, setSelectedList] = useState(
(lists ?? []).length > 0 ? lists[0].id : '', (lists ?? []).length > 0 ? lists[0].id : '',
); );
const [showDeleteListDialog, setShowDeleteListDialog] = useState(false);
const [showCreateListDialog, setShowCreateListDialog] = useState(false);
const handleDeleteList = () => {
setShowDeleteListDialog(false);
};
const handleDeleteListCancel = () => {
setShowDeleteListDialog(false);
};
const handleCreateList = () => {
setShowCreateListDialog(false);
};
const handleCreateListCancel = () => {
setShowCreateListDialog(false);
};
const listOptions = ( const listOptions = (
<> <>
<ul className="flex flex-1 flex-col divide-y divide-solid divide-slate-200"> <ul className="flex flex-1 flex-col divide-y divide-solid divide-slate-200">
@ -61,7 +82,7 @@ export default function ListPage() {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(selectedList); console.log(selectedList);
}}> }}>
<p className="text-primary-700 text-md p-3 font-medium"> <p className="text-primary-700 text-md p-3 pl-6 font-medium">
{list.name} {list.name}
</p> </p>
</button> </button>
@ -85,7 +106,8 @@ export default function ListPage() {
? 'bg-violet-500 text-white' ? 'bg-violet-500 text-white'
: 'text-slate-900' : 'text-slate-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`} } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
type="button"> type="button"
onClick={() => setShowDeleteListDialog(true)}>
Delete Delete
</button> </button>
)} )}
@ -104,6 +126,7 @@ export default function ListPage() {
)} )}
</> </>
); );
return ( return (
<> <>
<Head> <Head>
@ -124,6 +147,7 @@ export default function ListPage() {
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setShowCreateListDialog(true);
}} }}
/> />
</div> </div>
@ -171,6 +195,14 @@ export default function ListPage() {
)} )}
</div> </div>
</div> </div>
<DeleteListDialog
show={showDeleteListDialog}
onCancel={handleDeleteListCancel}
onDelete={handleDeleteList}></DeleteListDialog>
<CreateListDialog
show={showCreateListDialog}
onCancel={handleCreateListCancel}
onCreate={handleCreateList}></CreateListDialog>
</section> </section>
</div> </div>
</main> </main>

Write Preview
Loading…
Cancel
Save