Draft: Migrate views to Vue(tify)

Invoice Detail View

aleksis/apps/tezor/frontend/components/invoice/InvoiceActions.vue

+<script setup>
+import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
+</script>
+<script>
+import { sendInvoiceEmails } from "./invoices.graphql";
+export default {
+  name: "InvoiceActions",
+  props: {
+    invoice: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    onDone() {
+      this.$toastSuccess(
+        this.$t("tezor.invoice.send_email_success", {
+          number: this.invoice.number,
+          email: this.invoice.billingEmail,
+        }),
+      );
+    },
+  },
+  data() {
+    return {
+      gqlSendInvoiceEmails: sendInvoiceEmails,
+    };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <secondary-action-button
+      v-if="invoice.canPrintInvoice"
+      i18n-key="tezor.invoice.actions.print"
+      icon-text="mdi-printer-outline"
+      :to="{ name: 'tezor.printInvoice', params: { token: invoice.token } }"
+      target="_blank"
+    />
+    <ApolloMutation
+      v-if="invoice.canSendInvoiceEmail"
+      :mutation="gqlSendInvoiceEmails"
+      :variables="{ ids: [this.invoice.token] }"
+      @done="onDone"
+    >
+      <template #default="{ mutate, loading, error }">
+        <secondary-action-button
+          i18n-key="tezor.invoice.actions.send_email"
+          icon-text="mdi-email-fast-outline"
+          :disabled="loading"
+          :loading="loading"
+          @click="mutate"
+        />
+      </template>
+    </ApolloMutation>
+  </div>
+</template>
+
+<style scoped></style>