Merge pull request #329 from sbs20/staging

Landscape / file rename
sbs20 · Aug 18, 2021 · 633e80d · 633e80d
2 parents 199efea + d143478
commit 633e80d
Show file tree

Hide file tree

Showing 24 changed files with 434 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scanservjs",
-  "version": "2.16.2",
+  "version": "2.17.0",
   "description": "scanservjs is a simple web-based UI for SANE which allows you to share a scanner on a network without the need for drivers or complicated installation.",
   "scripts": {
     "clean": "rm -rf ./dist",

diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scanservjs",
-  "version": "2.16.2",
+  "version": "2.17.0",
   "description": "scanservjs is a simple web-based UI for SANE which allows you to share a scanner on a network without the need for drivers or complicated installation.",
   "author": "Sam Strachan",
   "scripts": {

diff --git a/packages/client/src/components/Files.vue b/packages/client/src/components/Files.vue
@@ -1,24 +1,51 @@
 <template>
-  <v-simple-table>
-    <thead>
-      <tr>
-        <th><v-checkbox @change="selectToggle" /></th>
-        <th>{{ $t('files.filename') }}</th>
-        <th class="file-date">{{ $t('files.date') }}</th>
-        <th>{{ $t('files.size') }}</th>
-        <th><v-btn v-if="selectedFiles.length > 0" color="red" v-on:click="multipleDelete()" icon><v-icon>mdi-delete</v-icon></v-btn></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="file in files" v-bind:key="file.name">
-        <td><v-checkbox v-model="selectedFiles" :value="file.name" /></td>
-        <td><a @click="open(file)">{{ file.name }}</a></td>
-        <td class="file-date">{{ $d(new Date(file.lastModified), 'long', $i18n.locale) }}</td>
-        <td>{{ file.sizeString }}</td>
-        <td><v-btn color="secondary" v-on:click="fileRemove(file)" icon><v-icon>mdi-delete</v-icon></v-btn></td>
-      </tr>
-    </tbody>
-  </v-simple-table> 
+  <v-data-table
+      :headers="headers"
+      :items="files"
+      v-model="selectedFiles"
+      item-key="name"
+      show-select>
+    <template v-slot:top>
+      <v-toolbar flat>
+      <v-spacer></v-spacer>
+      <v-btn @click="multipleDelete" color="primary">{{ $t('files.button:delete-selected') }}</v-btn>
+      <v-dialog v-model="dialogEdit" max-width="500px">
+        <v-card>
+          <v-card-title class="text-h5">{{ $t('files.dialog:rename') }}</v-card-title>
+          <v-card-text>
+            <v-container>
+              <v-text-field v-model="editedItem.newName" :label="$t('files.filename')">
+              </v-text-field>
+            </v-container>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn @click="closeRename">
+              {{ $t('files.dialog:rename-cancel') }}
+            </v-btn>
+            <v-btn @click="renameFileConfirm" color="primary">
+              {{ $t('files.dialog:rename-save') }}
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+      </v-toolbar>
+    </template>
+    <template v-slot:[`item.lastModified`]="{ item }">
+      {{ $d(new Date(item.lastModified), 'long', $i18n.locale) }}
+    </template>
+    <template v-slot:[`item.actions`]="{ item }">
+      <v-icon @click="open(item)" class="mr-2">
+        mdi-download
+      </v-icon>
+      <v-icon @click="fileRename(item)" class="mr-2">
+        mdi-pencil
+      </v-icon>
+      <v-icon @click="fileRemove(item)" class="mr-2">
+        mdi-delete
+      </v-icon>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
@@ -33,19 +60,54 @@ export default {
 
   data() {
     return {
+      dialogDelete: false,
+      dialogEdit: false,
+      headers: [
+        {
+          text: this.$t('files.filename'),
+          align: 'start',
+          sortable: true,
+          value: 'name',
+        }, {
+          text: this.$t('files.date'),
+          align: 'start',
+          sortable: true,
+          value: 'lastModified',
+        }, {
+          text: this.$t('files.size'),
+          align: 'start',
+          sortable: true,
+          value: 'sizeString',
+        },
+        {text: this.$t('files.actions'), value: 'actions', sortable: false},
+      ],
       files: [],
+      editedItem: {
+        name: '',
+        newName: ''
+      },
+      defaultItem: {
+        name: '',
+        newName: ''
+      },
       selectedFiles: []
     };
   },
 
+  watch: {
+    dialogEdit(val) {
+      val || this.closeRename();
+    },
+  },
+
   methods: {
     fileList() {
       this.$emit('mask', 1);
       Common.fetch('files').then(files => {
         this.files = files;
         this.$emit('mask', -1);
       }).catch(error => {
-        this.$emit('notify', { type: 'e', message: error });
+        this.$emit('notify', {type: 'e', message: error});
         this.$emit('mask', -1);
       });
     },
@@ -55,25 +117,61 @@ export default {
       Common.fetch(`files/${file.name}`, {
         method: 'DELETE'
       }).then(data => {
-        this.$emit('notify', { type: 'i', message: `${this.$t('files.message:deleted')} ${data.name}` });
+        this.$emit('notify', {type: 'i', message: `${this.$t('files.message:deleted')} ${data.name}`});
+        this.fileList();
+        this.$emit('mask', -1);
+      }).catch(error => {
+        this.$emit('notify', {type: 'e', message: error});
+        this.$emit('mask', -1);
+      });
+    },
+
+    fileRename(file) {
+      this.editedIndex = this.files.indexOf(file);
+      this.editedItem = Object.assign({}, file);
+      this.editedItem.newName = this.editedItem.name;
+      this.dialogEdit = true;
+    },
+
+    renameFileConfirm() {
+      this.$emit('mask', 1);
+      Common.fetch(`files/${this.editedItem.name}`, {
+        method: 'PUT',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({newName: this.editedItem.newName})
+      }).then(() => {
+        this.$emit('notify', {type: 'i', message: `${this.$t('files.message:renamed')}`});
         this.fileList();
         this.$emit('mask', -1);
       }).catch(error => {
-        this.$emit('notify', { type: 'e', message: error });
+        this.$emit('notify', {type: 'e', message: error});
         this.$emit('mask', -1);
+      }).finally(() => {
+        this.closeRename();
+      });
+    },
+
+    closeRename() {
+      this.dialogEdit = false;
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
       });
     },
 
     async multipleDelete() {
       let refresh = false;
       while (this.selectedFiles.length > 0) {
         refresh = true;
-        const name = this.selectedFiles[0];
+        const name = this.selectedFiles[0].name;
         try {
-          await Common.fetch(`files/${name}`, { method: 'DELETE' });
-          this.$emit('notify', { type: 'i', message: `${this.$t('files.message:deleted')} ${name}` });
+          await Common.fetch(`files/${name}`, {method: 'DELETE'});
+          this.$emit('notify', {type: 'i', message: `${this.$t('files.message:deleted')} ${name}`});
         } catch (error) {
-          this.$emit('notify', { type: 'e', message: error });
+          this.$emit('notify', {type: 'e', message: error});
         }
         this.selectedFiles.splice(0, 1);
       }
@@ -96,4 +194,4 @@ export default {
 
 <style>
 
-</style>
+</style>
diff --git a/packages/client/src/components/Navigation.vue b/packages/client/src/components/Navigation.vue
@@ -22,7 +22,7 @@
           <v-list-item-icon><v-icon>mdi-camera</v-icon></v-list-item-icon>
           <v-list-item-title>{{ $t('navigation.scan') }}</v-list-item-title>
         </v-list-item>
-    
+
         <v-list-item @click="go('/files')">
           <v-list-item-icon><v-icon>mdi-file-document-multiple</v-icon></v-list-item-icon>
           <v-list-item-title>{{ $t('navigation.files') }}</v-list-item-title>
@@ -55,7 +55,7 @@
       </template>
 
     </v-navigation-drawer>
-  </div>  
+  </div>
 </template>
 
 <script>
@@ -95,4 +95,4 @@ export default {
   -ms-user-select: none;
   user-select: none;
 }
-</style>
+</style>
diff --git a/packages/client/src/components/Scan.vue b/packages/client/src/components/Scan.vue
@@ -73,7 +73,7 @@
           <template v-slot:activator="{ on, attrs }">
             <v-btn color="primary" v-bind="attrs" v-on="on">{{ $t('scan.paperSize') }}</v-btn>
           </template>
-          <v-list>
+          <v-list dense>
             <v-list-item
               v-for="(item, index) in paperSizes"
               @click="updatePaperSize(item)"
@@ -223,9 +223,15 @@ export default {
         y: this.device.features['-y'].limits[1]
       };
 
-      const paperSizes = this.context.paperSizes
-        .filter(paper => paper.dimensions.x <= deviceSize.x && paper.dimensions.y <= deviceSize.y);
-      return paperSizes;
+      return this.context.paperSizes
+        .filter(paper => paper.dimensions.x <= deviceSize.x && paper.dimensions.y <= deviceSize.y)
+        .map(paper => {
+          const variables = (paper.name.match(/@:[a-z-.]+/ig) || []).map(s => s.substr(2));
+          variables.forEach(v => {
+            paper.name = paper.name.replaceAll(`@:${v}`, this.$t(v));
+          });
+          return paper;
+        });
     },
 
     pipelines() {

diff --git a/packages/client/src/locales/cs.json b/packages/client/src/locales/cs.json
@@ -35,15 +35,21 @@
   "batch-dialog": {
     "btn-cancel": "Zrušení",
     "btn-finish": "Dokončit",
-    "btn-rescan": "Znovu oskenovat",
+    "btn-rescan": "Oskenovat znovu",
     "btn-next": "Další"
   },
 
   "files": {
     "filename": "Název souboru",
     "date": "Datum",
     "size": "Velikost",
-    "message:deleted": "Odstraněno"
+    "message:deleted": "Odstraněno",
+    "message:renamed": "Soubor byl přejmenován",
+    "button:delete-selected": "Odstranit vybrané",
+    "dialog:rename": "Změnit název souboru",
+    "dialog:rename-cancel": "Zrušit",
+    "dialog:rename-save": "Uložit",
+    "actions": "Akce"
   },
 
   "navigation": {
@@ -65,7 +71,7 @@
   "filter": {
     "auto-level": "Automatické zarovnání",
     "threshold": "Práh",
-    "blur": "Rozmazané"
+    "blur": "Rozostření"
   },
 
   "mode": {
@@ -107,6 +113,17 @@
     "text-file": "Textový soubor"
   },  
 
+  "paper-size": {
+    "letter": "Letter",
+    "legal": "Legal",
+    "tabloid": "Tabloid",
+    "ledger": "Ledger",
+    "junior-legal": "Junior legal",
+    "half-letter": "Half letter",
+    "portrait": "Na výšku",
+    "landscape": "Na šířku"
+  },
+
   "scan": {
     "device": "Zařízení",
     "source": "Zdroj",
@@ -141,7 +158,7 @@
     "locale": "Lokalizace",
     "locale:description": "Vyberte vaši lokalizaci",
     "theme": "Motiv",
-    "theme:description": "Motiv. Pokud použijete systémový motiv a ten se změní, budete potřebovat aktualizovat stránku s aplikací.",
+    "theme:description": "Motiv. Pokud použijete systémový motiv a dojde ke změně, budete potřebovat aktualizovat stránku s aplikací.",
     "theme:system": "Podle systému",
     "theme:light": "Světlý",
     "theme:dark": "Tmavý",