front/src/App.vue

@@ -6,16 +6,21 @@ import Header from './components/main/Header.vue';
     <a-layout class="layout">
         <Header />
         <a-layout-content>
-            <a-flex gap="middle" vertical>
             <RouterView />
-            </a-flex>            
         </a-layout-content>
     </a-layout>
 </template>
 
 <style scoped>
 main {
-    padding: 36px;
+    display: flex;
-    margin: 14px;
+    justify-content: center;
+    padding: 5vh;
+}
+
+.base-page {
+    display: flex;
+    flex-direction: column;
+    min-width: 80dvw;
 }
 </style>

front/src/components/pages/Groups.vue

@@ -42,6 +42,8 @@ const onDelete = (key: string) => {
 </script>
 
 <template>
+    <div class="base-page">
+        <h1>Группы расходов</h1>
         <SpendingGroupManager :refreshData="refreshData" />
         <a-table :dataSource="state" :columns="columns" v-if="isReady">
             <template #bodyCell="{ column, record }">
@@ -62,6 +64,7 @@ const onDelete = (key: string) => {
         <div v-else>
             <a-spin size="large" />
         </div>
+    </div>
 </template>
 
 <style scoped>

front/src/components/pages/Home.vue

@@ -47,6 +47,8 @@ const onDelete = (key: string) => {
 </script>
 
 <template>
+    <div class="base-page">
+        <h1>История изменений баланса</h1>
         <ChangeRecordMenu :refreshData="refreshData" />
         <a-table :dataSource="state" :columns="columns" v-if="isReady" >
             <template #bodyCell="{ column, record }">
@@ -64,8 +66,11 @@ const onDelete = (key: string) => {
         <div v-else>
             <a-spin size="large" />
         </div>
+    </div>
 </template>
 
 <style scoped>
+.layout {
     
+}
 </style>

front/src/components/pages/Plans.vue

@@ -52,7 +52,8 @@ const onDelete = (key: string) => {
 </script>
 
 <template>
-    <h1>Планы группы </h1>
+    <div class="base-page">
+        <h1>Планы группы</h1>
         <PlanManager :groupId="groupId" :refreshData="refreshData"/>
         <a-table :dataSource="state" :columns="columns" v-if="isReady">
             <template #bodyCell="{ column, record }">
@@ -70,6 +71,7 @@ const onDelete = (key: string) => {
         <div v-else>
             <a-spin size="large" />
         </div>
+    </div>
 </template>
 
 <style scoped>

front/src/components/support/ChangeRecordManager.vue

@@ -20,6 +20,7 @@
                 label="Группа расходов"
                 name="spendingGroupId"
                 v-if="isReady"
+                :rules="[{ required: true, message: 'Пожалуйста, выберите группу расходов' }]"
             >
             
                 <a-select v-model:value="formState.spendingGroupId" :disabled="disabled">
@@ -35,12 +36,13 @@
             <a-form-item 
                 name="changedAt"
                 label="Дата"
+                :rules="[{ required: true, message: 'Пожалуйста, выберите дату' }]"
             >
                 <a-date-picker v-model:value="pickedChangedAt" />
             </a-form-item>
             
             <a-form-item>
-                <a-button html-type="submit" type="primary">Сохранить</a-button>
+                <a-button html-type="submit" :disabled="disabledForm" type="primary">Сохранить</a-button>
             </a-form-item>
         </a-form>
     </a-space>
@@ -49,7 +51,6 @@
 import { computed, inject, reactive, ref } from 'vue';
 import { ChangeRecordDto, SpendingGroupViewModel } from '../../core/api/data-contracts';
 import { useUserStore } from '../../store';
-import router from '../../router';
 import { ChangeRecordService } from '../../core/services/change-record-service';
 import { GroupService } from '../../core/services/group-service';
 import { useAsyncState } from '@vueuse/core';
@@ -70,7 +71,7 @@ const { state: groupList, isReady } = useAsyncState(() => groupService.getList()
 const pickedChangedAt = ref<Dayjs>();
 const formState = reactive<ChangeRecordDto>({
     userId: store.user.id,
-    sum: 0,
+    sum: -1,
     changedAt: new Date().toISOString(),
     spendingGroupId: null
 });
@@ -88,5 +89,7 @@ const onFinishFailed = (errorInfo: any) => {
 const disabled = computed(() => {
     return formState.sum && formState.sum >= 0;
 });
-
+const disabledForm = computed(() => {
+    return !(formState.sum && formState.changedAt && (formState.spendingGroupId || formState.sum > 0));
+})
 </script>

front/src/components/support/PlanManager.vue

@@ -33,15 +33,14 @@
             </a-form-item>
             
             <a-form-item>
-                <a-button html-type="submit" type="primary">Добавить</a-button>
+                <a-button :disabled="disabledForm" html-type="submit" type="primary">Добавить</a-button>
             </a-form-item>
         </a-form>
     </a-space>
 </template>
 <script setup lang="ts">
-import { inject, reactive, ref } from 'vue';
+import { computed, inject, reactive, ref } from 'vue';
 import {  SpendingPlanDto } from '../../core/api/data-contracts';
-import { ChangeRecordService } from '../../core/services/change-record-service';
 import { Dayjs } from 'dayjs';
 import { PlanService } from '../../core/services/plans-service';
 
@@ -74,4 +73,8 @@ const onFinish = async (values: any) => {
 const onFinishFailed = (errorInfo: any) => {
     console.log('Failed:', errorInfo);
 };
+
+const disabledForm = computed(() => {
+    return !(formState.sum && formState.startAt && formState.endAt);
+});
 </script>

front/src/components/support/SpendingGroupManager.vue

@@ -15,13 +15,13 @@
                 <a-input v-model:value="formState.name" />
             </a-form-item>
             <a-form-item>
-                <a-button html-type="submit" type="primary">Сохранить</a-button>
+                <a-button :disabled="disabledForm" html-type="submit" type="primary">Сохранить</a-button>
             </a-form-item>
         </a-form>
     </a-space>
 </template>
 <script setup lang="ts">
-import { inject, reactive } from 'vue';
+import { computed, inject, reactive } from 'vue';
 import { useUserStore } from '../../store';
 import { GroupService } from '../../core/services/group-service';
 import { SpendingGroupDto } from '../../core/api/data-contracts';
@@ -50,4 +50,8 @@ const onFinish = async (values: any) => {
 const onFinishFailed = (errorInfo: any) => {
     console.log('Failed:', errorInfo);
 };
+
+const disabledForm = computed(() => {
+    return !formState.name;
+});
 </script>