Reverse calculator fixed (#11)

## Изменения
* Изменено использование вкладок (теперь переключение нажатием на
вкладку, а не на надпись)
* Исправлено форматирование стипендий, из-за которого возникало
некорректное отображение суммы
* Изменен класс IrdomSection для корректного отображения суммы в
"прямом" калькуляторе (чтобы сумма не уезжала вниз)

frontend.code-workspace

@@ -0,0 +1,78 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"extensions": {
+		"recommendations": [
+			"Vue.volar",
+			"dbaeumer.vscode-eslint",
+			"esbenp.prettier-vscode",
+			"formulahendry.auto-close-tag",
+			"formulahendry.auto-rename-tag",
+			"steoates.autoimport",
+			"vunguyentuan.vscode-css-variables",
+			"mohd-akram.vscode-html-format",
+		],
+	},
+	"tasks": {
+		"version": "2.0.0",
+		"tasks": [
+			{
+				"label": "Configure",
+				"type": "shell",
+				"command": "npm install",
+			},
+			{
+				"label": "Run local",
+				"type": "shell",
+				"command": "npm run dev",
+			},
+			{
+				"label": "Build",
+				"type": "shell",
+				"command": "npm run build",
+				"group": {
+					"kind": "build",
+					"isDefault": true,
+				},
+			},
+			{
+				"label": "Test",
+				"type": "shell",
+				"command": "npm run test",
+				"group": {
+					"kind": "test",
+					"isDefault": true,
+				},
+			},
+		],
+	},
+	"launch": {
+		"version": "0.2.0",
+		"configurations": [
+			{
+				"name": "Launch dev",
+				"request": "launch",
+				"runtimeArgs": ["dev"],
+				"runtimeExecutable": "pnpm",
+				"skipFiles": ["<node_internals>/**"],
+				"type": "node",
+				"serverReadyAction": {
+					"pattern": "Local:   http://localhost:([0-9]+)/",
+					"uriFormat": "http://localhost:%s",
+					"action": "openExternally",
+				},
+			},
+		],
+	},
+	"settings": {
+		"typescript.tsdk": "node_modules/typescript/lib",
+		"css.validate": false,
+		"git.openRepositoryInParentFolders": "always",
+		"[vue]": {
+        	"editor.defaultFormatter": "esbenp.prettier-vscode"
+    	},
+	},
+}

src/App.vue

@@ -1,11 +1,20 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { router } from './router/index';
+
+const currentTab = ref<'calc' | 'reverse-calc'>('calc');
+
+const onChangeTab = () => {
+	router.push(`/${currentTab.value}`);
+};
+</script>
 
 <template>
 	<v-app>
 		<main class="main">
-			<v-tabs bg-color="rgb(0, 1, 76)" grow="true">
-				<v-tab value="one"> <RouterLink to="/calc">Рассчитать выплату</RouterLink> </v-tab>
-				<v-tab value="two"> <RouterLink to="/reverse-calc">Узнать составляющие выплаты</RouterLink> </v-tab>
+			<v-tabs v-model="currentTab" bg-color="rgb(0, 1, 76)" color="white" @update:model-value="onChangeTab">
+				<v-tab value="calc"> Рассчитать выплату </v-tab>
+				<v-tab value="reverse-calc"> Узнать составляющие выплаты </v-tab>
 			</v-tabs>
 			<RouterView />
 		</main>
@@ -15,6 +24,9 @@
 <style scoped>
 .main {
 	width: min(900px, 100%);
-	margin: 0 auto;
+	min-height: 200vh;
+	margin: auto;
+	position: fixed;
+	align-self: center;
 }
 </style>

src/components/IrdomSection.vue

@@ -17,7 +17,7 @@ defineProps<{
 	font-size: 20px;
 }
 
-.section:not(:last-child) {
+.section {
 	margin-bottom: 35px;
 }
 </style>

src/pages/PageMain.vue

@@ -143,7 +143,7 @@ watch(gasCondition, val => {
 				</v-btn-toggle>
 			</IrdomSection>
 
-			<IrdomSection title="Членство в Профсоюзе">
+			<IrdomSection class="mb-12" title="Членство в Профсоюзе">
 				<v-btn-toggle v-model="data.member" mandatory divided>
 					<v-btn :value="true">Состою</v-btn>
 					<v-btn :value="false">Не состою</v-btn>
@@ -191,7 +191,7 @@ watch(gasCondition, val => {
 	background: white;
 	position: absolute;
 	left: 16px;
-	bottom: 16px;
+	bottom: 64px;
 	right: 16px;
 	z-index: 1;
 	align-items: center;

src/pages/ReverseCalc.vue

@@ -95,7 +95,17 @@ const getSumAndTax = (options: Result[]): Result[] => {
 };
 
 const combinations: Array<Result> = getSumAndTax(getCombinations(flattenStipend(Stipend)));
-const inputSum = ref(0);
+const inputSum = ref<string>('');
+
+function formatInput(input: string) {
+	if (input.length === 0) {
+		return true;
+	} else if (/^[0-9]+\.?[0-9]{0,2}$/.test(input)) {
+		return true;
+	} else {
+		return 'Недопустимые символы';
+	}
+}
 
 let result: Result = emptyResult;
 const recount = computed(() => {
@@ -119,10 +129,18 @@ const found = computed(() => {
 const lz = (number: number, digits: number) => `${'0'.repeat(digits)}${number}`.slice(-digits);
 
 const formattedStipend = (stipend: number): string => {
-	const thousands = Math.floor(stipend / 1000);
-	const rest = Math.floor(stipend % 1000);
-	const float = Math.round((stipend % 1) * 100);
-
+	let thousands: number;
+	let rest: number;
+	let float: number;
+	if (stipend > 0) {
+		thousands = Math.floor(stipend / 1000);
+		float = Math.round((stipend % 1) * 100);
+		rest = Math.floor(stipend % 1000);
+	} else {
+		thousands = Math.ceil(stipend / 1000);
+		rest = Math.ceil(stipend % 1000);
+		float = Math.round((stipend % 1) * 100);
+	}
 	if (thousands) return `${thousands} ${lz(rest, 3)},${lz(float, 2)} ₽`;
 	return `${rest},${lz(float, 2)} ₽`;
 };
@@ -132,8 +150,12 @@ const formattedStipend = (stipend: number): string => {
 	<div class="container">
 		<div class="rounded calc">
 			<IrdomSection title="Введите полученную сумму">
-				<v-text-field v-model="inputSum" label="Полученная сумма" @update:model-value="recount"></v-text-field>
-				<!-- <p id="some">f</p> -->
+				<v-text-field
+					v-model="inputSum"
+					label="Полученная сумма"
+					:rules="[formatInput]"
+					@update:model-value="recount"
+				></v-text-field>
 				<v-divider />
 			</IrdomSection>
 			<div>