mirror of
				https://github.com/strapi/strapi.git
				synced 2025-11-03 19:36:20 +00:00 
			
		
		
		
	CM: Allow list-view to be sorted by stages
This commit is contained in:
		
							parent
							
								
									9de528d7d5
								
							
						
					
					
						commit
						476821033f
					
				@ -24,7 +24,7 @@ export default (layout) => {
 | 
			
		||||
    key: '__strapi_reviewWorkflows_stage_temp_key__',
 | 
			
		||||
    name: 'strapi_reviewWorkflows_stage',
 | 
			
		||||
    fieldSchema: {
 | 
			
		||||
      type: 'custom',
 | 
			
		||||
      type: 'relation',
 | 
			
		||||
    },
 | 
			
		||||
    metadatas: {
 | 
			
		||||
      label: formatMessage({
 | 
			
		||||
@ -32,7 +32,8 @@ export default (layout) => {
 | 
			
		||||
        defaultMessage: 'Review stage',
 | 
			
		||||
      }),
 | 
			
		||||
      searchable: false,
 | 
			
		||||
      sortable: false,
 | 
			
		||||
      sortable: true,
 | 
			
		||||
      mainField: 'name',
 | 
			
		||||
    },
 | 
			
		||||
    cellFormatter({ strapi_reviewWorkflows_stage }) {
 | 
			
		||||
      // if entities are created e.g. through lifecycle methods
 | 
			
		||||
 | 
			
		||||
@ -26,7 +26,6 @@ const TableHead = ({
 | 
			
		||||
  const [{ query }, setQuery] = useQueryParams();
 | 
			
		||||
  const sort = query?.sort || '';
 | 
			
		||||
  const [sortBy, sortOrder] = sort.split(':');
 | 
			
		||||
 | 
			
		||||
  const isIndeterminate = !areAllEntriesSelected && entriesToDelete.length > 0;
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
@ -45,54 +44,67 @@ const TableHead = ({
 | 
			
		||||
            />
 | 
			
		||||
          </Th>
 | 
			
		||||
        )}
 | 
			
		||||
        {headers.map(({ name, metadatas: { sortable: isSortable, label } }) => {
 | 
			
		||||
          const isSorted = sortBy === name;
 | 
			
		||||
          const isUp = sortOrder === 'ASC';
 | 
			
		||||
        {headers.map(
 | 
			
		||||
          ({ fieldSchema, name, metadatas: { sortable: isSortable, label, mainField } }) => {
 | 
			
		||||
            let isSorted = sortBy === name;
 | 
			
		||||
            const isUp = sortOrder === 'ASC';
 | 
			
		||||
 | 
			
		||||
          const sortLabel = formatMessage(
 | 
			
		||||
            { id: 'components.TableHeader.sort', defaultMessage: 'Sort on {label}' },
 | 
			
		||||
            { label }
 | 
			
		||||
          );
 | 
			
		||||
 | 
			
		||||
          const handleClickSort = (shouldAllowClick = true) => {
 | 
			
		||||
            if (isSortable && shouldAllowClick) {
 | 
			
		||||
              const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC';
 | 
			
		||||
              const nextSort = `${name}:${nextSortOrder}`;
 | 
			
		||||
 | 
			
		||||
              setQuery({
 | 
			
		||||
                sort: nextSort,
 | 
			
		||||
              });
 | 
			
		||||
            // relations always have to be sorted by their main field instead of only the
 | 
			
		||||
            // attribute name; sortBy e.g. looks like: &sortBy=attributeName[mainField]:ASC
 | 
			
		||||
            if (fieldSchema?.type === 'relation' && mainField) {
 | 
			
		||||
              isSorted = sortBy === `${name}[${mainField}]`;
 | 
			
		||||
            }
 | 
			
		||||
          };
 | 
			
		||||
 | 
			
		||||
          return (
 | 
			
		||||
            <Th
 | 
			
		||||
              key={name}
 | 
			
		||||
              action={
 | 
			
		||||
                isSorted && (
 | 
			
		||||
                  <IconButton
 | 
			
		||||
                    label={sortLabel}
 | 
			
		||||
                    onClick={handleClickSort}
 | 
			
		||||
                    icon={isSorted && <SortIcon isUp={isUp} />}
 | 
			
		||||
                    noBorder
 | 
			
		||||
                  />
 | 
			
		||||
                )
 | 
			
		||||
            const sortLabel = formatMessage(
 | 
			
		||||
              { id: 'components.TableHeader.sort', defaultMessage: 'Sort on {label}' },
 | 
			
		||||
              { label }
 | 
			
		||||
            );
 | 
			
		||||
 | 
			
		||||
            const handleClickSort = (shouldAllowClick = true) => {
 | 
			
		||||
              if (isSortable && shouldAllowClick) {
 | 
			
		||||
                let nextSort = name;
 | 
			
		||||
 | 
			
		||||
                // relations always have to be sorted by their main field instead of only the
 | 
			
		||||
                // attribute name; nextSort e.g. looks like: &nextSort=attributeName[mainField]:ASC
 | 
			
		||||
                if (fieldSchema?.type === 'relation' && mainField) {
 | 
			
		||||
                  nextSort = `${name}[${mainField}]`;
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                setQuery({
 | 
			
		||||
                  sort: `${nextSort}:${isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC'}`,
 | 
			
		||||
                });
 | 
			
		||||
              }
 | 
			
		||||
            >
 | 
			
		||||
              <Tooltip label={isSortable ? sortLabel : label}>
 | 
			
		||||
                <Typography
 | 
			
		||||
                  textColor="neutral600"
 | 
			
		||||
                  as={!isSorted && isSortable ? 'button' : 'span'}
 | 
			
		||||
                  label={label}
 | 
			
		||||
                  onClick={() => handleClickSort(!isSorted)}
 | 
			
		||||
                  variant="sigma"
 | 
			
		||||
                >
 | 
			
		||||
                  {label}
 | 
			
		||||
                </Typography>
 | 
			
		||||
              </Tooltip>
 | 
			
		||||
            </Th>
 | 
			
		||||
          );
 | 
			
		||||
        })}
 | 
			
		||||
            };
 | 
			
		||||
 | 
			
		||||
            return (
 | 
			
		||||
              <Th
 | 
			
		||||
                key={name}
 | 
			
		||||
                action={
 | 
			
		||||
                  isSorted && (
 | 
			
		||||
                    <IconButton
 | 
			
		||||
                      label={sortLabel}
 | 
			
		||||
                      onClick={handleClickSort}
 | 
			
		||||
                      icon={isSorted && <SortIcon isUp={isUp} />}
 | 
			
		||||
                      noBorder
 | 
			
		||||
                    />
 | 
			
		||||
                  )
 | 
			
		||||
                }
 | 
			
		||||
              >
 | 
			
		||||
                <Tooltip label={isSortable ? sortLabel : label}>
 | 
			
		||||
                  <Typography
 | 
			
		||||
                    textColor="neutral600"
 | 
			
		||||
                    as={!isSorted && isSortable ? 'button' : 'span'}
 | 
			
		||||
                    label={label}
 | 
			
		||||
                    onClick={() => handleClickSort(!isSorted)}
 | 
			
		||||
                    variant="sigma"
 | 
			
		||||
                  >
 | 
			
		||||
                    {label}
 | 
			
		||||
                  </Typography>
 | 
			
		||||
                </Tooltip>
 | 
			
		||||
              </Th>
 | 
			
		||||
            );
 | 
			
		||||
          }
 | 
			
		||||
        )}
 | 
			
		||||
 | 
			
		||||
        {withBulkActions && (
 | 
			
		||||
          <Th>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user