I took unicorn for a spin just a night ago and I've really taken a liking to it. However, reading throughout the documentation, I do not see anything about file uploads. I have some forms that I want simplified with unicorn's magic. Am I missing something? How do I approach this?

Hi! This project is really good! I have a problem where I have a form with a list of orders and each order with its check. When checking the check, I go to the python code to store that checked order. However, the user marks many orders very quickly and this makes them lose which ones are marked previously. Thanks.

I'm building a complex unicorn component for a page. The case is list of audios in a table as image below.

Here my python code.

from django.core.paginator import Paginator
from django.utils.translation import ugettext_lazy as _  # noqa
from django_unicorn.components import UnicornView

from dashboard.models import Document


class AudioLibraryView(UnicornView):
    first_load = False
    items_per_page = 10
    title = ''
    page_index = 1
    paginator = None
    page = None

    class Meta:
        exclude = ()
        javascript_exclude = ('paginator', 'page', 'http_request', '_search_documents')

    # def hydrate(self):
    #     print('first_load', self.first_load)
    #     if self.first_load is True:
    #         self._search_documents()
    #     self.first_load = False

    def _search_documents(self):
        qs = Document.objects.get_documents_by_user(
            user=self.request.user
        )
        if self.title:
            qs = qs.filter(title__icontains=self.title)

        paginator = Paginator(qs, self.items_per_page)
        self.paginator = paginator
        self.page = paginator.page(self.page_index)
        return self.page

    def search_documents(self):
        self._search_documents()

    def next_page(self):
        self.page_index += 1
        self._search_documents()

    def previous_page(self):
        self.page_index = max(self.page_index - 1, 1)
        self._search_documents()

The problem that I found was that the function search_documents was called multiples times before the component render. That's happened because I put a for loop calling search_documents and also the Pesquisa button to call search_documents. To solve this problem, I bind search_documents only on Pesquisa and the for loop iterates over page.object_list, that is loaded on _search_documents. However, I needed to put the fallowing code to load the table at first time load.

<script type="text/javascript">
  (function(){
    setTimeout(function(){document.getElementById('button-get-documents').click();}, 500);
  })();
</script>

My question is if there a native way to do this load at first time.

Here my unicorn html component code.

