From 94560f79ce5cf1ea298d53d365abe4e544ed561e Mon Sep 17 00:00:00 2001
From: Vasco Rato <vasco.rato@fccn.pt>
Date: Mon, 19 Dec 2022 17:26:09 +0000
Subject: [PATCH] Finished changes on citation saver [ closes
 https://github.com/arquivo/pwa-technologies/issues/1147 ]

---
 public/css/styles-citation-saver.css          | 28 +++++++++++++++++++
 public/js/citation-saver.js                   | 11 ++++++++
 src/services-citationsaver.js                 | 15 ++++++----
 translations/services-citation-saver.yml      | 10 ++++++-
 .../body/body-services-citation-saver.ejs     | 16 ++++++++---
 5 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/public/css/styles-citation-saver.css b/public/css/styles-citation-saver.css
index 7e35e20..41062d4 100644
--- a/public/css/styles-citation-saver.css
+++ b/public/css/styles-citation-saver.css
@@ -176,4 +176,32 @@ section#citation-saver-modal form {
 
 section#citation-saver-modal form button {
     width: 103px;
+}
+
+#citation-saver-main > p{
+    line-height: 24px;
+    font-family: "Roboto", sans-serif;
+    font-size: 16px;
+    margin-block-end: 24px;
+    margin-bottom: 24px;
+}
+
+#input-file-selector {
+    display: inline-block;
+    width: 100%;
+    background-color: white;
+    border-radius: 5px;
+    border-color: #C4C4C4;
+    border-width: 1px;
+    border-style: solid;
+    padding: 0 11px 0 0;
+    line-height: 42px;
+}
+#input-file-button {
+    line-height: 29px;
+}
+#input-file-text {
+    color: gray;
+    vertical-align: middle;
+    margin-left: 6px;
 }
\ No newline at end of file
diff --git a/public/js/citation-saver.js b/public/js/citation-saver.js
index bda8ca5..cffbddd 100644
--- a/public/js/citation-saver.js
+++ b/public/js/citation-saver.js
@@ -43,4 +43,15 @@ $(() => {
         });
 
     });
+});
+
+function getFile() {
+}
+  
+$(document).on("click", "#input-file-selector", function(e) {
+    e.preventDefault();
+    $("#input-file-file").click();
+});
+$(document).on("input", "input:file", function(e) {
+    $("#input-file-text").text(e.target.files[0].name);
 });
\ No newline at end of file
diff --git a/src/services-citationsaver.js b/src/services-citationsaver.js
index d6743f1..509433f 100644
--- a/src/services-citationsaver.js
+++ b/src/services-citationsaver.js
@@ -14,12 +14,17 @@ const logger = require('./logger')('CitationSaver');
 
 // Initialize the sheet - doc ID is the long id in the sheets URL
 async function addToSpreadsheet(row) {
-    const doc = new GoogleSpreadsheet(googleSheetId);
-    await doc.useServiceAccountAuth(serviceAccountConfigs)
+    try {
+        const doc = new GoogleSpreadsheet(googleSheetId);
+        await doc.useServiceAccountAuth(serviceAccountConfigs)
 
-    await doc.loadInfo();
-    const sheet = doc.sheetsByIndex[0]; // or use doc.sheetsById[id] or doc.sheetsByTitle[title]
-    await sheet.addRow(row);
+        await doc.loadInfo();
+        const sheet = doc.sheetsByIndex[0]; // or use doc.sheetsById[id] or doc.sheetsByTitle[title]
+        await sheet.addRow(row);
+    } catch (err) {
+        logger.error('Failed to connect to google services. Reason: "'+ err + '". Data: '+JSON.stringify(row));
+    }
+    
 }
 
 const mimeToExtension = {
diff --git a/translations/services-citation-saver.yml b/translations/services-citation-saver.yml
index 77d6c2d..e923a00 100644
--- a/translations/services-citation-saver.yml
+++ b/translations/services-citation-saver.yml
@@ -30,9 +30,17 @@ url:
 upload:
     en: "Upload a document from your computer:"
     pt: 'Carregue um documento a partir do seu computador:'
+upload-selection:
+    button:
+      en: Select a file
+      pt: Selecione um ficheiro
+    default-text:
+      en: No file selected
+      pt: Nenhum ficheiro selecionado
+
 text:
     en: "Insert a text containing URLs:"
-    pt: 'Inserir um texto contendo URLs:'
+    pt: 'Insira um texto contendo URLs:'
 field:
   1:
     en: "Accepted formats: PDF, TXT. Max size: 100 MB"
diff --git a/views/templates/body/body-services-citation-saver.ejs b/views/templates/body/body-services-citation-saver.ejs
index f977bcd..d481dd3 100644
--- a/views/templates/body/body-services-citation-saver.ejs
+++ b/views/templates/body/body-services-citation-saver.ejs
@@ -3,9 +3,9 @@
     <img id="logo-citation-saver" class="image-width" src="/img/CitationSaver.svg" alt="CitationSaver">
     <h4 id="save-page-now-slogan"><%= t('services-citation-saver.slogan') %></h4>
 
-    <p style="line-height: 27px;margin-top: 20px;"><%- t('services-citation-saver.description.1') %></p>
-    <p style="line-height: 27px;"><%- t('services-citation-saver.description.2') %></p>
-    <p style="line-height: 27px;"><%- t('services-citation-saver.description.3') %></p>
+    <p style="margin-top: 20px;"><%- t('services-citation-saver.description.1') %></p>
+    <p><%- t('services-citation-saver.description.2') %></p>
+    <p><%- t('services-citation-saver.description.3') %></p>
 
     <div class="citation-saver-input-selection">
         <input type="radio" name="input-selection" id="input-url" checked="checked">
@@ -26,8 +26,16 @@
         <label for="input-file-upload"><%- t('services-citation-saver.tab.2') %></label>
         <div class="input-tab">
             <form action="/services/citationsaver" method="post" enctype="multipart/form-data">
+                
                 <label for="input-file-file"><%- t('services-citation-saver.upload') %></label>
-                <input type="file" name="file" id="input-file-file">
+                <div id="input-file-selector">
+                    <button id="input-file-button" class="button" type="button"><%- t('services-citation-saver.upload-selection.button') %></button>
+                    <span id="input-file-text"><%- t('services-citation-saver.upload-selection.default-text') %></span>
+                </div>
+                <div style='height: 0px;width:0px; overflow:hidden;'>            
+                    <input type="file" name="file" id="input-file-file" style="visibility:hidden">
+                </div>
+                <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
                 <small><%- t('services-citation-saver.field.1') %></small>