diff --git a/webapp/package-lock.json b/webapp/package-lock.json index cd93950..ccb3638 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -1,15 +1,16 @@ { "name": "bugreport", - "version": "0.0.0", + "version": "0.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "bugreport", - "version": "0.0.0", + "version": "0.0.1", "dependencies": { "vue": "^3.5.13", - "vue-router": "^4.5.0" + "vue-router": "^4.5.0", + "vuedraggable": "^4.1.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", @@ -1172,6 +1173,12 @@ "fsevents": "~2.3.2" } }, + "node_modules/sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==", + "license": "MIT" + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -1343,6 +1350,18 @@ "peerDependencies": { "vue": "^3.2.0" } + }, + "node_modules/vuedraggable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", + "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==", + "license": "MIT", + "dependencies": { + "sortablejs": "1.14.0" + }, + "peerDependencies": { + "vue": "^3.0.1" + } } } } diff --git a/webapp/package.json b/webapp/package.json index 14a2626..0848755 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -10,7 +10,8 @@ }, "dependencies": { "vue": "^3.5.13", - "vue-router": "^4.5.0" + "vue-router": "^4.5.0", + "vuedraggable": "^4.1.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", diff --git a/webapp/src/assets/css/style.css b/webapp/src/assets/css/style.css index e026be6..5cb897c 100644 --- a/webapp/src/assets/css/style.css +++ b/webapp/src/assets/css/style.css @@ -66,17 +66,19 @@ h1 { button { border-radius: 8px; - border: 1px solid transparent; + border: 1px solid var(--color-bg0); padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; - background-color: #1a1a1a; + background-color: var(--color-bg2); + color: var(--color-text0); cursor: pointer; - transition: border-color 0.25s; + transition: all 0.3s; } button:hover { - border-color: #646cff; + border-color: var(--color-bg1); + background-color: var(--color-bg0); } button:focus, button:focus-visible { @@ -116,6 +118,7 @@ button:focus-visible { padding: 5px 10px; border-radius: 5px; margin-left: 20px; + transition: all 0.3s; } #header .menu a:hover { color: var(--color-text1); @@ -163,7 +166,7 @@ button:focus-visible { flex-direction: row; justify-content: space-between; border-top-right-radius: 5px; - + cursor: grab; } #dashboard .report .report-header .report-title { @@ -184,6 +187,9 @@ button:focus-visible { padding: 5px; border-bottom-right-radius: 5px; } +#dashboard .report:hover { + filter: brightness(1.2); +} /* ---------------------------------------------------- 99 - LIGHT MODE diff --git a/webapp/src/views/Dashboard.vue b/webapp/src/views/Dashboard.vue index 808ba05..47b75b3 100644 --- a/webapp/src/views/Dashboard.vue +++ b/webapp/src/views/Dashboard.vue @@ -2,40 +2,184 @@

Nezaradené

- - - - + + +

Čakajúce

- - - - - - - - - - - - + + +

Rozpracované

+ + +

Hotové

+ + +
+ + \ No newline at end of file + Report, + draggable, + }, + data() { + return { + itemsUncategorized: [ + { + id: 1, + title: "Pridať bug", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 01:30:18", + }, + { + id: 2, + title: "Resetovat pismo", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 01:30:18", + }, + ], + itemsWaiting: [ + { + id: 11, + title: "Vymena obrazkov za ikonky", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 01:30:18", + }, + { + id: 12, + title: + "Doplnit serverove ikoky a toto bude dlhy nadpis, ze ako sa s tym vysporiada", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 01:30:18", + }, + { + id: 13, + title: "Rozdelit na 2 polozky na fakture", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 01:30:18", + }, + ], + itemsInProgress: [ + { + id: 21, + title: "Imeplemtovat logovanie", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 15:11:23", + }, + ], + itemsDone: [ + { + id: 31, + title: "Doplnit preklady", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 01:30:18", + }, + ], + }; + }, + methods: { + onDragChange(event) { + // console.log("Presunuté:", event); + // Napr. uložiť poradie do API + if (event.added) { + console.log("Pridané:", event.added.element); + } + if (event.moved) { + console.log("Presunuté:", event.moved.element); + } + if (event.removed) { + console.log("Odstranené:", event.removed.element); + } + }, + vypisData() { + console.log(this.itemsUncategorized); + console.log(this.itemsWaiting); + console.log(this.itemsInProgress); + console.log(this.itemsDone); + }, + pridajJedno() { + this.itemsUncategorized.push({ + id: this.itemsUncategorized.length + 1, + title: "Pridať bug", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum.", + date: "2025-04-13 01:30:18", + }); + }, + }, +}; +