from django import forms
from django.db import models as django_models
from .models import ImageMaterial, VideoMaterial, AudioMaterial
from typing import List


class BaseFilterMixin:
    """Base mixin for filter functionality"""
    @property
    def qs(self):
        if not hasattr(self, '_queryset'):
            self._queryset = self.filter_queryset(self.Meta.model.objects.all())
        return self._queryset

    def __init__(self, data=None, *args, **kwargs):
        super().__init__(data, *args, **kwargs)
        self._queryset = None


class BaseFilterCollection(BaseFilterMixin, forms.Form):
    """Base class for filter collections with common fields"""
    common_search_query = forms.CharField(label="Общий поиск", required=False)
    keywords = forms.CharField(label="Ключевые слова", required=False)
    persons = forms.CharField(label="Персоналии", required=False)
    annotation = forms.CharField(label="Аннотация", required=False)
    archive_number = forms.CharField(label="Архивный номер", required=False)
    source = forms.CharField(label="Источник поступления", required=False)
    founder = forms.CharField(label="Фондообразователь", required=False)
    creation_place = forms.CharField(label="Место создания", required=False)
    creation_date_from = forms.DateField(label="Дата создания от", required=False)
    creation_date_to = forms.DateField(label="Дата создания до", required=False)

    def _apply_field_filter(self, queryset, field_name: str, value: str):
        """Apply individual field filter"""
        if not value:
            return queryset

        if field_name == 'common_search_query':
            # Base search fields
            base_fields: List[django_models.Q] = [
                django_models.Q(keywords__icontains=value),
                django_models.Q(annotation__icontains=value),
                django_models.Q(persons__icontains=value),
                django_models.Q(archive_number__icontains=value),
                django_models.Q(source__icontains=value),
                django_models.Q(founder__icontains=value),
                django_models.Q(creation_place__icontains=value),
            ]

            # Add model-specific fields
            if hasattr(self.Meta.model, 'author'):
                base_fields.append(django_models.Q(author__icontains=value))
            if hasattr(self.Meta.model, 'title'):
                base_fields.append(django_models.Q(title__icontains=value))
            if hasattr(self.Meta.model, 'description'):
                base_fields.append(django_models.Q(description__icontains=value))

            # Combine Q objects with OR operator
            query = django_models.Q()
            for field in base_fields:
                query |= field
            return queryset.filter(query)

        elif field_name in ['creation_date_from', 'creation_date_to']:
            # Skip date fields as they are handled in filter_queryset
            return queryset
        else:
            return queryset.filter(**{f"{field_name}__icontains": value})

    def filter_queryset(self, queryset):
        """Apply all filters to queryset"""
        if not self.is_valid():
            return queryset

        # Apply basic field filters
        for name, field in self.fields.items():
            if name not in ['creation_date_from', 'creation_date_to'] and self.cleaned_data.get(name):
                field_value = self.cleaned_data[name]
                queryset = self._apply_field_filter(queryset, name, field_value)

        # Handle date range separately
        date_from = self.cleaned_data.get('creation_date_from')
        date_to = self.cleaned_data.get('creation_date_to')

        if date_from:
            queryset = queryset.filter(creation_date__gte=date_from)
        if date_to:
            queryset = queryset.filter(creation_date__lte=date_to)

        return queryset


class ImageMaterialFilterForm(BaseFilterCollection):
    """Filter collection for image material search."""
    author = forms.CharField(label="Автор", required=False)
    photo_type = forms.CharField(label="Вид фотодокумента", required=False)
    color = forms.CharField(label="Цветность", required=False)

    class Meta:
        model = ImageMaterial
        fields = [
            'common_search_query',
            'keywords',
            'persons',
            'annotation',
            'archive_number',
            'source',
            'founder',
            'creation_place',
            'creation_date_from',
            'creation_date_to',
            'author',
            'photo_type',
            'color',
        ]


