Implement closing the current, and all, documents from the menu bar (#265)

Closes #261
Additional cleanup and refactoring with the way the backend relays the list of open documents to the frontend and prompts for confirmation.
This commit is contained in:
Keavon Chambers
2021-07-14 16:13:58 -07:00
parent f7e5dd1a4f
commit ccea88dfd7
9 changed files with 148 additions and 75 deletions

View File

@@ -7,11 +7,11 @@
:class="{ active: tabIndex === tabActiveIndex }"
v-for="(tabLabel, tabIndex) in tabLabels"
:key="tabLabel"
@click.middle="closeTab(tabIndex)"
@click.middle="handleTabClose(tabIndex)"
@click="handleTabClick(tabIndex)"
>
<span>{{ tabLabel }}</span>
<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" @click.stop="closeTab(tabIndex)" />
<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" @click.stop="handleTabClose(tabIndex)" />
</div>
</div>
<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
@@ -150,7 +150,7 @@ import Minimap from "../panels/Minimap.vue";
import IconButton from "../widgets/buttons/IconButton.vue";
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
import { MenuDirection } from "../widgets/floating-menus/FloatingMenu.vue";
import { ResponseType, registerResponseHandler, Response } from "../../utilities/response-handler";
import { ResponseType, registerResponseHandler, Response, PromptConfirmationToCloseDocument } from "../../utilities/response-handler";
const wasm = import("../../../wasm/pkg");
@@ -164,24 +164,37 @@ export default defineComponent({
PopoverButton,
},
methods: {
async handleTabClick(tabIndex: number) {
if (this.panelType !== "Document") return;
handleTabClick(tabIndex: number) {
if (this.panelType === "Document") this.selectDocument(tabIndex);
},
handleTabClose(tabIndex: number) {
if (this.panelType === "Document") this.closeDocumentWithConfirmation(tabIndex);
},
async selectDocument(tabIndex: number) {
const { select_document } = await wasm;
select_document(tabIndex);
},
async closeTab(tabIndex: number) {
if (this.panelType !== "Document") return;
const { close_document } = await wasm;
async closeDocumentWithConfirmation(tabIndex: number) {
// eslint-disable-next-line no-alert
const result = window.confirm("Closing this document will permanently discard all work. Continue?");
if (result) close_document(tabIndex);
const userConfirmation = window.confirm("Closing this document will permanently discard all work. Continue?");
if (userConfirmation) (await wasm).close_document(tabIndex);
},
async closeAllDocumentsWithConfirmation() {
// eslint-disable-next-line no-alert
const userConfirmation = window.confirm("Closing all documents will permanently discard all work in each of them. Continue?");
if (userConfirmation) (await wasm).close_all_documents();
},
},
mounted() {
registerResponseHandler(ResponseType.PromptCloseConfirmationModal, (_responseData: Response) => {
this.closeTab(this.tabActiveIndex);
// TODO: Move these somewhere more appropriate to act upon all panels
registerResponseHandler(ResponseType.PromptConfirmationToCloseDocument, (responseData: Response) => {
const promptData = responseData as PromptConfirmationToCloseDocument;
this.closeDocumentWithConfirmation(promptData.document_index);
});
registerResponseHandler(ResponseType.PromptConfirmationToCloseAllDocuments, (_responseData: Response) => {
this.closeAllDocumentsWithConfirmation();
});
},
props: {

View File

@@ -46,7 +46,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, SetActiveDocument, NewDocument, CloseDocument } from "../../utilities/response-handler";
import { ResponseType, registerResponseHandler, Response, SetActiveDocument, UpdateOpenDocumentsList } from "../../utilities/response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import Panel from "./Panel.vue";
@@ -59,15 +59,10 @@ export default defineComponent({
},
mounted() {
registerResponseHandler(ResponseType.NewDocument, (responseData: Response) => {
const documentData = responseData as NewDocument;
if (documentData) this.documents.push(documentData.document_name);
});
registerResponseHandler(ResponseType.CloseDocument, (responseData: Response) => {
const documentData = responseData as CloseDocument;
if (documentData) {
this.documents.splice(documentData.document_index, 1);
registerResponseHandler(ResponseType.UpdateOpenDocumentsList, (responseData: Response) => {
const documentListData = responseData as UpdateOpenDocumentsList;
if (documentListData) {
this.documents = documentListData.open_documents;
}
});
@@ -80,7 +75,7 @@ export default defineComponent({
data() {
return {
activeDocument: 0,
documents: ["Untitled Document"],
documents: ["Untitled Document"], // TODO: start as an empty list
};
},
});