nuxt init

frontend.old/src/components/FormHelpers/CategoryTagSelector.vue

@@ -0,0 +1,134 @@
+<template>
+  <v-autocomplete
+    :items="activeItems"
+    v-model="selected"
+    :value="value"
+    :label="inputLabel"
+    chips
+    deletable-chips
+    :dense="dense"
+    item-text="name"
+    persistent-hint
+    multiple
+    :hint="hint"
+    :solo="solo"
+    :return-object="returnObject"
+    :flat="flat"
+    @input="emitChange"
+  >
+    <template v-slot:selection="data">
+      <v-chip
+        class="ma-1"
+        :input-value="data.selected"
+        close
+        @click:close="removeByIndex(data.index)"
+        label
+        color="accent"
+        dark
+        :key="data.index"
+      >
+        {{ data.item.name || data.item }}
+      </v-chip>
+    </template>
+    <template v-slot:append-outer="">
+      <NewCategoryTagDialog v-if="showAdd" :tag-dialog="tagSelector" @created-item="pushToItem" />
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+import NewCategoryTagDialog from "@/components/UI/Dialogs/NewCategoryTagDialog";
+const MOUNTED_EVENT = "mounted";
+export default {
+  components: {
+    NewCategoryTagDialog,
+  },
+  props: {
+    value: Array,
+    solo: {
+      default: false,
+    },
+    dense: {
+      default: true,
+    },
+    returnObject: {
+      default: true,
+    },
+    tagSelector: {
+      default: false,
+    },
+    hint: {
+      default: null,
+    },
+    showAdd: {
+      default: false,
+    },
+    showLabel: {
+      default: true,
+    },
+  },
+  data() {
+    return {
+      selected: [],
+    };
+  },
+  async created() {
+    if (this.tagSelector) {
+      this.$store.dispatch("requestTags");
+    } else {
+      this.$store.dispatch("requestCategories");
+    }
+  },
+  mounted() {
+    this.$emit(MOUNTED_EVENT);
+    this.setInit(this.value);
+  },
+
+  watch: {
+    value(val) {
+      this.selected = val;
+    },
+  },
+
+  computed: {
+    inputLabel() {
+      if (!this.showLabel) return null;
+      return this.tagSelector ? this.$t("tag.tags") : this.$t("recipe.categories");
+    },
+    activeItems() {
+      let ItemObjects = [];
+      if (this.tagSelector) ItemObjects = this.$store.getters.getAllTags;
+      else {
+        ItemObjects = this.$store.getters.getAllCategories;
+      }
+      if (this.returnObject) return ItemObjects;
+      else {
+        return ItemObjects.map(x => x.name);
+      }
+    },
+    flat() {
+      if (this.selected) {
+        return this.selected.length > 0 && this.solo;
+      }
+      return false;
+    },
+  },
+  methods: {
+    emitChange() {
+      this.$emit("input", this.selected);
+    },
+    setInit(val) {
+      this.selected = val;
+    },
+    removeByIndex(index) {
+      this.selected.splice(index, 1);
+    },
+    pushToItem(createdItem) {
+      createdItem = this.returnObject ? createdItem : createdItem.name;
+      this.selected.push(createdItem);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

frontend.old/src/components/FormHelpers/ColorPickerDialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="text-center">
+      <h3>{{ buttonText }}</h3>
+    </div>
+    <v-text-field v-model="color" hide-details class="ma-0 pa-0" solo >
+      <template v-slot:append>
+        <v-menu v-model="menu" top nudge-bottom="105" nudge-left="16" :close-on-content-click="false">
+          <template v-slot:activator="{ on }">
+            <div :style="swatchStyle" v-on="on" swatches-max-height="300" />
+          </template>
+          <v-card>
+            <v-card-text class="pa-0">
+              <v-color-picker v-model="color" flat mode="hexa" show-swatches />
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </template>
+    </v-text-field>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    buttonText: String,
+    value: String,
+  },
+  data() {
+    return {
+      dialog: false,
+      swatches: false,
+      color: this.value || "#1976D2",
+      mask: "!#XXXXXXXX",
+      menu: false,
+    };
+  },
+  computed: {
+    swatchStyle() {
+      const { value, menu } = this;
+      return {
+        backgroundColor: value,
+        cursor: "pointer",
+        height: "30px",
+        width: "30px",
+        borderRadius: menu ? "50%" : "4px",
+        transition: "border-radius 200ms ease-in-out",
+      };
+    },
+  },
+  watch: {
+    color() {
+      this.updateColor();
+    },
+  },
+  methods: {
+    updateColor() {
+      this.$emit("input", this.color);
+    },
+  },
+};
+</script>
+
+<style></style>

frontend.old/src/components/FormHelpers/DatePicker.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-date-picker :first-day-of-week="firstDayOfWeek" v-on="$listeners"></v-date-picker>
+</template>
+
+<script>
+import { api } from "@/api";
+
+export default {
+  data() {
+    return {
+      firstDayOfWeek: 0,
+    };
+  },
+  mounted() {
+    this.getOptions();
+  },
+
+  methods: {
+    async getOptions() {
+      const settings = await api.siteSettings.get();
+      this.firstDayOfWeek = settings.firstDayOfWeek;
+    },
+  },
+};
+</script>
+
+<style></style>

frontend.old/src/components/FormHelpers/ImportOptions.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <v-checkbox
+      v-for="(option, index) in options"
+      :key="index"
+      class="mb-n4 mt-n3"
+      dense
+      :label="option.text"
+      v-model="option.value"
+      @change="emitValue()"
+    ></v-checkbox>
+  </div>
+</template>
+
+<script>
+const UPDATE_EVENT = "update-options";
+export default {
+  data() {
+    return {
+      options: {
+        recipes: {
+          value: true,
+          text: this.$t("general.recipes"),
+        },
+        settings: {
+          value: true,
+          text: this.$t("general.settings"),
+        },
+        pages: {
+          value: true,
+          text: this.$t("settings.pages"),
+        },
+        themes: {
+          value: true,
+          text: this.$t("general.themes"),
+        },
+        users: {
+          value: true,
+          text: this.$t("user.users"),
+        },
+        groups: {
+          value: true,
+          text: this.$t("group.groups"),
+        },
+        notifications: {
+          value: true,
+          text: this.$t("events.notification"),
+        },
+      },
+    };
+  },
+  mounted() {
+    this.emitValue();
+  },
+  methods: {
+    emitValue() {
+      this.$emit(UPDATE_EVENT, {
+        recipes: this.options.recipes.value,
+        settings: this.options.settings.value,
+        themes: this.options.themes.value,
+        pages: this.options.pages.value,
+        users: this.options.users.value,
+        groups: this.options.groups.value,
+        notifications: this.options.notifications.value,
+      });
+    },
+  },
+};
+</script>

frontend.old/src/components/FormHelpers/LanguageSelector.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-select
+    dense
+    :items="allLanguages"
+    item-text="name"
+    :label="$t('settings.language')"
+    :prepend-icon="$globals.icons.translate"
+    :value="selectedItem"
+    @input="setLanguage"
+  >
+  </v-select>
+</template>
+
+<script>
+const SELECT_EVENT = "select-lang";
+export default {
+  props: {
+    siteSettings: {
+      default: false,
+    },
+  },
+  data: function() {
+    return {
+      selectedItem: 0,
+      items: [
+        {
+          name: "English",
+          value: "en-US",
+        },
+      ],
+    };
+  },
+  created() {
+    this.selectedItem = this.$store.getters.getActiveLang;
+  },
+  computed: {
+    allLanguages() {
+      return this.$store.getters.getAllLangs;
+    },
+  },
+
+  methods: {
+    setLanguage(selectedLanguage) {
+      this.$emit(SELECT_EVENT, selectedLanguage);
+    },
+  },
+};
+</script>

frontend.old/src/components/FormHelpers/TimePickerDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-dialog ref="dialog" v-model="modal2" :return-value.sync="time" persistent width="290px">
+    <template v-slot:activator="{ on, attrs }">
+      <v-text-field
+        v-model="time"
+        :label="$t('settings.set-new-time')"
+        :prepend-icon="$globals.icons.clockOutline"
+        readonly
+        v-bind="attrs"
+        v-on="on"
+      ></v-text-field>
+    </template>
+    <v-time-picker v-if="modal2" v-model="time" full-width>
+      <v-spacer></v-spacer>
+      <v-btn text color="primary" @click="modal2 = false"> {{ $t("general.cancel") }} </v-btn>
+      <v-btn text color="primary" @click="saveTime"> {{ $t("general.ok") }} </v-btn>
+    </v-time-picker>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      time: null,
+      modal2: false,
+    };
+  },
+  methods: {
+    saveTime() {
+      this.$refs.dialog.save(this.time);
+      this.$emit("save-time", this.time);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.v-text-field {
+  max-width: 300px;
+}
+</style>