class VideoMaterialFilterForm(BaseFilterCollection):
    """Filter collection for video material search."""
    title = forms.CharField(label="Название", required=False)
    description = forms.CharField(label="Описание сюжета", required=False)
    director = forms.CharField(label="Режиссер", required=False)
    scriptwriter = forms.CharField(label="Сценарист", required=False)
    cameraman = forms.CharField(label="Оператор", required=False)
    studio = forms.CharField(label="Студия", required=False)
    color = forms.CharField(label="Цветность", required=False)
    language = forms.CharField(label="Язык", required=False)
    video_type = forms.CharField(label="Вид документа", required=False)

    class Meta:
        model = VideoMaterial
        fields = [
            'common_search_query',
            'keywords',
            'persons',
            'annotation',
            'archive_number',
            'source',
            'founder',
            'creation_place',
            'creation_date_from',
            'creation_date_to',
            'title',
            'description',
            'director',
            'scriptwriter',
            'cameraman',
            'studio',
            'color',
            'language',
            'video_type',
        ]


class AudioMaterialFilterForm(BaseFilterCollection):
    """Filter collection for audio material search."""
    title = forms.CharField(label="Название", required=False)
    text_author = forms.CharField(label="Автор текста", required=False)
    performer = forms.CharField(label="Исполнитель", required=False)
    music_author = forms.CharField(label="Автор музыки", required=False)
    conductor = forms.CharField(label="Дирижер", required=False)
    language = forms.CharField(label="Язык", required=False)

    class Meta:
        model = AudioMaterial
        fields = [
            'common_search_query',
            'keywords',
            'persons',
            'annotation',
            'archive_number',
            'source',
            'founder',
            'creation_place',
            'creation_date_from',
            'creation_date_to',
            'title',
            'text_author',
            'performer',
            'music_author',
            'conductor',
            'language',
        ]from django.db import models
from django import forms
from datetime import datetime


class BaseFilterMixin:
    """Base mixin for filter functionality"""

    @property
    def qs(self):
        if not hasattr(self, '_queryset'):
            self._queryset = self.filter_queryset(self.Meta.model.objects.all())
        return self._queryset

    def __init__(self, data=None, *args, **kwargs):
        super().__init__(data, *args, **kwargs)
        self._queryset = None


class DateRangeFilterField(forms.Form):
    creation_date_from = forms.DateField(required=False)
    creation_date_to = forms.DateField(required=False)

    def filter_queryset(self, queryset):
        date_from = self.cleaned_data.get('creation_date_from')
        date_to = self.cleaned_data.get('creation_date_to')

        if date_from:
            queryset = queryset.filter(creation_date__gte=date_from)
        if date_to:
            queryset = queryset.filter(creation_date__lte=date_to)
        return queryset


class BaseFilterCollection(BaseFilterMixin, forms.Form):
    """Base class for filter collections"""

    def filter_queryset(self, queryset):
        """Apply all filters to queryset"""
        if not self.is_valid():
            return queryset

        for name, field in self.fields.items():
            if self.cleaned_data.get(name):
                field_value = self.cleaned_data[name]
                queryset = self._apply_field_filter(queryset, name, field_value)

        return queryset

    def _apply_field_filter(self, queryset, field_name, value):
        """Apply individual field filter"""
        if not value:
            return queryset

        if field_name == 'common_search_query':
            return queryset.filter(
                models.Q(keywords__icontains=value) |
                models.Q(annotation__icontains=value) |
                models.Q(persons__icontains=value) |
                models.Q(author__icontains=value)
            )
        elif field_name in ['keywords', 'persons', 'annotation', 'creation_place', 'author', 'title', 'description']:
            return queryset.filter(**{f"{field_name}__icontains": value})
        elif field_name.startswith('creation_date'):
            # Skip date fields as they are handled separately
            return queryset

        return queryset


class ImageMaterialFilterForm(BaseFilterCollection):
    """Filter collection for advanced image material search."""
    common_search_query = forms.CharField(label="Общий поиск", required=False)
    keywords = forms.CharField(label="Ключевые слова", required=False)
    persons = forms.CharField(label="Персоналии", required=False)
    annotation = forms.CharField(label="Аннотация", required=False)
    creation_place = forms.CharField(label="Место создания", required=False)
    author = forms.CharField(label="Автор", required=False)
    creation_date_from = forms.DateField(label="Дата создания от", required=False)
    creation_date_to = forms.DateField(label="Дата создания до", required=False)

    class Meta:
        model = models.ImageMaterial
        fields = [
            'common_search_query',
            'keywords',
            'persons',
            'annotation',
            'creation_place',
            'author',
            'creation_date_from',
            'creation_date_to',
        ]

    def filter_queryset(self, queryset):
        queryset = super().filter_queryset(queryset)

        # Handle date range separately
        date_from = self.cleaned_data.get('creation_date_from')
        date_to = self.cleaned_data.get('creation_date_to')

        if date_from:
            queryset = queryset.filter(creation_date__gte=date_from)
        if date_to:
            queryset = queryset.filter(creation_date__lte=date_to)

        return queryset


