Skip to content

Commit

Permalink
Use d-flex instead of table tag to build upload list
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Jul 26, 2023
1 parent 77c83bf commit 1d0f6f2
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 70 deletions.
36 changes: 12 additions & 24 deletions client/src/components/Upload/Default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,18 @@
</div>
<div ref="uploadBox" class="upload-box upload-box-with-footer" :class="{ highlight: highlightBox }">
<div v-show="showHelper" class="upload-helper"><i class="fa fa-files-o" />Drop files here</div>
<table v-show="!showHelper" ref="uploadTable" class="upload-table ui-table-striped">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
<th>Genome</th>
<th>Settings</th>
<th>Status</th>
<th />
</tr>
</thead>
<tbody>
<DefaultRow
v-for="(uploadItem, uploadIndex) in uploadList"
:key="uploadIndex"
:extension="extension"
:extensions="extensions"
:genome="genome"
:listExtensions="listExtensions"
:listGenomes="listGenomes"
:model="uploadItem" />
</tbody>
</table>
<div v-show="!showHelper" ref="uploadTable" class="upload-table ui-table-striped">
<DefaultRow
v-for="(uploadItem, uploadIndex) in uploadList"
:key="uploadIndex"
:extension="extension"
:extensions="extensions"
:genome="genome"
:listExtensions="listExtensions"
:listGenomes="listGenomes"
:model="uploadItem"
:index="uploadIndex" />
</div>
</div>
<div class="upload-footer">
<span class="upload-footer-title">Type (set all):</span>
Expand Down
93 changes: 48 additions & 45 deletions client/src/components/Upload/DefaultRow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const props = defineProps({
extension: String,
genome: String,
model: Object,
index: String,
});
const id = computed(() => props.model.id);
Expand All @@ -24,57 +25,59 @@ const status_classes = {
</script>

<template>
<tr :id="`upload-row-${id}`" class="upload-row">
<td>
<div class="upload-text-column">
<div v-if="model.file_mode == 'new'" class="upload-mode upload-mode-text fa fa-edit" />
<div v-if="model.file_mode == 'local'" class="upload-mode fa fa-laptop" />
<div v-if="model.file_mode == 'ftp'" class="upload-mode fa fa-folder-open-o" />
<b-input v-model="model.file_name" class="upload-title ml-2 border rounded" />
<div :id="`upload-row-${id}`" class="upload-row p-2" :class="{ 'bg-light': index % 2 === 0 }">
<div class="d-flex justify-content-around">
<div>
<div class="upload-text-column">
<div v-if="model.file_mode == 'new'" class="upload-mode upload-mode-text fa fa-edit" />
<div v-if="model.file_mode == 'local'" class="upload-mode fa fa-laptop" />
<div v-if="model.file_mode == 'ftp'" class="upload-mode fa fa-folder-open-o" />
<b-input v-model="model.file_name" class="upload-title ml-2 border rounded" />

Check failure on line 35 in client/src/components/Upload/DefaultRow.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18) 

Unexpected mutation of "model" prop
</div>
</div>
<div v-if="model.file_mode == 'new'" class="upload-text">
<div class="upload-text-info">
Download data from the web by entering URLs (one per line) or directly paste content.
<div>
<div class="upload-size">
{{ bytesToString(model.file_size) }}
</div>
<textarea class="upload-text-content form-control" />
</div>
</td>
<td>
<div class="upload-size">
{{ bytesToString(model.file_size) }}
<div>
<div class="upload-extension float-left mr-3">
<select2 v-model="model.extension">

Check failure on line 45 in client/src/components/Upload/DefaultRow.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18) 

Component name "select2" is not PascalCase

Check failure on line 45 in client/src/components/Upload/DefaultRow.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18) 

Unexpected mutation of "model" prop
<option v-for="(ext, index) in extensions" :key="index" :value="ext.id">{{ ext.text }}</option>
</select2>
</div>
<div class="upload-extension-info upload-icon-button fa fa-search" />
</div>
</td>
<td>
<div class="upload-extension float-left mr-3">
<select2 v-model="model.extension">
<option v-for="(ext, index) in extensions" :key="index" :value="ext.id">{{ ext.text }}</option>
</select2>
<div>
<div class="upload-genome">
<select2 v-model="model.genome">

Check failure on line 53 in client/src/components/Upload/DefaultRow.vue

View workflow job for this annotation

GitHub Actions / client-unit-test (18) 

Component name "select2" is not PascalCase
<option v-for="(listGenome, index) in listGenomes" :key="index" :value="listGenome.id">
{{ listGenome.text }}
</option>
</select2>
</div>
</div>
<div class="upload-extension-info upload-icon-button fa fa-search" />
</td>
<td>
<div class="upload-genome">
<select2 v-model="model.genome">
<option v-for="(listGenome, index) in listGenomes" :key="index" :value="listGenome.id">
{{ listGenome.text }}
</option>
</select2>
<div>
<div class="upload-settings upload-icon-button fa fa-gear" />
</div>
</td>
<td>
<div class="upload-settings upload-icon-button fa fa-gear" />
</td>
<td>
<div class="upload-info">
<div class="upload-info-text" />
<div class="upload-info-progress progress">
<div class="upload-progress-bar progress-bar progress-bar-success" />
<div class="upload-percentage">0%</div>
<div>
<div class="upload-info">
<div class="upload-info-text" />
<div class="upload-info-progress progress">
<div class="upload-progress-bar progress-bar progress-bar-success" />
<div class="upload-percentage">0%</div>
</div>
</div>
</div>
</td>
<td>
<div class="upload-symbol" :class="status_classes.init" />
</td>
</tr>
<div>
<div class="upload-symbol" :class="status_classes.init" />
</div>
</div>
<div v-if="model.file_mode == 'new'" class="upload-text">
<div class="upload-text-info">
Download data from the web by entering URLs (one per line) or directly paste content.
</div>
<textarea class="upload-text-content form-control" />
</div>
</div>
</template>
14 changes: 13 additions & 1 deletion client/src/style/scss/upload.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@
.upload-text-column {
position: relative;
.upload-text {
//position: absolute;
position: absolute;
.upload-text-content {
width: 100%;
height: 80px;
Expand Down Expand Up @@ -177,6 +177,18 @@
}
}
}
.upload-text-content {
width: 100%;
height: 80px;
resize: none;
background: inherit;
color: $text-color;
white-space: pre;
overflow: auto;
}
.upload-text-info {
@extend .text-primary;
}
.upload-rule-option {
padding-top: 20px;
.upload-rule-option-title {
Expand Down

0 comments on commit 1d0f6f2

Please sign in to comment.