見出し画像

editorsetというモジュール

ヴューモジュールというと
リストとかツリーという単機能だけど
データ編集機能をパッケージしたeditorsetというモジュール。

データ編集というと、編集フォームとリスト。
リストには絞り込み機能があるといいよね。

これがパラメータ指定だけでできると便利だろう。

'edit/type' => 'editorset',
'edit/list/ajax/url' => '/pms/api/list',
'edit/append/ajax/url' => '/pms/api/append',
'edit/update/ajax/url' => '/pms/api/update',
'edit/delete/ajax/url' => '/pms/api/delete',
PROJECT."/dataset" => 'product_data',

'product_data/type' => 'database',
'product_data/table' => 'product',
'product_data/fields' => 'owner;project;caption;category;status;definition;docs;mods;budget;memo',
'product_data/fields/definition/dataType' => 'note',
'product_data/fields/memo/dataType' => 'note',
'product_data/fields/category/options' => '1:project;2:document;3:product;4:person;5:location',
'product_data/fields/status/options' => '0:planning;1:waiting;2:making;3:complete;-1:discard',

これだけで
↓こんなのができたら、有り難くない?

でも、必ず難癖が付く。

「〇〇をやるにはどうする?」
「それだけじゃ済まないだろ」
的な。
しかも使う前からの空想で
挙句の果てには却下する。

「〇〇をやりたい」
なら改造すればいい。

でも自分でやらないとならないと思うと
コードを読むのが面倒だし下手なバグを作っちゃわないか心配だし
自前で作っちゃった方が早いような。
その分もらえるんだし・・・。
これがエンジニア目線。

そうやって同じような・・・どころか同じ機能があちこちで作られる。
見も知らないどこか余所のことならいざ知らず
同じ会社の別なプロジェクトで。

自分でカスタマイズするんじゃなくて
「〇〇をやりたい」
と誰かにオーダーできたらよくない?
そうすればコストも安くなるし、工数も減るし、安定してる。
これが経営者目線。

そのためには”仕組み”が要る。
そういうモジュールを作って管理する”専門部署”があって。
今流行りの生成AIにリクエストするような感覚でできるといい。

もしかしたら中の人はコミュ下手のハッタツくんが向いてるかもしれない。
世間話や冗談に付き合うのは無理だけど
曖昧な要求を”技術的常識”に照らして分析理解してさらに”実装可能な”妄想を広げ、もやっとしたプレゼンテーションじゃなくプラグマティックなオブジェクトに落とし込むのは、案外得意だったりする。

こうなると人材採用の基準や方法も変わってくるし、間口も広がる。

ただそのうちほんとにAIになるだろうけど。

ちなみにこのeditorsetみたいなの
なんてリクエストしたらいいかな。

「編集フォームとリストと絞り込み条件フォームを持った汎用的なビューと機能のセットのVue.jsコンポーネントを作って」
とか。

GPT-4はこんな風に返した。

この例では以下の機能を持っています:

1. リストビュー
2. 絞り込み条件フォーム
3. 編集フォーム

<template>
  <div>
    <!-- 絞り込み条件フォーム -->
    <form @submit.prevent="filterItems">
      <input v-model="filterQuery" type="text" placeholder="Filter items">
      <button type="submit">Apply filter</button>
    </form>

    <!-- リストビュー -->
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">
        {{ item }}
        <button @click="selectItem(item)">Edit</button>
      </li>
    </ul>

    <!-- 編集フォーム -->
    <form v-if="selectedItem" @submit.prevent="updateItem">
      <input v-model="editedItem" type="text">
      <button type="submit">Save changes</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'], // Sample data
      filterQuery: '',
      filteredItems: [],
      selectedItem: null,
      editedItem: '',
    };
  },
  created() {
    this.filteredItems = this.items;
  },
  methods: {
    filterItems() {
      if (!this.filterQuery.trim()) {
        this.filteredItems = this.items;
      } else {
        this.filteredItems = this.items.filter(item => item.includes(this.filterQuery));
      }
    },
    selectItem(item) {
      this.selectedItem = item;
      this.editedItem = item;
    },
    updateItem() {
      const index = this.items.indexOf(this.selectedItem);
      if (index !== -1) {
        this.items.splice(index, 1, this.editedItem);
        this.filterItems();
        this.selectedItem = null;
        this.editedItem = '';
      }
    },
  },
};
</script>

たったあれだけで・・・
ちょっとビビるね。
(・_・;)

でも実際はここからが大変なんだけど。

この記事が気に入ったらサポートをしてみませんか?