feat(page): добавлен раздел "Контакты"

components/Base/SideBar/element.vue

@@ -318,28 +318,65 @@
         />
       </svg>
 
+      <svg
+        v-else-if="type === 'contacts'"
+        width="37"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 24.0002C6 9.17718 9.177 6.00018 24 6.00018C38.823 6.00018 42 9.17718 42 24.0002C42 38.8232 38.823 42.0002 24 42.0002C9.177 42.0002 6 38.8232 6 24.0002Z"
+          :stroke="color"
+          stroke-width="4"
+        />
+        <path
+          d="M30 20.0002C30 23.314 27.3138 26.0002 24 26.0002C20.6862 26.0002 18 23.314 18 20.0002C18 16.6865 20.6862 14.0002 24 14.0002C27.3138 14.0002 30 16.6865 30 20.0002Z"
+          :stroke="color"
+          stroke-width="4"
+        />
+        <path
+          d="M12 38.0002C13.2764 33.3858 16.56 32.0002 24 32.0002C31.44 32.0002 34.7236 33.2852 36 37.8996"
+          :stroke="color"
+          stroke-width="4"
+          stroke-linecap="round"
+        />
+      </svg>
+
       <p
         class="text-lg font-semibold duration-150"
         :style="`color: ${color};`"
         v-text="$props.text"
       />
-      <p
-        class="ml-auto"
-        v-text="count"
-      />
+      <p class="ml-auto" v-text="count" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
-  type?: 'home' | 'license' | 'calendar' | 'mail' | 'bell' | 'photo' | 'chart' | 'cog' | 'alert-circle' | 'logout'
-  text?: string
-  count?: number
-  color?: string
-}>(), {
-  type: 'home',
-  text: 'Новости',
-  color: '#EDE8D8',
-})
+withDefaults(
+  defineProps<{
+    type?:
+      | "home"
+      | "license"
+      | "calendar"
+      | "mail"
+      | "bell"
+      | "photo"
+      | "chart"
+      | "cog"
+      | "alert-circle"
+      | "logout"
+      | "contacts";
+    text?: string;
+    count?: number;
+    color?: string;
+  }>(),
+  {
+    type: "home",
+    text: "Новости",
+    color: "#EDE8D8",
+  }
+);
 </script>

components/Contact/Item.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="flex flex-col gap-1 justify-center items-center text-center bg-black bg-opacity-20 rounded-md p-1">
+        <p class="text-xl font-semibold" v-text="contact.full_name" />
+        <p class="text-sm" v-text="contact.post" />
+        <a :href="`mailto:${contact.email}`" v-text="`Почта: ${contact.email}`" />
+        <div>
+            <p v-text="`Телефон${ contact.phones.length > 1 ? 'ы' : '' }:`" />
+            <p 
+                v-for="(phone, idx) in contact.phones" 
+                :key="idx" 
+                v-text="phone"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface TContact {
+    address: string;
+    email: string;
+    full_name: string;
+    phones: string[];
+    post: string;
+}
+
+defineProps<{
+    contact: TContact
+}>()
+</script>
+
+<style scoped>
+
+</style>

pages/contacts.vue

@@ -0,0 +1,36 @@
+<template>
+    <div
+      class="w-full h-full flex flex-col gap-5 p-2"
+    >
+      <div
+        v-show="!contactsList"
+        v-for="i of Array.from({ length: 5 }).map((i, idx) => idx)"
+        :key="i"
+        :class="i === 0 ? 'mt-0 mb-4' : 'my-4'"
+        class="w-full h-[200px] loading rounded-md opacity-30"
+      />
+      <ContactItem
+        v-for="(contact, idx) in contactsList" 
+        :key="idx"
+        :contact="contact"
+      />
+    </div>
+</template>
+
+<script setup lang="ts">
+const { $api } = useNuxtApp()
+const contactsList = ref()
+
+definePageMeta({
+  name: 'Контакты',
+  middleware: ['user-only'],
+})
+
+onMounted(async () => {
+  contactsList.value = await $api.contacts.getContacts()
+})
+</script>
+
+<style scoped>
+
+</style>

plugins/api.client.ts

@@ -5,6 +5,7 @@ import BranchModule from '@/repository/modules/branch'
 import TimetableModule from '@/repository/modules/timetable'
 import BlogModule from '@/repository/modules/blog'
 import NewsModule from '@/repository/modules/news'
+import ContactsModule from '~/repository/modules/contacts'
 
 export interface IApiInstance {
   user: UserModule
@@ -14,6 +15,7 @@ export interface IApiInstance {
   timetable: TimetableModule
   blog: BlogModule
   news: NewsModule
+  contacts: ContactsModule
 }
 
 export interface Provide {
@@ -34,6 +36,7 @@ export default defineNuxtPlugin(() => {
     timetable: new TimetableModule('TimetableModule'),
     blog: new BlogModule('BlogModule'),
     news: new NewsModule('NewsModule'),
+    contacts: new ContactsModule('ContactsModule'),
   }
 
   return {

repository/modules/contacts.ts

@@ -0,0 +1,12 @@
+import { API } from '../api'
+
+class ContactsModule extends API {
+  // TODO: types
+  async getContacts() {
+    return await this.get<object>(
+      `/contacts/`,
+    )
+  }
+}
+
+export default ContactsModule