Discover: Save button done.

2023-04-27 18:40:14 +08:00
parent b1161a82a7
commit ab8708a597
4 changed files with 123 additions and 126 deletions
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -0,0 +1,77 @@
+import Swal from 'sweetalert2'
+
+const customClass = {
+  htmlContainer: '!w-[564px]',
+  title: '!text-xl !font-semibold !mb-2',
+  htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
+  inputLabel: '!text-sm !font-normal',
+  input: '!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200',
+  validationMessage: '!bg-neutral-10 !text-danger',
+  confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
+  cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
+};
+
+// 帶入參數 pinia aciton this.sweetVal
+export async function saveFilter(addFilterId) {
+  let filterName = '';
+  const { value, isConfirmed } = await Swal.fire({
+    title: 'SAVE NEW FILTER',
+    input: 'text',
+    inputPlaceholder: 'Enter Filter Name.',
+    inputValue: filterName,
+    inputValidator: (value) => {
+      if (!value) return 'You need to write something!';
+      filterName = value;
+    },
+    icon: 'info',
+    iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
+    iconColor: '#0099FF',
+    reverseButtons:true,
+    confirmButtonColor: '#0099FF',
+    showCancelButton: true,
+    cancelButtonColor: '#94a3b8',
+    customClass: customClass,
+  });
+  // 存檔成功
+  if(isConfirmed) await addFilterId(filterName);
+  // 顯示儲存完成
+  if (value) {
+    await Swal.fire({
+      title: 'SAVE COMPLETE',
+      html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
+      showConfirmButton: false,
+      icon: 'success',
+      iconColor: '#0099FF',
+      customClass: customClass
+    })
+  };
+  // 清空欄位
+  filterName = '';
+}
+
+export async function leaveFilter(next, addFilterId) {
+  const result = await Swal.fire({
+    title: 'ARE YOU SURE TO LEAVE MAP?',
+    html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
+    icon: 'warning',
+    iconColor: '#FF3366',
+    reverseButtons:true,
+    confirmButtonText: 'Save as',
+    confirmButtonColor: '#FF3366',
+    showCancelButton: true,
+    cancelButtonText: 'OK',
+    cancelButtonColor: '#94a3b8',
+    customClass: customClass
+  })
+  if(result.isConfirmed) {
+    await saveFilter(addFilterId)
+    next();
+  }
+  else if(result.dismiss === 'cancel') {
+    next();
+  }
+  else if(result.dismiss === 'backdrop') {
+    next(false);
+  }
+
+}