class VideoMaterialFilterForm(BaseFilterCollection):
    """Filter collection for video material search."""
    common_search_query = forms.CharField(label="Общий поиск", required=False)
    keywords = forms.CharField(label="Ключевые слова", required=False)
    persons = forms.CharField(label="Персоналии", required=False)
    annotation = forms.CharField(label="Аннотация", required=False)
    title = forms.CharField(label="Заголовок", required=False)
    description = forms.CharField(label="Описание", required=False)
    creation_date_from = forms.DateField(label="Дата создания от", required=False)
    creation_date_to = forms.DateField(label="Дата создания до", required=False)

    class Meta:
        model = models.VideoMaterial
        fields = [
            'common_search_query',
            'keywords',
            'persons',
            'annotation',
            'title',
            'description',
            'creation_date_from',
            'creation_date_to',
        ]

    def filter_queryset(self, queryset):
        queryset = super().filter_queryset(queryset)

        # Handle date range separately
        date_from = self.cleaned_data.get('creation_date_from')
        date_to = self.cleaned_data.get('creation_date_to')

        if date_from:
            queryset = queryset.filter(creation_date__gte=date_from)
        if date_to:
            queryset = queryset.filter(creation_date__lte=date_to)

        return queryset


class AudioMaterialFilterForm(BaseFilterCollection):
    """Filter collection for audio material search."""
    common_search_query = forms.CharField(label="Общий поиск", required=False)
    keywords = forms.CharField(label="Ключевые слова", required=False)
    persons = forms.CharField(label="Персоналии", required=False)
    annotation = forms.CharField(label="Аннотация", required=False)
    title = forms.CharField(label="Заголовок", required=False)
    creation_date_from = forms.DateField(label="Дата создания от", required=False)
    creation_date_to = forms.DateField(label="Дата создания до", required=False)

    class Meta:
        model = models.AudioMaterial
        fields = [
            'common_search_query',
            'keywords',
            'persons',
            'annotation',
            'title',
            'creation_date_from',
            'creation_date_to',
        ]

    def filter_queryset(self, queryset):
        queryset = super().filter_queryset(queryset)

        # Handle date range separately
        date_from = self.cleaned_data.get('creation_date_from')
        date_to = self.cleaned_data.get('creation_date_to')

        if date_from:
            queryset = queryset.filter(creation_date__gte=date_from)
        if date_to:
            queryset = queryset.filter(creation_date__lte=date_to)

        return queryset<script setup>
import { ref, watch } from "vue";
import BaseInput from "@/components/common/BaseInput.vue";
import DateInput from "@/components/common/DateInput.vue";
import { useRoute, useRouter } from "vue-router";

let route = useRoute()
let router = useRouter()
let commonSearchInput = ref(route.query.common_search_query)
let advancedSearchOn = ref(false)
let dateRangeFrom = ref(route.query.creation_date_from || null)
let dateRangeTo = ref(route.query.creation_date_to || null)

// Advanced search fields for image materials
let keywords = ref(route.query.keywords || '')
let persons = ref(route.query.persons || '')
let annotation = ref(route.query.annotation || '')
let creationPlace = ref(route.query.creation_place || '')
let author = ref(route.query.author || '')

const typesOfSearch = [
  {common: "Общий поиск"},
  {image: "Поиск фотодокументов"},
  {audio: "Поиск фонодокументов"},
  {video: "Поиск киновидеодокументов"}
]
let currentSearchWindow = ref("common")

function handleSubmit() {
  const minInputLength = 3
  if (commonSearchInput.value?.length >= minInputLength) {
    router.push({
      name: "search",
      query: {
        page: 1,
        page_size: 5,
        material_type: route.query.material_type || "image",
        common_search_query: commonSearchInput.value
      }
    })
  }
}

