@rural-environmental-registry/map_component 1.2.0 → 2.0.0

package/src/components/menu/LayerMenu.vue

@@ -8,21 +8,26 @@
       <FontAwesomeIcon :iconName="iconButton" />
     </ElButton>
     <ElMenu
+      :key="menuOpenedsKey"
       :class="customClasses.customMenu"
+      :default-openeds="defaultOpeneds"
       mode="vertical"
+      @close="onGroupMenuClose"
+      @open="onGroupMenuOpen"
     >
       <div id="external-id-top-menu"></div>
-      <template
-        v-for="group in props.layersConfig"
-        :key="group.key"
-      >
-        <ParentMenu
-          :groupData="group"
-          :persist="!!props.options?.persist"
-          @onChildLayerToggle="onChildLayerChange"
-          @onGroupLayerToggle="onGroupLayerToggle"
-        />
-      </template>
+      <SectionMenu
+        v-if="normalizedSections.length"
+        :editingLayerKey="activeEditingLayerKey"
+        :persist="!!props.options?.persist"
+        :sections="normalizedSections"
+        :selectedSectionKey="resolvedSelectedSectionKey"
+        :visibilityMode="visibilityMode"
+        @onChildLayerToggle="onChildLayerChange"
+        @onGroupLayerToggle="onGroupLayerToggle"
+        @onLayerAction="onLayerAction"
+        @onSelectedSectionChange="onSelectedSectionChange"
+      />
       <div id="external-id-bottom-menu"></div>
     </ElMenu>
   </div>
@@ -33,9 +38,26 @@
   import L from 'leaflet'
   import { computed, nextTick, ref, watch } from 'vue'
   import FontAwesomeIcon from '../fa-icon/FontAwesomeIcon.vue'
-  import ParentMenu from './ParentMenu.vue'
-  import { GroupLayerData, LayerData, LayersConfig, LayersMenuConfig } from '../../types'
-  import { resolveLayerActiveState, shouldInitLayerOnMap } from '../../utils/menuHistory.ts'
+  import SectionMenu from './SectionMenu.vue'
+  import {
+    GroupLayerData,
+    LayerActionPayload,
+    LayerData,
+    LayersConfig,
+    LayersMenuConfig,
+    SectionEditStatePayload,
+    SectionSelectPayload
+  } from '../../types'
+  import {
+    normalizeLayersConfig,
+    shouldApplyMapOverlay
+  } from '../../utils/layersConfigNormalizer'
+  import {
+    resolveGroupCollapsedState,
+    resolveLayerActiveState,
+    setGroupCollapsedHistory,
+    shouldInitLayerOnMap
+  } from '../../utils/menuHistory.ts'
 
   type MenuProps = {
     layersConfig: LayersConfig
@@ -57,13 +79,112 @@
     (e: 'stopLoading'): void
     (e: 'onChildLayerToggle', data: LayerData): void
     (e: 'onGroupLayerToggle', data: GroupLayerData): void
+    (e: 'onLayerAction', payload: LayerActionPayload): void
+    (e: 'onSectionEditStateChange', payload: SectionEditStatePayload): void
+    (e: 'onSelectedSectionChange', payload: SectionSelectPayload): void
   }>()
 
   const props = defineProps<MenuProps>()
 
-  const isMenuOpen = ref<boolean>(false)
+  const isMenuOpen = ref<boolean>(!!props.options?.defaultOpen)
   const convertedLayers = ref<ConvertedLayers>({})
   const convertedGeoJsonLayers = ref<ConvertedGeoJsonLayers>({})
