refactor(map-dataset): change to base-button, remove useless

Author: hung.pv

libs/map/dataset/src/index.ts

@@ -1,7 +1,6 @@
 export * from './interfaces';
 export * from './model';
 export * from './modules';
-export * from './parts/dataset.handlers';
 export * from './store';
 export * from './utils/check';
 export * from './utils/layer-simple-builder';

libs/map/dataset/src/model/dataset.handler.ts

@@ -14,7 +14,7 @@ import { isIdentifyMergeView, isMapboxLayerView } from '../../utils/check';
 import { convertFeatureToItem } from '../../utils/convert';
 import { createNamedComponent } from '../base';
 import { createDatasetLeaf } from '../dataset.base.function';
-import { createDatasetMenu } from '../part-menu.model';
+import { createDatasetMenu } from '../menu';
 import {
   findSiblingOrNearestLeaf,
   runAllComponentsWithCheck,

libs/map/dataset/src/model/identify/models.ts

@@ -1,11 +1,16 @@
 export * from './data-management';
 export * from './dataset.base';
-export * from './dataset.handler';
 export * from './highlight';
 export * from './identify';
 export * from './layer';
+export * from './menu';
 export * from './part-list-view-ui.model';
-export * from './part-menu.model';
 export * from './part-metadata.model';
 export * from './source';
 export * from './visitors';
+
+export { createBase, createNamedComponent } from './base';
+export {
+  createDatasetComponent,
+  createDatasetLeaf,
+} from './dataset.base.function';

libs/map/dataset/src/model/index.ts

@@ -2,11 +2,11 @@ import type { MapSimple } from '@hungpvq/shared-map';
 import type { IDataset, IMapboxLayerView } from '../../interfaces';
 import { createNamedComponent } from '../base';
 import { createDatasetLeaf } from '../dataset.base.function';
-import { createDatasetMenu } from '../part-menu.model';
+import { createDatasetMenu } from '../menu';
 
 export function createDatasetPartMapboxLayerComponent<T = any>(
   name: string,
-  data: T
+  data: T,
 ): IMapboxLayerView & IDataset<T> {
   const base = createDatasetLeaf<T>(name, data);
   const menu = createDatasetMenu();

libs/map/dataset/src/model/layer/base.ts

@@ -1,2 +1,3 @@
 export * from './handle';
+export * from './items';
 export * from './store';

libs/map/dataset/src/model/menu/index.ts

@@ -10,11 +10,11 @@ import type {
   MenuAction,
   MenuItemBottomOrExtra,
   MenuItemCustomComponentBottomOrExtra,
-} from '../interfaces';
-import LayerDetail from '../modules/LayerDetail/LayerDetail.vue';
-import StyleControl from '../modules/StyleControl/style-control.vue';
-import ToggleShow from './menu/toggle-show.vue';
-import { findSiblingOrNearestLeaf } from './visitors';
+} from '../../interfaces';
+import LayerDetail from '../../modules/LayerDetail/LayerDetail.vue';
+import StyleControl from '../../modules/StyleControl/style-control.vue';
+import { findSiblingOrNearestLeaf } from '../visitors';
+import ToggleShow from './toggle-show.vue';
 
 export function createDatasetMenu<
   T extends IDataset = IDataset,

…map/dataset/src/model/part-menu.model.ts libs/map/dataset/src/model/menu/items.tslibs/map/dataset/src/model/part-menu.model.ts renamed to libs/map/dataset/src/model/menu/items.ts libs/map/dataset/src/model/part-menu.model.ts renamed to libs/map/dataset/src/model/menu/items.ts

@@ -1,28 +1,26 @@
 <template lang="">
   <div v-if="isMulti" class="toggle-buttons-container">
-    <button
-      class="layer-item__button"
+    <BaseButton
       :class="{ _active: getShow(0) }"
       @click.stop="onToggleShowIndex(0)"
     >
       <span>#1</span>
-    </button>
-    <button
-      class="layer-item__button"
+    </BaseButton>
+    <BaseButton
       @click.stop="onToggleShowIndex(1)"
       :class="{ _active: getShow(1) }"
     >
       <span>#2</span>
-    </button>
+    </BaseButton>
   </div>
-  <button class="layer-item__button" @click.stop="onToggleShow" v-else>
+  <BaseButton @click.stop="onToggleShow" v-else>
     <SvgIcon size="14" type="mdi" :path="path.show" v-if="data.show" />
     <SvgIcon size="14" type="mdi" :path="path.hide" v-else />
-  </button>
+  </BaseButton>
 </template>
 <script setup lang="ts">
 import { MapSimple } from '@hungpvq/shared-map';
-import { getIsMulti, getMaps, useMap } from '@hungpvq/vue-map-core';
+import { BaseButton, getIsMulti, getMaps, useMap } from '@hungpvq/vue-map-core';
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import { onMounted, ref } from 'vue';
@@ -104,14 +102,7 @@ function getShow(index: number) {
   opacity: 0.5;
   z-index: -1;
 }
-.layer-control .layer-item__button.toggle-buttons-container {
-  display: flex;
-  gap: 2px;
-}
 .toggle-buttons-container span {
   font-size: 0.7rem;
 }
-.toggle-buttons-container .layer-item__button {
-  height: 100%;
-}
 </style>

libs/map/dataset/src/model/menu/toggle-show.vue

@@ -1,10 +1,10 @@
 import type { IListViewUI } from '../interfaces/dataset.parts';
 import { createNamedComponent } from './base';
 import { createDatasetLeaf } from './dataset.base.function';
-import { createDatasetMenu } from './part-menu.model';
+import { createDatasetMenu } from './menu';
 export function createDatasetPartListViewUiComponent<T = any>(
   name: string,
-  data?: T
+  data?: T,
 ): IListViewUI<any> {
   const base = createDatasetLeaf<T>(name, data);
   const menu = createDatasetMenu();

libs/map/dataset/src/model/part-list-view-ui.model.ts

@@ -17,7 +17,7 @@ import {
   withMapProps,
 } from '@hungpvq/vue-map-core';
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiDatabaseOutline, mdiInformation } from '@mdi/js';
+import { mdiDatabaseOutline, mdiDelete, mdiInformation } from '@mdi/js';
 import { computed, onMounted, shallowRef, watch } from 'vue';
 import type { IDataset } from '../../interfaces/dataset.base';
 import { handleMenuActionClick } from '../../model/menu';
@@ -39,9 +39,12 @@ setLocaleDefault({
 const path = {
   icon: mdiDatabaseOutline,
   detail: mdiInformation,
+  delete: mdiDelete,
 };
 const [show, toggleShow] = useShow(props.show);
-const { getDatasets, getDatasetIds } = useMapDataset(mapId.value);
+const { getDatasets, getDatasetIds, removeDataset } = useMapDataset(
+  mapId.value,
+);
 const datasetIds = computed(() => {
   return getDatasetIds().value;
 });
@@ -82,6 +85,9 @@ function onShowDetail(view: IDataset) {
     view,
   );
 }
+function onRemove(view: IDataset) {
+  removeDataset(view);
+}
 onMounted(() => {
   updateList();
 });
@@ -118,6 +124,10 @@ defineSlots<{
                   <BaseButton @click.stop="onShowDetail(view)">
                     <SvgIcon size="16" type="mdi" :path="path.detail" />
                   </BaseButton>
+
+                  <BaseButton @click.stop="onRemove(view)">
+                    <SvgIcon size="16" type="mdi" :path="path.delete" />
+                  </BaseButton>
                 </div>
               </div>
             </slot>