bug-fixes/category-tag-creator (#266)

* fix category labels

* set loader for migration

* v0.4.1

Co-authored-by: hay-kot <hay-kot@pm.me>

docs/docs/changelog/v0.4.1.md

@@ -4,6 +4,13 @@
 
 **Database Version: v0.4.0**
 
+!!! error "Breaking Changes"
+
+    #### Recipe Images
+    While it *shouldn't* be a breaking change, I feel it is important to note that you may experience issues with the new image migration. Recipe images are now minified, this is done on start-up, import, migration, and when a new recipe is created. The initial boot or load may be a bit slow if you have lots of recipes but you likely won't notice. What you may notice is that if your recipe slug and the image name do not match, you will encounter issues with your images showing up. This can be resolved by finding the image directory and rename it to the appropriate slug. I did fix multiple edge cases, but it is likely more exists. As always make a backup before you update! 
+
+    On the plus side, this comes with a huge performance increase! 🎉
+
 - Add markdown support for ingredients - Resolves #32
 - Ingredients editor improvements
 - Fix Tags/Categories render problems on recipes
@@ -20,8 +27,9 @@
     - A 'tiny' image is used for search images. 
 - Advanced Search Page. You can now use the search page to filter recipes to include/exclude tags and categories as well as select And/Or matching criteria. 
 - Added link to advanced search on quick search
-- Better support for Nextcloud imports
+- Better support for NextCloud imports
     - Translate keywords to tags
     - Fix rollback on failure
+- Recipe Tag/Category Input components have been unified and now share a single way to interact. To add a new category in the recipe editor you need to click to '+' icon next to the input and fill out the form. This is the same for adding a Tag. 
 
 

frontend/src/components/Admin/General/CreatePageDialog.vue

@@ -23,6 +23,7 @@
             v-model="page.categories"
             ref="categoryFormSelector"
             @mounted="catMounted = true"
+            tag-selector="false"
           />
         </v-card-text>
 

frontend/src/components/Admin/General/HomePageSettings.vue

@@ -84,7 +84,7 @@
               </v-toolbar-title>
 
               <v-spacer></v-spacer>
-              <NewCategoryTagDialog />
+              <NewCategoryTagDialog :tag-dialog="false" />
             </v-app-bar>
             <v-list height="300" dense style="overflow:auto">
               <v-list-item-group>

frontend/src/components/Admin/Migration/MigrationCard.vue

@@ -40,7 +40,13 @@
           <v-btn color="error" text @click="deleteMigration(migration.name)">
             {{ $t("general.delete") }}
           </v-btn>
-          <v-btn color="accent" text @click="importMigration(migration.name)">
+          <v-btn
+            color="accent"
+            text
+            @click="importMigration(migration.name)"
+            :loading="loading"
+            :disabled="loading"
+          >
             {{ $t("general.import") }}
           </v-btn>
         </v-card-actions>
@@ -82,10 +88,10 @@ export default {
       this.$emit("refresh");
     },
     async importMigration(file_name) {
-      this.loading == true;
+      this.loading = true;
       let response = await api.migrations.import(this.folder, file_name);
       this.$emit("imported", response.successful, response.failed);
-      this.loading == false;
+      this.loading = false;
     },
     readableTime(timestamp) {
       let date = new Date(timestamp);

frontend/src/components/UI/Dialogs/NewCategoryTagDialog.vue

@@ -60,8 +60,7 @@ export default {
       dialog: false,
       itemName: "",
       rules: {
-        required: val =>
-          !!val || this.$t("settings.theme.theme-name-is-required"),
+        required: val => !!val || "A Name is Required",
       },
     };
   },
@@ -71,7 +70,7 @@ export default {
       return this.tagDialog ? "Create a Tag" : "Create a Category";
     },
     inputLabel() {
-      return this.tagDialog ? "Tag Name" : "Tag Category";
+      return this.tagDialog ? "Tag Name" : "Category Name";
     },
   },
   watch: {