Feat: campaigns

assets/router/index.js

@@ -3,13 +3,17 @@ import DashboardView from '../vue/views/DashboardView.vue'
 import SubscribersView from '../vue/views/SubscribersView.vue'
 import ListsView from '../vue/views/ListsView.vue'
 import ListSubscribersView from '../vue/views/ListSubscribersView.vue'
+import CampaignsView from '../vue/views/CampaignsView.vue'
+import CampaignEditView from '../vue/views/CampaignEditView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', name: 'dashboard', component: DashboardView, meta: { title: 'Dashboard' } },
         { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
         { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
+        { path: '/campaigns', name: 'campaigns', component: CampaignsView, meta: { title: 'Campaigns' } },
+        { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
         { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
         { path: '/:pathMatch(.*)*', redirect: '/' },
     ],

assets/vue/api.js

@@ -1,4 +1,14 @@
-import {Client, ListClient, SubscribersClient, SubscriptionClient, SubscriberAttributesClient} from '@tatevikgr/rest-api-client';
+import {
+    CampaignClient,
+    Client,
+    ListMessagesClient,
+    ListClient,
+    StatisticsClient,
+    SubscribersClient,
+    SubscriptionClient,
+    SubscriberAttributesClient,
+    TemplatesClient
+} from '@tatevikgr/rest-api-client';
 
 const appElement = document.getElementById('vue-app');
 const apiToken = appElement?.dataset.apiToken;
@@ -16,7 +26,11 @@ if (apiToken) {
 
 export const subscribersClient = new SubscribersClient(client);
 export const listClient = new ListClient(client);
+export const campaignClient = new CampaignClient(client);
+export const listMessagesClient = new ListMessagesClient(client);
+export const statisticsClient = new StatisticsClient(client);
 export const subscriptionClient = new SubscriptionClient(client);
 export const subscriberAttributesClient = new SubscriberAttributesClient(client);
+export const templateClient = new TemplatesClient(client);
 
 export default client;

assets/vue/components/base/CkEditorField.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="editor-field" :style="{ '--editor-min-height': `300px` }">
+    <label
+        v-if="label"
+        :for="fieldId"
+        class="mb-1 block text-sm font-medium text-slate-700"
+    >
+      {{ label }}
+    </label>
+
+    <ckeditor
+        :id="fieldId"
+        v-model="localValue"
+        :editor="ClassicEditor"
+        :config="editorConfig"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Ckeditor } from '@ckeditor/ckeditor5-vue'
+
+import {
+  ClassicEditor,
+  Essentials,
+  Paragraph,
+  Bold,
+  Italic,
+  Heading,
+  Link,
+  List,
+  BlockQuote,
+  Table,
+  TableToolbar,
+  HorizontalLine
+} from 'ckeditor5'
+
+import 'ckeditor5/ckeditor5.css'
+
+defineOptions({
+  components: {
+    ckeditor: Ckeditor
+  }
+})
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  id: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const fieldId = props.id || `ckeditor-${crypto.randomUUID()}`
+
+const editorConfig = {
+  licenseKey: 'GPL',
+  plugins: [
+    Essentials,
+    Paragraph,
+    Bold,
+    Italic,
+    Heading,
+    Link,
+    List,
+    BlockQuote,
+    Table,
+    TableToolbar,
+    HorizontalLine
+  ],
+  toolbar: [
+    'undo',
+    'redo',
+    '|',
+    'heading',
+    '|',
+    'bold',
+    'italic',
+    'link',
+    '|',
+    'bulletedList',
+    'numberedList',
+    '|',
+    'blockQuote',
+    'insertTable',
+    '|',
+    'horizontalLine'
+  ]
+}
+
+</script>
+
+<style scoped>
+:deep(.ck-editor__editable_inline) {
+  min-height: var(--editor-min-height) !important;
+  overflow-y: auto;
+}
+</style>