Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #170 from sevenxhq/refactor/project-list
Refactored ProjectList
- Loading branch information
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
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
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
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
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,16 +1,16 @@ | ||
| import ProjectList from '@/components/Projects/ProjectList'; | ||
| import AuthenticationContextProvider from '@/components/Login/AuthenticationContextProvider'; | ||
| import AutographaContextProvider from '@/components/context/AutographaContext'; | ||
| import ProjectContextProvider from '@/components/context/ProjectContext'; | ||
|
|
||
| const Projects = () => ( | ||
| <AuthenticationContextProvider> | ||
| <AutographaContextProvider> | ||
| <ProjectContextProvider> | ||
| <ProjectList /> | ||
| </ProjectContextProvider> | ||
| </AutographaContextProvider> | ||
| </AuthenticationContextProvider> | ||
| ); | ||
|
|
||
| export default Projects; |
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
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
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
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,73 @@ | ||
| import React, { Fragment } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Listbox, Transition } from '@headlessui/react'; | ||
| import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid'; | ||
| import { classNames } from '../../util/classNames'; | ||
|
|
||
| export default function CustomList({ | ||
| selected, setSelected, options, show, width, | ||
| }) { | ||
| const dropdownWidth = width ?? 40; | ||
| return ( | ||
| <Listbox value={selected} onChange={setSelected} disabled={!show}> | ||
| <div className={classNames(show === false ? 'bg-gray-200' : '', 'w-52 lg:w-40 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}> | ||
| <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm"> | ||
| <span className="block truncate">{selected?.title}</span> | ||
| <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> | ||
| <ChevronUpDownIcon | ||
| className="w-5 h-5 text-gray-400" | ||
| aria-hidden="true" | ||
| /> | ||
| </span> | ||
| </Listbox.Button> | ||
| <Transition | ||
| as={Fragment} | ||
| leave="transition ease-in duration-100" | ||
| leaveFrom="opacity-100" | ||
| leaveTo="opacity-0" | ||
| > | ||
| <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 z-10 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-48 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}> | ||
| {options.map((option) => ( | ||
| <Listbox.Option | ||
| key={option.title} | ||
| className={({ active }) => `${active ? 'text-amber-900 bg-amber-100' : 'text-gray-900'} | ||
| cursor-default select-none relative py-2 pl-10 pr-4 hover:bg-gray-200`} | ||
| value={option} | ||
| > | ||
| {({ selected, active }) => ( | ||
| <> | ||
| <span | ||
| className={`${ | ||
| selected ? 'font-medium' : 'font-normal' | ||
| } block truncate`} | ||
| > | ||
| {option.title} | ||
| </span> | ||
| {selected ? ( | ||
| <span | ||
| className={`${ | ||
| active ? 'text-amber-600' : 'text-amber-600' | ||
| } | ||
| absolute inset-y-0 left-0 flex items-center pl-3`} | ||
| > | ||
| <CheckIcon className="w-5 h-5" aria-hidden="true" /> | ||
| </span> | ||
| ) : null} | ||
| </> | ||
| )} | ||
| </Listbox.Option> | ||
| ))} | ||
| </Listbox.Options> | ||
| </Transition> | ||
| </div> | ||
| </Listbox> | ||
| ); | ||
| } | ||
|
|
||
| CustomList.propTypes = { | ||
| selected: PropTypes.object, | ||
| setSelected: PropTypes.func, | ||
| options: PropTypes.array, | ||
| show: PropTypes.bool, | ||
| width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
| }; |
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,187 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| TableSortLabel, | ||
| TableCell, | ||
| } from '@material-ui/core'; | ||
| import { | ||
| StarIcon, | ||
| } from '@heroicons/react/24/outline'; | ||
| import i18n from '../../translations/i18n'; | ||
|
|
||
| // import { Menu, Transition } from '@headlessui/react'; | ||
|
|
||
| const headCells = [ | ||
| { | ||
| // id: 'name', numeric: false, disablePadding: true, label: 'Project Name', | ||
| id: 'name', numeric: false, disablePadding: true, label: i18n.t('label-project-name'), | ||
| }, | ||
| { | ||
| id: 'language', numeric: false, disablePadding: true, label: i18n.t('label-language'), | ||
| }, | ||
| { | ||
| // id: 'type', numeric: false, disablePadding: true, label: 'Flavor', | ||
| id: 'type', numeric: false, disablePadding: true, label: i18n.t('label-flavour'), | ||
| }, | ||
| { | ||
| id: 'date', numeric: true, disablePadding: false, label: i18n.t('label-created-date'), | ||
| }, | ||
| { | ||
| id: 'view', numeric: true, disablePadding: false, label: i18n.t('label-last-viewed'), | ||
| }, | ||
| // { | ||
| // id: 'editors', numeric: false, disablePadding: false, label: 'Editors', | ||
| // }, | ||
| // { | ||
| // id: 'more', numeric: false, disablePadding: false, label: '', | ||
| // }, | ||
| ]; | ||
|
|
||
| function EnhancedTableHead(props) { | ||
| const { | ||
| order, orderBy, onRequestSort, | ||
| } = props; | ||
| const createSortHandler = (property) => (event) => { | ||
| onRequestSort(event, property); | ||
| }; | ||
|
|
||
| return ( | ||
| <thead className="bg-gray-50"> | ||
| <tr> | ||
| <th | ||
| scope="col" | ||
| // colSpan="2" | ||
| className="px-4 py-3 text-left text-xs font-medium text-gray-400" | ||
| > | ||
| <StarIcon className="h-5 w-5" aria-hidden="true" /> | ||
| </th> | ||
|
|
||
| {headCells.map((headCell) => ( | ||
| <TableCell | ||
| key={headCell.id} | ||
| className="bg-gray-50" | ||
| sortDirection={orderBy === headCell.id ? order : false} | ||
| > | ||
| <div className="flex content-center"> | ||
| {/* <Menu as="div" className="relative inline-block mr-2 mt-2"> | ||
| <Menu.Button className="focus:outline-none"> | ||
| <FilterIcon | ||
| className="w-4 h-4 text-gray-400 hover:text-gray-600" | ||
| aria-hidden="true" | ||
| /> | ||
| </Menu.Button> | ||
| <Transition | ||
| as={Fragment} | ||
| enter="transition ease-out duration-100" | ||
| enterFrom="transform opacity-0 scale-95" | ||
| enterTo="transform opacity-100 scale-100" | ||
| leave="transition ease-in duration-75" | ||
| leaveFrom="transform opacity-100 scale-100" | ||
| leaveTo="transform opacity-0 scale-95" | ||
| > | ||
| <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-white | ||
| divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black | ||
| ring-opacity-5 focus:outline-none" | ||
| > | ||
| <div className="px-3 py-2 bg-gray-100 flex justify-between uppercase text-xs text-gray-500"> | ||
| Filters | ||
| </div> | ||
| <div className="px-1 py-1 "> | ||
| <Menu.Item> | ||
| {({ active }) => ( | ||
| <div className={`${active ? 'bg-primary text-white' : 'text-gray-600' | ||
| } group flex items-center rounded-md w-full px-2 py-2 text-sm`} | ||
| > | ||
| <input | ||
| type="checkbox" | ||
| className={`${active ? 'border-black' : 'border-gray-300'} | ||
| mr-2 form-tick appearance-none h-4 | ||
| w-4 border rounded-md checked:bg-primary | ||
| checked:border-transparent focus:outline-none`} | ||
| /> | ||
| Active | ||
| </div> | ||
| )} | ||
| </Menu.Item> | ||
| <Menu.Item> | ||
| {({ active }) => ( | ||
| <div className={`${active ? 'bg-primary text-white' : 'text-gray-600' | ||
| } group flex items-center rounded-md w-full px-2 py-2 text-sm`} | ||
| > | ||
| <input | ||
| type="checkbox" | ||
| className={`${active ? 'border-black' : 'border-gray-300'} | ||
| mr-2 form-tick appearance-none h-4 | ||
| w-4 border rounded-md checked:bg-primary | ||
| checked:border-transparent focus:outline-none`} | ||
| /> | ||
| Finished | ||
| </div> | ||
| )} | ||
| </Menu.Item> | ||
| </div> | ||
| <div className="px-3 py-2 bg-gray-100 flex justify-between"> | ||
| <Menu.Item> | ||
| <button | ||
| type="button" | ||
| className="px-3 py-1 rounded btn-xs bg-white border border-gray-400 hover:border-gray-400 text-gray-500 hover:text-gray-600" | ||
| > | ||
| Clear | ||
| </button> | ||
| </Menu.Item> | ||
| <Menu.Item> | ||
| <button | ||
| type="button" | ||
| className="px-3 py-1 rounded btn-xs bg-primary border border-gray-400 hover:border-gray-400 text-white hover:text-gray-600" | ||
| > | ||
| Apply | ||
| </button> | ||
| </Menu.Item> | ||
| </div> | ||
| </Menu.Items> | ||
| </Transition> | ||
| </Menu> */} | ||
|
|
||
| <TableSortLabel | ||
| scope="col" | ||
| id="sorthead" | ||
| className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" | ||
| style={{ fontWeight: 'bold', color: 'grey' }} | ||
| active={orderBy === headCell.id} | ||
| direction={orderBy === headCell.id ? order : 'asc'} | ||
| onClick={createSortHandler(headCell.id)} | ||
| > | ||
| {headCell.label} | ||
| {orderBy === headCell.id ? ( | ||
| <span hidden> | ||
| {order === 'desc' ? 'sorted descending' : 'sorted ascending'} | ||
| </span> | ||
| ) : null} | ||
|
|
||
| </TableSortLabel> | ||
|
|
||
| </div> | ||
| </TableCell> | ||
| ))} | ||
|
|
||
| <th | ||
| scope="col" | ||
| className="px-4 py-3 text-left text-xs font-medium text-gray-400" | ||
| > | ||
| {/* <ExternalLinkIcon className="h-5 w-5" aria-hidden="true" /> */} | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| ); | ||
| } | ||
|
|
||
| export default EnhancedTableHead; | ||
|
|
||
| EnhancedTableHead.propTypes = { | ||
| onRequestSort: PropTypes.func.isRequired, | ||
| order: PropTypes.oneOf(['asc', 'desc']).isRequired, | ||
| orderBy: PropTypes.string.isRequired, | ||
| }; |
Oops, something went wrong.