-
{{ userProfile.name }} 님의 회원정보입니다.
-
-
이름 : {{ userProfile.name }}
-
-
이메일 : {{ userProfile.email }}
-
-
기관 : {{ userProfile.inst }}
-
+
+
+
{{ userProfile.name }}{{'userpage.ThisisAccountInfo'|translate}}
+
+
{{'userpage.name:'|translate}}{{ userProfile.name }}
+
+
{{'userpage.email:'|translate}}{{ userProfile.email }}
+
+
{{'userpage.institution:'|translate}}{{ userProfile.inst }}
+
+
diff --git a/src/app/features/userpage/components/member-info/member-info.component.less b/src/app/features/userpage/components/member-info/member-info.component.less
index d3c02718..33588e8e 100644
--- a/src/app/features/userpage/components/member-info/member-info.component.less
+++ b/src/app/features/userpage/components/member-info/member-info.component.less
@@ -4,4 +4,12 @@
p {
font-size: 1.25rem;
-}
\ No newline at end of file
+}
+
+.outline {
+ border : 1px solid #606060;
+ border-radius: 20px;
+ width : 100%;
+ padding : 37px 10%;
+ margin-top : 10px;
+}
diff --git a/src/app/features/userpage/components/member-info/member-info.component.ts b/src/app/features/userpage/components/member-info/member-info.component.ts
index 6f8a5c0c..c49624e8 100644
--- a/src/app/features/userpage/components/member-info/member-info.component.ts
+++ b/src/app/features/userpage/components/member-info/member-info.component.ts
@@ -16,7 +16,6 @@ export class MemberInfoComponent implements OnInit {
) {
this.authenticationService.getCurrentUserChange().subscribe((currentUser) => {
this.userProfile = currentUser;
- console.log(this.userProfile);
});
}
@@ -32,4 +31,4 @@ export class MemberInfoComponent implements OnInit {
this._userProfile = value;
}
-}
\ No newline at end of file
+}
diff --git a/src/app/features/userpage/components/my-analysis/modal/modal.service.ts b/src/app/features/userpage/components/my-analysis/modal/modal.service.ts
new file mode 100644
index 00000000..fd80a59b
--- /dev/null
+++ b/src/app/features/userpage/components/my-analysis/modal/modal.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ModalService {
+ private modals: any[] = [];
+
+ add(modal: any) {
+ // add modal to array of active modals
+ this.modals.push(modal);
+ }
+
+ remove(id: string) {
+ // remove modal from array of active modals
+ this.modals = this.modals.filter(x => x.id !== id);
+ }
+
+ open(id: string) {
+ // open modal specified by id
+ const modal = this.modals.find(x => x.id === id);
+ modal.open();
+ }
+
+ close(id: string) {
+ // close modal specified by id
+ const modal = this.modals.find(x => x.id === id);
+ modal.close();
+ }
+}
\ No newline at end of file
diff --git a/src/app/features/userpage/components/my-analysis/modal/showDetail.component.less b/src/app/features/userpage/components/my-analysis/modal/showDetail.component.less
new file mode 100644
index 00000000..34c5ac9c
--- /dev/null
+++ b/src/app/features/userpage/components/my-analysis/modal/showDetail.component.less
@@ -0,0 +1,93 @@
+jw-modal {
+ display: none;
+
+ .jw-modal {
+ /* modal container fixed across whole screen */
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ /* z-index must be higher than .jw-modal-background */
+ z-index: 1000;
+
+ /* enables scrolling for tall modals */
+ overflow: auto;
+
+ .jw-modal-body {
+ padding: 20px;
+ background: #fff;
+ //max-height : 90%;
+
+ /* margin exposes part of the modal background */
+ //margin: 300px;
+ margin: auto;
+ width: 70%;
+ min-width: 350px;
+
+ }
+ }
+
+ .jw-modal-background {
+ /* modal background fixed across whole screen */
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ /* semi-transparent black */
+ background-color: #000;
+ opacity: 0.75;
+
+ /* z-index must be below .jw-modal and above everything else */
+ z-index: 900;
+ }
+}
+
+body.jw-modal-open {
+ /* body overflow is hidden to hide main scrollbar when modal window is open */
+ overflow: hidden;
+}
+
+table {
+ width:100%;
+ border-collapse: separate;
+ text-align : center;
+ border-spacing: 1px;
+ line-height: 1.5;
+
+ }
+
+ th {
+ // width: 100%;
+ padding : 15px 0px;
+ font-weight: 500;
+ color: #fff;
+ background: lightskyblue ;
+ }
+
+ td {
+ // width: 100%;
+ border-bottom : 1px solid lightgray;
+ height : 40px;
+ vertical-align: middle;
+ }
+
+ .savedDocTable{
+ overflow-x:hidden;
+ overflow:auto;
+ height: 500px;
+ margin: 1.5rem 0rem;
+ }
+
+
+ .tablebtn{
+ font-size: 1.2rem;
+ }
+
+ .result-pretable{
+ height: 200px;
+ overflow:auto;
+}
diff --git a/src/app/features/userpage/components/my-analysis/modal/showDetail.component.ts b/src/app/features/userpage/components/my-analysis/modal/showDetail.component.ts
new file mode 100644
index 00000000..cd45deee
--- /dev/null
+++ b/src/app/features/userpage/components/my-analysis/modal/showDetail.component.ts
@@ -0,0 +1,60 @@
+import { Component, ViewEncapsulation, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+import { ModalService } from './modal.service';
+
+@Component({
+ selector: 'jw-modal',
+ template: `
+
+
+ `,
+ styleUrls: ['./showDetail.component.less'],
+ encapsulation: ViewEncapsulation.None
+})
+export class ModalComponent implements OnInit, OnDestroy {
+ @Input() id: string;
+
+ private element: any;
+
+ constructor(
+ private modalService: ModalService,
+ private el: ElementRef
+ ) {
+ this.element = el.nativeElement;
+ }
+
+ ngOnInit(): void {
+ if (!this.id) {
+ console.error('modal must have an id');
+ return;
+ }
+
+ document.body.appendChild(this.element);
+
+ this.element.addEventListener('click', el => {
+ if (el.target.className === 'jw-modal') {
+ this.close();
+ }
+ });
+
+ this.modalService.add(this);
+ }
+
+ ngOnDestroy(): void {
+ this.modalService.remove(this.id);
+ this.element.remove();
+ }
+
+ open(): void {
+ this.element.style.display = 'block';
+ document.body.classList.add('jw-modal-open');
+ }
+
+ close(): void {
+ this.element.style.display = 'none';
+ document.body.classList.remove('jw-modal-open');
+ }
+}
\ No newline at end of file
diff --git a/src/app/features/userpage/components/my-analysis/my-analysis.component.html b/src/app/features/userpage/components/my-analysis/my-analysis.component.html
index cf873b4c..247410e2 100644
--- a/src/app/features/userpage/components/my-analysis/my-analysis.component.html
+++ b/src/app/features/userpage/components/my-analysis/my-analysis.component.html
@@ -1 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/features/userpage/components/my-analysis/my-analysis.component.less b/src/app/features/userpage/components/my-analysis/my-analysis.component.less
index 7e6900a9..1b976ad5 100644
--- a/src/app/features/userpage/components/my-analysis/my-analysis.component.less
+++ b/src/app/features/userpage/components/my-analysis/my-analysis.component.less
@@ -1,83 +1,215 @@
-*:focus {
- outline: none;
+* {
+ font-size: 1.5rem;
}
-.bundle {
- border : 1px solid #c2c2c2;
- border-radius: 50px;
- height : 480px;
- width : 900px;
- padding-left : 70px;
- padding-top : 30px;
+ul,
+li {
+ margin : 0;
+ padding: 0;
+}
+
+ul>li {
+ display : flex;
+ align-items: baseline;
}
.upside {
- display : flex;
- flex-direction: row;
+ display : flex;
+ justify-content: space-between;
+ align-items : center;
}
-.upside2 {
- margin-right: 490px;
+.upside3{
+ display: flex;
}
-.upside3>button {
- margin-right : 10px;
- background-color: rgb(97, 97, 97);
- color : white;
- border : none;
- border-radius : 40px;
- width : 100px;
- height : 35px;
+.upside2>button {
+margin-right : 10px;
+background-color: #0FBAFF;
+color : white;
+border : none;
+border-radius : 2rem;
+width : 5em;
+height : 2em;
}
-.where {
- display : flex;
- flex-direction: row;
- padding-left : 40px;
+.upside3>button {
+ margin-right : 10px;
+ background-color: rgb(97, 97, 97);
+ color : white;
+ border : none;
+ border-radius : 2rem;
+ width : 5em;
+ height : 2em;
}
-.folder-menu {
- margin-left: 490px;
-}
-
-.button1 {
- margin-right : 10px;
- background-color : #0FBAFF;
- color : white;
- border : none;
- border-radius : 40px;
- width : 110px;
- height : 35px;
- background-image : url('/assets/icons/36_새폴더생성_흰.png');
- background-repeat : no-repeat;
- background-position: 12% 40%;
- background-size : 20px;
- padding : 0px 0px 0px 20px;
-}
-
-.button2 {
- margin-right : 10px;
- background-color : #0FBAFF;
- color : white;
- border : none;
- border-radius : 40px;
- width : 110px;
- height : 35px;
- background-image : url('/assets/icons/37_폴더편집_흰.png');
- background-repeat : no-repeat;
- background-position: 12% 40%;
- background-size : 20px;
- padding : 0px 0px 0px 20px;
+input[type="checkbox"] {
+ margin-right: 10px;
}
.folders {
- margin-left: 60px;
+ margin-left: 60px;
}
.folders>a {
- margin-right: 30px;
+ margin-right: 30px;
+}
+
+.page-numbers {
+ display : flex;
+ align-items : center;
+ justify-content: center;
+}
+
+.page-numbers>button {
+ font-size: 1.2rem;
+}
+
+
+.outline {
+border : 1px solid #606060;
+border-radius: 20px;
+width : 100%;
+padding : 40px 10%;
+}
+
+.keyword-group{
+display : flex;
+align-items : center;
+white-space : nowrap;
+overflow-x : scroll;
+width : 100%; //1024
+//margin-left : 7vw;//1024
+border : 1px solid #606060;
+border-radius: 20px;
+padding-top : 15px;
+padding-left : 10px;
+padding-bottom: 20px;
+margin-top : 10.5px;
+margin-bottom : 20px;
+}
+
+/* .keyword-group>div>button:focus{
+color : black;
+} */
+
+.scroll{
+border : none;
+font-size : 17px;
+margin-left : 2px;
+margin-right: 9px;
+list-style-type: none;
+border-bottom: 2px solid transparent;
+border-radius: 20px !important;
+}
+
+.folder-menu {
+display: flex;
+justify-content: flex-end;
+}
+
+.folder{
+background-image: url("../../../../../assets/icons/folder-add-new.png");
+margin-right: 10px;
+background-color: #52b9ff;
+color: white;
+border: none;
+border-radius: 40px;
+width: 7.5em;
+height: 2em;
+background-repeat: no-repeat;
+background-position: left 0.9em center;
+background-size: 1.2em;
+padding: 0px 0px 0px 1.5em;
+font-size: 1.5rem;
}
-.checkbox {
- margin-right: 10px;
-}
\ No newline at end of file
+.thumbnail{
+display: grid;
+grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+//grid-template-columns: repeat(2, 1fr);
+grid-gap: 10px;
+grid-auto-rows: minmax(340px, auto);
+//height : minmax(auto, 800px);
+max-height : 700px;
+overflow-y : auto;
+}
+
+.thumbnail>div>button{
+border-radius: 10px;
+width: 300px;
+height: 300px;
+justify-content: space-between;
+}
+
+.thumbnail>div>button:hover{
+border-color: #52b9ff;
+border-width: 3px;
+}
+
+.thumbnail>div>button>img{
+width: 91.68%;
+height: 63.286%;
+padding-top: 4.665%;
+}
+
+.thumbnail>div>button>div{
+/* text-align: left;
+width: 100%;
+height: 40%;
+font-size : 15px; */
+font-family: Noto Sans KR;
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: 20px;
+letter-spacing: 0em;
+text-align: left;
+width: 100%;
+height: 40%;
+padding-left: 8%;
+padding-bottom : 4.665%;
+padding-top : 2%;
+}
+.thumbnail>div>button>div>span{
+/* text-align: left;
+ width: 100%;
+ height: 40%;
+ font-size : 15px; */
+ font-family: Noto Sans KR;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0em;
+ text-align: left;
+ width: 100%;
+ height: 40%;
+}
+
+.docList{
+border : 1px solid #606060;
+border-radius: 50px;
+width : 100%;
+text-align: center;
+}
+
+.tooltip{
+ width: 2.0rem;
+ padding-left: 3px;
+}
+
+@media all and (max-width: 768px){
+.upside3>button{
+ font-size : 13px;
+}
+
+* {
+ font-size: 1.4rem;
+}
+
+.upside2>label{
+ padding-top : 18px;
+ margin-bottom: 0;
+}
+}
diff --git a/src/app/features/userpage/components/my-analysis/my-analysis.component.ts b/src/app/features/userpage/components/my-analysis/my-analysis.component.ts
index 85d3302b..eda605ce 100644
--- a/src/app/features/userpage/components/my-analysis/my-analysis.component.ts
+++ b/src/app/features/userpage/components/my-analysis/my-analysis.component.ts
@@ -1,17 +1,406 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Inject } from '@angular/core';
+import { UserProfile } from 'src/app/core/models/user.model';
+import { AnalysisOnMiddlewareService } from "src/app/core/services/analysis-on-middleware-service/analysis.on.middleware.service";
+import { AuthenticationService } from 'src/app/core/services/authentication-service/authentication.service';
+import { UserSavedDocumentService } from 'src/app/core/services/user-saved-document-service/user-saved-document.service';
+import { FormArray, FormBuilder, FormControl, FormGroup } from "@angular/forms";
+import { AnalysisComponent } from 'src/app/features/article-analysis/components/analysis/analysis.component'
+import { ModalService } from './modal/modal.service';
+import * as d3 from 'd3';
+import { CSVDownloadService } from 'src/app/core/services/csv-download-service/csv-download.service';
+import { Router } from "@angular/router";
@Component({
selector: 'app-my-analysis',
templateUrl: './my-analysis.component.html',
- styleUrls: ['./my-analysis.component.less']
+ styleUrls: ['./my-analysis.component.less',],
})
-export class MyAnalysisComponent implements OnInit {
- constructor(
+export class MyAnalysisComponent extends AnalysisComponent implements OnInit {
- ) { }
+ private _userProfile :UserProfile
+ private _charts : any;
+ private _savedKeywords : Array<{ keyword: string, savedDate: string; }>;
+ private _isSavedKeywordsEmpty : boolean;
+ private _isSavedKeywordsLoaded : boolean;
+ private _isSavedChartsEmpty : boolean;
+ private _isSavedChartsLoaded : boolean;
+ private _keyword : string;
+ private _savedDate : string;
+
+ private _chartData : any;
+ private _isDownloadable : boolean;
+ private _form : FormGroup;
+
+ private _activity : string;
+
+ constructor(
+ _middlewareService : AnalysisOnMiddlewareService,
+ _userSavedDocumentService : UserSavedDocumentService,
+ _router: Router,
+ private authService : AuthenticationService,
+ private formBuilder : FormBuilder,
+ private modalService : ModalService,
+ private csvDownloadService : CSVDownloadService
+ ){
+ super(_middlewareService, _userSavedDocumentService, _router); //Analysis Component로부터 상속
+ this.userProfile = this.authService.getCurrentUser();
+ this.form = this.formBuilder.group({
+ checkArray : this.formBuilder.array([])
+ });
+ }
ngOnInit(): void {
+ this.loadSavedKeywords();
+ }
+
+ async loadSavedKeywords() : Promise
{
+ this.isSavedKeywordsEmpty = true;
+ this.isSavedKeywordsLoaded = false;
+ this.savedKeywords = await this.userSavedDocumentService.getMyKeywords();
+ if(this.savedKeywords.length === 0){
+ this.isSavedKeywordsEmpty = true;
+ }else{
+ this.isSavedKeywordsEmpty = false;
+ this.isSavedKeywordsLoaded = true;
+ console.log(this.savedKeywords);
+ }
+ this.getCharts(this.savedKeywords[0].keyword, this.savedKeywords[0].savedDate);
+ this.keyword = this.savedKeywords[0].keyword;
+ console.log(this.keyword);
+ }
+
+ currentKeywordAndDate(selectedKeyword: string, savedDate: string){
+ this.keyword = selectedKeyword;
+ this.savedDate = savedDate;
+ this.getCharts(this.keyword, this.savedDate);
+ }
+
+ /**
+ * @description Load saved charts from myAnalysis
+ */
+ async getCharts(selectedKeyword : string, savedDate : string) : Promise {
+ this.isSavedChartsEmpty = true;
+ this.isSavedChartsLoaded = false;
+ let data = JSON.stringify({
+ 'userEmail': this.userProfile.email,
+ 'keyword' : selectedKeyword,
+ 'savedDate' : savedDate
+ });
+ this.charts = await this.middlewareService.postDataToFEDB('/textMining/getCharts',data);
+
+ if(this.charts.length === 0){
+ this.isSavedChartsEmpty = true;
+ }else{
+ this.isSavedChartsEmpty = false;
+ this.isSavedChartsLoaded = true;
+ }
+
+ //checkbox 초기화
+ for(let i in this.charts){
+ this.charts[i]["isSelected"] = false;
+ }
+ }
+
+ /**
+ * @description Load a saved chart data from DB
+ */
+ async getChartData(chart: any) : Promise{
+ let parsedDate = this.parsingDate(chart.analysisDate);
+ let data = JSON.stringify({
+ 'userEmail': chart.userEmail,
+ 'keyword': chart.keyword,
+ 'activity': chart.activity,
+ 'analysisDate' : parsedDate
+ });
+
+ let chartData = await this.middlewareService.postDataToFEDB('/textMining/getChartData', data);
+ return chartData;
+ }
+
+ parsingDate(analysisDate: string){
+ let date = new Date(analysisDate);
+ let year = date.getFullYear();
+ let result : string = year+"-";
+
+ let month = date.getMonth()+1;
+ if(month>9){
+ result += month + "-";
+ }else{
+ result += "0" + month + "-";
+ }
+
+ let dt = date.getDate();
+ if(dt>9){
+ result += dt + " ";
+ }else{
+ result += "0" + dt + " ";
+ }
+
+ let hor = date.getHours();
+ if(hor>9){
+ result += hor + ":";
+ }else{
+ result += "0" + hor + ":";
+ }
+
+ let min = date.getMinutes();
+ if(min>9){
+ result += min + ":";
+ }else{
+ result += "0" + min + ":";
+ }
+
+ let sec = date.getSeconds();
+ if(sec>9){
+ result += sec + ".";
+ }else{
+ result += "0" + sec + ".";
+ }
+
+ let ms = date.getUTCMilliseconds();
+ if(ms<10){
+ result += "00" + ms + "Z";
+ }else if(ms<100){
+ result += "0"+ ms + "Z";
+ }else{
+ result += ms + "Z";
+ }
+
+ return result;
+ }
+
+ //show detail
+ async openModal(chart: any){
+ this.clearResult();
+ this.activity = chart.activity;
+ this.chartData = await this.getChartData(chart);
+ if(!this.chartData){
+ alert("데이터 로딩 실패");
+ return;
+ }
+
+ this.modalService.open('result');
+
+ if(chart.activity == 'count'){
+ this.drawTable('count', this.chartData.result_graph);
+ this.drawBarChart(this.chartData.result_graph);
+ this.isDownloadable = true;
+ }
+ else if(chart.activity == 'tfidf'){
+ this.drawTable('tfidf', JSON.stringify(this.chartData.result_graph));
+ this.drawBarChart(JSON.stringify(this.chartData.result_graph));
+ this.isDownloadable = true;
+ }
+ else if(chart.activity == 'network'){
+ this.drawTable('network', JSON.stringify(this.chartData.resultCenJson));
+ this.drawNetworkChart(JSON.stringify(this.chartData.resultGraphJson));
+ this.isDownloadable = true;
+ }
+ else if(chart.activity == 'ngrams'){
+ this.drawNetworkChart(JSON.stringify(this.chartData.result));
+ this.isDownloadable = false;
+ }
+ else if(chart.activity == 'kmeans'){
+ this.drawTable('kmeans',JSON.stringify(this.chartData.resultPCAList));
+ this.drawScatterChart(JSON.stringify(this.chartData.resultPCAList));
+ this.isDownloadable = true;
+ }
+ else if(chart.activity == 'hcluster'){
+ this.drawTreeChart(JSON.stringify(this.chartData.result));
+ this.isDownloadable = false;
+ }
+ else if(chart.activity == 'word2vec'){
+ this.drawScatterWordChart(this.chartData.result_graph);
+ this.isDownloadable = true;
+ }
+ else if(chart.activity == 'topicLDA'){
+ this.drawTopicModeling(this.chartData.result_graph);
+ this.isDownloadable = false;
+ }
+ }
+
+ closeModal(id: string){
+ this.modalService.close(id);
+ }
+
+ clearResult(){
+ d3.selectAll('figure > *').remove();
+ }
+
+ async deleteSelectedCharts() : Promise{
+ let frmArray = this.form.get("checkArray") as FormArray;
+ if(frmArray.value.length == 0){
+ alert("삭제할 차트가 없습니다! 삭제할 차트를 선택해주세요.")
+ }else{
+ let deleteConfirm = confirm("총 " + frmArray.value.length + "개를 삭제하시겠습니까? ")
+ if(deleteConfirm){
+ for(let i in frmArray.value){
+ let data = JSON.stringify({
+ 'userEmail' : this.userProfile.email,
+ 'analysisDate': frmArray.value[i]
+ });
+ await this.middlewareService.postDataToFEDB('/textMining/deleteCharts',data);
+ }
+ frmArray.clear();
+ } else{
+ frmArray.clear();
+ }
+ //this.currentKeywordAndDate(this.keyword, this.savedDate);
+ this.getCharts(this.keyword, this.savedDate);
+ }
+ }
+
+ async deleteAllCharts() : Promise{
+ let checkArray: FormArray = this.form.get("checkArray") as FormArray;
+ this.checkUncheckAll(true,checkArray);
+ this.deleteSelectedCharts();
+ }
+
+ checkUncheckAll(isCheckAll: boolean, checkArray: FormArray): FormArray {
+ if(isCheckAll){
+ for(let i=0; i {
+ if (item.value == e.target.value) {
+ checkArray.removeAt(i);
+ return;
+ }
+ i++;
+ });
+ }
+ }
+ }
+
+ downloadCSV(){
+ let data : any;
+ if(this.activity == 'count'){
+ data = this.chartData.result_graph;
+ }
+ else if(this.activity == 'tfidf'){
+ data = this.chartData.result_graph;
+ }
+ else if(this.activity == 'network'){
+ data = this.chartData.resultGraphJson.nodes;
+ }
+ else if(this.activity == 'kmeans'){
+ data = this.chartData.resultPCAList;
+ }
+ else if(this.activity == 'word2vec'){
+ data = this.chartData.result_graph;
+ }
+
+ this.csvDownloadService.downloadCSV_analysis(data, this.activity);
}
+ public get charts() : any{
+ return this._charts;
+ }
+ public set charts(value : any){
+ this._charts = value;
+ }
+
+ public get chartData() : any{
+ return this._chartData;
+ }
+ public set chartData(value : any){
+ this._chartData = value;
+ }
+
+ public get userProfile(): UserProfile {
+ return this._userProfile;
+ }
+ public set userProfile(value: UserProfile) {
+ this._userProfile = value;
+ }
+
+ public get form(): FormGroup {
+ return this._form;
+ }
+ public set form(value: FormGroup) {
+ this._form = value;
+ }
+
+ public get savedKeywords() : Array<{ keyword: string, savedDate: string; }>{
+ return this._savedKeywords;
+ }
+ public set savedKeywords(value: Array<{ keyword: string, savedDate: string; }>){
+ this._savedKeywords = value;
+ }
+
+ public get isSavedKeywordsEmpty(): boolean {
+ return this._isSavedKeywordsEmpty;
+ }
+ public set isSavedKeywordsEmpty(value: boolean){
+ this._isSavedKeywordsEmpty = value;
+ }
+
+ public get isSavedKeywordsLoaded(): boolean {
+ return this._isSavedKeywordsLoaded;
+ }
+ public set isSavedKeywordsLoaded(value: boolean){
+ this._isSavedKeywordsLoaded = value;
+ }
+
+ public get isSavedChartsEmpty(): boolean {
+ return this._isSavedChartsEmpty;
+ }
+ public set isSavedChartsEmpty(value: boolean){
+ this._isSavedChartsEmpty = value;
+ }
+
+ public get isSavedChartsLoaded(): boolean {
+ return this._isSavedChartsLoaded;
+ }
+ public set isSavedChartsLoaded(value: boolean){
+ this._isSavedChartsLoaded = value;
+ }
+
+ public get isDownloadable(): boolean {
+ return this._isDownloadable;
+ }
+ public set isDownloadable(value: boolean){
+ this._isDownloadable = value;
+ }
+
+ public get keyword() : string {
+ return this._keyword;
+ }
+ public set keyword(value : string){
+ this._keyword = value;
+ }
+
+ public get savedDate() : string {
+ return this._savedDate;
+ }
+ public set savedDate(value: string) {
+ this._savedDate = value;
+ }
+
+ public get activity(): string {
+ return this._activity;
+ }
+ public set activity(value: string){
+ this._activity = value;
+ }
}
\ No newline at end of file
diff --git a/src/app/features/userpage/components/my-docs/my-docs.component.html b/src/app/features/userpage/components/my-docs/my-docs.component.html
index 2c7f5966..c836a26a 100644
--- a/src/app/features/userpage/components/my-docs/my-docs.component.html
+++ b/src/app/features/userpage/components/my-docs/my-docs.component.html
@@ -1,3 +1,26 @@
+
+
+
+
-
-
-
-
-
-
-
-
저장된 문서가 없습니다.
\ No newline at end of file
+
+
+
저장된 문서가 없습니다.
+
diff --git a/src/app/features/userpage/components/my-docs/my-docs.component.less b/src/app/features/userpage/components/my-docs/my-docs.component.less
index b5662f4b..2dcda23a 100644
--- a/src/app/features/userpage/components/my-docs/my-docs.component.less
+++ b/src/app/features/userpage/components/my-docs/my-docs.component.less
@@ -58,4 +58,74 @@ input[type="checkbox"] {
.no-saved-doc{
text-align: center;
width: 100%;
-}
\ No newline at end of file
+}
+
+.outline {
+ border : 1px solid #606060;
+ border-radius: 20px;
+ width : 100%;
+ padding : 40px 10%;
+}
+
+.keyword-group{
+ display : flex;
+ align-items : center;
+ white-space : nowrap;
+ overflow-x : scroll;
+ width : 100%; //1024
+ //margin-left : 7vw;//1024
+ border : 1px solid #606060;
+ border-radius: 20px;
+ padding-top : 15px;
+ padding-left : 10px;
+ padding-bottom: 20px;
+ margin-top : 10.5px;
+ margin-bottom : 20px;
+}
+
+.scroll{
+ border : none;
+ font-size : 17px;
+ margin-left : 2px;
+ margin-right: 9px;
+ list-style-type: none;
+ border-bottom: 2px solid transparent;
+ border-radius: 20px !important;
+}
+
+.folder-menu {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.folder{
+ background-image: url("../../../../../assets/icons/folder-add-new.png");
+ margin-right: 10px;
+ background-color: #52b9ff;
+ color: white;
+ border: none;
+ border-radius: 40px;
+ width: 7.5em;
+ height: 2em;
+ background-repeat: no-repeat;
+ background-position: left 0.9em center;
+ background-size: 1.2em;
+ padding: 0px 0px 0px 1.5em;
+ font-size: 1.5rem;
+ float : right;
+}
+
+@media all and (max-width: 768px){
+ .upside3>button{
+ font-size : 13px;
+ }
+
+ * {
+ font-size: 1.4rem;
+ }
+
+ .upside2>label{
+ padding-top : 18px;
+ margin-bottom: 0;
+ }
+}
diff --git a/src/app/features/userpage/components/my-docs/my-docs.component.ts b/src/app/features/userpage/components/my-docs/my-docs.component.ts
index 299d311f..09d53024 100644
--- a/src/app/features/userpage/components/my-docs/my-docs.component.ts
+++ b/src/app/features/userpage/components/my-docs/my-docs.component.ts
@@ -6,6 +6,7 @@ import { ArticleService } from "src/app/core/services/article-service/article.se
import { PaginationService } from "src/app/core/services/pagination-service/pagination.service";
import { UserSavedDocumentService } from 'src/app/core/services/user-saved-document-service/user-saved-document.service';
+
@Component({
selector: "app-my-docs",
templateUrl: "./my-docs.component.html",
@@ -17,12 +18,19 @@ export class MyDocsComponent implements OnInit {
private _pageInfo: PaginationModel;
private _pages: number[];
private _isSavedDocsLoaded = false;
- private _savedDocs: Array<{ title: string; id: string; }>;
+ private _savedDocs: Array<{ title: string; hashKey: string; }>;
private _paginationModel: PaginationModel;
private _totalSavedDocsNum: number;
private _form: FormGroup;
private _isSavedDocsEmpty: boolean;
+ //keywords
+ private _isSavedKeywordsLoaded = false;
+ private _isSavedKeywordsEmpty: boolean;
+ private _savedKeywords: Array<{ keyword: string, savedDate: string; }>;
+ private _keyword: string;
+ private _savedDate: string;
+
constructor(
private paginationService: PaginationService,
@@ -31,25 +39,30 @@ export class MyDocsComponent implements OnInit {
private router: Router,
private formBuilder: FormBuilder,
) {
+ this.savedDate = null;
+ this.savedKeywords = null;
this.setArticleForm();
}
ngOnInit(): void {
- this.loadSavedDocs(1);
+ this.loadSavedKeywords();
}
/**
* @description Load saved documents from userSavedDocumentService
- * @param pageNum
+ * @param pageNum
*/
async loadSavedDocs(pageNum: number): Promise {
this.isSavedDocsLoaded = false;
- this.totalSavedDocsNum = await this.userSavedDocumentService.getTotalDocNum();
+ this.totalSavedDocsNum = await this.userSavedDocumentService.getTotalDocNum(this.keyword, this.savedDate);
this.isSavedDocsEmpty = (this.totalSavedDocsNum === 0);
- if (this.isSavedDocsEmpty) return;
+ if (this.isSavedDocsEmpty) {
+ this.deleteAllMyDocs();
+ return;
+ }
pageNum = this.handlePageOverflow(pageNum);
this.currentPage = pageNum;
- this.savedDocs = await this.userSavedDocumentService.getMyDocs(pageNum);
+ this.savedDocs = await this.userSavedDocumentService.getMyDocs( this.savedDate, pageNum);
this.setCheckbox();
this.pageInfo = await this.paginationService.paginate(pageNum, this.totalSavedDocsNum, 10, 3);
this.pages = this.pageInfo.pages;
@@ -57,8 +70,8 @@ export class MyDocsComponent implements OnInit {
}
/**
- * @description Helper function for page number to handle the page overflow
- * @param pageNum
+ * @description Helper function for page number to handle the page overflow
+ * @param pageNum
*/
handlePageOverflow(pageNum: number): number {
if (pageNum < 0) pageNum = 1;
@@ -83,24 +96,27 @@ export class MyDocsComponent implements OnInit {
}
/**
- * @description
- * @param docId
+ * @description
+ * @param docHashKey
*/
- openDocDetail(docId: string): void {
- console.log(docId);
- this.articleService.setSelectedId(docId);
- this.navToDocDetail();
+ openDocDetail(docHashKey: string, docTitle: string): void {
+ if(docTitle === "(삭제된 문서 입니다.)"){
+ alert("선택하신 문서는 존재하지 않습니다.")
+ }else{
+ this.articleService.setSelectedHashKey(docHashKey);
+ this.navToDocDetail();
+ }
}
/**
- * @description Navigate to doc detail
+ * @description Navigate to doc detail
*/
navToDocDetail(): void {
this.router.navigateByUrl("search/read");
}
/**
- * @description Set the checkbox of saved docs
+ * @description Set the checkbox of saved docs
*/
setCheckbox(): void {
for (let i in this.savedDocs) {
@@ -115,14 +131,14 @@ export class MyDocsComponent implements OnInit {
}
/**
- * @description Check or uncheck all documents
- * @param isCheckAll
- * @param checkArray
+ * @description Check or uncheck all documents
+ * @param isCheckAll
+ * @param checkArray
*/
checkUncheckAll(isCheckAll: boolean, checkArray: FormArray): FormArray {
if (isCheckAll) {
for (let i = 0; i < this.savedDocs.length; i++) {
- checkArray.push(new FormControl(this.savedDocs[i]["id"]));
+ checkArray.push(new FormControl(this.savedDocs[i]["hashKey"]));
}
} else {
checkArray.clear();
@@ -136,8 +152,8 @@ export class MyDocsComponent implements OnInit {
}
/**
- * @description Change check box
- * @param e
+ * @description Change check box
+ * @param e
*/
onCheckboxChange(e): void {
let checkArray: FormArray = this.form.get("checkArray") as FormArray;
@@ -160,11 +176,11 @@ export class MyDocsComponent implements OnInit {
}
/**
- * @description delete all my documents
+ * @description delete all my documents
*/
deleteAllMyDocs() {
- this.userSavedDocumentService.eraseAllMyDocs().then(
- () => this.loadSavedDocs(1)
+ this.userSavedDocumentService.eraseAllMyDocs(this.savedDate).then(
+ () => this.loadSavedKeywords()
);
}
@@ -193,10 +209,10 @@ export class MyDocsComponent implements OnInit {
public set isSavedDocsLoaded(value) {
this._isSavedDocsLoaded = value;
}
- public get savedDocs(): Array<{ title: string; id: string; }> {
+ public get savedDocs(): Array<{ title: string; hashKey: string; }> {
return this._savedDocs;
}
- public set savedDocs(value: Array<{ title: string; id: string; }>) {
+ public set savedDocs(value: Array<{ title: string; hashKey: string; }>) {
this._savedDocs = value;
}
public get paginationModel(): PaginationModel {
@@ -223,4 +239,94 @@ export class MyDocsComponent implements OnInit {
public set isSavedDocsEmpty(value: boolean) {
this._isSavedDocsEmpty = value;
}
-}
\ No newline at end of file
+
+ //keyword
+ public get isSavedKeywordsLoaded() {
+ return this._isSavedKeywordsLoaded;
+ }
+ public set isSavedKeywordsLoaded(value) {
+ this._isSavedKeywordsLoaded = value;
+ }
+ public get isSavedKeywordsEmpty(): boolean {
+ return this._isSavedKeywordsEmpty;
+ }
+ public set isSavedKeywordsEmpty(value: boolean) {
+ this._isSavedKeywordsEmpty = value;
+ }
+ public get savedKeywords(): Array<{ keyword: string, savedDate: string; }> {
+ return this._savedKeywords;
+ }
+ public set savedKeywords(value: Array<{ keyword: string, savedDate: string; }>) {
+ this._savedKeywords = value;
+ }
+ public get keyword(): string {
+ return this._keyword;
+ }
+ public set keyword(value: string) {
+ this._keyword = value;
+ }
+ public get savedDate(): string {
+ return this._savedDate;
+ }
+ public set savedDate(value: string) {
+ this._savedDate = value;
+ }
+
+ parsingSavedDate(savedDate: string){
+ let date = new Date(savedDate);
+ let year = date.getFullYear();
+ let month = date.getMonth()+1;
+ let dt = date.getDate();
+ let hor = date.getHours();
+ let min = date.getMinutes();
+ let sec = date.getSeconds();
+
+ return year+"-"+month+"-"+dt+" "+hor+":"+min+":"+sec;
+ }
+
+ currentKeywordAndDate(keyword: string, savedDate: string){
+ this.keyword = keyword;
+ this.savedDate = savedDate;
+ this.loadSavedDocs(1);
+ }
+
+ async loadSavedKeywords(): Promise {
+ this.isSavedKeywordsEmpty = false;
+ this.isSavedKeywordsLoaded = false;
+ this.savedKeywords = await this.userSavedDocumentService.getMyKeywords();
+ this.isSavedKeywordsLoaded = true;
+ if(this.savedKeywords.length === 0){
+ this.isSavedKeywordsEmpty = true;
+ }
+
+ if(this.savedDate == null){
+ this.keyword = this.savedKeywords[0].keyword;
+ this.savedDate = this.savedKeywords[0].savedDate;
+ }
+
+ this.loadSavedDocs(1);
+ }
+
+ deleteSelectedDocs() {
+ if (this.form.value["checkArray"].length == 0) {
+ alert("삭제할 문서가 없습니다! 삭제할 문서를 선택해주세요.");
+ } else {
+ this.userSavedDocumentService.eraseSelectedMyDocs(this.form.value["checkArray"], this.savedDate).then(
+ () => this.loadSavedKeywords(),
+ );
+ }
+ this.form.value["checkArray"].clear;
+ }
+
+ openModal() {
+ let title = prompt("변경할 폴더 명을 입력 하세요.",this.keyword);
+
+ if(title != null){
+ this.userSavedDocumentService.changeFolderTitle(title, this.savedDate).then(
+ () => this.loadSavedKeywords(),
+ );
+ }else{
+ alert("변경할 폴더 명이 없습니다.");
+ }
+ }
+}
diff --git a/src/app/features/userpage/components/secession/secession.component.html b/src/app/features/userpage/components/secession/secession.component.html
index 8adbac29..b21651b3 100644
--- a/src/app/features/userpage/components/secession/secession.component.html
+++ b/src/app/features/userpage/components/secession/secession.component.html
@@ -1,8 +1,18 @@
-
-
탈퇴안내
-
-
탈퇴 후 회원정보 및 개인형 서비스 이용기록은 삭제됩니다.
-
정말 탈퇴하시겠습니까?
-
-
+
+
+
{{'userpage.guideForrmAccount'|translate}}
+
+
+
{{'userpage.rmAccountInfo'|translate}}
+ {{'userpage.rmAccountInfo-1'|translate}}
+ ॰ {{'userpage.rmAccountInfo-2'|translate}}
+ ॰ {{'userpage.rmAccountInfo-3'|translate}}
+ ॰ {{'userpage.rmAccountInfo-4'|translate}}
+ ॰ {{'userpage.rmAccountInfo-5'|translate}}
+ ॰ {{'userpage.rmAccountInfo-6'|translate}}
+
+
+
+
+
diff --git a/src/app/features/userpage/components/secession/secession.component.less b/src/app/features/userpage/components/secession/secession.component.less
index a13eac5d..b5425b61 100644
--- a/src/app/features/userpage/components/secession/secession.component.less
+++ b/src/app/features/userpage/components/secession/secession.component.less
@@ -7,12 +7,32 @@
}
.button {
+ margin-top : 40px;
margin-left : 325px;
- margin-bottom : 20px;
background-color: rgb(97, 97, 97);
color : white;
border : none;
border-radius : 40px;
width : 100px;
height : 35px;
-}
\ No newline at end of file
+}
+
+.btn-container{
+ display: flex;
+ justify-content: space-around;
+}
+
+@media all and (max-width: 768px){
+ .button {
+ margin : 0px;
+ float : right;
+ }
+}
+
+.outline {
+ border : 1px solid #606060;
+ border-radius: 20px;
+ width : 100%;
+ padding : 41px 10%;
+ margin-top : 10.5px;
+}
diff --git a/src/app/features/userpage/components/secession/secession.component.ts b/src/app/features/userpage/components/secession/secession.component.ts
index c790e5e4..8a54016a 100644
--- a/src/app/features/userpage/components/secession/secession.component.ts
+++ b/src/app/features/userpage/components/secession/secession.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import {AuthenticationService} from '../../../../core/services/authentication-service/authentication.service';
@Component({
selector: 'app-secession',
@@ -7,13 +8,25 @@ import { Component, OnInit } from '@angular/core';
})
export class SecessionComponent implements OnInit {
- constructor() { }
+ constructor(
+ private authService: AuthenticationService
+ ) { }
ngOnInit(): void {
}
- secession() {
-
+ async deleteUser() {
+ if(confirm("삭제된 데이터는 되돌려 드리지 않습니다.\n정말 탈퇴하시겠습니까?") == true){
+
+ let res = await this.authService.deleteUser();
+ if (res) {
+ alert("탈퇴가 완료되었습니다.");
+ }
+ else {
+ alert("다시 시도해주세요.");
+ }
+ this.authService.signOut();
+ }
}
}
diff --git a/src/app/features/userpage/components/userpage-header/userpage-header.component.css b/src/app/features/userpage/components/userpage-header/userpage-header.component.css
index b2143674..a4b05d93 100644
--- a/src/app/features/userpage/components/userpage-header/userpage-header.component.css
+++ b/src/app/features/userpage/components/userpage-header/userpage-header.component.css
@@ -30,3 +30,42 @@
background-image: url("../../../../../assets/icons/folder-modify.png");
background-position: left 1.3em center;
}
+
+@media all and (max-width: 768px){
+ .where {
+ padding-top : 0;
+ display: flex;
+ padding-left : 20px;
+ }
+
+ .button1,
+ .button2 {
+ font-size: 15px;
+ margin-right : 5px;
+ }
+
+ h3{
+ font-size: 1.7rem !important;
+ color : #3E3E3E;
+ font-weight : 600 !important;
+ margin-bottom: 0;
+ padding-top : 10px;
+ }
+}
+
+@media all and (max-width: 448px){
+ .where {
+ padding : 0;
+ }
+
+ .button1,
+ .button2 {
+ font-size: 13px;
+ }
+
+ h3{
+ font-size: 1.4rem !important;
+ margin-left : 0px;
+ padding-top : 5px;
+ }
+}
diff --git a/src/app/features/userpage/components/userpage-header/userpage-header.component.html b/src/app/features/userpage/components/userpage-header/userpage-header.component.html
index 04f51d67..be0962eb 100644
--- a/src/app/features/userpage/components/userpage-header/userpage-header.component.html
+++ b/src/app/features/userpage/components/userpage-header/userpage-header.component.html
@@ -1,9 +1,4 @@
-
{{ currentMenu }}
-
+ {{ 'navbar.' + currentMenu | translate }}
-
diff --git a/src/app/features/userpage/components/userpage-header/userpage-header.component.ts b/src/app/features/userpage/components/userpage-header/userpage-header.component.ts
index 763863b3..22b5b9eb 100644
--- a/src/app/features/userpage/components/userpage-header/userpage-header.component.ts
+++ b/src/app/features/userpage/components/userpage-header/userpage-header.component.ts
@@ -9,9 +9,10 @@ import { NavigationEnd, Router } from '@angular/router';
export class UserpageHeaderComponent implements OnInit {
private _currentMenu: string = "";
+ private _currentKeyword: string = "";
constructor(
- private router: Router
+ private router: Router,
) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
@@ -25,14 +26,14 @@ export class UserpageHeaderComponent implements OnInit {
}
/**
- * @description Return route name to Korean
- * @param routename
+ * @description Return route name to Korean
+ * @param routename
*/
convertRouteToKor(routename: string) {
- if (routename === "my-docs") return "내 보관함";
- if (routename === "my-analysis") return "내 분석함";
- if (routename === "secession") return "회원 탈퇴"
- if (routename === "member-info") return "회원 정보"
+ if (routename === "my-docs") return "myDocuments";
+ if (routename === "my-analysis") return "myAnalysis";
+ if (routename === "secession") return "rmAccount"
+ if (routename === "member-info") return "privacy"
}
public get currentMenu(): string {
@@ -42,4 +43,11 @@ export class UserpageHeaderComponent implements OnInit {
this._currentMenu = value;
}
+ public get currentKeyword(): string {
+ return this._currentKeyword;
+ }
+ public set currentKeyword(value: string) {
+ this._currentKeyword = value;
+ }
+
}
diff --git a/src/app/features/userpage/components/userpage-root/userpage-root.component.html b/src/app/features/userpage/components/userpage-root/userpage-root.component.html
index a4faa2db..6e95f5eb 100644
--- a/src/app/features/userpage/components/userpage-root/userpage-root.component.html
+++ b/src/app/features/userpage/components/userpage-root/userpage-root.component.html
@@ -2,10 +2,9 @@
+
-
-
diff --git a/src/app/features/userpage/components/userpage-root/userpage-root.component.less b/src/app/features/userpage/components/userpage-root/userpage-root.component.less
index 3d80a407..201688e0 100644
--- a/src/app/features/userpage/components/userpage-root/userpage-root.component.less
+++ b/src/app/features/userpage/components/userpage-root/userpage-root.component.less
@@ -43,9 +43,16 @@ main {
grid-area: body;
}
-.outline {
- border : 1px solid #606060;
- border-radius: 50px;
- width : 100%;
- padding : 40px 10%;
-}
\ No newline at end of file
+@media all and (min-width: 426px) and (max-width: 768px){
+ .outline{
+ border : 0;
+ padding: 0 0 0 20px;
+ }
+}
+
+@media all and (max-width: 425px){
+ .outline{
+ border : 0;
+ padding: 0;
+ }
+}
diff --git a/src/app/features/userpage/components/userpage-root/userpage-root.component.ts b/src/app/features/userpage/components/userpage-root/userpage-root.component.ts
index f18d568b..8a44ed7d 100644
--- a/src/app/features/userpage/components/userpage-root/userpage-root.component.ts
+++ b/src/app/features/userpage/components/userpage-root/userpage-root.component.ts
@@ -17,10 +17,12 @@ export class UserpageRootComponent implements OnInit {
) { }
ngOnInit(): void {
- this.where = "내 보관함";
- // this.navService.setNavMenu(navMenu.MYPAGE);
- this.router.navigateByUrl("/userpage/my-docs");
+ if (!(matchMedia('(max-width: 768px)').matches)) {
+ this.where = "내 보관함";
+ // this.navService.setNavMenu(navMenu.MYPAGE);
+ this.router.navigateByUrl("/userpage/my-docs");
+ }
}
-}
\ No newline at end of file
+}
diff --git a/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.css b/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.css
index 5af06c3d..84a658b5 100644
--- a/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.css
+++ b/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.css
@@ -12,8 +12,8 @@
.outline {
grid-area: outline;
border: 1px solid #606060;
- border-top-right-radius: 50px;
- border-bottom-right-radius: 50px;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
border-left: none;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -37,8 +37,8 @@
.outline {
grid-area: outline;
border: 1px solid #606060;
- border-top-right-radius: 50px;
- border-bottom-right-radius: 50px;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
border-left: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -62,8 +62,8 @@
.outline {
grid-area: outline;
border: 1px solid #606060;
- border-top-right-radius: 50px;
- border-bottom-right-radius: 50px;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
border-left: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -93,3 +93,22 @@ ul > li {
font-size: 1.5rem;
margin-bottom: 20px;
}
+
+@media all and (max-width: 768px){
+ .outline{
+ display : none;
+ }
+
+ h1 {
+ font-size: 2rem !important;
+ text-align: left;
+ padding : 15px 20px;
+ }
+}
+
+@media all and (max-width: 495px){
+ h1 {
+ font-size: 1.7rem !important;
+ padding : 15px 0px;
+ }
+}
diff --git a/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.html b/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.html
index cbff4ad7..4ddd6d4b 100644
--- a/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.html
+++ b/src/app/features/userpage/components/userpage-sidebar/userpage-sidebar.component.html
@@ -1,36 +1,36 @@
-
"{{ searchKeyword }}"에 대한 검색결과가 없습니다.
+
{{'article-list.noResult1'|translate}}"{{ searchKeyword }}"{{'article-list.noResult2'|translate}}
- - 단어의 철자가 정확한지 확인해 보세요.
- - 한글을 영어로 혹은 영어를 한글로 입력했는지 확인해 보세요.
+ - {{'article-list.noResultGuide1'|translate}}
+ - {{'article-list.noResultGuide2'|translate}}
-
- 검색어의 단어 수를 줄이거나, 보다 일반적인 검색어로 다시 검색해 보세요.
+ {{'article-list.noResultGuide3'|translate}}
-
"{{ searchKeyword }}"에 대한 문서를 검색 중입니다. 잠시만 기다려주세요.
+
"{{ searchKeyword }}"{{'article-list.resultProcessing'|translate}}
diff --git a/src/app/shared/component/article-list/article-list.component.less b/src/app/shared/component/article-list/article-list.component.less
index a6577dfa..a14fd06d 100755
--- a/src/app/shared/component/article-list/article-list.component.less
+++ b/src/app/shared/component/article-list/article-list.component.less
@@ -45,7 +45,7 @@ hr {
align-items : flex-start;
border : 1px solid gray;
background-size : 0.8em;
- background-position: right 1rem center;
+ background-position: right 0.6rem center;
background-repeat : no-repeat;
width : 9.5rem;
padding : 1em 0em 1em 1em;
@@ -72,6 +72,15 @@ hr {
.result-count {
align-self: flex-end;
+ display: flex;
+}
+
+.result-count>button {
+ margin: 0 4px;
+ border: none;
+ background: #52b9ff;
+ color : white;
+ font-weight : bold ;
}
.dropdown-menus {
@@ -128,6 +137,7 @@ label {
}
.article {
+ background: gray;
width : 100%;
display : flex;
white-space: nowrap;
@@ -140,4 +150,88 @@ label {
.article-info-container {
width : 100%;
margin-left: 20px;
-}
\ No newline at end of file
+ padding-right: 30px;
+ margin-bottom : -36px;
+ padding-top : 20px;
+}
+
+.result-count-tablet{
+ display: none;
+}
+
+hr.sep{
+ width : 98%;
+ background : #c2c2c2;
+}
+
+@media (max-width: 768px) {
+ * {
+ font-size: 1.3rem;
+ }
+
+ .result-count{
+ display: none;
+ }
+
+ .result-count-tablet{
+ display: flex;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ }
+
+ .result-count-tablet>button {
+ margin: 0 4px;
+ border: none;
+ background: #52b9ff;
+ color : white;
+ font-weight : bold ;
+ font-size : 2vw;
+ }
+
+ .dropdown-menus{
+ float : right;
+ }
+
+ .amount-drop,
+ .order-drop{
+ font-size : 1.1rem;
+ padding-top: 0.5em;
+ background: #ffffff;
+ }
+
+ .result-header {
+ height : 2rem;
+ justify-content: space-between;
+ margin-top : 30px;
+ font-size : 1.5rem;
+ z-index : 9;
+ }
+
+ .related-doc-toggle {
+ width : 6.5rem;
+ padding : 0.5em 0em 0.5em 0.8em;
+ font-size : 1rem;
+ }
+
+ .mydoc {
+ left : 30px;
+ }
+}
+
+@media all and (max-width: 425px){
+
+ .article-info-container {
+ margin-right : 0px;
+ }
+ .article-info-container{
+ margin-left : 8px;
+ }
+
+ .article-info-container{
+ padding-right : 20px;
+ }
+
+ label {
+ margin-top: 0.7rem;
+ }
+}
diff --git a/src/app/shared/component/article-list/article-list.component.spec.ts b/src/app/shared/component/article-list/article-list.component.spec.ts
index 764037bd..371f1296 100755
--- a/src/app/shared/component/article-list/article-list.component.spec.ts
+++ b/src/app/shared/component/article-list/article-list.component.spec.ts
@@ -14,7 +14,7 @@ describe("ListDocumentsComponent", () => {
beforeEach(() => {
fixture = TestBed.createComponent(ArticleListComponent);
- component = fixture.componentInstance;
+ cƒomponent = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/shared/component/article-list/article-list.component.ts b/src/app/shared/component/article-list/article-list.component.ts
index 5a382107..b3e4fd9d 100755
--- a/src/app/shared/component/article-list/article-list.component.ts
+++ b/src/app/shared/component/article-list/article-list.component.ts
@@ -1,15 +1,17 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { FormArray, FormBuilder, FormControl, FormGroup } from "@angular/forms";
-import { Router } from "@angular/router";
-import { Observable, Subscription } from "rxjs";
-import { ArticleSource } from "src/app/core/models/article.model";
-import { PaginationModel } from "src/app/core/models/pagination.model";
-import { AnalysisDatabaseService } from "src/app/core/services/analysis-database-service/analysis.database.service";
-import { ArticleService } from "src/app/core/services/article-service/article.service";
-import { AuthenticationService } from "src/app/core/services/authentication-service/authentication.service";
-import { ElasticsearchService } from "src/app/core/services/elasticsearch-service/elasticsearch.service";
-import { PaginationService } from "src/app/core/services/pagination-service/pagination.service";
-import { UserSavedDocumentService } from "src/app/core/services/user-saved-document-service/user-saved-document.service";
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import {Router} from '@angular/router';
+import {Observable, Subscription} from 'rxjs';
+import {ArticleSource} from 'src/app/core/models/article.model';
+import {PaginationModel} from 'src/app/core/models/pagination.model';
+import {AnalysisDatabaseService} from 'src/app/core/services/analysis-database-service/analysis.database.service';
+import {ArticleService} from 'src/app/core/services/article-service/article.service';
+import {AuthenticationService} from 'src/app/core/services/authentication-service/authentication.service';
+import {ElasticsearchService} from 'src/app/core/services/elasticsearch-service/elasticsearch.service';
+import {PaginationService} from 'src/app/core/services/pagination-service/pagination.service';
+import {UserSavedDocumentService} from 'src/app/core/services/user-saved-document-service/user-saved-document.service';
+import {SearchMode} from '../../../core/enums/search-mode';
+import {SortOption} from '../../../core/enums/serch-result-sort-option';
@Component({
selector: "app-article-list",
@@ -17,7 +19,7 @@ import { UserSavedDocumentService } from "src/app/core/services/user-saved-docum
styleUrls: ["./article-list.component.less"],
})
export class ArticleListComponent implements OnInit, OnDestroy {
- public orders = ["최신순", "과거순"];
+ public orders = ["정확도순", "최신순", "과거순"];
public amounts = [10, 30, 50];
private _form: FormGroup;
@@ -43,6 +45,11 @@ export class ArticleListComponent implements OnInit, OnDestroy {
private _totalPages: number = 1;
private _totalDocs: number;
private _pageSize: number = 10;
+ private _searchPaperResultNum: string = "0";
+ private _searchNewsResultNum: string = "0";
+
+ private _checkArray: FormArray = null;
+ private _toggle_all : boolean = false;
constructor(
private userSavedDocumentService: UserSavedDocumentService,
@@ -54,18 +61,16 @@ export class ArticleListComponent implements OnInit, OnDestroy {
private paginationService: PaginationService,
private authenticationService: AuthenticationService
) {
+ this.setArticleForm();
// Set articles when article has been changed
this.articleSubscriber = this.articleChange$.subscribe((articles) => {
this.articleSources = articles;
this.resetSearchOptions();
- this.setArticleIdList();
+ this.setArticleHashKeyList();
this.setCheckbox();
- this.setArticleForm();
-
this.isResultFound = (articles !== null);
this.elasticsearchService.setSearchStatus(true);
});
-
// Check if it is still searching
this.searchStatusChange$.subscribe((status) => {
this.isSearchDone = status;
@@ -103,11 +108,12 @@ export class ArticleListComponent implements OnInit, OnDestroy {
if (this.currentPage === null) this.currentPage = 1;
if (this.currentPage > this.totalPages) this.currentPage = this.totalPages;
if (this.currentPage < 1) this.currentPage = 1;
+
this.elasticsearchService.triggerSearch(this.currentPage);
}
/**
- * @description Create form to set checkbox for each article in the list.
+ * @description Create form to set checkbox for each article in the list.
*/
setArticleForm(): void {
this.form = this.formBuilder.group({
@@ -119,8 +125,23 @@ export class ArticleListComponent implements OnInit, OnDestroy {
* @description Add property of checkbox value into article.
*/
setCheckbox(): void {
+ this.checkArray = this.form.get("checkArray") as FormArray;
+
for (let i in this.articleSources) {
this.articleSources[i]["isSelected"] = false;
+ this.checkArray.controls.forEach((item: FormControl) => {
+ if (item.value == this.articleSources[i]["_source"]["hash_key"]) {
+ this.articleSources[i]["isSelected"] = true;
+ return;
+ }
+ });
+ }
+
+ this.toggle_all = true;
+ for (let i in this.articleSources) {
+ if(this.articleSources[i]["isSelected"] == false){
+ this.toggle_all = false;
+ }
}
}
@@ -137,7 +158,7 @@ export class ArticleListComponent implements OnInit, OnDestroy {
/**
* @description Update paging information based on current page information.
- * @param currentPage current page to display
+ * @param currentPage current page to display
*/
async loadPage(currentPage: number): Promise
{
let pageInfo: PaginationModel = await this.paginationService.paginate(
@@ -146,11 +167,24 @@ export class ArticleListComponent implements OnInit, OnDestroy {
this.pageSize
);
this.setPageInfo(pageInfo);
+
+ this.searchPaperResultNum = "0";
+ this.searchNewsResultNum = "0";
+ let res = this.elasticsearchService.getDoctypeWithTextSearch();
+ res.then((count)=>{
+ for(let name of count["aggregations"]["count"]["buckets"]){
+ if(name.key === 'paper') {
+ this.searchPaperResultNum = name.doc_count;
+ }else if(name.key === 'news'){
+ this.searchNewsResultNum = name.doc_count;
+ }
+ }
+ })
}
/**
* @description Convert number format by inserting ',' for each 3 digits. i.e. 1234567 will be converted into 1,234,567
- * @param num Number to convert.
+ * @param num Number to convert.
*/
convertNumberFormat(num: number): string {
let docCount: string = num.toString();
@@ -159,24 +193,32 @@ export class ArticleListComponent implements OnInit, OnDestroy {
}
/**
- * @description Reset all search options set before.
+ * @description Reset all search options set before.
*/
resetSearchOptions(): void {
this.isMainSearch = (this.router.url === "/search/result");
this.articleService.clearList();
- this.searchKeyword = this.elasticsearchService.getKeyword();
this.isResultFound = false;
this.isSearchDone = false;
this.currentPage = this.elasticsearchService.getCurrentSearchingPage();
+ if (this.isMainSearch === true) {
+ let previousSearchKeyword : string = this.searchKeyword;
+ this.searchKeyword = this.elasticsearchService.getKeyword();
+ if(previousSearchKeyword != this.searchKeyword){
+ this.setArticleForm();
+ }
+ } else {
+ this.searchKeyword = '키워드 없음';
+ }
}
/**
* @description Set list of article ids by reading id field of each element in articleSource.
*/
- setArticleIdList(): void {
+ setArticleHashKeyList(): void {
this.relatedDocBtnToggle = [];
for (var i in this.articleSources) {
- this.articleService.addId(this.articleSources[i]["_id"]);
+ this.articleService.addHashKey(this.articleSources[i]["_source"]["hash_key"]);
this.relatedDocBtnToggle.push(false);
}
}
@@ -187,7 +229,7 @@ export class ArticleListComponent implements OnInit, OnDestroy {
* @param RelatedDocIdx Index of related articles from relatedDocs.
*/
openSelectedDoc(articleSourceIdx: number, RelatedDocIdx: number): void {
- this.articleService.setSelectedId(
+ this.articleService.setSelectedHashKey(
this.relatedDocs[articleSourceIdx][RelatedDocIdx]["id"]
);
this.navToDocDetail();
@@ -206,11 +248,11 @@ export class ArticleListComponent implements OnInit, OnDestroy {
* @description Load related articles of selected article.
* @param idx Index number of article from relatedDocs.
*/
- loadRelatedDocs(idx: number): void {
+ loadRelatedDocs(hashKey: number): void {
this.analysisDatabaseService
- .loadRelatedDocs(this.articleService.getIdByIdx(idx))
+ .loadRelatedDocs(this.articleService.getHashKeyByIdx(hashKey))
.then((res) => {
- this.relatedDocs[idx] = res as [];
+ this.relatedDocs[hashKey] = res as [];
});
}
@@ -222,10 +264,11 @@ export class ArticleListComponent implements OnInit, OnDestroy {
alert("담을 문서가 없습니다! 담을 문서를 선택해주세요.");
} else {
this.userSavedDocumentService
- .saveNewMyDoc(this.form.value["checkArray"])
+ .saveNewMyDoc(this.form.value["checkArray"], this._searchKeyword)
.then(() => {
- alert("문서가 나의 문서함에 저장되었어요.");
+ alert("문서가 내 보관함에 저장되었어요.");
});
+ this.checkArray.clear();
}
}
@@ -236,15 +279,29 @@ export class ArticleListComponent implements OnInit, OnDestroy {
*/
checkUncheckAll(isCheckAll: boolean, checkArray: FormArray): FormArray {
if (isCheckAll) {
+ this.toggle_all = true;
for (let i = 0; i < this.articleSources.length; i++) {
- checkArray.push(new FormControl(this.articleSources[i]["_id"]));
+ checkArray.push(new FormControl(this.articleSources[i]["_source"]["hash_key"]));
}
} else {
- checkArray.clear();
+ this.toggle_all = false;
+
+ let j : number = 0;
+ this.checkArray.controls.forEach((item: FormControl, index :number) => {
+ if (item.value == this.articleSources[0]["_source"]["hash_key"]) {
+ for(let i = 10; i > 0; i--){
+ this.checkArray.removeAt(j);
+ }
+ return;
+ }
+ j++;
+ });
}
+
for (let i = 0; i < this.articleSources.length; i++) {
this.articleSources[i]["isSelected"] = isCheckAll;
}
+
return checkArray;
}
@@ -253,17 +310,18 @@ export class ArticleListComponent implements OnInit, OnDestroy {
* @param e DOM event.
*/
onCheckboxChange(e): void {
- let checkArray: FormArray = this.form.get("checkArray") as FormArray;
+ this.checkArray = this.form.get("checkArray") as FormArray;
+
if (e.target.value === "toggleAll") {
- checkArray = this.checkUncheckAll(e.target.checked, checkArray);
+ this.checkArray = this.checkUncheckAll(e.target.checked, this.checkArray);
} else {
if (e.target.checked) {
- checkArray.push(new FormControl(e.target.value));
+ this.checkArray.push(new FormControl(e.target.value));
} else {
let i: number = 0;
- checkArray.controls.forEach((item: FormControl) => {
+ this.checkArray.controls.forEach((item: FormControl) => {
if (item.value == e.target.value) {
- checkArray.removeAt(i);
+ this.checkArray.removeAt(i);
return;
}
i++;
@@ -274,10 +332,10 @@ export class ArticleListComponent implements OnInit, OnDestroy {
/**
* @description Set selected article and navigate to article detail.
- * @param docId
+ * @param docHashKey
*/
- openDocDetail(docId: string): void {
- this.articleService.setSelectedId(docId);
+ openDocDetail(docHashKey: string): void {
+ this.articleService.setSelectedHashKey(docHashKey);
this.navToDocDetail();
}
@@ -294,7 +352,7 @@ export class ArticleListComponent implements OnInit, OnDestroy {
/**
* @description Chage arrow icon when user click on related article toggle.
- * @param idx
+ * @param idx
*/
toggleArrowStyle(idx: number) {
if (this.relatedDocBtnToggle[idx] !== true) {
@@ -302,6 +360,11 @@ export class ArticleListComponent implements OnInit, OnDestroy {
"background-image":
"url(../../../../assets/icons/arrow-down_3d3d3d.png)",
};
+ }else{
+ return {
+ "background-image":
+ "url(../../../../assets/icons/arrow-down_3d3d3d_2.png)",
+ };
}
}
@@ -309,6 +372,38 @@ export class ArticleListComponent implements OnInit, OnDestroy {
this.router.navigateByUrl("search/read");
}
+ async searchByDoctype(e){
+ if(e.target.id === 'all'){
+ this.elasticsearchService.setDoctype("");
+ }else{
+ this.elasticsearchService.setDoctype(e.target.value);
+ }
+ this.elasticsearchService.setSearchMode(SearchMode.FILTER);
+ this.elasticsearchService.triggerSearch(1)
+ }
+
+ saveSortOption(ord: string){
+ switch (ord){
+ case '정확도순':
+ this.elasticsearchService.setSortOption(SortOption.SCORE);
+ break;
+ case '최신순':
+ this.elasticsearchService.setSortOption(SortOption.DATE_DESC);
+ break;
+ case '과거순':
+ this.elasticsearchService.setSortOption(SortOption.DATE_ASC);
+ break;
+ }
+ let rootUrl = this.router.routerState.snapshot.url;
+
+ if(rootUrl.startsWith('/library')){
+ this.elasticsearchService.setSearchMode(SearchMode.LIBRARY);
+ }else{
+ this.elasticsearchService.setSearchMode(SearchMode.FILTER);
+ }
+ this.elasticsearchService.triggerSearch(1);
+ }
+
// getters and setters
public get form(): FormGroup {
return this._form;
@@ -396,6 +491,19 @@ export class ArticleListComponent implements OnInit, OnDestroy {
public set searchResultNum(value: string) {
this._searchResultNum = value;
}
+
+ public get searchPaperResultNum(): string {
+ return this._searchPaperResultNum;
+ }
+ public set searchPaperResultNum(value: string) {
+ this._searchPaperResultNum = value;
+ }
+ public get searchNewsResultNum(): string {
+ return this._searchNewsResultNum;
+ }
+ public set searchNewsResultNum(value: string) {
+ this._searchNewsResultNum = value;
+ }
public get searchKeyword(): string {
return this._searchKeyword;
}
@@ -438,4 +546,21 @@ export class ArticleListComponent implements OnInit, OnDestroy {
public set pageSize(value: number) {
this._pageSize = value;
}
+
+ public get checkArray(): FormArray {
+ return this._checkArray;
+ }
+ public set checkArray(value: FormArray) {
+ this._checkArray = value;
+ }
+ public get toggle_all(): boolean {
+ return this._toggle_all;
+ }
+ public set toggle_all(value: boolean) {
+ this._toggle_all = value;
+ }
+ public get selectedDoctype(): string {
+ return this.elasticsearchService.getDoctype();
+ }
+
}
diff --git a/src/app/shared/component/route-location/route-location.component.css b/src/app/shared/component/route-location/route-location.component.css
index 321ecd09..59bd8e10 100644
--- a/src/app/shared/component/route-location/route-location.component.css
+++ b/src/app/shared/component/route-location/route-location.component.css
@@ -9,3 +9,15 @@ hr {
width: 100vw;
margin: 0;
}
+
+@media (max-width: 768px) {
+ p {
+ display: none;
+ }
+
+ hr{
+ text-align: center;
+ width: 85vw;
+ position: absolute;
+ }
+}
diff --git a/src/app/shared/component/route-location/route-location.component.ts b/src/app/shared/component/route-location/route-location.component.ts
index e2ba616c..f733ce96 100644
--- a/src/app/shared/component/route-location/route-location.component.ts
+++ b/src/app/shared/component/route-location/route-location.component.ts
@@ -1,5 +1,7 @@
import { Component, OnInit } from "@angular/core";
import { NavigationEnd, Router } from "@angular/router";
+import { TranslateService } from '@ngx-translate/core';
+
@Component({
selector: "app-route-location",
@@ -10,7 +12,7 @@ export class RouteLocationComponent implements OnInit {
private _dir: string = "홈";
- constructor(private router: Router) {
+ constructor(private router: Router, public translate: TranslateService) {
router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.ngOnInit();
@@ -20,12 +22,13 @@ export class RouteLocationComponent implements OnInit {
ngOnInit(): void {
this.dir = "홈";
+ let translatedDir = this.getTranslation(this.dir);
let data = this.router.url;
let routes: Array = data.split("/");
routes.forEach((route) => {
let routeKor = this.convertRouteIntoKor(route);
- if (routeKor != null) this.dir = this.dir + " > " + routeKor;
+ if (routeKor != null) this.dir = translatedDir + " > " + routeKor;
});
}
@@ -35,28 +38,34 @@ export class RouteLocationComponent implements OnInit {
* @returns Korean route name.
*/
convertRouteIntoKor(routeName: string): string {
- if (routeName === "about") return "홈페이지소개";
- else if (routeName === "intro") return "사이트소개";
- else if (routeName === "member-policy") return "회원정책";
- else if (routeName === "collected-info") return "수집정보";
- else if (routeName === "service-guide") return "서비스안내";
- else if (routeName === "search") return "검색결과";
- else if (routeName === "read") return "문서상세보기";
- else if (routeName === "anlaysis") return "자료분석";
- else if (routeName === "library") return "자료열람";
- else if (routeName === "research-status") return "통일연구 동향 그래프";
- else if (routeName === "community") return "커뮤니티";
+ let word = '';
+ if (routeName === "about") word = '홈페이지소개';
+ else if (routeName === "intro") word = "사이트소개";
+ else if (routeName === "member-policy") word = "회원정책";
+ else if (routeName === "collected-info") word = "수집정보";
+ else if (routeName === "service-guide") word = "서비스안내";
+ else if (routeName === "search") word = "검색결과";
+ else if (routeName === "read") word = "문서상세보기";
+ else if (routeName === "anlaysis") word = "자료분석";
+ else if (routeName === "library") word = "자료열람";
+ else if (routeName === "research-status") word = "통일연구 동향 그래프";
+ else if (routeName === "community") word = "커뮤니티";
else if (routeName === "qna") return "QNA"
else if (routeName === "faq") return "FAQ"
- else if (routeName === "announcement") return "공지사항"
- else if (routeName === "new") return "새 글 작성"
- else if (routeName === "modify") return "글 수정"
- else if (routeName === "analysis") return "자료분석"
- else if (routeName === "userpage") return "마이페이지"
- else if (routeName === "my-docs") return "내 보관함"
- else if (routeName === "my-analysis") return "내 분석함"
- else if (routeName === "member-info") return "회원 정보"
- else if (routeName === "secession") return "회원 탈퇴"
+ else if (routeName === "announcement") word = "공지사항"
+ else if (routeName === "new") word = "새 글 작성"
+ else if (routeName === "modify") word = "글 수정"
+ else if (routeName === "userpage") word = "마이페이지"
+ else if (routeName === "my-docs") word = "내 보관함"
+ else if (routeName === "my-analysis") word = "내 분석함"
+ else if (routeName === "member-info") word = "회원 정보"
+ else if (routeName === "secession") word = "회원 탈퇴"
+ else if (routeName === "analysis") word = "분석"
+ else if (routeName === "analysis-menu") word = "자료분석"
+ else if (routeName === "manual") word = "매뉴얼"
+ else if (routeName === "preprocessing") word = "전처리"
+ else if (routeName === "openapi") return "Open API"
+ return this.getTranslation(word);
}
public get dir(): string {
@@ -65,4 +74,9 @@ export class RouteLocationComponent implements OnInit {
public set dir(value: string) {
this._dir = value;
}
+ public getTranslation(str) {
+ const currentLang = this.translate.currentLang; // get current language
+ const returnValue = this.translate.translations[currentLang][str]; // get converted string from current language
+ return returnValue;
+ }
}
diff --git a/src/app/shared/component/search-bar/search-bar.component.html b/src/app/shared/component/search-bar/search-bar.component.html
index 137b4cea..9683a6d9 100755
--- a/src/app/shared/component/search-bar/search-bar.component.html
+++ b/src/app/shared/component/search-bar/search-bar.component.html
@@ -3,6 +3,7 @@
(click)="gotoMain()"
*ngIf="!isMain"
src="../../../../assets/logos/logo_sub.png"
+ style="cursor:pointer;"
alt="kubic_logo"
class="logo-img"
/>
@@ -22,85 +23,114 @@
(keyup.enter)="search()"
value="{{ searchKeyword }}"
/>
-
-
-
검색조건
-

-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
검색도움말
-

-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/shared/component/search-bar/search-bar.component.less b/src/app/shared/component/search-bar/search-bar.component.less
index 22b37a66..fc89cae7 100755
--- a/src/app/shared/component/search-bar/search-bar.component.less
+++ b/src/app/shared/component/search-bar/search-bar.component.less
@@ -1,89 +1,298 @@
.search-bar-container {
- display : flex;
- flex-direction : column;
- align-items : center;
- justify-content: center;
- width : 100%;
- padding : 0 1rem;
+ display : flex;
+ flex-direction : column;
+ align-items : center;
+ justify-content: center;
+ width : 100%;
+ padding : 0 1rem;
}
.logo-img {
- width : 15rem;
- margin-bottom: 17px;
+ width : 15rem;
+ margin-bottom: 17px;
}
button {
- width : 4.5rem;
- height : 2rem;
- padding : 1rem 1rem;
- font-weight: 500;
+ width : 4.5rem;
+ height : 2rem;
+ padding : 1rem 1rem;
+ font-weight: 500;
}
.search-bar {
- color : black;
- width : 100%;
- border-radius : 2rem;
- background-color : rgb(236, 239, 239);
- background-repeat : no-repeat;
- background-size : 1.5rem;
- background-position: 1rem center;
- padding-left : 3rem;
- background-image : url(../../../../assets/icons/search-black.png);
- border : none;
- height : 3.5rem;
- font-size : 1.438rem;
+ color : black;
+ width : 100%;
+ border-radius : 2rem;
+ background-color : rgb(236, 239, 239);
+ background-repeat : no-repeat;
+ background-size : 1.5rem;
+ background-position: 1rem center;
+ padding-left : 3rem;
+ background-image : url(../../../../assets/icons/search-black.png);
+ border : none;
+ height : 3.5rem;
+ font-size : 1.438rem;
}
.search-filter-container {
- display : flex;
- margin : 20px 0px;
- width : max-content;
- align-items : center;
- justify-content: center;
- white-space : nowrap;
+ display : flex;
+ margin : 20px 0px;
+ width : max-content;
+ align-items : center;
+ justify-content: center;
+ white-space : nowrap;
}
.search-filter-container * {
- font-size: 1.438rem;
+ font-size: 1.438rem;
}
.search-filter-container>*:not(:last-child) {
- margin-right: 1rem;
+ margin-right: 1rem;
}
+
.search-filter-container button {
- padding: 1em 2.2em;
+ padding: 1em 2.2em;
+}
+
+.inst-dropdown{
+ width : 300px !important;
}
.reset-filter,
.search-helper {
- display : flex;
- align-items : center;
- justify-content: center;
+ display : flex;
+ align-items : center;
+ justify-content: center;
}
.reset-filter img,
.search-helper img {
- width: 1.338rem;
+ width: 2.3rem;
+ padding-left : 5px;
}
.related-keywords-container {
+ display : flex;
+ width : max-content;
+ font-size: 1.3rem;
+ padding-top : 10px;
+}
+
+.related-keywords-container>p {
+ font-weight : 600;
+ color : #52b9ff;
+ margin-right: 3rem;
+ margin-bottom: 0;
+}
+
+.related-keywords-container>ul {
+ display: flex;
+ padding: 0;
+ margin-bottom: 0;
+}
+
+.related-keywords-container>ul>li:not(:last-child) {
+ margin-right: 3rem;
+}
+
+.related-keywords-container>ul>li>a{
+ color : #353535;
+}
+
+.related-keywords-container-mobile{
+ display: none;
+}
+
+.uk-nav > li {
+ white-space: nowrap;
+ display : flex;
+ justify-content: stretch;
+ flex-direction: column;
+ flex-wrap: wrap;
+}
+
+.uk-nav > li > a {
+ margin-right : 0.5rem;
+ margin-bottom: 0.5em;
+ border : 1px solid #8a8e8d !important;
+ flex-grow : 1;
+ font-size : 1.3rem;
+ border-radius : 100px;
+ padding : 5px 5px !important;
+ text-align: center;
+}
+
+
+.a-date{
+ color : #8a8e8d;
+}
+
+//popup
+.overlay {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+ transition: opacity 500ms;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 900;
+}
+
+.overlay:target {
+ visibility: visible;
+ opacity: 1;
+}
+
+.popup {
+ position: fixed;
+ width: 60%;
+ padding: 20px;
+ max-width: 500px;
+ border-radius: 10px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(255, 255, 255, .9);
+ /* "delay" the visibility transition */
+ -webkit-transition: opacity .5s, visibility 0s linear .5s;
+ transition: opacity .5s, visibility 0s linear .5s;
+ z-index: 1;
+}
+
+.popup:target {
+ visibility: visible;
+ opacity: 1;
+ /* cancel visibility transition delay */
+ -webkit-transition-delay: 0s;
+ transition-delay: 0s;
+}
+
+.popup-close {
+ position: absolute;
+ padding: 10px;
+ max-width: 500px;
+ border-radius: 10px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(255, 255, 255, .9);
+}
+
+.popup .close {
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ padding: 5px;
+ font-size: 2em;
+ line-height: .6em;
+ font-weight: bold;
+}
+
+
+/*tablet*/
+@media (min-width: 568px) and (max-width: 768px){
+ .search-filter-container * {
+ font-size : 15px;
+ }
+}
+
+@media (min-width: 426px) and (max-width: 567px){
+ .search-filter-container * {
+ font-size : 13px;
+ }
+
+ .related-keywords-container {
+ display: none;
+ }
+
+ .related-keywords-container-mobile {
display : flex;
width : max-content;
font-size: 1.3rem;
-}
+ margin-top : 0.5rem;
+ }
-.related-keywords-container>p {
+ .related-keywords-container-mobile>p {
font-weight : 600;
color : #52b9ff;
margin-right: 3rem;
-}
+ margin-bottom: 0;
+ }
-.related-keywords-container>ul {
+ .related-keywords-container-mobile>ul {
display: flex;
padding: 0;
-}
+ margin-bottom: 0;
+ }
-.related-keywords-container>ul>li:not(:last-child) {
+ .related-keywords-container-mobile>ul>li:not(:last-child) {
margin-right: 3rem;
-}
\ No newline at end of file
+ }
+
+ .related-keywords-container-mobile>ul>li>a{
+ color : #353535;
+ }
+
+}
+
+/*mobile*/
+@media (max-width: 425px){
+ .search-filter-container{
+ margin-top: 10px;
+ }
+ .search-filter-container>div>span,
+ .search-filter-container>div>img{
+ position: relative;
+ top : 35px;
+ font-size: 15px;
+ z-index: 1;
+ }
+
+ .reset-filter>span,
+ .reset-filter>img{
+ left : 80px;
+ }
+
+ .search-helper>span,
+ .search-helper>img{
+ right : 90px;
+ }
+
+ .related-keywords-container {
+ display: none;
+ }
+
+ .related-keywords-container-mobile {
+ display : flex;
+ width : max-content;
+ font-size: 1.3rem;
+ margin-top : 1.7rem;
+ margin-right : 10px;
+ }
+
+ .related-keywords-container-mobile>p {
+ font-weight : 600;
+ color : #52b9ff;
+ margin-right: 1.5rem;
+ margin-bottom: 0;
+ }
+
+ .related-keywords-container-mobile>ul {
+ display: flex;
+ padding: 0;
+ margin-bottom: 0;
+ }
+
+ .related-keywords-container-mobile>ul>li:not(:last-child) {
+ margin-right: 1.5rem;
+ }
+
+ .related-keywords-container-mobile>ul>li>a{
+ color : #353535;
+ }
+}
diff --git a/src/app/shared/component/search-bar/search-bar.component.ts b/src/app/shared/component/search-bar/search-bar.component.ts
index 10a57432..002cb3a6 100755
--- a/src/app/shared/component/search-bar/search-bar.component.ts
+++ b/src/app/shared/component/search-bar/search-bar.component.ts
@@ -1,10 +1,14 @@
-import { Component, OnInit } from "@angular/core";
-import { NavigationEnd, Router } from "@angular/router";
-import { Observable } from "rxjs";
-import { SearchMode } from "src/app/core/enums/search-mode";
-import { AnalysisDatabaseService } from "src/app/core/services/analysis-database-service/analysis.database.service";
-import { ArticleService } from "src/app/core/services/article-service/article.service";
-import { ElasticsearchService } from "src/app/core/services/elasticsearch-service/elasticsearch.service";
+import {Component, OnInit} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {Observable} from 'rxjs';
+import {SearchMode} from 'src/app/core/enums/search-mode';
+import {AnalysisDatabaseService} from 'src/app/core/services/analysis-database-service/analysis.database.service';
+import {ArticleService} from 'src/app/core/services/article-service/article.service';
+import {ElasticsearchService} from 'src/app/core/services/elasticsearch-service/elasticsearch.service';
+import {TranslateService} from '@ngx-translate/core';
+import {SortOption} from '../../../core/enums/serch-result-sort-option';
+
+// import { SearchResultFilterComponent } from '../../../features/search-result/components/search-result-filter/search-result-filter.component';
@Component({
selector: "app-search-bar",
@@ -23,10 +27,13 @@ export class SearchBarComponent implements OnInit {
private _isSearching: boolean = false;
private _isKeyLoaded: boolean;
public relatedKeywords = [];
+ public relatedKeywords_mobile = [];
private searchStatusChange$: Observable = this.elasticsearchService.getSearchStatus();
+ private _institutionList: Array