fix: страницы и формы теперь выглядят нормально

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>            
+            <RouterView />
         </a-layout-content>
     </a-layout>
 </template>
 
 <style scoped>
 main {
-    padding: 36px;
-    margin: 14px;
+    display: flex;
+    justify-content: center;
+    padding: 5vh;
+}
+
+.base-page {
+    display: flex;
+    flex-direction: column;
+    min-width: 80dvw;
 }
 </style>

front/src/components/pages/Groups.vue

@@ -42,25 +42,28 @@ const onDelete = (key: string) => {
 </script>
 
 <template>
-    <SpendingGroupManager :refreshData="refreshData" />
-    <a-table :dataSource="state" :columns="columns" v-if="isReady">
-        <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'plans'">
-                <RouterLink :to="{ name: 'plans', params: { groupId: record.id } }" >Планы</RouterLink>
+    <div class="base-page">
+        <h1>Группы расходов</h1>
+        <SpendingGroupManager :refreshData="refreshData" />
+        <a-table :dataSource="state" :columns="columns" v-if="isReady">
+            <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'plans'">
+                    <RouterLink :to="{ name: 'plans', params: { groupId: record.id } }" >Планы</RouterLink>
+                </template>
+                <template v-else-if="column.dataIndex === 'operation'">
+                    <a-popconfirm
+                        v-if="state?.length"
+                        title="Точно удалить?"
+                        @confirm="onDelete(record.id)"
+                    >
+                        <a><DeleteOutlined /> Удалить</a>
+                    </a-popconfirm>
+                </template>
             </template>
-            <template v-else-if="column.dataIndex === 'operation'">
-                <a-popconfirm
-                    v-if="state?.length"
-                    title="Точно удалить?"
-                    @confirm="onDelete(record.id)"
-                >
-                    <a><DeleteOutlined /> Удалить</a>
-                </a-popconfirm>
-            </template>
-        </template>
-    </a-table>
-    <div v-else>
-        <a-spin size="large" />
+        </a-table>
+        <div v-else>
+            <a-spin size="large" />
+        </div>
     </div>
 </template>
 

front/src/components/pages/Home.vue

@@ -47,25 +47,30 @@ const onDelete = (key: string) => {
 </script>
 
 <template>
-    <ChangeRecordMenu :refreshData="refreshData" />
-    <a-table :dataSource="state" :columns="columns" v-if="isReady" >
-        <template #bodyCell="{ column, record }">
-            <template v-if="column.dataIndex === 'operation'">
-                <a-popconfirm
-                    v-if="state?.length"
-                    title="Точно удалить?"
-                    @confirm="onDelete(record.id)"
-                >
-                    <a><DeleteOutlined /> Удалить</a>
-                </a-popconfirm>
+    <div class="base-page">
+        <h1>История изменений баланса</h1>
+        <ChangeRecordMenu :refreshData="refreshData" />
+        <a-table :dataSource="state" :columns="columns" v-if="isReady" >
+            <template #bodyCell="{ column, record }">
+                <template v-if="column.dataIndex === 'operation'">
+                    <a-popconfirm
+                        v-if="state?.length"
+                        title="Точно удалить?"
+                        @confirm="onDelete(record.id)"
+                    >
+                        <a><DeleteOutlined /> Удалить</a>
+                    </a-popconfirm>
+                </template>
             </template>
-        </template>
-    </a-table>
-    <div v-else>
-        <a-spin size="large" />
+        </a-table>
+        <div v-else>
+            <a-spin size="large" />
+        </div>
     </div>
 </template>
 
 <style scoped>
-
+.layout {
+    
+}
 </style>

front/src/components/pages/Plans.vue

@@ -52,23 +52,25 @@ const onDelete = (key: string) => {
 </script>
 
 <template>
-    <h1>Планы группы </h1>
-    <PlanManager :groupId="groupId" :refreshData="refreshData"/>
-    <a-table :dataSource="state" :columns="columns" v-if="isReady">
-        <template #bodyCell="{ column, record }">
-            <template v-if="column.dataIndex === 'operation'">
-                <a-popconfirm
-                    v-if="state?.length"
-                    title="Точно удалить?"
-                    @confirm="onDelete(record.id)"
-                >
-                    <a><DeleteOutlined /> Удалить</a>
-                </a-popconfirm>
+    <div class="base-page">
+        <h1>Планы группы</h1>
+        <PlanManager :groupId="groupId" :refreshData="refreshData"/>
+        <a-table :dataSource="state" :columns="columns" v-if="isReady">
+            <template #bodyCell="{ column, record }">
+                <template v-if="column.dataIndex === 'operation'">
+                    <a-popconfirm
+                        v-if="state?.length"
+                        title="Точно удалить?"
+                        @confirm="onDelete(record.id)"
+                    >
+                        <a><DeleteOutlined /> Удалить</a>
+                    </a-popconfirm>
+                </template>
             </template>
-        </template>
-    </a-table>
-    <div v-else>
-        <a-spin size="large" />
+        </a-table>
+        <div v-else>
+            <a-spin size="large" />
+        </div>
     </div>
 </template>
 

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>