Skip to content

Commit 8033aa1

Browse files
SalihuDicksonSalihuDickson
committed
add checks for deletion of min instances
1 parent 3f845d2 commit 8033aa1

File tree

3 files changed

+40
-45
lines changed

3 files changed

+40
-45
lines changed

‎packages/ecc-utils-design/src/components/form/form.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ export default class EccUtilsDesignForm extends LitElement {
199199

200200
render() {
201201
return html`
202-
<div ecc-form-item>
202+
<div ecc-form>
203203
${repeat(
204204
this.items,
205205
() => _.uniqueId("ecc-form-item-"),

‎packages/ecc-utils-design/src/components/form/formGroup.ts

+34-31
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ export default class EccUtilsDesignFormGroup extends LitElement {
1717

1818
// TODO
1919
// build required but empty functionality
20-
// add functionality to collect all ecc-input fields in the group
21-
// same for the form
2220
@property({ type: String, reflect: true }) label = "";
2321
@property({ type: String, reflect: true }) key = "";
2422
@property({ type: String, reflect: true }) type: "array" | "group" = "group";
@@ -35,7 +33,7 @@ export default class EccUtilsDesignFormGroup extends LitElement {
3533
// group item options
3634
@property({ type: Boolean, reflect: true }) collapsible = false;
3735

38-
@state() private arrayItems: Array<{
36+
@state() private arrayInstances: Array<{
3937
id: number;
4038
items: Element[];
4139
}> = [];
@@ -48,10 +46,13 @@ export default class EccUtilsDesignFormGroup extends LitElement {
4846
protected firstUpdated(): void {
4947
if (this.type === "array") {
5048
this.originalInstance = Array.from(this.querySelectorAll(":scope > *"));
51-
this.arrayItems = Array.from({ length: this.instances }, (__, index) => ({
52-
id: index,
53-
items: this.originalInstance,
54-
}));
49+
this.arrayInstances = Array.from(
50+
{ length: this.instances },
51+
(__, index) => ({
52+
id: index,
53+
items: this.originalInstance,
54+
})
55+
);
5556
} else {
5657
this.items = Array.from(this.querySelectorAll(":scope > *"));
5758
}
@@ -79,11 +80,7 @@ export default class EccUtilsDesignFormGroup extends LitElement {
7980
const { parentElement } = element;
8081
if (!parentElement) return;
8182

82-
const specialAttributes = [
83-
"ecc-array-item",
84-
"ecc-group-item",
85-
"ecc-form-item",
86-
];
83+
const specialAttributes = ["ecc-array", "ecc-group", "ecc-form"];
8784
const hasSpecialAttribute = specialAttributes.some((attr) =>
8885
parentElement.hasAttribute(attr)
8986
);
@@ -100,15 +97,15 @@ export default class EccUtilsDesignFormGroup extends LitElement {
10097
return html`${this.collapsible
10198
? repeat(
10299
this.items,
103-
() => _.uniqueId("ecc-group-item-"),
100+
() => _.uniqueId("ecc-group-"),
104101
(item) => html`
105102
<sl-details
106103
data-testid="group-collapsible"
107104
summary=${`${this.label} ${this.required ? "*" : ""}`}
108105
>
109106
<div
110107
class="group-content"
111-
ecc-group-item
108+
ecc-group
112109
ecc-group-key="${this.key}"
113110
path="${this.path}"
114111
>
@@ -119,12 +116,12 @@ export default class EccUtilsDesignFormGroup extends LitElement {
119116
)
120117
: repeat(
121118
this.items,
122-
() => _.uniqueId("group-item-"),
119+
() => _.uniqueId("ecc-group-"),
123120
(item) => html`
124121
<span>${this.label} ${this.required ? "*" : ""} </span>
125122
<div
126123
class="group-content"
127-
ecc-group-item
124+
ecc-group
128125
ecc-group-key="${this.key}"
129126
path="${this.path}"
130127
>
@@ -137,16 +134,22 @@ export default class EccUtilsDesignFormGroup extends LitElement {
137134
private renderArrayTemplate(): TemplateResult {
138135
const resolveAddButtonIsActive = () => {
139136
if (!this.maxInstances) return true;
140-
if (Number(this.maxInstances) > this.arrayItems.length || 0) return true;
137+
if (Number(this.maxInstances) > this.arrayInstances.length || 0)
138+
return true;
141139
return false;
142140
};
143141

144-
const resolveDeleteButtonIsActive = () => true;
142+
const resolveDeleteButtonIsActive = () => {
143+
if (!this.minInstances) return true;
144+
if (Number(this.minInstances) >= this.arrayInstances.length || 0)
145+
return false;
146+
return true;
147+
};
145148

146149
const addItem = () => {
147150
if (resolveAddButtonIsActive()) {
148-
this.arrayItems.push({
149-
id: this.arrayItems.length,
151+
this.arrayInstances.push({
152+
id: this.arrayInstances.length,
150153
items: this.originalInstance,
151154
});
152155

@@ -155,7 +158,7 @@ export default class EccUtilsDesignFormGroup extends LitElement {
155158
new CustomEvent("ecc-utils-array-add", {
156159
detail: {
157160
key: this.key,
158-
instances: this.arrayItems.length,
161+
instances: this.arrayInstances.length,
159162
},
160163
bubbles: true,
161164
composed: true,
@@ -166,16 +169,16 @@ export default class EccUtilsDesignFormGroup extends LitElement {
166169

167170
const deleteItem = (index: number) => {
168171
if (resolveDeleteButtonIsActive()) {
169-
const newItems = [...this.arrayItems];
172+
const newItems = [...this.arrayInstances];
170173
newItems.splice(index, 1);
171174

172-
this.arrayItems = newItems;
175+
this.arrayInstances = newItems;
173176
this.requestUpdate();
174177
this.dispatchEvent(
175178
new CustomEvent("ecc-utils-array-delete", {
176179
detail: {
177180
key: this.key,
178-
instances: this.arrayItems.length,
181+
instances: this.arrayInstances.length,
179182
},
180183
bubbles: true,
181184
composed: true,
@@ -235,14 +238,14 @@ export default class EccUtilsDesignFormGroup extends LitElement {
235238
</sl-button>
236239
</div>
237240
${repeat(
238-
this.arrayItems,
239-
(item) => item.id,
240-
(items, index) => html`
241+
this.arrayInstances,
242+
(instance) => instance.id,
243+
(instance, index) => html`
241244
<div
242245
path="${this.path}[${index}]"
243-
ecc-array-item
244-
class="array-item"
245-
data-testid="array-item"
246+
ecc-array
247+
class="array"
248+
data-testid="array"
246249
data-label=${`${this.label}-${index}`}
247250
>
248251
<sl-button
@@ -271,7 +274,7 @@ export default class EccUtilsDesignFormGroup extends LitElement {
271274
</sl-button>
272275
<div class="array-item-container">
273276
${repeat(
274-
items.items,
277+
instance.items,
275278
(item) => item.id,
276279
(item) => arrayDiv(item, index)
277280
)}

‎packages/ecc-utils-design/src/components/form/formInput.ts

+5-13
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,7 @@ export default class EccUtilsDesignFormInput extends LitElement {
7979
const { parentElement } = element;
8080
if (!parentElement) return;
8181

82-
const specialAttributes = [
83-
"ecc-array-item",
84-
"ecc-group-item",
85-
"ecc-form-item",
86-
];
82+
const specialAttributes = ["ecc-array", "ecc-group", "ecc-form"];
8783
const hasSpecialAttribute = specialAttributes.some((attr) =>
8884
parentElement.hasAttribute(attr)
8985
);
@@ -132,29 +128,25 @@ export default class EccUtilsDesignFormInput extends LitElement {
132128
this.requestUpdate();
133129
}
134130

135-
// eslint-disable-next-line consistent-return
136131
private handleFileUpload(e: Event) {
137132
const { files } = e.target as HTMLInputElement;
138133

139134
if (!files?.length) {
140-
return this.handleShowAlert("error", "No file selected for upload.");
135+
this.handleShowAlert("error", "No file selected for upload.");
136+
return;
141137
}
142138

143-
// fire change event
144139
this.handleFireChangeEvent();
145140

146141
if (this.protocol === "native") {
147142
this.value = files;
148143
this.requestUpdate();
149-
// eslint-disable-next-line consistent-return
150144
return;
151145
}
152146

153147
if (!this.tusEndpoint) {
154-
return this.handleShowAlert(
155-
"error",
156-
"No tus endpoint provided for tus uploads"
157-
);
148+
this.handleShowAlert("error", "No tus endpoint provided for tus uploads");
149+
return;
158150
}
159151

160152
Array.from(files).forEach((file) => {

0 commit comments

Comments
 (0)