Expand editor to take up all available space

.gitignore

@@ -28,3 +28,4 @@ pnpm-debug.log*
 # Excel
 *.xlsx
 !template.xlsx
+.env

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scheduler",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -44,7 +44,7 @@ export default Vue.extend({
 </script>
 
 <template>
-	<v-app>
+	<v-app class="app">
 		<snackbar :visibility="snackbar"> Nagyítás: {{ zoomLevel }}% </snackbar>
 		<v-app-bar app color="primary" dark>
 			<div class="d-flex align-center routes">
@@ -55,7 +55,7 @@ export default Vue.extend({
 					@click="$router.push(route)"
 					:disabled="$router.currentRoute.path == route"
 				>
-					<v-icon>{{ icon }}</v-icon>
+					<v-icon class="navbar-icon">{{ icon }}</v-icon>
 					{{ name }}
 				</v-btn>
 			</div>
@@ -72,20 +72,24 @@ export default Vue.extend({
 			</v-btn>
 		</v-app-bar>
 
-		<v-main>
+		<v-main class="view">
 			<router-view />
 		</v-main>
 	</v-app>
 </template>
 
-
-
 <style scoped>
 .routes {
 	gap: 15px;
 	margin: 10px;
 }
-.v-icon {
+.navbar-icon {
 	padding-right: 5px;
 }
 </style>
+
+<style>
+html, body{
+	overflow: auto !important;
+}
+</style>

src/components/BasePopover.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 			// If the popover would cover the target move the popover above it
 			let maxTop = window.innerHeight - popoverHeight.value - margin
 			if (bottom > maxTop)
-				return top - offset - popoverHeight.value
+				return _.clamp(top - offset - popoverHeight.value, margin, maxTop)
 
 			return _.clamp(bottom + offset, margin, maxTop)
 		})
@@ -78,7 +78,7 @@ export default defineComponent({
 			}
 		})
 
-		watch(() => props.targets, () => { 
+		watch(() => props.targets, () => {
 			updateRects()
 			root.$nextTick(updateDimensions)
 		})

src/components/GlobalCounters.vue

@@ -16,7 +16,7 @@ export default Vue.extend({
 
 <template>
 	<div class="table-wrapper">
-		<table>
+		<table class="table">
 			<thead>
 				<th />
 				<th v-for="day in sheet.month_length" :key="day">{{ day }}</th>
@@ -46,4 +46,8 @@ th {
 thead th:first-child {
 	min-width: 10em;
 }
+.table-wrapper{
+	overflow: auto !important;
+	max-height: 100%;
+}
 </style>

src/components/Popover.vue

@@ -139,7 +139,6 @@ export default Vue.extend({
 	align-items: center;
 	gap: 10px;
 	justify-content: space-between;
-	flex-wrap: wrap;
 }
 
 /* .absolute {

src/composables/selection.ts

@@ -19,10 +19,12 @@ export default function (
 
 	const moveSelection = (dx: number, dy: number, e: KeyboardEvent): void => {
 		drag.end = clamp(drag.end + dx, 1, sheet.month_length)
+		drag.start = clamp(drag.start, 1, sheet.month_length)
 		if (e.shiftKey == false)
 			drag.start = drag.end;
 
 		drag.employee_index = clamp(drag.employee_index + dy, 0, sheet.schedule.length - 1)
+		popover.value = true;
 	}
 
 	const setSelection = (start: number, end: number, employee_index : number): void => {

src/state/sheets.ts

@@ -56,7 +56,7 @@ const sheets: Module<State, {}> = {
         },
         remove_employee({ commit, getters }, name: string) {
             const index = getters.index(name)
-            if (index == -1) throw `Törölni kívánt '${name}' dolgozó nincs a beosztásban!`
+            if (index == -1) return; //throw `Törölni kívánt '${name}' dolgozó nincs a beosztásban!`
             commit("remove_employee", index)
             commit("delete_undos", index)
         },

src/views/Editor.vue

@@ -27,7 +27,7 @@ export default Vue.extend({
 </script>
 
 <template>
-	<splitpanes class="default-theme">
+	<splitpanes class="default-theme panes">
 		<pane min-size="50">
 			<monthly :error_groups="error_groups" :start_times="start_times"/>
 		</pane>
@@ -42,4 +42,43 @@ export default Vue.extend({
 			</splitpanes>
 		</pane>
 	</splitpanes>
-</template>
+</template>
+
+<style scoped>
+.panes{
+	height: calc(100vh - 64px);
+}
+</style>
+
+<style>
+
+.table {
+	position: relative;
+	border-collapse: separate;
+	table-layout: fixed;
+	user-select: none;
+	border-spacing: 0;
+}
+.table thead th {
+	position: sticky;
+	top: 0;
+	background: #000;
+	color: #fff;
+	z-index: 1;
+}
+.table head th:hover {
+	filter:invert(15%)
+}
+
+.table thead th:first-child {
+	left: 0;
+	z-index: 2;
+}
+
+.table tbody th {
+	position: sticky;
+	left: 0;
+	background: #fff;
+	border: 1px solid #ccc;
+}
+</style>

src/views/Monthly.vue

@@ -41,7 +41,10 @@ export default defineComponent({
 			let name = sheet.GetRow(index).employee.name
 			let row = context.refs[name] as Vue[];
 
+			// console.log(row[0].$children)
+
 			let currDay = row[0].$children.find((e) => {
+				// console.log(e.$props.day)
 				if (!e.$props.day)
 					throw `Az '${name}' sornak nincsenek leszármazottjai`;
 
@@ -113,7 +116,6 @@ export default defineComponent({
 				} else {
 					moveSelection(dx, dy, e)
 					context.root.$nextTick(() => selection_tracker.scrollIntoView(selection_elements.value, setTableScroll.value));
-
 				}
 			}
 		}
@@ -272,10 +274,7 @@ export default defineComponent({
 	</div>
 </template>
 
-<style>
-.wrapper {
-	max-height: 100%;
-}
+<style scoped>
 .nametag {
 	min-width: 10em;
 	border-right-style: double;
@@ -285,45 +284,13 @@ export default defineComponent({
 }
 .header-sticky-right {
 	position: sticky;
-	/* right: 0; */
 	z-index: 2;
 }
 .table-wrapper {
 	overflow: auto;
 	position: relative;
 	border: 1px solid #eee;
-	max-height: 75vh;
 	scroll-behavior: smooth;
+	max-height: calc(100vh - 100px);
 }
-table {
-	position: relative;
-	border-collapse: separate;
-	table-layout: fixed;
-	user-select: none;
-	border-spacing: 0;
-}
-
-.table thead th {
-	position: sticky;
-	top: 0;
-	background: #000;
-	color: #fff;
-	z-index: 1;
-}
-
-.table head th:hover {
-	filter:invert(15%)
-}
-
-.table thead th:first-child {
-	left: 0;
-	z-index: 2;
-}
-
-.table tbody th {
-	position: sticky;
-	left: 0;
-	background: #fff;
-	border: 1px solid #ccc;
-}
-</style>
+</style>

src/views/SheetSetup.vue

@@ -9,15 +9,15 @@ export default defineComponent({
 	name: "SheetSetup",
 	setup(props, context) {
 		const { useState, useMutations, useActions } = createNamespacedHelpers<Staff>(store, "staff");
-		// const { employees } = useState(["employees"]);
+		const { employees } = useState(["employees"]);
 		const newSheetDialog = ref(false)
-		const selection = ref([])
+		const selection = ref(employees.value)
 		const datePicker = ref(new Date().toISOString().substring(0,9))
 
 		const headers = [{ text: 'Dolgozó neve', value: 'name' }]
 
 		return {
-			// employees,
+			employees,
 			headers,
 			newSheetDialog,
 			datePicker,
@@ -31,11 +31,6 @@ export default defineComponent({
 			this.$store.dispatch("new_sheet", { year: date.getFullYear(), month: date.getMonth() + 1, employees: this.selection })
 		}
 	},
-    computed:{
-        employees(){
-            return this.$store.state.staff.employees
-        }
-    }
 })
 </script>
 

yarn.lock

@@ -4136,11 +4136,6 @@ dotenv-expand@^5.1.0:
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
-dotenv@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
-  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
-
 dotenv@^8.2.0:
   version "8.6.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"