+  const internalEditingLayerKey = ref<string | null>(null)
+  const internalSelectedSectionKey = ref<string | null>(null)
+
+  const normalizedSections = computed(() => normalizeLayersConfig(props.layersConfig))
+
+  const visibilityMode = computed(() => props.options?.visibilityMode ?? 'switch')
+
+  const isEditingControlled = computed(() => props.options?.editingLayerKey !== undefined)
+
+  const activeEditingLayerKey = computed(() => {
+    if (isEditingControlled.value) {
+      return props.options?.editingLayerKey ?? null
+    }
+    return internalEditingLayerKey.value
+  })
+
+  const isSectionSelectionControlled = computed(
+    () => props.options?.selectedSectionKey !== undefined
+  )
+
+  const activeSelectedSectionKey = computed(() => {
+    if (isSectionSelectionControlled.value) {
+      return props.options?.selectedSectionKey ?? null
+    }
+    return internalSelectedSectionKey.value
+  })
+
+  const resolvedSelectedSectionKey = computed((): string | null => {
+    const sections = normalizedSections.value
+    if (!sections.length) return null
+
+    const current = activeSelectedSectionKey.value
+    if (current && sections.some((section) => section.key === current)) {
+      return current
+    }
+
+    return sections[0].key
+  })
+
+  watch(
+    normalizedSections,
+    (sections) => {
+      if (isSectionSelectionControlled.value) return
+
+      const current = internalSelectedSectionKey.value
+      if (current && sections.some((section) => section.key === current)) return
+
+      internalSelectedSectionKey.value = sections[0]?.key ?? null
+    },
+    { immediate: true }
+  )
+
+  const defaultOpeneds = computed(() => {
+    const persist = !!props.options?.persist
+    const openeds: string[] = []
+
+    normalizedSections.value.forEach((section) => {
+      section.groups.forEach((group) => {
+        const collapsed =
+          group.collapsed !== undefined
+            ? group.collapsed
+            : resolveGroupCollapsedState(group.key, undefined, persist)
+        if (!collapsed) openeds.push(group.key)
+      })
+    })
+
+    return openeds
+  })
+
+  const menuOpenedsKey = computed(() => {
+    const stepOpenKeys: string[] = []
+    normalizedSections.value.forEach((section) => {
+      section.groups.forEach((group) => {
+        if (group.collapsed === false && group.meta?.isCurrentStep) {
+          stepOpenKeys.push(group.key)
+        }
+      })
+    })
+    return stepOpenKeys.slice().sort().join('|') || 'none'
+  })
+
+  watch(
+    () => menuOpenedsKey.value,
+    () => {
+      if (!props.options?.persist) return
+
+      const openSet = new Set(defaultOpeneds.value)
+      normalizedSections.value.forEach((section) => {
+        section.groups.forEach((group) => {
+          if (group.collapsed === undefined) return
+          setGroupCollapsedHistory(group.key, !openSet.has(group.key))
+        })
+      })
+    },
+    { flush: 'post' }
+  )
 
   type CustomClasses = {
     layerMenu: string
@@ -86,12 +207,69 @@
     return isMenuOpen.value ? 'chevron-left' : 'chevron-right'
   })
 
