paged

back/tmc/views.py

@@ -1,6 +1,6 @@
 from django.shortcuts import render
 
-from rest_framework import viewsets
+from rest_framework import viewsets, filters
 
 from .models import BaseCustomField, CustomTable, Territory, TerritoryItem
 from .serializers import (
@@ -17,14 +17,18 @@ class BaseCustomFieldViewSet(viewsets.ModelViewSet):
 
 
 class CustomTableViewSet(viewsets.ModelViewSet):
+    page_size_query_param = "size"
     queryset = CustomTable.objects.all()
     serializer_class = CustomTableSerializer
 
 
 class TerritoryItemViewSet(viewsets.ModelViewSet):
-    page_size_query_param = 'size'
+    page_size_query_param = "size"
     queryset = TerritoryItem.objects.all()
     serializer_class = TerritoryItemSerializer
+    
+    filter_backends = [filters.SearchFilter]
+    search_fields = ["name"]
 
 
 class TerritoryViewSet(viewsets.ModelViewSet):

front/pages/table/[id].vue

@@ -1,17 +1,49 @@
 <script setup lang="ts">
+type location = { id: number, name: string }
+type tmc_field = { name: string, comment: string, id: number, text: string, file_id: string, image_aws_url: string, }
+
+type api_field = {
+    id: number;
+    name: string;
+    comment: string;
+}
+type api_tmc_field = {
+    id: number;
+    text: string;
+    file_id?: any;
+    image_aws_url?: any;
+    field: api_field;
+}
+type api_tmc_list = {
+    id: number;
+    name?: any;
+    field: api_tmc_field[];
+    tmc: {
+        id: number,
+        name: string,
+        fields: api_field[]
+    }
+}
 const route = useRoute()
 const item = ref()
-const ter = ref()
 const terdeep = ref()
-const state = reactive({} as { name?: string, location?: { id: number, name: string } })
+const state = reactive({} as
+    {
+        id: string, name?: string,
+        location: location,
+        tmc: {
+            name: string, id: number,
+            fields: tmc_field[]
+        }[]
+    })
 
 const loadData = async () => {
     const items_data = await apiCall<any>(`tgbot/${route.params.id}/`)
     item.value = items_data
     state.id = items_data.id
     state.name = items_data.name
-    state.location = items_data.location.id
-    state.tmc = items_data.tmc.map(el => {
+    state.location = items_data.location
+    state.tmc = items_data.tmc.map((el: api_tmc_list) => {
         return {
             name: el.tmc.name,
             id: el.id,
@@ -28,22 +60,17 @@ const loadData = async () => {
         }
     })
 }
-const loadTer = async () => {
-    const terdeep_data = await apiCall<ApiPaged<{ id: number, name: string }>>(`tmc/terdeep/?size=1000`)
-    terdeep.value = terdeep_data.results
-}
-const search = (q: string) => {
-    if (q) {
-        return terdeep.value.filter((el: any) => el.name.toLowerCase().indexOf(q.toLowerCase()) !== -1).slice(0, 10)
-    } else {
-        return terdeep.value.slice(0, 10)
-    }
+
+const search = async (q: string) => {
+    const terdeep_data = await apiCall<ApiPaged<{ id: number, name: string }>>(`tmc/terdeep/?search=${q}`)
+    terdeep.value = [toRaw(state.location), ...terdeep_data.results]
+    return terdeep.value
 }
 onMounted(async () => {
     await loadData()
-    loadTer()
+    terdeep.value = [toRaw(state.location)]
 })
-const patchField = async (field) => {
+const patchField = async (field: { id: number, text: string }) => {
     await apiCall(`tgbot/items/${field.id}/`, 'patch', { text: field.text })
 }
 const patchItem = async () => {
@@ -52,15 +79,21 @@ const patchItem = async () => {
 </script>
 <template>
     <UForm :state="state" v-if="item">
-        <div class="grid grid-cols-4 gap-2 items-end w-1/2">
-            <UFormGroup label="Название" class="col-span-3">
-                <UInput v-model="state.name" />
-            </UFormGroup>
-            <UButton @click="patchItem">Сохранить</UButton>
-            <UFormGroup label="Локация" class="col-span-3">
-                <USelectMenu v-model="state.location" :options="terdeep" :searchable="search" value-attribute="id"
-                    option-attribute="name" />
-            </UFormGroup>
+        <div class="grid grid-cols-4 gap-2 items-end">
+            <div class="col-span-2">
+                <div class="flex items-end gap-2">
+                    <UFormGroup label="Название" class="grow">
+                        <UInput v-model="state.name" />
+                    </UFormGroup>
+                    <UButton @click="patchItem">Сохранить</UButton>
+                </div>
+            </div>
+            <div class="col-span-2">
+                <UFormGroup label="Локация" class="col-span-3">
+                    <USelectMenu v-model="state.location.id" :options="terdeep" :searchable="search"
+                        value-attribute="id" option-attribute="name" :disabled="true" />
+                </UFormGroup>
+            </div>
             <UFormGroup label="ТМЦ" v-if="state.tmc" class="col-span-4">
                 <div v-for="el in state.tmc" class="ml-4">
                     <strong>{{ el.name }}</strong>

front/pages/tmc/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const items = ref()
 onMounted(async () => {
-    const items_data = await apiCall<ApiPaged<TmcItem>>(`tmc/items/`)
+    const items_data = await apiCall<ApiPaged<TmcItem>>(`tmc/items/?size=30`)
     items.value = items_data.results
 
 })

front/utils/apiCall.ts

@@ -1,6 +1,6 @@
 import { apiBase } from '~/helpers';
 
-export default async function <T>(path: string, method = 'GET', body = null) {
+export default async function <T>(path: string, method = 'GET', body: any = null) {
     const headers = new Headers();
     headers.append("Content-Type", "application/json");
     return await $fetch<T>(`${apiBase}/${path}`, { method, headers, body })