heading styles

2024-07-18 16:55:18 +03:00 · 2024-07-18 16:55:18 +03:00 · 24705fe8e0
parent 71b914f07f
commit 24705fe8e0
14 changed files with 193 additions and 52 deletions
--- 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 = [
--- 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"
--- 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"
--- a/back/tmc/models.py
+++ b/back/tmc/models.py
@ -3,11 +3,7 @@ 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
--- 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 {
--- 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'
    }
 ]
--- 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',
--- 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"
      },
--- 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"
--- 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>
--- 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>
--- a/front/store/images.ts
+++ 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='
+                }
+            }
+        },
+    },
+})
--- 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;
--- a/front/utils/apiCall.ts
+++ 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 })
+}