-  const onInitDefaultLayer = (layer: LayerData): void => {
-    if (layer.geojson) return handleGeoJsonLayer(layer)
+  const findLayerContext = (
+    layerKey: string
+  ): { sectionKey: string; layer: LayerData } | null => {
+    for (const section of normalizedSections.value) {
+      for (const group of section.groups) {
+        const layer = group.layers?.find((item) => item.key === layerKey)
+        if (layer) return { sectionKey: section.key, layer }
+      }
+    }
+    return null
+  }
+
+  const setEditingState = (sectionKey: string | null, layerKey: string | null): void => {
+    if (!isEditingControlled.value) {
+      internalEditingLayerKey.value = layerKey
+    }
+
+    const context = layerKey ? findLayerContext(layerKey) : null
+
+    emit('onSectionEditStateChange', {
+      sectionKey,
+      layerKey,
+      layer: context?.layer ?? null
+    })
+  }
+
+  const setSelectedSection = (sectionKey: string): void => {
+    if (!isSectionSelectionControlled.value) {
+      internalSelectedSectionKey.value = sectionKey
+    }
+
+    emit('onSelectedSectionChange', { sectionKey })
+  }
+
+  const onSelectedSectionChange = (sectionKey: string): void => {
+    setSelectedSection(sectionKey)
+  }
+
+  const onGroupMenuOpen = (index: string): void => {
+    if (!props.options?.persist) return
+    setGroupCollapsedHistory(index, false)
+  }
+
+  const onGroupMenuClose = (index: string): void => {
+    if (!props.options?.persist) return
+    setGroupCollapsedHistory(index, true)
+  }
+
+  const applyLayerOverlay = (layer: LayerData): void => {
+    if (!shouldApplyMapOverlay(layer)) return
+
+    if (layer.geojson || layer.mapSource === 'geojson') {
+      handleGeoJsonLayer(layer)
+      return
+    }
 
     handleWmsLayer(layer)
   }
 
+  const onInitDefaultLayer = (layer: LayerData): void => {
+    applyLayerOverlay(layer)
+  }
+
   const initializedLayerKeys = new Set<string>()
 
   const initDefaultLayers = (): void => {
@@ -99,14 +277,17 @@
 
     const persist = !!props.options?.persist
 
-    props.layersConfig?.forEach((group) => {
-      group.layers?.forEach((layer) => {
-        if (initializedLayerKeys.has(layer.key)) return
-        if (!shouldInitLayerOnMap(layer, persist)) return
-
-        const resolved = resolveLayerActiveState(layer, persist)
-        onInitDefaultLayer(resolved)
-        initializedLayerKeys.add(layer.key)
+    normalizedSections.value.forEach((section) => {
+      section.groups.forEach((group) => {
+        group.layers?.forEach((layer) => {
+          if (initializedLayerKeys.has(layer.key)) return
+          if (!shouldApplyMapOverlay(layer)) return
+          if (!shouldInitLayerOnMap(layer, persist)) return
+
+          const resolved = resolveLayerActiveState(layer, persist)
+          onInitDefaultLayer(resolved)
+          initializedLayerKeys.add(layer.key)
+        })
       })
     })
   }
@@ -127,29 +308,43 @@
   )
 
   const onChildLayerChange = (layer: LayerData): void => {
-    if (layer.geojson) {
-      handleGeoJsonLayer(layer)
-    } else {
-      handleWmsLayer(layer)
-    }
-
+    applyLayerOverlay(layer)
     emit('onChildLayerToggle', layer)
   }
 
   const onGroupLayerToggle = (parent: GroupLayerData): void => {
     parent.layers.forEach((childLayer: LayerData) => {
-      if (childLayer.geojson) {
-        handleGeoJsonLayer(childLayer)
-      } else {
-        handleWmsLayer(childLayer)
-      }
+      applyLayerOverlay(childLayer)
     })
 
     emit('onGroupLayerToggle', parent)
   }
 
+  const onLayerAction = (payload: LayerActionPayload): void => {
+    const isEditAction = payload.actionType === 'edit' || payload.actionKey === 'edit'
+    const isEditControlAction =
+      payload.source === 'edit-panel' &&
+      (payload.actionType === 'cancel' ||
+        payload.actionType === 'conclude' ||
+        payload.actionKey === 'cancel' ||
+        payload.actionKey === 'conclude')
+
+    if (isEditAction && payload.source === 'child-menu' && payload.layerKey) {
+      setEditingState(payload.sectionKey ?? null, payload.layerKey)
+      if (payload.sectionKey) {
+        setSelectedSection(payload.sectionKey)
+      }
+    }
+
+    if (isEditControlAction) {
+      setEditingState(null, null)
+    }
+
+    emit('onLayerAction', payload)
+  }
+
   const convertToWmsLayer = (layer: LayerData): L.TileLayer => {
-    const wmsLayer = L.tileLayer.wms(layer.baseUrl, {
+    const wmsLayer = L.tileLayer.wms(layer.baseUrl ?? '', {
       layers: layer.layers,
       format: layer.format || 'image/png',
       transparent: layer.transparent

package/src/components/menu/ParentMenu.vue

@@ -7,21 +7,39 @@
     <template #title>
       <div class="parent-menu-row">
         <div class="parent-layer-title">{{ groupData.name }}</div>
-        <span class="switch-component">
-          <ElSwitch
-            v-model="allLayersActive"
-            @click.stop
+        <span
+          v-if="showVisibilityControl"
+          class="visibility-control"
+        >
+          <button
+            v-if="visibilityMode === 'eye'"
+            type="button"
+            class="visibility-eye-button"
+            :aria-label="allLayersActive ? hideLabel : showLabel"
+            :title="allLayersActive ? hideLabel : showLabel"
+            @click.stop="allLayersActive = !allLayersActive"
           >
-            <template #active-action>
-              <FontAwesomeIcon iconName="check" />
-            </template>
-            <template #inactive-action>
-              <FontAwesomeIcon iconName="xmark" />
-            </template>
-          </ElSwitch>
-          <span class="parent-layer-status">
-            {{ allLayersActive ? groupData.toggle.active : groupData.toggle.inactive }}
-          </span>
+            <FontAwesomeIcon :iconName="allLayersActive ? 'eye' : 'eye-slash'" />
+          </button>
+          <template v-else>
+            <ElSwitch
+              v-model="allLayersActive"
+              @click.stop
+            >
+              <template #active-action>
+                <FontAwesomeIcon iconName="check" />
+              </template>
+              <template #inactive-action>
+                <FontAwesomeIcon iconName="xmark" />
+              </template>
+            </ElSwitch>
+            <span
+              v-if="groupData.toggle"
+              class="parent-layer-status"
+            >
+              {{ allLayersActive ? groupData.toggle.active : groupData.toggle.inactive }}
+            </span>
+          </template>
           <ElDivider
             class="divider-bar"
             direction="vertical"
@@ -33,43 +51,153 @@
       v-for="(child, idx) in childrenLayers"
       :key="child.key"
     >
+      <ElMenuItem
+        v-if="isMenuSeparator(child)"
+        :index="child.key"
+        class="parent-menu-subgroup-header"
+        disabled
+      >
+        <div class="parent-menu-subgroup-title">{{ child.name }}</div>
+      </ElMenuItem>
       <ChildMenu
-        v-if="child.name"
+        v-else-if="child.name"
+        :actionDefaults="actionDefaults"
         :data="child"
+        :groupKey="groupData.key"
         :persist="props.persist"
+        :sectionKey="sectionKey"
+        :visibilityMode="visibilityMode"
         @onChildLayerToggle="onChildChange($event, idx)"
+        @onLayerAction="emit('onLayerAction', $event)"
       />
     </template>
+
+    <ElMenuItem
+      v-if="visibleGroupActions.length"
+      :index="`${groupData.key}__group-actions`"
+      class="parent-menu-group-actions-item"
+    >
+      <div class="parent-menu-group-actions">
+        <button
+          v-for="action in visibleGroupActions"
+          :key="action.key"
+          type="button"
+          class="parent-group-action-button"
+          :style="actionButtonStyle(action)"
+          :disabled="action.disabled"
+          @click.stop="onGroupActionClick(action)"
+        >
+          <FontAwesomeIcon
+            v-if="action.icon"
+            :iconName="action.icon"
+          />
+          <span>{{ action.name }}</span>
+        </button>
+      </div>
+    </ElMenuItem>
   </ElSubMenu>
   <ElDivider class="parent-menu-divider-row" />
 </template>
 
 <script lang="ts" setup>
-  import { ElDivider, ElSubMenu, ElSwitch } from 'element-plus'
-  import { computed, ref } from 'vue'
+  import { ElDivider, ElMenuItem, ElSubMenu, ElSwitch } from 'element-plus'
+  import { computed, ref, watch } from 'vue'
   import FontAwesomeIcon from '../fa-icon/FontAwesomeIcon.vue'
   import ChildMenu from './ChildMenu.vue'
-  import { GroupLayerData, LayerData } from '../../types'
+  import {
+    GroupActionConfig,
+    GroupLayerData,
+    LayerActionDefaults,
+    LayerActionPayload,
+    LayerActionStyle,
+    LayerData
+  } from '../../types'
+  import {
+    isMenuSeparator,
+    resolveActiveGroupActions
+  } from '../../utils/layersConfigNormalizer'
   import { resolveLayerActiveState, setHistory } from '../../utils/menuHistory.ts'
 
+  const DEFAULT_ACTION_STYLE: Required<LayerActionStyle> = {
+    backgroundColor: 'var(--mapa-base-green)',
+    color: 'var(--mapa-base-white)',
+    borderColor: 'var(--mapa-base-white)'
+  }
+
+  const resolveActionStyle = (style?: LayerActionStyle): Required<LayerActionStyle> => {
+    const color = style?.color ?? DEFAULT_ACTION_STYLE.color
+    return {
+      backgroundColor: style?.backgroundColor ?? DEFAULT_ACTION_STYLE.backgroundColor,
+      color,
+      borderColor: style?.borderColor ?? color
+    }
+  }
+
+  const actionButtonStyle = (action: GroupActionConfig): Required<LayerActionStyle> =>
+    resolveActionStyle(action.style)
+
   type ParentMenuProps = {
     groupData: GroupLayerData
     persist: boolean
+    sectionKey?: string
+    actionDefaults?: LayerActionDefaults
+    visibilityMode?: 'switch' | 'eye'
   }
 
-  const props = defineProps<ParentMenuProps>()
+  const props = withDefaults(defineProps<ParentMenuProps>(), {
+    visibilityMode: 'switch'
+  })
 
   const emit = defineEmits<{
     onChildLayerToggle: [LayerData]
     onGroupLayerToggle: [GroupLayerData]
+    onLayerAction: [LayerActionPayload]
   }>()
 
   const childrenLayers = ref<LayerData[]>(
     (props.groupData.layers ?? []).map((layer) => resolveLayerActiveState(layer, props.persist))
   )
 
+  watch(
+    () => props.groupData.layers,
+    (layers) => {
+      childrenLayers.value = (layers ?? []).map((layer) =>
+        resolveLayerActiveState(layer, props.persist)
+      )
+    },
+    { deep: true }
+  )
+
+  const visibleGroupActions = computed(() => resolveActiveGroupActions(props.groupData))
+
+  const showGroupEye = computed(() => props.groupData.visibility?.show !== false)
+
+  const showVisibilityControl = computed(() => {
+    if (props.visibilityMode === 'eye') return showGroupEye.value
+    return true
+  })
+
+  const showLabel = computed(
+    () =>
+      props.groupData.visibility?.labelShow ??
+      props.groupData.toggle?.active ??
+      'Exibir'
+  )
+  const hideLabel = computed(
+    () =>
+      props.groupData.visibility?.labelHide ??
+      props.groupData.toggle?.inactive ??
+      'Ocultar'
+  )
+
+  const toggleableLayers = computed(() =>
+    childrenLayers.value.filter((layer: LayerData) => !isMenuSeparator(layer))
+  )
+
   const toggleVisibleAllLayers = (): void => {
-    if (props.persist) childrenLayers.value.forEach((layer: LayerData) => setHistory(layer))
+    if (props.persist) {
+      toggleableLayers.value.forEach((layer: LayerData) => setHistory(layer))
+    }
 
     emit('onGroupLayerToggle', {
       ...props.groupData,
@@ -78,13 +206,11 @@
   }
 
   const allLayersActive = computed<boolean>({
-    get: () => childrenLayers.value.some((layer: LayerData) => layer.active),
+    get: () => toggleableLayers.value.some((layer: LayerData) => layer.active),
     set: (active: boolean) => {
-      childrenLayers.value = props.groupData.layers.map((layer: LayerData) => {
-        return {
-          ...layer,
-          active
-        }
+      childrenLayers.value = (props.groupData.layers ?? []).map((layer: LayerData) => {
+        if (isMenuSeparator(layer)) return resolveLayerActiveState(layer, props.persist)
+        return { ...layer, active }
       })
 
       toggleVisibleAllLayers()
@@ -95,6 +221,18 @@
     childrenLayers.value[idx] = layer
     emit('onChildLayerToggle', layer)
   }
+
+  const onGroupActionClick = (action: GroupActionConfig): void => {
+    if (action.disabled) return
+
+    emit('onLayerAction', {
+      actionKey: action.key,
+      actionType: action.type,
+      sectionKey: props.sectionKey,
+      groupKey: props.groupData.key,
+      source: 'group-menu'
+    })
+  }
 </script>
 
 <style>
@@ -106,13 +244,24 @@
     font-size: var(--mapa-fs-12);
   }
 
-  .parent-menu .switch-component {
+  .parent-menu .visibility-control {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: var(--mapa-size-base-5);
   }
 
+  .parent-menu .visibility-eye-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--mapa-base-green);
+    cursor: pointer;
+    padding: var(--mapa-size-base-2);
+  }
+
   .parent-menu .parent-layer-title {
     word-wrap: break-word;
     white-space: normal;
@@ -126,7 +275,92 @@
     border-width: var(--mapa-size-base-2);
   }
 
+  .parent-menu-group-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--mapa-size-base-5);
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--mapa-size-base-10) 0;
+  }
+
+  .parent-menu .parent-menu-group-actions-item {
+    height: auto !important;
+    line-height: normal !important;
+    white-space: normal !important;
+    padding-left: var(--mapa-size-base-20) !important;
+    padding-right: var(--mapa-size-base-20) !important;
+    cursor: default !important;
+  }
+
+  .parent-menu .parent-menu-group-actions-item:hover {
+    background-color: transparent !important;
+  }
+
+  .parent-group-action-button {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mapa-size-base-5);
+    width: 100%;
+    height: var(--mapa-size-base-40);
+    padding: 0 var(--mapa-size-base-10);
+    border: 1px solid;
+    border-radius: 100em;
+    font-size: var(--mapa-fs-15);
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .parent-group-action-button:not(:disabled):hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));
+  }
+
+  .parent-group-action-button:not(:disabled):active {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
+  }
+
+  .parent-group-action-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .parent-menu-divider-row {
     margin: 0 !important;
   }
+
+  /* Título de subgrupo: separador visual, sem accordion */
+  .parent-menu .parent-menu-subgroup-header {
+    height: auto !important;
+    line-height: normal !important;
+    white-space: normal !important;
+    padding: var(--mapa-size-base-10) var(--mapa-size-base-20) var(--mapa-size-base-5) !important;
+    cursor: default !important;
+    opacity: 1 !important;
+    color: inherit !important;
+  }
+
+  .parent-menu .parent-menu-subgroup-header:hover,
+  .parent-menu .parent-menu-subgroup-header.is-disabled {
+    background-color: transparent !important;
+    cursor: default !important;
+    opacity: 1 !important;
+  }
+
+  .parent-menu .parent-menu-subgroup-title {
+    font-size: var(--mapa-fs-12);
+    font-weight: 700;
+    line-height: 150%;
+    color: var(--mapa-base-black, #000000);
+    word-wrap: break-word;
+    white-space: normal;
+  }
 </style>