updates

starsky/starsky/clientapp/src/components/organisms/preference-app-settings-desktop/preference-app-settings-desktop.tsx

@@ -2,20 +2,50 @@ import React, { ChangeEvent, useState } from "react";
 import useFetch from "../../../hooks/use-fetch";
 import useGlobalSettings from "../../../hooks/use-global-settings";
 import { IAppSettings } from "../../../interfaces/IAppSettings";
+import { IAppSettingsDefaultEditorApplication } from "../../../interfaces/IAppSettingsDefaultEditorApplication";
 import { RawJpegMode } from "../../../interfaces/ICollectionsOpenType";
+import { ImageFormat } from "../../../interfaces/IFileIndexItem";
 import localization from "../../../localization/localization.json";
 import FetchPost from "../../../shared/fetch/fetch-post";
 import { Language } from "../../../shared/language";
 import { UrlQuery } from "../../../shared/url-query";
 import FormControl from "../../atoms/form-control/form-control";
 import SwitchButton from "../../atoms/switch-button/switch-button";
 
+const defaultEditorApplication = {
+  imageFormats: [ImageFormat.jpg, ImageFormat.png, ImageFormat.bmp, ImageFormat.tiff]
+} as IAppSettingsDefaultEditorApplication;
+
 async function updateDefaultEditorPhotos(
   event: ChangeEvent<HTMLDivElement>,
-  setIsMessage: React.Dispatch<React.SetStateAction<string>>
+  setIsMessage: React.Dispatch<React.SetStateAction<string>>,
+  defaultDesktopEditor?: IAppSettingsDefaultEditorApplication[]
 ) {
+  if (!defaultDesktopEditor) {
+    setIsMessage("FAIL");
+    return;
+  }
   const bodyParams = new URLSearchParams();
-  bodyParams.set("desktopC1111ollectionsOpen", event.target.innerText);
+
+  defaultEditorApplication.applicationPath = event.target.innerText;
+  const index = defaultDesktopEditor.findIndex(
+    (p) => p.imageFormats.includes(ImageFormat.jpg) || p.imageFormats.includes(ImageFormat.tiff)
+  );
+  if (index === -1) {
+    defaultDesktopEditor.push(defaultEditorApplication);
+  } else {
+    defaultDesktopEditor[index] = defaultEditorApplication;
+  }
+
+  defaultDesktopEditor.forEach((editorApp, index) => {
+    defaultEditorApplication.imageFormats.forEach((imageFormat, idx) => {
+      bodyParams.append(
+        `DefaultDesktopEditor[${index}].ImageFormats[${idx}]`,
+        imageFormat.toString()
+      );
+    });
+    bodyParams.append(`DefaultDesktopEditor[${index}].ApplicationPath`, editorApp.applicationPath);
+  });
 
   const result = await FetchPost(new UrlQuery().UrlApiAppSettings(), bodyParams.toString());
   if (result.statusCode != 200) {
@@ -48,43 +78,64 @@ const PreferencesAppSettingsDesktop: React.FunctionComponent = () => {
 
   const settings = useGlobalSettings();
 
+  const imageDefaultEditor = appSettings?.defaultDesktopEditor.find(
+    (p) => p.imageFormats.includes(ImageFormat.jpg) || p.imageFormats.includes(ImageFormat.tiff)
+  );
+
   const language = new Language(settings.language);
   const MessageSwitchButtonDesktopCollectionsRawOn = language.key(
     localization.MessageSwitchButtonDesktopCollectionsRawOn
   );
   const MessageSwitchButtonDesktopCollectionsJpegDefaultOff = language.key(
     localization.MessageSwitchButtonDesktopCollectionsJpegDefaultOff
   );
-
-  // appSettings?.desktopCollectionsOpen
-  // List<AppSettingsDefaultEditorApplication> DefaultDesktopEditor
-  // CollectionsOpenType.RawJpegMode DesktopCollectionsOpen
+  const MessageSwitchButtonDesktopApplication = language.key(
+    localization.MessageSwitchButtonDesktopApplication
+  );
+  const MessageSwitchButtonDesktopApplicationDescription = language.key(
+    localization.MessageSwitchButtonDesktopApplicationDescription
+  );
+  const MessageAppSettingDefaultEditorPhotos = language.key(
+    localization.MessageAppSettingDefaultEditorPhotos
+  );
+  const MessageAppSettingDefaultEditorPhotosDescription = language.key(
+    localization.MessageAppSettingDefaultEditorPhotosDescription
+  );
 
   // for showing a notification
   const [isMessage, setIsMessage] = useState("");
 
   return (
     <>
-      <p>Desktop</p>
-      Only used when using Starsky as desktop
-      {isMessage !== "" ? (
-        <div className="warning-box warning-box--optional">{isMessage}</div>
-      ) : null}
-      <SwitchButton
-        isOn={appSettings?.desktopCollectionsOpen === RawJpegMode.Raw}
-        data-test="desktop-collections-open-toggle"
-        isEnabled={true}
-        leftLabel={MessageSwitchButtonDesktopCollectionsJpegDefaultOff}
-        onToggle={(value) => toggleCollections(value, setIsMessage)}
-        rightLabel={MessageSwitchButtonDesktopCollectionsRawOn}
-      />
-      <h4>Default application to edit photos:</h4>
-      <FormControl
-        spellcheck={true}
-        onInput={(value) => updateDefaultEditorPhotos(value, setIsMessage)}
-        name="tags"
-        contentEditable={true}
-      ></FormControl>
+      <div className="content--subheader">{MessageSwitchButtonDesktopApplication}</div>
+      <div className="content--text no-left-padding">
+        <p>{MessageSwitchButtonDesktopApplicationDescription}</p>
+
+        {isMessage !== "" ? (
+          <div className="warning-box warning-box--optional">{isMessage}</div>
+        ) : null}
+        <SwitchButton
+          isOn={appSettings?.desktopCollectionsOpen === RawJpegMode.Raw}
+          data-test="desktop-collections-open-toggle"
+          isEnabled={true}
+          leftLabel={MessageSwitchButtonDesktopCollectionsJpegDefaultOff}
+          onToggle={(value) => toggleCollections(value, setIsMessage)}
+          rightLabel={MessageSwitchButtonDesktopCollectionsRawOn}
+        />
+
+        <h3>{MessageAppSettingDefaultEditorPhotos}</h3>
+        <p>{MessageAppSettingDefaultEditorPhotosDescription} </p>
+        <FormControl
+          spellcheck={true}
+          onBlur={(value) =>
+            updateDefaultEditorPhotos(value, setIsMessage, appSettings?.defaultDesktopEditor)
+          }
+          name="tags"
+          contentEditable={true}
+        >
+          {imageDefaultEditor?.applicationPath}
+        </FormControl>
+      </div>
     </>
   );
 };

starsky/starsky/clientapp/src/localization/localization.json

@@ -291,7 +291,22 @@
     "en": "Jpeg first",
     "nl": "Jpeg eerst"
   },
-
+  "MessageSwitchButtonDesktopApplication": {
+    "en": "AppSettings: Desktop application",
+    "nl": "AppSettings: Desktop applicatie"
+  },
+  "MessageSwitchButtonDesktopApplicationDescription": {
+    "en": "These settings are only available when using as Desktop application",
+    "nl": "Deze instellingen zijn alleen beschikbaar als desktop applicatie"
+  },
+  "MessageAppSettingDefaultEditorPhotos": {
+    "en": "Default application to edit photos:",
+    "nl": "Standaardtoepassing om foto's te bewerken:"
+  },
+  "MessageAppSettingDefaultEditorPhotosDescription": {
+    "en": "Keep emthy to use the default system application ",
+    "nl": "Hou leeg om de standaardtoepassing van het systeem te gebruiken"
+  },
   "temp1": {
     "en": "",
     "nl": ""

starsky/starsky/clientapp/src/style/css/20-content.css

@@ -100,6 +100,11 @@
 .content--text {
   padding: 10px;
 }
+
+.content--text.no-left-padding {
+  padding-left: 0px;
+}
+
 .content--text .date {
   display: inline-block;
   margin-right: 10px;