function handleAdvancedSubmit() {
  if (currentSearchWindow.value === 'image') {
    const query = {
      page: 1,
      page_size: 5,
      material_type: 'image'
    }

    // Add non-empty search parameters
    if (keywords.value) query.keywords = keywords.value
    if (persons.value) query.persons = persons.value
    if (annotation.value) query.annotation = annotation.value
    if (dateRangeFrom.value) query.creation_date_from = dateRangeFrom.value
    if (dateRangeTo.value) query.creation_date_to = dateRangeTo.value
    if (creationPlace.value) query.creation_place = creationPlace.value
    if (author.value) query.author = author.value

    router.push({
      name: "search",
      query
    })
  }
}

function stringToDate(dateString) {
  if (dateString) {
    const [day, month, year] = dateString.split('.')
    return new Date(year, month - 1, day)
  }
}

function scrollToOneThirdHeight() {
  const height = window.innerHeight
  window.scrollTo({
    top: height / 2,
    behavior: 'smooth'
  });
}

watch(advancedSearchOn, (newVal) => {
  if (newVal) {
    scrollToOneThirdHeight()
  }
})
</script>

<template>
  <div class="home">
    <div id="datepicker-container"/>
    <div class="wrapper wrapper__indent">
      <div class="search-box">
        <base-input
          @keyup.enter="handleSubmit"
          v-model="commonSearchInput"
          :value="commonSearchInput"
          style="width: 400px; padding: 24px;"
          placeholder="Я ищу"
        />
        <v-btn @click="handleSubmit" variant="outlined" class="search-button">
          <v-icon size="28" class="search-icon" color="primary">mdi-magnify</v-icon>
        </v-btn>
      </div>

      <div class="search-switch">
        <v-switch v-model="advancedSearchOn" label="Расширенный поиск" color="primary-blue"/>
      </div>

      <div v-if="advancedSearchOn" class="advanced-search-box">
        <v-window v-model="currentSearchWindow" show-arrows :continuous="true" style="width: 1000px;">
          <!-- Arrow navigation templates remain the same -->

          <v-window-item
            v-for="(item, index) in typesOfSearch"
            :key="Object.keys(item)[0]"
            :value="Object.keys(item)[0]"
          >
            <v-card class="d-flex justify-center">
              <div class="search-window">
                <p class="d-block ml-10 mt-2 fs-18 fw-regular color-primary-blue">
                  {{ Object.values(item)[0] }}
                </p>
                <div class="pl-10 pr-10 pt-3">
                  <v-divider/>
                </div>

                <!-- Image search fields -->
                <template v-if="currentSearchWindow === 'image'">
                  <div class="d-flex justify-space-between mt-5">
                    <base-input
                      v-model="keywords"
                      class="base-input-size ml-10"
                      placeholder="Ключевые слова"
                    />
                    <base-input
                      v-model="annotation"
                      class="base-input-size mr-10"
                      placeholder="Аннотация"
                    />
                  </div>

                  <div class="d-flex justify-space-between mt-5 pl-10 pr-10" style="height: 30px;">
                    <div class="d-flex justify-space-between">
                      <date-input
                        v-model="dateRangeFrom"
                        placeholder="Дата от"
                        teleport="#datepicker-container"
                        style="width: 155px; margin-right: 13px"
                      />
                      <date-input
                        v-model="dateRangeTo"
                        placeholder="Дата до"
                        teleport="#datepicker-container"
                        :min-date="stringToDate(dateRangeFrom)"
                        style="width: 155px; margin-left: 13px"
                      />
                    </div>
                    <base-input
                      v-model="creationPlace"
                      class="base-input-size"
                      placeholder="Место создания"
                    />
                  </div>

                  <div class="d-flex justify-space-between mt-5" style="height: 30px;">
                    <base-input
                      v-model="author"
                      class="base-input-size ml-10"
                      placeholder="Автор"
                    />
                    <base-input
                      v-model="persons"
                      class="base-input-size mr-10"
                      placeholder="Персоналии"
                    />
                  </div>

                  <div class="d-flex justify-center mt-5">
                    <v-btn
                      color="primary"
                      @click="handleAdvancedSubmit"
                      :disabled="!(keywords || persons || annotation || dateRangeFrom || dateRangeTo || creationPlace || author)"
                    >
                      Поиск
                    </v-btn>
                  </div>
                </template>
              </div>
            </v-card>
          </v-window-item>
        </v-window>
      </div>
      <router-view :key="route.fullPath" />
    </div>
  </div>
</template>

