Initial commit

app/components/handover/SelectTemplate.vue

@@ -0,0 +1,104 @@
+<script setup>
+import useSendHandoverEmail from '@/components/handover/useSendHandoverEmail';
+
+const props = defineProps({
+  products: Array
+});
+
+const { $getdata, $store } = useNuxtApp();
+const emit = defineEmits(['close', 'modalevent']);
+function cancel() {
+  emit('close')
+}
+
+async function confirm() {
+  await send();
+  emit('modalevent', { name: 'confirm'} );
+  emit('close');
+}
+
+const handoverTemplates = ref([]);
+const selectedHandoverTemplate = ref(null);
+const filter = ref({ elpro__stage__gt: 0 });
+const templateNameRef = computed(() => selectedHandoverTemplate.value?.name);
+const { send, isSending } = useSendHandoverEmail(filter, templateNameRef);
+
+const allowSend = computed(() => {
+  if (!templateNameRef.value) return false;
+  if (templateNameRef.value === 'Biên bản bàn giao đất - Cá nhân') {
+    // disallow submit if not all products have CN customers
+    const allCn = props.products.every(p => 
+      p.prdbk__transaction__customer__type__code === 'CN' 
+      && !p.prdbk__transaction__co_op
+    );
+    return allCn;
+  }
+  if (templateNameRef.value === 'Biên bản bàn giao đất - Tổ chức') {
+    // disallow submit if not all products have TC customers
+    const allTc = props.products.every(p => p.prdbk__transaction__customer__type__code === 'TC');
+    return allTc;
+  }
+  if (templateNameRef.value === 'Biên bản bàn giao đất - Đồng sở hữu') {
+    // disallow submit if not all products have coop customers
+    const allDsh = props.products.every(p => Boolean(p.prdbk__transaction__co_op));
+    return allDsh;
+  }
+
+  return true;
+});
+
+const handoverEmailTemplateNames = [
+  'Mail Thông báo bàn giao đất',
+  'Mail Thông báo tất toán',
+  'Biên bản bàn giao đất - Cá nhân',
+  'Biên bản bàn giao đất - Đồng sở hữu',
+  'Biên bản bàn giao đất - Tổ chức',
+];
+
+onMounted(async () => {
+  const templatesData = await $getdata('emailtemplate', undefined, { 
+    filter: { name__in: handoverEmailTemplateNames }, 
+    sort: 'name' 
+  });
+  handoverTemplates.value = templatesData;
+});
+</script>
+<template>
+  <div>
+    <div class="field">
+      <label class="label">
+        <span class="icon-text">
+          <span>Chọn mẫu email<b class="ml-1 has-text-danger">*</b></span>
+        </span>
+      </label>
+      <div class="tags">
+        <span 
+          v-for="temp in handoverTemplates"
+          :key="temp.id"
+          :class="['tag is-hoverable fs-14', {'is-primary': temp.id === selectedHandoverTemplate?.id }]"
+          @click="selectedHandoverTemplate = temp"
+        >
+          {{ temp.name }}
+        </span>
+      </div>
+      <p v-if="!allowSend && templateNameRef" class="help is-danger">Mẫu email không hợp lệ với các sản phẩm đã chọn</p>
+    </div>
+    <div>
+      <p v-if="allowSend" class="my-4">
+        Bạn có đồng ý gửi {{$store.selectedProductsForHandoverEmail.length}} thông báo không?
+      </p>
+      <div class="field is-grouped">
+        <div class="control is-expanded">
+          <button 
+            :class="['button is-primary has-text-white', { 'is-loading': isSending }]"
+            @click="confirm()"
+            :disabled="!allowSend"
+          >
+            Đồng ý
+          </button>
+          <button class="button is-white ml-2" @click="cancel()">Hủy</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>