@mptw/skylens-ui 1.3.14 → 1.3.15

package/components/SLTabs.vue

@@ -1,388 +1,428 @@
 <template lang="pug">
-.tabs(:class='tabsClass')
-  .tabs-nav(
-    v-show="!tabItemsOversize"
-    :class="{ show: !tabItemsOversize }"
-  )
-    .tabs-nav-left(ref='tabsNavLeftEl')
-      SLDistributor(
-        tag='ul',
-        :header='true',
-        :changeTabTo='changeTabTo',
-        ref='navComp'
-      )
-        slot
-    .tabs-nav-right(v-if='type === 1 && $slots["tabs-nav-right"]')
-      slot(name='tabs-nav-right')
-  .tabs-content
-    SLDistributor
-      .tabs-content-header(v-show="tabItemsOversize")
-        .tabs-content-header-left
-          SLDropdown.tabs-dropdown(
-            :title='currentTab',
-            v-model:showDropdown='showDropdown',
-            :class='{ active: showDropdown }',
-          )
-            SLDropdownItem(
-              v-for='(tabTitle, i) in tabTitles',
-              :title='tabTitle',
-              :class='{ active: i === activeTabIndex }',
-              @click='onClickedTab(i)',
-              :key='`${tabTitle}-${i}`'
+SLSitePage.m03-02p-page
+  ClientOnly
+    Teleport(to="#app-header-welcome-message") 受眾行為內單元提供單次的資料分析，可隨時查看歷史分析結果
+    Teleport(to='#header-breadcrumbs')
+      SLBreadcrumbs(:items='["受眾試算"]' info="依照設定的投放條件，在媒體投放前試算可接觸的受眾數量")
+  template(#site-page-header)
+    .site-page-header
+      .site-page-header-left
+        .site-page-title 受眾試算
+        .site-page-desc
+          span 依照設定的受眾條件，在媒體投放前試算可接觸的受眾數量
+          a(href='javascript:;')
+            SLIcon(icon='book')
+            span 單元導覽
+        .site-page-actions
+          SLButton(title='新增受眾包', post-icon='chevron-right', color='primary' class='create-btn')
+      .site-page-header-right
+        img(src='~/assets/images/m03/02p/m0302p-page-logo.svg')
+  SLNewTabs(:type='5')
+    template(#tabs-nav-right)
+      .inline-flex.items-center.space-x-4
+        SLSearchInput(
+          size='sm',
+          placeholder='搜尋標題名稱（部分字元即可）',
+          class='m0302p-search-input'
+        )
+    SLTab(title='受眾列表 (125)')
+      SLCard.audience-package-card
+        .audience-package
+          .audience-package-header
+            .header-left
+              SLButton(
+                title='新增受眾包',
+                color='primary',
+                size='lg',
+                @click='onClickedAdd'
+              )
+            .header-right
+              SLPagination(
+                v-if='totalCount > 0',
+                :total='totalCount',
+                :perPage='perPage',
+                :page='currentPage',
+                :showInfo='true'
+                @update:perPage='onUpdatedPerPage'
+                @update:page='onUpdatedPage'
+              )
+          .audience-package-body
+            template(v-if='tasks.length > 0')
+              ModuleM12AudiencePackageListItem(
+                v-for='task in tasks',
+                :task='task',
+                :key='task.id',
+                @delete='onClickedDelete',
+                @repack='onClickedRepack'
+              )
+            template(v-else) 沒有任何受眾包
+          .audience-package-footer
+            SLPagination(
+              v-if='totalCount > 0',
+              :total='totalCount',
+              :perPage='perPage',
+              :page='currentPage',
+              :showInfo='true'
+              @update:perPage='onUpdatedPerPage'
+              @update:page='onUpdatedPage'
             )
-        .tabs-content-header-right(v-if='$slots["tabs-nav-right"]')
-          slot(name='tabs-nav-right')
-      .tabs-content-body(ref='tabsContentBody')
-        slot
+    SLTab(title='投放 (125)')
+  ClientOnly
+    Teleport(to="#popup")
+      SLConfirmModal(
+        v-model:show='isShowDeleteConfirmModal',
+        title='刪除受眾包',
+        confirmButtonTitle='刪除',
+        confirmButtonColor='danger',
+        confirmButtonVariant='',
+        modalClass='m12-delete-confirm-modal',
+        @confirm='onDeleteApply',
+        data-cy="delete-confirm-modal"
+      )
+        SLIcon(icon='exclamation-triangle')
+        p 確定要刪除此受眾包嗎？
 </template>
 
 <script lang="ts">
-import { fromEvent, interval, Subscription } from "rxjs";
-import { debounce, startWith } from "rxjs/operators";
-import { SLDistributor } from "#components";
-
-type SLDistributorType = InstanceType<typeof SLDistributor>;
-
-export default defineComponent({
-  name: "SLTabs",
-  components: {},
-  props: {
-    size: {
-      type: String,
-      default: "",
-      validator: (value: string) => ["", "xs", "sm"].includes(value),
-    },
-    navMode: {
-      type: String,
-      default: "",
-    },
-    type: {
-      type: Number,
-      default: 1,
-      validator: (value: number) => [1, 2, 3, 4].includes(value),
-    },
-    activeTab: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ["update:activeTab"],
-  setup(props, { emit }) {
-    const { activeTab, size, type, navMode } = toRefs(props);
-
-    const tabsContentBody = shallowRef<HTMLElement | null>(null);
-    const tabsNavLeftEl = shallowRef<HTMLElement | null>(null);
-    const navComp = shallowRef<SLDistributorType | null>(null);
-    const activeTabIndex = ref(activeTab.value || 0);
-    const tabTitles = ref<Array<string>>([]);
-    const showDropdown = ref(false);
-    const tabItemsOversizeProxy = ref(false);
-
-    let observer: MutationObserver | null = null;
-    let resizeSubscriber: Subscription | null = null;
-
-    const tabsClass = computed(() => {
-      const classes: Array<string> = [`tabs-type-${type.value}`];
-
-      if (size.value !== "") {
-        classes.push(`tabs-${size.value}`);
+import uniqueId from 'lodash/uniqueId';
+import { format as formatDate } from 'date-fns';
+import useAppStore from '~/store/app';
+import useM12Store from '~/store/app/m12';
+import DomainUnionSubset from '@/models/DomainUnionSubset';
+import LatlonUnionSubset from '@/models/LatlonUnionSubset';
+import type { IAudTaskResponse, IUnionSubsetSource } from '~/interface/IAudTask';
+import type IAudTask from '~/interface/IAudTask';
+import { AudTaskStatus, AudTaskCMType } from '~/interface/IAudTask';
+
+const PER_PAGE = 10;
+
+function normalizeTask(task: IAudTaskResponse): IAudTask {
+  let gender = '';
+
+  switch ((task.genders || [])[0]) {
+    case '0':
+      gender = '未知';
+      break;
+    case '1':
+      gender = '男性';
+      break;
+    case '2':
+      gender = '女性';
+      break;
+    case '3':
+      gender = '不限';
+      break;
+    default:
+      break;
+  }
+
+  return {
+    id: task.task_id || '',
+    name: task.name || '',
+    status: task.status || AudTaskStatus.Run,
+    includeSets: JSON.parse(task.and || '[]').map((includeSets: Array<IUnionSubsetSource>) => {
+      return {
+        id: uniqueId(),
+        sets: includeSets
+          .map((includeSet) => {
+            if (includeSet.domains) {
+              return DomainUnionSubset.normalize(includeSet);
+            }
+            if (includeSet.pg_id) {
+              return LatlonUnionSubset.normalize(includeSet);
+            }
+            return null;
+          })
+          .filter((includeSet) => !!includeSet),
+      };
+    }),
+    differenceSets: JSON.parse(task.not || '[]').map((differenceSets: Array<IUnionSubsetSource>) => {
+      return {
+        id: uniqueId(),
+        sets: differenceSets
+          .map((differenceSet) => {
+            if (differenceSet.domains) {
+              return DomainUnionSubset.normalize(differenceSet);
+            }
+            if (differenceSet.pg_id) {
+              return LatlonUnionSubset.normalize(differenceSet);
+            }
+            return null;
+          })
+          .filter((differenceSet) => !!differenceSet),
+      };
+    }),
+    uuid: task.uuid || '',
+    steps: task.steps || [],
+    ages: (task.ages || []).map((age) => {
+      let name = '';
+      switch (age) {
+        case 'A':
+          name = '17以下';
+          break;
+        case 'B':
+          name = '18 - 24';
+          break;
+        case 'C':
+          name = '25 - 34';
+          break;
+        case 'D':
+          name = '35 - 44';
+          break;
+        case 'E':
+          name = '45 - 54';
+          break;
+        case 'F':
+          name = '55 - 64';
+          break;
+        case 'G':
+          name = '65 - 74';
+          break;
+        case 'H':
+          name = '75以上';
+          break;
+        default:
+          break;
       }
 
-      return classes.join(" ");
-    });
-    const currentTab = computed(() => {
-      return tabTitles.value[activeTabIndex.value];
-    });
-    const tabItemsOversize = computed({
-      get: () => {
-        return (
-          type.value !== 4 &&
-          (tabItemsOversizeProxy.value || navMode.value === "dropdown")
-        );
-      },
-      set: (newValue: boolean) => {
-        tabItemsOversizeProxy.value = newValue;
-      },
-    });
-
-    provide("activeTab", readonly(activeTabIndex));
-    provide("initialTab", readonly(activeTab));
-
-    function caculateTabs() {
-      nextTick(() => {
-        const tabLinks =
-          navComp.value?.$el.querySelectorAll(".tab-nav-item-link");
-        const tabLinkTitles = [];
-        if (tabLinks) {
-          for (let i = 0; i < tabLinks.length; i += 1) {
-            tabLinkTitles.push((tabLinks[i] as HTMLElement).innerText);
-          }
-        }
-        tabTitles.value = tabLinkTitles;
-
-        const tabsNavLeftRect = tabsNavLeftEl.value?.getBoundingClientRect();
-        const navRect = navComp.value?.$el?.getBoundingClientRect();
-
-        if (tabsNavLeftRect && navRect) {
-          tabItemsOversizeProxy.value = navRect.width > tabsNavLeftRect.width;
-        }
-      });
-    }
-
-    function changeTabTo(newTab: number) {
-      activeTabIndex.value = newTab;
-      emit("update:activeTab", newTab);
-    }
-
-    function onClickedTab(i: number) {
-      changeTabTo(i);
-    }
-
-    watch(activeTab, () => {
-      activeTabIndex.value = activeTab.value || 0;
-    });
-
-    onMounted(() => {
-      resizeSubscriber = fromEvent(window, "resize")
-        .pipe(debounce(() => interval(500)))
-        .pipe(startWith(0))
-        .subscribe(() => {
-          caculateTabs();
-        });
-
-      if (navComp.value) {
-        observer = new MutationObserver(caculateTabs);
-        observer.observe(navComp.value.$el, {
-          characterData: true,
-          attributes: false,
-          childList: true,
-          subtree: true,
-        });
+      return {
+        key: age,
+        name,
+      };
+    }),
+    gender: {
+      key: (task.genders || [])[0],
+      name: gender,
+    },
+    workAt: task.workCity || [],
+    homeAt: task.homeCity || [],
+    cms: (task.cm || []).map((cm) => {
+      let name = '';
+      switch (cm) {
+        case AudTaskCMType.GID:
+          name = 'Google瀏覽器受眾';
+          break;
+        case AudTaskCMType.IFA:
+          name = '行動裝置受眾';
+          break;
+        default:
+          break;
       }
-    });
+      const foundCM = (task.reports?.cm || []).find(
+        (reportsCM) => reportsCM.name === cm
+      );
 
-    onBeforeUnmount(() => {
-      if (resizeSubscriber) {
-        resizeSubscriber.unsubscribe();
-      }
-      if (observer) {
-        observer.disconnect();
+      let cmStatus = foundCM?.status || AudTaskStatus.Run;
+      if (task.status === AudTaskStatus.Warn || task.status === AudTaskStatus.Error) {
+        cmStatus = AudTaskStatus.Error;
       }
-      resizeSubscriber = null;
-      observer = null;
-    });
-
-    return {
-      tabsContentBody,
-      tabsNavLeftEl,
-      navComp,
-      activeTabIndex,
-      tabTitles,
-      showDropdown,
-      tabItemsOversize,
-      tabsClass,
-      currentTab,
-      changeTabTo,
-      onClickedTab,
-    };
-  },
-});
-</script>
-
-<style lang="stylus">
-.tabs
-  &.tabs-sm
-    &.tabs-type-1
-      & > .tabs-nav
-        ul
-          .tab-nav-item
-            &-link
-              @apply text-sm
-
-  &.tabs-xs
-    &.tabs-type-1
-      & > .tabs-nav
-        ul
-          .tab-nav-item
-            &.active
-              &:before
-                @apply hidden
 
-            &-link
-              @apply s("py-0.75") text-base
+      const sourceCount = foundCM?.sourceCount || 0;
+      const targetCount = foundCM?.targetCount || 0;
+
+      return {
+        key: cm,
+        name,
+        status: cmStatus,
+        sourceCount: numberToLocaleString(sourceCount, { NaNString: '-' }) as string,
+        targetCount: numberToLocaleString(targetCount, { NaNString: '-' }) as string,
+        ratio: sourceCount ? toFixed((targetCount / sourceCount) * 100, 2, { NaNString: '-', unit: '%' }) as string : '0.00%',
+      };
+    }),
+    profile: task.reports?.profile || null,
+    interest: task.reports?.interest || null,
+    createdAt: formatDate(task.created_at ? new Date(task.created_at) : new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updatedAt: formatDate(task.updated_at ? new Date(task.updated_at) : new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  };
+}
 
-  &.tabs-type-1
-    & > .tabs-nav
-      @apply flex items-start justify-between h-0 space-x-8 overflow-hidden
-      @apply s('lg:space-x-30')
-
-      &.show
-        @apply h-auto s("-mb-1.5")
-
-      .tabs-nav-left
-        @apply flex-grow overflow-hidden
-
-      .tabs-nav-right
-        @apply flex-grow-0 flex-shrink-0
-
-      ul
-        @apply inline-flex items-start s("-space-x-px")
-
-        .tab-nav-item
-          @apply relative rounded-t bg-white
-
-          &:first-child
-            .tab-nav-item-link
-              &:after
-                content ""
-                @apply absolute bottom-0 left-0 w-px h-3 s("-mb-3") s("-ml-px") bg-border
-
-          &.active
-            @apply s("pb-1.75")
-
-            &:before
-              content ""
-              @apply block absolute s("top-0.5") s("right-0.75") s("left-0.75") h-1 bg-secondary-hover
-
-            .tab-nav-item-link
-              @apply text-primary cursor-default
-
-          &-link
-            @apply relative block s("py-1.75") s("px-3.75") border-t border-r border-l border-border rounded-t text-lg text-primary-light
-
-            &-title
-              @apply truncate
-
-        .tab-pane
-          @apply space-y-8
-
-    & > .tabs-content
-      @apply p-4 border border-border rounded-lg bg-white overflow-hidden
+export default defineComponent({
+  name: 'M0302IndexPage',
+  components: {},
+  setup() {
+    definePageMeta({
+      middleware: ['acl-route'],
+    });
 
-      .tabs-content-header
-        @apply flex items-start justify-between mb-4
+    const router = useRouter();
 
-  &.tabs-type-2
-    & > .tabs-nav
-      @apply mb-0
+    const appStore = useAppStore();
+    const m12Store = useM12Store();
 
-      ul
-        @apply flex px-8 pb-5 space-x-8
-        @apply s('lg:px-6') s('lg:space-x-14')
+    const loading = ref(false);
+    const tasks = ref<Array<IAudTask>>([]);
+    const search = ref('');
+    const totalCount = ref(0);
+    const currentPage = ref(1);
+    const isShowDeleteConfirmModal = ref(false);
+    const perPage = ref(PER_PAGE);
 
-        .tab-nav-item
-          @apply relative flex-grow s('py-6') rounded bg-bg text-lg text-primary-hover text-center
-          @apply s('lg:py-5.5')
+    let taskId = '';
 
-          &:before
-            content ""
-            @apply absolute s('top-0.5') s('left-0.5') block rounded bg-white
-            width calc(100% - theme('spacing.1'))
-            height calc(100% - theme('spacing.1'))
+    const project = computed(() => appStore.project);
 
-          &:after
-            content ""
-            @apply absolute left-0 bottom-0 s('-ml-4') s('-mb-5') block w-full h-3 rounded-t bg-primary-lighter opacity-0
-            width calc(100% + theme('spacing.4') * 2)
+    async function fetch() {
+      loading.value = true;
 
-          &.active
-            @apply text-primary font-bold
+      const { data, error } = await m12Store.getTasks({
+        offset: (currentPage.value - 1) * perPage.value,
+        limit: perPage.value,
+      });
+      
+      loading.value = false;
+
+      if (error) {
+        appStore.addAlert({
+          title: '錯誤',
+          color: 'danger',
+          message: error.message,
+        });
+      }
 
-            &:after
-              @apply opacity-100
+      totalCount.value = data?.aud_task_list.totalCount || 0;
+      tasks.value = (data?.aud_task_list.data || []).map((task) => normalizeTask(task));
+    }
 
-            &:nth-child(odd)
-              @apply bg-transparent s('bg-gradient-to-r') s('from-insight-web-title-start') s('to-insight-web-title-end')
+    function onClickedAdd() {
+      router.push('/application/m03/02/create');
+    }
 
-              &:after
-                @apply bg-transparent s('bg-gradient-to-r') s('from-insight-web-title-start') s('to-insight-web-title-end')
+    function onClearedSearch() {
+      search.value = '';
+    }
 
-            &:nth-child(even)
-              @apply bg-transparent s('bg-gradient-to-r') s('from-insight-poi-title-start') s('to-insight-poi-title-end')
+    function onClickedDelete(id: string) {
+      taskId = id;
+      isShowDeleteConfirmModal.value = true;
+    }
 
-              &:after
-                @apply bg-transparent s('bg-gradient-to-r') s('from-insight-poi-title-start') s('to-insight-poi-title-end')
+    function onClickedRepack(id: string) {
+      const foundTask = tasks.value.find((task) => task.id === id);
+      if (!foundTask) return;
 
-            .tab-nav-item-link
-              @apply cursor-default
+      m12Store.setTask(foundTask);
+      router.push(`/application/m03/02/create`);
+    }
 
-          &-link
-            @apply relative
+    async function onDeleteApply() {
+      isShowDeleteConfirmModal.value = false;
 
-  &.tabs-type-3
-    & > .tabs-nav
-      @apply flex items-start justify-between h-0 space-x-8 overflow-hidden
-      @apply s('lg:space-x-30')
+      const { error } = await m12Store.deleteTask(taskId);
 
-      &.show
-        @apply h-auto mb-1
+      if (error) {
+        appStore.addAlert({
+          color: 'danger',
+          code: error.code,
+          message: error.message,
+        });
+      }
 
-      .tabs-nav-left
-        @apply flex-grow overflow-hidden
+      if (tasks.value.length === 1) {
+        currentPage.value = Math.max(1, currentPage.value - 1);
+      }
+      fetch();
+    }
 
-      .tabs-nav-right
-        @apply flex-grow-0 flex-shrink-0
+    function onUpdatedPerPage(newPerPage: number) {
+      perPage.value = newPerPage;
+      currentPage.value = 1;
+      fetch();
+    }
 
-      ul
-        @apply inline-flex items-start space-x-2
+    function onUpdatedPage(newPage: number) {
+      currentPage.value = newPage;
+    }
 
-        .tab-nav-item
-          @apply relative rounded-t bg-bg
+    watch(search, () => {
+      currentPage.value = 1;
+    });
+    watch(currentPage, () => {
+      fetch();
+    });
+    watch(project, () => {
+      currentPage.value = 1;
+      fetch();
+    });
 
-          &.active
-            @apply bg-primary
+    onMounted(() => {
+      fetch();
+    });
 
-            .tab-nav-item-link
-              @apply text-white cursor-default
+    return {
+      tasks,
+      search,
+      totalCount,
+      currentPage,
+      loading,
+      isShowDeleteConfirmModal,
+      perPage,
+      onClickedAdd,
+      onClearedSearch,
+      onClickedDelete,
+      onClickedRepack,
+      onDeleteApply,
+      onUpdatedPerPage,
+      onUpdatedPage,
+    };
+  },
+});
+</script>
 
-          &-link
-            @apply relative block py-2 px-8 rounded-t text-base text-primary
+<style lang="stylus">
+.m03-02p-page
+  .site-page-header
+    @apply p-6 bg-white rounded-lg shadow
 
-            &-title
-              @apply truncate
+    &-left
+      .site-page-title
+        @apply mb-2 s('text-3.33xl') text-primary font-bold
 
-        .tab-pane
-          @apply space-y-8
+      .site-page-desc
+        @apply flex items-center mb-6 space-x-2 text-sm text-gray-2 font-medium
 
-    & > .tabs-content
-      @apply p-6 rounded-tr-lg rounded-b-lg bg-white shadow overflow-hidden
+        a
+          @apply inline-flex items-center space-x-1 text-blue-1 font-normal
 
-      .tabs-content-header
-        @apply flex items-start justify-between
+      .site-page-actions
+        .create-btn
+          @apply s('py-1.75') s('pl-[23px]') s('pr-3.75') rounded-lg text-lg
 
-      .tabs-dropdown
-        @apply mb-4
+  .site-page-content
+    @apply p-0 bg-transparent
 
-  &.tabs-type-4
-    @apply flex
+    .m0302p-search-input
+      @apply s('w-[238px]')
 
-    & > .tabs-nav
-      @apply flex-grow-0 flex-shrink-0
+      .input-group
+        .input.input-sm
+          input
+            @apply text-sm
 
-      .tabs-nav-left
-        ul
-          @apply flex flex-col s('space-y-0.5')
+    & > .card
+      @apply border-0 rounded-lg shadow-none
 
-          .tab-nav-item
-            @apply flex justify-between s('w-[184px]') py-3 pl-3 pr-5 bg-bg-middle rounded-l-lg text-xs
+    .audience-package-card
+      .audience-package
+        @apply space-y-4
 
-            &.active
-              @apply bg-primary-hover text-white font-bold shadow-md
+        &-header
+          @apply flex items-end justify-between
 
-            &-link
-              @apply block w-full
+          .header-left
+            @apply flex-shrink-0 flex-grow-0
 
-    .tabs-content
-      @apply flex-grow s('-ml-2') p-4 bg-white border border-border rounded-lg shadow-md
+          .header-right
+            @apply flex-grow flex items-end justify-end
 
-      & > div
-        @apply flex min-h-full
+        &-body
+          @apply space-y-4
 
-        .tabs-content-body
-          @apply w-full
+.m12-delete-confirm-modal
+  .modal-body
+    &-content
+      @apply flex flex-col items-center justify-center space-y-6 text-base text-gray-2
 
-  & > .tabs-content
-    .tabs
-      & > .tabs-content
-        @apply shadow-md
+      .icon
+        @apply text-16xl text-danger
 </style>
+  

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",