<div>     
          <div class="inline-flex flex-row max-w-sm md:max-w-md mb-6 items-center">

            <input unicorn:model="page_index" type="hidden" value="{{page_index}}">
            
            <div class="">
              <label class="">
                  <input unicorn:model.defer="title" type="text" name="name" class="border-radius-none mt-1 w-full rounded-md border-neutral-300 focus:border-primary-800" placeholder="{% trans "Title" %}" maxlength="100" required="" autocomplete="off">
              </label>
            </div>

            <div class="ml-4">
              <a id="btn-search-documents" unicorn:click="search_documents" class="flex cursor-pointer justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-primary-600 border border-transparent rounded-full active:bg-primary-600 hover:bg-primary-500 focus:outline-none focus:shadow-outline-primary">
                  <span class="jam jam-search mr-1 text-lg"></span>
                  <span>{% trans "Search" %}</span>
              </a>
            </div>
            
          </div>

          <div class="w-full overflow-hidden rounded-lg border-2 shadow-xs">
            <div class="w-full overflow-x-auto">
              <table class="w-full table-auto whitespace-no-wrap">
                <thead>
                  <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                    <th class="px-4 py-3">{% trans "Title" %}</th>
                    <th class="px-4 py-3">{% trans "Voice" %}</th>
                    <th class="px-4 py-3">{% trans "Speed" %}</th>
                    <th class="px-4 py-3">{% trans "Created" %}</th>
                    <th class="px-4 py-3">{% trans "Status" %}</th>
                    <th class="px-4 py-3">{% trans "Pages" %}</th>
                    <th class="px-4 py-3">{% trans "Actions" %}</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                  
                  {% for doc in page.object_list %}
                  
                  <tr class="dark:text-gray-400">
                    <td class="px-3 py-2">
                      <div class="flex items-center text-sm">
                        <div>
                          <a class="link text-primary-500" href="/html/soarvoice/soarvoice.html?text-editor&doc_id={{doc.id}}"><span class="font-semibold">{{doc.title}}</span></a>
                        </div>
                      </div>
                    </td>
                    <td class="px-3 py-2 text-sm">
                      {{doc.voice.name}}
                    </td>
                    <td class="px-3 py-2 text-sm">
                      {{doc.get_speed_display}}
                    </td>
                    <td class="px-3 py-2 text-sm">
                    {{doc.created|date:"d/m/Y"}}
                    </td>
                    <td class="px-3 py-2 text-sm">
                        {% if doc.status %}
                            <span class="px-2 py-1 font-semibold leading-tight text-primary-700 bg-primary-100 rounded-full dark:bg-primary-700 dark:text-primary-100">{% trans "Done" %}</span>
                        {% else %}
                            <span class="inline px-2 py-1 font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-primary-100">{% trans "Working" %}
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-3 py-2 text-sm">
                    {{doc.created|date:"d/m/Y"}}
                    </td>
                    <td class="px-3 py-2 text-sm">
                      <div class="inline-flex">
                        <button unicorn:click="delete({{doc.id}})" class="mr-2 flex px-3 py-1 text-xs font-bold leading-5 text-white transition-colors duration-150 bg-primary-600 border border-transparent rounded-md active:bg-primary-600 hover:bg-primary-700 focus:outline-none focus:shadow-outline-primary">
                          <span class="text-xl jam jam-play"></span>
                          {% trans "Play" %}
                        </button>
                        <button unicorn:click="delete({{doc.id}})" class="px-3 py-1 text-xs font-bold leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-md active:bg-red-600 hover:bg-red-700 focus:outline-none focus:shadow-outline-red">
                          {% trans "Delete" %}
                        </button>
                      </div>
                    </td>
                  </tr>
                  
                  {% endfor %}

                </tbody>
              </table>
            </div>
            <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
              <span class="flex items-center col-span-3">
                {{ page_index }} {% trans "of" %} {{paginator.num_pages}}
              </span>
              <span class="col-span-2"></span>
              <!-- Pagination -->
              <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
                <nav aria-label="Table navigation">
                  <ul class="inline-flex items-center">
                    <li>
                      <button unicorn:click="previous_page" class="flex align-middle px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple" aria-label="Previous">
                        <svg aria-hidden="true" class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                          <path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
                        </svg>
                        <span class="inline text-md">{% trans "Previous" %}</span>
                      </button>
                    </li>
                    <li>
                      <button unicorn:click="next_page" class="flex align-middle px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple" aria-label="Next">
                        <span class="inline text-md">{% trans "Next" %}</span>
                        <svg class="w-5 h-5 fill-current" aria-hidden="true" viewBox="0 0 20 20">
                          <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
                        </svg>
                      </button>
                    </li>
                  </ul>
                </nav>
              </span>
            </div>
          </div>
</div>

<script type="text/javascript">
  (function(){
    setTimeout(function(){document.getElementById('btn-search-documents').click();}, 500);
  })();
</script>

Hi there,

thanks a lot for creating for us a new magic!

I am trying to get through the docs and being stuck on DbModel part: https://www.django-unicorn.com/docs/django-models/#dbmodel I've followed the examples, here is what I have:

model:

class Todo(models.Model):
    description = models.CharField(max_length=50)
    is_completed = models.BooleanField(default=False, blank=True)
    due_date = models.DateField(null=True, blank=True)

unicorn view ('add_todo_test.py')

from django_unicorn.components import UnicornView
from django_unicorn.db import DbModel

from todos.models import Todo


class AddTodoTestView(UnicornView):
    class Meta:
        db_models = [DbModel("todo", Todo)]

    def save(self):
        print("A new book will be created automatically")
        pass

and component ('add-todo-test.html')

<div>
  <div>
    <input unicorn:db="todo" unicorn:field.defer="description" type="text" id="description" />
    {{ todo.description }}
  </div>
  <div>
    <input unicorn:db="todo" unicorn:field.defer="due_date" type="text" id="due_date" />
    {{ todo.due_date }}
  </div>
  <button unicorn:click="save">Save</button>
