From 24705fe8e0bc2aa3d5d67de55fdc8183950d5204 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 18 Jul 2024 16:55:18 +0300
Subject: [PATCH] heading styles

---
 back/api/settings.py         |  1 +
 back/poetry.lock             | 30 +++++++++++++++-
 back/pyproject.toml          |  1 +
 back/tmc/models.py           |  4 ---
 front/assets/main.scss       | 11 +++---
 front/components/sidebar.vue | 10 +++---
 front/nuxt.config.ts         |  6 +++-
 front/package-lock.json      | 70 ++++++++++++++++++++++++++++++++++--
 front/package.json           |  2 ++
 front/pages/table/index.vue  | 43 +++++++++++-----------
 front/pages/tmc/index.vue    | 32 ++++++++++-------
 front/store/images.ts        | 21 +++++++++++
 front/types/index.d.ts       |  7 ++++
 front/utils/apiCall.ts       |  7 ++++
 14 files changed, 193 insertions(+), 52 deletions(-)
 create mode 100644 front/store/images.ts
 create mode 100644 front/utils/apiCall.ts

diff --git a/back/api/settings.py b/back/api/settings.py
index 9f6fc10..6c77a83 100644
--- a/back/api/settings.py
+++ b/back/api/settings.py
@@ -58,6 +58,7 @@ INSTALLED_APPS = [
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "tmc",
+    "djangoviz",
 ]
 
 MIDDLEWARE = [
diff --git a/back/poetry.lock b/back/poetry.lock
index 7e286dd..ec9d46e 100644
--- a/back/poetry.lock
+++ b/back/poetry.lock
@@ -246,6 +246,34 @@ files = [
 [package.dependencies]
 django = ">=4.2"
 
+[[package]]
+name = "djangoviz"
+version = "0.1.1"
+description = "A visualization tool."
+optional = false
+python-versions = ">=3.6.0"
+files = [
+    {file = "djangoviz-0.1.1-py3-none-any.whl", hash = "sha256:2a5ec1a25d94607c898f9236f0f1c72fbaf83e4ac818e38b205d6976e805ad8d"},
+    {file = "djangoviz-0.1.1.tar.gz", hash = "sha256:028970923d8d65e210dc10ab80a51e3e69169cc06894c45b8b14554f12aec06c"},
+]
+
+[package.dependencies]
+django = ">=2.2.0"
+graphqlclient = ">=0.2.0"
+
+[[package]]
+name = "graphqlclient"
+version = "0.2.4"
+description = "Simple GraphQL client for Python 2.7+"
+optional = false
+python-versions = "*"
+files = [
+    {file = "graphqlclient-0.2.4.tar.gz", hash = "sha256:b3305f3df88c04839195754d409a49a2dc3adbcba4ebf9133b5663749e1dd92c"},
+]
+
+[package.dependencies]
+six = "*"
+
 [[package]]
 name = "h11"
 version = "0.14.0"
@@ -742,4 +770,4 @@ zstd = ["zstandard (>=0.18.0)"]
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.11"
-content-hash = "55d9caf79405dd626d2ca38e6603af8bd7fbf754a8b86ba7f03a43b03a13b932"
+content-hash = "e032592fbe04dbdaffbb40512f6dfa13bcd6f0673c9923e79ba0d852205e2c19"
diff --git a/back/pyproject.toml b/back/pyproject.toml
index 1545bc8..f539f8f 100644
--- a/back/pyproject.toml
+++ b/back/pyproject.toml
@@ -18,6 +18,7 @@ requests = "^2.32.2"
 django-cors-headers = "^4.3.1"
 python-telegram-bot = {extras = ["job-queue"], version = "^21.3"}
 more-itertools = "^10.3.0"
+djangoviz = "^0.1.1"
 
 [tool.poetry.group.dev.dependencies]
 taskipy = "^1.12.2"
diff --git a/back/tmc/models.py b/back/tmc/models.py
index a042e75..f2868f2 100644
--- a/back/tmc/models.py
+++ b/back/tmc/models.py
@@ -3,12 +3,8 @@ from django.db import models
 
 class BaseCustomField(models.Model):
     name = models.CharField(max_length=120, )
-    text = models.TextField(null=True, blank=True)
-    scan = models.TextField(null=True, blank=True)
     comment = models.TextField(null=True, blank=True)
-    Image = models.ImageField(upload_to='images/', blank=True, null=True)
 
-    
     def __str__(self):
         return self.name
 
diff --git a/front/assets/main.scss b/front/assets/main.scss
index d052622..b169770 100644
--- a/front/assets/main.scss
+++ b/front/assets/main.scss
@@ -16,7 +16,7 @@
     }
 
     a[href]:not([class*=text]) {
-        @apply text-primary-500 hover:text-primary-600
+        // @apply text-primary-500 hover:text-primary-600
     }
 
     .container {
@@ -24,10 +24,9 @@
     }
 
     .header {
-        @apply col-span-12 flex gap-2 p-2.5;
-
+        @apply col-span-12 flex gap-2 p-2.5 border-b border-primary-700 bg-gradient-to-l from-primary-700;
         .logo {
-            @apply text-primary text-2xl
+            @apply text-2xl;
         }
     }
 
@@ -39,6 +38,10 @@
         @apply col-span-10
     }
 
