mobile menu

src/pages/vault/[vaultId]/passwords/[[groupId]]/create.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <VaultCard
+      :title="t('title')"
+      icon="mdi:folder-plus-outline"
+      @close="onClose"
+    >
+      <div
+        class="flex flex-col gap-4 w-full p-4"
+        @keyup.enter="onCreate"
+      >
+        <UiInput
+          :check-input="check"
+          :label="t('name.label')"
+          :placeholder="t('name.label')"
+          autofocus
+          v-model:errors="errors.name"
+          v-model="vaultGroup.name"
+        />
+
+        <UiInput
+          v-model="vaultGroup.description"
+          :check-input="check"
+          :label="t('description.label')"
+          :placeholder="t('description.label')"
+        />
+
+        <UiSelectColor v-model="vaultGroup.color" />
+
+        {{ vaultGroup.icon }}
+        <UiSelectIcon v-model="vaultGroup.icon" />
+
+        <div class="flex flex-wrap justify-end gap-4">
+          <button
+            class="btn btn-error btn-outline flex-1 flex-nowrap"
+            @click="onClose"
+            type="button"
+          >
+            {{ t('abort') }}
+            <Icon name="mdi:close" />
+          </button>
+          <button
+            class="btn btn-primary flex-1 flex-nowrap"
+            type="button"
+            @click="onCreate"
+          >
+            {{ t('create') }}
+            <Icon name="mdi:check" />
+          </button>
+        </div>
+      </div>
+    </VaultCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InsertHaexPasswordsGroups } from '~~/src-tauri/database/schemas/vault'
+
+definePageMeta({
+  name: 'passwordGroupCreate',
+})
+
+const { t } = useI18n()
+
+const check = ref(false)
+
+const { currentGroupId } = storeToRefs(usePasswordGroupStore())
+const vaultGroup = ref<InsertHaexPasswordsGroups>({
+  name: '',
+  description: '',
+  id: '',
+  color: null,
+  icon: null,
+  order: null,
+  parentId: currentGroupId.value,
+})
+
+const errors = ref({
+  name: [],
+  description: [],
+})
+
+const onClose = () => {
+  useRouter().back()
+}
+
+const onCreate = async () => {
+  try {
+    check.value = true
+
+    if (errors.value.name.length || errors.value.description.length) return
+
+    const { addGroupAsync } = usePasswordGroupStore()
+
+    const newGroup = await addGroupAsync(vaultGroup.value)
+
+    console.log('newGroup', newGroup)
+    if (!newGroup.id) {
+      return
+    }
+    //console.log('created group with id', newGroup?.id)
+
+    //currentGroupId.value = newGroup?.id
+    await navigateTo(
+      useLocalePath()({
+        name: 'passwordGroupItems',
+        params: {
+          groupId: newGroup.id,
+        },
+        query: {
+          ...useRoute().query,
+        },
+      }),
+    )
+  } catch (error) {
+    console.log(error)
+  }
+}
+</script>
+
+<i18n lang="json">
+{
+  "de": {
+    "title": "Neue Gruppe anlegen",
+    "abort": "Abbrechen",
+    "create": "Anlegen",
+    "name": {
+      "label": "Name"
+    },
+    "description": {
+      "label": "Beschreibung"
+    }
+  },
+
+  "en": {
+    "title": "Create new Group",
+    "abort": "Abort",
+    "create": "Create",
+    "name": {
+      "label": "Name"
+    },
+    "description": {
+      "label": "Description"
+    }
+  }
+}
+</i18n>

