web/admin: migrate more forms
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
		| @ -3,41 +3,38 @@ import { t } from "@lingui/macro"; | ||||
| import { css, CSSResult, customElement, property } from "lit-element"; | ||||
| import { html, TemplateResult } from "lit-html"; | ||||
| import { DEFAULT_CONFIG } from "../../api/Config"; | ||||
| import { Form } from "../../elements/forms/Form"; | ||||
| import { until } from "lit-html/directives/until"; | ||||
| import { ifDefined } from "lit-html/directives/if-defined"; | ||||
| import { first, groupBy } from "../../utils"; | ||||
| import "../../elements/forms/HorizontalFormElement"; | ||||
| import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css"; | ||||
| import PFContent from "@patternfly/patternfly/components/Content/content.css"; | ||||
| import { ModelForm } from "../../elements/forms/ModelForm"; | ||||
|  | ||||
| enum target { | ||||
|     policy, group, user | ||||
| } | ||||
|  | ||||
| @customElement("ak-policy-binding-form") | ||||
| export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
| export class PolicyBindingForm extends ModelForm<PolicyBinding, string> { | ||||
|  | ||||
|     @property({attribute: false}) | ||||
|     set binding(value: PolicyBinding | undefined) { | ||||
|         this._binding = value; | ||||
|         if (value?.policyObj) { | ||||
|             this.policyGroupUser = target.policy; | ||||
|         } | ||||
|         if (value?.groupObj) { | ||||
|             this.policyGroupUser = target.group; | ||||
|         } | ||||
|         if (value?.userObj) { | ||||
|             this.policyGroupUser = target.user; | ||||
|         } | ||||
|     loadInstance(pk: string): Promise<PolicyBinding> { | ||||
|         return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsRead({ | ||||
|             policyBindingUuid: pk | ||||
|         }).then(binding => { | ||||
|             if (binding?.policyObj) { | ||||
|                 this.policyGroupUser = target.policy; | ||||
|             } | ||||
|             if (binding?.groupObj) { | ||||
|                 this.policyGroupUser = target.group; | ||||
|             } | ||||
|             if (binding?.userObj) { | ||||
|                 this.policyGroupUser = target.user; | ||||
|             } | ||||
|             return binding; | ||||
|         }); | ||||
|     } | ||||
|  | ||||
|     get binding(): PolicyBinding | undefined { | ||||
|         return this._binding; | ||||
|     } | ||||
|  | ||||
|     _binding?: PolicyBinding; | ||||
|  | ||||
|     @property() | ||||
|     targetPk?: string; | ||||
|  | ||||
| @ -48,7 +45,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|     policyOnly = false; | ||||
|  | ||||
|     getSuccessMessage(): string { | ||||
|         if (this.binding) { | ||||
|         if (this.instance) { | ||||
|             return t`Successfully updated binding.`; | ||||
|         } else { | ||||
|             return t`Successfully created binding.`; | ||||
| @ -64,9 +61,9 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|     } | ||||
|  | ||||
|     send = (data: PolicyBinding): Promise<PolicyBinding> => { | ||||
|         if (this.binding) { | ||||
|         if (this.instance) { | ||||
|             return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUpdate({ | ||||
|                 policyBindingUuid: this.binding.pk || "", | ||||
|                 policyBindingUuid: this.instance.pk || "", | ||||
|                 data: data | ||||
|             }); | ||||
|         } else { | ||||
| @ -81,7 +78,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|             ${groupBy<Policy>(policies, (p => p.verboseName || "")).map(([group, policies]) => { | ||||
|                 return html`<optgroup label=${group}> | ||||
|                     ${policies.map(p => { | ||||
|                         const selected = (this.binding?.policy === p.pk); | ||||
|                         const selected = (this.instance?.policy === p.pk); | ||||
|                         return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>${p.name}</option>`; | ||||
|                     })} | ||||
|                 </optgroup>`; | ||||
| @ -90,8 +87,8 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|     } | ||||
|  | ||||
|     getOrder(): Promise<number> { | ||||
|         if (this.binding) { | ||||
|             return Promise.resolve(this.binding.order); | ||||
|         if (this.instance) { | ||||
|             return Promise.resolve(this.instance.order); | ||||
|         } | ||||
|         return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsList({ | ||||
|             target: this.targetPk || "", | ||||
| @ -154,7 +151,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|                         name="policy" | ||||
|                         ?hidden=${this.policyGroupUser !== target.policy}> | ||||
|                         <select class="pf-c-form-control"> | ||||
|                             <option value="" ?selected=${this.binding?.policy === undefined}>---------</option> | ||||
|                             <option value="" ?selected=${this.instance?.policy === undefined}>---------</option> | ||||
|                             ${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({ | ||||
|                                 ordering: "pk" | ||||
|                             }).then(policies => { | ||||
| @ -167,12 +164,12 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|                         name="group" | ||||
|                         ?hidden=${this.policyGroupUser !== target.group}> | ||||
|                         <select class="pf-c-form-control"> | ||||
|                             <option value="" ?selected=${this.binding?.group === undefined}>---------</option> | ||||
|                             <option value="" ?selected=${this.instance?.group === undefined}>---------</option> | ||||
|                             ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({ | ||||
|                                 ordering: "pk" | ||||
|                             }).then(groups => { | ||||
|                                 return groups.results.map(group => { | ||||
|                                     return html`<option value=${ifDefined(group.pk)} ?selected=${group.pk === this.binding?.group}>${group.name}</option>`; | ||||
|                                     return html`<option value=${ifDefined(group.pk)} ?selected=${group.pk === this.instance?.group}>${group.name}</option>`; | ||||
|                                 }); | ||||
|                             }), html`<option>${t`Loading...`}</option>`)} | ||||
|                         </select> | ||||
| @ -182,22 +179,22 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|                         name="user" | ||||
|                         ?hidden=${this.policyGroupUser !== target.user}> | ||||
|                         <select class="pf-c-form-control"> | ||||
|                             <option value="" ?selected=${this.binding?.user === undefined}>---------</option> | ||||
|                             <option value="" ?selected=${this.instance?.user === undefined}>---------</option> | ||||
|                             ${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({ | ||||
|                                 ordering: "pk" | ||||
|                             }).then(users => { | ||||
|                                 return users.results.map(user => { | ||||
|                                     return html`<option value=${ifDefined(user.pk)} ?selected=${user.pk === this.binding?.user}>${user.name}</option>`; | ||||
|                                     return html`<option value=${ifDefined(user.pk)} ?selected=${user.pk === this.instance?.user}>${user.name}</option>`; | ||||
|                                 }); | ||||
|                             }), html`<option>${t`Loading...`}</option>`)} | ||||
|                         </select> | ||||
|                     </ak-form-element-horizontal> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <input required name="target" type="hidden" value=${ifDefined(this.binding?.target || this.targetPk)}> | ||||
|             <input required name="target" type="hidden" value=${ifDefined(this.instance?.target || this.targetPk)}> | ||||
|             <ak-form-element-horizontal name="enabled"> | ||||
|                 <div class="pf-c-check"> | ||||
|                     <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.binding?.enabled, true)}> | ||||
|                     <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.enabled, true)}> | ||||
|                     <label class="pf-c-check__label"> | ||||
|                         ${t`Enabled`} | ||||
|                     </label> | ||||
| @ -213,7 +210,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> { | ||||
|                 label=${t`Timeout`} | ||||
|                 ?required=${true} | ||||
|                 name="timeout"> | ||||
|                 <input type="number" value="${first(this.binding?.timeout, 30)}" class="pf-c-form-control" required> | ||||
|                 <input type="number" value="${first(this.instance?.timeout, 30)}" class="pf-c-form-control" required> | ||||
|             </ak-form-element-horizontal> | ||||
|         </form>`; | ||||
|     } | ||||
|  | ||||
		Reference in New Issue
	
	Block a user
	 Jens Langhammer
					Jens Langhammer