<style lang="scss" scoped>

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-icon {
  height: 60px;
  width: 60px;
  border-radius: 8px;
}

.search-button {
  height: 60px;
  width: 60px;
  border: solid 1px darkgray;
  margin-left: 10px;
}

.search-switch {
  display: flex;
  justify-content: left;
  margin-left: 310px;
}

.advanced-search-box {
  display: flex;
  justify-content: center;
}

.search-window {
  width: 800px;
  height: 250px;
  padding: 15px;
}

.base-input-size {
  width: 340px!important;
  height: 20px!important;
  padding: 15px;
}

v-window-item {
  border: none;
  box-shadow: none;
}
v-window {
  overflow: hidden;
  border: none;
}

.arrow-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border: none;
  background: transparent;
}

.arrow-button.prev-arrow {
  left: 10px;
}

.arrow-button.next-arrow {
  right: 10px;
}

.advanced-search-box:hover .arrow-button {
  opacity: 1;
}

.item {
  width: 900px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  justify-content: left;
}

.item-label {
  display: block;
  font-size: 12px;
}


</style>Watching for file changes with StatReloader
Exception in thread django-main-thread:
Traceback (most recent call last):
  File "/usr/lib/python3.12/threading.py", line 1073, in bootstrapinner
    self.run()
  File "/usr/lib/python3.12/threading.py", line 1010, in run
    self._target(self._args, **self._kwargs)
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/utils/autoreload.py", line 64, in wrapper
    fn(args, kwargs)
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/core/management/commands/runserver.py", line 134, in inner_run
    self.check(display_num_errors=True)
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/core/management/base.py", line 486, in check
    all_issues = checks.run_checks(
                 ^^^^^^^^^^^^^^^^^^
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/core/checks/registry.py", line 88, in run_checks
    new_errors = check(app_configs=app_configs, databases=databases)
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/core/checks/urls.py", line 136, in check_custom_error_handlers
    handler = resolver.resolve_error_handler(status_code)
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/urls/resolvers.py", line 732, in resolve_error_handler
    callback = getattr(self.urlconf_module, "handler%s" % view_type, None)
                       ^^^^^^^^^^^^^^^^^^^
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/utils/functional.py", line 47, in get**
    res = instance.dict[self.name] = self.func(instance)
                                         ^^^^^^^^^^^^^^^^^^^
  File "/home/marcus/.cache/pypoetry/virtualenvs/archive-kffd-eUJ7RipY-py3.12/lib/python3.12/site-packages/django/urls/resolvers.py", line 711, in urlconf_module
    return import_module(self.urlconf_name)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/lib/python3.12/importlib/init.py", line 90, in import_module
    return bootstrap.gcd_import(name[level:], package, level)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "<frozen importlib._bootstrap>", line 1387, in gcdimport
  File "<frozen importlib._bootstrap>", line 1360, in findand_load
  File "<frozen importlib._bootstrap>", line 1331, in findand_load_unlocked write me corrected image material searchjust like I have a regular search on my site, where data is retrieved from the database depending on the type of material (for example, if I select audio materials, then only results for audio materials are retrieved from the database, do the same search by criteria, but for advanced search (for now only for photo documents). You should have fields filled in on the front end and sent to query as the value from the search bar is sent now (this is on the back end), and on the front end, when the results are returned, then in the query in the URL there should also be these values ​​by which the user searched. It works like this now with the value from the search bar. Advanced search fields for image material:     "keywords",             "persons",     "annotation",        "creation_date",    "creation_place",        "author" from serializers u should modify it in HomeView.vue 
<script setup> import { ref, watch } from "vue"; import BaseInput from "@/components/common/BaseInput.vue"; import DateInput from "@/components/common/DateInput.vue"; import { useRoute, useRouter } from "vue-router"; let route = useRoute() let router = useRouter() let commonSearchInput = ref(route.query.common_search_query) let advancedSearchOn = ref(false) let dateRangeFrom = ref(null) let dateRangeTo = ref(null) // Окна расширенного поиска const typesOfSearch = [ {common: "Общий поиск"}, {image: "Поиск фотодокументов"}, {audio: "Поиск фонодокументов"}, {video: "Поиск киновидеодокументов"} ] let currentSearchWindow = ref("common") // по умолчанию общий поиск function handleSubmit() { const minInputLength = 3 if (commonSearchInput.value.length >= minInputLength) { router.push({ name: "search", query: { page: 1, page_size: 5, material_type: route.query.material_type || "image", common_search_query: commonSearchInput.value }})} } function stringToDate(dateString) { if (dateString) { const [day, month, year] = dateString.split('.') return new Date(year, month - 1, day) } } function scrollToOneThirdHeight() { const height = window.innerHeight window.scrollTo({ top: height / 2, behavior: 'smooth' }); } watch(advancedSearchOn, (newVal) => { if (newVal) { scrollToOneThirdHeight() } }) </script> <template> <div class="home"> <div id="datepicker-container"/> <div class="wrapper wrapper__indent"> <div class="search-box"> <base-input @keyup.enter="handleSubmit" v-model="commonSearchInput" :value="commonSearchInput" style="width: 400px; padding: 24px;" placeholder="Я ищу"/> <v-btn @click="handleSubmit" variant="outlined" class="search-button"> <v-icon size="28" class="search-icon" color="primary">mdi-magnify</v-icon> </v-btn> </div> <div class="search-switch"> <v-switch v-model="advancedSearchOn" label="Расширенный поиск" color="primary-blue"/> </div> <div v-if="advancedSearchOn" class="advanced-search-box"> <v-window v-model="currentSearchWindow" show-arrows :continuous="true" style="width: 1000px;" > <template v-slot:prev="{ props }"> <button @click="props.onClick" class="arrow-button prev-arrow"> <v-icon size="36" color="primary">mdi-chevron-left</v-icon> </button> </template> <template v-slot:next="{ props }"> <button @click="props.onClick" class="arrow-button next-arrow"> <v-icon size="36" color="primary">mdi-chevron-right</v-icon> </button> </template> <v-window-item v-for="(item, index) in typesOfSearch" :key="Object.keys(item)[0]" :value="Object.keys(item)[0]" > <v-card class="d-flex justify-center"> <div class="search-window"> <p class="d-block ml-10 mt-2 fs-18 fw-regular color-primary-blue">{{ Object.values(item)[0] }}</p> <div class="pl-10 pr-10 pt-3"> <v-divider/> </div> <div class="d-flex justify-space-between mt-5"> <base-input class="base-input-size ml-10" placeholder="Название"/> <base-input class="base-input-size mr-10" placeholder="Описание"/> </div> <div class="d-flex justify-space-between mt-5 pl-10 pr-10" style="height: 30px;"> <div class="d-flex justify-space-between"> <date-input placeholder="Дата от" teleport="#datepicker-container" v-model="dateRangeFrom" style="width: 155px; margin-right: 13px" /> <date-input placeholder="Дата до" teleport="#datepicker-container" :min-date="stringToDate(dateRangeFrom)" v-model="dateRangeTo" style="width: 155px; margin-left: 13px" /> </div> <base-input class="base-input-size" placeholder="Архивный номер"/> </div> <div class="d-flex justify-space-between mt-5" style="height: 30px;"> <base-input class="base-input-size ml-10" placeholder="Авторы"/> <base-input class="base-input-size mr-10" placeholder="Персоналии"/> </div> </div> </v-card> </v-window-item> </v-window> </div> <router-view :key="route.fullPath" /> </div> </div> </template> <style lang="scss" scoped> .search-box { display: flex; justify-content: center; align-items: center; } .search-icon { height: 60px; width: 60px; border-radius: 8px; } .search-button { height: 60px; width: 60px; border: solid 1px darkgray; margin-left: 10px; } .search-switch { display: flex; justify-content: left; margin-left: 310px; } .advanced-search-box { display: flex; justify-content: center; } .search-window { width: 800px; height: 250px; padding: 15px; } .base-input-size { width: 340px!important; height: 20px!important; padding: 15px; } v-window-item { border: none; box-shadow: none; } v-window { overflow: hidden; border: none; } .arrow-button { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.4s ease; border: none; background: transparent; } .arrow-button.prev-arrow { left: 10px; } .arrow-button.next-arrow { right: 10px; } .advanced-search-box:hover .arrow-button { opacity: 1; } .item { width: 900px; padding: 15px; margin-top: 15px; margin-bottom: 15px; border: 1px solid darkgray; border-radius: 8px; display: flex; justify-content: left; } .item-label { display: block; font-size: 12px; } </style>