opendesk

1<template>
2  <div>
3    <Dialog
4      v-model:open="open"
5      :title="__('Create Contact')"
6      size="md"
7      @after-leave="reset"
8    >
9      <template #default>
10        <div class="space-y-4">
11          <template
12            v-for="fieldOrRow in fieldConfig"
13            :key="
14              Array.isArray(fieldOrRow) ? fieldOrRow[0]?.key : fieldOrRow.key
15            "
16          >
17            <!-- Grid row (e.g. first + last name) -->
18            <div
19              v-if="Array.isArray(fieldOrRow)"
20              class="grid grid-cols-2 gap-4"
21            >
22              <template v-for="field in fieldOrRow" :key="field.key">
23                <FormControl
24                  :label="field.label"
25                  :type="field.type"
26                  :required="field.required"
27                  :placeholder="field.placeholder"
28                  v-model="(state as any)[field.key]"
29                >
30                  <template v-if="field.prefix" #prefix>
31                    <component :is="field.prefix" />
32                  </template>
33                </FormControl>
34              </template>
35            </div>
36
37            <!-- File: avatar + uploader -->
38            <template v-else-if="fieldOrRow.type === 'file'">
39              <ImageAvatar
40                v-model="state.image"
41                :label="__('Photo')"
42                :fallback-label="state.firstName || __('Contact')"
43                shape="circle"
44              />
45            </template>
46
47            <!-- Email: single flat field -->
48            <template v-else-if="fieldOrRow.type === 'email'">
49              <FormControl
50                :label="fieldOrRow.label"
51                type="email"
52                :required="fieldOrRow.required"
53                :placeholder="fieldOrRow.placeholder"
54                v-model="state.email"
55              >
56                <template #prefix>
57                  <LucideMail class="size-4" />
58                </template>
59              </FormControl>
60            </template>
61
62            <!-- Phone (tel): single flat field -->
63            <template v-else-if="fieldOrRow.type === 'tel'">
64              <PhoneControl :label="fieldOrRow.label" v-model="state.phone" />
65            </template>
66
67            <template v-else-if="fieldOrRow.type === 'Link'">
68              <div class="space-y-1.5">
69                <Link
70                  :doctype="fieldOrRow.doctype!"
71                  :placeholder="fieldOrRow.placeholder"
72                  v-model="state.customer"
73                  :label="fieldOrRow.label"
74                />
75              </div>
76            </template>
77
78            <!-- Default: text / number / etc -->
79            <template v-else>
80              <FormControl
81                :label="fieldOrRow.label"
82                :type="fieldOrRow.type"
83                :required="fieldOrRow.required"
84                :placeholder="fieldOrRow.placeholder"
85                v-model="(state as any)[fieldOrRow.key]"
86              >
87                <template v-if="fieldOrRow.prefix" #prefix>
88                  <component :is="fieldOrRow.prefix" />
89                </template>
90              </FormControl>
91            </template>
92          </template>
93
94          <Checkbox
95            size="sm"
96            v-model="state.invite"
97            :label="__('Invite as User')"
98          />
99
100          <div class="flex justify-end pt-1 gap-2">
101            <Button
102              :label="__('Create')"
103              theme="gray"
104              variant="solid"
105              @click="handleAdd"
106              :loading="isLoading"
107            />
108          </div>
109        </div>
110      </template>
111    </Dialog>
112  </div>
113</template>
114
115<script setup lang="ts">
116import ImageAvatar from "@/components/ImageAvatar.vue";
117import { useNewContact } from "@/composables/contact";
118import { __ } from "@/translation";
119import { Button, Checkbox, Dialog, FormControl } from "frappe-ui";
120import LucideMail from "~icons/lucide/mail";
121import Link from "../frappe-ui/Link.vue";
122import PhoneControl from "../frappe-ui/PhoneControl/PhoneControl.vue";
123
124const open = defineModel<boolean>({ default: false });
125
126const { state, fieldConfig, addContact, isLoading, reset } = useNewContact();
127
128function handleAdd() {
129  addContact();
130}
131</script>
132