feature/profile-cards (#391)

* unify format

* pass variables

* remove namespace

* rename

* group-card init

* shuffle + icons

* remove console.logs

* token CRUD

* update changelog

* add profile link

* consolidate mealplan to profile dashboard

* update docs

* add query parameter to search page

* update test routes

* update python depts

* basic token tests

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

frontend/src/pages/Admin/MealPlanner/index.vue

@@ -1,137 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title class="headline">
-      {{ $t("meal-plan.meal-planner") }}
-    </v-card-title>
-    <v-divider></v-divider>
-    <v-card-text>
-      <h2 class="mt-1">{{ $t("recipe.categories") }}</h2>
-
-      <CategoryTagSelector
-        class="mt-4"
-        :solo="true"
-        :dense="false"
-        v-model="groupSettings.categories"
-        :return-object="true"
-        :show-add="true"
-        :hint="$t('meal-plan.only-recipes-with-these-categories-will-be-used-in-meal-plans')"
-      />
-    </v-card-text>
-    <v-divider> </v-divider>
-    <v-card-text>
-      <h2 class="mt-1 mb-4">
-        {{ $t("settings.webhooks.meal-planner-webhooks") }}
-      </h2>
-      <p>
-        {{
-          $t(
-            "settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at"
-          )
-        }}
-        <strong>{{ groupSettings.webhookTime }}</strong>
-      </p>
-
-      <v-row dense class="flex align-center">
-        <v-switch class="mx-2" v-model="groupSettings.webhookEnable" :label="$t('general.enabled')"></v-switch>
-        <TimePickerDialog @save-time="saveTime" class="ma-2" />
-        <v-btn class="ma-2" color="info" @click="testWebhooks">
-          <v-icon left> mdi-webhook </v-icon>
-          {{ $t("settings.webhooks.test-webhooks") }}
-        </v-btn>
-      </v-row>
-
-      <v-row v-for="(url, index) in groupSettings.webhookUrls" :key="index" align=" center" dense>
-        <v-col cols="1">
-          <v-btn icon color="error" @click="removeWebhook(index)">
-            <v-icon>mdi-minus</v-icon>
-          </v-btn>
-        </v-col>
-        <v-col>
-          <v-text-field
-            v-model="groupSettings.webhookUrls[index]"
-            :label="$t('settings.webhooks.webhook-url')"
-          ></v-text-field>
-        </v-col>
-      </v-row>
-    </v-card-text>
-    <v-card-actions>
-      <v-btn icon color="success" @click="addWebhook">
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
-      <v-spacer></v-spacer>
-      <v-btn color="success" @click="saveGroupSettings" class="mr-2 mb-1">
-        <v-icon left> mdi-content-save </v-icon>
-        {{ $t("general.save") }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script>
-import { api } from "@/api";
-import TimePickerDialog from "@/components/FormHelpers/TimePickerDialog";
-import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
-export default {
-  components: {
-    TimePickerDialog,
-    CategoryTagSelector,
-  },
-  data() {
-    return {
-      groupSettings: {
-        name: "home",
-        id: 1,
-        mealplans: [],
-        categories: [],
-        webhookUrls: [],
-        webhookTime: "00:00",
-        webhookEnable: false,
-      },
-    };
-  },
-  async mounted() {
-    await this.$store.dispatch("requestCurrentGroup");
-    this.getSiteSettings();
-  },
-  computed: {
-    categories() {
-      return this.$store.getters.getAllCategories;
-    },
-    isFlat() {
-      return this.groupSettings.categories >= 1 ? true : false;
-    },
-  },
-  methods: {
-    saveTime(value) {
-      this.groupSettings.webhookTime = value;
-    },
-    getSiteSettings() {
-      let settings = this.$store.getters.getCurrentGroup;
-
-      this.groupSettings.name = settings.name;
-      this.groupSettings.id = settings.id;
-      this.groupSettings.categories = settings.categories;
-      this.groupSettings.webhookUrls = settings.webhookUrls;
-      this.groupSettings.webhookTime = settings.webhookTime;
-      this.groupSettings.webhookEnable = settings.webhookEnable;
-    },
-    addWebhook() {
-      this.groupSettings.webhookUrls.push(" ");
-    },
-    removeWebhook(index) {
-      this.groupSettings.webhookUrls.splice(index, 1);
-    },
-    async saveGroupSettings() {
-      if (await api.groups.update(this.groupSettings)) {
-        await this.$store.dispatch("requestCurrentGroup");
-        this.getSiteSettings();
-      }
-    },
-    testWebhooks() {
-      api.settings.testWebhooks();
-    },
-  },
-};
-</script>
-
-<style></style>

frontend/src/pages/Admin/Profile/APITokenCard.vue

@@ -0,0 +1,147 @@
+<template>
+  <StatCard icon="mdi-api" color="accent">
+    <template v-slot:after-heading>
+      <div class="ml-auto text-right">
+        <div class="body-3 grey--text font-weight-light" v-text="'API Tokens'" />
+        <h3 class="display-2 font-weight-light text--primary">
+          <small> {{ user.tokens.length }} </small>
+        </h3>
+      </div>
+    </template>
+    <template v-slot:bottom>
+      <v-subheader class="mb-n2">ACTIVE TOKENS</v-subheader>
+      <v-virtual-scroll height="210" item-height="70" :items="user.tokens" class="mt-2">
+        <template v-slot:default="{ item }">
+          <v-divider></v-divider>
+          <v-list-item @click.prevent>
+            <v-list-item-avatar>
+              <v-icon large dark color="accent">
+                mdi-api
+              </v-icon>
+            </v-list-item-avatar>
+
+            <v-list-item-content>
+              <v-list-item-title v-text="item.name"></v-list-item-title>
+            </v-list-item-content>
+
+            <v-list-item-action class="ml-auto">
+              <v-btn large icon @click.stop="deleteToken(item.id)">
+                <v-icon color="accent">mdi-delete</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+          <v-divider></v-divider>
+        </template>
+      </v-virtual-scroll>
+
+      <v-divider></v-divider>
+      <v-card-actions class="pb-1 pt-3">
+        <v-spacer></v-spacer>
+        <BaseDialog
+          :title="'Create an API Token'"
+          title-icon="mdi-api"
+          @submit="createToken"
+          :submit-text="buttonText"
+          :loading="loading"
+        >
+          <v-card-text>
+            <v-form ref="newTokenForm">
+              <v-text-field v-model="name" label="Token Name" required> </v-text-field>
+            </v-form>
+
+            <div v-if="createdToken != ''">
+              <v-textarea
+                class="mb-0 pb-0"
+                label="API Token"
+                readonly
+                v-model="createdToken"
+                append-outer-icon="mdi-content-copy"
+                @click:append-outer="copyToken"
+              >
+              </v-textarea>
+              <v-subheader class="text-center">
+                Copy this token for use with an external application. This token will not be viewable again.
+              </v-subheader>
+            </div>
+          </v-card-text>
+
+          <template v-slot:open="{ open }">
+            <v-btn color="success" @click="open">
+              <v-icon left> mdi-plus </v-icon>
+              {{ $t("general.create") }}
+            </v-btn>
+          </template>
+        </BaseDialog>
+      </v-card-actions>
+    </template>
+  </StatCard>
+</template>
+
+<script>
+import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
+import StatCard from "@/components/UI/StatCard";
+import { api } from "@/api";
+import { validators } from "@/mixins/validators";
+import { initials } from "@/mixins/initials";
+export default {
+  components: {
+    BaseDialog,
+    StatCard,
+  },
+  mixins: [validators, initials],
+  data() {
+    return {
+      name: "",
+      loading: false,
+      createdToken: "",
+    };
+  },
+
+  mounted() {
+    this.$store.dispatch("requestUserData");
+  },
+
+  computed: {
+    user() {
+      return this.$store.getters.getUserData;
+    },
+    buttonText() {
+      if (this.createdToken === "") {
+        return "Create";
+      } else {
+        return "Close";
+      }
+    },
+  },
+
+  methods: {
+    async createToken() {
+      if (this.loading === true) {
+        this.loading = false;
+        this.$store.dispatch("requestUserData");
+        this.createdToken = "";
+        this.name = "";
+        return;
+      }
+      this.loading = true;
+      if (this.$refs.newTokenForm.validate()) {
+        const response = await api.users.createAPIToken(this.name);
+        this.createdToken = response.token;
+      }
+    },
+    async deleteToken(id) {
+      await api.users.deleteAPIToken(id);
+      this.$store.dispatch("requestUserData");
+    },
+    copyToken() {
+      const copyText = this.createdToken;
+      navigator.clipboard.writeText(copyText).then(
+        () => console.log("Copied", copyText),
+        () => console.log("Copied Failed", copyText)
+      );
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/pages/Admin/Profile/ProfileGroupCard.vue

@@ -0,0 +1,214 @@
+<template>
+  <StatCard icon="mdi-account-group">
+    <template v-slot:after-heading>
+      <div class="ml-auto text-right">
+        <div class="body-3 grey--text font-weight-light" v-text="$t('group.group')" />
+
+        <h3 class="display-2 font-weight-light text--primary">
+          <small> {{ currentGroup.name }} </small>
+        </h3>
+      </div>
+    </template>
+    <template v-slot:bottom>
+      <div v-if="todaysMeal">
+        <v-subheader>DINNER TONIGHT</v-subheader>
+        <MobileRecipeCard
+          :name="todaysMeal.name"
+          :slug="todaysMeal.slug"
+          :description="todaysMeal.description"
+          :rating="todaysMeal.rating"
+          :tags="true"
+        />
+      </div>
+
+      <v-subheader>USERS</v-subheader>
+      <v-divider></v-divider>
+
+      <v-virtual-scroll v-if="currentGroup.users" :items="currentGroup.users" height="257" item-height="64">
+        <template v-slot:default="{ item }">
+          <v-list-item :key="item.id" @click.prevent>
+            <v-list-item-action>
+              <v-btn fab small depressed color="primary">
+                {{ generateInitials(item.fullName) }}
+              </v-btn>
+            </v-list-item-action>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ item.fullName }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+          <v-divider></v-divider>
+        </template>
+      </v-virtual-scroll>
+
+      <div class="mt-3">
+        <h3 class="display-2 font-weight-light text--primary">
+          <v-icon x-large>
+            mdi-food-variant
+          </v-icon>
+          <small> Mealplan Settings </small>
+        </h3>
+      </div>
+      <v-divider></v-divider>
+
+      <v-subheader>MEALPLAN CATEGORIES</v-subheader>
+      <v-card-text class="mt-0 pt-0">
+        {{ $t("meal-plan.only-recipes-with-these-categories-will-be-used-in-meal-plans") }}
+      </v-card-text>
+      <CategoryTagSelector
+        :solo="true"
+        :dense="false"
+        v-model="groupSettings.categories"
+        :return-object="true"
+        :show-add="true"
+      />
+
+      <v-divider></v-divider>
+      <v-subheader>WEBHOOKS</v-subheader>
+      <v-card-text class="mt-0 pt-0">
+        {{
+          $t(
+            "settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at"
+          )
+        }}
+        <strong>{{ groupSettings.webhookTime }}</strong>
+      </v-card-text>
+      <v-row dense class="flex align-center">
+        <v-switch class="ml-5 mr-auto" v-model="groupSettings.webhookEnable" :label="$t('general.enabled')"></v-switch>
+        <TimePickerDialog @save-time="saveTime" class="" />
+      </v-row>
+
+      <v-card-text>
+        <v-text-field
+          prepend-icon="mdi-delete"
+          v-for="(url, index) in groupSettings.webhookUrls"
+          @click:prepend="removeWebhook(index)"
+          :key="index"
+          v-model="groupSettings.webhookUrls[index]"
+          :label="$t('settings.webhooks.webhook-url')"
+        ></v-text-field>
+        <v-card-actions class="pa-0">
+          <v-spacer></v-spacer>
+          <v-btn small color="success" @click="addWebhook">
+            <v-icon left> mdi-webhook </v-icon>
+            New
+          </v-btn>
+        </v-card-actions>
+      </v-card-text>
+
+      <v-divider></v-divider>
+      <v-card-actions class="pb-0">
+        <v-btn class="ma-2" color="info" @click="testWebhooks">
+          <v-icon left> mdi-webhook </v-icon>
+          {{ $t("settings.webhooks.test-webhooks") }}
+        </v-btn>
+        <v-spacer></v-spacer>
+        <v-btn color="success" @click="saveGroupSettings">
+          <v-icon left> mdi-content-save </v-icon>
+          {{ $t("general.update") }}
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </StatCard>
+</template>
+
+<script>
+import TimePickerDialog from "@/components/FormHelpers/TimePickerDialog";
+import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
+import StatCard from "@/components/UI/StatCard";
+import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
+import { validators } from "@/mixins/validators";
+import { initials } from "@/mixins/initials";
+import { api } from "@/api";
+export default {
+  components: {
+    StatCard,
+    MobileRecipeCard,
+    CategoryTagSelector,
+    TimePickerDialog,
+  },
+  mixins: [validators, initials],
+  data() {
+    return {
+      todaysMeal: false,
+      hideImage: false,
+      passwordLoading: false,
+      password: {
+        current: "",
+        newOne: "",
+        newTwo: "",
+      },
+      groupSettings: {},
+      showPassword: false,
+      loading: false,
+      user: {
+        fullName: "",
+        email: "",
+        group: "",
+        admin: false,
+        id: 0,
+      },
+    };
+  },
+
+  computed: {
+    userProfileImage() {
+      this.resetImage();
+      return `api/users/${this.user.id}/image`;
+    },
+    currentGroup() {
+      return this.$store.getters.getCurrentGroup;
+    },
+  },
+
+  async mounted() {
+    this.getTodaysMeal();
+    await this.$store.dispatch("requestCurrentGroup");
+    this.getSiteSettings();
+  },
+
+  methods: {
+    async getTodaysMeal() {
+      const response = await api.mealPlans.today();
+      this.todaysMeal = response.data;
+    },
+    generateInitials(text) {
+      const allNames = text.trim().split(" ");
+      return allNames.reduce(
+        (acc, curr, index) => {
+          if (index === 0 || index === allNames.length - 1) {
+            acc = `${acc}${curr.charAt(0).toUpperCase()}`;
+          }
+          return acc;
+        },
+        [""]
+      );
+    },
+    getSiteSettings() {
+      this.groupSettings = this.$store.getters.getCurrentGroup;
+    },
+    saveTime(value) {
+      this.groupSettings.webhookTime = value;
+    },
+    addWebhook() {
+      this.groupSettings.webhookUrls.push(" ");
+    },
+    removeWebhook(index) {
+      this.groupSettings.webhookUrls.splice(index, 1);
+    },
+    async saveGroupSettings() {
+      if (await api.groups.update(this.groupSettings)) {
+        await this.$store.dispatch("requestCurrentGroup");
+        this.getSiteSettings();
+      }
+    },
+    testWebhooks() {
+      api.settings.testWebhooks();
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/pages/Admin/Profile/ProfileThemeCard.vue

@@ -35,9 +35,11 @@
           </v-btn>
         </v-btn-toggle>
       </template>
+
       <template v-slot:bottom>
         <v-virtual-scroll height="290" item-height="70" :items="availableThemes" class="mt-2">
           <template v-slot:default="{ item }">
+            <v-divider></v-divider>
             <v-list-item @click="selectedTheme = item">
               <v-list-item-avatar>
                 <v-icon large dark :color="item.colors.primary">
@@ -66,6 +68,7 @@
                 </v-btn>
               </v-list-item-action>
             </v-list-item>
+            <v-divider></v-divider>
           </template>
         </v-virtual-scroll>
         <v-divider></v-divider>
@@ -116,7 +119,7 @@ export default {
   components: { StatCard, BaseDialog, ColorPickerDialog, VJsoneditor },
   data() {
     return {
-      jsonEditor: true,
+      jsonEditor: false,
       jsonEditorOptions: {
         mode: "code",
         search: false,
@@ -193,7 +196,6 @@ export default {
       this.availableThemes = await api.themes.requestAll();
     },
     editTheme(theme) {
-      console.log(theme);
       this.defaultData = theme;
       this.newTheme = false;
       this.$refs.themeDialog.open();
@@ -201,11 +203,9 @@ export default {
     createTheme() {
       this.newTheme = true;
       this.$refs.themeDialog.open();
-      console.log("Create Theme");
     },
     async processSubmit() {
       if (this.newTheme) {
-        console.log("New Theme");
         await api.themes.create(this.defaultData);
       } else {
         await api.themes.update(this.defaultData);
@@ -213,7 +213,6 @@ export default {
       this.getAllThemes();
     },
     async deleteTheme() {
-      console.log(this.defaultData);
       await api.themes.delete(this.defaultData.id);
       this.getAllThemes();
     },

frontend/src/pages/Admin/Profile/index.vue

@@ -3,25 +3,31 @@
     <v-row>
       <v-col cols="12" sm="12" lg="6">
         <UserCard />
+        <ProfileThemeCard class="mt-10" />
+        <APITokenCard class="mt-10" />
+      </v-col>
+      <v-col cols="12" sm="12" lg="6">
+        <ProfileGroupCard />
       </v-col>
-      <v-col cols="12" sm="12" lg="6"> </v-col>
     </v-row>
     <v-row class="mt-7">
-      <v-col cols="12" sm="12" lg="6">
-        <ThemeCard />
-      </v-col>
+      <v-col cols="12" sm="12" lg="6"> </v-col>
       <v-col cols="12" sm="12" lg="6"> </v-col>
     </v-row>
   </div>
 </template>
 
 <script>
-import ThemeCard from "./ThemeCard";
+import ProfileThemeCard from "./ProfileThemeCard";
+import ProfileGroupCard from "./ProfileGroupCard";
+import APITokenCard from "./APITokenCard";
 import UserCard from "./UserCard";
 export default {
   components: {
     UserCard,
-    ThemeCard,
+    ProfileThemeCard,
+    ProfileGroupCard,
+    APITokenCard,
   },
 };
 </script>