diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index 48c6b54..ff971e7 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -116,8 +116,8 @@ "npm run typecheck passes", "Verify in browser: Tap on Firma/Perioada toggles expansion" ], - "passes": false, - "notes": "Modifică MobileDrawerMenu.vue, adaugă state pentru collapsed și persistență localStorage" + "passes": true, + "notes": "Completed in iteration 6" }, { "id": "US-606", diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index 296e7e7..29e8418 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -272,3 +272,9 @@ PRD: tasks/prd-ui-fixes-phase6.md [2026-01-13 16:17:06] Working on story: US-604 [2026-01-13 16:17:06] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_5_US-604.log) [2026-01-13 16:18:21] SUCCESS: Story US-604 passed! +[2026-01-13 16:18:22] Changes committed +[2026-01-13 16:18:22] Progress: 4/10 stories completed +[2026-01-13 16:18:24] === Iteration 6/30 === +[2026-01-13 16:18:24] Working on story: US-605 +[2026-01-13 16:18:24] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_6_US-605.log) +[2026-01-13 16:23:39] SUCCESS: Story US-605 passed! diff --git a/src/shared/components/mobile/MobileDrawerMenu.vue b/src/shared/components/mobile/MobileDrawerMenu.vue index 7a05a0f..950828e 100644 --- a/src/shared/components/mobile/MobileDrawerMenu.vue +++ b/src/shared/components/mobile/MobileDrawerMenu.vue @@ -12,84 +12,111 @@ +
- -
- + +
+ - -
- -
-
-
- {{ company.name }} - CUI: {{ company.fiscal_code }} -
- + + +
+ + +
+ +
+
+
+ {{ company.name }} + CUI: {{ company.fiscal_code }} +
+ +
+
+ + Nu s-au găsit firme +
- -
- + +
+ - -
-
-
- {{ period.display_name }} - + + +
+ + +
+
+
+ {{ period.display_name }} + +
+
+ + Nu sunt perioade disponibile +
@@ -231,6 +258,7 @@ import { useRoute, useRouter } from 'vue-router' /** * MobileDrawerMenu - Material Design 3 inspired navigation drawer for mobile (v3) + * US-605: Added collapsible Firma/Perioada sections * * Props: * - modelValue (v-model): Controls visibility of the drawer @@ -318,6 +346,56 @@ const companySearchInput = ref(null) // Period selector state const periodDropdownOpen = ref(false) +// Collapsible section state (US-605) +// Default to collapsed, persisted in localStorage +const COLLAPSED_STORAGE_KEY = 'mobile-drawer-sections-collapsed' + +const loadCollapsedState = () => { + try { + const saved = localStorage.getItem(COLLAPSED_STORAGE_KEY) + if (saved) { + return JSON.parse(saved) + } + } catch (e) { + // Ignore parse errors + } + // Default: both sections collapsed + return { company: true, period: true } +} + +const savedCollapsedState = loadCollapsedState() +const companyCollapsed = ref(savedCollapsedState.company) +const periodCollapsed = ref(savedCollapsedState.period) + +const saveCollapsedState = () => { + try { + localStorage.setItem(COLLAPSED_STORAGE_KEY, JSON.stringify({ + company: companyCollapsed.value, + period: periodCollapsed.value + })) + } catch (e) { + // Ignore storage errors + } +} + +const toggleCompanyCollapsed = () => { + companyCollapsed.value = !companyCollapsed.value + // Close dropdown if collapsing + if (companyCollapsed.value) { + companyDropdownOpen.value = false + } + saveCollapsedState() +} + +const togglePeriodCollapsed = () => { + periodCollapsed.value = !periodCollapsed.value + // Close dropdown if collapsing + if (periodCollapsed.value) { + periodDropdownOpen.value = false + } + saveCollapsedState() +} + // Computed properties for company selector const selectedCompanyName = computed(() => { return props.companiesStore?.selectedCompany?.name || 'Selectare firmă' @@ -780,6 +858,68 @@ onMounted(() => { font-size: var(--text-sm); } +/* ================================================ + Collapsible Sections (US-605) + ================================================ */ + +.collapsible-header { + display: flex; + align-items: center; + width: 100%; + padding: var(--space-sm) var(--space-md); + background: transparent; + border: none; + cursor: pointer; + min-height: 44px; + gap: var(--space-sm); + transition: background var(--transition-fast); + border-radius: var(--radius-md); +} + +.collapsible-header:hover { + background: var(--surface-hover); +} + +.collapsible-header:active { + background: var(--surface-hover); +} + +.collapsible-label { + font-size: var(--text-xs); + font-weight: var(--font-medium); + color: var(--text-color-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + flex-shrink: 0; +} + +.collapsible-value { + flex: 1; + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--text-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; +} + +.collapsible-header .pi { + font-size: var(--text-xs); + color: var(--text-color-secondary); + flex-shrink: 0; + transition: transform var(--transition-fast); +} + +.collapsible-content { + padding-top: var(--space-xs); +} + +/* When collapsed, the selector-group has minimal padding */ +.selector-group.is-collapsed { + padding-bottom: 0; +} + /* ================================================ Navigation Sections Container (scrollable) ================================================ */ @@ -1113,6 +1253,23 @@ onMounted(() => { color: var(--text-color-secondary); } +/* Dark mode: Collapsible Sections (US-605) */ +[data-theme="dark"] .collapsible-header:hover { + background: var(--surface-hover); +} + +[data-theme="dark"] .collapsible-label { + color: var(--text-color-secondary); +} + +[data-theme="dark"] .collapsible-value { + color: var(--text-color); +} + +[data-theme="dark"] .collapsible-header .pi { + color: var(--text-color-secondary); +} + [data-theme="dark"] .drawer-link { color: var(--text-color); } @@ -1293,6 +1450,23 @@ onMounted(() => { color: var(--text-color-secondary); } + /* Auto dark mode: Collapsible Sections (US-605) */ + :root:not([data-theme]) .collapsible-header:hover { + background: var(--surface-hover); + } + + :root:not([data-theme]) .collapsible-label { + color: var(--text-color-secondary); + } + + :root:not([data-theme]) .collapsible-value { + color: var(--text-color); + } + + :root:not([data-theme]) .collapsible-header .pi { + color: var(--text-color-secondary); + } + :root:not([data-theme]) .drawer-link { color: var(--text-color); }