/projects/:projectId/members #58

tesso57 · 2023-01-04T12:39:06Z

close /project/:project_id/member #38
新規Project作成のメンバー追加の部分を作成しました。

mehm8128 · 2023-01-04T13:15:12Z

多分Figmaの時点でちょっとおかしかったと思うんですけど、このページってprojectの修正ではなくて新規作成のときのメンバー入力画面ですよね？(修正は他の情報と一緒に1つの画面でできるようになっていそう)
だとするとプロジェクトの情報の取得とかそれを使う部分とかいらなくなりそうなので、そこらへん修正してほしいです🙏

mehm8128 · 2023-01-08T11:38:00Z

あとFigmaだとそれぞれのメンバーの在籍期間を入力するフォームがない気がするのでどこかに入れたいですね

mehm8128 · 2023-08-07T06:54:49Z

詳細画面にまとめたのでメモ
https://www.figma.com/file/BVnhB2JyTjKsGKdnAJDksb/traPortfolio?type=design&node-id=741-980&mode=design&t=gkdqSoqfB7c4gZTP-4

mehm8128 · 2023-10-10T07:05:51Z

そういえば在籍期間フォームのデザインもなんとなくで作りました

mehm8128

細かいところ見れてないですが一旦
確認お願いします:pray:

src/pages/ProjectNew.vue

src/pages/ProjectMembers.vue

src/components/UI/FormProjectDuration.vue

src/components/Projects/ProjectMember.vue

src/components/UI/FormProjectDuration.vue

src/pages/ProjectNew.vue

mehm8128

1個見逃してました

src/components/Projects/ProjectMember.vue

tesso57 · 2023-11-06T08:14:34Z

再度レビューお願いします。
相談なんですが、user情報とduration情報を一緒にするために、MemberInputをGenericを利用して解決しました。
Generic にすると、複雑さが増して無理やり共通化しているから良くないかなって少し迷ってます。

mehm8128

いくつかお願いします:pray:

Generic にすると、複雑さが増して無理やり共通化しているから良くないかな

そこまで無理やりな共通化だとは感じなかったので大丈夫だと思います:blob_thumbs_up:

src/pages/ProjectNew.vue

src/use/validate.ts

src/components/Projects/ProjectMember.vue

src/pages/ProjectNew.vue

tesso57 · 2023-11-21T12:34:48Z

再レビューお願いします。:pray:
ここらへんの実装がいい感じにできなくて困ってます。
一度、grid で実装したんですが、表示幅が足りないと要素が飛び出てしまいやめました。今の実装だと、widthを30%しているので微妙に感じています。

mehm8128

ありがとうございます、思ってたより複雑な感じになってしまいましたね:thonk_sweat:

一度、grid で実装したんですが、表示幅が足りないと要素が飛び出てしまいやめました。今の実装だと、widthを30%しているので微妙に感じています。

は一旦このままで大丈夫だと思います:pray:
最後に1箇所だけお願いしたいです

mehm8128 · 2023-11-28T10:45:26Z

src/components/UI/BaseSelect.vue

+const isEquals = (a: T, b: T) => {
+  if (value.value !== null && typeof value.value === 'object') {
+    return JSON.stringify(a) === JSON.stringify(b)
+  } else {
+    return a === b
+  }
+}


他のところでも使えそうなので、lib/deepFreeze.tsみたいに切り出しちゃってよさそうです

今回実装した部分では options からのみ modelValue が生成されてるので問題なさそうなんですが、stringify でオブジェクトを比較する方法はプロパティの順番を変えたりするだけで等価でなくなってしまうので、そこは留意したほうが良さそうです
(特に util として切り出す場合)
ref: Playground

対策としては

オブジェクトを再帰的に等しいか比較する
正直めんどくさいので https://github.com/NickGard/tiny-isequal とかのライブラリに頼ったほうがいいと思います (このライブラリがベストかはわからないです)

オブジェクトの特定の比較可能なプロパティを使って比較するようにする
この場合は optional な Props として compareWith とか by とかの keyof T or (T) => any or (T, T) => boolean (もしくはこれらの和集合) をとって、指定されていない場合は object の id、指定されている場合はこれらから算出される値をつかって比較することになります
https://headlessui.com/react/listbox#binding-objects-as-values とかはこの方式でした

とかがありそうです (個人的には 2 のほうが好みです)

一応 BaseSelect は今回いじらないことにして、src/components/UI/FormProjectDuration.vue で BaseSelect には一意な key のみを渡して、key からオブジェクトを算出するようにする方針もあります

SSlime-s · 2023-12-02T09:19:37Z

src/pages/ProjectNew.vue

+            :user="member"
+            :class="$style.projectMember"
+            @delete="handleDelete"
+            @update="member.duration = $event"


意図してたら申し訳ないのですが、ここ下のイベントを update:modelValue で発行するようにしたら @update を丸々消せませんか？

SSlime-s · 2023-12-02T09:19:47Z

src/components/UI/FormProjectDuration.vue

