add first field

front/app.vue

@@ -7,7 +7,7 @@ import 'assets/main.scss'
       HEADER
     </div>
     <div class="sidebar">
-      SIDEBAR
+      <Sidebar/>
     </div>
     <div class="content">
       <NuxtPage />

front/assets/main.scss

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .container {
-    @apply grid grid-cols-12 mx-auto
+    @apply grid grid-cols-12 mx-auto gap-4
 }
 
 .header {

front/components/sidebar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const links = [
+    {
+        label: 'Организации',
+        icon: 'i-heroicons-archive-box',
+        to: '/organization'
+    }
+]
+</script>
+<template>
+    <UVerticalNavigation :links="links" />
+</template>

front/helpers.ts

@@ -0,0 +1,15 @@
+const config = useRuntimeConfig()
+export const apiBase = config.public.apiBase
+
+export type ApiTypeBase = {
+    count: number;
+    next?: any;
+    previous?: any;
+    results: any[];
+}
+
+export type ApiTypeExternalPartners = {
+    'НаименованиеПолное': string;
+    Description: string;
+    Ref_Key: string;
+}

front/nuxt.config.ts

@@ -1,5 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  ssr: false,
   devtools: { enabled: true },
-  modules: ["@nuxt/ui"]
+  modules: ["@nuxt/ui"],
+  runtimeConfig: {
+    public: {
+      apiBase: '',
+    },
+  },
 })

front/pages/organization/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { apiBase } from '~/helpers';
+import type { ApiTypeBase } from '~/helpers';
+
+const headers = new Headers();
+headers.append("Content-Type", "application/json");
+
+const { data } = await useFetch<ApiTypeBase>(`${apiBase}/partner/`, { headers })
+</script>
+<template>
+    <div class="mb-4">
+        <UButton icon="i-heroicons-plus" to="organization/new">Новая инвентаризация</UButton>
+    </div>
+    <div class="mb-4">
+        <UTable :rows="data?.results" />
+    </div>
+</template>

front/pages/organization/new.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { apiBase } from '~/helpers';
+import type { ApiTypeExternalPartners } from '~/helpers';
+
+const state = reactive({
+    organization: undefined,
+    password: undefined
+})
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+    // Do something with event.data
+    console.log(event.data)
+}
+const externalPartners = ref<ApiTypeExternalPartners[]>([])
+const searchInExternal = (q: string) => {
+    return externalPartners.value.filter(el => {
+        return el.Description.toLowerCase().indexOf(q.toLowerCase()) !== -1
+    }).slice(0, 10)
+}
+onMounted(async () => {
+    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/partner/external/`)
+    if (data.value) {
+        externalPartners.value = data.value
+    }
+})
+</script>
+<template>
+    <div class="grid grid-cols-10">
+        <div class="col-span-3">
+            <UForm :state="state" class="flex flex-col gap-4" @submit="onSubmit">
+                <UFormGroup label="Выбрать организацию" name="organization">
+                    <USelectMenu v-model="state.organization"
+                        :options="externalPartners" value-attribute="Ref_Key"
+                        option-attribute="Description" 
+                        :searchable="searchInExternal"
+                        searchable-placeholder="Выберите организацию из списка контрагентов" />
+                </UFormGroup>
+
+                <UFormGroup label="Password" name="password">
+                    <UInput v-model="state.password" type="password" />
+                </UFormGroup>
+
+                <UButton type="submit">
+                    Сохранить
+                </UButton>
+            </UForm>
+        </div>
+    </div>
+</template>