unfoldadmin / django-unfold Goto Github PK

Before filters update (version 0.1.13) we could use following filter (filtering based on annotation):

class ItemsNumberFilter(RangeNumericFilter):
    parameter_name = "items_count"
    title = _("items")


@admin.register(Test)
class TestAdmin(ModelAdmin):
	...
    list_filter = (ItemsNumberFilter,)

    def get_queryset(self, request):
        return (
            super()
            .get_queryset(request)
            .annotate(
                items_count=Count("item", distinct=True),
            )
        )

After the filters update this raises an error:

The value of 'list_filter[0]' must not inherit from 'FieldListFilter'

We also cannot use the way of using filters showed in docs:

list_filter = (
    ("items_count", ItemsNumberFilter)
)

Because we want to use annotation and not model field so it results in error:

Test has no field named 'items_count'

Hi,

Maybe this is a silly question but I've tried my best before posting it.......

After a fresh install with python 3.11.3 and django 4.2.1, I managed to make unfold run by adding the app in settings.py.
All looks good until I click on "Users" or "Groups". A KeyError comes out on 'actions_row'.

Looks like the default context doesn't include the actions_row key pair somehow. Is it an attribute brought by unfold?

Thank in advance!
Justin

A tiny usability issue: when one adds a search field everything works as expected. However when executing the search and the page gets refreshed the cursor is moved to the beginning of the target text in the search field.
So when one wants to edit or clear the target text one has to manually move the cursor to the end of the target text.

Additionally, a button to clear the search box would be nice.

(Using Safari)

Now if you have 2 languages in the admin area you see a

The first name field did nothing. If you change them then nothing happens. How to remove them?

When i click user icon in the picture 1,i get one error in picture 2

Can we have a button that can switch between light and dark mode instantly, maybe at the top right?

If we write a date in the DateRangeFilter's text widget and we use an incorrect format, the page returns a 500 error with the following message: ['“06-01-2023” value has an invalid date format. It must be in YYYY-MM-DD format.']

The input that results in a 500 error

Could it be possible to catch this error and display this as an error message on the input field instead of crashing the page? Similarly to how the error is handled in Django's change form

Error being handled in Django's change form.

Small improvement: Make this link open website on new tab. It is often expected to do so.

When i tried to use django import export package with unfold, style not as expected.