</div>

Component is rendered, but it doesn't work and I get the following error message in browser's dev console:

component.js:404 Uncaught Error: Setting a field value requires a model to be set
    at component.js:404
    at Array.forEach (<anonymous>)
    at Component.setDbModelValues (component.js:398)
    at Module.componentInit (unicorn.js:35)
    at (index):92
(anonymous) @ component.js:404
setDbModelValues @ component.js:398
componentInit @ unicorn.js:35
(anonymous) @ (index):92

I simply cannot understand what am I doing wrong :)

P.S. Don't know if that plays any role, but in PyCharm I get the following warning:

Hi,
I'm trying to register user via django-unicorn but I'm having issue with session:

File "REDACTED/unicorn/app/components/email.py", line 57, in register_email  
    login(self.request, user)  
  File "REDACTED/.venv/lib/python3.9/site-packages/django/contrib/auth/__init__.py", line 102, in login  
    if SESSION_KEY in request.session:  
AttributeError: 'NoneType' object has no attribute 'session'

Here is the code I'm running:

def register_email(self):  # TODO: Add rate limiting
            pwd = get_random_string(32)
            user = CustomUser.objects.create_user(email=self.email, password=pwd)
            user = authenticate(email=self.email, password=pwd)
            login(self.request, user)
            print("logged")
            return redirect('/register')

Hope this helps.

There are some issues on mobile.

• Brave Browser Mobile Android 8.0.1
• Chrome mobile

From: https://old.reddit.com/r/django/comments/kjamxv/full_stack_framework_for_django/ggx53ee/

There is only the message django_unicorn.errors.ComponentLoadError: 'foo' component could not be loaded. But it's hard to see where the problem is. This patch adds the message from the original exception to the output.. fixes #277

…at the bottom

I didn't find a way to implement an infinite scroller with the visibility attribute because it only call the fonction one time and then the element is set to visible. I added this scroll attribute and it seems to work well. I don't know if the simple name "scroll" is explicit enough ^^'

This is my first "try/contribution" to an open source project so please tell me if there is something missing ^^

I have followed the screencast. I have followed the tutorials. I have tried the example. Everything always seems about to work but it's just static. No "live updates" are happening to the counters, the todo app, or any other component I've tried. I tried installing everything with poetry as well. For some reason, nothing seems to "move". With the dev tools, I don't see any network requests for whatever component I try to use. I also get the errors below. It looks like they have something to do with my issue.

Firefox browser: Loading module from “http://127.0.0.1:8000/static/js/unicorn.js” was blocked because of a disallowed MIME type (“text/plain”). Loading failed for the module with source “http://127.0.0.1:8000/static/js/unicorn.js”. Unicorn is missing. Do you need {% load unicorn %} or {% unicorn-scripts %}?

Chrome browser: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec. Unicorn is missing. Do you need {% load unicorn %} or {% unicorn-scripts %}?

FYI: {% load unicorn %} and {% unicorn-scripts %} have been included in all my tries.

Any help is highly appreciated!

• Fixed bugs regarding setting model fields
• Fixed bugs relating using setattr with ManyToMany and ManyToOne relations instead of calling their set() method
• Fixed errors regarding setting Foreignkey value using only primary key

Problem

I found bugs regarding setting values for models in set_property_from_data in views/utils.py. Though the problem is not one easily found, My app tended to result in errors asking to call the set method of a many to one field (reverse foreignkey) rather that set the values directly. I also found that one model I had that depended on a custom user model, was having errors raised because it did not have a name attribute

