Added: Show orders in user page(#96).

.eslintrc.json

@@ -24,15 +24,13 @@
     "eqeqeq": "error",
     "default-param-last": "error",
     "capitalized-comments": "error",
-    "spaced-comment": "error",
     "curly": "error",
     "arrow-parens": "error",
     "arrow-body-style": ["error", "always"],
     "no-use-before-define": "error",
     "max-depth": ["error", 2],
     "max-lines": ["warn", 60],
     "max-params": "error",
-    "max-len": "error",
     "no-console": "error",
     "no-implicit-coercion": "error",
     "yoda": ["error", "always"],

.gitignore

@@ -1,4 +1,5 @@
 .vscode/
+.idea/
 node_modules/
 dist/
 temp/

dto/Cart.d.ts

@@ -5,4 +5,7 @@ export interface CartItem {
   quantity: number;
 }
 
-export type Cart = CartItem[];
+export type Cart = {
+  items: CartItem[];
+  totalCost: string;
+};

dto/Order.d.ts

@@ -1,6 +1,7 @@
 import type { DefaultResponse } from "../endpoints/types";
 import type { Cart } from "$/dto/Cart";
 import type { UserClientData } from "./User";
+import type { Order as OrdersTable } from "../radiomag-server-express/src/database/tables/order/type";
 
 export interface FormData {
   /* Require */ email: string;
@@ -13,19 +14,37 @@ export interface FormData {
   address: string;
   recipient: string;
   comment: string;
+  id?: number;
 }
 
 type DateTime = string;
-type JSONString = string;
-
-export interface OrderResponse extends DefaultResponse {
-  orderId?: string;
-  newUser?: UserClientData;
-}
 
 export interface Order {
   created: DateTime;
   cart: Cart;
   form: FormData;
   user: UserClientData;
+  status:
+    | "orders.window.orders.tableBody.status.waitingForPayment"
+    | "orders.window.orders.tableBody.status.atWork"
+    | "orders.window.orders.tableBody.status.done";
+  manager: string;
+  closed: string;
+}
+
+export type OrderRequestBody = Order;
+
+export interface OrderResponse extends DefaultResponse {
+  orderId?: string;
+  newUser?: UserClientData;
+}
+
+export interface OrdersRequestBody {
+  userId: string;
+}
+
+export type Orders = OrdersTable[];
+
+export interface OrdersResponse extends DefaultResponse {
+  orders?: Orders;
 }

endpoints/types.ts

@@ -1,5 +1,10 @@
 import type { UserRegistration, UserClientData } from "$/dto/User";
-import type { Order } from "$/dto/Order";
+import type {
+  OrderRequestBody,
+  OrderResponse,
+  OrdersRequestBody,
+  OrdersResponse,
+} from "$/dto/Order";
 
 export interface DefaultResponse {
   ok: boolean;
@@ -16,6 +21,6 @@ export interface APILogin {
 export interface APIOrder {
   url: "/api/order";
   method: "post";
-  request: Order;
-  response: DefaultResponse;
+  request: OrderRequestBody | OrdersRequestBody;
+  response: OrderResponse | OrdersResponse;
 }

radiomag-client-vue/src/App.vue

@@ -4,7 +4,9 @@
     <Breadcrumbs />
     <ModalWindow />
     <ImageShowBig />
-    <RouterView class="container" />
+    <div class="container container_min-height">
+      <RouterView />
+    </div>
     <ShopInfo />
     <Footer />
     <Copyright />
@@ -16,7 +18,7 @@ import { RouterView } from "vue-router";
 import { Header } from "@/components/HeaderMainComponent";
 import { Breadcrumbs } from "@/components/BreadcrumbsComponent";
 import ModalWindow from "@/components/ModalWindow.vue";
-import ImageShowBig from "@/components/ImageShowBig.vue";
+import { ImageShowBig } from "@/components";
 import { ShopInfo } from "@/components/ShopInfoComponent";
 import Footer from "@/components/FooterComponent.vue";
 import Copyright from "@/components/CopyrightComponent.vue";

radiomag-client-vue/src/assets/styles/style.scss

@@ -34,6 +34,10 @@ body {
   @media (max-width: $breakpoint-desktop) {
     padding: 0 15px;
   }
+
+  &_min-height {
+    min-height: 600px;
+  }
 }
 
 .hover:hover {

radiomag-client-vue/src/components/BulletinComponent/Bulletin.test.ts

@@ -1,11 +1,11 @@
 import { describe, it, expect } from "vitest";
 import { shallowMount } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
-import { i18n } from "tests/mock/i18n";
-import { vueToastification } from "tests/mock/vue-toastification";
+import { mockStoreI18n } from "@/../tests/mock/mockStoreI18n";
+import { vueToastification } from "@/../tests/mock/vue-toastification";
 import Bulletin from "./BulletinComponent.vue";
 
-i18n();
+mockStoreI18n();
 vueToastification();
 const plugins = [createTestingPinia()];
 const mocks = {

radiomag-client-vue/src/components/GroupSearchComponent/GroupSearch.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, afterEach } from "vitest";
-import { i18n } from "tests/mock/i18n";
+import { mockStoreI18n } from "tests/mock/mockStoreI18n";
 import { vueToastification } from "tests/mock/vue-toastification";
 import { testButton } from "./testFunctions/button";
 import { testCounter } from "./testFunctions/counter";
@@ -8,7 +8,7 @@ import { testIcon } from "./testFunctions/icon";
 import { useAfterEach } from "./testFunctions/afterEach";
 import { testWrapper } from "./testFunctions/wrapper";
 
-i18n();
+mockStoreI18n();
 vueToastification();
 afterEach(useAfterEach);
 

radiomag-client-vue/src/components/ImageShowBigComponent/ImageShowBigComponent.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { shallowMount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import { ImageShowBig } from ".";
+
+const plugins = [createTestingPinia()];
+
+const mocks = {
+  store: {
+    isVisible: true,
+    data: {
+      src: "/images/product/1347",
+      alt: "1n4007",
+    },
+  },
+};
+
+const global = {
+  plugins,
+  mocks,
+};
+
+const options = {
+  global,
+};
+
+const buildWrapper = (opt: typeof options) => {
+  return shallowMount(ImageShowBig, opt);
+};
+
+let wrapper = buildWrapper(options);
+
+beforeEach(() => {
+  wrapper = buildWrapper(options);
+});
+
+describe("ImageShowBig component", () => {
+  it("should be visible", () => {
+    expect(wrapper.isVisible()).toBe(true);
+  });
+
+  it("should have image", () => {
+    expect(wrapper.find("img").exists()).toBe(true);
+  });
+
+  it("image should have src", () => {
+    expect(wrapper.find("img").attributes()["src"]).toEqual(
+      mocks.store.data.src
+    );
+  });
+
+  it("image should have alt", () => {
+    expect(wrapper.find("img").attributes()["alt"]).toEqual(
+      mocks.store.data.alt
+    );
+  });
+});

radiomag-client-vue/src/components/ImageShowBigComponent/ImageShowBigComponent.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<style lang="scss" src="./style.scss"></style>
+<script lang="ts" src="./script.ts"></script>

radiomag-client-vue/src/components/ImageShowBigComponent/index.ts

@@ -0,0 +1 @@
+export { default as ImageShowBig } from "./ImageShowBigComponent.vue";

radiomag-client-vue/src/components/ImageShowBigComponent/script.ts

@@ -0,0 +1,16 @@
+import { defineComponent } from "vue";
+import { useImageShow } from "@/store/imageShow";
+
+export default defineComponent({
+  setup() {
+    const store = useImageShow();
+    const closeWindow = () => {
+      return store.hide();
+    };
+
+    return {
+      store,
+      closeWindow,
+    };
+  },
+});

radiomag-client-vue/src/components/ImageShowBigComponent/style.scss

@@ -0,0 +1,22 @@
+.image-show-big {
+  position: fixed;
+  background-color: var(--color-black-light-alpha);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  padding-top: 10vmin;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding-top: 50vmin;
+  }
+
+  &__image {
+    display: block;
+    margin: auto;
+    max-width: 80vmin;
+    height: auto;
+    object-fit: contain;
+  }
+}

radiomag-client-vue/src/components/ImageShowBigComponent/template.html

@@ -0,0 +1,7 @@
+<div class="image-show-big" v-if="store.isVisible" @click="closeWindow">
+	<img
+		class="image-show-big__image"
+		:src="store.data.src"
+		:alt="store.data.alt"
+	/>
+</div>

radiomag-client-vue/src/components/OrderComponent/script.ts

@@ -12,9 +12,9 @@ export default defineComponent({
     OrderTable,
   },
   props: {
-    cart: {
+    cartItems: {
       require: true,
-      type: Object as PropType<Cart>,
+      type: Object as PropType<Cart["items"]>,
     },
   },
 });

radiomag-client-vue/src/components/OrderComponent/template.html

@@ -2,7 +2,7 @@
 	<h2 class="order__header-text">{{ $t("order.header") }}:</h2>
 	<OrderTable>
 		<OrderCard
-			v-for="(product, index) in cart"
+			v-for="(product, index) in cartItems"
 			:key="index"
 			:index="index"
 			:goods="product"

radiomag-client-vue/src/components/OrderContactFormComponent/OrderContactFormComponent.test.ts

@@ -1,15 +1,19 @@
 import { describe, it, expect, beforeEach } from "vitest";
-import { shallowMount, VueWrapper } from "@vue/test-utils";
+import { shallowMount, VueWrapper, config } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
-import { i18n } from "tests/mock/i18n";
+import { mockStoreI18n } from "tests/mock/mockStoreI18n";
 import { i18nValidators } from "tests/mock/i18n-validators";
 import { vueToastification } from "tests/mock/vue-toastification";
 import { OrderContactForm } from "@/components";
 
-i18n();
+mockStoreI18n();
 i18nValidators();
 vueToastification();
 
+config.global.config.warnHandler = () => {
+  return null;
+};
+
 let wrapper: VueWrapper;
 
 const plugins = [createTestingPinia()];

radiomag-client-vue/src/components/OrderContactFormComponent/functions/components.ts

@@ -1,7 +1,7 @@
-import OrderContactFormContact from "@/components/OrderContactFormContactComponent.vue";
-import OrderContactFormUnit from "@/components/OrderContactFormUnitComponent.vue";
-import OrderContactFormSubscriptions from "@/components/OrderContactFormSubscriptionsComponent.vue";
-import OrderContactFormSending from "@/components/OrderContactFormSendingComponent.vue";
+import { OrderContactFormContact } from "@/components";
+import { OrderContactFormUnit } from "@/components";
+import { OrderContactFormSubscriptions } from "@/components";
+import { OrderContactFormSending } from "@/components";
 import OrderContactFormFieldsetComment from "@/components/OrderContactFormFieldsetCommentComponent.vue";
 import OrderContactFormButtonsGroup from "@/components/OrderContactFormButtonsGroupComponent.vue";
 import OrderContactFormNotify from "@/components/OrderContactFormNotifyComponent.vue";