From 24a1276005ecaac2d95bd0ca20ad5eddd353c778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A1=D0=B5=D0=BC=D0=B5=D0=BD=D0=BE=D0=B2=D0=B0=20=D0=9C?=
 =?UTF-8?q?=D0=B0=D1=80=D0=B8=D1=8F?= <semenovamasha98@mail.ru>
Date: Fri, 24 May 2019 00:14:46 +0400
Subject: [PATCH] #127 autocomplete

---
 .../paper/controller/PaperController.java     |   6 +
 .../ulstu/paper/model/AutoCompleteData.java   |  42 ++++++
 .../paper/repository/ReferenceRepository.java |  15 ++
 .../ru/ulstu/paper/service/PaperService.java  |  10 ++
 src/main/resources/public/css/paper.css       |   7 +
 .../resources/templates/papers/paper.html     | 139 ++++++++++++------
 6 files changed, 172 insertions(+), 47 deletions(-)
 create mode 100644 src/main/java/ru/ulstu/paper/model/AutoCompleteData.java

diff --git a/src/main/java/ru/ulstu/paper/controller/PaperController.java b/src/main/java/ru/ulstu/paper/controller/PaperController.java
index e10135f..29da57d 100644
--- a/src/main/java/ru/ulstu/paper/controller/PaperController.java
+++ b/src/main/java/ru/ulstu/paper/controller/PaperController.java
@@ -13,6 +13,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import ru.ulstu.conference.service.ConferenceService;
 import ru.ulstu.deadline.model.Deadline;
+import ru.ulstu.paper.model.AutoCompleteData;
 import ru.ulstu.paper.model.Paper;
 import ru.ulstu.paper.model.PaperDto;
 import ru.ulstu.paper.model.PaperListDto;
@@ -162,6 +163,11 @@ public class PaperController {
         return new ResponseEntity<>(paperService.getFormattedReferences(paperDto), new HttpHeaders(), HttpStatus.OK);
     }
 