-        dateType === 'sinceSemester'
-          ? numValue
-          : props.modelValue.since.semester
+  .map((_, i) => [


一応 .map して .flat するのは .flatMap でかけます 🤟
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

SSlime-s · 2023-12-02T10:08:47Z

src/components/UI/BaseSelect.vue

+const isEquals = (a: T, b: T) => {
+  if (value.value !== null && typeof value.value === 'object') {
+    return JSON.stringify(a) === JSON.stringify(b)
+  } else {
+    return a === b
+  }
+}


今回実装した部分では options からのみ modelValue が生成されてるので問題なさそうなんですが、stringify でオブジェクトを比較する方法はプロパティの順番を変えたりするだけで等価でなくなってしまうので、そこは留意したほうが良さそうです
(特に util として切り出す場合)
ref: Playground

対策としては

オブジェクトを再帰的に等しいか比較する
正直めんどくさいので https://github.com/NickGard/tiny-isequal とかのライブラリに頼ったほうがいいと思います (このライブラリがベストかはわからないです)

オブジェクトの特定の比較可能なプロパティを使って比較するようにする
この場合は optional な Props として compareWith とか by とかの keyof T or (T) => any or (T, T) => boolean (もしくはこれらの和集合) をとって、指定されていない場合は object の id、指定されている場合はこれらから算出される値をつかって比較することになります
https://headlessui.com/react/listbox#binding-objects-as-values とかはこの方式でした

とかがありそうです (個人的には 2 のほうが好みです)

一応 BaseSelect は今回いじらないことにして、src/components/UI/FormProjectDuration.vue で BaseSelect には一意な key のみを渡して、key からオブジェクトを算出するようにする方針もあります

mehm8128 · 2023-12-26T12:42:12Z

@SSlime-s レビューお願いしたいです:pray:

mehm8128

見た感じよさそうな気がするのでマージします
1年間ありがとうございました

tesso57 added 2 commits January 4, 2023 21:31

⚡️ impl isDisabled

6817666

✨ impl projects/:projectId/members

3832d13

tesso57 self-assigned this Mar 8, 2023

Merge branch 'main' into feat/projects/project_id/member

6502143

tesso57 added 4 commits October 31, 2023 16:43

Merge branch 'main'

6e936f1

⚡️ form-project-durationの見た目を変更

ac56bbe

⚡️ impl project menber

1a37b29

🐛 fix

323d2a7

tesso57 requested a review from mehm8128 October 31, 2023 13:57

mehm8128 reviewed Oct 31, 2023

View reviewed changes

src/components/Projects/ProjectMember.vue Outdated Show resolved Hide resolved

tesso57 added 2 commits November 4, 2023 07:46

🚧 WIP

1f32807

⚡️ validation を追加

265c030

tesso57 requested a review from mehm8128 November 6, 2023 08:12

mehm8128 reviewed Nov 6, 2023

View reviewed changes

tesso57 added 3 commits November 15, 2023 17:43

⚡️ undefined 周りを修正

3c7e635

⚡️ validation 周りを修正

3a511fb

⚡️ 揃える

0166491

tesso57 requested a review from mehm8128 November 21, 2023 12:34

Merge branch 'main' into feat/projects/project_id/member

8d5ef0c

mehm8128 reviewed Nov 28, 2023

View reviewed changes

SSlime-s reviewed Dec 2, 2023

View reviewed changes

🐛 fix compare alg

5f2bc87

mehm8128 requested a review from SSlime-s December 26, 2023 12:38

mehm8128 approved these changes Jan 4, 2024

View reviewed changes

mehm8128 merged commit 1134b37 into main Jan 4, 2024
5 checks passed

mehm8128 deleted the feat/projects/project_id/member branch January 4, 2024 09:35

mehm8128 linked an issue Jan 8, 2024 that may be closed by this pull request

FormProjectDurationの構造を変える #90

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

/projects/:projectId/members #58

/projects/:projectId/members #58

tesso57 commented Jan 4, 2023

mehm8128 commented Jan 4, 2023

mehm8128 commented Jan 8, 2023

mehm8128 commented Aug 7, 2023

mehm8128 commented Oct 10, 2023

mehm8128 left a comment

mehm8128 left a comment

tesso57 commented Nov 6, 2023 •

edited

Loading

mehm8128 left a comment

tesso57 commented Nov 21, 2023

mehm8128 left a comment

mehm8128 Nov 28, 2023

SSlime-s Dec 2, 2023

SSlime-s Dec 2, 2023

SSlime-s Dec 2, 2023

SSlime-s Dec 2, 2023

mehm8128 commented Dec 26, 2023

mehm8128 left a comment

/projects/:projectId/members #58

/projects/:projectId/members #58

Conversation

tesso57 commented Jan 4, 2023

mehm8128 commented Jan 4, 2023

mehm8128 commented Jan 8, 2023

mehm8128 commented Aug 7, 2023

mehm8128 commented Oct 10, 2023

mehm8128 left a comment

Choose a reason for hiding this comment

mehm8128 left a comment

Choose a reason for hiding this comment

tesso57 commented Nov 6, 2023 • edited Loading

mehm8128 left a comment

Choose a reason for hiding this comment

tesso57 commented Nov 21, 2023

mehm8128 left a comment

Choose a reason for hiding this comment

mehm8128 Nov 28, 2023

Choose a reason for hiding this comment

SSlime-s Dec 2, 2023

Choose a reason for hiding this comment

SSlime-s Dec 2, 2023

Choose a reason for hiding this comment

SSlime-s Dec 2, 2023

Choose a reason for hiding this comment

SSlime-s Dec 2, 2023

Choose a reason for hiding this comment

mehm8128 commented Dec 26, 2023

mehm8128 left a comment

Choose a reason for hiding this comment

tesso57 commented Nov 6, 2023 •

edited

Loading