Merge pull request #874 from kanriapp/main

Add last minute tweaks/fixes to v0.8.2

Author: trobonox

components/modal/EditCard.vue

@@ -501,6 +501,7 @@ import { vOnClickOutside } from "@vueuse/components";
 import { Container, Draggable } from "vue3-smooth-dnd";
 //@ts-expect-error library has no types
 import { VueTagsInput } from "@vojtechlanka/vue-tags-input";
+import { useSettingsStore } from "@/stores/settings";
 
 const props = defineProps<{
   card: Card | null;
@@ -562,6 +563,7 @@ const selectedColor = ref("");
 
 const dueDate: Ref<Date | null> = ref(null);
 const isDueDateCounterRelative = ref(false);
+const settingsStore = useSettingsStore();
 const isDueDateCompleted = ref(false);
 
 const tag = ref("");
@@ -623,7 +625,7 @@ const beforeTagAdd = ({ tag, addTag }: any) => {
   );
 
   if (!existingTag) {
-    if (matches.length === 1) {
+    if (matches.length === 1 && matches[0]) {
       tag.text = matches[0].text;
       tag.id = matches[0].id;
       tag.color = matches[0].color;
@@ -702,7 +704,9 @@ const updateTask = (index: number) => {
     !/\S/.test(currentlyEditingTaskName.value);
   if (taskNameEmpty || currentlyEditingTaskIndex.value === -1) return;
 
-  tasks.value[index].name = currentlyEditingTaskName.value;
+  if (tasks.value[index]) {
+    tasks.value[index].name = currentlyEditingTaskName.value;
+  }
 
   currentlyEditingTaskIndex.value = -1;
   currentlyEditingTaskName.value = "";
@@ -803,7 +807,9 @@ watch(props, (newVal) => {
     //@ts-expect-error TODO: improve due date handling/types
     dueDate.value = newVal.card.dueDate || null;
     isDueDateCounterRelative.value =
-      newVal.card.isDueDateCounterRelative || false;
+      newVal.card.isDueDateCounterRelative !== undefined
+        ? newVal.card.isDueDateCounterRelative
+        : settingsStore.defaultRelativeDueDatesEnabled;
     isDueDateCompleted.value = newVal.card.isDueDateCompleted || false;
 
     tags.value = newVal.card.tags || [];

i18n/locales/en.json

@@ -67,6 +67,8 @@
       "preferencesAddToTopButtonSubtext": "Displays a button which allows you to add new cards to the top of a column.",
       "preferencesDisplayNumberOfCardsHeading": "Display number of cards in column",
       "preferencesDisplayNumberOfCardsSubtext": "Shows how many cards are in each column.",
+      "preferencesDefaultRelativeDueDatesHeading": "Use relative due date countdown by default",
+      "preferencesDefaultRelativeDueDatesSubtext": "Newly set due dates default to relative countdown mode instead of absolute date.",
       "languageSelectorHeading": "Language",
       "languageSelectorSubtext": "Change the language of the application.",
       "miscellaneousHeading": "Miscellaneous",

layouts/default.vue

@@ -72,6 +72,15 @@ onMounted(async () => {
     globalSettingsStore.animationsEnabled = true;
   }
 
+  // Load defaultRelativeDueDatesEnabled preference
+  const relativeDueDatesPref = await store.get("defaultRelativeDueDatesEnabled");
+  if (relativeDueDatesPref !== null) {
+    globalSettingsStore.defaultRelativeDueDatesEnabled = relativeDueDatesPref;
+  } else {
+    await store.set("defaultRelativeDueDatesEnabled", false);
+    globalSettingsStore.defaultRelativeDueDatesEnabled = false;
+  }
+
   savedColors.value = await store.get("colors");
   autoThemeEnabled.value = await store.get("activeTheme") === "auto" || false;
 

pages/import.vue

@@ -216,6 +216,9 @@ const exportJSON = async () => {
   const columnZoomLevel = await store.get("columnZoomLevel");
   const lastInstalledVersion = await store.get("lastInstalledVersion");
   const animationsEnabled = await store.get("animationsEnabled");
+  const defaultRelativeDueDatesEnabled = await store.get(
+    "defaultRelativeDueDatesEnabled"
+  );
   const addToTopOfColumnButtonEnabled = await store.get(
     "addToTopOfColumnButtonEnabled"
   );
@@ -235,6 +238,7 @@ const exportJSON = async () => {
       savedCustomTheme,
       reverseSorting,
       animationsEnabled,
+      defaultRelativeDueDatesEnabled,
       addToTopOfColumnButtonEnabled,
       displayColumnCardCountEnabled,
     },
@@ -345,6 +349,12 @@ const importFromKanriFull = async () => {
   store.set("savedCustomTheme", zodParsed.savedCustomTheme);
   store.set("lastInstalledVersion", zodParsed.lastInstalledVersion);
   store.set("animationsEnabled", zodParsed.animationsEnabled);
+  if (zodParsed.defaultRelativeDueDatesEnabled !== undefined) {
+    store.set(
+      "defaultRelativeDueDatesEnabled",
+      zodParsed.defaultRelativeDueDatesEnabled
+    );
+  }
   store.set("reverseSorting", zodParsed.reverseSorting);
   store.set(
     "addToTopOfColumnButtonEnabled",

pages/kanban/[id].vue

@@ -237,6 +237,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
               drag-handle-selector=".dragging-handle"
               group-name="columns"
               :get-ghost-parent="getGhostParent"
+              :get-child-payload="(index: number) => board.columns[index]"
               @drop="onDrop"
             >
               <Draggable

pages/settings.vue

@@ -204,6 +204,26 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
           />
         </SwitchRoot>
       </div>
+
+      <div class="mt-4 flex w-[48rem] flex-row items-start justify-between">
+        <div>
+          <h3 class="text-lg">
+            {{ $t("pages.settings.preferencesDefaultRelativeDueDatesHeading") }}
+          </h3>
+          <span class="text-dim-2">
+            {{ $t("pages.settings.preferencesDefaultRelativeDueDatesSubtext") }}
+          </span>
+        </div>
+        <SwitchRoot
+          v-model:checked="globalSettingsStore.defaultRelativeDueDatesEnabled"
+          class="bg-elevation-2 bg-accent-checked relative flex h-[24px] w-[42px] cursor-pointer rounded-full shadow-sm focus-within:outline focus-within:outline-black"
+          @update:checked="toggleDefaultRelativeDueDates"
+        >
+          <SwitchThumb
+            class="bg-button-text my-auto block size-[18px] translate-x-0.5 rounded-full shadow-sm transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]"
+          />
+        </SwitchRoot>
+      </div>
     </section>
 
     <section id="miscellaneous-settings">
@@ -425,7 +445,7 @@ const deleteAllData = async () => {
   activeTheme.value = "dark";
   themeEditorDisplayed.value = false;
 
-  globalSettingsStore.animationsEnabled.value = true;
+  globalSettingsStore.animationsEnabled = true;
   store.set("animationsEnabled", true); // Reset animations to true
 
   router.go(0);
@@ -467,6 +487,14 @@ const toggleDisplayCardCount = async (displayCardCountToggled: boolean) => {
   }
 };
 
+const toggleDefaultRelativeDueDates = async (relativeToggled: boolean) => {
+  if (relativeToggled) {
+    await store.set("defaultRelativeDueDatesEnabled", true);
+  } else {
+    await store.set("defaultRelativeDueDatesEnabled", false);
+  }
+};
+
 const exportThemeToJson = async () => {
   const filePath = await save({
     defaultPath: "./kanri_theme_export.json",

stores/settings.ts

@@ -22,5 +22,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 export const useSettingsStore = defineStore("settings", {
   state: () => ({
     animationsEnabled: true,
+    // If true, new due dates default to relative countdown mode
+    defaultRelativeDueDatesEnabled: false,
   }),
 });

types/json-schemas.ts

@@ -103,6 +103,8 @@ export const kanriJsonSchema = z.object({
   reverseSorting: z.boolean().optional().nullable(),
   addToTopOfColumnButtonEnabled: z.boolean().optional().nullable(),
   displayColumnCardCountEnabled: z.boolean().optional().nullable(),
+  // If enabled, newly created due dates default to relative countdown mode
+  defaultRelativeDueDatesEnabled: z.boolean().optional().nullable(),
   pins: z
     .array(
       z.object({