front/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']

front/src/components/pages/Groups.vue

@@ -3,6 +3,7 @@ import { useAsyncState } from '@vueuse/core';
 import { inject } from 'vue';
 import { GroupService } from '../../core/services/group-service';
 import SpendingGroupManager from '../support/SpendingGroupManager.vue';
+import { DeleteOutlined } from '@ant-design/icons-vue';
 
 const groupService = inject(GroupService.name) as GroupService;
 
@@ -17,6 +18,11 @@ const columns = [
         title: "Планы группы",
         dataIndex: "plans",
         key: "plans",
+    },
+    {
+        title: 'Операция',
+        dataIndex: 'operation',
+        key: 'operation',
     }
 ]
 
@@ -26,6 +32,13 @@ const refreshData = () => {
         isReady.value = true;
     });
 }
+
+const onDelete = (key: string) => {
+    groupService.deleteGroup(key)
+    .then(() => {
+        refreshData();
+    })
+}
 </script>
 
 <template>
@@ -35,6 +48,15 @@ const refreshData = () => {
             <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>
     </a-table>
     <div v-else>

front/src/components/pages/Home.vue

@@ -3,7 +3,7 @@ import { useAsyncState } from '@vueuse/core';
 import ChangeRecordMenu from '../support/ChangeRecordManager.vue';
 import { ChangeRecordService } from '../../core/services/change-record-service';
 import { inject } from 'vue';
-import { ChangeRecordViewModel } from '../../core/api/data-contracts';
+import { DeleteOutlined } from '@ant-design/icons-vue';
 
 const changeRecordService = inject(ChangeRecordService.name) as ChangeRecordService;
 
@@ -23,6 +23,11 @@ const columns = [
         title: 'Группа расходов',
         dataIndex: 'spendingGroupName',
         key: 'spendingGroupName',
+    },
+    {
+        title: 'Операция',
+        dataIndex: 'operation',
+        key: 'operation',
     }
 ]
 
@@ -32,11 +37,30 @@ const refreshData = () => {
         isReady.value = true;
     });
 }
+
+const onDelete = (key: string) => {
+    changeRecordService.deleteRecord(key)
+    .then(() => {
+        refreshData();
+    })
+}
 </script>
 
 <template>
     <ChangeRecordMenu :refreshData="refreshData" />
-    <a-table :dataSource="state" :columns="columns" v-if="isReady" />
+    <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>
+    </a-table>
     <div v-else>
         <a-spin size="large" />
     </div>

front/src/components/pages/Plans.vue

@@ -4,6 +4,7 @@ import { inject } from 'vue';
 import { PlanService } from '../../core/services/plans-service';
 import { useRoute } from 'vue-router';
 import PlanManager from '../support/PlanManager.vue';
+import { DeleteOutlined } from '@ant-design/icons-vue';
 
 const planService = inject(PlanService.name) as PlanService;
 const groupId = useRoute().params.groupId as string;
@@ -26,6 +27,12 @@ const columns = [
         title: "Конец плана",
         dataIndex: "endAt",
         key: "endAt",
+    },
+    
+    {
+        title: 'Операция',
+        dataIndex: 'operation',
+        key: 'operation',
     }
 ]
 
@@ -35,12 +42,30 @@ const refreshData = () => {
         isReady.value = true;
     });
 };
+
+const onDelete = (key: string) => {
+    planService.deletePlan(key)
+    .then(() => {
+        refreshData();
+    })
+}
 </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>
+            </template>
+        </template>
     </a-table>
     <div v-else>
         <a-spin size="large" />

front/src/core/services/change-record-service.ts

@@ -8,12 +8,24 @@ export class ChangeRecordService {
         this._api = api;
     }
 
-    async createRecord(data: ChangeRecordDto) {
-        let result = await this._api.changeRecordCreate(data);
+    private async _updateUser() {
         const store = useUserStore();
         let updatedUser = await this._api.userGet({ Id: store.user.id });
 
         store.updateUser(updatedUser.data);
+    }
+
+    async createRecord(data: ChangeRecordDto) {
+        let result = await this._api.changeRecordCreate(data);
+        this._updateUser();
+        console.log(result);
+    }
+
+    async deleteRecord(Id: string) {
+        console.log(Id);
+        let result = await this._api.changeRecordDelete({ Id });
+        this._updateUser();
+        console.log("delete");
         console.log(result);
     }
 

front/src/core/services/group-service.ts

@@ -20,6 +20,12 @@ export class GroupService {
         return result.data;
     }
 
+    async deleteGroup(Id: string) {
+        let result = await this._api.spendingGroupDelete({ Id });
+        console.log("delete");
+        console.log(result);
+    }
+
     async createGroup(data: SpendingGroupDto) {
         let result = await this._api.spendingGroupCreate(data);
         console.log(result);

front/src/core/services/plans-service.ts

@@ -2,17 +2,25 @@ import { Api } from "../api/Api";
 import { SpendingPlanDto, SpendingPlanViewModel } from "../api/data-contracts";
 
 export class PlanService {
-    async createPlan(data: SpendingPlanDto) {
-        const result = await this._api.spendingPlanCreate(data);
-        console.log(result);
-    }
+    
     private readonly _api: Api
     constructor(api: Api) {
         this._api = api;
     }
 
+    async deletePlan(Id: string) {
+        let result = await this._api.spendingPlanDelete({ Id });
+        console.log("delete");
+        console.log(result);
+    }
+
     async getList(groupId: string): Promise<SpendingPlanViewModel[] | null> {
         const result = await this._api.spendingGroupDetail(groupId);
         return result.data.spendingPlans || null;
     }
+
+    async createPlan(data: SpendingPlanDto) {
+        const result = await this._api.spendingPlanCreate(data);
+        console.log(result);
+    }
 }