Save with CruResource

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

shell/pages/c/_cluster/auth/user.retention/index.vue

@@ -2,6 +2,7 @@
 import { defineComponent, ref, onMounted } from 'vue';
 
 import TabTitle from '@shell/components/TabTitle';
+import CruResource from '@shell/components/CruResource.vue';
 import { useStore } from '@shell/composables/useStore';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -16,6 +17,7 @@ export default defineComponent({
     Checkbox,
     LabeledInput,
     ToggleSwitch,
+    CruResource,
   },
   setup() {
     const store = useStore();
@@ -43,6 +45,19 @@ export default defineComponent({
       loading.value = false;
     });
 
+    const save = async(btnCB) => {
+      try {
+        await disableInactiveUserAfter?.value?.save();
+        await deleteInactiveUserAfter?.value?.save();
+        await userRetentionCron?.value?.save();
+        await userRetentionDryRun?.value?.save();
+        await userLastLoginDefault?.value?.save();
+        btnCB(true);
+      } catch (err) {
+        console.log(err);
+        btnCB(false);
+      }
+    };
 
     return {
       disableAfterPeriod,
@@ -87,61 +102,70 @@ export default defineComponent({
       </div>
     </header>
     <h2>User retention</h2>
-    <div
-      v-if="!loading"
-      class="form-user-retention"
+    <cru-resource
+      mode="EDIT"
+      :resource="{ }"
+      :can-yaml="false"
+      @finish="save"
     >
-      <div class="input-fieldset">
-        <checkbox
-          v-model="disableAfterPeriod"
-          label="Disable user accounts after an inactivity  period (days since last login)"
-        />
-        <labeled-input
-          v-model="disableInactiveUserAfter.value"
-          label="Inactivity period (days)"
-          :disabled="!disableAfterPeriod"
-        />
-      </div>
-      <div class="input-fieldset">
-        <checkbox
-          v-model="deleteAfterPeriod"
-          label="Delete user accounts after an inactivity  period (days since last login)"
-        />
-        <labeled-input
-          v-model="deleteInactiveUserAfter.value"
-          label="Inactivity period (days)"
-          :disabled="!deleteAfterPeriod"
-        />
-      </div>
-      <template
-        v-if="disableAfterPeriod || deleteAfterPeriod"
+      <div
+        v-if="!loading"
+        class="form-user-retention"
       >
         <div class="input-fieldset">
+          <checkbox
+            v-model="disableAfterPeriod"
+            label="Disable user accounts after an inactivity  period (days since last login)"
+          />
           <labeled-input
-            v-model="userRetentionCron.value"
-            required
-            type="cron"
-            label="User retention process schedule"
-            sub-label="The user retention process runs as a cron job (required)"
+            v-model="disableInactiveUserAfter.value"
+            label="Inactivity period (days)"
+            :disabled="!disableAfterPeriod"
           />
         </div>
-        <div class="input-fieldset condensed">
-          <toggle-switch
-            v-model="userRetentionDryRun.value"
-            on-label="Run the user retention process in DRY mode (no changes will be applied)"
+        <div class="input-fieldset">
+          <checkbox
+            v-model="deleteAfterPeriod"
+            label="Delete user accounts after an inactivity  period (days since last login)"
           />
-          <span class="input-detail">You can check the logs to see which accounts would be affected</span>
-        </div>
-        <div class="input-fieldset condensed">
           <labeled-input
-            v-model="userLastLoginDefault.value"
-            label="Default last login (ms)"
-            sub-label="Accounts without a registered last login timestamp will get this as a default"
-            placeholder="Unix timestamp"
+            v-model="deleteInactiveUserAfter.value"
+            label="Inactivity period (days)"
+            :disabled="!deleteAfterPeriod"
           />
         </div>
-      </template>
-    </div>
+        <template
+          v-if="disableAfterPeriod || deleteAfterPeriod"
+        >
+          <div class="input-fieldset">
+            <labeled-input
+              v-model="userRetentionCron.value"
+              required
+              type="cron"
+              label="User retention process schedule"
+              sub-label="The user retention process runs as a cron job (required)"
+            />
+          </div>
+          <div class="input-fieldset condensed">
+            <toggle-switch
+              v-model="userRetentionDryRun.value"
+              :onValue="'true'"
+              :offValue="'false'"
+              on-label="Run the user retention process in DRY mode (no changes will be applied)"
+            />
+            <span class="input-detail">You can check the logs to see which accounts would be affected</span>
+          </div>
+          <div class="input-fieldset condensed">
+            <labeled-input
+              v-model="userLastLoginDefault.value"
+              label="Default last login (ms)"
+              sub-label="Accounts without a registered last login timestamp will get this as a default"
+              placeholder="Unix timestamp"
+            />
+          </div>
+        </template>
+      </div>
+    </cru-resource>
   </div>
 </template>