+    .page-header {
+        @apply border-b border-primary-200 dark:border-primary-950 py-4 bg-gradient-to-l from-primary-200 dark:from-primary-950;
+    }
+
     dl {
         @apply grid grid-cols-12;
         dt {
diff --git a/front/components/sidebar.vue b/front/components/sidebar.vue
index e3f260f..1989676 100644
--- a/front/components/sidebar.vue
+++ b/front/components/sidebar.vue
@@ -3,18 +3,18 @@ const route = useRoute()
 
 const links = [
     {
-        label: 'Организации',
-        icon: 'i-heroicons-archive-box',
+        label: 'DEV Связь с 1с',
+        icon: 'i-heroicons-beaker',
         to: '/organization'
     },
     {
-        label: 'TMC',
+        label: 'Список ТМЦ (шаблоны)',
         icon: 'i-heroicons-archive-box',
         to: '/tmc'
     },
     {
-        label: 'Tablr',
-        icon: 'i-heroicons-archive-box',
+        label: 'Инвентаризации',
+        icon: 'i-heroicons-pencil',
         to: '/table'
     }
 ]
diff --git a/front/nuxt.config.ts b/front/nuxt.config.ts
index 3f65c32..e44cbb5 100644
--- a/front/nuxt.config.ts
+++ b/front/nuxt.config.ts
@@ -2,7 +2,11 @@
 export default defineNuxtConfig({
   ssr: false,
   devtools: { enabled: true },
-  modules: ["@nuxt/ui", "nuxt-svgo"],
+  modules: [
+    "@nuxt/ui",
+    "nuxt-svgo",
+    "@pinia/nuxt",
+  ],
   runtimeConfig: {
     public: {
       apiBase: '/api',
diff --git a/front/package-lock.json b/front/package-lock.json
index ca4ede3..32ab316 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -8,8 +8,10 @@
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/ui": "^2.16.0",
+        "@pinia/nuxt": "^0.5.1",
         "nuxt": "^3.11.2",
         "nuxt-svgo": "^4.0.1",
+        "pinia": "^2.1.7",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2",
         "yup": "^1.4.0"
@@ -2553,6 +2555,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.1.tgz",
+      "integrity": "sha512-6wT6TqY81n+7/x3Yhf0yfaJVKkZU42AGqOR0T3+UvChcaOJhSma7OWPN64v+ptYlznat+fS1VTwNAcbi2lzHnw==",
+      "dependencies": {
+        "@nuxt/kit": "^3.5.0",
+        "pinia": ">=2.1.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -8863,6 +8877,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -12119,9 +12183,9 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "engines": {
         "node": ">=10.0.0"
       },
diff --git a/front/package.json b/front/package.json
index 9f1dccf..2e12b11 100644
--- a/front/package.json
+++ b/front/package.json
@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@nuxt/ui": "^2.16.0",
+    "@pinia/nuxt": "^0.5.1",
     "nuxt": "^3.11.2",
     "nuxt-svgo": "^4.0.1",
+    "pinia": "^2.1.7",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
     "yup": "^1.4.0"
diff --git a/front/pages/table/index.vue b/front/pages/table/index.vue
index c648c93..2176920 100644
--- a/front/pages/table/index.vue
+++ b/front/pages/table/index.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { apiBase } from '~/helpers';
-const headers = new Headers();
-headers.append("Content-Type", "application/json");
-
 const items = ref()
 onMounted(async () => {
-    const items_data = await $fetch<ApiTypeTmc>(`${apiBase}/tgbot/`, { headers })
+    const items_data = await apiCall<ApiPaged<TgItem>>(`tgbot/`)
     items.value = items_data.results
 })
 const columns = [
@@ -30,23 +26,28 @@ const columns = [
 ]
 </script>
 <template>
-    <UTable :rows="items" :columns="columns">
-        <template #date-data="{ row }">
-            Создано: {{ new Date(row.created_at).toLocaleString('ru-RU') }}<br />
-            Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
-        </template>
-        <template #tmc-data="{ row }">
-            <template v-for="item in row.tmc">
-                <strong>{{ item.tmc.name }}</strong>
-                <ul>
-                    <li v-for="el in item.field">
-                        {{ el.field.name }}
-                        <GetImage :file_id="el.id" />
-                    </li>
-                </ul>
+    <div class="col-span-12 page-header">
+        <h1>Проведенные инвентаризации</h1>
+    </div>
+    <div class="col-span-12">
+        <UTable :rows="items" :columns="columns">
+            <template #date-data="{ row }">
+                Создано: {{ new Date(row.created_at).toLocaleString('ru-RU') }}<br />
+                Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
             </template>
-        </template>
-    </UTable>
+            <template #tmc-data="{ row }">
+                <template v-for="item in row.tmc">
+                    <strong>{{ item.tmc.name }}</strong>
+                    <ul>
+                        <li v-for="el in item.field">
+                            {{ el.field.name }}
+                            <GetImage :file_id="el.id" />
+                        </li>
+                    </ul>
+                </template>
+            </template>
+        </UTable>
+    </div>
 </template>
 
 <style scoped>
diff --git a/front/pages/tmc/index.vue b/front/pages/tmc/index.vue
index 181f52f..125a341 100644
--- a/front/pages/tmc/index.vue
+++ b/front/pages/tmc/index.vue
@@ -1,22 +1,28 @@
 <script setup lang="ts">
-import { apiBase } from '~/helpers';
-const headers = new Headers();
-headers.append("Content-Type", "application/json");
-
 const items = ref()
 onMounted(async () => {
-    const items_data = await $fetch<ApiTypeTmc>(`${apiBase}/tmc/items/`, { headers })
+    const items_data = await apiCall<ApiPaged<TmcItem>>(`tmc/items/`)
     items.value = items_data.results
 
 })
 </script>
 <template>
-    <template v-for="item in items">
-        <h2>{{ item.name }}</h2>
-        <ul>
-            <li v-for="child in item.fields">
-                {{ child.name }}
-            </li>
-        </ul>
-    </template>
+    <div class="grid grid-cols-12 gap-4">
+        <div class="col-span-12 page-header">
+            <h1>Список шаблонов ТМЦ</h1>
+        </div>
+        <UCard v-for="item in items" class="col-span-3">
+            <template #header>
+                <div class="prose dark:prose-invert">
+                    <h4>{{ item.name }}</h4>
+                </div>
+            </template>
+            <div class="prose dark:prose-invert text-sm">
+                <p v-for="child in item.fields">
+                    <strong>{{ child.name }}</strong><br/>
+                    {{ child.comment }}
+                </p>
+            </div>
+        </UCard>
+    </div>
 </template>
\ No newline at end of file
diff --git a/front/store/images.ts b/front/store/images.ts
new file mode 100644
index 0000000..8372b9c
--- /dev/null
+++ b/front/store/images.ts
@@ -0,0 +1,21 @@
+interface imagesList {
+    [key: string]: {
+        status: 'idle' | 'pending' | 'success' | 'error',
+        result?: string
+    }
+}
+export const useImagesStore = defineStore('images', {
+    state: () => ({ list: {} as imagesList }),
+    actions: {
+        getImage(name: string) {
+            if (this.list[name]) {
+                return this.list[name].result
+            } else {
+                this.list[name] = {
+                    status: 'idle',
+                    result: 'https://media.istockphoto.com/id/1490517357/photo/scientists-are-researching-and-analyzing-harmful-contaminants-in-the-laboratory.webp?s=170667a&w=0&k=20&c=Fh4t-P_b-a1QxwyBUzUa0AuLp8FLNyLy4hl4HUm82Ao='
+                }
+            }
+        },
+    },
+})
\ No newline at end of file
diff --git a/front/types/index.d.ts b/front/types/index.d.ts
index 94a73a7..714ac2a 100644
--- a/front/types/index.d.ts
+++ b/front/types/index.d.ts
@@ -42,6 +42,13 @@ declare global {
         tmc: number[]
     }
 
+    type ApiPaged<T> = {
+        count: number;
+        next?: any;
+        previous?: any;
+        results: T[]
+    };
+
     type ApiTypeTmc = {
         count: number;
         next?: any;
diff --git a/front/utils/apiCall.ts b/front/utils/apiCall.ts
new file mode 100644
index 0000000..501949d
--- /dev/null
+++ b/front/utils/apiCall.ts
@@ -0,0 +1,7 @@
+import { apiBase } from '~/helpers';
+
+export default async function<T> (path: string) {
+    const headers = new Headers();
+    headers.append("Content-Type", "application/json");
+    return await $fetch<T>(`${apiBase}/${path}`, { headers })
+}
\ No newline at end of file