python-adminui icon indicating copy to clipboard operation
python-adminui copied to clipboard

Enhancement Request: More Antd components (updated)

Open jwag59 opened this issue 2 years ago • 12 comments

It would be great to get the following Antd components or enhancements to existing components available in Adminui.

  • Antd.Button: support the 'href' option to enable a button click to redirect to a web page. I know you can use an on_click with a NavigateTo but this means you need to code an on_click function for every Button. It is far easier to programmably create the Button with a href that is suited to the current data (i.e simply a custom URL associated with each button)
  • Antd.Space: the space component gives the ability to control the layout of adjacent components more precisely
  • Antd.Empty: to enable indication that no results were found
  • Antd.Result: Enables more complex feedback
  • Antd.Descriptions (Adminui DetailGroup), could the following enhancements be considered: a) Make the Title field have a different background (default is light grey) to more easily differentiate it from the value field b) support for 'bordered' option, c) support for 'columns' (i.e. ability to specify the # of columns per row used), d) ability to let one entry span multiple columns e) option for 'vertical' placement not just horizontal (i.e. title on one row and the value on the next row immediately below it) f) An Antd Descriptions.Item has the ability to have children components. This enables to make rich items rather than simple text, like adding an image or a button .. etc
  • AntdTable: RowActions it would be great to support an Icon in addition to simply text as the link style
  • Antd.Table: would be great to support HTML links within a row based on the record data (not just RowActions). Is it possible to enable access to 'record' data during table setup that enables a column to contain a hyperlink to another page? The Feffery Antd components for Dash implemented a feature enabling the ability to define a renderType as Link in the Column definitions but does not allow customization of the Link text. I would like to be able to create a link from the actual record data. I created a mockup using Flask and Bootstrap Table (see the column 'Nodegroup' in the image below which is created using the mysql DB data and can be different for each row) but I would like to be able to do the same directly in Adminui.
  • Checkbox, Radio & Switch: can you support the disabled option so it can be used to display the current state of something but the user cannot change it.

image

Check the feffery description at: http://fac.feffery.tech/AntdTable And here is the way feffery project implemented this:

fac.AntdTable( 
columns=[ 
        { 
            'title': '超链接示例', 
            'dataIndex': '超链接示例',
            'renderOptions': {
                'renderType': 'link',
                'renderLinkText': '点击跳转'
            }
        }
    ],
    data=[
        {
            'key': i,
            '超链接示例': {
                'href': 'https://github.com/CNFeffery/feffery-antd-components'
            }
        }
        for i in range(3)
    ],
    bordered=True,
    style={
        'width': '250px'
    }
)

jwag59 avatar May 23 '22 09:05 jwag59

Thanks for implementing Empty and Result components.

jwag59 avatar May 25 '22 18:05 jwag59

Is my understanding correct in that you don't plan to support a Button of type 'link' which has the 'href' option?

jwag59 avatar May 30 '22 16:05 jwag59

Is my understanding correct in that you don't plan to support a Button of type 'link' which has the 'href' option?

It's already there. see link_to attribute of Button.

bigeyex avatar Jun 01 '22 14:06 bigeyex

Antd.Space will not be supported until version 2.0. Because it's based on Ant Design 4.0 layout system, and adminui is using Ant Design 3.0. So unless I have time to evaluate/do/test the upgrade, I'll leave it for now.

bigeyex avatar Jun 01 '22 14:06 bigeyex

Thanks for the link_to on the Button (sorry I missed that update). Really useful. And obviously I understand the issue to support Antd.Space so no sweat on that. I am struggling to get the right layout at times now though. Do you think there is any chance to support richer components in a table row itself. I'm trying to build a server/cluster monitoring tool which has tables that display racks and servers. But it would be great to indicate the state of a server (i.e. Up/Down) by a small red or green circle. Currently tables are limited to text only, apart from the icons now available for the RowActions. So it would be great if I could inject a rich component for each row into the TableResults list. I'd be interested to hear your feedback on that!!

jwag59 avatar Jun 01 '22 15:06 jwag59

I'd like to request a few more components which would be very useful:

  • antd.popconfirm
  • antd.tag (and particularly the color, checked and onChange options) I'd like the option to have a colored component that can be used to navigate to another location when clicked. If Buttons supported color then I may not need this. My use case is to use a colored component to show the difference between operating states of servers i.e. Up, Down, Unavailable, Not responding ... etc. For each state I'd like a different color to be used. However my problem is that I need a custom link for each tag, so really I prefer linkTo rather than a onChange call or be able to use colored Buttons. Can buttons support a color option (antd does not seem to have this)?
  • antd.tooltip
  • antd.popover

jwag59 avatar Jun 02 '22 09:06 jwag59

BTW thankyou for implementing links in tables, this is really useful for me.

jwag59 avatar Jun 02 '22 13:06 jwag59

Thanks for the link_to on the Button (sorry I missed that update). Really useful. And obviously I understand the issue to support Antd.Space so no sweat on that. I am struggling to get the right layout at times now though. Do you think there is any chance to support richer components in a table row itself. I'm trying to build a server/cluster monitoring tool which has tables that display racks and servers. But it would be great to indicate the state of a server (i.e. Up/Down) by a small red or green circle. Currently tables are limited to text only, apart from the icons now available for the RowActions. So it would be great if I could inject a rich component for each row into the TableResults list. I'd be interested to hear your feedback on that!!

I think for common use cases, like "colored indicators" or maybe progressBar/Tags, a direct render mode is good and easy to use. It's possible to make custom render templates, but I suspect there's not much use cases and the API could be quite awkward.f

bigeyex avatar Jun 03 '22 03:06 bigeyex

I like the badge feature. Simple and effective.

jwag59 avatar Jun 03 '22 09:06 jwag59

Would really appreciate if you could implement the and.popover. I have a need for a complex mouse over dialog when displaying some server related information. I have an image representing the equipment and would like a popover to add a number of items that describe the item under the mouse.

jwag59 avatar Jun 14 '22 16:06 jwag59

Wouldn't it be better if you could explain how to add new components so that more people can contribute new controls themselves?

markqiu avatar Sep 10 '22 12:09 markqiu

In the end I worked how to do exactly that. My problem is that I’m not familiar with GitHub and so far I can’t contribute all the updates I’ve made locally to my version of administration.

So basically if you want to make updates and contribute read the section on contributing and development on the adminui GitHub page. I followed these instructions but I don’t use npm start. I simply make changes build a new release and test. Yes not ideal but I know python not npm, so that’s the best I can do.

Best regards John.

Sent from my iPad

On 10 Sep 2022, at 14:31, 邱承 @.***> wrote:

 Wouldn't it be better if you could explain how to add new components so that more people can contribute new controls themselves?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

jwag59 avatar Oct 11 '22 09:10 jwag59