chore(front): upload form files table

This commit is contained in:
ArneBo 2025-03-25 04:23:53 +01:00
parent 0119075f21
commit 99fee772e0
1 changed files with 78 additions and 65 deletions

View File

@ -22,6 +22,7 @@ import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
import ActionTable from '~/components/common/ActionTable.vue' import ActionTable from '~/components/common/ActionTable.vue'
import Layout from '~/components/ui/Layout.vue' import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Alert from '~/components/ui/Alert.vue' import Alert from '~/components/ui/Alert.vue'
import Pagination from '~/components/ui/Pagination.vue' import Pagination from '~/components/ui/Pagination.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
@ -141,74 +142,86 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
</script> </script>
<template> <template>
<Layout form> <Layout form class="ui form">
<div class="fields"> <Layout stack class="fields">
<div class="field"> <div class="field">
<label for="import-status"> <Input
{{ t('views.content.libraries.FilesTable.label.importStatus') }} id="search"
</label> v-model="query"
<select search
id="import-status" :label="t('views.content.libraries.FilesTable.label.search')"
class="ui dropdown" :placeholder="t('views.content.libraries.FilesTable.placeholder.search')"
:value="getTokenValue('status', '')" />
@change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
>
<option value>
{{ t('views.content.libraries.FilesTable.option.status.all') }}
</option>
<option value="draft">
{{ t('views.content.libraries.FilesTable.option.status.draft') }}
</option>
<option value="pending">
{{ t('views.content.libraries.FilesTable.option.status.pending') }}
</option>
<option value="skipped">
{{ t('views.content.libraries.FilesTable.option.status.skipped') }}
</option>
<option value="errored">
{{ t('views.content.libraries.FilesTable.option.status.failed') }}
</option>
<option value="finished">
{{ t('views.content.libraries.FilesTable.option.status.finished') }}
</option>
</select>
</div> </div>
<div class="field"> <Layout flex>
<label for="ordering-select"> <Spacer grow/>
{{ t('views.content.libraries.FilesTable.ordering.label') }} <div class="field">
</label> <label for="import-status">
<select {{ t('views.content.libraries.FilesTable.label.importStatus') }}
id="ordering-select" </label>
v-model="ordering" <select
class="ui dropdown" id="import-status"
> class="ui dropdown"
<option :value="getTokenValue('status', '')"
v-for="(option, key) in orderingOptions" @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
:key="key"
:value="option[0]"
> >
{{ sharedLabels.filters[option[1]] }} <option value>
</option> {{ t('views.content.libraries.FilesTable.option.status.all') }}
</select> </option>
</div> <option value="draft">
<div class="field"> {{ t('views.content.libraries.FilesTable.option.status.draft') }}
<label for="ordering-direction"> </option>
{{ t('views.content.libraries.FilesTable.ordering.direction.label') }} <option value="pending">
</label> {{ t('views.content.libraries.FilesTable.option.status.pending') }}
<select </option>
id="ordering-direction" <option value="skipped">
v-model="orderingDirection" {{ t('views.content.libraries.FilesTable.option.status.skipped') }}
class="ui dropdown" </option>
> <option value="errored">
<option value="+"> {{ t('views.content.libraries.FilesTable.option.status.failed') }}
{{ t('views.content.libraries.FilesTable.ordering.direction.ascending') }} </option>
</option> <option value="finished">
<option value="-"> {{ t('views.content.libraries.FilesTable.option.status.finished') }}
{{ t('views.content.libraries.FilesTable.ordering.direction.descending') }} </option>
</option> </select>
</select> </div>
</div> <div class="field">
</div> <label for="ordering-select">
{{ t('views.content.libraries.FilesTable.ordering.label') }}
</label>
<select
id="ordering-select"
v-model="ordering"
class="ui dropdown"
>
<option
v-for="(option, key) in orderingOptions"
:key="key"
:value="option[0]"
>
{{ sharedLabels.filters[option[1]] }}
</option>
</select>
</div>
<div class="field">
<label for="ordering-direction">
{{ t('views.content.libraries.FilesTable.ordering.direction.label') }}
</label>
<select
id="ordering-direction"
v-model="orderingDirection"
class="ui dropdown"
>
<option value="+">
{{ t('views.content.libraries.FilesTable.ordering.direction.ascending') }}
</option>
<option value="-">
{{ t('views.content.libraries.FilesTable.ordering.direction.descending') }}
</option>
</select>
</div>
</Layout>
</Layout>
</Layout> </Layout>
<import-status-modal <import-status-modal
v-if="detailedUpload" v-if="detailedUpload"