+    @ModelAttribute("autocompleteData")
+    public AutoCompleteData getAutocompleteData() {
+        return paperService.getAutoCompleteData();
+    }
+
     private void filterEmptyDeadlines(PaperDto paperDto) {
         paperDto.setDeadlines(paperDto.getDeadlines().stream()
                 .filter(dto -> dto.getDate() != null || !isEmpty(dto.getDescription()))
diff --git a/src/main/java/ru/ulstu/paper/model/AutoCompleteData.java b/src/main/java/ru/ulstu/paper/model/AutoCompleteData.java
new file mode 100644
index 0000000..b70a780
--- /dev/null
+++ b/src/main/java/ru/ulstu/paper/model/AutoCompleteData.java
@@ -0,0 +1,42 @@
+package ru.ulstu.paper.model;
+
+import java.util.ArrayList;
+
+public class AutoCompleteData {
+    ArrayList<String> authors = new ArrayList<>();
+    ArrayList<String> publicationTitles = new ArrayList<>();
+    ArrayList<String> publishers = new ArrayList<>();
+    ArrayList<String> journalOrCollectionTitles = new ArrayList<>();
+
+    public ArrayList<String> getAuthors() {
+        return authors;
+    }
+
+    public void setAuthors(ArrayList<String> authors) {
+        this.authors = authors;
+    }
+
+    public ArrayList<String> getPublicationTitles() {
+        return publicationTitles;
+    }
+
+    public void setPublicationTitles(ArrayList<String> publicationTitles) {
+        this.publicationTitles = publicationTitles;
+    }
+
+    public ArrayList<String> getPublishers() {
+        return publishers;
+    }
+
+    public void setPublishers(ArrayList<String> publishers) {
+        this.publishers = publishers;
+    }
+
+    public ArrayList<String> getJournalOrCollectionTitles() {
+        return journalOrCollectionTitles;
+    }
+
+    public void setJournalOrCollectionTitles(ArrayList<String> journalOrCollectionTitles) {
+        this.journalOrCollectionTitles = journalOrCollectionTitles;
+    }
+}
diff --git a/src/main/java/ru/ulstu/paper/repository/ReferenceRepository.java b/src/main/java/ru/ulstu/paper/repository/ReferenceRepository.java
index 68e97d4..1d4321b 100644
--- a/src/main/java/ru/ulstu/paper/repository/ReferenceRepository.java
+++ b/src/main/java/ru/ulstu/paper/repository/ReferenceRepository.java
@@ -1,8 +1,23 @@
 package ru.ulstu.paper.repository;
 
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
 import ru.ulstu.paper.model.Reference;
 
+import java.util.ArrayList;
+
 public interface ReferenceRepository extends JpaRepository<Reference, Integer> {
     void deleteById(Integer id);
+
+    @Query("SELECT DISTINCT r.authors FROM Reference r")
+    ArrayList<String> findDistinctAuthors();
+
+    @Query("SELECT DISTINCT r.publicationTitle FROM Reference r")
+    ArrayList<String> findDistinctPublicationTitles();
+
+    @Query("SELECT DISTINCT r.publisher FROM Reference r")
+    ArrayList<String> findDistinctPublishers();
+
+    @Query("SELECT DISTINCT r.journalOrCollectionTitle FROM Reference r where r.journalOrCollectionTitle <> ''")
+    ArrayList<String> findDistinctJournalOrCollectionTitles();
 }
diff --git a/src/main/java/ru/ulstu/paper/service/PaperService.java b/src/main/java/ru/ulstu/paper/service/PaperService.java
index 8a59486..f452c2f 100644
--- a/src/main/java/ru/ulstu/paper/service/PaperService.java
+++ b/src/main/java/ru/ulstu/paper/service/PaperService.java
@@ -7,6 +7,7 @@ import ru.ulstu.deadline.model.Deadline;
 import ru.ulstu.deadline.service.DeadlineService;
 import ru.ulstu.file.model.FileDataDto;
 import ru.ulstu.file.service.FileService;
+import ru.ulstu.paper.model.AutoCompleteData;
 import ru.ulstu.paper.model.Paper;
 import ru.ulstu.paper.model.PaperDto;
 import ru.ulstu.paper.model.PaperListDto;
@@ -378,4 +379,13 @@ public class PaperService {
     public List<Paper> findAllCompletedByType(Paper.PaperType type) {
         return paperRepository.findByTypeAndStatus(type, Paper.PaperStatus.COMPLETED);
     }
+
+    public AutoCompleteData getAutoCompleteData() {
+        AutoCompleteData autoCompleteData = new AutoCompleteData();
+        autoCompleteData.setAuthors(referenceRepository.findDistinctAuthors());
+        autoCompleteData.setJournalOrCollectionTitles(referenceRepository.findDistinctJournalOrCollectionTitles());
+        autoCompleteData.setPublicationTitles(referenceRepository.findDistinctPublicationTitles());
+        autoCompleteData.setPublishers(referenceRepository.findDistinctPublishers());
+        return autoCompleteData;
+    }
 }
diff --git a/src/main/resources/public/css/paper.css b/src/main/resources/public/css/paper.css
index 386c5af..b4b3f85 100644
--- a/src/main/resources/public/css/paper.css
+++ b/src/main/resources/public/css/paper.css
@@ -30,4 +30,11 @@
 
 #nav-references #formattedReferencesArea {
     height: 150px;
+}
+
+.ui-autocomplete {
+    max-height: 200px;
+    max-width: 400px;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/papers/paper.html b/src/main/resources/templates/papers/paper.html
index e80fe85..2755aba 100644
--- a/src/main/resources/templates/papers/paper.html
+++ b/src/main/resources/templates/papers/paper.html
@@ -4,6 +4,10 @@
       layout:decorator="default" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
 <head>
     <link rel="stylesheet" href="../css/paper.css"/>
+
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
+    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
 </head>
 <body>
 
@@ -74,54 +78,56 @@
                                                       th:field="*{comment}"></textarea>
                                         </div>
 
-                                <div class="form-group">
-                                    <label for="title">Ссылка на сайт конференции:</label>
-                                    <input class="form-control" id="url" type="text"
-                                           placeholder="Url"
-                                           th:field="*{url}"/>
-                                </div>
+                                        <div class="form-group">
+                                            <label for="title">Ссылка на сайт конференции:</label>
+                                            <input class="form-control" id="url" type="text"
+                                                   placeholder="Url"
+                                                   th:field="*{url}"/>
+                                        </div>
 
-                                <div class="form-group">
-                                    <label>Дедлайны:</label>
-                                    <div class="row" th:each="deadline, rowStat : *{deadlines}">
-                                        <input type="hidden" th:field="*{deadlines[__${rowStat.index}__].id}"/>
-                                        <div class="col-6">
-                                            <input type="date" class="form-control" name="deadline"
-                                                   th:field="*{deadlines[__${rowStat.index}__].date}"/>
-                                        </div>
-                                        <div class="col-4">
-                                            <input class="form-control" type="text" placeholder="Описание"
-                                                   th:field="*{deadlines[__${rowStat.index}__].description}"/>
-                                        </div>
-                                        <div class="col-2">
-                                            <a class="btn btn-danger float-right"
-                                               th:onclick="|$('#deadlines${rowStat.index}\\.description').val('');
+                                        <div class="form-group">
+                                            <label>Дедлайны:</label>
+                                            <div class="row" th:each="deadline, rowStat : *{deadlines}">
+                                                <input type="hidden" th:field="*{deadlines[__${rowStat.index}__].id}"/>
+                                                <div class="col-6">
+                                                    <input type="date" class="form-control" name="deadline"
+                                                           th:field="*{deadlines[__${rowStat.index}__].date}"/>
+                                                </div>
+                                                <div class="col-4">
+                                                    <input class="form-control" type="text" placeholder="Описание"
+                                                           th:field="*{deadlines[__${rowStat.index}__].description}"/>
+                                                </div>
+                                                <div class="col-2">
+                                                    <a class="btn btn-danger float-right"
+                                                       th:onclick="|$('#deadlines${rowStat.index}\\.description').val('');
                                                 $('#deadlines${rowStat.index}\\.date').val('');
                                                 $('#addDeadline').click();|"><span
-                                                    aria-hidden="true"><i class="fa fa-times"/></span>
-                                            </a>
+                                                            aria-hidden="true"><i class="fa fa-times"/></span>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                            <p th:if="${#fields.hasErrors('deadlines')}" th:errors="*{deadlines}"
+                                               class="alert alert-danger">Incorrect title</p>
                                         </div>
-                                    </div>
-                                    <p th:if="${#fields.hasErrors('deadlines')}" th:errors="*{deadlines}"
-                                       class="alert alert-danger">Incorrect title</p>
-                                </div>
-                                <div class="form-group">
-                                    <input type="submit" id="addDeadline" name="addDeadline" class="btn btn-primary"
-                                           value="Добавить
+                                        <div class="form-group">
+                                            <input type="submit" id="addDeadline" name="addDeadline"
+                                                   class="btn btn-primary"
+                                                   value="Добавить
                                     дедлайн"/>
-                                </div>
-                                <div class="form-group">
-                                    <label>Авторы:</label>
-                                    <select class="selectpicker form-control" multiple="true" data-live-search="true"
-                                            title="-- Выберите авторов --"
-                                            th:field="*{authorIds}">
-                                        <option th:each="author: ${allAuthors}" th:value="${author.id}"
-                                                th:text="${author.lastName}">Status
-                                        </option>
-                                    </select>
-                                    <p th:if="${#fields.hasErrors('authorIds')}" th:errors="*{authorIds}"
-                                       class="alert alert-danger">Incorrect title</p>
-                                </div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label>Авторы:</label>
+                                            <select class="selectpicker form-control" multiple="true"
+                                                    data-live-search="true"
+                                                    title="-- Выберите авторов --"
+                                                    th:field="*{authorIds}">
+                                                <option th:each="author: ${allAuthors}" th:value="${author.id}"
+                                                        th:text="${author.lastName}">Status
+                                                </option>
+                                            </select>
+                                            <p th:if="${#fields.hasErrors('authorIds')}" th:errors="*{authorIds}"
+                                               class="alert alert-danger">Incorrect title</p>
+                                        </div>
 
                                         <div class="form-group files-list" id="files-list">
                                             <label>Файлы:</label>
@@ -215,14 +221,14 @@
                                                         <div class="form-group col-12">
                                                             <label class="col-4">Авторы:</label>
                                                             <input type="text"
-                                                                   class="form-control col-7"
+                                                                   class="form-control col-7 autocomplete author"
                                                                    name="authors"
                                                                    th:field="*{references[__${rowStat.index}__].authors}"/>
                                                         </div>
                                                         <div class="form-group col-12">
                                                             <label class="col-4 ">Название публикации:</label>
                                                             <input type="text"
-                                                                   class="form-control col-7"
+                                                                   class="form-control col-7  autocomplete publicationTitle"
                                                                    name="publicationTitle"
                                                                    th:field="*{references[__${rowStat.index}__].publicationTitle}"/>
                                                         </div>
@@ -235,7 +241,7 @@
                                                         <div class="form-group col-12">
                                                             <label class="col-4">Издательство:</label>
                                                             <input type="text"
-                                                                   class="form-control col-7"
+                                                                   class="form-control col-7 autocomplete publisher"
                                                                    name="publisher"
                                                                    th:field="*{references[__${rowStat.index}__].publisher}"/>
                                                         </div>
@@ -248,7 +254,7 @@
                                                             <label class="col-4">Название журнала или сборника статей
                                                                 конференции:</label>
                                                             <input type="text"
-                                                                   class="form-control col-7"
+                                                                   class="form-control col-7  autocomplete journalOrCollectionTitle"
                                                                    name="journalOrCollectionTitle"
                                                                    th:field="*{references[__${rowStat.index}__].journalOrCollectionTitle}"/>
                                                         </div>
@@ -519,6 +525,45 @@
                 }
             }
         }
+
+    </script>
+    <script th:inline="javascript">
+        /*<![CDATA[*/
+
+        var autoCompleteData = /*[[${autocompleteData}]]*/ 'default';
+        console.log(autoCompleteData);
+
+
+        $(".autocomplete.author").autocomplete({
+            source: autoCompleteData.authors,
+            minLength: 0,
+        }).focus(function () {
+            $(this).autocomplete("search");
+        });
+
+        $(".autocomplete.publicationTitle").autocomplete({
+            source: autoCompleteData.publicationTitles,
+            minLength: 0,
+        }).focus(function () {
+            $(this).autocomplete("search");
+        });
+
+        $(".autocomplete.publisher").autocomplete({
+            source: autoCompleteData.publishers,
+            minLength: 0,
+        }).focus(function () {
+            $(this).autocomplete("search");
+        });
+
+        $(".autocomplete.journalOrCollectionTitle").autocomplete({
+            source: autoCompleteData.journalOrCollectionTitles,
+            minLength: 0,
+        }).focus(function () {
+            $(this).autocomplete("search");
+        });
+
+
+        /*]]>*/
     </script>
 </div>