opendesk

1<template>
2  <Dialog v-model:open="show" :title="__('Export')">
3    <template #default>
4      <FormControl
5        v-model="form.export_type"
6        variant="outline"
7        :label="__('Export Type')"
8        type="select"
9        :options="[
10          {
11            label: __('Excel'),
12            value: 'Excel',
13          },
14          {
15            label: __('CSV'),
16            value: 'CSV',
17          },
18        ]"
19        :placeholder="__('Excel')"
20      />
21
22      <div v-if="!allSelected" class="mt-3">
23        <FormControl
24          v-model="form.export_all"
25          type="checkbox"
26          :label="__('Export all {0} tickets', [rowCount])"
27        />
28      </div>
29    </template>
30    <template #actions>
31      <Button
32        :label="__('Download')"
33        variant="solid"
34        @click="
35          () =>
36            emit('update', {
37              ...form,
38              export_all: form.export_all || props.allSelected,
39            })
40        "
41        class="w-full"
42      />
43    </template>
44  </Dialog>
45</template>
46
47<script setup lang="ts">
48import { reactive, watch } from "vue";
49import { Button, Dialog, FormControl } from "frappe-ui";
50import { __ } from "./translation";
51
52const props = defineProps<{
53  rowCount: number;
54  allSelected?: boolean;
55}>();
56
57interface R {
58  export_type: "CSV" | "Excel";
59  export_all: boolean;
60}
61
62interface E {
63  (event: "update", value: R);
64}
65
66const emit = defineEmits<E>();
67
68const show = defineModel();
69
70const form: R = reactive({
71  export_type: "Excel",
72  export_all: false,
73});
74
75watch(
76  () => show.value,
77  (val) => {
78    if (!val) {
79      form.export_type = "Excel";
80      form.export_all = false;
81    }
82  }
83);
84</script>
85
86<style scoped></style>
87