wallpapers updates

src/pages/Wallpapers.vue

@@ -14,86 +14,49 @@
     <b-container>
       <!-- TODO: convert to form -->
       <!-- TODO: translate "browse" -->
-      <!-- TODO: display file names -->
-      <h5>{{ $t('wallpapers.form.label') }}</h5>
 
       <b-row class="mb-3">
         <b-col cols="12" lg="6" class="mb-4">
           <b-form-group
             :description="$t('wallpapers.form.helperText')"
+            :label="$t('wallpapers.form.label')"
           >
             <b-form-file
               v-model="file"
               accept="image/*"
+              :browse-text="$t('wallpapers.form.upload')"
               :placeholder="$t('wallpapers.form.placeholder')"
+              @input="uploadWallpaper"
             />
           </b-form-group>
 
-          <b-alert v-if="isDuplicate && !saving" show variant="warning">
+          <b-alert v-if="isDuplicate && !saving && file && file.name" show variant="warning">
             {{ $t('wallpapers.form.duplicateMessage', { fileName: file.name }) }}
           </b-alert>
-
-          <b-button
-            @click="uploadWallpaper"
-            variant="primary"
-            :disabled="!Boolean(file) || saving || isDuplicate"
-          >
-            <b-spinner small v-if="saving" />
-            <span v-else>{{ $t('wallpapers.form.upload') }}</span>
-          </b-button>
         </b-col>
       </b-row>
 
       <h5>{{ $t('wallpapers.list.title') }}</h5>
 
-      <b-row
+      <b-card
         v-if="wallpapers.length"
         v-for="wallpaper in wallpapers"
         :key="wallpaper.name"
-        no-gutters
+        :img-src="wallpaper.url"
-        class="mb-4 border-bottom pb-4"
+        :img-alt="wallpaper.name"
+        img-left
+        img-width="180"
+        class="mb-3"
       >
-        <b-col cols="6" lg="3" class="pr-3">
+        <p>{{ wallpaper.name }}</p>
-          <b-img
+        <b-button
-           :src="wallpaper.url"
+          variant="danger"
-           thumbnail
+          size="sm"
-           class="rounded-0"
+          @click="confirmDeleteWallpaper(wallpaper)"
-         />
-        </b-col>
-
-        <b-col cols="6">
-          <p>{{ wallpaper.name }}</p>
-          <b-button
-            variant="danger"
-            size="sm"
-            @click="confirmDeleteWallpaper(wallpaper)"
-          >
-            <icon name="trash" white />
-          </b-button>
-        </b-col>
-      </b-row>
-
-      <!-- <b-form-row v-if="wallpapers.length">
-        <b-col cols="12">
-        </b-col>
-        <b-col
-          v-for="wallpaper in wallpapers"
-          :key="wallpaper.name"
-          cols="6"
-          sm="4"
-          lg="3"
         >
-          <b-card
+          <icon name="trash" white />
-            class="mb-2"
+        </b-button>
-            header-class="py-0 px-2"
+      </b-card>
-            body-class="d-flex p-0 text-center justify-content-center align-items-center"
-            header-tag="small"
-          >
-
-
-          </b-card>
-        </b-col>
-      </b-form-row> -->
 
       <b-alert show v-else>You don't have any wallpapers.</b-alert>
     </b-container>
@@ -130,19 +93,27 @@ export default {
 
   methods: {
     async uploadWallpaper() {
-      const { file } = this;
+      if (this.isDuplicate) {
+        return this.$bvToast.toast('File already exists', { title: '!', variant: 'warning' });
+      }
+
+      if (!this.file) {
+        return;
+      }
+
       this.saving = true;
 
-      await this.$store.dispatch('UPLOAD_WALLPAPER', file)
+      this.$store.dispatch('UPLOAD_WALLPAPER', this.file)
+        .then(() => {
+          this.$bvToast.toast('File uploaded', { title: 'Success', variant: 'success' });
+          this.file = null;
+          this.saving = false;
+          this.$bus.$emit('WALLPAPER_UPLOADED');
+        })
         .catch(() => {
           this.saving = false;
           this.$bvToast.toast('There was an error uploading wallpaper', { title: 'Error', variant: 'danger' });
         });
-
-      this.file = null;
-      this.saving = false;
-      this.$bvToast.toast(file.name, { title: 'File uploaded', variant: 'success' });
-      this.$bus.$emit('WALLPAPER_UPLOADED');
     },
 
     confirmDeleteWallpaper(file) {