feat(backend): ✨ add rename tag, tool, category support (#875)

frontend/pages/recipes/categories/_slug.vue

@@ -6,12 +6,54 @@
       :title="category.name"
       :recipes="category.recipes"
       @sort="assignSorted"
-    ></RecipeCardSection>
+    >
+      <template #title>
+        <v-btn icon class="mr-1">
+          <v-icon dark large @click="reset">
+            {{ $globals.icons.tags }}
+          </v-icon>
+        </v-btn>
+
+        <template v-if="edit">
+          <v-text-field
+            v-model="category.name"
+            autofocus
+            single-line
+            dense
+            hide-details
+            class="headline"
+            @keyup.enter="updateCategory"
+          >
+          </v-text-field>
+          <v-btn icon @click="updateCategory">
+            <v-icon size="28">
+              {{ $globals.icons.save }}
+            </v-icon>
+          </v-btn>
+          <v-btn icon class="mr-1" @click="reset">
+            <v-icon size="28">
+              {{ $globals.icons.close }}
+            </v-icon>
+          </v-btn>
+        </template>
+
+        <template v-else>
+          <v-tooltip top>
+            <template #activator="{ on, attrs }">
+              <v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
+                {{ category.name }}
+              </v-toolbar-title>
+            </template>
+            <span> Click to Edit </span>
+          </v-tooltip>
+        </template>
+      </template>
+    </RecipeCardSection>
   </v-container>
 </template>
     
 <script lang="ts">
-import { defineComponent, useAsync, useRoute } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useUserApi } from "~/composables/api";
 import { Recipe } from "~/types/api-types/recipe";
@@ -21,13 +63,49 @@ export default defineComponent({
   setup() {
     const api = useUserApi();
     const route = useRoute();
+    const router = useRouter();
     const slug = route.value.params.slug;
 
+    const state = reactive({
+      initialValue: "",
+      edit: false,
+    });
+
     const category = useAsync(async () => {
       const { data } = await api.categories.getOne(slug);
+      if (data) {
+        state.initialValue = data.name;
+      }
       return data;
     }, slug);
-    return { category };
+
+    function reset() {
+      state.edit = false;
+
+      if (category.value) {
+        category.value.name = state.initialValue;
+      }
+    }
+
+    async function updateCategory() {
+      state.edit = false;
+
+      if (!category.value) {
+        return;
+      }
+      const { data } = await api.categories.updateOne(category.value.slug, category.value);
+
+      if (data) {
+        router.push("/recipes/categories/" + data.slug);
+      }
+    }
+
+    return {
+      category,
+      reset,
+      ...toRefs(state),
+      updateCategory,
+    };
   },
   head() {
     return {
@@ -44,6 +122,4 @@ export default defineComponent({
   },
 });
 </script>
-    
-<style scoped>
-</style>
+    

frontend/pages/recipes/categories/index.vue

@@ -1,71 +1,35 @@
 <template>
-  <v-container v-if="categories">
-    <v-app-bar color="transparent" flat class="mt-n1 rounded">
-      <v-icon large left>
-        {{ $globals.icons.tags }}
-      </v-icon>
-      <v-toolbar-title class="headline"> {{ $t("recipe.categories") }} </v-toolbar-title>
-      <v-spacer></v-spacer>
-    </v-app-bar>
-    <section v-for="(items, key, idx) in categoriesByLetter" :key="'header' + idx" :class="idx === 1 ? null : 'my-4'">
-      <BaseCardSectionTitle :title="key"> </BaseCardSectionTitle>
-      <v-row>
-        <v-col v-for="(item, index) in items" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
-          <v-card hover :to="`/recipes/categories/${item.slug}`">
-            <v-card-actions>
-              <v-icon>
-                {{ $globals.icons.tags }}
-              </v-icon>
-              <v-card-title class="py-1">{{ item.name }}</v-card-title>
-              <v-spacer></v-spacer>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </section>
+  <v-container>
+    <RecipeCategoryTagToolPage v-if="categories" :items="categories" item-type="categories" />
   </v-container>
 </template>
-  
+
 <script lang="ts">
-import { computed, defineComponent, useAsync } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync } from "@nuxtjs/composition-api";
+import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
 import { useUserApi } from "~/composables/api";
-import { useAsyncKey } from "~/composables/use-utils";
 
 export default defineComponent({
+  components: {
+    RecipeCategoryTagToolPage,
+  },
   setup() {
-    const api = useUserApi();
-
+    const userApi = useUserApi();
     const categories = useAsync(async () => {
-      const { data } = await api.categories.getAll();
-      return data;
-    }, useAsyncKey());
+      const { data } = await userApi.categories.getAll();
 
-    const categoriesByLetter: any = computed(() => {
-      const catsByLetter: { [key: string]: Array<any> } = {};
-
-      if (!categories.value) return catsByLetter;
-
-      categories.value.forEach((item) => {
-        const letter = item.name[0].toUpperCase();
-        if (!catsByLetter[letter]) {
-          catsByLetter[letter] = [];
-        }
-
-        catsByLetter[letter].push(item);
-      });
-
-      return catsByLetter;
+      if (data) {
+        return data;
+      }
     });
 
-    return { categories, api, categoriesByLetter };
-  },
-  head() {
     return {
-      title: this.$t("sidebar.categories") as string,
+      categories,
     };
   },
+  // head: {
+  //   // @ts-ignore
+  //   title: this.$t("sidebar.categories") as string,
+  // },
 });
-</script>
-  
-<style scoped>
-</style>
+</script>