Commit 6a795d19 authored by jfriedli's avatar jfriedli
Browse files

Merge branch '27-add-possibility-to-view-removed-metadata' into 'develop'

Resolve "add possibility to view removed metadata"

Closes #27

See merge request !109
parents 7fab1499 5dfc0876
Pipeline #31242 passed with stages
in 42 minutes and 4 seconds
......@@ -13,7 +13,7 @@ module.exports = {
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
'plugin:vue/strongly-recommended',
'@vue/standard'
],
......@@ -47,8 +47,6 @@ module.exports = {
'import/no-extraneous-dependencies': 'off',
'prefer-promise-reject-errors': 'off',
// allow console.log during development only
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
......
......@@ -57,7 +57,12 @@ module.exports = function (ctx) {
'QItemLabel',
'QList',
'QDialog',
'QCardSection'
'QCardSection',
'QMenu',
'QTable',
'QTh',
'QTr',
'QTd'
],
directives: [
......
<template>
<div id="q-app">
<router-view/>
<router-view />
</div>
</template>
......
......@@ -8,15 +8,16 @@
>
<q-list>
<q-item
v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`"
v-for="(lang, i) in $i18n.availableLocales"
:key="`Lang${i}`"
v-close-popup
:value="lang"
clickable
v-close-popup
@click="language = lang"
data-cy="locale-select-item"
@click="language = lang"
>
<q-item-section>
<q-item-label>{{lang | truncate | capitalize()}}</q-item-label>
<q-item-label>{{ lang | truncate | capitalize() }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
......@@ -25,18 +26,7 @@
<script>
export default {
name: 'language-selector',
watch: {
language (lang) {
this.$root.$emit('locale_changed', lang)
this.$root.$i18n.locale = lang
}
},
data: function () {
return {
language: this.$i18n.locale
}
},
name: 'LanguageSelector',
filters: {
truncate: function (value) {
if (!value) return ''
......@@ -48,6 +38,17 @@ export default {
value = value.toString()
return value.toUpperCase()
}
},
data: function () {
return {
language: this.$i18n.locale
}
},
watch: {
language (lang) {
this.$root.$emit('locale_changed', lang)
this.$root.$i18n.locale = lang
}
}
}
</script>
<template>
<q-dialog v-model="active" transition-show="rotate" transition-hide="rotate">
<q-card>
<q-card-section>
<div class="text-h6">Terms of Agreement</div>
</q-card-section>
<q-menu cover>
<q-list>
<q-item
clickable
@click="showDialog()"
>
<q-item-section
data-cy="metadata-dialog-menu-entry-show"
>
{{ $t('show_removed_metadata') }}
</q-item-section>
</q-item>
</q-list>
<q-dialog
v-model="active"
transition-show="rotate"
transition-hide="rotate"
>
<q-card>
<q-card-section
class="row"
>
<q-btn
v-close-popup="2"
class="col-12 justify-end"
icon="close"
flat
round
dense
align="right"
data-cy="metadata-dialog-close-button"
/>
</q-card-section>
<q-card-section>
<p v-for="n in 15" :key="n">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.</p>
</q-card-section>
<q-card-section
v-if="getRemovedMetadataTableData.length < 1 && getRemainingMetadataTableData.length < 1"
>
{{ $t('no_removed_no_remaining_metadata') }}
</q-card-section>
<q-card-section>
<q-table
v-if="getRemovedMetadataTableData.length > 0"
:title="$t('removed_metadata')"
:data="getRemovedMetadataTableData"
:columns="columns"
row-key="name"
:pagination-label="getPaginationLabel"
:rows-per-page-label="$t('records_per_page')"
data-cy="metadata-removed-table"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<b>{{ col.label }}</b>
</q-th>
</q-tr>
</template>
</q-table>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Decline" color="primary" v-close-popup />
<q-btn flat label="Accept" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
<q-card-section>
<q-table
v-if="getRemainingMetadataTableData.length > 0"
:title="$t('remaining_metadata')"
:data="getRemainingMetadataTableData"
:columns="columns"
row-key="name"
:pagination-label="getPaginationLabel"
:rows-per-page-label="$t('records_per_page')"
data-cy="metadata-remaining-table"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<b>{{ col.label }}</b>
</q-th>
</q-tr>
</template>
</q-table>
</q-card-section>
</q-card>
</q-dialog>
</q-menu>
</template>
<script>
export default {
name: 'metadata-visualizer',
name: 'MetadataVisualizer',
props: {
metadata: Object,
active: Boolean
deletedMetadata: {
type: Object,
default: function () {
return {}
}
},
remainingMetadata: {
type: Object,
default: function () {
return {}
}
}
},
data: function () {
return {
active: false,
columns: [
{ name: 'label', label: this.$t('label'), field: 'label', sortable: true },
{ name: 'value', label: this.$t('value'), field: 'value', sortable: true }
]
}
},
computed: {
getRemovedMetadataTableData () {
return this.restructureTableData(this.deletedMetadata)
},
getRemainingMetadataTableData () {
return this.restructureTableData(this.remainingMetadata)
}
},
methods: {
showDialog () {
this.active = true
},
restructureTableData (data) {
const tmpMeta = []
for (const key in data) {
const tmpObj = {}
tmpObj.label = key
tmpObj.value = data[key]
tmpMeta.push(tmpObj)
}
return tmpMeta
},
getPaginationLabel (firstRowIndex, endRowIndex, totalRowsNumber) {
return firstRowIndex + '-' + endRowIndex + ' ' + this.$t('of') + ' ' + totalRowsNumber
}
}
}
</script>
/**
* little helper class to import the languages from uppy
*/
......
......@@ -29,5 +29,14 @@ export default {
'Zum Beispiel speichern Kameras Dateiinformationen über den Zeitpunkt einer Aufnahme und welche Kamera dafür verwendet wurde.\n' +
'Dokumente, wie PDF oder Docx, fügen automatisch Informationen zu Autor*in oder Unternehmen zum Dokument hinzu.\n' +
'Du willst all diese Informationen gar nicht veröffentlichen?',
mat_what_is_metadata_3: 'Hier kann dir MAT2 helfen: Es beseitigt so viele Metadaten wie möglich\n'
mat_what_is_metadata_3: 'Hier kann dir MAT2 helfen: Es beseitigt so viele Metadaten wie möglich\n',
show_removed_metadata: 'Details über Metadaten anzeigen',
show_remaining_metadata: 'Übrige Metadaten anzeigen',
no_removed_no_remaining_metadata: 'Glückwunsch, es gibt nichts anzuzeigen!',
removed_metadata: 'Entfernte Metadaten',
remaining_metadata: 'Verbleibende Metadaten',
label: 'Bezeichnung',
value: 'Wert',
of: 'von',
records_per_page: 'Einträge pro Seite'
}
......@@ -29,5 +29,14 @@ export default {
'For example, cameras store file information about the time of a shot and which camera was used for it.\n' +
'Documents, such as PDF or Words, automatically add author or company information to the document.\n' +
'You don\'t want to publish all this information at all?',
mat_what_is_metadata_3: 'This is precisely the job of MAT2: getting rid, as much as possible, of metadata.\n'
mat_what_is_metadata_3: 'This is precisely the job of MAT2: getting rid, as much as possible, of metadata.\n',
show_removed_metadata: 'Show details about metadata',
show_remaining_metadata: 'Show remaining metadata',
no_removed_no_remaining_metadata: 'Congrats, nothing to show!',
removed_metadata: 'Removed Metadata',
remaining_metadata: 'Remaining Metadata',
label: 'Label',
value: 'Value',
of: 'of',
records_per_page: 'Records per page'
}
......@@ -29,5 +29,14 @@ export default {
'Por ejemplo, las cámaras almacenan información de archivo sobre cuándo se tomó una toma y qué cámara se utilizó.\n' +
'Documentos como PDF o Docx añaden automáticamente información sobre el autor o la empresa al documento.\n' +
'¿No quieres publicar toda esta información?',
mat_what_is_metadata_3: 'Aquí es donde MAT2 puede ayudar: Elimina tantos metadatos como sea posible.\n'
mat_what_is_metadata_3: 'Aquí es donde MAT2 puede ayudar: Elimina tantos metadatos como sea posible.\n',
show_removed_metadata: 'Mostrar detalles sobre los metadatos',
show_remaining_metadata: 'Mostrar los metadatos restantes',
no_removed_no_remaining_metadata: '¡Felicidades, nada que mostrar!',
removed_metadata: 'Metadatos eliminados',
remaining_metadata: 'Metadatos restantes',
label: 'Etiqueta',
value: 'Valor',
of: 'de',
records_per_page: 'Registros por página'
}
......@@ -29,5 +29,14 @@ export default {
'Par exemple, les caméras stockent des informations de fichier sur l\'heure d\'une prise de vue et sur la caméra qui a été utilisée pour cette prise de vue.\n' +
'Les documents Office tels que PDF ou Words ajoutent automatiquement des informations d\'auteu.r.ice ou d\'entreprise au document.\n' +
'Tu ne veux pas publier toutes ces informations?',
mat_what_is_metadata_3: 'Ici MAT2 peut t\'aider: Il supprime autant de métadonnées que possible.\n'
mat_what_is_metadata_3: 'Ici MAT2 peut t\'aider: Il supprime autant de métadonnées que possible.\n',
show_removed_metadata: 'Afficher les détails sur les métadonnées',
show_remaining_metadata: 'Afficher les métadonnées restantes',
no_removed_no_remaining_metadata: 'Félicitations, rien à montrer!',
removed_metadata: 'Métadonnées supprimées',
remaining_metadata: 'Métadonnées restantes',
label: 'Étiquette',
value: 'Valeur',
of: 'de',
records_per_page: 'Enregistrements par page'
}
......@@ -5,9 +5,9 @@ import esES from './es-es'
import itIt from './it-it'
export default {
'en_US': enUS,
'de_DE': deDe,
'fr_FR': frFR,
'es_ES': esES,
'it_IT': itIt
en_US: enUS,
de_DE: deDe,
fr_FR: frFR,
es_ES: esES,
it_IT: itIt
}
......@@ -29,5 +29,14 @@ export default {
'Ad esempio, le telecamere memorizzano informazioni sui file relativi a quando è stato scattato uno scatto e a quale telecamera è stata utilizzata.\n' +
'Documenti come PDF o Docx aggiungono automaticamente al documento informazioni sull\'autore o sull\'azienda.\n' +
'Non vuoi pubblicare tutte queste informazioni?',
mat_what_is_metadata_3: 'Qui è dove MAT2 può aiutare: Elimina il maggior numero possibile di metadati.\n'
mat_what_is_metadata_3: 'Qui è dove MAT2 può aiutare: Elimina il maggior numero possibile di metadati.\n',
show_removed_metadata: 'Mostra dettagli sui metadati',
show_remaining_metadata: 'Mostra i metadati rimanenti',
no_removed_no_remaining_metadata: 'Congratulazioni, niente da mostrare!',
removed_metadata: 'Metadati rimossi',
remaining_metadata: 'Metadati rimanenti',
label: 'Etichetta',
value: 'Valore',
of: 'di',
records_per_page: 'Record per pagina'
}
......@@ -14,14 +14,18 @@
/>
<div class="header-div column items-center">
<router-link to="/">
<img id="mat-logo" src="~/assets/logo.svg" alt="Logo of the mat-2 project">
<img
id="mat-logo"
src="~/assets/logo.svg"
alt="Logo of the mat-2 project"
>
</router-link>
</div>
<language-selector class="lang-select"></language-selector>
<language-selector class="lang-select" />
</q-header>
<q-page-container>
<vue-page-transition name="fade-in-right">
<router-view />
<router-view />
</vue-page-transition>
</q-page-container>
<q-footer class="text-center bg-white">
......@@ -32,7 +36,7 @@
rel="noreferrer"
href="https://0xacab.org/jfriedli/mat2-quasar-frontend"
>
<q-icon name="code"></q-icon> source
<q-icon name="code" /> source
</a>
</q-footer>
</q-layout>
......
......@@ -2,29 +2,42 @@
<q-page padding>
<div v-if="cleanedFiles">
<section class="row full-height full-width text-center">
<div class="mat-shadowed-box col-xs-10 offset-xs-1
<div
v-if="cleanedFiles.successful.length > 0"
class="mat-shadowed-box col-xs-10 offset-xs-1
col-sm-6 offset-sm-3 col-md-8 offset-md-2
col-lg-6 offset-lg-3"
v-if="cleanedFiles.successful.length > 0"
>
<h1 data-cy="removed-metadata-title">{{$t('metadata_removed')}}</h1>
<p data-cy="removed-metadata-paragraph">{{$t('metadata_managed_to_remove')}}</p>
<q-btn
v-if="cleanedFiles.successful.length > 3"
color="accent"
:label="$t('bulk_download')"
type="a"
:href="bulkZipLink"
icon="done_all"
:loading="zipCreating"
data-cy="zip-download-button"
aria-label="bulk download button"
<h1 data-cy="removed-metadata-title">
{{ $t('metadata_removed') }}
</h1>
<p data-cy="removed-metadata-paragraph">
{{ $t('metadata_managed_to_remove') }}
</p>
<q-btn
v-if="cleanedFiles.successful.length > 3"
color="accent"
:label="$t('bulk_download')"
type="a"
:href="bulkZipLink"
icon="done_all"
:loading="zipCreating"
data-cy="zip-download-button"
aria-label="bulk download button"
/>
<div
v-if="cleanedFiles.successful.length < 4"
class="row standard-padding justify-center"
>
<div
v-for="file of cleanedFiles.successful"
:key="file.id"
:class="'file-download-col col ' + getCardClasses()"
>
</q-btn>
<div class="row standard-padding justify-center" v-if="cleanedFiles.successful.length < 4">
<div
:class="'file-download-col col ' + getCardClasses()"
v-for="file of cleanedFiles.successful" :key="file.id"
<q-card
data-cy="download-card"
class="download-card"
:class="isDeactivated(file.response.data.key)"
>
<a
target="_blank"
......@@ -34,89 +47,83 @@
rel="noreferrer"
@click="deactivate(file.response.data.key)"
>
<q-card
data-cy="download-card"
class="download-card"
:class="isDeactivated(file.response.data.key)"
<q-badge
data-cy="success-badge"
class="badge-style justify-center"
color="green"
floating
>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-h6">Our Planet</div>
<div class="text-subtitle2">by John Doe</div>
</div>
<div class="col-auto">
<q-btn color="grey-7" round flat icon="more_vert">
<q-menu cover auto-close>
<q-list>
<q-item clickable>
<q-item-section>Remove Card</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>Send Feedback</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>Share</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
</q-card-section>
<q-badge data-cy="success-badge" class="badge-style justify-center" color="green" floating>
<q-icon name="done"></q-icon>
</q-badge>
<div
class="uppy-DashboardItem-previewInnerWrap download-card-img"
:style="'background-color: ' + getIcon(file.response.data.mime).color"
>
<div class="uppy-DashboardItem-previewIconWrap">
<span
class="uppy-DashboardItem-previewIcon"
style="color: rgb(226, 81, 73);"
data-cy="download-svg-icon"
v-html="getIcon(file.response.data.mime).icon"
>
</span>
<svg class="icon-preview-bg uppy-DashboardItem-previewIconBg" aria-hidden="true" focusable="false" width="58" height="76" viewBox="0 0 58 76"><rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" /></svg>
</div>
</div>
<q-card-actions>
<q-btn
target="_blank"
icon="save"
class="full-width ellipsis download-btn"
color="secondary"
data-cy="download-link"
:aria-label="'download ' + file.response.data.output_filename + 'button'"
>
{{file.response.data.output_filename | truncate}}
</q-btn>
</q-card-actions>
</q-card>
<metadata-visualizer
:active="isEnabledModal(file.id)"
:metadata="file.response.data.meta"
<q-icon name="done" />
</q-badge>
<div
class="uppy-DashboardItem-previewInnerWrap download-card-img"
:style="'background-color: ' + getIcon(file.response.data.mime).color"
>
</metadata-visualizer>
<div class="uppy-DashboardItem-previewIconWrap">
<span
class="uppy-DashboardItem-previewIcon"
style="color: rgb(226, 81, 73);"
data-cy="download-svg-icon"
v-html="getIcon(file.response.data.mime).icon"
/>
<svg
class="icon-preview-bg uppy-DashboardItem-previewIconBg"
aria-hidden="true"
focusable="false"
width="58"
height="76"
viewBox="0 0 58 76"
><rect
fill="#FFF"
width="58"
height="76"
rx="3"
fill-rule="evenodd"
/></svg>
</div>
</div>
</a>
</div>
<q-card-actions>
<q-btn
target="_blank"
icon="save"
type="a"
:href="file.response.data.download_link"
class="ellipsis download-btn w80"
data-cy="download-link"
:aria-label="'download ' + file.response.data.output_filename + 'button'"
>
{{ file.response.data.output_filename | truncate }}
</q-btn>
<q-btn
color="primary"
class="metadata-btn"
icon="more_vert"
data-cy="metadata-menu-button"
>
<metadata-visualizer
:deleted-metadata="file.response.data.meta"
:remaining-metadata="file.response.data.meta_after"
/>
</q-btn>
</q-card-actions>
</q-card>
</div>
</div>
</div>
<div class="error-box col-xs-10 offset-xs-1
<div
v-if="cleanedFiles.failed.length > 0"
class="error-box col-xs-10 offset-xs-1
col-sm-6 offset-sm-3 col-md-8 offset-md-2