@timed
def set_property_from_data(
    component_or_field: Union[UnicornView, UnicornField, Model], name: str, value: Any,
) -> None:
    """
    Sets properties on the component based on passed-in data.
    """

    if not hasattr(component_or_field, name):
        return
    if isinstance(component_or_field, Model):
        set_property_for_model(component_or_field, name,value = value)
        return

    field = getattr(component_or_field, name)
    component_field_is_model_or_unicorn_field = _is_component_field_model_or_unicorn_field(
        component_or_field, name
    )

    # UnicornField and Models are always a dictionary (can be nested)
    if component_field_is_model_or_unicorn_field:
        # Re-get the field since it might have been set in `_is_component_field_model_or_unicorn_field`
        field = getattr(component_or_field, name)

        if isinstance(value, dict):
            for key in value.keys():
                key_value = value[key]
                set_property_from_data(field, key, key_value)
        else:
            set_property_from_data(field, field.name, value)            #<---Problem if Model has no name attribute.
    else:
        type_hints = get_type_hints(component_or_field)

        if name in type_hints:
            # Construct the specified type by passing the value in
            # Usually the value will be a string (because it is coming from JSON)
            # and basic types can be constructed by passing in a string,
            # i.e. int("1") or float("1.1")

            if is_dataclass(type_hints[name]):
                value = type_hints[name](**value)
            else:
                value = type_hints[name](value)
                

        if hasattr(component_or_field, "_set_property"):
            # Can assume that `component_or_field` is a component
            component_or_field._set_property(name, value)
        else:
            setattr(component_or_field, name, value)                #<---- Problem source Many relation field.

To fix this I found it necessary to implement a separate helper function to handle model assignments that could take care of all the problem cases.

I'm having some issues which I'm not sure will be covered by this issue or if is a separate issues. I'm testing a combination of polling + manually modifying the state and have created, and have update the polling example in this branch:

<div unicorn:poll-1000="get_date">
    current_time: {{ current_time|date:"s" }}

    <button u:click="slow_update()">Increase counter: {{counter}}</button>
</div>

class PollingView(UnicornView):
    polling_disabled = False
    counter = 0
    current_time = now()

    def slow_update(self):
        self.counter += 1
        time.sleep(0.8)  # Simulate slow request

    def get_date(self):
        self.current_time = now()

I see that if I have slow requests (forced with a sleep in this example) and the polling is started just after the button click, the counter is not increased, as I guess the counter is overwritten my the state from the polling.

However, I'm not sure if the polling is an "action" so it fits here?

Originally posted by @frbor in https://github.com/adamghill/django-unicorn/issues/111#issuecomment-763049543

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps json5 and tsconfig-paths. These dependencies needed to be updated together. Updates json5 from 2.2.0 to 2.2.3

Updates tsconfig-paths from 3.9.0 to 3.10.1

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps certifi from 2022.9.24 to 2022.12.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hi! I'm trying to download PDF files from the django runserver development server, "python manager.py runserver", inside a django-unicorn application, but I can't download them. Follow the code > with open(os.path.join("c:/mydirectory/tmp", filename + '.pdf'), 'rb') as f: data = f.read()

            response = HttpResponse(data, content_type='application/pdf')
            response['Content-Disposition'] = 'attachment; filename="' + filename + '.pdf"'
            
            return response

No error occurs, but accessing from another machine I can't download. Is there any way to be reproduced? Thanks!

Even if you change the parent's value in the child component, it doesn't change in the template. The parent component's children property value at the time of completion of rendering is empty at other times. I attach an example project repository. After pip install -r requirements.txt, you can check it with runserver. https://github.com/LeeHanYeong/unicorn-issue

Parent

class SampleView(UnicornView):
    sample_value = "default"

    def sample(self):
        self.sample_value = "sample"

    def rendered(self, html):
        print(self.children)

    def updated(self, name, value):
        # updated not called
        print("updated", name, value)

    def set_sample(self, value):
        self.sample_value = value
        print(f"parent.set_sample({value})")

        # self.children is Empty
        # (All children present at the time of rendering disappear)
        print(self.children)

Child1

class ChildView(UnicornView):
    def child_click(self):
        print("child_click")
        self.parent.sample_value = "child"
        # Parent's value doesn't change in template
        print(self.parent.sample_value)

Child2

class Child2View(UnicornView):
    def child2_click(self):
        print("child2_click")
        self.parent.set_sample("child2")
        # Parent's value doesn't change in template
        print(self.parent.sample_value)