src/pages/vault/[vaultId]/passwords/[[groupId]]/edit.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <VaultGroup
+      @submit="onSaveAsync"
+      @back="onBackAsync"
+      @reject="onRejectAsync"
+      @close="onCloseAsync"
+      v-model="vaultGroup"
+      v-model:read_only="read_only"
+      :originally
+    >
+      <!-- <template #bottom="{ onSubmit, onClose }">
+      <button
+        class="btn btn-error flex-1 flex-nowrap"
+        @click="onClose"
+        type="button"
+      >
+        {{ t('abort') }}
+        <Icon name="mdi:close" />
+      </button>
+
+      <button
+        class="btn btn-primary flex-1 flex-nowrap"
+        type="button"
+        @click="onSubmit"
+      >
+        {{ t('save') }}
+        <Icon name="mdi:check" />
+      </button>
+    </template> -->
+    </VaultGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router'
+import type { SelectHaexPasswordsGroups } from '~~/src-tauri/database/schemas/vault'
+
+definePageMeta({
+  name: 'passwordGroupEdit',
+})
+
+const { read_only } = storeToRefs(useVaultStore())
+
+const vaultGroup = ref<SelectHaexPasswordsGroups>({
+  color: '',
+  description: '',
+  icon: '',
+  id: '',
+  name: '',
+  order: null,
+  parentId: '',
+  createdAt: null,
+  updateAt: null,
+})
+
+const originally = ref<SelectHaexPasswordsGroups>()
+
+const onCloseAsync = async () => {
+  if (read_only.value) return navigateToGroupItemsAsync(vaultGroup.value.id)
+  else read_only.value = true
+}
+/* {
+  await navigateTo(
+    useLocaleRoute()({
+      name: 'vaultGroupEntries',
+      params: {
+        ...useRouter().currentRoute.value.params,
+      },
+      query: {
+        ...useRouter().currentRoute.value.query,
+      },
+    })
+  );
+}; */
+
+const { currentGroupId } = storeToRefs(usePasswordGroupStore())
+const { readGroupAsync, navigateToGroupItemsAsync } = usePasswordGroupStore()
+
+const getGroupAsync = async () => {
+  if (!currentGroupId.value) return
+
+  const group = await readGroupAsync(currentGroupId.value)
+  console.log('found group', group)
+  if (group) {
+    vaultGroup.value = group
+    originally.value = { ...group }
+  }
+}
+watch(currentGroupId, async () => getGroupAsync(), { immediate: true })
+
+const { add } = useSnackbar()
+
+const onSaveAsync = async (to?: RouteLocationNormalizedLoadedGeneric) => {
+  try {
+    const { updateAsync } = usePasswordGroupStore()
+    await updateAsync(vaultGroup.value)
+    await getGroupAsync()
+    read_only.value = true
+    if (to) {
+      return navigateTo(to)
+    }
+  } catch (error) {
+    add({
+      type: 'error',
+      text: JSON.stringify(error),
+    })
+    console.log(error)
+  }
+}
+
+const onBackAsync = async () => {
+  if (originally.value) vaultGroup.value = { ...originally.value }
+  await navigateToGroupItemsAsync(vaultGroup.value.id)
+}
+
+const onRejectAsync = async (to?: RouteLocationNormalizedLoadedGeneric) => {
+  if (originally.value) vaultGroup.value = { ...originally.value }
+  if (to) return navigateTo(to)
+  else return onBackAsync
+}
+</script>
+
+<i18n lang="json">
+{
+  "de": {
+    "title": "Gruppe anpassen",
+    "abort": "Abbrechen",
+    "save": "Speichern",
+    "name": {
+      "label": "Name"
+    },
+    "description": {
+      "label": "Beschreibung"
+    }
+  },
+
+  "en": {
+    "title": "Edit Group",
+    "abort": "Abort",
+    "save": "Save",
+    "name": {
+      "label": "Name"
+    },
+    "description": {
+      "label": "Description"
+    }
+  }
+}
+</i18n>

src/pages/vault/[vaultId]/passwords/[[groupId]]/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="relative h-full">
+    <div>
+      <HaexPassMobileMenu :group-items="currentGroupItems" />
+
+      <div
+        class="fixed bottom-4 flex justify-center w-full transition-all pointer-events-none"
+        :class="[isVisible ? 'left-15' : 'left-0']"
+      >
+        <!-- <UiButton class="btn btn-primary btn-lg btn-square rotate-45">
+          <Icon name="mdi:plus" />
+        </UiButton> -->
+        <UiButtonAction
+          class="pointer-events-auto"
+          :menu
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SelectHaexPasswordsItems } from '~~/src-tauri/database/schemas/vault'
+
+definePageMeta({
+  name: 'passwordGroupItems',
+})
+
+const { menu } = storeToRefs(usePasswordsActionMenuStore())
+const items = ref<SelectHaexPasswordsItems[]>([])
+
+const { readGroupItemsAsync } = usePasswordGroupStore()
+const { currentGroupItems } = storeToRefs(usePasswordGroupStore())
+const { isVisible } = storeToRefs(useSidebarStore())
+
+console.log('currentGroupItems', currentGroupItems.value)
+const test = () => console.log('currentGroupItems', currentGroupItems.value)
+
+onMounted(async () => {})
+</script>

src/pages/vault/[vaultId]/passwords/[[groupId]]/item/[itemId].vue

@@ -0,0 +1,3 @@
+<template>
+  <div>item</div>
+</template>

src/pages/vault/[vaultId]/passwords/[[groupId]]/item/create.vue

@@ -0,0 +1 @@
+<template><div>create item</div></template>