diff --git a/package.json b/package.json index 301e7ed1ec192ec4d375939e3373dd8561ca3e1b..320eece5f52641c9f531a8236f0794c50a343d07 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "polva-haigla-web", "version": "0.0.0", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "vite build", "preview": "vite preview --port 4173" }, @@ -12,13 +12,16 @@ "@fortawesome/free-solid-svg-icons": "^6.2.0", "@fortawesome/vue-fontawesome": "^3.0.1", "@vueup/vue-quill": "^1.0.0", + "axios": "^1.3.2", "firebase": "^9.11.0", "quill-delta-to-html": "^0.12.1", "tw-elements": "^1.0.0-alpha12", + "v-calendar": "^3.0.0-alpha.8", "vue": "^3.2.38", "vue-router": "^4.1.5", "vue-toastification": "^2.0.0-rc.5", - "vuex": "^4.0.2" + "vuex": "^4.0.2", + "yarn": "^1.22.19" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.3", diff --git a/src/App.vue b/src/App.vue index 7cbe08c06bf5d67ad5471acac7893df5fba4334a..dd07193020dc5452b1d5b67c3cb880c89cc3d3ce 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,7 +5,7 @@ import Footer from "./components/Footer.vue"; </script> <template> - <div class="page bg-[#ebebeb] flex flex-col"> + <div class="page bg-[#F0F0F0] flex flex-col"> <Header v-if="$store.state.user"/> <RouterView /> <div v-if="$store.state.user" class="flex-1"></div> diff --git a/src/assets/logos/logo.png b/src/assets/logos/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..0c2119ae7875a4f360b69b6c079a2bd9f5282fc9 Binary files /dev/null and b/src/assets/logos/logo.png differ diff --git a/src/assets/logos/logo_alt.png b/src/assets/logos/logo_alt.png new file mode 100644 index 0000000000000000000000000000000000000000..769ab5d539fab76c880a7b9e1e4e141e3856d026 Binary files /dev/null and b/src/assets/logos/logo_alt.png differ diff --git a/src/assets/logos/logo_alt_white.png b/src/assets/logos/logo_alt_white.png new file mode 100644 index 0000000000000000000000000000000000000000..cd90a31a9d7a439ded6ec51361d1082dc8074dcc Binary files /dev/null and b/src/assets/logos/logo_alt_white.png differ diff --git a/src/assets/logos/logo_white.png b/src/assets/logos/logo_white.png new file mode 100644 index 0000000000000000000000000000000000000000..5f1e513c8919774b0804373a3e379155d18124a1 Binary files /dev/null and b/src/assets/logos/logo_white.png differ diff --git a/src/assets/logos/logowhite.png b/src/assets/logos/logowhite.png new file mode 100644 index 0000000000000000000000000000000000000000..b5a50192491fabcef070a5e5a673ad5b1a8631f9 Binary files /dev/null and b/src/assets/logos/logowhite.png differ diff --git a/src/assets/qabook.json b/src/assets/qabook.json index fcd290fcf6407c4259d585345e9f110c12fbbd8e..aab541976aa9430b602836a15f48bec7cbb34fba 100644 --- a/src/assets/qabook.json +++ b/src/assets/qabook.json @@ -1,10 +1,15 @@ -{ +{ "doc_name": "AS Pأ•LVA HAIGLA KVALITEEDIKأ„SIRAAMAT", + "last_change": "30.03.2022", + "made_by": "M. Sultsmann", + "confirmed_by": "Margot Bergmann", + "valid_til": "kuni mأ¤rts 2024", "text": ["AS Pأµlva Haigla on tervishoiuteenuseid ja sotsiaalteenuseid osutav organisatsioon.\nHaigla kuulub Haiglavأµrgu Arengukava haiglate hulka. Haigla on liitunud SA Tartu\nأœlikooli Kliinikumi kontserniga.\n", "Haigla kvaliteedikأ¤siraamatu eesmأ¤rgiks on kirjeldada organisatsioonis kasutusele\nvأµetud kvaliteedijuhtimissأ¼steemi, mille kأ¤sitlusalaks on kvaliteetsete tervishoiu ja\nrehabilitatsiooniteenuste pakkumine, pakutavate teenuste tulemuslikkuse parendamine,\neelduste loomine ressursside optimeerimiseks ja jأ¤tkusuutlikuks arenguks. Lisaks\nkirjeldab kvaliteedikأ¤siraamat organisatsiooni, selle juhtimist ja tugiteenuste\nkorraldamisega seotud tegevusi.", "Kasutatav kvaliteedijuhtimissأ¼steem vأµimaldab pakkuda patsiendi nأµuetele ja\nkohaldatavatele seadusjأ¤rgsetele nأµuetele vastavaid teenuseid, loob eeldused patsiendi\nannab vأµimaluse hinnata tegevuse vastavust kvaliteedijuhtimissأ¼steemi rahulolu\nsuurendamiseks, organisatsiooni eesmأ¤rkidega seotud riskide kأ¤sitlemiseks ja nأµuetele.", "Kirjeldatud protsesside ja protseduride juures on toodud teema aluseks olevad\nأµigusaktid, haigla vastavate dokumentide loetelu ja teemaga seotud kvaliteedijuhendid."], "chapters": [ { + "toggle": false, "id": "1", "name": "Organisatsiooni juhtimine", "content": [ @@ -18,6 +23,7 @@ ], "subchapters": [ { + "toggle": false, "id": "1.1", "name": "Organisatsiooni struktuur", "content": [ @@ -36,6 +42,7 @@ ] }, { + "toggle": false, "id": "1.2", "name": "Strateegilised eesmأ¤rgid", "content": [ @@ -88,44 +95,54 @@ ] }, { + "toggle": false, "id": "1.3", "name": "Finantsjuhtimine ja raamatupidamine" } ] }, { + "toggle": false, "id": "2", "name": "Kvaliteedi juhtimine" }, { + "toggle": false, "id": "3", "name": "Patsiendikeskus" }, { + "toggle": false, "id": "4", "name": "Teenuste osutamine" }, { + "toggle": false, "id": "5", "name": "Teenused" }, { + "toggle": false, "id": "6", "name": "Personali juhtimine" }, { + "toggle": false, "id": "7", "name": "Toitlustamine" }, { + "toggle": false, "id": "8", "name": "Transpordikorraldus" }, { + "toggle": false, "id": "9", "name": "Pesu kأ¤itlemine" }, { + "toggle": false, "id": "10", "name": "Infrastruktuur" } diff --git "a/src/assets/qabook/KK-\303\234J-01 Kvaliteedi k\303\244siraamat Vs.4.1.pdf" "b/src/assets/qabook/KK-\303\234J-01 Kvaliteedi k\303\244siraamat Vs.4.1.pdf" new file mode 100644 index 0000000000000000000000000000000000000000..125be5ca5f47786726610bde844d6f36b5ad3657 Binary files /dev/null and "b/src/assets/qabook/KK-\303\234J-01 Kvaliteedi k\303\244siraamat Vs.4.1.pdf" differ diff --git a/src/components/Announcements.vue b/src/components/Announcements.vue new file mode 100644 index 0000000000000000000000000000000000000000..f7eaec63e4c8cde21b7a85989e7270ca2a1087a5 --- /dev/null +++ b/src/components/Announcements.vue @@ -0,0 +1,76 @@ +<template> + <div> + <div class="justify-between flex flex-row mt-7"> + <div><h5 class="text-2xl pb-6">Teadaanded</h5></div> + <div> + <button @click="addSidebarAnnouncements" class="mr-4 "> + <font-awesome-icon icon="fa-solid fa-plus"/> + </button> + <button @click="deleteSidebarAnnouncements" class=""> + <font-awesome-icon icon="fa-solid fa-trash"/> + </button> + </div> + </div> + <div v-if="size === 'small'" class="bg-[#ebebeb] rounded-3xl pl-4 pt-2 pb-2 flex flex-col"> + <div v-for="ann in getAnns"> + {{ ann.content }} + </div> + </div> + <div v-if="size === 'big'" class="bg-[#ebebeb] text-xl rounded-xl pl-4 pt-2 pb-2 flex flex-col space-y-3"> + <div v-for="ann in getAnns"> + {{ ann.content }} + </div> + </div> + </div> +</template> + +<script> +import {addSidebarLinkObject, deleteSidebarLinkObject, sidebarLinkArray} from "@/firebase/SidebarLinks"; +import { + addSidebarAnnouncementObject, + announcementsArray, + deleteSidebarAnnouncementObject +} from "@/firebase/SidebarAnnouncements"; + +export default { + name: "Announcements", + props: { + size: "", + }, + data() { + return { + sidebarAnnouncements: [] + } + }, + mounted() { + this.getSidebarAnnouncements() + }, + computed: { + getAnns() { + return this.sidebarAnnouncements + } + }, + methods: { + getSidebarAnnouncements() { + this.sidebarAnnouncements = announcementsArray + }, + addSidebarAnnouncements() { + addSidebarAnnouncementObject("Test title", "test content") + .then((result) => { + console.log(result, "Id added") + this.getSidebarAnnouncements() + }) + }, + deleteSidebarAnnouncements() { + deleteSidebarAnnouncementObject(announcementsArray[0].id).then((result) => { + console.log("sidebarLink is deleted") + this.getSidebarAnnouncements() + }) + }, + } +} +</script> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/components/ContactComponent.vue b/src/components/ContactComponent.vue index 38c866a8190031306ba8f0bac0e2b9b2e7b2d6ee..24a73451b56bf480d103dbef8797d1d6736712bb 100644 --- a/src/components/ContactComponent.vue +++ b/src/components/ContactComponent.vue @@ -1,25 +1,26 @@ <template> - <div class="bg-white flex flex-col p-4 rounded-3xl drop-shadow-sm w-full"> + <div class="bg-white flex flex-col p-4 rounded-3xl w-full"> <div @click="toggleDisplay" class="flex flex-row justify-between items-center cursor-pointer"> <h1 class="font-bold text-xl"> {{ category }} </h1> <font-awesome-icon class="text-2xl pr-2 cursor-pointer" icon="fa-solid fa-caret-down"/> </div> <Transition name="toggling"> + <!-- TODO: nime jأ¤rgi sorteerimine? --> <div v-show="toggle" class="space-y-2 pt-2"> <table class="w-full text-left table-fixed"> <caption></caption> <thead> <tr class="font-bold space-x-10"> - <th>Ametikoht</th> <th>Nimi</th> + <th>Ametikoht</th> <th>Telefon</th> <th>E-post</th> </tr> </thead> <tbody> <tr v-for="profile in profiles" class=""> - <td>{{ profile.position }}</td> <td>{{ profile.name }}</td> + <td>{{ profile.position }}</td> <td>{{ profile.number }}</td> <td>{{ profile.meil }}</td> <div class="flex flex-row space-x-12"> diff --git a/src/components/Header.vue b/src/components/Header.vue index 8971700e741072f4f0d4f1cf749f211290045938..7da20401673d40d801e22e593979a9144bd79429 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -1,12 +1,7 @@ <template> <div> - <div class="hidden md:flex md:flex-col md:bg-white"> - <div class="hidden md:p-4 md:flex md:flex-row md:items-center md:grid-rows-3"> - <img alt="Pأµlva Haigla logo" class="logo" src="../assets/logo.png" width="120"/> - <SearchBar></SearchBar> - <button @click="$store.dispatch('logout')" class="bg-[#EF426F] ml-4 py-1 px-4 rounded-2xl text-white"> Logi vأ¤lja </button> - </div> - <NavigationBar class="drop-shadow-md"></NavigationBar> + <div class="hidden md:flex md:flex-col md:bg-white z-100"> + <NavigationBar class=""></NavigationBar> </div> <MobileNav></MobileNav> </div> diff --git a/src/components/LatestNews.vue b/src/components/LatestNews.vue new file mode 100644 index 0000000000000000000000000000000000000000..02b1aac3e827829cb7ab0b10d3bd4f0aa71fc5fe --- /dev/null +++ b/src/components/LatestNews.vue @@ -0,0 +1,38 @@ +<template> + <div @mouseover="hover = true" @mouseleave="hover = false" + class="bg-[#F0F0F0] p-6 rounded-xl hover:bg-gradient-to-b from-transparent to-gray-300 cursor-pointer"> + <!-- Title --> + <h1 class="font-bold text-xl pb-6">{{ news.title }}</h1> + <!-- Content--> + <div class="max-h-[100px] overflow-hidden"> + <div v-html="ConvertToHtml(news.content)"> + </div> + </div> + <div v-if="hover" class="relative -mt-10 bg-white px-4 py-2 rounded-md max-w-max ml-auto mr-auto">Loe lisaks..</div> + </div> +</template> + +<script> +import {QuillDeltaToHtmlConverter} from "quill-delta-to-html"; + +export default { + name: "LatestNews", + props: { + news: {} + }, + data() { + return { + hover: false + } + }, + methods: { + ConvertToHtml(content) { + return new QuillDeltaToHtmlConverter(content, {}).convert() + } + } +} +</script> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue index 80887a8f2e9edbb5c8404d0070d794db1dc235a2..17a03cacfc303ac695cad77dcaa870a707329d6f 100644 --- a/src/components/NavigationBar.vue +++ b/src/components/NavigationBar.vue @@ -1,36 +1,60 @@ <template> - <div class="bg-[#3A0960]"> - <ul class="flex justify-between text-2xl py-7 text-white mx-20"> + <div class="bg-[#3A0960] z-10"> + <ul class="flex justify-between text-2xl text-white mx-5 items-center mt-2 mb-2"> + <!--Logo/home--> <li> - <router-link to="/">Avaleht</router-link> - </li> - <li> - <router-link to="/uudised">Uudised</router-link> - </li> - <li> - <router-link to="/kontaktid">Kontaktid</router-link> + <div class="hidden md:flex md:flex-row md:items-center"> + <router-link to="/"><img @click="" alt="Pأµlva Haigla logo" class="logo" + src="../assets/logos/logo_alt_white.png" + width="50"/> + </router-link> + </div> </li> - <li> - <div @mouseover="hover = true" @mouseleave="hover = false" class="align-middle"> - <div>Juhendid - <font-awesome-icon icon="fa-solid fa-caret-down"/> - </div> - <div v-if="hover" class="top-220 absolute p-6 bg-[#3A0960] pb-4 -ml-[24px] rounded-br-lg rounded-bl-lg"> - <div class="flex flex-col"> - <router-link to="/juhendid">Kvaliteedikأ¤siraamat</router-link> - <router-link to="/dokumendid">Dokumendid</router-link> + <!--Navbar--> + <li class="flex flex-row items-center"> + <ul class="flex flex-row gap-10"> + <li class=""> + <router-link to="/">Avaleht</router-link> + </li> + <li> + <router-link to="/uudised">Uudised</router-link> + </li> + <li> + <router-link to="/kontaktid">Kontaktid</router-link> + </li> + <li> + <div @mouseover="hover = true" @mouseleave="hover = false" class="align-middle"> + <div>Juhendid + <font-awesome-icon icon="fa-solid fa-caret-down"/> + </div> + <div v-if="hover" class="absolute p-6 bg-[#3A0960] pb-4 -ml-[24px] rounded-br-lg rounded-bl-lg"> + <div class="flex flex-col"> + <router-link to="/juhendid">Kvaliteedikأ¤siraamat</router-link> + <router-link to="/dokumendid">Dokumendid</router-link> + </div> + </div> </div> - </div> - </div> + </li> + <li> + <router-link to="/abilaud">Abilaud</router-link> + </li> + </ul> </li> - <li> - <router-link to="/abilaud">Abilaud</router-link> + <li class="align-middle"> + <button class="text-4xl align-middle"> + <font-awesome-icon icon="fa-solid fa-circle-user"/> + </button> + <button @click="$store.dispatch('logout')" class="bg-[#EF426F] ml-4 py-1 px-4 rounded-2xl text-lg text-white"> + Logi + vأ¤lja + </button> </li> </ul> </div> </template> <script> + export default { name: "NavigationBar", data() { diff --git a/src/components/NewsComponents/NewObjectView.vue b/src/components/NewsComponents/NewObjectView.vue index 733a2e246427d96c60913b0f434a1ed5d8d5287e..14ab2e5016c4c1052c7905a1f2000d2fcfc41e85 100644 --- a/src/components/NewsComponents/NewObjectView.vue +++ b/src/components/NewsComponents/NewObjectView.vue @@ -1,6 +1,6 @@ <template> <div class="justify-center flex"> - <div class="bg-white flex flex-col p-4 rounded-lg drop-shadow-sm max-w-[900px] min-w-[500px]"> + <div class="bg-white flex flex-col p-4 rounded-lg max-w-[900px] min-w-[500px]"> <div class="flex items-center justify-between pb-4"> <h1 v-if="title" class="font-bold text-black text-2xl"> {{ title }} diff --git a/src/components/NewsComponents/NewsComponent.vue b/src/components/NewsComponents/NewsComponent.vue index 901efe581b258be7acfaad973a2c17369450f9ab..b6d87adfffb3c2cce70d2b91628056c9dff3c489 100644 --- a/src/components/NewsComponents/NewsComponent.vue +++ b/src/components/NewsComponents/NewsComponent.vue @@ -1,29 +1,29 @@ <template> - <div @click = "redirectToNewsObjectPage" class="bg-[#ebebeb] m-2 p-2 rounded-[30px] flex flex-row items-center justify-between cursor-pointer"> + <div @click="redirectToNewsObjectPage" + class="bg-[#F0F0F0] m-2 p-2 rounded-[30px] flex flex-row items-center justify-between cursor-pointer hover:bg-gradient-to-b from-transparent to-gray-300" + @mouseover="hover = true" @mouseleave="hover = false"> <div class="p-2 pl-4"> <div class=" text-xl pb-4 title"> {{ title }} </div> <div class="max-h-16 text-sm overflow-hidden"> <div v-html="data"> - </div> </div> + <div v-if="hover" class="relative -mt-10 bg-white px-4 py-2 rounded-md max-w-max ml-auto mr-auto">Loe lisaks..</div> </div> - <font-awesome-icon class="text-2xl cursor-pointer m-5" icon="fa-solid fa-caret-right" - /> </div> </template> <script> -import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; -const delta = [ { "insert": "Pأµlva Haiglal on au vastu vأµtta Rohelisema Pأµlvamaa mأ¤rgis. ", "attributes": { "bold": true } }, { "insert": "\n\nHaigla on astunud suuri samme sأ¤أ¤stlikuma ja rohelisema tuleviku heaks: investeerinud hooneautomaatikasse, efektiivsemasse ning targalt juhitud valgustusse, أ¼le on mindud autonoomsele meditsiinilise hapniku tootmisele ning alustatud on keskkonnaga seotud mأµأµdikute jأ¤lgimist. Igapأ¤evaselt jأ¤lgitakse materjalitأµhusust, jأ¤أ¤tmekoguste teket, elektri- ja veekasutuse ning soojusenergia nأ¤itajaid, et vأ¤ltida nii rahaliste kui ka loodusressursside raiskamist ja liikuda jأ¤rk-jأ¤rgult tarbimise vأ¤hendamise suunas. Toitlustusteenuse puhul eelistame tooraine hankimisel kodumaist ning kohaliku pأ¤ritoluga toodangut ning vأ¤أ¤rtustame oma tأ¶أ¶tajate tervist ja tervislikke eluviise. Pأµlva Haigla jأ¤tkusuutlikkuse spetsialist " }, { "insert": "Andra Villems", "attributes": { "italic": true } }, { "insert": " lisab, et tأ¶أ¶d selle nimel on palju tehtud ja palju on veel teha, kuid see mأ¤rgis nأ¤itab meie rohelist suhtumist ja lubadust olla oma tegevuses tأ¤na ja tulevikus sأ¤أ¤stlik, puhas, taaskasutav ja hooliv!\n\nhm" }, { "insert": "\n", "attributes": { "list": "bullet" } }, { "insert": "hm" }, { "attributes": { "list": "bullet" }, "insert": "\n" } ]; +import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html'; export default { name: "NewsComponent", data() { return { + hover: false, data: new QuillDeltaToHtmlConverter(this.content, {}).convert() } }, diff --git a/src/components/NewsComponents/NewsFront.vue b/src/components/NewsComponents/NewsFront.vue index dc8a3789a2633a81b2423f0c28fa7c63020384ed..728ee2b029d382e678bca1b13c8f874dc1b0be8f 100644 --- a/src/components/NewsComponents/NewsFront.vue +++ b/src/components/NewsComponents/NewsFront.vue @@ -1,33 +1,32 @@ <template> - <div> - <img class="z-0 rounded-xl w-3/4 mx-auto" src="/src/assets/avaleht-transformed2.jpg" alt="polva-haigla "> - <div class=" rounded-xl w-10/12 mx-auto z-1 top-[-10px] relative bg-white rounded-xl p-4 drop-shadow-sm h-max"> - <p class="prose-xl text-center leading-snug text-5xl p-4"> {{ title }} </p> - <blockquote><hr class="my-2 mx-auto w-3/4 h-0.5 bg-gray-100 rounded border-0 md:my-10 dark:bg-gray-700"></blockquote> + <div class="space-y-6"> + <!-- <img class="z-0 rounded-xl w-3/4 mx-auto" src="/src/assets/avaleht-transformed2.jpg" alt="polva-haigla ">--> - <div v-html="content" class="text-xl p-5"></div> + <!-- <div v-html="content" class="text-xl "></div>--> + <div v-for="news in latestNews" class=""> + <LatestNews :news="news"></LatestNews> </div> </div> </template> <script> import {returnLatestNews} from "@/firebase/News"; -import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; +import LatestNews from "@/components/LatestNews.vue"; export default { name: "NewsFront", + components: {LatestNews}, data() { return { latestNews: [], title: "", - content: null + content: null, + hover: false } }, mounted() { - let latest = returnLatestNews(); - this.title = latest.title - this.content = new QuillDeltaToHtmlConverter(latest.content, {}).convert() + this.latestNews = returnLatestNews(); } } </script> diff --git a/src/components/QABookComponents/ContentComp.vue b/src/components/QABookComponents/ContentComp.vue index a72948b4a6231c98e3bbc4e1d8d9ea343987120c..f080e9fdcc5541296d6598b1fb487f785b50681c 100644 --- a/src/components/QABookComponents/ContentComp.vue +++ b/src/components/QABookComponents/ContentComp.vue @@ -1,36 +1,59 @@ <template> <div> <div v-if="name" class="text-[1.15rem] pb-4"> - <a @click="yeet" class="cursor-pointer"> - {{ book.id }}. + <a @click="goToChapter" class="cursor-pointer"> + {{ id }}. {{ name }} </a> </div> <div v-if="subchapters" class="pl-5"> - <div v-for="chapter in subchapters"> - <ContentComp :book="chapter"></ContentComp> + <div v-for="(chapter, index) in subchapters" :key="chapter.id"> + <ContentComp :id="formId(index + 1)" @idList="sendId(chapter.id)" :book="chapter" :original="original"></ContentComp> </div> </div> </div> </template> <script> +import { ref } from 'vue'; + export default { name: "ContentComp", props: { - book: Object + book: {}, + original: {}, + id: "" }, data() { return { - id: this.book.id, name: this.book.name, subchapters: this.book.subchapters } }, methods: { - yeet() { - console.log("chapter", this.id, "was clicked") - + formId(newIndex) { + return this.id.toString() + "." + newIndex.toString() + }, + goToChapter() { + this.openChapters() + // TODO: refs for scrolling + this.sendId() + //this.$emit('idList', this.id.split(".")) + // TODO: close chapters when clicking on open chapters?? + }, + sendId(value) { + if (value == null) value = this.id // May be undefined because no child is present; change value to current id. + //console.log("emitting", value, "from", this.id + "..") + this.$emit('idList', value) + }, + openChapters() { + let idlist = this.id.split(".") + let book = this.original + for (let i = 0; i < idlist.length; i++) { + const id = parseInt(idlist[i]) - 1 + book[id].toggle = true + if (i < idlist.length - 1) book = book[id].subchapters + } } } } diff --git a/src/components/QABookComponents/EditMenu.vue b/src/components/QABookComponents/EditMenu.vue new file mode 100644 index 0000000000000000000000000000000000000000..7c3ed14aa1eb7c7a97f01eed8edb5fce88786442 --- /dev/null +++ b/src/components/QABookComponents/EditMenu.vue @@ -0,0 +1,13 @@ +<template> + +</template> + +<script> +export default { + name: "EditMenu" +} +</script> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/components/QABookComponents/TreeContent.vue b/src/components/QABookComponents/TreeContent.vue index 694f834cd3811f1048fd2f160b6f84ab893ceea8..dfdaad77987455c8a5e7b68f836aa7c7720d8fe5 100644 --- a/src/components/QABookComponents/TreeContent.vue +++ b/src/components/QABookComponents/TreeContent.vue @@ -24,13 +24,8 @@ export default { name: "TreeContent", components: {TreePic, TreeList, TreeText}, props: { - content: Object, + content: {}, }, - data() { - return { - content: this.content - } - } } </script> diff --git a/src/components/QABookComponents/TreeText.vue b/src/components/QABookComponents/TreeText.vue index 70b12eace118636fc91f49cd6ecdbacc116e05d1..a36a62ab783ec611f3916824ffcaa3c033ce35a9 100644 --- a/src/components/QABookComponents/TreeText.vue +++ b/src/components/QABookComponents/TreeText.vue @@ -1,5 +1,5 @@ <template> - <div class="pt-4 pb-4"> + <div class="pb-4"> <div v-for="textel in text"> <p class="max-w-[700px]"> {{ textel }} diff --git a/src/components/QABookComponents/TreeView.vue b/src/components/QABookComponents/TreeView.vue index 4f986d2a7fbbb4bcbac79407cd69e3600de4e01e..b4e5fff30ab13486fe56ce1119c6f43c680a4952 100644 --- a/src/components/QABookComponents/TreeView.vue +++ b/src/components/QABookComponents/TreeView.vue @@ -1,30 +1,72 @@ <template> <div> - <div class="flex flex-row"> - <!-- Igal peatأ¼kil on nimi --> - <div v-if="name" class="text-[1.40rem] font-bold pb-4"> {{ name }}</div> - - <!-- Kas peatأ¼kil on sisu vأµi alapeatأ¼kke? --> - <div v-if="content || subchapters"> - <button @click="toggleClick"> - <font-awesome-icon icon="fa-solid fa-caret-down" class="pl-2"/> <!-- Siis lisa nupp --> - </button> + <div class="flex flex-row max-w-max" :ref="this.id" @mouseover="hover = true" @mouseleave="hover = false"> + <div class="flex flex-row"> + <!-- Igal peatأ¼kil on nimi --> + <div v-if="name" class="text-[1.40rem] font-bold pb-4"> {{ name }}</div> + + <!-- Kas peatأ¼kil on sisu vأµi alapeatأ¼kke? --> + <div v-if="content || subchapters"> + <button @click="toggleClick"> + <font-awesome-icon icon="fa-solid fa-caret-down" class="pl-2"/> <!-- Siis lisa nupp --> + </button> + </div> </div> + + <!-- Is changing enabled? --> + <Transition name="editButton"> + <div v-if="this.edit && hover" @mouseleave="editingMode = false"> + <button @click="editingMode ? editingMode = false : editingMode = true"> + <font-awesome-icon class="pl-5" icon="fa-solid fa-bars-staggered"/> + </button> + + <div class="ml-3 -mt-[200px] p-10"> + <Transition name="optionsMenu"> + <div class="bg-[#ebebeb] p-6 absolute rounded-md shadow-2xl border-2 border-solid border-[#b2a7b8] " + v-if="editingMode" + @mouseleave="editingMode = false"> + <div class="flex flex-col items-start space-y-4"> + <button> + <font-awesome-icon class="mr-4" icon="fa-solid fa-pen"/> + Muuda nime + </button> + <button> + <font-awesome-icon class="mr-4 cursor-pointer" icon="fa-solid fa-pen-to-square"/> + Muuda sisu + </button> + <button class="max-w-max items-center"> + <font-awesome-icon class="mr-5 cursor-pointer" icon="fa-solid fa-paragraph"/> + Lisa alla.. + </button> + <button class="flex flex-row items-center" @click="deleteById"> + <font-awesome-icon class="mr-6" icon=" fa-solid fa-trash"/> + <p class="text-red-600 font-bold">Kustuta</p> + </button> + </div> + </div> + </Transition> + </div> + + </div> + </Transition> + </div> <!-- Sisu --> <Transition name="sub"> - <div v-if="toggled" class="pl-10"> <!-- Ainult siis, kui on sisu kuvada --> - + <div v-if="this.chapter.toggle" class="pl-10 border-l-2 border-[#b2a7b8] mb-5"> + <!-- Ainult siis, kui on sisu kuvada --> <div v-if="content"> <div v-for="element in content"> <TreeContent :content="element"></TreeContent> </div> </div> - <div v-if="subchapters"> <!-- Rekursiivselt uutesse harudesse --> - <div v-for="chapter in subchapters"> - <TreeView :book="chapter" :toggle="false"></TreeView> + <div v-if="subchapters"> + <!-- Rekursiivselt uutesse harudesse --> + <div v-for="(chapter, index) in subchapters" :key="this.chapter.toggle && id"> + <TreeView :id="formId(index + 1)" :book="book" :chapter="chapter" @sendRefs="forwardRef" + :edit="edit"></TreeView> </div> </div> @@ -41,22 +83,65 @@ export default { name: "TreeView", components: {TreeContent}, props: { - book: Object, - toggle: Boolean + id: String, + chapter: Object, + edit: Boolean, + book: Object }, data() { return { - toggled: this.toggle, - name: this.book.name, - subchapters: this.book.subchapters, - content: this.book.content - + name: this.chapter.name, + subchapters: this.chapter.subchapters, + content: this.chapter.content, + hover: false, + editingMode: false } }, methods: { + formId(newIndex) { + return this.id.toString() + "." + newIndex.toString() + }, + forwardRef(value) { + this.sendRef(value.id, value.ref) + }, + sendRef(id, ref) { + if (id === null) id = this.id + this.$emit('sendRefs', {id: id, ref: ref}) + }, toggleClick() { - this.toggled = this.toggled === false; + if (this.chapter.toggle === false) { + this.chapter.toggle = true; + this.$nextTick( + () => { + if (this.$refs[this.id] !== null) { + this.$refs[this.id.toString()].scrollIntoView({behavior: "smooth"}) + } + } + ); + } else if (this.chapter.toggle === true) { + this.chapter.toggle = false; + } + }, + deleteById() { + console.log("deleting..") + let book = this.book + let idList = this.id.split(".") + + console.log("idlist:", idList) + + for (let i = 0; i < idList.length; i++) { + console.log("i", i, "idlist:", idList[i], "book state:", book) + if (i === idList.length - 1) { + book = book.splice(idList[i] - 1, 1) + console.log("el with id", idList[i] - 1, "was removed") + } else { + book = book[idList[i] - 1].subchapters + } + } } + }, + mounted() { + this.sendRef(this.id, this.$refs[this.id]) } } </script> @@ -65,14 +150,36 @@ export default { .sub-enter-active { transition: transform 0.7s ease-out; } + .sub-leave-active { transition: transform 0.5s ease-in; } .sub-enter-from { - transform: translateY(-30px); + transform: translateY(-20px); } + .sub-leave-to { - transform: translateY(-30px); + transform: translateY(-20px); +} + +.editButton-enter-active, +.editButton-leave-active { + transition: opacity 0.5s ease; +} + +.editButton-enter-from, +.editButton-leave-to { + opacity: 0; +} + +.optionsMenu-enter-active, +.optionsMenu-leave-active { + transition: opacity 0.5s ease; +} + +.optionsMenu-enter-from, +.optionsMenu-leave-to { + opacity: 0; } -</style> \ No newline at end of file +</style> diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index d897dc6f5a08aad6cd25e52f6f25b6f5b67fbf7e..3102f312ce93c5e51272b91d64a1c171c4f7ebc6 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -1,6 +1,6 @@ <template> <div - class="bg-white rounded-3xl sm:rounded-none sm:rounded-br-3xl drop-shadow-sm h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0"> + class="bg-white rounded-3xl sm:rounded-none sm:rounded-br-3xl h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0"> <div class="p-5"> <div class="justify-between flex flex-row"> <div><h5 class="text-2xl pb-2">Viited</h5></div> diff --git a/src/components/SpecificSearch.vue b/src/components/SpecificSearch.vue index b6f87cb9b82b1336c2eea1f2177d06969305837c..bfd1d01b3a5b9f8fe1d292b6f1bc0853a4d8f955 100644 --- a/src/components/SpecificSearch.vue +++ b/src/components/SpecificSearch.vue @@ -1,11 +1,13 @@ <template> <div class="pl-5 h-auto"> - <form class=" items-center content-around flex"> - <input class="placeholder: pl-3 py-1 rounded-2xl bg-white" type="search" id="query" name="query" - placeholder="Otsi.."> - <button class="pl-2 text-xl"> - <font-awesome-icon icon="fa-solid fa-magnifying-glass"/> - </button> + <form class=" items-center content-around flex rounded-2xl"> + <div class="bg-gradient-to-r from-transparent to-gray-300 rounded-2xl pr-3 items-center"> + <input class="placeholder: pl-3 py-1 rounded-2xl bg-[#F0F0F0]" type="search" id="query" name="query" + placeholder="Otsi.."> + <button class="pl-2 text-xl"> + <font-awesome-icon icon="fa-solid fa-magnifying-glass"/> + </button> + </div> </form> </div> </template> diff --git a/src/firebase/News/index.js b/src/firebase/News/index.js index 0505b5461ca1a193c56ce3d233f6ba349754ad5c..14b677bfb9d4df0d3dd985add1a5d83731371b0c 100644 --- a/src/firebase/News/index.js +++ b/src/firebase/News/index.js @@ -65,7 +65,7 @@ function returnLatestNews() { copy.sort(function (o2, o1) { return new Date(o1.created.seconds*1000) - new Date(o2.created.seconds*1000) }) - return copy[0]; + return copy.slice(0, 2); } export { diff --git a/src/main.js b/src/main.js index d1468abb2ddb396313e6993bb256369981d15f49..27a83df440312cacf773c84b8488f1024c302283 100644 --- a/src/main.js +++ b/src/main.js @@ -23,10 +23,15 @@ import "vue-toastification/dist/index.css" import './assets/tailwind.css' import 'tw-elements' +import 'v-calendar/dist/style.css'; +import VCalendar from 'v-calendar'; + const app = createApp(App) + app.use(router) app.use(store) +app.use(VCalendar, {}) app.use(Toast, {position: POSITION.TOP_CENTER, timeout: 2000}) app.component('QuillEditor', QuillEditor) app.component('font-awesome-icon', FontAwesomeIcon) diff --git a/src/router/index.js b/src/router/index.js index 43c352193ec0010fbebd6e77e9f52f02eb8a7d13..b7c70936401e8ffa7dfe112538aadc279fe97848 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -108,6 +108,11 @@ const router = createRouter({ name: 'login', component: () => import('../views/Login.vue'), }, + { + path: '/lisajuhis', + name: 'lisajuhis', + component: () => import('../views/AddNewInstruction.vue') + } ] }) diff --git a/src/views/AddNewInstruction.vue b/src/views/AddNewInstruction.vue new file mode 100644 index 0000000000000000000000000000000000000000..cf12eed9a2c570c886ef956e516bdb20d69d0499 --- /dev/null +++ b/src/views/AddNewInstruction.vue @@ -0,0 +1,35 @@ +<template> + <div class="bg-blue-300 m-10"> + <div class="p-10 space-y-4"> + <div> + <label>peatأ¼ki ID</label> + <input> + </div> + <div class="cursor-pointer"> + <!-- TODO: dropdown menu--> + Lisa uus tekst + <font-awesome-icon icon="fa-solid fa-caret-down"/> + </div> + <div class="bg-white" v-if="quill"> + <QuillEditor v-model:content="sisu" theme="snow" id="sisu"/> + </div> + </div> + </div> +</template> + +<script> +import '@vueup/vue-quill/dist/vue-quill.snow.css'; + +export default { + name: "AddNewInstruction", + data() { + return { + quill: true + } + } +} +</script> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue index 987486ac9334ab80d7565700374c95304f33436f..5bd3283dfd5759e91afeb21898ff3cbc00790e16 100644 --- a/src/views/ContactView.vue +++ b/src/views/ContactView.vue @@ -1,27 +1,37 @@ <template> - <div class="flex flex-col sm:grid sm:grid-cols-4"> - <Sidebar class="order-last sm:order-first col-span-1"></Sidebar> - <div class="col-span-3 flex flex-col mb-5"> - - <div class="ml-5 sm:ml-0 mt-5 flex flex-row items-center justify-between"> - <p class="text-4xl">Kontaktid</p> - <div class="flex flex-row justify-end mr-5"> - <SpecificSearch class="mr-3"></SpecificSearch> - <router-link to="lisakontakt"> - <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white"> + <body class="flex flex-col sm:grid sm:grid-cols-4"> + <Sidebar class="order-last sm:order-first col-span-1"></Sidebar> + <main class="col-span-3 flex flex-col mb-5"> + <div class="mr-5 ml-5 sm:ml-0 p-3 flex flex-row items-center justify-between bg-white rounded-b-3xl"> + <h1 class="text-2xl">Kontaktid</h1> + <div class="flex flex-row justify-end"> + <!--Searchbar--> + <div class="h-auto"> + <form class="items-center content-around flex rounded-2xl"> + <div class=""> + <input class="border-b-2 border-[#b2a7b8] mr-3 placeholder: pl-3 py-1" type="search" id="query" name="query" + placeholder="Otsi.."> + <!-- <button class="pl-2 text-xl">--> + <!-- <font-awesome-icon icon="fa-solid fa-magnifying-glass"/>--> + <!-- </button>--> + </div> + </form> + </div> + <!--Adding a new contact--> + <router-link to="lisakontakt"> + <button class="bg-[#EF426F] py-1 px-4 rounded-md text-white"> <font-awesome-icon class="mr-2" icon="fa-solid fa-user-plus"/> Lisa uus </button> - </router-link> - </div> - </div> - - <div class="sm:mr-5 mt-5 sm:ml-0 mx-5" v-for="category in categories"> - <ContactComponent class="" :category="category.category" :profiles="category.profile"></ContactComponent> + </router-link> </div> </div> - - </div> + <!--Contactlist--> + <div class="sm:mr-5 mt-5 sm:ml-0 mx-5" v-for="category in categories"> + <ContactComponent class="" :category="category.category" :profiles="category.profile"></ContactComponent> + </div> + </main> + </body> </template> <script> diff --git a/src/views/FileView.vue b/src/views/FileView.vue index d37b949e1afeefafe6357a34d9eb04ab055f4ad5..a5f5315dc921b98dd10d45deaf5f2a310e9aaf49 100644 --- a/src/views/FileView.vue +++ b/src/views/FileView.vue @@ -1,21 +1,21 @@ <template> <div class="flex flex-col sm:grid sm:grid-cols-4"> <Sidebar class="order-last sm:order-first col-span-1"></Sidebar> - <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mt-5 mr-5"> + <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mr-5"> - <div class="head flex flex-row justify-between"> - <p class="text-4xl">Dokumendid</p> + <div class="head flex flex-row justify-between bg-white p-3 rounded-b-3xl mb-5 items-center"> + <p class="text-2xl">Dokumendid</p> <div> - <input type="text" class="border-2 mb-5 rounded h-10 p-2 mr-5" placeholder="Otsi dokumente" + <input type="text" class="border-2 rounded h-8 p-2 mr-5" placeholder="Otsi dokumente" @input="onSearch" /> <router-link to="juhendid"> - <button class="bg-[#fff] py-1 px-4 rounded-2xl text-black h-10 mr-5 border-2 border-gray-200"> + <button class="bg-[#fff] px-4 rounded-2xl h-8 text-black mr-5 border-2 border-gray-200"> Tagasi juhendisse </button> </router-link> <router-link to="faililaadimine"> - <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white h-10"> + <button class="bg-[#EF426F] py-1 px-4 rounded-md text-white"> <font-awesome-icon class="mr-2" icon="fa-solid fa-file-circle-plus"/> Lisa uusi faile </button> diff --git a/src/views/HelpdeskView.vue b/src/views/HelpdeskView.vue index 35c01ff5f32c11d835d670c590222e68e53eb3a3..78a1f4202b0c4a9685d1a029efec1c8dadd582be 100644 --- a/src/views/HelpdeskView.vue +++ b/src/views/HelpdeskView.vue @@ -27,6 +27,7 @@ <select v-model="tyyp" id="tأ¼أ¼p" name="tأ¼أ¼p" @change="changeEmail(tyyp)" required> <option value="Tehniline abi">Tehniline abi</option> <option value="Tagasiside">Tagasiside/Tأ¤nuavaldus</option> + <option value="Tagasiside">Tagasiside/Tأ¤nuavaldus</option> <option value="Muu">Muu teade</option> </select> <label for="osakond">Osakond</label> diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index ae441550043993902295ecebc0580b2c7c37f20c..418a2ef06138ac84f699cb93ca4c49ff0a7f3e38 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,11 +1,74 @@ -<script setup> -import Sidebar from "../components/Sidebar.vue"; -import NewsFront from "../components/NewsComponents/NewsFront.vue"; -</script> +<script setup></script> <template> <main class="flex flex-col sm:grid sm:grid-cols-4"> - <Sidebar class="order-last sm:order-first"></Sidebar> - <NewsFront class="col-span-3 sm:mr-5 mt-5 sm:ml-0 mx-5 sm:mb-5 "></NewsFront> + <!--Sidebar(s)--> + <div class="sm:col-span-1"> + <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]"> + <div>أœlesanded</div> + <div> + Sul ei ole uusi أ¼lesanded. + </div> + </div> + + <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]"> + <div>Sأ¼nnipأ¤evad</div> + <div>Uusi sأ¼nnipأ¤evi pole.</div> + </div> + + <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]"> + <div>Kalender</div> + <div class="items-center justify-center"> + <v-calendar locale="et" class="mt-5" is-expanded></v-calendar> + </div> + </div> + + <div class="p-10 m-7 bg-white rounded-xl divide-y divide-[#b2a7b8]"> + <div> + Viited + </div> + <div>Viiteid pole.</div> + </div> + </div> + <!--Main dashboard--> + <div class="sm:col-span-3"> + <div class="bg-white mt-7 rounded-xl pr-10 pl-10 pt-6 pb-6 mb-7 divide-y divide-[#b2a7b8] mr-7"> + <!--Dashboard--> + <div class="flex flex-row justify-between items-center mb-6"> + <div class="text-4xl"> + Tere, kasutaja!</div> + <div class="flex flex-col"> + <p>Tأ¤na on 8. veebruar.</p> + <p>Kell on 15.10.</p> + </div> + </div> + <!--Announcements--> + <div> + <div class="mt-6 mb-6"> + <div> + <Announcements :size="'big'"></Announcements> + </div> + </div> + </div> + <!--News--> + <div class=""> + <div class="mt-6"> + <div class="pb-6"><h1 class="text-2xl">Uudised</h1></div> + <NewsFront class=""></NewsFront> + </div> + </div> + </div> + </div> + </main> </template> +<script> +import NewsFront from "@/components/NewsComponents/NewsFront.vue"; +import Announcements from "@/components/Announcements.vue"; + + +export default { + components: {Announcements, NewsFront} + +} +</script> \ No newline at end of file diff --git a/src/views/InstructionsView.vue b/src/views/InstructionsView.vue index 9ba4ce0c22d52dbe52ce773cc567cd63895f00b7..41bccf03aa3241b2664c107768ffda089e79beb7 100644 --- a/src/views/InstructionsView.vue +++ b/src/views/InstructionsView.vue @@ -1,46 +1,100 @@ <template> <div class="flex flex-col sm:grid sm:grid-cols-4"> + <!-- SIDEBAR --> <div class="flex flex-col"> - <Sidebar class="order-last sm:order-first col-span-1"></Sidebar> - <div - class="bg-white sm:sticky-top sm:top-5 p-5 h-max col-span-1 rounded-3xl sm:rounded-none sm:rounded-br-3xl sm:rounded-tr-3xl drop-shadow-sm h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0"> + <!-- SIDEBAR --> + <Sidebar class="order-last sm:order-first col-span-1"></Sidebar> - <div class="text-2xl pb-5"><h1 >Sisukord</h1></div> - <div v-for="chapter in book"> - <ContentComp :book="chapter"></ContentComp> + <!-- TABLE OF CONTENTS --> + <div id="table" + class="max-h-screen overflow-x-hidden overflow-scroll bg-white sm:sticky-top sm:top-5 p-5 h-max col-span-1 rounded-3xl sm:rounded-none sm:rounded-br-3xl sm:rounded-tr-3xl h-max m-5 sm:mr-5 sm:mb-5 sm:mt-0 sm:ml-0"> + <div class=""> + <div class="text-2xl pb-5"><h1>Sisukord</h1></div> + <div v-for="(chapter, index) in book" :key="chapter.id"> + <ContentComp :id="(index + 1).toString()" @idList="idList" :book="chapter" :original="book"></ContentComp> + </div> </div> </div> - </div> - <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mt-5 mr-5 pb-5"> - - <div class="head flex flex-row justify-between"> - <p class="text-4xl">Kvaliteedikأ¤siraamat</p> - <div> - <input type="text" class="border-2 mb-5 rounded h-10 p-2 mr-5" placeholder="Otsi mأ¤rksأµnu" - @input="onSearch" - /> - <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white h-10 "> - <font-awesome-icon class="mr-2" icon="fa-solid fa-file-circle-plus"/> - Muuda kأ¤siraamatut + + <div class="col-span-3 flex flex-col ml-5 sm:ml-0 mr-5 pb-5 "> + + <!-- HEADING --> + <div class="head md:flex md:flex-row md:justify-between bg-white mb-5 rounded-b-xl p-3"> + + <p class="text-2xl">Kvaliteedikأ¤siraamat</p> + + <div class="md:flex md:flex-row"> + <button @click="!enableEdit ? enableEdit = true : saveBook()" + class="bg-[#EF426F] font-medium py-1 px-4 rounded-md text-white flex flex-row items-center"> + <font-awesome-icon v-if="!enableEdit" class="mr-2" icon="fa-solid fa-file-circle-plus"/> + <p v-if="!enableEdit">Muuda kأ¤siraamatut</p> + <font-awesome-icon v-if="enableEdit" class="mr-2" icon="fa-solid fa-floppy-disk"/> + <p v-if="enableEdit">Salvesta kأ¤siraamat</p> </button> + </div> </div> + <!-- QUALITY ASSURANCE BOOK --> <div class="flex flex-row justify-between bg-white p-5 rounded-xl text-xl "> <div class="flex flex-col"> + <p v-if="enableEdit" class="font-bold text-red-600 mb-4">Kأ„SIRAAMAT MUUTMISEL!</p> + + <!-- FIRST HEADING --> + <div class="justify-center"> + <div class="flex flex-col divide-y divide-[#b2a7b8] max-w-max"> + <div>{{ doc_name }}</div> + <div>Kinnitatud: {{ confirmed_by }} {{ last_change }}</div> + <div>Koostatud: {{ made_by }}</div> + <div>Kehtivus: {{ valid_til }}</div> + </div> + </div> + <div class="pt-5 pb-5 text-xl space-y-5"> <div v-for="sentence in text" class="max-w-[900px]"> <p class="first-letter:text-3xl"> {{ sentence }} </p> </div> </div> - <div v-for="chapter in book" class="flex flex-col"> - <TreeView :book="chapter" :toggle="false"></TreeView> + + <!-- RECURSIVE BOOK ELEMENTS --> + <div v-for="(chapter, index) in book" class="flex flex-col" :key="chapter.id"> + <TreeView :id="(index + 1).toString()" :book="book" :chapter="chapter" @sendRefs="getRefs" :edit="enableEdit"></TreeView> </div> - </div> + <div v-if="enableEdit" class="flex flex-col" @mouseleave="editingMenu = false"> + <div class="cursor-pointer hover:bg-gray-200 max-w-max mb-2 -m-2 p-2 hover:rounded-md select-none" + @click="editingMenu ? editingMenu = false : editingMenu = true"> +<!-- <font-awesome-icon class="mr-2" icon="fa-solid fa-file-pen"/>--> + Lisa kأ¤siraamatusse.. + </div> + <Transition name="optionsMenu"> + <div v-if="editingMenu" class="ml-[250px] absolute -mt-[122px]"> + <div class="bg-[#ebebeb] max-w-max p-6 rounded-md shadow-2xl border-2 border-solid border-black" + v-if="editingMenu" + @mouseleave="editingMenu = false"> + <div class=" items-start space-y-4 items-center"> + <button class="max-w-max items-center"> + <font-awesome-icon class="mr-3 cursor-pointer" icon="fa-solid fa-paragraph"/> + Lisa uus paragrahv + </button> + <button class="flex flex-row items-center"> + <font-awesome-icon class="mr-5 cursor-pointer" icon="fa-solid fa-file-lines"/> + Lisa uus tekstivأ¤li + </button> + <button class="flex flex-row items-center"> + <font-awesome-icon class="mr-4 cursor-pointer" icon="fa-solid fa-image"/> + Lisa uus pilt + </button> + </div> + </div> + </div> + </Transition> + + </div> + </div> </div> </div> @@ -62,15 +116,60 @@ export default { return { book: [], text: [], - id_counter: 0 + refs: {}, + enableEdit: false, + editingMenu: false, + last_change: "", + made_by: "", + confirmed_by: "", + valid_til: "", + doc_name: "" } }, mounted() { this.text = qabook.text this.book = qabook.chapters + this.last_change = qabook.last_change + this.made_by = qabook.made_by + this.confirmed_by = qabook.confirmed_by + this.valid_til = qabook.valid_til + this.doc_name = qabook.doc_name + }, + methods: { + saveBook() { + console.log("Book saving..") + this.enableEdit = false + }, + idList(id) { + this.$nextTick(() => { + this.refs[id].scrollIntoView({behavior: "smooth"}) + }); + }, + getRefs(ref) { + this.refs[ref.id] = ref.ref + }, } } </script> <style scoped> +/* Hiding the scrollbar on the table of contents because A E S T H E T I C S */ +#table { + -ms-overflow-style: none; + scrollbar-width: none; +} + +#table::-webkit-scrollbar { + width: 0 !important; +} + +.optionsMenu-enter-active, +.optionsMenu-leave-active { + transition: opacity 0.5s ease; +} + +.optionsMenu-enter-from, +.optionsMenu-leave-to { + opacity: 0; +} </style> \ No newline at end of file diff --git a/src/views/NewsPage.vue b/src/views/NewsPage.vue index 1dbe3ff83fbc176d186d69ed4aebd2224247a8c5..fc870ae557b404fbc4c4673bff4cb52e723745af 100644 --- a/src/views/NewsPage.vue +++ b/src/views/NewsPage.vue @@ -1,14 +1,14 @@ <template> <div class="flex justify-center flex-col sm:grid sm:grid-cols-4"> <Sidebar class=" order-last sm:order-first"></Sidebar> - <div class="rounded-3xl col-span-3 sm:mr-5 mt-5 sm:ml-0 mx-5 sm:mb-5 "> + <div class="rounded-3xl col-span-3 sm:mr-5 sm:ml-0 mx-5 sm:mb-5 "> - <div class="flex flex-row justify-between items-center"> - <h1 class="text-4xl">Uudised</h1> + <div class="flex flex-row justify-between items-center bg-white p-3 rounded-b-3xl"> + <h1 class="text-2xl">Uudised</h1> <div class="flex flex-row"> <RouterLink to="lisauudis"> - <button class="bg-[#EF426F] py-1 px-4 rounded-2xl text-white"> + <button class="bg-[#EF426F] py-1 px-4 rounded-md text-white"> <font-awesome-icon class="" icon="fa-solid fa-pen-to-square"/> Lisa uus </button> @@ -16,13 +16,13 @@ </div> </div> - <div class="bg-white p-5 rounded-3xl mt-5"> + <div class="bg-white p-5 rounded-3xl mt-5 "> <!-- Kuu kaupa v-for --> <div v-for="(newObject, name, index) in sortedNews" class=""> <div class="grid grid-cols-9 gap-4"> <!-- Kuu ja aasta --> - <div class="col-span-1 pt-8"> + <div class="col-span-1 pt-8 mb-4 border-r-2 border-[#b2a7b8]"> {{ this.returnMonth(this.format(newObject[0].created).month) }} {{ this.format(newObject[0].created).year }} </div> diff --git a/tailwind.config.js b/tailwind.config.js index f6309f765fcf99f9b1fb16eab521e435ffbe2651..719a765c53ec5bb25dcaf337779a798dedb66fd7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,6 +5,10 @@ module.exports = { "./src/**/*.{vue,js,ts,jsx,tsx}", './node_modules/tw-elements/dist/js/**/*.js', ], + experimental: { + optimizeUniversalDefaults:true + + }, theme: { extend: {}, },