mirror of
				https://github.com/mealie-recipes/mealie.git
				synced 2025-11-03 19:18:22 -05:00 
			
		
		
		
	Feature/style unification (#420)
* set global icons * fixes #419 * button style docs * category/tag page updates * dynamic router imports Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
		
							parent
							
								
									ef87f2231d
								
							
						
					
					
						commit
						eb3d56936e
					
				@ -3,3 +3,5 @@
 | 
			
		||||
## Python
 | 
			
		||||
 | 
			
		||||
## Vue
 | 
			
		||||
 | 
			
		||||
[See The Style Guide](/mealie/contributors/developers-guide/style-guide/)
 | 
			
		||||
@ -18,20 +18,29 @@ Prerequisites
 | 
			
		||||
- Nodejs
 | 
			
		||||
- npm
 | 
			
		||||
 | 
			
		||||
Once the prerequisites are installed you can cd into the project base directory and run `make setup` to install the python and node dependencies. Once that is complete you can run `make backend` and `make vue` to start the backend and frontend servers. 
 | 
			
		||||
Once the prerequisites are installed you can cd into the project base directory and run `make setup` to install the python and node dependencies. Once that is complete you can run `make backend` and `make frontend` to start the backend and frontend servers. 
 | 
			
		||||
 | 
			
		||||
## Make File Reference 
 | 
			
		||||
`make setup` installs python and node dependencies
 | 
			
		||||
 | 
			
		||||
`make backend` Starts the backend server on port `9000`
 | 
			
		||||
Run `make help` for reference
 | 
			
		||||
 | 
			
		||||
`make vue` Starts the frontend server on port `8080`
 | 
			
		||||
 | 
			
		||||
`make mdocs` Starts the documentation server on port `8000`
 | 
			
		||||
 | 
			
		||||
`make docker-dev` Builds docker-compose.dev.yml 
 | 
			
		||||
 | 
			
		||||
`make docker-prod` Builds docker-compose.yml to test for production
 | 
			
		||||
```
 | 
			
		||||
clean                remove all build, test, coverage and Python artifacts
 | 
			
		||||
clean-pyc            remove Python file artifacts
 | 
			
		||||
clean-test           remove test and coverage artifacts
 | 
			
		||||
test                 run tests quickly with the default Python
 | 
			
		||||
lint                 check style with flake8
 | 
			
		||||
test-all             Check Lint Format and Testing
 | 
			
		||||
setup                Setup Development Instance
 | 
			
		||||
backend              Start Mealie Backend Development Server
 | 
			
		||||
frontend             Start Mealie Frontend Development Server
 | 
			
		||||
frontend-build       Build Frontend in frontend/dist
 | 
			
		||||
docs                 Start Mkdocs Development Server
 | 
			
		||||
docker-dev           Build and Start Docker Development Stack
 | 
			
		||||
docker-prod          Build and Start Docker Production Stack
 | 
			
		||||
code-gen             Run Code-Gen Scripts
 | 
			
		||||
coverage             check code coverage quickly with the default Python
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Before you Commit! 
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										33
									
								
								docs/docs/contributors/developers-guide/style-guide.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										33
									
								
								docs/docs/contributors/developers-guide/style-guide.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,33 @@
 | 
			
		||||
# Style Guide
 | 
			
		||||
 | 
			
		||||
!!! note
 | 
			
		||||
    Unifying styles across the application is an ongoing process, we are working on making the site more consistent.
 | 
			
		||||
 | 
			
		||||
## Button Guidelines
 | 
			
		||||
 | 
			
		||||
1. Buttons should follow the general color/icon scheme as outlined. 
 | 
			
		||||
2. All buttons should have an icon on the left side of the button and text on the right. 
 | 
			
		||||
3. Primary action buttons should be the default Vuetify styling. 
 | 
			
		||||
4. Primary action buttons should be right aligned
 | 
			
		||||
5. Secondary buttons should be `text` or `outlined`. Text is preferred
 | 
			
		||||
6. Other buttons should generally be "info" or "primary" color and can take any style type depending on context
 | 
			
		||||
 | 
			
		||||
### Button Colors and Icons
 | 
			
		||||
 | 
			
		||||
| Type        | Color               | Icon                                               |
 | 
			
		||||
| ----------- | :------------------ | :------------------------------------------------- |
 | 
			
		||||
| Default     | `info` or `primary` | None                                               |
 | 
			
		||||
| Create/New  | `success`           | `mdi-plus` or `$globals.icons.create`              |
 | 
			
		||||
| Update/Save | `success`           | `mdi-save-content` or `$globals.icons.save`        |
 | 
			
		||||
| Edit        | `info`              | `mdi-square-edit-outline` or `$globals.icons.edit` |
 | 
			
		||||
 | 
			
		||||
### Example
 | 
			
		||||
```html
 | 
			
		||||
<v-btn color="primary">
 | 
			
		||||
  <v-icon left> mdi-plus </v-icon>
 | 
			
		||||
  Primary Button
 | 
			
		||||
</v-btn>
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							@ -76,6 +76,7 @@ nav:
 | 
			
		||||
          - Code Contributions: "contributors/developers-guide/code-contributions.md"
 | 
			
		||||
          - Dev Getting Started: "contributors/developers-guide/starting-dev-server.md"
 | 
			
		||||
          - Guidelines: "contributors/developers-guide/general-guidelines.md"
 | 
			
		||||
          - Style Guide: "contributors/developers-guide/style-guide.md"
 | 
			
		||||
  - Development Road Map: "roadmap.md"
 | 
			
		||||
  - Change Log:
 | 
			
		||||
      - v0.5.0 General Upgrades: "changelog/v0.5.0.md"
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,7 @@
 | 
			
		||||
      <div class="d-flex">
 | 
			
		||||
        <p>4</p>
 | 
			
		||||
        <v-icon color="primary" class="mx-auto" size="200">
 | 
			
		||||
          mdi-silverware-variant
 | 
			
		||||
          {{ $globals.icons.primary }}
 | 
			
		||||
        </v-icon>
 | 
			
		||||
        <p>4</p>
 | 
			
		||||
      </div>
 | 
			
		||||
@ -33,7 +33,7 @@ export default {
 | 
			
		||||
    return {
 | 
			
		||||
      buttons: [
 | 
			
		||||
        { icon: "mdi-home", to: "/", text: "Home" },
 | 
			
		||||
        { icon: "mdi-silverware-variant", to: "/recipes/all", text: "All Recipes" },
 | 
			
		||||
        { icon: this.$globals.icons.primary, to: "/recipes/all", text: "All Recipes" },
 | 
			
		||||
        { icon: "mdi-magnify", to: "/search", text: "Search" },
 | 
			
		||||
      ],
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,7 @@
 | 
			
		||||
    <v-divider></v-divider>
 | 
			
		||||
    <v-app-bar dark color="primary" class="mt-n1 mb-2">
 | 
			
		||||
      <v-icon large left v-if="!loading">
 | 
			
		||||
        mdi-account
 | 
			
		||||
        {{ $globals.icons.user }}
 | 
			
		||||
      </v-icon>
 | 
			
		||||
      <v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
 | 
			
		||||
      <v-toolbar-title class="headline">{{ $t("user.login") }}</v-toolbar-title>
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,7 @@
 | 
			
		||||
    <v-divider></v-divider>
 | 
			
		||||
    <v-app-bar dark color="primary" class="mt-n1">
 | 
			
		||||
      <v-icon large left v-if="!loading">
 | 
			
		||||
        mdi-account
 | 
			
		||||
        {{ $globals.icons.user }}
 | 
			
		||||
      </v-icon>
 | 
			
		||||
      <v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
 | 
			
		||||
      <v-toolbar-title class="headline">
 | 
			
		||||
@ -18,7 +18,7 @@
 | 
			
		||||
        <v-text-field
 | 
			
		||||
          v-model="user.name"
 | 
			
		||||
          light="light"
 | 
			
		||||
          prepend-icon="mdi-account"
 | 
			
		||||
          :prepend-icon="$globals.icons.user"
 | 
			
		||||
          validate-on-blur
 | 
			
		||||
          :rules="[existsRule]"
 | 
			
		||||
          :label="$t('signup.display-name')"
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,7 @@
 | 
			
		||||
    <SearchDialog ref="mealselect" @select="setSlug" />
 | 
			
		||||
    <BaseDialog
 | 
			
		||||
      title="Custom Meal"
 | 
			
		||||
      title-icon="mdi-silverware-variant"
 | 
			
		||||
      :title-icon="$globals.icons.primary"
 | 
			
		||||
      submit-text="Save"
 | 
			
		||||
      :top="true"
 | 
			
		||||
      ref="customMealDialog"
 | 
			
		||||
@ -21,7 +21,7 @@
 | 
			
		||||
            <v-fade-transition>
 | 
			
		||||
              <v-btn v-if="hover" small color="info" class="ma-1" @click.stop="addCustomItem(index, modes.primary)">
 | 
			
		||||
                <v-icon left>
 | 
			
		||||
                  mdi-square-edit-outline
 | 
			
		||||
                  {{ $globals.icons.edit }}
 | 
			
		||||
                </v-icon>
 | 
			
		||||
                No Recipe
 | 
			
		||||
              </v-btn>
 | 
			
		||||
@ -38,14 +38,14 @@
 | 
			
		||||
              <v-fade-transition>
 | 
			
		||||
                <v-btn v-if="hover" small color="info" text @click.stop="addCustomItem(index, modes.sides)">
 | 
			
		||||
                  <v-icon left>
 | 
			
		||||
                    mdi-square-edit-outline
 | 
			
		||||
                    {{ $globals.icons.edit }}
 | 
			
		||||
                  </v-icon>
 | 
			
		||||
                  No Recipe
 | 
			
		||||
                </v-btn>
 | 
			
		||||
              </v-fade-transition>
 | 
			
		||||
              <v-btn color="info" outlined small @click="openSearch(index, modes.sides)">
 | 
			
		||||
                <v-icon small class="mr-1">
 | 
			
		||||
                  mdi-plus
 | 
			
		||||
                  {{ $globals.icons.create }}
 | 
			
		||||
                </v-icon>
 | 
			
		||||
                Side
 | 
			
		||||
              </v-btn>
 | 
			
		||||
@ -65,7 +65,7 @@
 | 
			
		||||
              <v-list-item-icon>
 | 
			
		||||
                <v-btn icon @click="removeSide(index, i + 1)">
 | 
			
		||||
                  <v-icon color="error">
 | 
			
		||||
                    mdi-delete
 | 
			
		||||
                    {{ $globals.icons.delete }}
 | 
			
		||||
                  </v-icon>
 | 
			
		||||
                </v-btn>
 | 
			
		||||
              </v-list-item-icon>
 | 
			
		||||
 | 
			
		||||
@ -14,7 +14,7 @@
 | 
			
		||||
        <slot> </slot>
 | 
			
		||||
      </div>
 | 
			
		||||
      <v-icon color="primary" class="icon-position" :size="iconSize">
 | 
			
		||||
        mdi-silverware-variant
 | 
			
		||||
        {{ $globals.icons.primary }}
 | 
			
		||||
      </v-icon>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
@ -75,13 +75,13 @@ export default {
 | 
			
		||||
      return [
 | 
			
		||||
        {
 | 
			
		||||
          title: this.$t("general.delete"),
 | 
			
		||||
          icon: "mdi-delete",
 | 
			
		||||
          icon: this.$globals.icons.delete,
 | 
			
		||||
          color: "error",
 | 
			
		||||
          action: "delete",
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          title: this.$t("general.edit"),
 | 
			
		||||
          icon: "mdi-square-edit-outline",
 | 
			
		||||
          icon: this.$globals.icons.edit,
 | 
			
		||||
          color: "accent",
 | 
			
		||||
          action: "edit",
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
@ -19,18 +19,18 @@
 | 
			
		||||
        <v-col></v-col>
 | 
			
		||||
        <div v-if="open">
 | 
			
		||||
          <v-btn class="mr-2" fab dark small color="error" @click="deleteRecipeConfrim">
 | 
			
		||||
            <v-icon>mdi-delete</v-icon>
 | 
			
		||||
            <v-icon>{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
          </v-btn>
 | 
			
		||||
 | 
			
		||||
          <v-btn class="mr-2" fab dark small color="success" @click="save">
 | 
			
		||||
            <v-icon>mdi-content-save</v-icon>
 | 
			
		||||
            <v-icon>{{ $globals.icons.save }}</v-icon>
 | 
			
		||||
          </v-btn>
 | 
			
		||||
          <v-btn class="mr-5" fab dark small color="secondary" @click="json">
 | 
			
		||||
            <v-icon>mdi-code-braces</v-icon>
 | 
			
		||||
          </v-btn>
 | 
			
		||||
        </div>
 | 
			
		||||
        <v-btn color="accent" fab dark small @click="editor">
 | 
			
		||||
          <v-icon>mdi-square-edit-outline</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.edit }}</v-icon>
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </template>
 | 
			
		||||
    </v-toolbar>
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,7 @@
 | 
			
		||||
          @error="fallBackImage = true"
 | 
			
		||||
        ></v-img>
 | 
			
		||||
        <v-icon v-else color="primary" class="icon-position" size="100">
 | 
			
		||||
          mdi-silverware-variant
 | 
			
		||||
          {{ $globals.icons.primary }}
 | 
			
		||||
        </v-icon>
 | 
			
		||||
      </v-list-item-avatar>
 | 
			
		||||
      <v-list-item-content>
 | 
			
		||||
 | 
			
		||||
@ -19,7 +19,7 @@
 | 
			
		||||
            </v-btn>
 | 
			
		||||
            <div v-else>
 | 
			
		||||
              <v-btn color="error" icon @click="deleteAsset(i)" top>
 | 
			
		||||
                <v-icon>mdi-delete</v-icon>
 | 
			
		||||
                <v-icon>{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
              </v-btn>
 | 
			
		||||
              <v-btn color="primary" icon @click="copyLink(item.name, item.fileName)" top>
 | 
			
		||||
                <v-icon>mdi-content-copy</v-icon>
 | 
			
		||||
@ -34,7 +34,7 @@
 | 
			
		||||
      <base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="newAsset.icon">
 | 
			
		||||
        <template v-slot:open="{ open }">
 | 
			
		||||
          <v-btn color="secondary" dark @click="open" v-if="edit">
 | 
			
		||||
            <v-icon>mdi-plus</v-icon>
 | 
			
		||||
            <v-icon>{{ $globals.icons.create }}</v-icon>
 | 
			
		||||
          </v-btn>
 | 
			
		||||
        </template>
 | 
			
		||||
        <v-card-text class="pt-2">
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,7 @@
 | 
			
		||||
          <v-row align="center" v-for="(value, key, index) in extras" :key="index">
 | 
			
		||||
            <v-col cols="12" sm="1">
 | 
			
		||||
              <v-btn fab text x-small color="white" elevation="0" @click="removeExtra(key)">
 | 
			
		||||
                <v-icon color="error">mdi-delete</v-icon>
 | 
			
		||||
                <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
              </v-btn>
 | 
			
		||||
            </v-col>
 | 
			
		||||
            <v-col cols="12" md="3" sm="6">
 | 
			
		||||
 | 
			
		||||
@ -20,7 +20,7 @@
 | 
			
		||||
                  <v-icon class="handle">mdi-arrow-up-down</v-icon>
 | 
			
		||||
                </template>
 | 
			
		||||
                <v-icon class="mr-n1" slot="prepend" color="error" @click="removeByIndex(value, index)">
 | 
			
		||||
                  mdi-delete
 | 
			
		||||
                  {{ $globals.icons.delete }}
 | 
			
		||||
                </v-icon>
 | 
			
		||||
              </v-textarea>
 | 
			
		||||
            </v-row>
 | 
			
		||||
@ -31,7 +31,7 @@
 | 
			
		||||
      <div class="d-flex row justify-end">
 | 
			
		||||
        <BulkAdd @bulk-data="addIngredient" class="mr-2" />
 | 
			
		||||
        <v-btn color="secondary" dark @click="addIngredient" class="mr-4">
 | 
			
		||||
          <v-icon>mdi-plus</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.create }}</v-icon>
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
@ -37,7 +37,7 @@
 | 
			
		||||
                elevation="0"
 | 
			
		||||
                @click="removeByIndex(value, index)"
 | 
			
		||||
              >
 | 
			
		||||
                <v-icon size="24" color="error">mdi-delete</v-icon>
 | 
			
		||||
                <v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
              </v-btn>
 | 
			
		||||
              {{ $t("recipe.step-index", { step: index + 1 }) }}
 | 
			
		||||
              <v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,7 @@
 | 
			
		||||
        <v-card-text>
 | 
			
		||||
          <v-row align="center">
 | 
			
		||||
            <v-btn fab x-small color="white" class="mr-2" elevation="0" @click="removeByIndex(value, index)">
 | 
			
		||||
              <v-icon color="error">mdi-delete</v-icon>
 | 
			
		||||
              <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
            </v-btn>
 | 
			
		||||
            <v-text-field :label="$t('recipe.title')" v-model="value[index]['title']"></v-text-field>
 | 
			
		||||
          </v-row>
 | 
			
		||||
@ -27,7 +27,7 @@
 | 
			
		||||
 | 
			
		||||
    <div class="d-flex justify-end" v-if="edit">
 | 
			
		||||
      <v-btn class="mt-1" color="secondary" dark @click="addNote">
 | 
			
		||||
        <v-icon>mdi-plus</v-icon>
 | 
			
		||||
        <v-icon>{{ $globals.icons.create }}</v-icon>
 | 
			
		||||
      </v-btn>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
@ -69,7 +69,7 @@
 | 
			
		||||
          <div class="d-flex row justify-end mt-2">
 | 
			
		||||
            <BulkAdd @bulk-data="appendSteps" class="mr-2" />
 | 
			
		||||
            <v-btn color="secondary" dark @click="addStep" class="mr-4">
 | 
			
		||||
              <v-icon>mdi-plus</v-icon>
 | 
			
		||||
              <v-icon>{{ $globals.icons.create }}</v-icon>
 | 
			
		||||
            </v-btn>
 | 
			
		||||
          </div>
 | 
			
		||||
          <Notes :edit="true" v-model="value.notes" />
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@
 | 
			
		||||
  <div v-if="recipes">
 | 
			
		||||
    <v-app-bar color="transparent" flat class="mt-n1 rounded" v-if="!disableToolbar">
 | 
			
		||||
      <v-icon large left v-if="title">
 | 
			
		||||
        {{ titleIcon }}
 | 
			
		||||
        {{ displayTitleIcon }}
 | 
			
		||||
      </v-icon>
 | 
			
		||||
      <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
 | 
			
		||||
      <v-spacer></v-spacer>
 | 
			
		||||
@ -120,7 +120,7 @@ export default {
 | 
			
		||||
      default: false,
 | 
			
		||||
    },
 | 
			
		||||
    titleIcon: {
 | 
			
		||||
      default: "mdi-tag-multiple-outline",
 | 
			
		||||
      default: null,
 | 
			
		||||
    },
 | 
			
		||||
    title: {
 | 
			
		||||
      default: null,
 | 
			
		||||
@ -170,6 +170,9 @@ export default {
 | 
			
		||||
    effectiveHardLimit() {
 | 
			
		||||
      return Math.min(this.hardLimit, this.recipes.length);
 | 
			
		||||
    },
 | 
			
		||||
    displayTitleIcon() {
 | 
			
		||||
      return this.titleIcon || this.$globals.icons.tags;
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    bumpList() {
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,7 @@
 | 
			
		||||
    >
 | 
			
		||||
      <template v-slot:open="{ open }">
 | 
			
		||||
        <v-btn @click="open" class="mx-2" small :color="color">
 | 
			
		||||
          <v-icon left> mdi-plus </v-icon> {{ $t("general.custom") }}
 | 
			
		||||
          <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.custom") }}
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </template>
 | 
			
		||||
      <v-card-text class="mt-6">
 | 
			
		||||
@ -128,7 +128,6 @@ export default {
 | 
			
		||||
        templates: this.selectedTemplates,
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
      if (await api.backups.create(data)) {
 | 
			
		||||
        this.$emit("created");
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
@ -10,7 +10,7 @@
 | 
			
		||||
      <v-card height="100%">
 | 
			
		||||
        <v-app-bar dark :color="color" class="mt-n1 mb-0">
 | 
			
		||||
          <v-icon large left>
 | 
			
		||||
            {{ titleIcon }}
 | 
			
		||||
            {{ displayTitleIcon }}
 | 
			
		||||
          </v-icon>
 | 
			
		||||
          <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
 | 
			
		||||
          <v-spacer></v-spacer>
 | 
			
		||||
@ -55,7 +55,7 @@ export default {
 | 
			
		||||
      default: "Modal Title",
 | 
			
		||||
    },
 | 
			
		||||
    titleIcon: {
 | 
			
		||||
      default: "mdi-account",
 | 
			
		||||
      default: null,
 | 
			
		||||
    },
 | 
			
		||||
    modalWidth: {
 | 
			
		||||
      default: "500",
 | 
			
		||||
@ -83,6 +83,9 @@ export default {
 | 
			
		||||
    determineClose() {
 | 
			
		||||
      return this.submitted && !this.loading && !this.keepOpen;
 | 
			
		||||
    },
 | 
			
		||||
    displayTitleIcon() {
 | 
			
		||||
      return this.titleIcon || this.$globals.icons.user;
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    determineClose() {
 | 
			
		||||
 | 
			
		||||
@ -2,14 +2,14 @@
 | 
			
		||||
  <div>
 | 
			
		||||
    <slot>
 | 
			
		||||
      <v-btn icon @click="dialog = true" class="mt-n1">
 | 
			
		||||
        <v-icon :color="color">mdi-plus</v-icon>
 | 
			
		||||
        <v-icon :color="color">{{ $globals.icons.create }}</v-icon>
 | 
			
		||||
      </v-btn>
 | 
			
		||||
    </slot>
 | 
			
		||||
    <v-dialog v-model="dialog" width="500">
 | 
			
		||||
      <v-card>
 | 
			
		||||
        <v-app-bar dense dark color="primary mb-2">
 | 
			
		||||
          <v-icon large left class="mt-1">
 | 
			
		||||
            mdi-tag
 | 
			
		||||
            {{ $globals.icons.tags }}
 | 
			
		||||
          </v-icon>
 | 
			
		||||
 | 
			
		||||
          <v-toolbar-title class="headline">
 | 
			
		||||
 | 
			
		||||
@ -7,7 +7,7 @@
 | 
			
		||||
      </v-btn>
 | 
			
		||||
      <router-link to="/">
 | 
			
		||||
        <v-btn icon>
 | 
			
		||||
          <v-icon size="40"> mdi-silverware-variant </v-icon>
 | 
			
		||||
          <v-icon size="40"> {{ $globals.icons.primary }} </v-icon>
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </router-link>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -50,14 +50,14 @@
 | 
			
		||||
    <v-speed-dial v-model="fab" :open-on-hover="absolute" :fixed="absolute" :bottom="absolute" :right="absolute">
 | 
			
		||||
      <template v-slot:activator>
 | 
			
		||||
        <v-btn v-model="fab" :color="absolute ? 'accent' : 'white'" dark :icon="!absolute" :fab="absolute">
 | 
			
		||||
          <v-icon> mdi-plus </v-icon>
 | 
			
		||||
          <v-icon> {{ $globals.icons.create }} </v-icon>
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </template>
 | 
			
		||||
      <v-btn fab dark small color="primary" @click="addRecipe = true">
 | 
			
		||||
        <v-icon>mdi-link</v-icon>
 | 
			
		||||
      </v-btn>
 | 
			
		||||
      <v-btn fab dark small color="accent" @click="$router.push('/new')">
 | 
			
		||||
        <v-icon>mdi-square-edit-outline</v-icon>
 | 
			
		||||
        <v-icon>{{ $globals.icons.edit }}</v-icon>
 | 
			
		||||
      </v-btn>
 | 
			
		||||
    </v-speed-dial>
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
@ -98,15 +98,25 @@ export default {
 | 
			
		||||
          to: "/",
 | 
			
		||||
          title: this.$t("page.home-page"),
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          icon: "mdi-magnify",
 | 
			
		||||
          to: "/search",
 | 
			
		||||
          title: this.$t("search.search"),
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          icon: "mdi-view-module",
 | 
			
		||||
          to: "/recipes/all",
 | 
			
		||||
          title: this.$t("page.all-recipes"),
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          icon: "mdi-magnify",
 | 
			
		||||
          to: "/search",
 | 
			
		||||
          title: this.$t("search.search"),
 | 
			
		||||
          icon: this.$globals.icons.tags,
 | 
			
		||||
          to: "/recipes/category",
 | 
			
		||||
          title: this.$t("recipe.categories"),
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          icon: this.$globals.icons.tags,
 | 
			
		||||
          to: "/recipes/tag",
 | 
			
		||||
          title: this.$t("tag.tags"),
 | 
			
		||||
        },
 | 
			
		||||
      ];
 | 
			
		||||
    },
 | 
			
		||||
@ -117,16 +127,10 @@ export default {
 | 
			
		||||
        return pages.map(x => ({
 | 
			
		||||
          title: x.name,
 | 
			
		||||
          to: `/pages/${x.slug}`,
 | 
			
		||||
          icon: "mdi-tag",
 | 
			
		||||
        }));
 | 
			
		||||
      } else {
 | 
			
		||||
        const categories = this.$store.getters.getAllCategories;
 | 
			
		||||
        return categories.map(x => ({
 | 
			
		||||
          title: x.name,
 | 
			
		||||
          to: `/recipes/category/${x.slug}`,
 | 
			
		||||
          icon: "mdi-tag",
 | 
			
		||||
          icon: this.$globals.icons.tags,
 | 
			
		||||
        }));
 | 
			
		||||
      }
 | 
			
		||||
      return [];
 | 
			
		||||
    },
 | 
			
		||||
    mainMenu() {
 | 
			
		||||
      return [...this.baseMainLinks, ...this.customPages];
 | 
			
		||||
@ -134,7 +138,7 @@ export default {
 | 
			
		||||
    settingsLinks() {
 | 
			
		||||
      return [
 | 
			
		||||
        {
 | 
			
		||||
          icon: "mdi-account",
 | 
			
		||||
          icon: this.$globals.icons.user,
 | 
			
		||||
          to: "/admin/profile",
 | 
			
		||||
          title: this.$t("settings.profile"),
 | 
			
		||||
        },
 | 
			
		||||
@ -158,7 +162,7 @@ export default {
 | 
			
		||||
          title: this.$t("settings.toolbox.toolbox"),
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          icon: "mdi-account-group",
 | 
			
		||||
          icon: this.$globals.icons.group,
 | 
			
		||||
          to: "/admin/manage-users",
 | 
			
		||||
          title: this.$t("user.manage-users"),
 | 
			
		||||
        },
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,7 @@
 | 
			
		||||
    <v-menu transition="slide-x-transition" bottom right offset-y offset-overflow open-on-hover close-delay="200">
 | 
			
		||||
      <template v-slot:activator="{ on, attrs }">
 | 
			
		||||
        <v-btn v-bind="attrs" v-on="on" icon>
 | 
			
		||||
          <v-icon>mdi-account</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.user }}</v-icon>
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </template>
 | 
			
		||||
 | 
			
		||||
@ -40,7 +40,7 @@ export default {
 | 
			
		||||
    items() {
 | 
			
		||||
      return [
 | 
			
		||||
        {
 | 
			
		||||
          icon: "mdi-account",
 | 
			
		||||
          icon: this.$globals.icons.user,
 | 
			
		||||
          title: this.$t("user.login"),
 | 
			
		||||
          restricted: false,
 | 
			
		||||
          login: true,
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Migrering af opskrifter"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Migrera recept"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -164,10 +164,10 @@
 | 
			
		||||
    },
 | 
			
		||||
    "migration-data-removed": "Migration data removed",
 | 
			
		||||
    "nextcloud": {
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook intance",
 | 
			
		||||
      "description": "Migrate data from a Nextcloud Cookbook instance",
 | 
			
		||||
      "title": "Nextcloud Cookbook"
 | 
			
		||||
    },
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Avaiable",
 | 
			
		||||
    "no-migration-data-available": "No Migration Data Available",
 | 
			
		||||
    "recipe-migration": "Recipe Migration"
 | 
			
		||||
  },
 | 
			
		||||
  "new-recipe": {
 | 
			
		||||
 | 
			
		||||
@ -4,6 +4,7 @@ import vuetify from "./plugins/vuetify";
 | 
			
		||||
import store from "./store";
 | 
			
		||||
import VueRouter from "vue-router";
 | 
			
		||||
import { router } from "./routes";
 | 
			
		||||
import { globals } from "@/utils/globals";
 | 
			
		||||
import i18n from "./i18n";
 | 
			
		||||
import "@mdi/font/css/materialdesignicons.css";
 | 
			
		||||
import "typeface-roboto/index.css";
 | 
			
		||||
@ -11,6 +12,8 @@ import "typeface-roboto/index.css";
 | 
			
		||||
Vue.config.productionTip = false;
 | 
			
		||||
Vue.use(VueRouter);
 | 
			
		||||
 | 
			
		||||
Vue.prototype.$globals = globals;
 | 
			
		||||
 | 
			
		||||
const vueApp = new Vue({
 | 
			
		||||
  vuetify,
 | 
			
		||||
  store,
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,7 @@
 | 
			
		||||
        <v-list-item-group color="primary">
 | 
			
		||||
          <v-list-item v-for="property in prettyInfo" :key="property.name">
 | 
			
		||||
            <v-list-item-icon>
 | 
			
		||||
              <v-icon> {{ property.icon || "mdi-account" }} </v-icon>
 | 
			
		||||
              <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
 | 
			
		||||
            </v-list-item-icon>
 | 
			
		||||
            <v-list-item-content>
 | 
			
		||||
              <v-list-item-title class="pl-4 flex row justify-space-between">
 | 
			
		||||
@ -92,7 +92,7 @@ export default {
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          name: this.$t("about.default-group"),
 | 
			
		||||
          icon: "mdi-account-group",
 | 
			
		||||
          icon: this.$globals.icons.group,
 | 
			
		||||
          value: debugInfo.defaultGroup,
 | 
			
		||||
        },
 | 
			
		||||
      ];
 | 
			
		||||
 | 
			
		||||
@ -31,7 +31,7 @@
 | 
			
		||||
        <BackupDialog :color="color" />
 | 
			
		||||
 | 
			
		||||
        <v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup">
 | 
			
		||||
          <v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
 | 
			
		||||
          <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </div>
 | 
			
		||||
      <template v-slot:bottom>
 | 
			
		||||
@ -54,7 +54,7 @@
 | 
			
		||||
 | 
			
		||||
              <v-list-item-action class="ml-auto">
 | 
			
		||||
                <v-btn large icon @click.stop="deleteBackup(item.name)">
 | 
			
		||||
                  <v-icon color="error">mdi-delete</v-icon>
 | 
			
		||||
                  <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
                </v-btn>
 | 
			
		||||
              </v-list-item-action>
 | 
			
		||||
            </v-list-item>
 | 
			
		||||
 | 
			
		||||
@ -38,7 +38,7 @@
 | 
			
		||||
 | 
			
		||||
              <v-list-item-action class="ml-auto">
 | 
			
		||||
                <v-btn large icon @click="deleteEvent(item.id)">
 | 
			
		||||
                  <v-icon color="error">mdi-delete</v-icon>
 | 
			
		||||
                  <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
                </v-btn>
 | 
			
		||||
              </v-list-item-action>
 | 
			
		||||
            </v-list-item>
 | 
			
		||||
@ -81,11 +81,11 @@ export default {
 | 
			
		||||
          color: "primary",
 | 
			
		||||
        },
 | 
			
		||||
        user: {
 | 
			
		||||
          icon: "mdi-account",
 | 
			
		||||
          icon: this.$globals.icons.user,
 | 
			
		||||
          color: "accent",
 | 
			
		||||
        },
 | 
			
		||||
        group: {
 | 
			
		||||
          icon: "mdi-account-group-outline",
 | 
			
		||||
          icon: this.$globals.icons.group,
 | 
			
		||||
          color: "accent",
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,7 @@
 | 
			
		||||
          <template v-slot:after-heading>
 | 
			
		||||
            <div class="ml-auto text-right">
 | 
			
		||||
              <h2 class="body-3 grey--text font-weight-light">
 | 
			
		||||
                {{$t('general.recipes')}}
 | 
			
		||||
                {{ $t("general.recipes") }}
 | 
			
		||||
              </h2>
 | 
			
		||||
 | 
			
		||||
              <h3 class="display-2 font-weight-light text--primary">
 | 
			
		||||
@ -17,25 +17,27 @@
 | 
			
		||||
          <template v-slot:actions>
 | 
			
		||||
            <div class="d-flex row py-3 justify-space-around">
 | 
			
		||||
              <v-btn small color="primary" :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'tag' } }">
 | 
			
		||||
                <v-icon left> mdi-tag </v-icon> {{$tc('tag.untagged-count', [statistics.untaggedRecipes])}}
 | 
			
		||||
                <v-icon left> {{ $globals.icons.tags }} </v-icon>
 | 
			
		||||
                {{ $tc("tag.untagged-count", [statistics.untaggedRecipes]) }}
 | 
			
		||||
              </v-btn>
 | 
			
		||||
              <v-btn
 | 
			
		||||
                small
 | 
			
		||||
                color="primary"
 | 
			
		||||
                :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'category' } }"
 | 
			
		||||
              >
 | 
			
		||||
                <v-icon left> mdi-tag </v-icon> {{$tc('category.uncategorized-count', [statistics.uncategorizedRecipes])}}
 | 
			
		||||
                <v-icon left> {{ $globals.icons.tags }} </v-icon>
 | 
			
		||||
                {{ $tc("category.uncategorized-count", [statistics.uncategorizedRecipes]) }}
 | 
			
		||||
              </v-btn>
 | 
			
		||||
            </div>
 | 
			
		||||
          </template>
 | 
			
		||||
        </StatCard>
 | 
			
		||||
      </v-col>
 | 
			
		||||
      <v-col cols="12" sm="12" md="4">
 | 
			
		||||
        <StatCard icon="mdi-account">
 | 
			
		||||
        <StatCard :icon="$globals.icons.user">
 | 
			
		||||
          <template v-slot:after-heading>
 | 
			
		||||
            <div class="ml-auto text-right">
 | 
			
		||||
              <h2 class="body-3 grey--text font-weight-light">
 | 
			
		||||
                 {{$t('user.users')}}
 | 
			
		||||
                {{ $t("user.users") }}
 | 
			
		||||
              </h2>
 | 
			
		||||
              <h3 class="display-2 font-weight-light text--primary">
 | 
			
		||||
                <small> {{ statistics.totalUsers }}</small>
 | 
			
		||||
@ -45,19 +47,19 @@
 | 
			
		||||
          <template v-slot:actions>
 | 
			
		||||
            <div class="ml-auto">
 | 
			
		||||
              <v-btn color="primary" small to="/admin/manage-users?tab=users">
 | 
			
		||||
                <v-icon left>mdi-account</v-icon>
 | 
			
		||||
                {{$t('user.manage-users')}}
 | 
			
		||||
                <v-icon left>{{ $globals.icons.user }}</v-icon>
 | 
			
		||||
                {{ $t("user.manage-users") }}
 | 
			
		||||
              </v-btn>
 | 
			
		||||
            </div>
 | 
			
		||||
          </template>
 | 
			
		||||
        </StatCard>
 | 
			
		||||
      </v-col>
 | 
			
		||||
      <v-col cols="12" sm="12" md="4">
 | 
			
		||||
        <StatCard icon="mdi-account-group">
 | 
			
		||||
        <StatCard :icon="$globals.icons.group">
 | 
			
		||||
          <template v-slot:after-heading>
 | 
			
		||||
            <div class="ml-auto text-right">
 | 
			
		||||
              <h2 class="body-3 grey--text font-weight-light">
 | 
			
		||||
                {{$t('group.groups')}}
 | 
			
		||||
                {{ $t("group.groups") }}
 | 
			
		||||
              </h2>
 | 
			
		||||
 | 
			
		||||
              <h3 class="display-2 font-weight-light text--primary">
 | 
			
		||||
@ -68,8 +70,8 @@
 | 
			
		||||
          <template v-slot:actions>
 | 
			
		||||
            <div class="ml-auto">
 | 
			
		||||
              <v-btn color="primary" small to="/admin/manage-users?tab=groups">
 | 
			
		||||
                <v-icon left>mdi-account-group</v-icon>
 | 
			
		||||
                {{$t('group.manage-groups')}}
 | 
			
		||||
                <v-icon left>{{ $globals.icons.group }}</v-icon>
 | 
			
		||||
                {{ $t("group.manage-groups") }}
 | 
			
		||||
              </v-btn>
 | 
			
		||||
            </div>
 | 
			
		||||
          </template>
 | 
			
		||||
 | 
			
		||||
@ -21,7 +21,7 @@
 | 
			
		||||
        <v-list-item-group color="primary">
 | 
			
		||||
          <v-list-item v-for="property in groupProps" :key="property.text">
 | 
			
		||||
            <v-list-item-icon>
 | 
			
		||||
              <v-icon> {{ property.icon || "mdi-account" }} </v-icon>
 | 
			
		||||
              <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
 | 
			
		||||
            </v-list-item-icon>
 | 
			
		||||
            <v-list-item-content>
 | 
			
		||||
              <v-list-item-title class="pl-4 flex row justify-space-between">
 | 
			
		||||
@ -95,7 +95,7 @@ export default {
 | 
			
		||||
      this.groupProps = [
 | 
			
		||||
        {
 | 
			
		||||
          text: this.$t("user.total-users"),
 | 
			
		||||
          icon: "mdi-account",
 | 
			
		||||
          icon: this.$globals.icons.user,
 | 
			
		||||
          value: this.group.users.length,
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
 | 
			
		||||
@ -23,7 +23,7 @@
 | 
			
		||||
          <v-card>
 | 
			
		||||
            <v-app-bar dark dense color="primary">
 | 
			
		||||
              <v-icon left>
 | 
			
		||||
                mdi-account-group
 | 
			
		||||
                {{ $globals.icons.group }}
 | 
			
		||||
              </v-icon>
 | 
			
		||||
 | 
			
		||||
              <v-toolbar-title class="headline">
 | 
			
		||||
 | 
			
		||||
@ -31,7 +31,7 @@
 | 
			
		||||
        <v-card>
 | 
			
		||||
          <v-app-bar dark dense color="primary">
 | 
			
		||||
            <v-icon left>
 | 
			
		||||
              mdi-account
 | 
			
		||||
              {{ $globals.icons.user }}
 | 
			
		||||
            </v-icon>
 | 
			
		||||
 | 
			
		||||
            <v-toolbar-title class="headline">
 | 
			
		||||
@ -83,7 +83,7 @@
 | 
			
		||||
        <template v-slot:item.actions="{ item }">
 | 
			
		||||
          <v-btn class="mr-1" small color="error" @click="deleteItem(item)">
 | 
			
		||||
            <v-icon small left>
 | 
			
		||||
              mdi-delete
 | 
			
		||||
              {{ $globals.icons.delete }}
 | 
			
		||||
            </v-icon>
 | 
			
		||||
            {{ $t("general.delete") }}
 | 
			
		||||
          </v-btn>
 | 
			
		||||
 | 
			
		||||
@ -36,7 +36,7 @@
 | 
			
		||||
        <v-card>
 | 
			
		||||
          <v-app-bar dark dense color="primary">
 | 
			
		||||
            <v-icon left>
 | 
			
		||||
              mdi-account
 | 
			
		||||
              {{ $globals.icons.user }}
 | 
			
		||||
            </v-icon>
 | 
			
		||||
 | 
			
		||||
            <v-toolbar-title class="headline">
 | 
			
		||||
@ -111,7 +111,7 @@
 | 
			
		||||
        <template v-slot:item.actions="{ item }">
 | 
			
		||||
          <v-btn class="mr-1" small color="error" @click="deleteItem(item)">
 | 
			
		||||
            <v-icon small left>
 | 
			
		||||
              mdi-delete
 | 
			
		||||
              {{ $globals.icons.delete }}
 | 
			
		||||
            </v-icon>
 | 
			
		||||
            {{ $t("general.delete") }}
 | 
			
		||||
          </v-btn>
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,7 @@
 | 
			
		||||
 | 
			
		||||
        <v-tab href="#users">
 | 
			
		||||
          {{ $t("user.users") }}
 | 
			
		||||
          <v-icon>mdi-account</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.user }}</v-icon>
 | 
			
		||||
        </v-tab>
 | 
			
		||||
 | 
			
		||||
        <v-tab href="#sign-ups">
 | 
			
		||||
@ -16,7 +16,7 @@
 | 
			
		||||
 | 
			
		||||
        <v-tab href="#groups">
 | 
			
		||||
          {{ $t("group.groups") }}
 | 
			
		||||
          <v-icon>mdi-account-group</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.group }}</v-icon>
 | 
			
		||||
        </v-tab>
 | 
			
		||||
      </v-tabs>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,7 @@
 | 
			
		||||
    <template v-slot:after-heading>
 | 
			
		||||
      <div class="ml-auto text-right">
 | 
			
		||||
        <h2 class="body-3 grey--text font-weight-light">
 | 
			
		||||
          {{$t('settings.token.api-tokens')}}
 | 
			
		||||
          {{ $t("settings.token.api-tokens") }}
 | 
			
		||||
        </h2>
 | 
			
		||||
        <h3 class="display-2 font-weight-light text--primary">
 | 
			
		||||
          <small> {{ user.tokens.length }} </small>
 | 
			
		||||
@ -11,7 +11,7 @@
 | 
			
		||||
      </div>
 | 
			
		||||
    </template>
 | 
			
		||||
    <template v-slot:bottom>
 | 
			
		||||
      <v-subheader class="mb-n2">{{$t('settings.token.active-tokens')}}</v-subheader>
 | 
			
		||||
      <v-subheader class="mb-n2">{{ $t("settings.token.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>
 | 
			
		||||
@ -28,7 +28,7 @@
 | 
			
		||||
 | 
			
		||||
            <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-icon color="accent">{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
              </v-btn>
 | 
			
		||||
            </v-list-item-action>
 | 
			
		||||
          </v-list-item>
 | 
			
		||||
@ -62,14 +62,18 @@
 | 
			
		||||
              >
 | 
			
		||||
              </v-textarea>
 | 
			
		||||
              <v-subheader class="text-center">
 | 
			
		||||
                {{$t('settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again')}}
 | 
			
		||||
                {{
 | 
			
		||||
                  $t(
 | 
			
		||||
                    "settings.token.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>
 | 
			
		||||
              <v-icon left> {{ $globals.icons.create }} </v-icon>
 | 
			
		||||
              {{ $t("general.create") }}
 | 
			
		||||
            </v-btn>
 | 
			
		||||
          </template>
 | 
			
		||||
@ -109,9 +113,9 @@ export default {
 | 
			
		||||
    },
 | 
			
		||||
    buttonText() {
 | 
			
		||||
      if (this.createdToken === "") {
 | 
			
		||||
        return this.$t('general.create');
 | 
			
		||||
        return this.$t("general.create");
 | 
			
		||||
      } else {
 | 
			
		||||
        return this.$t('general.close');
 | 
			
		||||
        return this.$t("general.close");
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <StatCard icon="mdi-account-group">
 | 
			
		||||
  <StatCard :icon="$globals.icons.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')" />
 | 
			
		||||
@ -11,7 +11,7 @@
 | 
			
		||||
    </template>
 | 
			
		||||
    <template v-slot:bottom>
 | 
			
		||||
      <div v-if="todaysMeal">
 | 
			
		||||
        <v-subheader>{{$t('meal-plan.dinner-tonight')}}</v-subheader>
 | 
			
		||||
        <v-subheader>{{ $t("meal-plan.dinner-tonight") }}</v-subheader>
 | 
			
		||||
        <MobileRecipeCard
 | 
			
		||||
          :name="todaysMeal.name"
 | 
			
		||||
          :slug="todaysMeal.slug"
 | 
			
		||||
@ -48,12 +48,12 @@
 | 
			
		||||
          <v-icon x-large>
 | 
			
		||||
            mdi-food-variant
 | 
			
		||||
          </v-icon>
 | 
			
		||||
          <small> {{$t('meal-plan.mealplan-settings')}} </small>
 | 
			
		||||
          <small> {{ $t("meal-plan.mealplan-settings") }} </small>
 | 
			
		||||
        </h3>
 | 
			
		||||
      </div>
 | 
			
		||||
      <v-divider></v-divider>
 | 
			
		||||
 | 
			
		||||
      <v-subheader>{{$t('meal-plan.mealplan-categories')}}</v-subheader>
 | 
			
		||||
      <v-subheader>{{ $t("meal-plan.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>
 | 
			
		||||
@ -66,7 +66,7 @@
 | 
			
		||||
      />
 | 
			
		||||
 | 
			
		||||
      <v-divider></v-divider>
 | 
			
		||||
      <v-subheader>{{$t('settings.webhooks.webhooks-caps')}}</v-subheader>
 | 
			
		||||
      <v-subheader>{{ $t("settings.webhooks.webhooks-caps") }}</v-subheader>
 | 
			
		||||
      <v-card-text class="mt-0 pt-0">
 | 
			
		||||
        {{
 | 
			
		||||
          $t(
 | 
			
		||||
@ -82,7 +82,7 @@
 | 
			
		||||
 | 
			
		||||
      <v-card-text>
 | 
			
		||||
        <v-text-field
 | 
			
		||||
          prepend-icon="mdi-delete"
 | 
			
		||||
          :prepend-icon="$globals.icons.delete"
 | 
			
		||||
          v-for="(url, index) in groupSettings.webhookUrls"
 | 
			
		||||
          @click:prepend="removeWebhook(index)"
 | 
			
		||||
          :key="index"
 | 
			
		||||
@ -93,7 +93,7 @@
 | 
			
		||||
          <v-spacer></v-spacer>
 | 
			
		||||
          <v-btn small color="success" @click="addWebhook">
 | 
			
		||||
            <v-icon left> mdi-webhook </v-icon>
 | 
			
		||||
            {{$t('general.new')}}
 | 
			
		||||
            {{ $t("general.new") }}
 | 
			
		||||
          </v-btn>
 | 
			
		||||
        </v-card-actions>
 | 
			
		||||
      </v-card-text>
 | 
			
		||||
@ -106,7 +106,7 @@
 | 
			
		||||
        </v-btn>
 | 
			
		||||
        <v-spacer></v-spacer>
 | 
			
		||||
        <v-btn color="success" @click="saveGroupSettings">
 | 
			
		||||
          <v-icon left> mdi-content-save </v-icon>
 | 
			
		||||
          <v-icon left> {{ $globals.icons.save }} </v-icon>
 | 
			
		||||
          {{ $t("general.update") }}
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </v-card-actions>
 | 
			
		||||
 | 
			
		||||
@ -64,7 +64,7 @@
 | 
			
		||||
 | 
			
		||||
              <v-list-item-action class="ml-auto">
 | 
			
		||||
                <v-btn large icon @click.stop="editTheme(item)">
 | 
			
		||||
                  <v-icon color="accent">mdi-square-edit-outline</v-icon>
 | 
			
		||||
                  <v-icon color="accent">{{ $globals.icons.edit }}</v-icon>
 | 
			
		||||
                </v-btn>
 | 
			
		||||
              </v-list-item-action>
 | 
			
		||||
            </v-list-item>
 | 
			
		||||
@ -75,7 +75,7 @@
 | 
			
		||||
        <v-card-actions>
 | 
			
		||||
          <v-spacer class="mx-2"></v-spacer>
 | 
			
		||||
          <v-btn class="my-1 mb-n1" color="success" @click="createTheme">
 | 
			
		||||
            <v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
 | 
			
		||||
            <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
 | 
			
		||||
          </v-btn>
 | 
			
		||||
        </v-card-actions>
 | 
			
		||||
      </template>
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <StatCard icon="mdi-account">
 | 
			
		||||
  <StatCard :icon="$globals.icons.user">
 | 
			
		||||
    <template v-slot:avatar>
 | 
			
		||||
      <v-avatar color="accent" size="120" class="white--text headline mt-n16">
 | 
			
		||||
        <img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" @load="hideImage = false" />
 | 
			
		||||
@ -90,7 +90,7 @@
 | 
			
		||||
        />
 | 
			
		||||
        <v-spacer></v-spacer>
 | 
			
		||||
        <v-btn color="success" @click="updateUser">
 | 
			
		||||
          <v-icon left> mdi-content-save </v-icon>
 | 
			
		||||
          <v-icon left> {{ $globals.icons.save }} </v-icon>
 | 
			
		||||
          {{ $t("general.update") }}
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </v-card-actions>
 | 
			
		||||
 | 
			
		||||
@ -55,7 +55,7 @@
 | 
			
		||||
                      <v-list-item-title v-text="item.name"></v-list-item-title>
 | 
			
		||||
                    </v-list-item-content>
 | 
			
		||||
                    <v-list-item-icon @click="deleteActiveCategory(index)">
 | 
			
		||||
                      <v-icon>mdi-delete</v-icon>
 | 
			
		||||
                      <v-icon>{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
                    </v-list-item-icon>
 | 
			
		||||
                  </v-list-item>
 | 
			
		||||
                </draggable>
 | 
			
		||||
@ -67,7 +67,7 @@
 | 
			
		||||
          <v-card outlined height="350px">
 | 
			
		||||
            <v-app-bar dark dense color="primary">
 | 
			
		||||
              <v-icon left>
 | 
			
		||||
                mdi-tag
 | 
			
		||||
                {{ $globals.icons.tags }}
 | 
			
		||||
              </v-icon>
 | 
			
		||||
 | 
			
		||||
              <v-toolbar-title class="headline">
 | 
			
		||||
@ -95,7 +95,7 @@
 | 
			
		||||
                      <v-list-item-title v-text="item.name"></v-list-item-title>
 | 
			
		||||
                    </v-list-item-content>
 | 
			
		||||
                    <v-list-item-icon @click="deleteCategoryfromDatabase(item.slug)">
 | 
			
		||||
                      <v-icon>mdi-delete</v-icon>
 | 
			
		||||
                      <v-icon>{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
                    </v-list-item-icon>
 | 
			
		||||
                  </v-list-item>
 | 
			
		||||
                </draggable>
 | 
			
		||||
@ -127,7 +127,7 @@
 | 
			
		||||
    <v-card-actions>
 | 
			
		||||
      <v-spacer></v-spacer>
 | 
			
		||||
      <v-btn color="success" @click="saveSettings" class="mr-2">
 | 
			
		||||
        <v-icon left> mdi-content-save </v-icon>
 | 
			
		||||
        <v-icon left> {{ $globals.icons.save }} </v-icon>
 | 
			
		||||
        {{ $t("general.save") }}
 | 
			
		||||
      </v-btn>
 | 
			
		||||
    </v-card-actions>
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@
 | 
			
		||||
  <div>
 | 
			
		||||
    <BaseDialog
 | 
			
		||||
      ref="assignDialog"
 | 
			
		||||
      title-icon="mdi-tag"
 | 
			
		||||
      :title-icon="$globals.icons.tags"
 | 
			
		||||
      color="primary"
 | 
			
		||||
      :title="$t('settings.toolbox.bulk-assign')"
 | 
			
		||||
      :loading="loading"
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@
 | 
			
		||||
  <div>
 | 
			
		||||
    <base-dialog
 | 
			
		||||
      ref="deleteDialog"
 | 
			
		||||
      title-icon="mdi-tag"
 | 
			
		||||
      :title-icon="$globals.icons.tags"
 | 
			
		||||
      color="error"
 | 
			
		||||
      :title="$t('general.delete') + ' ' + (isTags ? $t('tag.tags') : $t('recipe.categories'))"
 | 
			
		||||
      :loading="loading"
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@
 | 
			
		||||
  <v-card outlined class="mt-n1">
 | 
			
		||||
    <BaseDialog
 | 
			
		||||
      ref="renameDialog"
 | 
			
		||||
      title-icon="mdi-tag"
 | 
			
		||||
      :title-icon="$globals.icons.tags"
 | 
			
		||||
      :title="renameTarget.title"
 | 
			
		||||
      :submit-text="$t('general.update')"
 | 
			
		||||
      modal-width="800"
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,7 @@
 | 
			
		||||
          <template v-slot:open="{ open }">
 | 
			
		||||
            <v-btn small color="info" @click="open">
 | 
			
		||||
              <v-icon left>
 | 
			
		||||
                mdi-plus
 | 
			
		||||
                {{ $globals.icons.create }}
 | 
			
		||||
              </v-icon>
 | 
			
		||||
              {{ $t("events.notification") }}
 | 
			
		||||
            </v-btn>
 | 
			
		||||
@ -135,7 +135,7 @@
 | 
			
		||||
              </td>
 | 
			
		||||
              <td>
 | 
			
		||||
                <v-btn class="mx-1" small color="error" @click="deleteNotification(item.id)">
 | 
			
		||||
                  <v-icon> mdi-delete </v-icon>
 | 
			
		||||
                  <v-icon> {{ $globals.icons.delete }} </v-icon>
 | 
			
		||||
                  {{ $t("general.delete") }}
 | 
			
		||||
                </v-btn>
 | 
			
		||||
                <v-btn small color="info" @click="testByID(item.id)">
 | 
			
		||||
 | 
			
		||||
@ -3,12 +3,12 @@
 | 
			
		||||
    <div class="d-flex justify-center align-center pa-2 flex-wrap">
 | 
			
		||||
      <v-btn-toggle v-model="filter" mandatory color="primary">
 | 
			
		||||
        <v-btn small value="category">
 | 
			
		||||
          <v-icon>mdi-tag-multiple</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.tags }}-multiple</v-icon>
 | 
			
		||||
          {{ $t("recipe.categories") }}
 | 
			
		||||
        </v-btn>
 | 
			
		||||
 | 
			
		||||
        <v-btn small value="tag">
 | 
			
		||||
          <v-icon>mdi-tag-multiple</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.tags }}-multiple</v-icon>
 | 
			
		||||
          {{ $t("tag.tags") }}
 | 
			
		||||
        </v-btn>
 | 
			
		||||
      </v-btn-toggle>
 | 
			
		||||
 | 
			
		||||
@ -5,20 +5,20 @@
 | 
			
		||||
        <v-tabs-slider></v-tabs-slider>
 | 
			
		||||
 | 
			
		||||
        <v-tab href="#event-notifications">
 | 
			
		||||
          {{$t('settings.notify')}}
 | 
			
		||||
          {{ $t("settings.notify") }}
 | 
			
		||||
          <v-icon>mdi-bell-alert</v-icon>
 | 
			
		||||
        </v-tab>
 | 
			
		||||
        <v-tab href="#category-editor">
 | 
			
		||||
          {{ $t("recipe.categories") }}
 | 
			
		||||
          <v-icon>mdi-tag-multiple-outline</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.tags }}</v-icon>
 | 
			
		||||
        </v-tab>
 | 
			
		||||
 | 
			
		||||
        <v-tab href="#tag-editor">
 | 
			
		||||
          {{ $t("tag.tags") }}
 | 
			
		||||
          <v-icon>mdi-tag-multiple-outline</v-icon>
 | 
			
		||||
          <v-icon>{{ $globals.icons.tags }}</v-icon>
 | 
			
		||||
        </v-tab>
 | 
			
		||||
        <v-tab href="#organize">
 | 
			
		||||
          {{$t('settings.organize')}}
 | 
			
		||||
          {{ $t("settings.organize") }}
 | 
			
		||||
          <v-icon>mdi-broom</v-icon>
 | 
			
		||||
        </v-tab>
 | 
			
		||||
      </v-tabs>
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,30 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <v-container>
 | 
			
		||||
    <CardSection :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
 | 
			
		||||
    <div v-if="selectItems">
 | 
			
		||||
      <v-app-bar color="transparent" flat class="mt-n1 rounded">
 | 
			
		||||
        <v-icon large left>
 | 
			
		||||
          {{ $globals.icons.tags }}
 | 
			
		||||
        </v-icon>
 | 
			
		||||
        <v-toolbar-title class="headline"> {{ altTitle }} </v-toolbar-title>
 | 
			
		||||
        <v-spacer></v-spacer>
 | 
			
		||||
      </v-app-bar>
 | 
			
		||||
      <v-slide-x-transition hide-on-leave>
 | 
			
		||||
        <v-row>
 | 
			
		||||
          <v-col cols="12" :sm="12" :md="6" :lg="4" :xl="3" v-for="item in selectItems" :key="item.id">
 | 
			
		||||
            <v-card hover :to="`/recipes/${routerTagCat}/${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>
 | 
			
		||||
      </v-slide-x-transition>
 | 
			
		||||
    </div>
 | 
			
		||||
    <CardSection v-else :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
 | 
			
		||||
  </v-container>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -20,14 +44,29 @@ export default {
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    currentCategory() {
 | 
			
		||||
      return this.$route.params.category;
 | 
			
		||||
      return this.$route.params.category || false;
 | 
			
		||||
    },
 | 
			
		||||
    currentTag() {
 | 
			
		||||
      return this.$route.params.tag;
 | 
			
		||||
      return this.$route.params.tag || false;
 | 
			
		||||
    },
 | 
			
		||||
    TagOrCategory() {
 | 
			
		||||
      return this.currentCategory || this.currentTag;
 | 
			
		||||
    },
 | 
			
		||||
    routerTagCat() {
 | 
			
		||||
      return this.$route.path.split("/")[2];
 | 
			
		||||
    },
 | 
			
		||||
    altTitle() {
 | 
			
		||||
      return this.routerTagCat === "category" ? this.$t("recipe.categories") : this.$t("tag.tags");
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    selectItems() {
 | 
			
		||||
      if (this.TagOrCategory) return false;
 | 
			
		||||
      if (this.routerTagCat === "category") {
 | 
			
		||||
        return this.$store.getters.getAllCategories;
 | 
			
		||||
      }
 | 
			
		||||
      return this.$store.getters.getAllTags;
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    shownRecipes() {
 | 
			
		||||
      if (this.sortedResults.length > 0) {
 | 
			
		||||
        return this.sortedResults;
 | 
			
		||||
@ -48,7 +87,7 @@ export default {
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    async getRecipes() {
 | 
			
		||||
      if (!this.TagOrCategory === null) return;
 | 
			
		||||
      if (!this.TagOrCategory === null || this.selectItems) return;
 | 
			
		||||
 | 
			
		||||
      let data = {};
 | 
			
		||||
      if (this.currentCategory) {
 | 
			
		||||
 | 
			
		||||
@ -2,9 +2,7 @@
 | 
			
		||||
  <v-container>
 | 
			
		||||
    <v-card flat height="100%">
 | 
			
		||||
      <v-app-bar color="transparent" flat class="mt-n1 rounded">
 | 
			
		||||
        <v-icon large left>
 | 
			
		||||
          mdi-tag-multiple-outline
 | 
			
		||||
        </v-icon>
 | 
			
		||||
        <v-icon large left> {{ $globals.icons.tags }}-multiple-outline </v-icon>
 | 
			
		||||
        <v-toolbar-title class="headline"> {{ page.name }} </v-toolbar-title>
 | 
			
		||||
      </v-app-bar>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -16,7 +16,7 @@
 | 
			
		||||
        <template v-slot:open="{ open }">
 | 
			
		||||
          <v-btn color="info" @click="open">
 | 
			
		||||
            <v-icon left>
 | 
			
		||||
              mdi-plus
 | 
			
		||||
              {{ $globals.icons.create }}
 | 
			
		||||
            </v-icon>
 | 
			
		||||
            New List
 | 
			
		||||
          </v-btn>
 | 
			
		||||
@ -39,7 +39,7 @@
 | 
			
		||||
            <v-card-actions>
 | 
			
		||||
              <v-btn text color="error" @click="deleteList(item.id)">
 | 
			
		||||
                <v-icon left>
 | 
			
		||||
                  mdi-delete
 | 
			
		||||
                  {{ $globals.icons.delete }}
 | 
			
		||||
                </v-icon>
 | 
			
		||||
                Delete
 | 
			
		||||
              </v-btn>
 | 
			
		||||
@ -85,13 +85,13 @@
 | 
			
		||||
                </v-btn>
 | 
			
		||||
                <v-btn x-small text class="mr-1" @click="activeList.items[index].quantity += 1">
 | 
			
		||||
                  <v-icon>
 | 
			
		||||
                    mdi-plus
 | 
			
		||||
                    {{ $globals.icons.create }}
 | 
			
		||||
                  </v-icon>
 | 
			
		||||
                </v-btn>
 | 
			
		||||
              </div>
 | 
			
		||||
              <v-spacer></v-spacer>
 | 
			
		||||
              <v-btn v-if="edit" icon @click="removeItemByIndex(index)" color="error">
 | 
			
		||||
                <v-icon>mdi-delete</v-icon>
 | 
			
		||||
                <v-icon>{{ $globals.icons.delete }}</v-icon>
 | 
			
		||||
              </v-btn>
 | 
			
		||||
            </v-col>
 | 
			
		||||
 | 
			
		||||
@ -130,13 +130,13 @@
 | 
			
		||||
          <v-spacer></v-spacer>
 | 
			
		||||
          <v-btn v-if="edit" color="success" @click="openSearch">
 | 
			
		||||
            <v-icon left>
 | 
			
		||||
              mdi-silverware-variant
 | 
			
		||||
              {{ $globals.icons.primary }}
 | 
			
		||||
            </v-icon>
 | 
			
		||||
            From Recipe
 | 
			
		||||
          </v-btn>
 | 
			
		||||
          <v-btn v-if="edit" color="success" @click="newItem">
 | 
			
		||||
            <v-icon left>
 | 
			
		||||
              mdi-plus
 | 
			
		||||
              {{ $globals.icons.create }}
 | 
			
		||||
            </v-icon>
 | 
			
		||||
            New
 | 
			
		||||
          </v-btn>
 | 
			
		||||
 | 
			
		||||
@ -1,11 +1,11 @@
 | 
			
		||||
import Admin from "@/pages/Admin";
 | 
			
		||||
import Migration from "@/pages/Admin/Migration";
 | 
			
		||||
import Profile from "@/pages/Admin/Profile";
 | 
			
		||||
import ManageUsers from "@/pages/Admin/ManageUsers";
 | 
			
		||||
import Settings from "@/pages/Admin/Settings";
 | 
			
		||||
import About from "@/pages/Admin/About";
 | 
			
		||||
import ToolBox from "@/pages/Admin/ToolBox";
 | 
			
		||||
import Dashboard from "@/pages/Admin/Dashboard";
 | 
			
		||||
const Admin = () => import("@/pages/Admin");
 | 
			
		||||
const Migration = () => import("@/pages/Admin/Migration");
 | 
			
		||||
const Profile = () => import("@/pages/Admin/Profile");
 | 
			
		||||
const ManageUsers = () => import("@/pages/Admin/ManageUsers");
 | 
			
		||||
const Settings = () => import("@/pages/Admin/Settings");
 | 
			
		||||
const About = () => import("@/pages/Admin/About");
 | 
			
		||||
const ToolBox = () => import("@/pages/Admin/ToolBox");
 | 
			
		||||
const Dashboard = () => import("@/pages/Admin/Dashboard");
 | 
			
		||||
import { store } from "../store";
 | 
			
		||||
 | 
			
		||||
export const adminRoutes = {
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
import LoginPage from "@/pages/LoginPage";
 | 
			
		||||
import SignUpPage from "@/pages/SignUpPage";
 | 
			
		||||
const LoginPage = () => import("@/pages/LoginPage");
 | 
			
		||||
const SignUpPage = () => import("@/pages/SignUpPage");
 | 
			
		||||
import { store } from "../store";
 | 
			
		||||
 | 
			
		||||
export const authRoutes = [
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
import SearchPage from "@/pages/SearchPage";
 | 
			
		||||
const SearchPage = () => import("@/pages/SearchPage");
 | 
			
		||||
const ShoppingList = () => import("@/pages/ShoppingList");
 | 
			
		||||
import HomePage from "@/pages/HomePage";
 | 
			
		||||
import ShoppingList from "@/pages/ShoppingList";
 | 
			
		||||
 | 
			
		||||
export const generalRoutes = [
 | 
			
		||||
  { path: "/", name: "home", component: HomePage },
 | 
			
		||||
 | 
			
		||||
@ -1,9 +1,8 @@
 | 
			
		||||
import Planner from "@/pages/MealPlan/Planner";
 | 
			
		||||
import ThisWeek from "@/pages/MealPlan/ThisWeek";
 | 
			
		||||
const Planner = () => import("@/pages/MealPlan/Planner");
 | 
			
		||||
const ThisWeek = () => import("@/pages/MealPlan/ThisWeek");
 | 
			
		||||
import { api } from "@/api";
 | 
			
		||||
 | 
			
		||||
import i18n from "@/i18n.js";
 | 
			
		||||
import { utils } from "@/utils";
 | 
			
		||||
import i18n from "@/i18n.js";
 | 
			
		||||
 | 
			
		||||
export const mealRoutes = [
 | 
			
		||||
  {
 | 
			
		||||
 | 
			
		||||
@ -1,14 +1,16 @@
 | 
			
		||||
import ViewRecipe from "@/pages/Recipe/ViewRecipe";
 | 
			
		||||
import NewRecipe from "@/pages/Recipe/NewRecipe";
 | 
			
		||||
import CustomPage from "@/pages/Recipes/CustomPage";
 | 
			
		||||
import AllRecipes from "@/pages/Recipes/AllRecipes";
 | 
			
		||||
import CategoryTagPage from "@/pages/Recipes/CategoryTagPage";
 | 
			
		||||
const ViewRecipe = () => import("@/pages/Recipe/ViewRecipe");
 | 
			
		||||
const NewRecipe = () => import("@/pages/Recipe/NewRecipe");
 | 
			
		||||
const CustomPage = () => import("@/pages/Recipes/CustomPage");
 | 
			
		||||
const AllRecipes = () => import("@/pages/Recipes/AllRecipes");
 | 
			
		||||
const CategoryTagPage = () => import("@/pages/Recipes/CategoryTagPage");
 | 
			
		||||
import { api } from "@/api";
 | 
			
		||||
 | 
			
		||||
export const recipeRoutes = [
 | 
			
		||||
  // Recipes
 | 
			
		||||
  { path: "/recipes/all", component: AllRecipes },
 | 
			
		||||
  { path: "/recipes/tag/:tag", component: CategoryTagPage },
 | 
			
		||||
  { path: "/recipes/tag", component: CategoryTagPage },
 | 
			
		||||
  { path: "/recipes/category", component: CategoryTagPage },
 | 
			
		||||
  { path: "/recipes/category/:category", component: CategoryTagPage },
 | 
			
		||||
  // Misc
 | 
			
		||||
  { path: "/new/", component: NewRecipe },
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										30
									
								
								frontend/src/utils/globals.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										30
									
								
								frontend/src/utils/globals.js
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,30 @@
 | 
			
		||||
const icons = {
 | 
			
		||||
  primary: "mdi-silverware-variant",
 | 
			
		||||
 | 
			
		||||
  // Crud
 | 
			
		||||
  create: "mdi-plus",
 | 
			
		||||
  delete: "mdi-delete",
 | 
			
		||||
  save: "mdi-content-save",
 | 
			
		||||
  edit: "mdi-square-edit-outline",
 | 
			
		||||
 | 
			
		||||
  // Organization
 | 
			
		||||
  tags: "mdi-tag-multiple-outline",
 | 
			
		||||
 | 
			
		||||
  // Admin
 | 
			
		||||
  user: "mdi-account",
 | 
			
		||||
  admin: "mdi-admin",
 | 
			
		||||
  group: "mdi-account-group",
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const globals = {
 | 
			
		||||
  icons,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
 | 
			
		||||
import { globals } from "@/utils/globals"
 | 
			
		||||
globals: globals,
 | 
			
		||||
 | 
			
		||||
{{ globals.icons. }}
 | 
			
		||||
 | 
			
		||||
*/
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user