🦄 refactor: storage for projects

src/components/Breadcrumbs/server-name.vue

@@ -1,14 +1,14 @@
 <template>
   <router-link :to="{ name: 'projects-projectId-servers' }">
-    {{ serverStore.getServerNameByID(props.projectId, props.serverId) }}
+    {{ projectStore.getServerNameByID(props.projectId, props.serverId) }}
   </router-link>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps<{
   memberId: string;
@@ -17,6 +17,6 @@ const props = defineProps<{
 }>();
 
 onMounted(async () => {
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>

src/components/Pagination/index.vue

@@ -39,7 +39,7 @@ const getQuery = (page: number) => ({
   offset: (page - 1) * limit.value
 });
 
-const onSelectPage = (query: Record<string, unknown>): void => {
+const onSelectPage = (query: Record<string, any>): void => {
   emits("selectPage", query);
 };
 </script>

src/pages/profile/keys/index.vue

@@ -96,7 +96,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 

src/pages/profile/logs.vue

@@ -128,7 +128,7 @@ const getData = async (routeQuery?: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 

src/pages/projects/_projectId/index.vue

@@ -1,22 +1,35 @@
 <template>
   <div class="artboard">
     <header>
-      <h1>Project information</h1>
+      <h1>{{ pageData.base.title }}</h1>
     </header>
 
-    <div class="content">{{ pageData.base }}</div>
+    <div class="desc">Project information</div>
+
+    <div class="content">
+      <dl class="info">
+        <router-link
+          v-for="item in infoItems"
+          :key="item.countKey"
+          :to="{ name: item.routeName, params: { projectId: props.projectId } }"
+        >
+          <div>
+            <dt>{{ item.label }}</dt>
+            <dd>{{ projectStore.projects[props.projectId]?.info[item.countKey] || 0 }}</dd>
+          </div>
+        </router-link>
+      </dl>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { showApiError } from "@/utils";
 import { defaultPageData, PageData } from "@/interface/page";
+import { useProjectStore } from "@/store";
 
 // API section
-import { api } from "@/api";
-import { Project_Request } from "@proto/project";
-
+const projectStore = useProjectStore();
 const pageData = ref<PageData>(defaultPageData);
 
 const props = defineProps({
@@ -27,21 +40,7 @@ const props = defineProps({
 });
 
 const getData = async (): Promise<void> => {
-  try {
-    const queryParams = <Project_Request>{
-      project_id: props.projectId
-    };
-
-    const res = await api().GET(`/v1/projects`, queryParams);
-    if (res.data) {
-      pageData.value.base = res.data.result;
-    }
-    if (res.error) {
-      showApiError(res.error);
-    }
-  } catch (err) {
-    console.error("Unexpected error:", err);
-  }
+  projectStore.projectInfo(props.projectId);
 };
 
 watch(() => props.projectId, getData);
@@ -50,4 +49,35 @@ onMounted(async () => {
   document.title = "Project information";
   await getData();
 });
+
+const infoItems = [
+  { label: "Servers", routeName: "projects-projectId-servers", countKey: "servers_count" },
+  { label: "Databases", routeName: "projects-projectId-databases", countKey: "database_count" },
+  { label: "Applications", routeName: "projects-projectId-applications", countKey: "applications_count" },
+  { label: "Desktops", routeName: "projects-projectId-desktops", countKey: "desktops_count" },
+  { label: "Containers", routeName: "projects-projectId-containers", countKey: "containers_count" },
+  { label: "Clouds", routeName: "projects-projectId-clouds", countKey: "clouds_count" }
+];
 </script>
+
+<style lang="scss">
+dl.info {
+  @apply flex flex-wrap gap-4;
+
+  a {
+    @apply no-underline;
+  }
+
+  div {
+    @apply flex w-32 flex-col rounded border border-gray-100 px-4 py-8 text-center;
+
+    dt {
+      @apply order-last text-lg font-medium text-gray-500;
+    }
+
+    dd {
+      @apply text-4xl font-extrabold text-gray-600 md:text-5xl;
+    }
+  }
+}
+</style>

src/pages/projects/_projectId/members/index.vue

@@ -124,7 +124,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 

src/pages/projects/_projectId/members/invites.vue

@@ -106,7 +106,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 

src/pages/projects/_projectId/servers/_serverId/activity.vue

@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
     <div class="desc">Time at which access to the server is possible</div>
@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { showApiError, showMessage } from "@/utils";
 import { Badge, FormButton, Tabs } from "@/components";
 import { defaultPageData, PageData } from "@/interface/page";
@@ -80,7 +80,7 @@ import { ServerActivity_Request, UpdateServerActivity_Request } from "@proto/ser
 // Tabs section
 import { tabMenu } from "./tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>(defaultPageData);
 
 const props = defineProps({
@@ -199,7 +199,7 @@ const templateWork = {
 
 onMounted(async () => {
   document.title = "Server activity";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData();
 });
 </script>

src/pages/projects/_projectId/servers/_serverId/destroy.vue

@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
 
     <Tabs :tabs="tabMenu" />
@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { useAuthStore, useServerStore } from "@/store";
+import { useAuthStore, useProjectStore } from "@/store";
 import { FormButton, Tabs } from "@/components";
 import { showApiError, showMessage } from "@/utils";
 
@@ -39,7 +39,7 @@ import { tabMenu } from "./tab";
 
 const router = useRouter();
 const authStore = useAuthStore();
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -75,6 +75,6 @@ const onDelete = async (): Promise<void> => {
 
 onMounted(async () => {
   document.title = "Destroy server";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>

src/pages/projects/_projectId/servers/_serverId/firewall.vue

@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
     <div class="desc">In addition to creating your own, some add-ons come with their own.</div>
@@ -99,7 +99,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { Address4, Address6 } from "ip-address";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { showApiError, showMessage } from "@/utils";
 import { Badge, FormInput, FormToggle, SvgIcon, Tabs } from "@/components";
 import { PageData } from "@/interface/page";
@@ -118,7 +118,7 @@ import {
 // Tabs section
 import { tabMenu } from "./tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>({
   base: {
     country: [],
@@ -253,7 +253,7 @@ const addIp = async (ip: string, rules: Rules): Promise<void> => {
 };
 
 // ---
-const create = async (record: any, rules: Rules): Promise<unknown> => {
+const create = async (record: any, rules: Rules): Promise<any> => {
   const { projectId, serverId } = props;
 
   try {
@@ -378,7 +378,7 @@ const remove = async (index: number, rules: Rules): Promise<void> => {
 
 onMounted(async () => {
   document.title = "Server firewall";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData();
 });
 </script>

src/pages/projects/_projectId/servers/_serverId/index.vue

@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
     <div class="desc">
@@ -17,13 +17,13 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { Tabs } from "@/components";
 
 // Tabs section
 import { tabMenu } from "./tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -38,6 +38,6 @@ const props = defineProps({
 
 onMounted(async () => {
   document.title = "Server info";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>

src/pages/projects/_projectId/servers/_serverId/members/_memberId/index.vue

@@ -7,7 +7,7 @@
         </router-link>
       </h1>
       <div class="breadcrumbs">
-        {{ serverStore.getServerNameByID(props.projectId, props.serverId) }}
+        {{ projectStore.getServerNameByID(props.projectId, props.serverId) }}
         <span>
           <router-link
             :to="{
@@ -27,13 +27,13 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { Tabs } from "@/components";
 
 // Tabs section
 import { tabMenu } from "@/pages/projects/_projectId/servers/_serverId/tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -52,6 +52,6 @@ const props = defineProps({
 
 onMounted(async () => {
   document.title = "Server member";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>

src/pages/projects/_projectId/servers/_serverId/members/add.vue

@@ -7,7 +7,7 @@
         </router-link>
       </h1>
       <div class="breadcrumbs">
-        {{ serverStore.getServerNameByID(props.projectId, props.serverId) }}
+        {{ projectStore.getServerNameByID(props.projectId, props.serverId) }}
         <span>
           <router-link
             :to="{
@@ -64,7 +64,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { useAuthStore, useServerStore } from "@/store";
+import { useAuthStore, useProjectStore } from "@/store";
 import { Badge, Pagination, SvgIcon, Tabs } from "@/components";
 import { showApiError, showMessage } from "@/utils";
 import { defaultPageData, PageData } from "@/interface/page";
@@ -78,7 +78,7 @@ import { tabMenu } from "@/pages/projects/_projectId/servers/_serverId/tab";
 
 const route = useRoute();
 const authStore = useAuthStore();
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>(defaultPageData);
 
 const props = defineProps({
@@ -92,7 +92,7 @@ const props = defineProps({
   }
 });
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
@@ -157,7 +157,7 @@ const addingMember = async (index: number): Promise<void> => {
 
 onMounted(async () => {
   document.title = "Server member add";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData(route.query);
 });
 </script>