ImportSubscribers

Author: tatevikg1

assets/vue/components/subscribers/ImportResult.vue

@@ -0,0 +1,83 @@
+<template>
+<div
+    v-if="isImportResultOpen"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+    @click.self="$emit('close')"
+>
+<div class="w-full max-w-md rounded-xl bg-white shadow-xl border border-slate-200">
+  <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200">
+    <h3 class="text-base font-semibold text-slate-900">Import Result</h3>
+    <button
+        class="text-slate-400 hover:text-slate-600 transition-colors"
+        @click="$emit('close')"
+    >
+      <BaseIcon name="x" class="w-5 h-5" />
+    </button>
+  </div>
+
+  <div class="p-4 space-y-4">
+    <div class="grid grid-cols-2 gap-3">
+      <div class="rounded-lg bg-slate-50 border border-slate-200 p-3">
+        <div class="text-xs text-slate-500">Imported</div>
+        <div class="text-lg font-semibold text-slate-900">
+          {{ importResult.imported }}
+        </div>
+      </div>
+
+      <div class="rounded-lg bg-slate-50 border border-slate-200 p-3">
+        <div class="text-xs text-slate-500">Skipped</div>
+        <div class="text-lg font-semibold text-slate-900">
+          {{ importResult.skipped }}
+        </div>
+      </div>
+    </div>
+
+    <div v-if="importResult.errors && importResult.errors.length">
+      <div class="text-sm font-medium text-slate-900 mb-2">Errors</div>
+      <div class="max-h-48 overflow-y-auto rounded-lg border border-red-200 bg-red-50 p-3">
+        <ul class="space-y-1 text-sm text-red-700">
+          <li v-for="(error, index) in importResult.errors" :key="index">
+            {{ error }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div v-else class="text-sm text-green-700 rounded-lg border border-green-200 bg-green-50 p-3">
+      Import completed without errors.
+    </div>
+  </div>
+
+  <div class="px-4 py-3 border-t border-slate-200 flex justify-end">
+    <button
+        class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors"
+        @click="$emit('close')"
+    >
+      Close
+    </button>
+  </div>
+</div>
+</div>
+</template>
+
+<script setup>
+import BaseIcon from '../base/BaseIcon.vue'
+
+defineProps({
+  isImportResultOpen: {
+    type: Boolean,
+    required: true
+  },
+  importResult: {
+    type: Object,
+    required: true,
+    default: () => ({
+      imported: 0,
+      skipped: 0,
+      errors: []
+    })
+  }
+})
+
+defineEmits(['close'])
+</script>

assets/vue/components/subscribers/SubscriberDirectory.vue

@@ -26,12 +26,21 @@
             </select>
           </div>
           <div class="flex gap-2">
+            <input
+                ref="fileInput"
+                type="file"
+                class="hidden"
+                accept=".csv"
+                @change="handleFileChange"
+            >
             <button
-                class="flex-[3] sm:flex-none px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg flex items-center justify-center gap-2 transition-colors"
-                @click="exportSubscribers"
+                class="flex-[3] sm:flex-none px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                :disabled="isImporting"
+                @click="importSubscribers"
             >
-              <BaseIcon name="download" class="w-4 h-4" />
-              <span class="flex items-center whitespace-nowrap">Export CSV</span>
+              <BaseIcon v-if="!isImporting" name="upload" class="w-4 h-4" />
+              <div v-else class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+              <span class="flex items-center whitespace-nowrap">{{ isImporting ? 'Importing...' : 'Import CSV' }}</span>
             </button>
           </div>
         </div>
@@ -47,6 +56,11 @@
       @close="closeSubscriberModal"
       @updated="handleSubscriberUpdated"
     />
+    <ImportResult
+      :is-import-result-open="isImportResultOpen"
+      :import-result="importResult"
+      @close="isImportResultOpen = false"
+    />
     <div class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-slate-500">
       <div class="text-center sm:text-left">
         Showing <span class="font-medium text-slate-900">{{ subscribers.length }}</span> of <span class="font-medium text-slate-900">{{ pagination.total }}</span> subscribers
@@ -76,6 +90,7 @@ import BaseIcon from '../base/BaseIcon.vue'
 import SubscriberFilters from './SubscriberFilters.vue'
 import SubscriberTable from './SubscriberTable.vue'
 import SubscriberModal from './SubscriberModal.vue'
+import ImportResult from './ImportResult.vue'
 import { inject, ref, onMounted, watch } from 'vue'
 import { subscriberFilters } from './subscriberFilters'
 import { subscribersClient } from '../../api'
@@ -96,6 +111,14 @@ const searchQuery = ref('')
 const searchColumn = ref('email')
 const isModalOpen = ref(false)
 const selectedSubscriberId = ref(null)
+const fileInput = ref(null)
+const isImporting = ref(false)
+const isImportResultOpen = ref(false)
+const importResult = ref({
+  imported: 0,
+  skipped: 0,
+  errors: []
+})
 let searchTimeout = null
 
 const searchColumns = [
@@ -242,6 +265,33 @@ const handleFilterChange = (filterId) => {
   fetchSubscribers()
 }
 
+const importSubscribers = () => {
+  fileInput.value.click()
+}
+
+const handleFileChange = async (event) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  isImporting.value = true
+  try {
+    const result = await subscribersClient.importSubscribers({
+      file,
+      listId: 0,
+      updateExisting: true
+    })
+    importResult.value = result
+    isImportResultOpen.value = true
+    fetchSubscribers()
+  } catch (error) {
+    console.error('Failed to import subscribers:', error)
+    alert('Failed to import subscribers. Please check the file and try again.')
+  } finally {
+    isImporting.value = false
+    event.target.value = ''
+  }
+}
+
 const exportSubscribers = () => {
   const params = new URLSearchParams()
   if (currentFilter.value && currentFilter.value !== 'all') {