(im very new to django and programming and i'been a week trying to figure out how to do it, but i cant)

i want to display the result of the sum of all fields in change_list view

there is a way to pass the extra context ?

thanks

When I use unfold, I find that there are duplicate first arrows in the drop-down selection box, like the snapshot.

I add a same className to fix by myself.

<style>
  select:not([class*=bg-none]):not([multiple]) {
      -webkit-appearance: none; 
      -moz-appearance: none;
      appearance: none;
  }
</style>

Hey. Love this project, you're doing amazing work!

I've been looking for the last couple minutes to find the credentials to access the demo at https://demo.unfoldadmin.com/admin/login/?next=/admin/. I know I managed to access it in the past, but I can't find it anymore.

If they are still there somewhere, they probably need to be more obvious (maybe even in the help_texts of the username and password field).

Thanks

Hi! I have registered a model with this code.

class ClickAdmin(ModelAdmin):
    search_fields = ['front', 'back',]
    list_filter = ('set__subject', 'set__grade')

However when in the Django admin, it shows like this:

Maybe I'm missing something, maybe I'm not, but does anyone know why this is happening and how to fix?

When you disable change permission in admin, "Close" button is not correctly styled. I used this command:

def has_change_permission(self, request, obj=None):
    return False

It seems there is only TabularInline and StackedInline in unfold.admin. and NestedStackedInline and NestedTabularInline not supported.

Is there any way to show fieldsets as tabs? Actually I'm using django-suit and looking for alternatives.

This is more of a question than a request:

Django Typed Models allows for single-table inheritance.

When registering the admin for the base model class, a "type" select is visible by default, which allows you to create instances of children directly from the base class, but this is not really optimal.

The preferred way is to register the children and then go to the individual admin section to configure them.

My question is: If I implemented a way into your package to make this form dynamic based on the selected type, only showing the fields of the appropriate class, by using some javascript, would you be okay with merging it into the code?

If so, I would work on it myself and submit a pull request.

Thanks

The ideal flow here is that if you click on the image, it'll take you to the full sized version. That's currently not possible - you have to triple click, right click, and then hit "go to"

Above input field are not styled properly in detail.

It would be appreciated if list display for True/False field can add i18n support.

[x-cloak] { display: none !important; }

x-cloak style is also needed for hiding the user information dropdown menu until Alpine is fully loaded on the page.

When you disable change permission in admin via this command:

def has_change_permission(self, request, obj=None):
    return False

Summernote fields are displayed with HTML tags and without summernote widget/form.

Python 3.10
Django 4.0.7

In contrib/numeric_filters/forms.py this import -> from django.utils.translation import ugettext_lazy as _

needs to be updated to from django.utils.translation import gettext_lazy as _ to be compatible with Django 4.0

https://stackoverflow.com/questions/71420362/django4-0-importerror-cannot-import-name-ugettext-lazy-from-django-utils-tra

Something wrong with field styling as image above. Same occurs in light mode.

I followed the installation instructions, and it seems there is an error coming from alpine.js

105:1 Uncaught SyntaxError: Unexpected token 'a', "auto" is not valid JSON
    at JSON.parse (<anonymous>)
    at d (alpine.persist.js:1:364)
    at t.interceptor.r.as.n (alpine.persist.js:1:116)
    at Object.initialize (alpine.js:1:4137)
    at alpine.js:1:3965
    at Array.forEach (<anonymous>)
    at r (alpine.js:1:3816)
    at ye (alpine.js:1:4038)
    at alpine.js:5:30058
    at Function.<anonymous> (alpine.js:5:10674)

I looked online, only found one issue on SO but with no answer.

Is it a misconfiguration on my part, or something to do with django version maybe?

Edit:
did some digging, first turns out the bug only happen on Chromium, in Firefox it is working, I still need to check in Chrome.

Breakpoint in alpine give the following issue on json parsing.

 function d(t, e) {
        return JSON.parse(e.getItem(t, e))
    }

with value
t = "theme", e = Storage {theme: 'auto', length: 1}

Thank you for this project.

How do I go by having multiple dashboard pages as tabs, as shown in the demo.

Also any chance we can get the demo repo? It will serve as a good reference point for projects s

thank you

Hello,

I recently discovered your library and I'm absolutely fascinated by the demo. First and foremost, I wanted to express my admiration for the excellent work you've done in integrating cutting-edge technologies to enhance the Django admin user experience.
After thoroughly reading the documentation, I believe that it might be challenging for a backend developer to achieve similar results without having access to some example code. It would be greatly appreciated if you could kindly consider sharing some code snippets from the demo, or perhaps provide a reference to a similar project that showcases the full capabilities of this library. Having practical examples would undoubtedly enhance the learning experience and complement the existing documentation.
Thank you very much for your attention and for creating such a remarkable library. I look forward to exploring more of its possibilities.

Best regards

How to add two fields in one row. Fieldsets dont work.
I use the standard django method
example code
fieldsets = (
('Category', {
'fields': (('title', 'description', 'file',), 'flag') }),
('Answer Option', {'fields': ('datacreated', 'datamodified',)}),
)

You should work regarding the styling of the admin's dark mode and light mode. The input fields in dark mode feel wierd as well as those input field are invisible in some places in light mode. In next update we want it fixed.

Vertical expansion in admin is not working as expected. When there are many lines of text, the area will not expand.

Configs

version_info = forms.CharField(
    required=False,
    label=_("Version info"),
    widget=UnfoldAdminTextInputWidget(),
)

It's not working without widget nor with UnfoldAdminTextareaWidget or UnfoldAdminTextInputWidget

Hey there,

we are experiencing an issue with our current setup. We are using the TabularInline class to show related objects. Django admin creates buttons for viewing the edit (change) or detail pages. However, they are not working.

The reason is that the vanilla admin library uses updateRelatedObjectLinks() to replace the __fk__ part of the href by the real value. When using unfold, this part does not work. The jQuery function stops as no siblings are found and the fk remains unchanged, e.g. like this:

<a class="related-widget-wrapper-link view-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm transition-colors w-9.5 hover:text-gray-700 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" id="view_id_workspaceuser_set-0-user" data-href-template="/admin/authentication/user/__fk__/change/?_to_field=id" title="View selected user"><span class="material-symbols-outlined text-sm">visibility</span></a>

Now, when I replace the admin function with a custom one that deals with the - apparently changed - HTML it works again.

My adaption of the admin jQuery function (in plain Javascript):

function updateRelatedObjectLinks(triggeringLink) {
    const selectElement = triggeringLink;
    const parentElement = selectElement.closest('.flex-row');
    const siblings = parentElement.querySelectorAll('.view-related, .change-related, .delete-related');
    const value = selectElement.value;
    if (value) {
        siblings.forEach(function (elm) {
            const template = elm.getAttribute('data-href-template');
            const updatedHref = template.replace('__fk__', value);
            elm.setAttribute('href', updatedHref);
        });
    } else {
        siblings.forEach(function (elm) {
            elm.removeAttribute('href');
        });
    }
}

The original gets the siblings like that:
const siblings = $this.nextAll('.view-related, .change-related, .delete-related');
without the parentElement.

I tried to overwrite the admin function with my own, but this is quite hacky. Am I doing something wrong or is there a problem in the way unfold creates the HTML for the TabularInline?

Thanks!

When using dark mode, actions_detail are not styled properly in detail. It remains with light mode design.

when i want to check my celery results in django admin, then i see this error:

When I go to edit or create an item, the breadcrumb doesn't work properly, the link doesn't convert to a valid URL
https://user-images.githubusercontent.com/4583818/202024165-e2fb2355-7892-4438-8238-04160e63b422.mov

the Arabic admin panel version isn't working well at all since there isn't support for rtl

Hi Lukas,

I hope you're doing well.
Thanks so much for your great work!

Not sure if anyone else reported this, but I found that django-reversion-compare doesn't work well with unfold.
The History action button disappears and the compare pages are not correctly styled.

I'm afraid it requires some sort of work that you've done for django-import-export.

Would you consider supporting it at your earliest convenience?

Thanks in advance!
Best Regards,
Justin

Unfold Settings

UNFOLD = {
    "SITE_TITLE": "Bloop",
    "SITE_HEADER": "Double Bloop",
}

requirements.txt

asgiref==3.7.0
attrs==23.1.0
autobahn==23.1.2
automat==22.10.0
cffi==1.15.1
channels[daphne]==4.0.0
constantly==15.1.0
cryptography==40.0.2
daphne==4.0.0
django==4.2.1
django-extensions==3.2.1
django-phonenumber-field[phonenumberslite]==7.1.0
django-unfold @ git+https://github.com/unfoldadmin/django-unfold.git
djangorestframework==3.14.0
drf-extensions==0.7.1
drf-writable-nested==0.7.0
drfdocs2==0.0.16
hyperlink==21.0.0
idna==3.4
incremental==22.10.0
phonenumberslite==8.13.11
pyasn1==0.5.0
pyasn1-modules==0.3.0
pycparser==2.21
pygments==2.15.1
pyopenssl==23.1.1
pytz==2023.3
service-identity==21.1.0
shortuuid==1.0.11
six==1.16.0
sqlparse==0.4.4
twisted[tls]==22.10.0
txaio==23.1.1
typing-extensions==4.6.0
zope-interface==6.0

Now in admin this field loks like

but in default django admin it's looks like

How to make that currency shows too?

Thank you so much for such a great admin!

Hey guys, cool UI.

Only thing is it seems really difficult to setup.

Tried using it but the UI doesn't change and getting an error in the admin panel:

Installed it and added it to the installed_apps section but it seems like it's missing a lot of steps in the readme...

Thanks for the awesome project. Im using firefox for ubuntu 117.0

In the action section in a normal admin page:

Looks like this

I have a custom frontend js-component framework by alipinejs ,also build with tailwind

But load the js-componet js file must be after load the alipinejs js file.

It just add "defer" attribute into js-component js file tag in HTML

So，how to load js file use static by defer on settings， this ⬇

This can be fixed by adding text-right lg:text-left to the styles for the parent element like so.

Before

<div class="flex items-center">
    <div class="block flex flex-col align-end">
        <h3>
            asd asd
        </h3>
        <p class="text-gray-500 text-xs">
            [email protected]
        </p>
    </div>
</div>

After

<div class="flex items-center text-right lg:text-left">
    <div class="block flex flex-col align-end">
        <h3>
            asd asd
        </h3>

        <p class="text-gray-500 text-xs">
            [email protected]
        </p>
    </div>
</div>

this is how the default select2 for autocomplete fields is rendered

Hello,

I noticed that automatic color scheme selection based on system preferences is not working (at least in my environment).
Switching to dark manually works fine, switching back to "System" switches back to light mode. Other websites are detecting my preference correctly (e.g. tailwindcss.com).
Enabling "prefers-color-scheme: dark" in Chrome Developer Tool doesn't switch the scheme, enabling "Automatic dark mode" switches the theme. Maybe system preference detection has a bug?

OS: macOS 13.4
Browser: Chrome 114.0.5735.106 / Safari 16.5

this is before opening the date widget

this is after

What do you think if this kind of widget opens to the left?

Installed absolutely fresh django, then django-unfold. Everything's great except any input fields (textarea, datepicker etc.). Looks like It doesn't catch right classes. Do I have to write somewhere how inputs should look like?

It would be helpful (for beginners like me) to see a code example of an action. Esp because the action behaves differently from the standard Django admin actions (which are also not documented extensively).

I had trouble creating a detail page action. It was not clear what to return from the action. This now works, but now I'm trying to find out how to integrate the view with the Unfold templates. IOW what templates to extend.

TIA!

Hey guys, the project is amazing!

But I'm having some troubles integrating it with some 3rd party packages, like django-fsm-admin or django-celery-beat (being this the most important)

The errors I get on the admin with these packages are like this one:

'PeriodicTaskAdmin' object has no attribute 'readonly_preprocess_fields'

Do you have any idea why? Do you know any way to solve it?

Django FSM is great for handling the "states" of your objects.

It also provides and option to have and "button" that will initiate the state transition. These buttons now break Django Unfold styling.

To reproduce:

1. Create a model with at least two fields, of which one is many to many. In this example I use a field called multiselect_field.
2. Override the __str__ property of the model to output a suitably long string.
3. Make the many to many field auto-complete in the admin class, and put the autocomplete M2M field as the first field in a two-column fieldset.

autocomplete = ("multiselect_field",)
fieldsets = (
        (
            "Fieldset title",
            {
                "fields": (
                    ("multiselect__field", "any_field"),
                )
            },
        ),
)

Thanks for the great work!

This is regarding the customized action feature.
As for "Detail" and "Submit line" actions, the existing get_actions_detail and get_actions_submit_line methods are just simply derived from the global view based get_actions method which cannot change the action lists based on the target object/instance's attributes.

One reference could be https://github.com/crccheck/django-object-actions.

The desired change would be that the methods also take "object_id" as inputs.

The RangeDateFilter and RangeDateTimeFilter filter classes will only display the calendar select if the admin they're being used on defines admin actions. If that class doesn't define any actions, only the text field will be rendered.

RangeDateFilter on admin with actions:

RangeDateFilter on admin without actions: